/* ============================================
   FRANCISCANA — Yates & Experiencias Náuticas
   styles.css — sistema de diseño base (desktop-first aquí,
   overrides mobile en responsive.css)
   Construido a partir de Branding Sheet Franciscana.pdf
   ============================================ */

:root{
  --cool-black:#12130f;
  --glacier:#092F64;
  --secondary:#114F99;
  --blush-horizon:#F4F1EA;
  --jordy-blue:#89C1F4;
  --tufts-blue:#228CEC;
  --white:#ffffff; /* reservado solo para elementos de sistema (WhatsApp) */

  --font-display:'Noto Serif', serif;
  --font-body:'Hanken Grotesk', sans-serif;

  --container: 1180px;
  --container-wide: 1440px;
  --radius: 0px;
  --btn-radius: 10px;

  /* ---------- Escala de espaciado vertical ----------
     Una sola escala para todo el sitio. Los clamp() ya resuelven
     mobile → tablet → desktop, así que no hace falta repetir
     paddings en responsive.css.
     Referencia por token (mobile / tablet ~900px / desktop 1440+):
       3xl  72 / 90 / 150   momento mayor, usar con moderación
       2xl  64 / 72 / 124   sección editorial estándar
       xl   52 / 58 / 100   sección contigua a otra con padding
       lg   40 / 45 /  76   separación interna grande
       md   28 / 31 /  56   separación interna media
       sm   20 / 22 /  36   separación interna chica          */
  --space-3xl: clamp(72px, 10vw, 150px);
  --space-2xl: clamp(64px, 8vw, 124px);
  --space-xl:  clamp(52px, 6.5vw, 100px);
  --space-lg:  clamp(40px, 5vw, 76px);
  --space-md:  clamp(28px, 3.5vw, 56px);
  --space-sm:  clamp(20px, 2.5vw, 36px);

  --section-gap: var(--space-2xl);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--cool-black);
  background:var(--blush-horizon);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container-wide{max-width:var(--container-wide);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--glacier);
  line-height:1.15;
}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem);}
h2{font-size:clamp(1.8rem,3vw,2.6rem);}
h3{font-size:1.3rem;}
p{max-width:60ch;}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.72rem;
  color:var(--tufts-blue);
  font-weight:600;
}

/* ---------- Animaciones de entrada (Intersection Observer via main.js) ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Links con subrayado animado ---------- */
.link-underline{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:0.95rem;
  color:var(--glacier);
  padding-bottom:4px;
}
.link-underline::after{
  content:'';position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.link-underline:hover::after{transform:scaleX(1);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 34px;
  border-radius:var(--btn-radius);
  font-family:var(--font-display);
  font-weight:500;
  font-size:0.9rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:1px solid var(--glacier);
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 10px 24px rgba(9,47,100,0.18);
}
.btn-primary{background:var(--glacier);color:var(--blush-horizon);}
.btn-primary:hover{background:var(--secondary);border-color:var(--secondary);box-shadow:0 12px 28px rgba(9,47,100,0.26);}
.btn-ghost{background:rgba(244,241,234,0.06);color:var(--blush-horizon);border-color:rgba(244,241,234,0.5);box-shadow:none;}
.btn-ghost:hover{background:rgba(244,241,234,0.14);border-color:var(--blush-horizon);}
.btn-outline-dark{background:var(--blush-horizon);color:var(--glacier);border-color:rgba(9,47,100,0.25);box-shadow:0 8px 20px rgba(9,47,100,0.1);}
.btn-outline-dark:hover{background:var(--glacier);color:var(--blush-horizon);border-color:var(--glacier);}
.btn-light{background:transparent;color:var(--blush-horizon);border-color:rgba(244,241,234,0.55);box-shadow:none;}
.btn-light:hover{background:var(--blush-horizon);color:var(--glacier);border-color:var(--blush-horizon);}
.btn-whatsapp{
  background:#25D366;border-color:#25D366;color:var(--white);
  font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:0.01em;
}
.btn-whatsapp:hover{filter:brightness(0.94);}
.btn-whatsapp svg{width:18px;height:18px;flex-shrink:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--glacier);
  border-bottom:1px solid rgba(244,241,234,0.1);
  transition:background .35s ease, border-color .35s ease;
}
/* Home: header transparente sobre el video del hero, sólido al hacer scroll */
body.page-home .site-header{
  position:fixed;top:0;left:0;right:0;width:100%;
  background:transparent;
  border-bottom-color:transparent;
}
body.page-home .site-header.is-scrolled{
  background:var(--glacier);
  border-bottom-color:rgba(244,241,234,0.1);
}
.site-header .container-wide,
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;padding-bottom:24px;
  transition:padding .35s ease;
}
body.page-home .site-header.is-scrolled .container-wide{
  padding-top:20px;padding-bottom:20px;
}
.logo{display:flex;align-items:center;}
.logo .logo-img{height:32px;width:auto;display:block;}
.main-nav ul{display:flex;gap:44px;}
.main-nav a{
  font-size:0.74rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:rgba(244,241,234,0.85);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--blush-horizon);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover{color:var(--blush-horizon);}
.main-nav a:hover::after{transform:scaleX(1);}
.header-cta{display:flex;align-items:center;gap:14px;}
.header-cta .btn{
  background:transparent;
  border-color:rgba(244,241,234,0.4);color:var(--blush-horizon);
  font-size:0.72rem;letter-spacing:0.08em;padding:11px 24px;
  box-shadow:none;
}
.header-cta .btn:hover{background:var(--blush-horizon);color:var(--glacier);border-color:var(--blush-horizon);}

/* ---------- Mega menú desktop ----------
   Referencia medida en vivo: panel full-width flush con el header
   (una sola superficie de navegación), padding vertical ~44px,
   imágenes horizontales ratio ~1.9:1 con gap 40px, labels uppercase
   centrados debajo, backdrop sutil sobre el contenido de fondo. */
.site-header.mega-open,
body.page-home .site-header.mega-open{
  background:var(--glacier);
  border-bottom-color:transparent;
}
.main-nav a.is-active::after{transform:scaleX(1);}
.main-nav a.is-active{color:var(--blush-horizon);}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--blush-horizon);
  opacity:0;visibility:hidden;
  /* Evita que el navegador descargue las 8 fotos de los mega menús en cada
     página cuando los paneles están cerrados (~950 KB por visita). No cambia
     el diseño ni la animación. */
  content-visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
  border-bottom:1px solid rgba(9,47,100,0.08);
}
.mega.is-open{
  opacity:1;visibility:visible;transform:none;
  content-visibility:visible;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
/* Contenedor interno de los panels: galería centrada con aire generoso */
.mega-inner{
  max-width:1500px;
  margin:0 auto;
  padding:0 60px;
}
.mega-grid{
  display:grid;gap:40px;
  padding:48px 0 40px;
}
/* minmax(0,1fr): columnas realmente iguales, sin mínimos de contenido.
   Cada grilla está dimensionada para su cantidad de elementos:
   nada de columnas vacías ni CTAs ocupando lugar de contenido. */
.mega-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* 3 tiles del mismo ancho que cols-4 (315px): 315*3 + 40*2 = 1025 */
.mega-grid.trio{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1025px;margin:0 auto;}
.mega-grid.duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:670px;margin:0 auto;gap:40px;}
/* Un solo destino: mismo ancho de tile que el resto de los paneles */
.mega-grid.solo{grid-template-columns:minmax(0,1fr);max-width:315px;margin:0 auto;}
.mega-item{display:block;min-width:0;}
.mega-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
/* La imagen (o el degradé placeholder) vive en una capa absoluta:
   llena siempre el contenedor y permite el microzoom sin mover el layout */
.mega-media > div,
.mega-media.placeholder::before{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease-out);
}
.mega-media.placeholder::before{
  content:'';
  /* [IMAGEN PENDIENTE] */
  background-image:linear-gradient(135deg,#0d3a72,#89C1F4);
}
.mega-item:hover .mega-media > div,
.mega-item:hover .mega-media.placeholder::before{transform:scale(1.025);}
.mega-label{
  display:block;
  margin-top:16px;
  text-align:center;
  font-family:var(--font-body);
  font-size:0.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:0.16em;
  color:var(--glacier);
  transition:color .25s ease;
}
.mega-item:hover .mega-label{color:var(--secondary);}
.mega-backdrop{
  position:fixed;inset:0;z-index:90; /* debajo del header (100) */
  background:rgba(4,10,20,0.35);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-out), visibility 0s linear .35s;
  pointer-events:none;
}
.mega-backdrop.is-on{
  opacity:1;visibility:visible;
  transition:opacity .35s var(--ease-out);
}

/* Botón hamburguesa (solo mobile — ver responsive.css) */
.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  width:40px;height:40px;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  z-index:210;
}
.nav-toggle span{
  display:block;width:22px;height:1.5px;
  background:var(--blush-horizon);
  transition:transform .3s var(--ease-out), opacity .3s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Menú mobile fullscreen editorial */
.mobile-menu{
  position:fixed;inset:0;z-index:205;
  background:var(--glacier);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 32px 40px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.mobile-menu.is-open{
  opacity:1;visibility:visible;
  transition:opacity .4s var(--ease-out);
}
.mobile-menu .menu-head{
  display:flex;align-items:center;justify-content:center;
  min-height:66px;                       /* alineado con el alto del header */
  margin:0 0 18px;
  /* sin línea: la separación la da el aire, no un filete */
  opacity:0;transition:opacity .45s var(--ease-out);
}
.mobile-menu.is-open .menu-head{opacity:1;}
.mobile-menu .menu-isotipo{width:38px;height:38px;}

.mobile-menu .menu-link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  background:none;border:none;text-align:left;cursor:pointer;
  font-family:var(--font-display);
  font-size:clamp(1.45rem, 6.2vw, 1.75rem);
  font-weight:500;
  color:var(--blush-horizon);
  padding:15px 0;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-menu.is-open .menu-link{opacity:1;transform:none;}
.mobile-menu.is-open > :nth-child(2) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(2){transition-delay:0.055s;}
.mobile-menu.is-open > :nth-child(3) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(3){transition-delay:0.110s;}
.mobile-menu.is-open > :nth-child(4) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(4){transition-delay:0.165s;}
.mobile-menu.is-open > :nth-child(5) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(5){transition-delay:0.220s;}
.mobile-menu.is-open > :nth-child(6) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(6){transition-delay:0.275s;}
.mobile-menu.is-open > :nth-child(7) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(7){transition-delay:0.330s;}
.mobile-menu.is-open > :nth-child(8) .menu-link,
.mobile-menu.is-open > .menu-link:nth-child(8){transition-delay:0.385s;}

/* Accordion editorial dentro del menú mobile */
.menu-group .chev{
  font-family:var(--font-body);
  font-size:1.5rem;font-weight:300;line-height:1;
  color:rgba(244,241,234,0.55);
  transition:transform .35s var(--ease-out);
}
.menu-group.is-open .chev{transform:rotate(90deg);}
.menu-group .submenu{
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease-out);
}
.menu-group.is-open .submenu{max-height:420px;}
.submenu .sub-item{
  display:block;
  font-family:var(--font-body);
  font-size:0.95rem;
  letter-spacing:0.04em;
  color:rgba(244,241,234,0.75);
  padding:13px 0 13px 20px;
}
.submenu .sub-item.pending{color:rgba(244,241,234,0.4);}
.submenu a.sub-item:active,
.submenu a.sub-item:hover{color:var(--blush-horizon);}
.submenu .sub-item.sub-all{
  text-transform:uppercase;font-size:0.72rem;font-weight:600;
  letter-spacing:0.16em;color:var(--jordy-blue);
  padding-bottom:22px;
}
.mobile-menu .menu-foot{
  margin:38px 0 0;display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;transition:opacity .5s var(--ease-out) .4s;
}
.mobile-menu.is-open .menu-foot{opacity:1;}
body.menu-open{overflow:hidden;}
/* Con el menú abierto, el header sube por encima del panel para que la X
   quede accesible: al ser position:fixed con z-index propio, el botón
   quedaba encerrado en la capa del header y el menú lo tapaba.
   El logotipo se oculta porque el menú ya muestra el isologo centrado. */
body.menu-open .site-header{
  z-index:210;
  background:transparent;
  border-bottom-color:transparent;
}
body.menu-open .site-header .logo{opacity:0;pointer-events:none;}

/* ---------- 02 · Hero ----------
   Lógica compositiva tomada de la referencia (medida en vivo a 1528×732):
   · media 100vw × 100svh, dominante, sin contenedores
   · bloque de texto anclado a la derecha: left ≈66vw, margen derecho 5vw,
     ancho ≈29vw, centrado vertical, texto alineado a la izquierda
   · título ≈4.1vw, line-height 1.05
   · CTA alineado al borde izquierdo del bloque, debajo del título
   · overlay localizado (no capa uniforme) */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  color:var(--blush-horizon);
  background:#050b16; /* fondo neutro anti-flash mientras cargan media de cada slide */
  overflow:hidden;
}
.hero-track{position:absolute;inset:0;}
/* ---------- Slides: crossfade vía opacity, sin GSAP ---------- */
.hero-slide{
  position:absolute;inset:0;z-index:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s var(--ease-out), visibility 0s linear .8s;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:1;
  transition:opacity .8s var(--ease-out);
}
.hero-video,
.hero-media{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* Integración visual del video institucional con la fotografía del sitio:
   corrección de color muy sutil (no es un filtro estético/Instagram),
   busca contraste/negros/temperatura consistentes con el carrusel.
   No corrige resolución: sin blur ni sharpen artificial. */
.hero-video{
  filter:contrast(1.08) saturate(1.12) brightness(0.97) sepia(0.06);
  /* Se pinta sobre la imagen base del slide 0. Mientras no tenga src es
     transparente, así que abajo se ve el cuadro fijo. */
  z-index:0;
}
.hero-slide[data-slide-index="0"] .hero-media{
  /* misma corrección de color que el video, para que el cambio no se note */
  filter:contrast(1.08) saturate(1.12) brightness(0.97) sepia(0.06);
}
.hero-media--placeholder{
  /* [IMAGEN PENDIENTE] — sin foto real disponible aún para Traslados a Uruguay */
  background-image:linear-gradient(135deg,#0d3a72,#89C1F4);
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  /* Overlay mínimo: únicamente integración visual del header contra el
     media (franja superior). Sin fundido hacia la sección siguiente:
     cada slide termina de forma limpia, sin degradado inferior. */
  background:linear-gradient(180deg, rgba(4,10,20,0.26) 0%, rgba(4,10,20,0) 14%);
}
/* Overlay localizado para slides con copy: oscurece únicamente la esquina
   inferior izquierda donde vive el texto (Blush Horizon, color claro de
   marca → necesita fondo oscuro para legibilidad). No es una capa uniforme:
   el resto de la fotografía conserva luz, color y textura originales. */
.hero-scrim--copy{
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(5,11,20,0.58) 0%, rgba(5,11,20,0.30) 30%, rgba(5,11,20,0) 60%),
    linear-gradient(180deg, rgba(4,10,20,0.26) 0%, rgba(4,10,20,0) 14%);
}
/* ---------- Copy editorial: eyebrow → título → CTA, abajo-izquierda ----------
   Color de marca Blush Horizon (#F4F1EA), no blanco puro. */
.hero-copy{
  position:absolute;z-index:2;
  left:max(40px, 6vw);
  bottom:clamp(96px, 13vh, 132px);
  max-width:520px;
  color:var(--blush-horizon);
}
.hero-eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:0.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.18em;
  margin-bottom:14px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out) .15s, transform .5s var(--ease-out) .15s;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 3.4vw, 3.1rem);
  line-height:1.14;
  letter-spacing:-0.01em;
  /* Explícito: la regla global h1-h4 pinta de Glacier y le gana a la herencia */
  color:var(--blush-horizon);
  margin:0 0 20px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out) .3s, transform .5s var(--ease-out) .3s;
}
.hero-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:0.95rem;
  color:var(--blush-horizon);
  text-decoration:none;
  border-bottom:1px solid rgba(244,241,234,0.5);
  padding-bottom:3px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out) .45s, transform .5s var(--ease-out) .45s, border-color .3s var(--ease-out);
}
.hero-link:hover{border-color:rgba(244,241,234,0.95);}
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-link{
  opacity:1;transform:none;
}
/* ---------- Controles del carrusel: discretos, esquina inferior derecha ---------- */
.hero-controls{
  position:absolute;z-index:3;
  right:max(40px, 6vw);
  bottom:28px;
  display:flex;align-items:center;gap:10px;
}
/* Indicadores de línea: mínimos, sin caja ni numeración.
   El área clickeable es mayor que la línea visible (padding vertical). */
.hero-dot{
  width:clamp(26px, 3vw, 44px);
  padding:10px 0;
  border:0;background:transparent;
  cursor:pointer;
  position:relative;
}
.hero-dot::after{
  content:"";display:block;height:2px;
  background:rgba(244,241,234,0.45);
  transition:background-color .45s var(--ease-out), height .45s var(--ease-out);
}
.hero-dot:hover::after,
.hero-dot:focus-visible::after{background:rgba(244,241,234,0.8);}
.hero-dot.is-current::after{
  background:var(--blush-horizon);
  height:4px;
}
/* Scroll cue: isotipo "F" — firma nítida, íntegramente dentro del hero */
.scroll-cue{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
}
.scroll-cue .scroll-mark{
  width:44px;height:44px;object-fit:contain;
  opacity:1;
  animation:scrollcue 3.4s ease-in-out infinite;
}
@keyframes scrollcue{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:opacity .2s linear !important;}
  .hero-eyebrow,.hero-title,.hero-link{transition:opacity .2s linear !important;transform:none !important;}
  .scroll-cue .scroll-mark{animation:none;}
}

/* ---------- 03 · Intro editorial asimétrica ----------
   Segundo gran momento visual después del hero: título a escala
   editorial (7 columnas), texto descolgado (5 columnas), mucho aire. */
.editorial-intro{
  padding:var(--space-2xl) 0;
}
.editorial-intro .grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:72px;
  align-items:start;
}
.editorial-intro .eyebrow{display:block;margin-bottom:26px;}
.editorial-intro h1,
.editorial-intro h2{
  font-size:clamp(2.6rem,4.4vw,4.2rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.01em;
}
.editorial-intro .col-text{
  padding-top:120px; /* descolgado: composición asimétrica, no centrada */
}
.editorial-intro .col-text p{
  color:#4a4d52;
  margin-bottom:26px;
}

/* ---------- 04 · Tres universos (bloques full-bleed protagonistas) ---------- */
.universe{
  position:relative;
  min-height:72vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--blush-horizon);
}
.universe .media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease-out);
}
.universe:hover .media{transform:scale(1.03);}
.universe .media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,12,24,0.05) 30%, rgba(5,12,24,0.72) 100%);
}
/* Placeholder de media mientras no hay fotos reales de cada unidad */
.universe .media.placeholder{
  background-image:linear-gradient(135deg,#0d3a72,#89C1F4);
}
.universe .content{
  position:relative;z-index:2;
  width:100%;
  max-width:var(--container-wide);
  margin:0 auto;
  padding:0 48px 72px;
}
.universe.align-right .content{text-align:right;display:flex;flex-direction:column;align-items:flex-end;}
.universe .content .eyebrow{color:var(--jordy-blue);margin-bottom:14px;display:block;}
.universe .content h2{
  color:var(--blush-horizon);
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:500;
  margin-bottom:12px;
}
.universe .content .frase{
  color:rgba(244,241,234,0.85);
  font-size:1.05rem;
  max-width:52ch;
  margin-bottom:28px;
}

/* ---------- 05 · Franja Mesa del Chef (pausa visual en Glacier) ---------- */
.chef-band{
  background:var(--glacier);
  color:var(--blush-horizon);
  padding:var(--space-2xl) 0;
  text-align:center;
}
.chef-band .eyebrow{color:var(--jordy-blue);margin-bottom:18px;display:block;}
.chef-band h2{
  color:var(--blush-horizon);
  font-weight:500;
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  max-width:24ch;
  margin:0 auto 18px;
}
.chef-band p{
  color:rgba(244,241,234,0.8);
  margin:0 auto 34px;
  max-width:56ch;
}

/* ---------- 06 · La colección (cards de flota, diseño ya validado) ---------- */
.collection{padding:var(--section-gap) 0;}
.collection .head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:52px;
}
.collection .head h2{font-weight:500;}
.collection .head p{color:#4a4d52;max-width:44ch;}
.fleet-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
}
.fleet-card{
  position:relative;
  height:600px;
  overflow:hidden;
  display:block;
  color:var(--blush-horizon);
}
.fleet-card .photo{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1c5b9c,#89C1F4);
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease-out);
  /* [IMAGEN PENDIENTE] reemplazar por foto real del yate */
}
.fleet-card:hover .photo{transform:scale(1.06);}
.fleet-card .photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,12,24,0) 30%, rgba(5,12,24,0.9) 100%);
}
.fleet-card .tag{
  position:absolute;top:26px;left:26px;z-index:2;
  display:flex;align-items:center;gap:7px;
  font-size:0.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--blush-horizon);
}
.fleet-card .tag::before{content:'';width:6px;height:6px;border-radius:50%;background:#3ED598;}
.fleet-card .body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 34px 32px;
}
.fleet-card h3{color:var(--blush-horizon);font-size:1.7rem;margin-bottom:10px;}
.fleet-card .specs{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:0.78rem;color:rgba(244,241,234,0.85);font-weight:500;
  margin-bottom:14px;
  letter-spacing:0.02em;
}
.fleet-card p{
  font-size:0.9rem;color:rgba(244,241,234,0.75);margin-bottom:20px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
}
.fleet-card:hover p{max-height:80px;opacity:1;}
.fleet-card .card-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:0.95rem;color:var(--blush-horizon);
  border-bottom:1px solid rgba(244,241,234,0.5);padding-bottom:4px;
  transition:border-color .2s ease,gap .2s ease;
}
.fleet-card .card-link:hover{border-color:var(--blush-horizon);gap:12px;}

/* ---------- 07 · Prueba social editorial ---------- */
.social-editorial{
  padding:var(--section-gap) 0;
  background:#EDE9E0; /* variación apenas más profunda del blush para separar la sección */
}
.social-editorial .quote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem,3.4vw,3rem);
  color:var(--glacier);
  line-height:1.18;
  max-width:20ch;
  margin-bottom:16px;
}
.social-editorial .meta{
  display:flex;align-items:center;gap:12px;
  margin-bottom:56px;
}
.social-editorial .meta .stars{color:#F5C451;letter-spacing:2px;font-size:0.9rem;}
.social-editorial .meta span:last-child{
  font-size:0.76rem;color:#6a6d72;
  text-transform:uppercase;letter-spacing:0.14em;
}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.review{
  border-top:1px solid rgba(9,47,100,0.18);
  padding-top:24px;
}
.review:nth-child(2){margin-top:32px;} /* offset editorial, no grilla plana */
.review:nth-child(3){margin-top:64px;}
.review p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.02rem;
  color:#3d3f42;
  margin-bottom:14px;
}
.review .who{
  font-size:0.78rem;font-weight:600;color:var(--glacier);
  text-transform:uppercase;letter-spacing:0.08em;
}
.social-editorial .cta-row{margin-top:56px;}

/* ---------- 08 · CTA final emocional (full-bleed sobre imagen) ---------- */
.cta-final{
  position:relative;
  color:var(--blush-horizon);
  text-align:center;
  padding:var(--space-2xl) 0;
  overflow:hidden;
  background:var(--cool-black);
}
.cta-final .bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:0.5;
}
.cta-final::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(18,19,15,0.55), rgba(18,19,15,0.75));
}
.cta-final .container{position:relative;z-index:2;}
.cta-final h2{
  color:var(--blush-horizon);
  font-weight:500;
  font-size:clamp(2rem,3.6vw,3.2rem);
  max-width:22ch;margin:0 auto;
}
.cta-final p{margin:16px auto 36px;color:rgba(244,241,234,0.85);}
.cta-final .hero-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--cool-black);
  color:rgba(244,241,234,0.75);
  padding:var(--space-lg) 0 32px;
}
/* Bloque de marca: logo + claim + reseñas, centrado.
   El padding y el margin eran los dos var(--space-lg): sumaban el doble de aire
   y dejaban la línea divisoria flotando en el medio de un hueco. */
.footer-brand{
  text-align:center;
  padding-bottom:var(--space-md);
  margin-bottom:var(--space-md);
  border-bottom:1px solid rgba(244,241,234,0.12);
}
.footer-brand .logo{display:inline-flex;}
.footer-brand .logo .logo-img{height:34px;}
.footer-brand p{
  color:rgba(244,241,234,0.7);
  font-size:0.95rem;
  /* 52ch cortaba el claim en dos líneas y dejaba "Tigre y Nordelta" huérfano */
  max-width:64ch;
  margin:16px auto 0;
}
/* Reseñas: es prueba social, así que tiene jerarquía propia.
   El puntaje va en la serif de la marca; la etiqueta, chica y separada por
   una línea fina. Sin recuadro: el peso lo dan la tipografía y el color. */
.footer-reviews{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:22px;
  color:rgba(244,241,234,0.72);
  transition:color .3s var(--ease-out);
}
.footer-reviews .fr-stars{
  color:#FBBC04;
  font-size:1.02rem;
  letter-spacing:0.14em;
  line-height:1;
}
.footer-reviews .fr-score{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.35rem;
  line-height:1;
  color:var(--blush-horizon);
}
.footer-reviews .fr-label{
  font-family:var(--font-body);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding-left:14px;
  border-left:1px solid rgba(244,241,234,0.22);
  line-height:1.2;
}
.footer-reviews:hover{color:var(--blush-horizon);}
.footer-reviews:hover .fr-label{border-left-color:rgba(244,241,234,0.55);}
/* Tres verticales de igual ancho, alineadas a la izquierda */
.footer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  margin-bottom:var(--space-md);
  /* Todo el footer sobre el mismo eje: las columnas centradas igual que la marca */
  text-align:center;
  max-width:980px;margin-left:auto;margin-right:auto;
}
.footer-grid h3{color:var(--blush-horizon);font-family:var(--font-body);
  text-transform:uppercase;font-size:0.78rem;letter-spacing:0.08em;margin-bottom:16px;}
.footer-grid p{color:rgba(244,241,234,0.65);font-size:0.9rem;margin-top:14px;}
.footer-links li{margin-bottom:10px;font-size:0.9rem;}
.footer-links a:hover{color:var(--jordy-blue);}
.footer-bottom{
  border-top:1px solid rgba(244,241,234,0.12);
  padding-top:22px;
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:8px 28px;
  text-align:center;
  font-size:0.78rem;color:rgba(244,241,234,0.5);
}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:30px;height:30px;}
/* Home: oculto durante el hero, aparece recién al entrar a la siguiente sección (main.js).
   Sin rebotes ni pulsaciones: solo opacity + translateY. */
body.page-home .wa-float{
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s linear .5s;
}
body.page-home .wa-float.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
body.page-home .wa-float.is-on:hover{transform:scale(1.06);}

/* ============================================
   Componentes de páginas internas (se conservan
   para experiencias.html / contacto.html / /yates/
   hasta su rediseño en la siguiente etapa)
   ============================================ */
/* Solo las <section> sin clase toman el padding por defecto.
   Las secciones con clase (ed-*, pg-*) definen su propio ritmo:
   si esta regla las alcanzaba, las full-bleed sumaban ~124px
   de fondo arriba y abajo que nadie había pedido. */
section:not([class]){padding:var(--section-gap) 0;}
.section-head{max-width:640px;margin:0 auto var(--space-md);text-align:center;}
.section-head p{margin:14px auto 0;color:#4a4d52;}

/* ---------- Banner de página interna: fotografía + título ----------
   Reemplaza la franja negra plana. Sin breadcrumb ni numeración
   de unidad: solo la imagen y el nombre de la sección. */
.page-hero{
  position:relative;
  /* Era una franja de 300-440px: la foto quedaba recortada a un pedazo de cielo
     y no se entendía qué mostraba. Con más alto entra la escena completa. */
  min-height:clamp(380px, 58vh, 600px);
  /* Título abajo: así no tapa el sujeto de la foto (el yate, el grupo, la costa) */
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--cool-black);
  color:var(--blush-horizon);
  text-align:center;
}
.page-hero .media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  overflow:hidden;
}
.page-hero .media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.page-hero .media.placeholder{
  background:linear-gradient(135deg,#0d3a72,#89C1F4);
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Velo más liviano arriba y abajo, concentrado en la banda del título:
     la foto se ve y el título igual se lee. */
  background:linear-gradient(180deg,
    rgba(5,11,20,0.30) 0%,
    rgba(5,11,20,0.52) 45%,
    rgba(5,11,20,0.30) 100%);
}
.page-hero .container{
  position:relative;z-index:2;
  padding-top:var(--space-lg);
  padding-bottom:clamp(38px, 5vh, 64px);
}
.page-hero h1{
  color:var(--blush-horizon);
  font-weight:500;
  font-size:clamp(2.2rem, 4.4vw, 3.8rem);
  margin:0 auto;
  max-width:18ch;
}

.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.experience-card{
  background:var(--blush-horizon);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(9,47,100,0.08);
}
.experience-card .thumb{
  height:220px;
  background:linear-gradient(135deg,var(--jordy-blue),var(--secondary));
  /* [IMAGEN PENDIENTE] reemplazar por foto real de la experiencia */
}
.experience-card .body{padding:24px;}
.experience-card h3{margin-bottom:10px;}
.experience-card p{font-size:0.92rem;color:#4a4d52;margin-bottom:16px;}
.exp-card .thumb{position:relative;}
.exp-card .thumb .num{
  position:absolute;top:14px;left:14px;
  font-family:var(--font-display);color:var(--blush-horizon);
  font-size:1.6rem;opacity:0.85;
}

.rope-divider{display:flex;justify-content:center;align-items:center;padding:36px 0;}
.rope-divider svg{width:120px;height:24px;opacity:0.55;}

.unit-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px, 52vw, 600px);}
.unit-split .media{
  background:linear-gradient(135deg,#1c5b9c,#89C1F4);
  background-size:cover;background-position:center;
}
.unit-split .content{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-lg) clamp(40px, 5vw, 88px);background:var(--blush-horizon);
}
.unit-split .content .rule{width:36px;height:1px;background:var(--tufts-blue);margin-bottom:20px;}
.unit-split.reverse .media{order:2;}
.unit-split.reverse .content{order:1;}
.unit-split .content .eyebrow{margin-bottom:14px;}
.unit-split .content h2{margin-bottom:18px;}
.unit-split .content p{color:#4a4d52;margin-bottom:26px;}

.yacht-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;}
.yacht-gallery .main-photo{
  height:420px;border-radius:var(--radius);
  background:linear-gradient(135deg,#1c5b9c,#89C1F4);
  margin-bottom:14px;
  /* [IMAGEN PENDIENTE] foto principal real del yate */
}
.yacht-gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.yacht-gallery .thumbs div{
  height:80px;border-radius:var(--radius);
  background:linear-gradient(135deg,#89C1F4,#1c5b9c);
}
.yacht-specs{
  background:var(--blush-horizon);border-radius:var(--radius);
  padding:28px;box-shadow:0 10px 30px rgba(9,47,100,0.08);
}
.yacht-specs .price{font-family:var(--font-display);font-size:1.7rem;color:var(--glacier);margin-bottom:4px;}
.yacht-specs .price-note{font-size:0.78rem;color:#8a8d92;margin-bottom:22px;}
.spec-list{margin-bottom:24px;}
.spec-list li{
  display:flex;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(9,47,100,0.08);
  font-size:0.9rem;
}
.spec-list li span:first-child{color:#6a6d72;}
.spec-list li span:last-child{font-weight:700;color:var(--glacier);}
.yacht-specs .btn{width:100%;justify-content:center;margin-bottom:10px;}
.yacht-description{margin-top:56px;}
.yacht-description h2{margin-bottom:16px;}
.yacht-description p{max-width:76ch;color:#4a4d52;margin-bottom:16px;}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-form{
  background:var(--blush-horizon);border-radius:var(--radius);
  padding:32px;box-shadow:0 10px 30px rgba(9,47,100,0.08);
}
.field{margin-bottom:18px;}
.field label{
  display:block;font-size:0.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--secondary);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;
  border:1px solid rgba(9,47,100,0.18);border-radius:var(--radius);
  font-family:var(--font-body);font-size:0.95rem;background:var(--blush-horizon);
}
.field textarea{min-height:120px;resize:vertical;}
.contact-info-block{margin-bottom:28px;}
.contact-info-block h2{
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--tufts-blue);margin-bottom:8px;
}
.contact-info-block p{color:var(--glacier);font-size:1.05rem;font-weight:600;}

.review-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(244,241,234,0.12);border:1px solid rgba(244,241,234,0.3);
  padding:12px 22px;border-radius:40px;margin-bottom:28px;
}
.review-badge .stars{color:#F5C451;letter-spacing:2px;font-size:0.95rem;}
.review-badge span.count{font-size:0.85rem;color:rgba(244,241,234,0.92);}
.review-badge.light{background:var(--blush-horizon);border-color:rgba(9,47,100,0.1);box-shadow:0 10px 30px rgba(9,47,100,0.08);}
.review-badge.light span.count{color:var(--glacier);font-weight:600;}

.signature-callout{
  background:var(--glacier);color:var(--blush-horizon);
  border-radius:var(--radius);
  padding:56px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.signature-callout h3{color:var(--blush-horizon);margin-bottom:10px;}
.signature-callout p{color:rgba(244,241,234,0.82);}

.consult-note{
  font-size:0.78rem;color:#8a8d92;text-transform:uppercase;letter-spacing:0.04em;margin-top:auto;padding-top:6px;
}

/* ============================================
   HOME EDITORIAL — cuerpo post-hero
   Ritmo inmersivo: la fotografía y el video dominan.
   BLUSH breve → MEDIA FULL BLEED → GLACIER →
   MEDIA FULL BLEED → SPLIT FULL BLEED → GLACIER.
   Sin cards, sin radius, sin sombras, sin íconos,
   sin rótulos técnicos visibles. Prefijo ed- para no
   interferir con componentes de páginas internas.
   ============================================ */

/* ---------- Intro: declaración de posicionamiento, composición centrada ----------
   Todo el contenido en un eje central: eyebrow → titular → texto.
   Sin columnas, sin CTA, sin imágenes. Ancho de lectura controlado. */
.ed-intro{
  background:var(--blush-horizon);
  padding:var(--space-2xl) 5vw;
}
.ed-intro-inner{
  max-width:1140px; /* holgura para que el titular entre en una línea en desktop */
  margin:0 auto;
  text-align:center;
}
.ed-intro .eyebrow{
  display:block;
  letter-spacing:0.24em;
  margin-bottom:26px;
}
.ed-intro h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(48px, 5vw, 76px);
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--cool-black);
  max-width:none;
  margin:0 0 32px;
}
.ed-intro p{
  font-size:1.05rem;
  line-height:1.75;
  color:rgba(18,19,15,0.7);
  max-width:880px; /* ancho de lectura controlado, más angosto que el titular */
  margin:0 auto;
}

/* ---------- CTA editorial: texto en mayúsculas, sin caja ---------- */
.ed-cta{
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.76rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--blush-horizon);
  border-bottom:1px solid rgba(244,241,234,0.45);
  padding-bottom:6px;
  transition:border-color .35s var(--ease-out);
}
.ed-cta:hover{border-color:rgba(244,241,234,0.95);}

/* ---------- Grilla 2×2: los cuatro universos, fotografía protagonista ---------- */
.ed-grid{
  background:var(--blush-horizon);
  /* abajo va otra sección fotográfica: no necesita el aire de una editorial */
  padding:0 clamp(16px, 2.4vw, 40px) var(--space-lg);
}
.ed-grid-inner{
  max-width:1720px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px, 1vw, 18px);
}
.ed-tile{
  position:relative;display:block;
  overflow:hidden;
  aspect-ratio:16/9;
}
.ed-tile img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .75s var(--ease-out);
}
/* Reencuadre por foto: preserva el punto de interés de cada imagen */
/* Yate 48 pies: encuadre alto para privilegiar el cielo sobre el río */
.ed-tile:nth-child(1) img{object-position:center 30%;}
/* Encuadre del carrusel: el cliente pidió más cielo.
   object-position Y bajo = la ventana visible se corre hacia arriba de la foto.
   14% es el punto donde entra todo el cielo disponible sin cortar
   el sujeto de abajo (la mesa, la proa, el faro). */
.hero-slide[data-slide-index="1"] .hero-media{object-position:center 14%;}
.hero-slide[data-slide-index="2"] .hero-media{object-position:center 14%;}
.hero-slide[data-slide-index="3"] .hero-media{object-position:center 14%;}
.ed-tile:nth-child(2) img{object-position:62% center;}
.ed-tile:nth-child(3) img{object-position:center 62%;}
.ed-tile:nth-child(4) img{object-position:center 55%;}
.ed-tile:hover img,
.ed-tile:focus-visible img{transform:scale(1.025);}
.ed-tile-scrim{
  position:absolute;inset:0;z-index:1;
  /* Overlay mínimo: solo la franja inferior donde se apoya el título */
  background:linear-gradient(180deg, rgba(5,11,20,0) 52%, rgba(5,11,20,0.5) 100%);
  transition:opacity .6s var(--ease-out);
}
.ed-tile:hover .ed-tile-scrim,
.ed-tile:focus-visible .ed-tile-scrim{opacity:1.18;}
.ed-tile-name{
  position:absolute;z-index:2;
  left:clamp(24px, 2.4vw, 44px);
  bottom:clamp(22px, 2.2vw, 40px);
  display:inline-flex;align-items:baseline;gap:0;
  color:var(--blush-horizon);
  font-family:var(--font-display);
  font-weight:500;
  /* bajado a pedido del cliente: se veía muy grande en desktop y en celular */
  font-size:clamp(26px, 2.5vw, 40px);
  line-height:1.1;
  letter-spacing:-0.005em;
}
.ed-tile-arrow{
  display:inline-block;
  margin-left:0;width:0;
  opacity:0;transform:translateX(-6px);
  overflow:hidden;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), width .5s var(--ease-out), margin-left .5s var(--ease-out);
}
.ed-tile:hover .ed-tile-arrow,
.ed-tile:focus-visible .ed-tile-arrow{
  opacity:1;transform:none;
  width:1.1em;margin-left:0.28em;
}

/* ---------- Mesa del Chef: full-bleed + copy sobre la foto ---------- */
.ed-chef{
  position:relative;
  overflow:hidden;
  height:82svh;min-height:520px;
}
.ed-chef-media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.ed-chef-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 60%;
  display:block;
}
/* Dos capas: el radial da atmósfera desde la esquina donde va el texto y el
   lineal de abajo garantiza contraste aunque la foto tenga una zona clara ahí.
   Sin esto el párrafo se perdía sobre el reflejo del atardecer. */
.ed-chef-scrim{
  position:absolute;inset:0;
  /* Tres capas: un velo parejo que baja el brillo de toda la foto, el degradado
     desde abajo para el texto y el radial de la esquina. La foto queda de fondo
     y el que manda es el texto. */
  background:
    linear-gradient(0deg, rgba(5,11,20,0.88) 0%, rgba(5,11,20,0.62) 34%, rgba(5,11,20,0.30) 70%, rgba(5,11,20,0.22) 100%),
    radial-gradient(120% 95% at 0% 100%, rgba(5,11,20,0.60) 0%, rgba(5,11,20,0.25) 45%, rgba(5,11,20,0) 72%);
}
.ed-chef-copy{
  position:absolute;z-index:2;
  left:max(40px, 6vw);
  bottom:clamp(72px, 10vh, 120px);
  color:var(--blush-horizon);
  max-width:520px;
}
.ed-chef-copy h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.1rem, 3.6vw, 3.3rem);
  line-height:1.12;
  color:var(--blush-horizon);
  margin:14px 0 18px;
}
.ed-chef-sub{
  font-size:1rem;
  color:rgba(244,241,234,0.95);
  max-width:46ch;
  margin-bottom:24px;
}

/* ---------- Reseñas: prueba social sobre Glacier ---------- */
.ed-reviews{
  background:var(--glacier);
  padding:var(--space-2xl) 0;
}
.ed-reviews-head{
  text-align:center;
  max-width:760px;margin:0 auto var(--space-lg);
}
.ed-reviews-head .eyebrow{
  display:block;
  color:var(--jordy-blue);
  margin-bottom:18px;
}
.ed-reviews-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 3.2vw, 2.9rem);
  line-height:1.18;
  color:var(--blush-horizon);
  margin:0 0 20px;
}
.ed-reviews-rating{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;
  font-family:var(--font-body);
  font-size:0.86rem;
  letter-spacing:0.06em;
  color:rgba(244,241,234,0.75);
  max-width:none;margin:0;
}
/* Amarillo de las estrellas de Google: es el signo universal de reseña */
.ed-stars{
  color:#FBBC04;
  letter-spacing:0.16em;
  font-size:0.95rem;
  line-height:1;
}
.ed-reviews-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg) clamp(40px, 5vw, 80px);
}
/* Sin cards: cada reseña se separa con una línea fina */
.ed-review{
  border-top:1px solid rgba(244,241,234,0.18);
  padding-top:26px;
}
.ed-review .ed-stars{display:block;margin-bottom:16px;}
.ed-review p{
  font-family:var(--font-display);
  font-size:1.02rem;
  line-height:1.7;
  color:rgba(244,241,234,0.9);
  max-width:46ch;
  margin:0 0 18px;
}
.ed-review cite{
  font-family:var(--font-body);
  font-style:normal;
  font-size:0.74rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(244,241,234,0.55);
}
.ed-reviews-cta{
  text-align:center;
  margin-top:var(--space-lg);
}

/* ---------- Experiencias: foto protagonista 68% + panel Glacier 32% ---------- */
.ed-exp{
  display:flex;flex-wrap:wrap;
  min-height:78vh;
}
.ed-exp-media{
  position:relative;
  flex:1 1 640px;
  overflow:hidden;
  margin:0;
}
.ed-exp-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.ed-exp-panel{
  flex:1 1 340px;
  min-width:320px;
  background:var(--glacier);
  color:var(--blush-horizon);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-lg) clamp(40px, 5vw, 72px);
}
.ed-exp-panel .eyebrow{color:var(--blush-horizon);opacity:0.72;}
.ed-exp-panel h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 2.6vw, 2.7rem);
  line-height:1.15;
  color:var(--blush-horizon);
  margin:16px 0 18px;
  max-width:13ch;
}
.ed-exp-panel p{
  font-size:0.95rem;
  color:rgba(244,241,234,0.8);
  max-width:32ch;
  margin-bottom:26px;
}
.ed-exp-panel .ed-cta{color:var(--blush-horizon);border-color:rgba(244,241,234,0.45);}
.ed-exp-panel .ed-cta:hover{border-color:rgba(244,241,234,0.95);}
.ed-exp-tags{
  display:block;
  font-family:var(--font-body);
  font-size:0.68rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(244,241,234,0.5);
  margin-bottom:28px;
}

/* ---------- Traslados: intro breve + split 50/50 casi fullscreen ---------- */
.ed-split{background:var(--blush-horizon);}
.ed-split-intro{
  /* viene de .ed-reviews (Glacier): el corte de color ya separa */
  padding:var(--space-sm) 24px var(--space-lg);
  text-align:center;
}
.ed-split-intro .eyebrow{display:block;}
.ed-split-intro h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 3vw, 2.9rem);
  line-height:1.16;
  color:var(--cool-black);
  margin:18px auto 0;
  max-width:20ch;
}
.ed-split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
/* Un solo destino (Carmelo): ocupa el ancho completo, sin dejar hueco */
.ed-split-grid--solo{grid-template-columns:1fr;}
.ed-dest{
  position:relative;display:block;
  overflow:hidden;
  height:clamp(420px, 72vh, 760px);
}
.ed-dest .media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s var(--ease-out);
}
.ed-dest:hover .media,
.ed-dest:focus-visible .media{transform:scale(1.045);}
.ed-dest::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,11,20,0) 50%, rgba(5,11,20,0.5) 100%);
}
.ed-dest-name{
  position:absolute;z-index:2;
  left:clamp(28px, 3vw, 48px);
  bottom:clamp(28px, 3vw, 48px);
  color:var(--blush-horizon);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.8rem, 2.8vw, 2.6rem);
  letter-spacing:0.01em;
}
.ed-dest-cta{
  position:absolute;z-index:2;
  right:clamp(28px, 3vw, 48px);
  bottom:clamp(32px, 3.2vw, 52px);
  color:var(--blush-horizon);
  font-family:var(--font-body);
  font-size:0.72rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.ed-dest:hover .ed-dest-cta,
.ed-dest:focus-visible .ed-dest-cta{opacity:1;transform:none;}

/* ---------- Cierre: Glacier, contraste fuerte antes del footer ---------- */
.ed-close{
  background:var(--glacier);
  padding:var(--space-2xl) 0;
  text-align:center;
}
.ed-close h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.2rem, 4vw, 3.6rem);
  line-height:1.14;
  color:var(--blush-horizon);
  max-width:18ch;
  margin:0 auto 28px;
}
.ed-close-sub{
  font-size:1rem;
  color:rgba(244,241,234,0.75);
  max-width:52ch;
  margin:0 auto 44px;
}
.ed-btn{
  display:inline-block;
  background:var(--blush-horizon);
  color:var(--glacier);
  font-family:var(--font-body);
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:19px 52px;
  transition:background .35s var(--ease-out), color .35s var(--ease-out);
}
.ed-btn:hover{background:var(--secondary);color:var(--blush-horizon);}

/* ============================================
   PÁGINAS INTERNAS — sistema editorial
   Mismo lenguaje que la Home: fotografía grande,
   espacio negativo, sin cards ni sombras.
   Prefijo pg- para no chocar con componentes viejos.
   ============================================ */

/* ---------- Intro de unidad: declaración centrada ---------- */
.pg-intro{
  background:var(--blush-horizon);
  padding:var(--space-2xl) 5vw;
}
.pg-intro-inner{
  max-width:1000px;margin:0 auto;text-align:center;
}
.pg-intro h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(32px, 3.6vw, 54px);
  line-height:1.14;
  color:var(--cool-black);
  margin:18px 0 28px;
}
.pg-intro p{
  font-size:1.02rem;line-height:1.75;
  color:rgba(18,19,15,0.7);
  max-width:820px;margin:0 auto;
}

/* ---------- Ficha de datos: línea editorial, sin cards ---------- */
.pg-specs{
  display:flex;flex-wrap:wrap;
  gap:0 clamp(28px, 3vw, 52px);
  margin-top:clamp(36px, 4vw, 56px);
  justify-content:center;
}
.pg-specs li{
  font-family:var(--font-body);
  font-size:0.76rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--glacier);
  padding:14px 0;
  border-top:1px solid rgba(9,47,100,0.22);
  flex:0 1 auto;
}

/* ---------- Bloque de experiencia: media + copy alternado ---------- */
.pg-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--blush-horizon);
}
.pg-block .media{
  min-height:clamp(340px, 42vw, 560px);
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
}
/* Las fotos pasaron de background-image a <img loading="lazy">: el navegador
   sólo descarga las que el visitante llega a ver. En Alquiler de Yates, con
   14 embarcaciones, eso es la diferencia entre 2,7 MB y unos 400 KB de arranque. */
.pg-block .media img,
.ed-split .media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.pg-block .media.placeholder{
  background:linear-gradient(135deg,#0d3a72,#89C1F4);
  position:relative;
}
.pg-block .media.placeholder::after{
  content:"[FOTO PENDIENTE]";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-body);font-size:0.72rem;font-weight:600;
  letter-spacing:0.2em;color:rgba(244,241,234,0.85);
}
.pg-block .content{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-lg) clamp(40px, 5vw, 88px);
}
.pg-block h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(26px, 2.6vw, 38px);
  line-height:1.16;
  color:var(--cool-black);
  margin:14px 0 18px;
}
.pg-block p{
  font-size:0.98rem;line-height:1.72;
  color:rgba(18,19,15,0.7);
  max-width:52ch;
}
/* Línea de datos duros: capacidad, jornada y guardería */
.pg-block-meta{
  font-family:var(--font-body);
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--tufts-blue);
  margin-bottom:4px;
}
.pg-block.dark .pg-block-meta{color:var(--jordy-blue);}
.pg-block ul{
  margin-top:24px;
  display:flex;flex-direction:column;gap:10px;
}
.pg-block ul li{
  font-size:0.88rem;
  color:rgba(18,19,15,0.62);
  padding-left:18px;position:relative;
}
.pg-block ul li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:6px;height:1px;background:var(--tufts-blue);
}
.pg-block.reverse .media{order:2;}
.pg-block.reverse .content{order:1;}
/* Variante sobre Glacier para cortar el ritmo */
.pg-block.dark{background:var(--glacier);}
.pg-block.dark h3{color:var(--blush-horizon);}
.pg-block.dark p{color:rgba(244,241,234,0.78);}
.pg-block.dark ul li{color:rgba(244,241,234,0.62);}
.pg-block.dark .eyebrow{color:var(--jordy-blue);}

/* ---------- Cierre de página ---------- */
.pg-cta{
  background:var(--glacier);
  padding:var(--space-2xl) 24px;
  text-align:center;
}
.pg-cta h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px, 3.4vw, 48px);
  line-height:1.16;
  color:var(--blush-horizon);
  max-width:20ch;margin:0 auto 24px;
}
.pg-cta p{
  font-size:1rem;color:rgba(244,241,234,0.72);
  max-width:50ch;margin:0 auto 40px;
}

/* ============================================
   RITMO ENTRE SECCIONES
   Cuando dos bloques con padding vertical quedan pegados,
   la suma genera el doble de vacío del necesario. Estas reglas
   recortan el padding superior del segundo bloque para que la
   separación total siga siendo una sola respiración.
   ============================================ */

/* Texto seguido de texto sobre el MISMO fondo: no hay corte de color
   que justifique el aire, así que el segundo entra bien pegado. */
.pg-intro + .pg-intro{
  padding-top:var(--space-sm);
}
/* Texto seguido de texto con CAMBIO de fondo: el color ya separa,
   alcanza con una respiración media. */
.pg-intro + .pg-cta{
  padding-top:var(--space-lg);
}

/* Fotografía seguida de texto: el corte de la imagen ya separa,
   así que el bloque de texto entra con la mitad del aire.
   (internas: pg-block → pg-intro / pg-cta · home: ed-split → ed-close) */
.pg-block + .pg-intro,
.pg-block + .pg-cta,
.ed-split + .ed-close{
  padding-top:var(--space-lg);
}

/* Dos secciones fotográficas seguidas: una franja de Blush entre medio
   para que no se lean como una sola imagen cortada. */
.ed-exp + .ed-chef{
  margin-top:var(--space-lg);
}

/* Última sección antes del footer: no acumular con el padding del footer */
main > :last-child{margin-bottom:0;}

/* Nota de dato faltante — sólo para la revisión del cliente.
   Se elimina cuando llegue la información. */
.pg-block-pend{
  font-family:var(--font-body);
  font-size:0.82rem;
  line-height:1.5;
  color:var(--tufts-blue);
  border-top:1px solid rgba(34,140,236,0.35);
  padding-top:12px;
  margin-top:4px;
  max-width:38ch;
}
.pg-block.dark .pg-block-pend{
  color:var(--jordy-blue);
  border-top-color:rgba(137,193,244,0.35);
}

/* ---------- Contacto: columna izquierda con identidad ----------
   El cliente pedía peso visual del lado izquierdo para que la columna
   cierre a la misma altura que el formulario. El logo cumple esa función
   y de paso repite el gesto de marca de la Home. */
.contact-side{display:flex;flex-direction:column;}
.contact-logo{
  width:clamp(210px, 26vw, 300px);
  height:auto;
  margin-bottom:var(--space-md);
  opacity:0.9;
}

/* Nota y error del formulario de consultas */
.form-nota{
  font-size:0.82rem;line-height:1.5;
  color:rgba(18,19,15,0.55);
  text-align:center;margin-top:12px;
}
.form-error{
  font-size:0.85rem;font-weight:600;
  color:#b3261e;
  margin-top:12px;text-align:center;
}

/* ---------- Isotipo de cuerda como gesto de marca ----------
   Abre la intro de cada página interna y cierra los bloques oscuros.
   Discreto a propósito: acompaña, no compite con el titular. */
.pg-isotipo{
  display:block;
  width:clamp(46px, 5vw, 62px);
  height:auto;
  margin:0 auto 20px;
  opacity:0.85;
}
.pg-isotipo--claro{
  margin-bottom:22px;
  opacity:0.9;
}
.ed-reviews-cta .pg-isotipo{margin-bottom:18px;}

/* ---------- Cierre de Angra: foto a pantalla completa con caja de texto ----------
   Reemplaza el bloque azul plano. La caja mantiene el Glacier de la marca para
   que el cambio no rompa la identidad, pero ahora flota sobre la imagen. */
.angra-cierre{
  position:relative;
  isolation:isolate;
  min-height:460px;                      /* respaldo si clamp no se soporta */
  min-height:clamp(460px, 72vh, 720px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:var(--space-xl) 24px;
  /* Fondo de respaldo: si la foto tarda o falla, la sección igual se ve
     como un bloque de marca y nunca como un hueco. */
  background:var(--glacier);
}
.angra-cierre > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  z-index:0;
}
.angra-cierre-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,11,20,0.22) 0%, rgba(5,11,20,0.42) 100%);
}
.angra-cierre-caja{
  position:relative;z-index:2;
  background:var(--glacier);
  color:var(--blush-horizon);
  text-align:center;
  max-width:640px;
  padding:clamp(38px, 5vw, 62px) clamp(28px, 4vw, 56px);
}
.angra-cierre-caja h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.18;
  color:var(--blush-horizon);
  margin:0 0 16px;
}
.angra-cierre-caja p{
  color:rgba(244,241,234,0.88);
  font-size:1rem;line-height:1.7;
  max-width:44ch;margin:0 auto 28px;
}

/* El header es fijo: sin esto, al entrar por un enlace con ancla la sección
   queda escondida debajo. Se reserva el alto del header más un respiro. */
[id]{scroll-margin-top:clamp(88px, 12vh, 120px);}
html{scroll-behavior:smooth;}

/* Crédito de la agencia: enlace discreto, se enciende al pasar el mouse */
.footer-bottom a{
  color:inherit;
  border-bottom:1px solid rgba(244,241,234,0.25);
  padding-bottom:1px;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.footer-bottom a:hover{
  color:var(--blush-horizon);
  border-bottom-color:rgba(244,241,234,0.7);
}