/* ============================================================
   PILOTO DE DISEÑO — Fase 1 · estilos
   Todo aditivo. Sin este archivo el sitio queda igual que antes.
   ============================================================ */

/* Entrada del héroe. 620 ms por elemento, escalonados desde JS. */
@keyframes bpEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Orbe dentro del buscador del héroe ---------- */
.bp-orbe-buscador {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  opacity: 0.55;
  transition: opacity 260ms ease;
}
.bp-orbe-buscador.activo { opacity: 1; }

/* En teléfono el orbe se mantiene, solo un poco más chico para
   no comerle ancho al placeholder. */
@media (max-width: 639px) {
  .bp-orbe-buscador { opacity: 0.7; }
}

/* ---------- La respuesta se hace notar ----------
   Cuando la tarjeta del héroe cambia de contenido, un realce breve
   la señala. Sin esto el cambio ocurre pero nadie lo registra: es
   instantáneo y queda 200 px por debajo del buscador. */
.bp-respuesta {
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.bp-respuesta-nueva {
  animation: bpResp 1400ms cubic-bezier(.16,1,.3,1);
}
@keyframes bpResp {
  0%   { border-color: rgba(82,188,245,0.95);
         box-shadow: 0 0 0 0 rgba(82,188,245,0.45), 0 0 34px -6px rgba(82,188,245,0.6); }
  55%  { border-color: rgba(82,188,245,0.7);
         box-shadow: 0 0 0 9px rgba(82,188,245,0), 0 0 26px -8px rgba(82,188,245,0.35); }
  100% { border-color: rgba(82,188,245,0.3);
         box-shadow: 0 0 0 0 rgba(82,188,245,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-respuesta-nueva { animation: none; border-color: rgba(82,188,245,0.9); }
}

/* ============================================================
   PILOTO Fase 2 — estilos
   ============================================================ */

/* D. Transición entre páginas.
   El navegador hace un fundido cruzado en vez del parpadeo blanco
   al cambiar de página. Es una línea, declarativa: los navegadores
   que no lo soportan simplemente la ignoran. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* C. Saltar al contenido: invisible hasta que se navega con teclado. */
.bp-saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  background: #0875e3;
  color: #fff;
  font: 600 13px 'Work Sans', sans-serif;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: top 180ms cubic-bezier(.16,1,.3,1);
}
.bp-saltar:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Estado de carga de los mapas ---------- */
.bp-mapa-cargando {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 12, 13, 0.72);
  backdrop-filter: blur(2px);
  transition: opacity 400ms ease;
  pointer-events: none;
}
.bp-mapa-cargando.bp-fuera { opacity: 0; }
.bp-mapa-caja {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 14px;
  border-radius: 30px;
  background: rgba(23, 21, 25, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.bp-mapa-caja span {
  font: 400 13px 'Work Sans', sans-serif;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .bp-mapa-caja span { display: none; }
  .bp-mapa-caja { padding: 11px; }
}

/* ---------- La pila se abre alrededor de la capa activa ---------- */
.bp-lamina {
  transition: translate 560ms cubic-bezier(.16, 1, .3, 1),
              scale 560ms cubic-bezier(.16, 1, .3, 1),
              opacity 420ms ease,
              filter 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .bp-lamina { transition: none; }
}