/* =============================================================================
   BLOWLINE — Plataforma global de información sobre avistamiento de ballenas
   styles.css — hoja de estilos única, organizada por secciones.

   NOTA PARA EDICIÓN FUTURA:
   Todo el color, tipografía y espaciado sale de las variables en "1. TOKENS".
   Cambiar la paleta o las fuentes ahí se propaga a todo el sitio.
   ============================================================================= */

/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
  /* --- Paleta "océano editorial" ---------------------------------------- */
  --navy:        #0d2b4e;   /* azul marino profundo — color principal de marca */
  --navy-deep:   #081b30;   /* navy más oscuro — footer, overlays */
  --navy-soft:   #163a63;   /* navy intermedio — hovers sobre navy */
  --teal:        #4fa3c4;   /* acento azul-verdoso (tomado del logo real) */
  --teal-deep:   #2f7891;   /* acento oscurecido — texto sobre fondo claro, botones hover */
  --sand:        #f7f3ea;   /* blanco roto / arena — fondo cálido principal */
  --sand-2:      #eee6d3;   /* arena algo más oscura — bandas de sección alternas */
  --paper:       #ffffff;   /* blanco puro — tarjetas, formularios */
  --ink:         #20262b;   /* gris oscuro — texto principal */
  --ink-soft:    #3a4249;
  --ink-mute:    #647079;   /* gris medio — texto secundario / metadatos */
  --line:        rgba(13, 43, 78, 0.14);
  --line-soft:   rgba(13, 43, 78, 0.08);
  --shadow-soft: 0 18px 45px -22px rgba(13, 43, 78, 0.35);
  --shadow-card: 0 10px 30px -14px rgba(13, 43, 78, 0.28);

  /* --- Tipografía --------------------------------------------------------
     DECISIÓN 23/09/2026: Frank Ruhl Libre (titulares) + Manrope (cuerpo),
     elegida por Isabel tras comparar en vivo Lora / Frank Ruhl Libre / Bitter
     (ronda 2, tras haber probado antes Spectral, Libre Caslon Text, Fraunces,
     Playfair Display y Source Serif 4). Frank Ruhl Libre no tiene variante
     itálica en Google Fonts: los figcaption en cursiva de las fichas de
     especie en /destinos renderizan con el itálico sintético del navegador. */
  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* --- Ritmo / radios / easings ------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --container:   1220px;
}

/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; font-family: var(--serif); font-weight: 500; color: var(--navy); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--teal-deep); }
::selection { background: var(--teal); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.2rem; background: var(--navy); color: var(--paper);
  z-index: 9999; border-radius: var(--radius-sm); font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================================
   3. UTILIDADES
   ============================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sand2 { background: var(--sand-2); }
.section--navy { background: var(--navy); color: var(--sand); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--paper); }
.section--navy .eyebrow { color: var(--teal); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; display: inline-block;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-mute);
  max-width: 62ch;
}
.section--navy .lede { color: rgba(247,243,234,0.78); }

/* Bilingüe: por defecto ES visible. data-lang en <html> decide qué bloque mostrar. */
[data-lang="es"] [data-lang-en] { display: none !important; }
[data-lang="en"] [data-lang-es] { display: none !important; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; } /* defensivo, ver skill gotcha A.4.5 */

/* =============================================================================
   4. COMPONENTES
   ============================================================================= */

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: var(--paper); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--navy-soft); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.section--navy .btn-ghost { color: var(--paper); border-color: rgba(247,243,234,0.35); }
.section--navy .btn-ghost:hover { border-color: var(--paper); }
/* DECISIÓN 23/09/2026: navy (color de marca principal, el mismo que
   .btn-primary y los CTA de cierre) en vez de teal-deep — Isabel pidió
   unificar con la paleta que ya usa el resto de botones "sólidos" de la
   web, en lugar del acento verde-azulado (que quedaba disonante). */
.btn-teal { background: var(--navy); color: var(--paper); }
.btn-teal:hover { background: var(--navy-soft); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* --- Enlace con subrayado animado ----------------------------------------- */
.link-underline {
  position: relative;
  padding-bottom: .15em;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: currentColor;
  transition: right .4s var(--ease-out);
}
.link-underline:hover::after { right: 0; }
/* La sección activa mantiene el subrayado siempre visible, no sólo al
   pasar el ratón — así queda claro en qué página estás aunque el ratón
   esté en otro sitio (21/09/2026, a petición de Isabel). */
.link-underline[aria-current="page"]::after { right: 0; }

/* --- Barra de progreso de scroll -------------------------------------------
   Fina franja fija arriba del todo que se rellena con el avance de lectura.
   Inspirada en el patrón de navegación de photolior.com. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress::before {
  content: "";
  display: block; height: 100%; width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--teal), var(--navy));
  transition: width .12s linear;
}

/* --- Header / navegación --------------------------------------------------*/
.site-header {
  position: sticky; top: 0; z-index: 500;
  padding-block: .6rem;
  background: rgba(247, 243, 234, 0.0);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), padding .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
  padding-block: .45rem;
  box-shadow: 0 8px 30px -18px rgba(13,43,78,0.25);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: rgba(247, 243, 234, 0.98); }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Cabecera minimalista: sólo el nombre, sin icono ni subtítulo — como
   referencia directa, la cabecera de Framer (una sola línea de texto). */
.brand { display: flex; align-items: center; gap: .5rem; }
.brand img { height: 24px; width: 24px; border-radius: 50%; transition: height .4s var(--ease-out), width .4s var(--ease-out); }
.site-header.is-scrolled .brand img { height: 21px; width: 21px; }
.brand-word { font-family: var(--serif); font-size: .92rem; color: var(--navy); font-weight: 600; letter-spacing: .01em; }
.brand-word small { display: none; }

.nav-desktop { display: none; }
@media (min-width: 960px) {
  .nav-desktop { display: flex; align-items: center; gap: 2rem; }
}
.nav-desktop > ul { display: flex; align-items: center; gap: 1.6rem; }
.nav-link {
  font-size: .85rem; font-weight: 500; color: var(--navy);
  display: inline-flex; align-items: center; gap: .35em;
}

/* Dropdown "What do we offer" — mega menú a ancho completo (21/09/2026,
   v2). Isabel pidió que se pareciera a los "mega menu" que se ven en
   muchas webs (referencia: HappyRobot): al pasar el ratón por encima, la
   propia barra superior se "extiende" hacia abajo en todo el ancho de la
   pantalla, en vez de un panel flotante pequeño bajo el botón. Se abre
   con hover (además de click/teclado, sin el conflicto que hubo la
   primera vez que se probó — ver initDesktopDropdown en main.js) y
   mantiene el mismo material/color que la cabecera en cada estado
   (sección de arriba: claro al hacer scroll, oscuro sobre la foto). */
.nav-dropdown { position: static; }
.nav-dropdown > button.nav-link { display: inline-flex; }
.nav-dropdown > button svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.nav-dropdown > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-panel {
  position: fixed;
  top: var(--header-h, 68px);
  left: 0; right: 0; width: 100%;
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), visibility .26s;
  z-index: 490;
}
@supports not (backdrop-filter: blur(1px)) {
  .dropdown-panel { background: rgba(247, 243, 234, 0.98); }
}
.dropdown-panel-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  padding-block: 1.6rem;
}
/* Se activa con hover sobre todo el bloque (botón + panel), con click
   como refuerzo para teclado/táctil — así no compiten entre sí: el click
   solo añade la clase is-open, pero basta con soltar el ratón fuera del
   bloque para que el hover deje de aplicar y el panel se cierre igual. */
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel,
.dropdown-panel.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.dropdown-item {
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  transition: background-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--sand); opacity: 1; }
.dropdown-item strong { font-family: var(--serif); font-size: .95rem; color: var(--navy); font-weight: 600; display: block; }
.dropdown-item span { font-size: .74rem; color: var(--ink-mute); line-height: 1.4; display: block; margin-top: .15rem; }
/* Estado oscuro: cuando la cabecera está sin hacer scroll (transparente,
   sobre la foto, texto blanco) el panel adopta el mismo tratamiento
   oscuro que la cabecera en ese momento, en vez de quedarse siempre con
   el cristal claro. Misma familia de valores (rgba(247,243,234,x)) que
   ya usan .nav-lang / .brand-word small ahí abajo, mismo "material". */
.site-header:not(.is-scrolled) .dropdown-panel {
  background: rgba(13, 43, 78, 0.92);
}
.site-header:not(.is-scrolled) .dropdown-item:hover,
.site-header:not(.is-scrolled) .dropdown-item:focus-visible { background: rgba(247, 243, 234, 0.08); }
.site-header:not(.is-scrolled) .dropdown-item strong { color: var(--paper); }
.site-header:not(.is-scrolled) .dropdown-item span { color: rgba(247, 243, 234, 0.6); }
@media (max-width: 860px) {
  .dropdown-panel-inner { grid-template-columns: repeat(2, 1fr); }
}
/* Sin línea de separación entre la barra y el menú: mientras el mega
   menú está visible (hover, foco o click), se anula el borde inferior
   de la propia cabecera (visible normalmente al hacer scroll) para que
   ambos bloques se lean como una sola pieza continua. */
.site-header:has(.nav-dropdown:hover),
.site-header:has(.nav-dropdown:focus-within),
.site-header:has(.dropdown-panel.is-open) {
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav-lang {
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
}
.lang-btn {
  padding: .4rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-mute);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.lang-btn[aria-pressed="true"] { background: var(--navy); color: var(--paper); }

/* Pestañas "Iniciar sesión / Crear cuenta" en cuenta.html — deliberadamente
   una clase distinta de .lang-btn: main.js engancha un listener a TODOS
   los .lang-btn de la página para el selector de idioma ES/EN, así que
   reutilizar esa clase aquí disparaba también ese listener. */
.auth-tabs {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper);
}
.auth-tab-btn {
  padding: .6rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--ink-mute);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.auth-tab-btn[aria-pressed="true"] { background: var(--navy); color: var(--paper); }

.nav-cta { display: none; }
@media (min-width: 960px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
}
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 18px; height: 2px; margin-inline: auto; background: var(--navy); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menú móvil ------------------------------------------------------------ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 900;
  background: var(--navy);
  color: var(--sand);
  padding: 5.5rem 1.5rem 2.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s var(--ease-out);
}
.mobile-menu.is-open { transform: translateX(0); }
@media (min-width: 960px) { .mobile-menu { display: none; } }
.mobile-menu ul { display: flex; flex-direction: column; gap: .3rem; }
.mobile-menu > .container > ul > li { border-bottom: 1px solid rgba(247,243,234,0.14); }
.mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; font-family: var(--serif); font-size: 1.3rem; color: var(--paper);
}
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); }
.mobile-submenu.is-open { max-height: 400px; }
.mobile-submenu a {
  display: block; padding: .7rem 0 .7rem 1rem; font-family: var(--sans);
  font-size: .98rem; color: rgba(247,243,234,0.82); border-left: 2px solid var(--teal);
}
.mobile-menu-foot { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* =============================================================================
   5. HERO
   ============================================================================= */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center;
  overflow: clip;
  color: var(--paper);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: heroKenBurns 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,27,48,0.72) 0%, rgba(8,27,48,0.52) 42%, rgba(8,27,48,0.85) 100%);
}
.hero-content { position: relative; padding-block: 6rem 3rem; max-width: 780px; }
.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.4rem); color: var(--paper); max-width: 16ch; }
.hero-sub { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(247,243,234,0.86); max-width: 52ch; }
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,243,234,0.7);
}
.hero-scroll-cue .line { width: 1px; height: 34px; background: rgba(247,243,234,0.5); overflow: hidden; position: relative; }
.hero-scroll-cue .line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--teal); animation: scrollCue 2.2s var(--ease-soft) infinite;
}
@keyframes scrollCue { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .line::after { animation: none; top: 0; }
}

/* Hero secundario (páginas internas) */
.page-hero {
  position: relative; color: var(--paper);
  padding-block: clamp(6rem, 14vw, 9rem) clamp(3.5rem, 8vw, 5rem);
  overflow: clip;
}
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(8,27,48,0.8) 0%, rgba(8,27,48,0.66) 55%, rgba(8,27,48,0.9) 100%); }
.page-hero h1 { color: var(--paper); max-width: 20ch; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.page-hero .lede { color: rgba(247,243,234,0.85); margin-top: 1.1rem; }
/* Titular de dos líneas para el hero de Contacto (23/09/2026, ref.
   photolior.com/contact). Seis intentos con elemento decorativo de fondo
   descartados por Isabel (cursiva teal-deep, subrayado ondulado, subrayado
   recto, barra vertical, silueta SVG a mano, foto fantasma en escala de
   grises) — "no me gusta nada la foto, quítala, quita las cosas de fondo
   por ahora, solo pon una letra chula y ya está". Versión actual: sin
   elemento de fondo, solo tipografía — la línea fina en sans y el
   titular en la serif de marca (misma familia que el resto de la web),
   con la palabra clave resaltada en el color de acento. */
.hero-line { display: block; font-weight: 300; color: rgba(247,243,234,0.7); }
.hero-accent {
  display: block; font-family: var(--serif); font-weight: 500;
  color: var(--paper);
}
.hero-accent em { color: var(--teal); font-style: italic; }

/* =============================================================================
   6. SECCIONES ESPECÍFICAS
   ============================================================================= */

/* --- Audiencias (home) ----------------------------------------------------- */
.audience-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2.5rem;
}
.audience-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 2rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.audience-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.audience-card .icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sand); display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
}
.audience-card .icon svg { width: 26px; height: 26px; }
.audience-card h3 { font-size: 1.25rem; }
.audience-card p { color: var(--ink-mute); font-size: .95rem; flex: 1; }
.audience-card .link-underline { font-weight: 600; color: var(--teal-deep); font-size: .92rem; align-self: flex-start; }

/* --- Grid de destinos -------------------------------------------------------*/
/* Tarjetas más pequeñas y con más radio (22/09/2026) — Isabel las veía
   demasiado grandes; se reduce el tamaño mínimo de columna, el aspect
   ratio pasa de un retrato muy alto (4/5) a algo más compacto (5/6), y el
   radio sube por encima de --radius-lg para un aire más minimalista,
   coherente con las referencias de PhotoLior/Zero Expeditions. */
.dest-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 2.5rem;
}
.dest-card {
  display: block;
  position: relative; border-radius: 26px; overflow: clip;
  aspect-ratio: 5 / 6;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.dest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.dest-card:hover img { transform: scale(1.08); }
.dest-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,27,48,0) 45%, rgba(8,27,48,0.88) 100%);
}
.dest-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem; color: var(--paper);
}
.dest-card-body h3 { color: var(--paper); font-size: 1.08rem; }
.dest-card-season {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: .4rem; font-size: .72rem; letter-spacing: .04em;
  color: var(--teal);
}
.dest-card-cta {
  display: block; margin-top: .55rem; font-size: .76rem; font-weight: 600;
  color: var(--paper); opacity: .85;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.dest-card:hover .dest-card-cta { opacity: 1; transform: translateX(3px); }
.dest-more { margin-top: 2.5rem; text-align: center; }

/* --- Mapa interactivo de destinos (Leaflet) --------------------------------*/
.destinations-map {
  margin-top: 2rem;
  height: clamp(360px, 52vw, 520px);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line-soft);
  background: var(--sand-2); /* visible mientras cargan los tiles */
}
/* Los popups de Leaflet traen su propio estilo; los alineamos con la marca */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: clip; /* para que la miniatura de especie respete las esquinas redondeadas */
}
.leaflet-popup-content { font-family: var(--sans); margin: 0; min-width: 190px; }
/* Popup del mapa (21/09/2026, vuelta a la versión simple — ver nota en
   main.js): fila con la(s) ilustración(es) de especie, sin fondo detrás
   (antes tenían un fondo sand/beige que quedaba mal sobre la tarjeta
   clara del popup) — si hay varias especies protagonistas se muestran
   una junto a otra, igual que en las guías PDF de destino. */
.map-popup-species-imgs {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .6rem .6rem 0;
}
.map-popup-species-img {
  display: block; flex: 1 1 0; min-width: 0;
  height: 84px; object-fit: contain;
}
.map-popup-body { padding: .8rem 1rem .9rem; }
.leaflet-popup-content h3 {
  font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .3rem;
}
.leaflet-popup-content .map-popup-season {
  display: block; font-size: .8rem; color: var(--teal-deep); margin-bottom: .3rem;
}
.leaflet-popup-content .map-popup-species {
  display: block; font-size: .8rem; color: var(--ink-soft, #6b6b63); margin-bottom: .6rem; font-style: italic;
}
.leaflet-popup-content a.link-underline { font-size: .85rem; font-weight: 600; color: var(--navy); }
.leaflet-container { font-family: var(--sans); }

/* --- Panel de especies en la ficha de destino (piloto, 21/09/2026) --------
   A la entrada del contenido de cada ficha, como en la guía PDF
   descargable de ese mismo destino — mismas ilustraciones, aquí en la
   web. De momento sólo en destinos/skjervoy.html, a validar antes de
   extenderlo al resto. */
.dest-species-panel {
  margin-top: -2.4rem;
  margin-bottom: 1.6rem;
}
.dest-species-label {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: 600; margin: 0 0 .7rem; text-align: center;
}
.dest-species-imgs {
  display: flex; align-items: flex-end; justify-content: center; gap: 2.2rem; flex-wrap: wrap;
}
.dest-species-item { margin: 0; text-align: center; }
.dest-species-item img { display: block; height: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }
/* Escala por especie basada en la longitud media real de un adulto (fuentes:
   NOAA Fisheries + Wikipedia con cita a fuentes científicas — ver
   claude/editorial-principles.md o el chat del 22/09/2026 para el detalle
   por especie). Se escala por ANCHURA, no por altura: las ilustraciones no
   comparten la misma pose (el cachalote está estirado y horizontal, la
   jorobada está en salto), así que fijar la altura distorsionaba el
   resultado — con altura fija el cachalote, al ser una silueta muy alargada,
   se disparaba en anchura y parecía gigante junto al resto (bug reportado
   22/09/2026, ver captura de Azores). Escalando por anchura y dejando la
   altura libre (según la proporción natural de cada ilustración), cada
   especie queda ancha o alta según su forma real de cuerpo — el cachalote
   sale ancho y bajo (correcto, es alargado y cilíndrico), no gigante.
   Referencia: 15m (franca austral) = 170px de ancho; escala lineal ~11,3px/m.
   franca austral 15m · jorobada 14,5m · cachalote 14m (media macho/hembra) ·
   gris 13m (rango 11–15,2m) · orca 7m (media macho/hembra) ·
   calderón tropical 4,5m (media macho/hembra). */
.dest-species-item img[src*="species-franca-austral"] { width: 170px; }
.dest-species-item img[src*="species-jorobada"] { width: 164px; }
.dest-species-item img[src*="species-cachalote"] { width: 158px; }
.dest-species-item img[src*="species-gris"] { width: 147px; }
.dest-species-item img[src*="species-orca"] { width: 79px; }
.dest-species-item img[src*="species-calderon-tropical"] { width: 51px; }
.dest-species-item figcaption {
  margin-top: .5rem; font-family: var(--serif); font-size: .82rem; color: var(--navy); font-style: italic;
}

/* Marcador propio: pin con silueta de cola de ballena, en vez del pin azul
   por defecto de Leaflet o de un punto simple — coherente con la marca y
   preparado para llevar la ilustración real de cada especie más adelante. */
.leaflet-marker-icon.map-marker-whale {
  filter: drop-shadow(0 3px 6px rgba(20, 24, 26, .35));
  transition: transform .18s var(--ease-out);
  transform-origin: 50% 100%;
}
.leaflet-marker-icon.map-marker-whale:hover,
.leaflet-marker-icon.map-marker-whale:focus { transform: scale(1.12) translateY(-2px); }
.map-marker-whale-pin { fill: var(--teal-deep, #2f7891); }
.map-marker-whale-disc { fill: #fff; }
.map-marker-whale-tail { fill: var(--teal-deep, #2f7891); }

/* Aviso "haz clic para interactuar": evita que el ratón atrape el scroll de
   la página al pasar por encima del mapa. Se oculta tras el primer clic. */
.destinations-map { position: relative; }
.map-scroll-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 500; pointer-events: none;
  background: rgba(20, 24, 26, .78); color: #fff;
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: .5rem .9rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 1; transition: opacity .35s var(--ease-out);
}
.map-scroll-hint.is-hidden { opacity: 0; }
@media (hover: none) and (pointer: coarse) {
  /* En táctil no hay "atasco" de scroll que explicar */
  .map-scroll-hint { display: none; }
}

/* --- Franja de estadísticas / confianza -------------------------------------*/
.stat-strip {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 2.5rem;
}
.stat-item { text-align: left; border-left: 2px solid var(--teal); padding-left: 1.1rem; }
.stat-item strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--navy); }
.section--navy .stat-item strong { color: var(--paper); }
.stat-item span { font-size: .88rem; color: var(--ink-mute); }
.section--navy .stat-item span { color: rgba(247,243,234,0.75); }

/* --- Columnas editoriales (About / Offer pages) -----------------------------*/
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse { direction: rtl; }
  .split--reverse > * { direction: ltr; }
}
.split-media { border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-card); aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-text h2 { margin-bottom: 1.1rem; }
.split-text p + p { margin-top: 1rem; }
.checklist { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .75rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--ink-soft); }
.checklist svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--teal-deep); margin-top: .1rem; }
.free-download { margin-top: 2rem; }
.free-download .btn svg { width: 18px; height: 18px; }

/* Bloques 3 columnas ("Por qué existimos", pilares, pasos) */
.pillars {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2.5rem;
}
.pillar { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.pillar .num { font-family: var(--serif); font-style: italic; color: var(--teal-deep); font-size: 1.1rem; }
.pillar h3 { margin-top: .6rem; font-size: 1.15rem; }
.pillar p { margin-top: .6rem; color: var(--ink-mute); font-size: .93rem; }

/* --- Galería placeholder de fotografía (About · Detrás del objetivo) -------*/
.photo-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 2.2rem;
}
.photo-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background: var(--sand);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  text-align: center;
}
.photo-placeholder span { font-size: .76rem; line-height: 1.45; color: var(--ink-mute); }
.photo-grid-item { aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: clip; box-shadow: var(--shadow-card); }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.photo-grid-item:hover img { transform: scale(1.06); }
.photo-grid-foot { margin-top: 1.8rem; display: flex; justify-content: center; }
.photo-grid-foot .btn[aria-disabled="true"] { cursor: default; }

/* --- Divisor de olas (sutil, estático, sin gsap) ---------------------------*/
.wave-divider { display: block; width: 100%; height: auto; color: var(--sand); }
.wave-divider--sand2 { color: var(--sand-2); }
.wave-divider--navy { color: var(--navy); }
.wave-divider--paper { color: var(--paper); }

/* --- Tabla de comparación (Data Solutions) ---------------------------------*/
.plan-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2.5rem;
}
.plan-card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 2rem 1.7rem; display: flex; flex-direction: column; gap: 1rem;
}
.plan-card h3 { font-size: 1.2rem; }
.plan-card ul { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.plan-card li { display: flex; gap: .6rem; font-size: .92rem; color: var(--ink-soft); }
.plan-card li svg { width: 18px; height: 18px; color: var(--teal-deep); flex-shrink: 0; margin-top: .1rem; }

.plan-card-foot {
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.plan-card-link { font-weight: 600; color: var(--teal-deep); font-size: .92rem; align-self: flex-start; }
.sample-note { font-size: .78rem; color: var(--ink-mute); }

/* --- CTA final ---------------------------------------------------------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 1.6rem;
  position: relative; overflow: clip;
}
.cta-band h2 { color: var(--paper); }
@media (min-width: 860px) {
  .cta-band { grid-template-columns: 1fr auto; align-items: center; }
}
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.cta-band .gate-includes li { color: rgba(247,243,234,0.88); }
.cta-band .gate-includes svg { color: var(--teal); }

/* --- Formulario de contacto ----------------------------------------------- */
/* La foto centrada respecto a la altura de la tarjeta del formulario (más
   alta) — en vez de un desfase fijo en px, que sólo encajaba con la
   cantidad de campos de ese momento (23/09/2026, a petición de Isabel). El
   .split base ya no sirve con align-items:flex-start para este bloque. */
.contact-split { align-items: center; }
/* Antes el formulario iba "suelto" directamente sobre el fondo de la
   sección — Isabel lo vio pobre comparado con el resto de la web. Ahora
   vive dentro de una tarjeta con la misma sombra/radio que el resto de
   tarjetas del sitio (.audience-card, .contact-info-card), con un título
   de cabecera tipo "ficha". */
.contact-form-card {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.contact-form-card-title {
  font-family: var(--sans); font-weight: 700; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 1.1rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line);
}

/* --- Cuenta (cuenta.html) — columna de ventajas + tarjeta de acceso
   (25/09/2026, a petición de Isabel: la sección de login/registro era
   "muy pobre, muy simple, no me dice nada" — se añade contexto de qué
   desbloquea la cuenta junto al formulario, reutilizando el mismo
   lenguaje visual que la tarjeta de contacto (.contact-form-card) y el
   checklist de suscripción (.gate-includes) que ya usan las guías de
   destino, en vez de crear componentes nuevos. */
.account-split { grid-template-columns: 1fr; }
@media (min-width: 960px) { .account-split { grid-template-columns: 0.95fr 1.05fr; } }
.account-split .auth-tabs { width: 100%; justify-content: center; }
.account-split .auth-tab-btn { flex: 1; text-align: center; }
.form-grid { display: grid; gap: 1.1rem; margin-top: 2rem; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; background: var(--sand); color: var(--ink);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--paper); border-color: var(--teal-deep); box-shadow: 0 0 0 4px rgba(79,163,196,0.18); outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { margin-top: 1.4rem; font-size: .82rem; color: var(--ink-mute); }
.form-status {
  margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--sand-2); color: var(--navy); font-size: .92rem; display: none;
}
.form-status.is-visible { display: block; }
.contact-info { display: flex; flex-direction: column; gap: 1.6rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-item .icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--sand-2); display: flex; align-items: center; justify-content: center; color: var(--teal-deep);
}
.contact-info-item .icon svg { width: 20px; height: 20px; }
.contact-info-item h3 { font-size: 1rem; font-family: var(--sans); font-weight: 700; color: var(--navy); }
.contact-info-item p, .contact-info-item a { font-size: .92rem; color: var(--ink-mute); }

/* --- Numeración de sección tipo "paso" (contacto — rediseño 23/09/2026,
   inspirado en photolior.com/contact pero con la paleta y tipografía de
   Blowline en vez de calcar su estilo). Reutiliza el mismo lenguaje que
   .pillar .num (serif itálica, teal-deep) para que quede coherente con el
   resto de la web en vez de inventar un componente nuevo. */
.section-num {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.3rem; color: var(--teal-deep);
  margin-bottom: .5rem;
}

/* --- Contacto: tarjetas de datos de contacto ------------------------------
   Antes era una lista estrecha apretada en media columna junto al
   formulario — Isabel la vio "pobre" comparada con photolior.com/contact.
   Ahora tiene su propia sección con más aire, tarjetas con la misma sombra
   /radio que .audience-card y .dest-card (mismo lenguaje visual que el
   resto de la web), y el email/teléfono son enlaces clicables reales. */
.contact-info-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2.6rem;
}
.contact-info-card {
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 2.1rem 1.8rem;
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
a.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.contact-info-card .icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sand-2); display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep); margin-bottom: 1.3rem;
}
.contact-info-card .icon svg { width: 21px; height: 21px; }
.contact-info-card h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-mute); }
.contact-info-card p { margin-top: .55rem; font-family: var(--serif); font-size: 1.3rem; color: var(--navy); font-weight: 500; transition: color .3s var(--ease-out); }
a.contact-info-card:hover p { color: var(--teal-deep); }

/* --- Footer ---------------------------------------------------------------*/
.site-footer { background: var(--navy-deep); color: rgba(247,243,234,0.82); padding-block: 3.5rem 2rem; }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer-brand img { height: 42px; width: 42px; border-radius: 50%; }
.footer-brand strong { font-family: var(--serif); font-size: 1.2rem; color: var(--paper); }
.footer-col h4 { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: .92rem; color: rgba(247,243,234,0.78); transition: color .25s var(--ease-out); }
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(247,243,234,0.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .8rem; color: rgba(247,243,234,0.6);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   7. PÁGINA DE CRÉDITOS
   ============================================================================= */
.credits-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.credits-list li { padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-md); font-size: .92rem; }
.credits-list a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================
   7b. FICHA DE DESTINO (público + contenido para suscriptores)
   ============================================================================= */
.breadcrumb {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .85rem; color: rgba(247,243,234,0.75); margin-bottom: 1.2rem;
}
.breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--paper); }

/* Tabla editorial (estacionalidad, puntos de salida) */
.data-table-wrap { margin-top: 1.5rem; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line-soft); }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.data-table th {
  background: var(--navy); color: var(--paper); text-align: left;
  padding: .8rem 1rem; font-weight: 600; font-size: .78rem;
  letter-spacing: .03em; white-space: nowrap;
}
.data-table td { padding: .85rem 1rem; border-top: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: top; }
.data-table tr:nth-child(even) td { background: var(--sand); }

/* Lista de operadores recomendados */
.operator-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.operator-card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
}
.operator-card strong { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); }
.operator-card a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.operator-card p { margin-top: .35rem; font-size: .9rem; color: var(--ink-mute); }

/* Bloque "Info para suscriptores": lo que incluye (visible) + vista previa bloqueada */
.gate-includes { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .75rem; }
.gate-includes li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--ink-soft); }
.gate-includes svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--teal-deep); margin-top: .1rem; }

.subscriber-gate { position: relative; margin-top: 2rem; border-radius: var(--radius-lg); overflow: clip; }
.subscriber-gate-content {
  filter: blur(5px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.subscriber-gate-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 2rem 1.5rem;
  background: linear-gradient(180deg, rgba(247,243,234,0.05) 0%, var(--sand) 62%);
}
.subscriber-gate-overlay .lock-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.subscriber-gate-overlay .lock-badge svg { width: 24px; height: 24px; }
.subscriber-gate-overlay h3 { font-size: 1.3rem; max-width: 24ch; }
.subscriber-gate-overlay p { color: var(--ink-mute); max-width: 40ch; font-size: .93rem; }

/* Desbloqueado para cuentas de suscriptor autenticadas (ver main.js → initAuth) */
.subscriber-gate.is-unlocked .subscriber-gate-content {
  filter: none; opacity: 1; pointer-events: auto; user-select: auto;
}
.subscriber-gate.is-unlocked .subscriber-gate-overlay { display: none; }
/* overflow:clip sólo hace falta para contener el desenfoque del candado;
   una vez desbloqueado ya no hay filtro que desborde, y mantenerlo recortaba
   por error el borde izquierdo de letras y tablas del contenido real. */
.subscriber-gate.is-unlocked { overflow: visible; }

/* --- Selector de cuenta en la cabecera --- */
.nav-account-link { display: inline-flex; align-items: center; gap: .4em; font-size: .95rem; font-weight: 500; color: var(--navy); }
.nav-account-link svg { width: 17px; height: 17px; }
.nav-account-link[data-account-state="logged-out"] .acct-logged-in,
.nav-account-link[data-account-state="logged-in"] .acct-logged-out { display: none; }
.mobile-link.nav-account-link { font-family: var(--serif); font-size: 1.3rem; color: var(--paper); justify-content: flex-start; }

/* =============================================================================
   8. BREAKPOINTS ADICIONALES
   ============================================================================= */
@media (min-width: 540px) { .hero-actions { gap: 1.2rem; } }
@media (min-width: 720px) { }
@media (min-width: 1280px) { .container { padding-inline: 2rem; } }
@media (min-width: 1600px) { .container { max-width: 1320px; } }

/* =============================================================================
   9. REDUCED MOTION — sólo desactiva lo intrusivo (ver skill gotcha A.2)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: .25s; }
  .hero-bg img { animation: none; }
}

/* =============================================================================
   10. TRANSICIONES ENTRE PÁGINAS (View Transitions API)
   Navegación multipágina con un cruce suave en vez de salto brusco. Sólo CSS:
   en navegadores sin soporte (Firefox, Safari antiguo) simplemente no aplica,
   sin ningún fallback necesario. Ver skill 01-stack-and-conventions.md §14.
   ============================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pageFadeOut .32s var(--ease-out) both; }
::view-transition-new(root) { animation: pageFadeIn .38s var(--ease-out) both; }
@keyframes pageFadeOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* =============================================================================
   11. HOME — REDISEÑO VISUAL (PILOTO)
   Sólo capa visual y de movimiento de index.html. No redefine ningún token
   de la sección 1 ni ninguna regla compartida (.btn, .cta-band, .dest-card
   de destinations.html, etc.): todo va bajo body.page-home, o bajo .hero /
   .home-* — clases exclusivas de la home — para que el resto del sitio siga
   exactamente igual mientras se valida esta dirección. Referencias de
   partida: photolior.com y zeroexpeditions.com (fotografía a pantalla
   completa sin marco, color de marca sólo en botones, titulares grandes,
   cuerpo discreto, movimiento mínimo y con motivo).

   ACTUALIZACIÓN: pilotaje aprobado y extendido a todo el sitio (todas las
   páginas llevan ahora la clase body.page-home). El nombre de la clase se
   mantiene tal cual — renombrarla habría significado tocar más de 100
   selectores en este archivo sin ganar nada — pero ya no significa
   "es la home", significa "tema editorial de Blowline". Las reglas que sí
   dependen de estructura exclusiva de index.html (.hero-content, .hero-title,
   .home-*) siguen sin efecto en el resto de páginas porque esas clases
   sólo existen en index.html.
   ============================================================================= */

/* --- 11.0 Paleta: monocromo cálido + un único acento apagado -------------
   El crema/navy de marca es un token global (section 1) y se mantiene para
   el resto del sitio — aquí se REDEFINE sólo dentro de body.page-home,
   así toda regla que ya usa var(--navy)/var(--sand)/var(--teal) en esta
   página hereda los valores nuevos sin tocar ninguna otra. Referencia:
   Zero Expeditions (base neutra + un solo verde apagado como acento
   funcional, no decorativo) — más adecuado para una plataforma seria de
   conservación/datos que el blanco-y-negro casi total de PhotoLior. */
body.page-home {
  /* 21/09/2026: se probó negro real (ver historial más abajo) pero Isabel
     pidió volver a azul marino profundo — simula el color del mar y es el
     azul de marca, no un simple ajuste de gusto. Definitivo: siempre azul,
     nunca negro. */
  --navy:      #0d2b4e;   /* azul marino profundo — color de marca, el mismo que --navy de raíz */
  --navy-deep: #081b30;   /* navy más oscuro — footer, overlays */
  --navy-soft: #163a63;   /* navy intermedio — hovers sobre navy */
  --teal:      #6f9490;   /* antes teal saturado — verde-gris apagado, uso funcional */
  --teal-deep: #45695f;
  --sand:      #f6f5f2;   /* antes crema/arena cálido — casi blanco, neutro */
  --sand-2:    #eae8e2;
  --line:      rgba(20, 24, 28, 0.14);
  --line-soft: rgba(20, 24, 28, 0.08);
}

/* --- 11.1 Tipografía: más contraste editorial, cuerpo más discreto -------- */
body.page-home .hero-content { max-width: 900px; padding-block: 4.5rem 3rem; }
body.page-home .hero-title {
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: none;
}
body.page-home .hero-sub { max-width: 46ch; }
body.page-home .hero-sub { color: rgba(247, 243, 234, 0.7); }
body.page-home .eyebrow { font-weight: 500; }
body.page-home .hero .eyebrow,
body.page-home .section--navy .eyebrow { color: rgba(255,255,255,0.65) !important; }
body.page-home .hero .eyebrow::before,
body.page-home .section--navy .eyebrow::before { background: rgba(255,255,255,0.5); }
body.page-home h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  color: var(--ink);
}
/* Excepción: subtítulos internos de una ficha de destino ("Ética del
   avistamiento", "Consejos prácticos" en destinos/*.html) — son h2 de
   contenido dentro de un párrafo largo, no cabeceras de sección como las de
   arriba. El tamaño de titular grande de arriba (pensado sólo para
   cabeceras de sección de las páginas de nivel superior) los hacía parecer
   fuera de lugar (bug reportado 22/09/2026). Ninguna página de nivel
   superior usa la clase .guide-subhead. */
body.page-home h2.guide-subhead {
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--navy);
}
/* Los h2 sobre foto/fondo oscuro necesitan seguir en blanco: los tokens de
   arriba tienen más especificidad que .section--navy h2 / .cta-band h2. */
body.page-home .home-trust h2,
body.page-home .cta-band h2 { color: var(--paper); }
body.page-home .lede { font-size: clamp(1rem, 1.25vw, 1.1rem); }

/* --- 11.2 Hero: sin ruta decorativa ni Ken Burns infinito ----------------
   Antes: pan-zoom automático en bucle infinito sin motivo narrativo, más
   una línea de ruta dibujada sin relación con contenido real. Ahora: una
   sola entrada intencional (zoom-out una vez) y el texto aparece en
   secuencia al cargar — no reutiliza el .reveal genérico de scroll porque
   el hero nunca está fuera de vista al entrar, así que no hay nada que
   "revelar" al hacer scroll. */
.hero .hero-bg img { animation: homeHeroReveal 1.8s var(--ease-out) both; }
@keyframes homeHeroReveal { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero-title, .hero-sub, .hero-actions { opacity: 0; transform: translateY(16px); }
html.is-ready .hero-title   { animation: homeHeroEnter .9s var(--ease-out) .1s both; }
html.is-ready .hero-sub     { animation: homeHeroEnter .9s var(--ease-out) .32s both; }
html.is-ready .hero-actions { animation: homeHeroEnter .9s var(--ease-out) .5s both; }
@keyframes homeHeroEnter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg img { animation: none; }
  .hero-title, .hero-sub, .hero-actions { opacity: 1; transform: none; animation: none; }
}

/* --- 11.3 Audiencias: sin tarjeta-caja, sin icono-badge, sin hover-lift ---
   Las 4 entradas eran tarjetas idénticas (fondo, radio, sombra e icono en
   círculo de color repetidos) que además se levantaban al hover sin razón.
   Se quedan como columnas planas con una simple regla superior — el mismo
   lenguaje que ya usa .pillar en el resto del sitio. */
body.page-home .audience-card {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 1.7rem 0 0; transition: none;
}
body.page-home .audience-card:hover { transform: none; box-shadow: none; }
body.page-home .audience-grid { border-top: 1px solid var(--line); gap: 0; }
body.page-home .audience-card + .audience-card { border-left: 1px solid var(--line); }
@media (max-width: 720px) {
  body.page-home .audience-card + .audience-card { border-left: 0; border-top: 1px solid var(--line); }
}
body.page-home .audience-card { padding-left: 1.7rem; padding-right: 1.7rem; }
body.page-home .audience-card:first-child { padding-left: 0; }
body.page-home .audience-card .icon {
  width: auto; height: auto; background: none; color: var(--ink-mute);
  align-self: flex-start; justify-content: flex-start;
}
body.page-home .audience-card .icon svg { width: 22px; height: 22px; }

/* --- 11.4 Destinos destacados: fotografía sin marco decorativo ----------
   destinations.html conserva su .dest-card con esquinas redondeadas; en la
   home, con fotos más grandes, ese marco se sustituye por cantos rectos
   (más "recorte de revista" que "tarjeta de app") y se retira el
   levantamiento + cambio de sombra al hover, dejando sólo el zoom lento de
   la propia foto como único gesto — atado a la fotografía, no al contenedor. */
body.page-home .home-destinations .dest-grid { margin-top: 3rem; }
body.page-home .home-destinations .dest-card { border-radius: 0; box-shadow: none; transition: none; }
body.page-home .home-destinations .dest-card:hover { transform: none; box-shadow: none; }
body.page-home .home-destinations .dest-card img { transition: transform 1.2s var(--ease-out); }
body.page-home .home-destinations .dest-card:hover img { transform: scale(1.035); }

/* --- 11.5 Franja "Por qué Blowline": fotografía real, no bloque de color -
   Antes era un panel navy liso — el color de marca ocupando toda la
   sección en vez de ser un acento funcional. Ahora usa una fotografía real
   (José Antonio Curto, Península Valdés) con el mismo tratamiento de
   overlay que el hero, y el navy queda como velo tonal sobre la foto en
   vez de como superficie propia. */
/* z-index:0 (no sólo position:relative) para que esta sección forme su
   propio contexto de apilamiento: si no, su propio background navy (heredado
   de .section--navy) pinta por encima del hijo con z-index negativo. */
.home-trust { position: relative; overflow: clip; z-index: 0; }
.home-trust .hero-bg { position: absolute; inset: 0; z-index: -2; }
.home-trust .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.home-trust .hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,27,48,0.86) 0%, rgba(8,27,48,0.72) 55%, rgba(8,27,48,0.88) 100%);
}

/* --- 11.6 Ritmo vertical propio de la home -------------------------------
   En vez de repetir el mismo padding de .section en todas, cada bloque
   respira según su función: Audiencias (lectura) algo más suelta, Destinos
   (fotografía) la más generosa, la franja de confianza compacta como ya
   estaba, y el CTA final más ajustado por arriba para no dejar un salto
   grande después de una sección oscura. */
.home-audiences { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.home-destinations { padding-block: clamp(5rem, 10vw, 9rem); }
.home-cta { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 9vw, 7rem); }

/* =============================================================================
   12. HOME — PASE 2 (más drástico)
   El pase anterior (sección 11) quitó ruido decorativo pero mantuvo la
   gramática visual del resto del sitio (botones con hover-lift+sombra,
   menú desplegable en tarjeta, CTA final como caja navy flotante). Esa
   gramática es la que de verdad delata "plantilla" — no el color ni la
   fuente. Este bloque la reescribe para la Home: cabecera legible sobre
   foto, menú plano sin tarjeta, botones sin lift (borde que se invierte),
   CTA final como texto centrado sin caja, y un hero a pantalla completa
   con el contenido anclado abajo, como una portada editorial.
   Sigue todo bajo body.page-home — el resto del sitio no cambia todavía.
   ============================================================================= */

/* --- 12.1 Cabecera legible sobre la foto del hero, antes de hacer scroll - */
body.page-home .site-header:not(.is-scrolled) .nav-link,
body.page-home .site-header:not(.is-scrolled) .nav-account-link,
body.page-home .site-header:not(.is-scrolled) .lang-btn,
body.page-home .site-header:not(.is-scrolled) .brand-word,
body.page-home .site-header:not(.is-scrolled) .nav-cta {
  color: var(--paper);
}
body.page-home .site-header:not(.is-scrolled) .brand-word small { color: rgba(247,243,234,0.72); }
body.page-home .site-header:not(.is-scrolled) .nav-dropdown > button svg,
body.page-home .site-header:not(.is-scrolled) .nav-account-link svg { color: var(--paper); }
body.page-home .site-header:not(.is-scrolled) .nav-lang { border-color: rgba(247,243,234,0.35); background: rgba(255,255,255,0.08); }
body.page-home .site-header:not(.is-scrolled) .lang-btn[aria-pressed="true"] { background: rgba(247,243,234,0.92); color: var(--navy); }
body.page-home .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(247,243,234,0.4); }
body.page-home .site-header:not(.is-scrolled) .nav-toggle span { background: var(--paper); }

/* --- 12.2 Menú "Qué ofrecemos": un único diseño en todo el sitio ---------
   Hubo una variante "plana" (sin tarjeta, transparente) sólo para Home, pero
   tenía un bug de layout (los primeros elementos no se veían) y además
   generaba una incoherencia visual entre Home y el resto de páginas. Se
   eliminó: ahora Home usa la misma tarjeta blanca de dos columnas que el
   resto del sitio (definida más arriba, sección "Dropdown 'What do we
   offer'"), sin excepciones ni scoping por página. */

/* --- 12.3 Botón "Contactar" de la cabecera: enlace, no píldora ----------- */
body.page-home .nav-cta {
  background: none; box-shadow: none; padding: 0; border-radius: 0;
  color: var(--navy); font-weight: 500;
  position: relative;
}
/* Antes tenía padding-bottom para dejar sitio al subrayado — eso le daba una
   caja más alta que ".nav-account-link" (Acceder), que no tiene padding, y
   al centrarse ambos verticalmente en la misma fila quedaban a distinta
   altura (bug reportado 22/09/2026). El subrayado ahora se posiciona con un
   "bottom" negativo, fuera del flujo, sin tocar la altura de la caja. */
body.page-home .nav-cta::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -0.25em;
  height: 1.5px; background: currentColor; transition: right .4s var(--ease-out);
}
body.page-home .nav-cta:hover { transform: none; }
body.page-home .nav-cta:hover::after { right: 0; }

/* --- 12.4 Botones sin hover-lift ni sombra: borde que se invierte -------- */
body.page-home .btn { border-radius: 3px; box-shadow: none !important; }
body.page-home .btn:hover { transform: none !important; box-shadow: none !important; }
/* El estilo "fantasma" (transparente, texto casi blanco) sólo tiene sentido
   sobre fondo oscuro: la foto del hero y el panel navy del menú móvil. Antes
   esta regla afectaba a CUALQUIER .btn-teal de la web — incluido el botón
   "Explorar destinos" / "Registrar mi operación" / etc. reutilizado dentro
   de secciones .split-text sobre fondo claro (misma clase .hero-actions,
   contexto distinto), donde el texto casi blanco quedaba prácticamente
   invisible (bug reportado 23/09/2026). Al acotarla a .hero/.mobile-menu,
   esos botones en fondo claro heredan el .btn-teal de base (fondo teal
   sólido, texto blanco) — visible en cualquier sitio. */
body.page-home .hero .btn-teal,
body.page-home .mobile-menu .btn-teal {
  background: transparent; color: var(--paper);
  border: 1.5px solid rgba(247,243,234,0.55);
}
body.page-home .hero .btn-teal:hover,
body.page-home .mobile-menu .btn-teal:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
body.page-home .home-hero-ghost,
body.page-home .home-cta-ghost {
  color: var(--paper); border-color: rgba(247,243,234,0.4);
}
body.page-home .home-hero-ghost:hover,
body.page-home .home-cta-ghost:hover { border-color: var(--paper); background: rgba(247,243,234,0.08); }

/* --- 12.5 CTA final: texto centrado, sin caja navy flotante -------------- */
body.page-home .home-cta { background: var(--sand-2); }
body.page-home .cta-band {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  color: var(--ink); grid-template-columns: 1fr; justify-items: center; text-align: center;
}
body.page-home .cta-band h2 { color: var(--navy); max-width: 26ch; }
body.page-home .cta-band .lede { color: var(--ink-mute) !important; max-width: 46ch; margin-inline: auto; }
/* El CTA final de las fichas de destino (destinos/*.html) es el único que
   combina .cta-band con una lista .gate-includes (checklist de "qué incluye
   la suscripción"). El rediseño de arriba (sin caja navy) cubría .lede pero
   no esta combinación — el texto se quedaba en blanco casi invisible sobre
   el fondo claro (bug reportado 22/09/2026). No afecta a about.html ni
   travelers.html: su .cta-band no usa .gate-includes. */
body.page-home .cta-band .gate-includes { max-width: 46ch; margin-inline: auto; text-align: left; }
body.page-home .cta-band .gate-includes li { color: var(--ink-mute); }
body.page-home .cta-band .gate-includes svg { color: var(--teal-deep); }
body.page-home .cta-band-actions { justify-content: center; margin-top: .6rem; }
body.page-home .cta-band-actions .btn-teal { background: var(--navy); color: var(--paper); border-color: var(--navy); }
body.page-home .cta-band-actions .btn-teal:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: var(--paper); }
body.page-home .home-cta-ghost { color: var(--navy); border-color: var(--line); }
body.page-home .home-cta-ghost:hover { border-color: var(--navy); background: rgba(13,43,78,0.05); }

/* --- 12.6 Hero a pantalla completa, contenido anclado abajo --------------
   Portada editorial en vez de banner centrado: la foto ocupa toda la
   pantalla, el overlay es casi transparente arriba (para que la foto
   respire y la cabecera sea legible por color, no por velo) y sólo se
   oscurece donde se necesita para leer el texto, abajo. Sin cue de scroll
   decorativo — el propio anclaje abajo ya indica que hay más contenido. */
body.page-home .hero {
  min-height: 100svh; align-items: flex-end;
  /* La cabecera es "sticky", no "fixed": sigue ocupando su propio hueco en
     el flujo normal, así que sin esto el hero empezaba justo debajo de
     ella, no debajo de su hueco — dejando la franja de la cabecera flotando
     sobre el fondo claro de la página (texto blanco invisible al cargar).
     Con este margen negativo (altura real, medida en JS) el hero sube y
     queda debajo de la cabecera desde el primer fotograma: la cabecera
     transparente pasa a superponerse siempre a la foto, nunca al fondo. */
  margin-top: calc(-1 * var(--header-h, 76px));
}
body.page-home .hero-bg::after {
  background: linear-gradient(180deg, rgba(8,27,48,0.16) 0%, rgba(8,27,48,0.06) 30%, rgba(8,27,48,0.82) 100%);
}
body.page-home .hero-content { padding-block: 3rem 5.5rem; max-width: 980px; }
body.page-home .hero-title { font-size: clamp(3.1rem, 7.2vw, 5.8rem); }
body.page-home .hero-scroll-cue { display: none; }
@media (max-width: 640px) {
  body.page-home .hero-content { padding-block: 2rem 3.5rem; }
}

/* =============================================================================
   13. HOME — PASE 3: negro real, no navy-con-velo. Destinos a sangre
   completa sobre fondo negro, "Por qué Blowline" como columnas foto+texto
   en vez de foto de fondo con overlay. Referencia directa: las capturas
   del proyecto de Framer que Isabel aprobó (fondo negro real en las
   secciones de fotografía, blanco roto en las de lectura, foto a sangre
   completa sin marco). Además: hero a pantalla completa reutilizable
   (.page-hero--full) para llevar el mismo criterio a Destinations y al
   resto de páginas internas, no sólo a la Home.
   ============================================================================= */

/* --- 13.1 Destinos destacados: sección negra, fotos a sangre completa --- */
body.page-home .home-destinations { background: var(--navy); color: var(--sand); }
body.page-home .home-destinations h2,
body.page-home .home-destinations h3 { color: var(--paper); }
body.page-home .home-destinations .eyebrow { color: rgba(255,255,255,0.6); }
body.page-home .home-destinations .eyebrow::before { background: rgba(255,255,255,0.45); }
body.page-home .home-destinations .lede { color: rgba(247,243,234,0.7); }
body.page-home .home-destinations .dest-grid {
  margin-top: 3rem; gap: 2px; /* hairline negro entre fotos, no hueco */
  grid-template-columns: repeat(2, 1fr); /* 2x2, como la referencia de Framer,
    en vez de las 4 en fila — fotos más grandes, más impacto. Sólo la sección
    de Home; el catálogo de destinations.html no se toca. */
}
body.page-home .home-destinations .dest-card { aspect-ratio: 3 / 2; }
@media (max-width: 720px) {
  body.page-home .home-destinations .dest-grid { grid-template-columns: 1fr; }
  body.page-home .home-destinations .dest-card { aspect-ratio: 4 / 3; }
}
body.page-home .dest-more { margin-top: 3rem; }
body.page-home .home-cta-ghost.dest-more-link { color: var(--paper); border-color: rgba(247,243,234,0.35); }

/* --- 13.2 "Por qué Blowline": columnas foto + texto, no foto de fondo ---
   Sustituye el panel 11.5 (foto de fondo con velo navy) por el patrón
   .split ya existente en el sitio (About/Offer pages): imagen real a la
   izquierda, texto + cifras a la derecha, sobre fondo claro. */
body.page-home .home-trust { background: var(--sand); color: var(--ink); overflow: visible; }
body.page-home .home-trust .split-media { aspect-ratio: 4 / 5; box-shadow: none; border-radius: 0; }
body.page-home .home-trust h2 { color: var(--ink) !important; max-width: none; }
body.page-home .home-trust .eyebrow { color: var(--teal-deep) !important; }
body.page-home .home-trust .stat-strip { margin-top: 2rem; }
body.page-home .home-trust .stat-item strong { color: var(--ink); }
body.page-home .home-trust .stat-item span { color: var(--ink-mute); }

/* --- 13.3 Hero a pantalla completa reutilizable (páginas internas) ------
   Mismo patrón que el hero de Home: foto a sangre completa, overlay casi
   transparente arriba (la cabecera es legible por color, no por velo) y
   texto anclado abajo. Se activa añadiendo la clase page-hero--full al
   .page-hero de cualquier página — no depende de body.page-home. */
.page-hero--full {
  min-height: 100svh; display: flex; align-items: flex-end;
  padding-block: 1.5rem 3rem !important;
  /* Mismo arreglo que el hero de Home (sección 12.6): la cabecera es
     sticky, no fixed, así que sigue ocupando su hueco en el flujo normal.
     Sin este margen negativo (altura real, medida en JS), este hero
     empezaba debajo de ese hueco, no debajo de la cabecera misma — dejando
     la franja de la cabecera flotando sobre el fondo claro de la página
     antes de hacer scroll (texto blanco invisible). Aplicado 21/09/2026 a
     todas las páginas internas con este hero. */
  margin-top: calc(-1 * var(--header-h, 76px));
}
.page-hero--full .hero-bg::after {
  background: linear-gradient(180deg, rgba(8,27,48,0.16) 0%, rgba(8,27,48,0.06) 30%, rgba(8,27,48,0.82) 100%);
}
/* Texto como pie de foto, no como titular a toda pantalla — mismo criterio
   que el hero de Home (sección 14): columna estrecha, tamaños pequeños,
   mucho espacio negativo alrededor. */
.page-hero--full .eyebrow { font-size: .68rem; margin-bottom: .4rem; }
.page-hero--full h1 {
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  font-weight: 300; line-height: 1.3; letter-spacing: -0.005em;
  max-width: 22ch;
}
.page-hero--full .lede { font-size: 0.9rem; line-height: 1.55; margin-top: .7rem; max-width: 40ch; }
@media (max-width: 640px) {
  .page-hero--full { padding-block: 1.25rem 1.75rem !important; }
  .page-hero--full h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
}
/* Cabecera legible sobre la foto en cualquier página que use este hero */
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-link,
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-account-link,
body:has(.page-hero--full) .site-header:not(.is-scrolled) .lang-btn,
body:has(.page-hero--full) .site-header:not(.is-scrolled) .brand-word,
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-cta {
  color: var(--paper);
}
body:has(.page-hero--full) .site-header:not(.is-scrolled) .brand-word small { color: rgba(247,243,234,0.72); }
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-dropdown > button svg,
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-account-link svg { color: var(--paper); }
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-lang { border-color: rgba(247,243,234,0.35); background: rgba(255,255,255,0.08); }
body:has(.page-hero--full) .site-header:not(.is-scrolled) .lang-btn[aria-pressed="true"] { background: rgba(247,243,234,0.92); color: var(--navy); }
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(247,243,234,0.4); }
body:has(.page-hero--full) .site-header:not(.is-scrolled) .nav-toggle span { background: var(--paper); }

/* =============================================================================
   14. HOME — PASE 4: hero minimalista, columna estrecha abajo-izquierda.
   Referencia literal: capturas de Framer. El texto deja de ocupar casi todo
   el ancho de la pantalla y pasa a ser una columna compacta, con mucho
   espacio negativo alrededor — es ese espacio el que da la "sensación de
   amplitud" que se busca, no el texto en sí. Sólo Home; .page-hero--full
   (13.3, páginas internas) no se toca aquí.
   ============================================================================= */
body.page-home .hero-content {
  max-width: 400px;
  padding-block: 1.5rem 3rem;
}
body.page-home .hero-title {
  font-size: clamp(1.3rem, 1.6vw, 1.7rem);
  font-weight: 300;
  line-height: 1.3;
  max-width: none;
  letter-spacing: -0.005em;
}
body.page-home .hero-sub {
  margin-top: .8rem;
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 40ch;
  color: rgba(247,243,234,0.78);
}
body.page-home .hero-actions { margin-top: 1.2rem; gap: .6rem; }
body.page-home .hero-actions .btn { padding: .65rem 1.3rem; font-size: .82rem; }
body.page-home .eyebrow { font-size: .68rem; margin-bottom: .4rem; }
@media (max-width: 640px) {
  body.page-home .hero-content { max-width: none; padding-block: 1.25rem 1.75rem; }
  body.page-home .hero-title { font-size: clamp(1.35rem, 5vw, 1.6rem); }
}

/* =============================================================================
   15. HOME — rotación de fotos en el hero (fundido cruzado en bucle).
   Sustituye la única foto fija + Ken Burns por varias fotos superpuestas
   que main.js (initHeroRotation) va alternando con opacity. Aprobado por
   Isabel: da más sensación "pro" que una foto estática. Preparado para
   añadir/quitar fotos sólo tocando el HTML — este bloque no cambia.
   ============================================================================= */
.hero-bg .hero-bg-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: none; transition: opacity 1.6s ease-in-out;
}
.hero-bg .hero-bg-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-bg-slide { transition: none; }
}