/* PORTADA EN LA PLAYA INMERSIVA (dueno, 30/10/2026: opcion 3 en computadora y 4 en celular). Hero de la foto 5K de la
   playa con las ocho sandalias en dos variantes que viven en el mismo #hero-stage:
   - Computadora, (min-width: 701px) and (orientation: landscape): opcion 3 «Cine» (cine.css, cine.js, clases c3-).
   - Celular y vertical, el resto: opcion 4 «Recorrido» (recorrido.css, recorrido.js, clases rc-).
   Cada hoja va en su <link media>, asi que solo se aplica la de la variante vigente. Aqui va lo comun: la cabecera
   de vidrio y la escena 3D del final (copiadas sin cambios de /portada-playa/portada-playa.css, que deja de usarse)
   y que cada variante oculte las piezas de la otra. Origen: docs/portada-nano-banana-2026-10-20 (secciones 1c y 2). */

@font-face { font-family: Geist; src: url(/fonts/GeistVF.woff) format("woff"); font-weight: 100 900; font-display: swap; }

.portada-playa {
  --pp-marino: #153050;          /* color del logo */
  --pp-tinta: #13263D;
  --pp-tinta-suave: #2C3E53;
  --pp-turquesa: #12A6B5;
  --pp-cielo: #5CB6EF;
  --pp-vidrio: rgba(255, 255, 255, .66);
  --pp-vidrio-alto: rgba(255, 255, 255, .74);
  --pp-desenfoque: blur(22px) saturate(170%);
  --pp-anillo: inset 0 0 0 1px rgba(255, 255, 255, .72), inset 0 1px 0 rgba(255, 255, 255, .95);
  --pp-sombra: 0 30px 70px -32px rgba(8, 28, 52, .5), 0 2px 8px rgba(8, 28, 52, .08);
  --pp-margen: clamp(16px, 4vw, 64px);
  --pp-fuente: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-curva: cubic-bezier(.22, 1, .36, 1);
}
.portada-playa :focus-visible { outline: 3px solid var(--pp-turquesa); outline-offset: 3px; }

/* ---------- Cabecera de vidrio ---------- */
.pp-cabecera {
  position: absolute; z-index: 40; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 8px 8px 8px 20px; border-radius: 999px; font-family: var(--pp-fuente);
  background: var(--pp-vidrio); -webkit-backdrop-filter: var(--pp-desenfoque); backdrop-filter: var(--pp-desenfoque);
  box-shadow: var(--pp-anillo), var(--pp-sombra);
}
.pp-marca { display: block; border-radius: 8px; }
.pp-marca img { display: block; height: 24px; width: auto; }
.pp-menu { display: none; }
.pp-menu a { color: var(--pp-tinta); font: 500 15px/1 var(--pp-fuente); text-decoration: none; padding: 12px 0; white-space: nowrap; border-radius: 6px; }
.pp-menu a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.pp-cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pp-solo-escritorio { display: none !important; }
.pp-icono {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  color: var(--pp-marino); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(21, 48, 80, .14);
  transition: background-color .25s var(--pp-curva);
}
.pp-icono:hover { background: #fff; }
.pp-icono svg { width: 20px; height: 20px; }

/* ---------- Botones ---------- */
.pp-boton {
  --alto: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--alto); padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--pp-fuente);
  letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--pp-curva), background-color .25s var(--pp-curva), box-shadow .25s var(--pp-curva);
}
.pp-boton:hover { transform: translateY(-1px); }
.pp-boton:active { transform: scale(.98); }
.pp-boton svg { width: 18px; height: 18px; flex: none; }
.pp-boton-chico { --alto: 44px; padding: 0 18px; font-size: 14px; }
.pp-principal { background: var(--pp-marino); color: #fff; box-shadow: 0 12px 26px -14px rgba(21, 48, 80, .8); }
.pp-principal:hover { background: #0E2540; }

@media (min-width: 900px) {
  .pp-cabecera { top: 20px; left: 24px; right: 24px; min-height: 64px; padding: 8px 8px 8px 26px; }
  .pp-marca img { height: 28px; }
  .pp-menu { display: flex; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); }
  .pp-solo-escritorio { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-boton, .pp-icono { transition: none; }
}

/* ---------- Escena 3D anterior como ultima seccion (dueno, 19/10/2026) ----------
   La sandalia de particulas con el logo vive en /escena-3d.html y se carga en un iframe al
   acercarse el visitante; su alto cubre el minimo del hero anterior para que no haya scroll interno. */
.pp-escena { margin: 0; padding: 0; background: #01040a; }
.pp-escena iframe { display: block; width: 100%; height: 100vh; height: 100svh; min-height: 700px; max-height: 1000px; border: 0; }
@media (max-width: 700px) { .pp-escena iframe { min-height: 740px; } }


/* ---------- Una variante a la vez ----------
   El hero comparte la seccion, el rotulo y el h1 (#hero-titulo): cada variante oculta las piezas de la otra, asi que
   la otra no se pinta, no se lee ni recibe foco. Sus imagenes no se descargan (<picture> con media o data-src) y su
   JS duerme. */
.rc-cab-progreso { display: none; }   /* la linea de progreso del Recorrido en la cabecera (recorrido.css la muestra) */
@media (min-width: 701px) and (orientation: landscape) {
  .rc-camara, .rc-in, .rc-mandos, .rc-vuelo, .rc-rejilla, .rc-lupa, .rc-riel, .rc-sonda { display: none !important; }
}
@media (max-width: 700px), (orientation: portrait) {
  .c3-paralaje, .c3-kicker, .c3-texto, .c3-capsulas, .c3-tercio, .c3-etiqueta, .c3-cinta, .c3-base { display: none !important; }
}