/* ═══════════════════════════════════════════════════════════
   TEMA — Maldivia · viajes a Maldivas

   Turquesa profundo SATURADO, no un negro con un tinte. Es la
   diferencia con las otras dos demos oscuras: Marena (#0C1410) y
   Núcleo (#0C1420) son casi negras y el color se lee recién en los
   detalles; acá el color ES la página, como el agua de un atolón
   mirada desde arriba.

   El acento es un coral de atardecer, claro y tibio. No es el naranja
   quemado de Brasal (#E0713A): aquel es fuego sobre marrón, éste es la
   última luz del sol sobre agua fría. Y las esquinas van blandas
   —16 px— porque lo que se vende es un descanso, no un trámite.
   ═══════════════════════════════════════════════════════════ */
/* ⚠ Y DESPUÉS SE ABRIÓ TODAVÍA MÁS. El pedido: «un poco más de color,
   de vibración, un poco más vivo, más turquesa, más parecido a la
   imagen inicial de la demo, no tan oscuro». Tenía razón y el motivo es
   concreto: el hero es una foto de agua de atolón a pleno sol —turquesa
   encendido— y apenas se pasaba el hero la página caía a #063845, que
   es el turquesa MOJADO, el del fondo del mar. O sea que la foto
   prometía Maldivas y el resto del sitio entregaba una pileta de noche.

   Ahora la base sube a #075363. Es el mismo tono —no se cambió de
   color, se cambió de LUZ— y ya está en la familia del agua de la foto.

   ⚠ Subir la base obliga a mirar dos cosas, no una:
   · Las superficies suben con ella o dejan de distinguirse del fondo.
     Un panel a 4 puntos de luminosidad del fondo desaparece.
   · El texto claro sobre #14839A sigue dando arriba de 5:1, o sea que
     se lee. Un escalón más de luz y la superficie más clara ya no
     aguanta el texto encima, así que #14839A es el techo, no un
     número elegido de casualidad. */
:root{
  --bg:          #075363;
  --bg-2:        #096073;
  --surface:     #0C6E82;
  --surface-2:   #14839A;
  --line:        rgba(228,246,243,.16);
  --line-strong: rgba(228,246,243,.30);

  --text:        #F1FAF8;
  --text-2:      #CBE6E3;
  --muted:       #99C0C1;

  --accent:      #FF9E7A;
  --accent-2:    #FFC6AC;
  --accent-deep: #C25F3C;
  --on-accent:   #06303B;
  --glow:        rgba(255,158,122,.34);
  --glow-soft:   rgba(255,158,122,.12);

  --vidrio:        linear-gradient(165deg,rgba(228,246,243,.08),rgba(228,246,243,.02));
  --vidrio-fuerte: linear-gradient(165deg,rgba(228,246,243,.14),rgba(228,246,243,.05));
  --campo-bg:      rgba(3,45,55,.46);

  --tracking-h:  -.018em;
  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 100px;

  --sh-depth: 0 10px 40px rgba(2,34,42,.62);
  --sh-lit:   0 0 28px rgba(255,158,122,.30);
  --sh-hover: 0 0 26px rgba(255,198,172,.75);
  --sh-suave: 0 2px 16px rgba(2,34,42,.5);
  --sombra-panel: 0 40px 90px -60px rgba(2,34,42,.9);

  /* La viñeta cierra en el propio turquesa y no en negro: sobre un
     fondo saturado, un negro puro en las esquinas se ve como suciedad.

     ⚠ Y AHORA CIERRA MÁS FLOJO. La viñeta es lo primero que hay que
     volver a medir cuando se aclara una base: con la página oscura, un
     .52 en las esquinas no se notaba porque las esquinas ya estaban
     oscuras. Sobre el turquesa nuevo, ese mismo .52 apaga justo el
     borde de la pantalla y devuelve la página al color de antes — o
     sea, deshace de noche lo que se hizo de día. */
  --grano-op: .05;
  --vineta: radial-gradient(130% 100% at 50% 44%, transparent 46%, rgba(2,38,47,.34) 100%);
}

.bg-static{ opacity:.9 }
.hero__grid{ display:none }

/* ── Tipografía ──
   Fraunces para los titulares. Es una serif blanda, de remates
   redondeados y una itálica muy marcada: al lado de la Cormorant fría
   de Marena o de la Instrument Serif editorial de las demás, ésta
   suena tibia. Que es lo que tiene que sonar una página que vende un
   lugar donde la gente anda descalza. */
.h1, .h2{
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-weight:600;
  letter-spacing:-.012em;
}
.h1{ font-size:clamp(2.6rem, 6vw, 4.9rem); line-height:1.02 }
.h2{ font-size:clamp(2.2rem, 5vw, 3.9rem); line-height:1.04 }
.h1 em, .h2 em{
  font-family:inherit; font-style:italic; font-weight:400;
  color:var(--accent-2);
}

/* ══════════════════════════════════════════════════════════════════
   EL ANZUELO — LA ZAMBULLIDA

   La cámara arranca sobre el agua de una laguna y baja: cruza la
   superficie y quedás abajo. Es todo UN SOLO translate3d sobre un
   solo elemento. No hay canvas, no hay scroll, no hay una línea de
   JavaScript: el celular lo mueve en el compositor y la CPU no se
   entera.

   ⚠ POR QUÉ VA SOLO Y NO ATADO AL SCROLL. Un efecto de hero atado al
   scroll termina de pasar cuando el hero ya se fue de la pantalla, y
   en un teléfono cada cuadro que se pierde se lee como un salto. Acá
   pasa una vez, dura dos segundos y medio, y lo ve el 100 % de las
   visitas —incluida la que llega, mira tres segundos y se va—.

   ⚠ Y LA MEDIDA NO ESTÁ EN vh. La pista mide 200 % del hero y se
   corre -50 % de sí misma: las dos son fracciones de un alto que
   mide el navegador. Con vh, el día que iOS esconde la barra de
   direcciones el hero crece 70 px y la costura del agua queda a mitad
   de camino. */
.hero__mar{ position:absolute; inset:0; z-index:0; overflow:hidden }

.hm__viaje{
  position:absolute; left:0; right:0; top:0;
  height:200%;
  /* La curva entra despacio y frena de golpe: así se siente el peso
     del agua. Una curva pareja se lee a diapositiva que se desliza. */
  animation:hmBajar 2.45s cubic-bezier(.46,.03,.24,1) .5s both;
}
@keyframes hmBajar{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(0,-50%,0) }
}
.hm__pane{ position:absolute; left:0; right:0; height:50%; overflow:hidden }
.hm__pane--aire{ top:0 }
.hm__pane--agua{ top:50% }
.hm__pane img{ display:block; width:100%; height:100%; object-fit:cover }

/* ── La costura ──
   El filo del agua visto desde adentro: una banda clara con cáustica.
   No es decoración, es lo que hace que dos fotos distintas se lean
   como un solo movimiento. Sin esto se ve el corte entre las dos y
   todo el efecto se cae. */
.hm__filo{
  position:absolute; left:0; right:0; top:50%;
  height:11%; transform:translateY(-50%);
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(7,83,99,0)      0%,
      rgba(140,226,222,.30) 26%,
      rgba(232,255,252,.80) 47%,
      rgba(178,238,236,.42) 58%,
      rgba(7,83,99,.34)    82%,
      rgba(7,83,99,0)     100%);
}

/* ── El velo ──
   Queda QUIETO encima de la zambullida y debajo del texto. Es lo que
   permite que el titular sea legible arriba del agua y abajo del
   agua sin cambiar de color en el medio del viaje. */
.hero__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,  rgba(4,42,52,.80) 0%, rgba(4,42,52,.34) 58%, rgba(4,42,52,.10) 100%),
    linear-gradient(180deg, rgba(4,42,52,.52) 0%, rgba(4,42,52,.10) 32%, rgba(7,83,99,.88) 100%);
}
@media (max-width:900px){
  .hero__velo{
    background:linear-gradient(180deg, rgba(4,42,52,.66) 0%, rgba(4,42,52,.30) 40%, rgba(7,83,99,.92) 100%);
  }
}

/* ── Los rayos de sol bajo el agua ──
   Sólo en escritorio: es una capa a pantalla completa y en un celular
   no paga lo que cuesta. Aparece cuando la zambullida ya terminó,
   porque arriba del agua los rayos no existen. */
.hm__rayos{
  display:none;
  position:absolute; inset:-16% -12% auto -12%; height:130%; z-index:1;
  pointer-events:none; opacity:0;
  transform:rotate(-7deg);
  background:repeating-linear-gradient(90deg,
    rgba(206,252,248,0)    0px,  rgba(206,252,248,0)    46px,
    rgba(206,252,248,.085) 64px, rgba(206,252,248,.02)  84px,
    rgba(206,252,248,0)   104px);
  animation:hmRayos 2.4s ease-out 2.35s forwards;
}
@media (min-width:861px) and (hover:hover){ .hm__rayos{ display:block } }
@keyframes hmRayos{ to{ opacity:1 } }

/* ── Las burbujas ──
   Ocho, y sólo con mouse. Suben una vez cada tanto y no hay ninguna
   fuera de la pantalla: son un elemento de 8 px moviéndose en Y, que
   es lo más barato que hay, pero ocho animaciones infinitas en un
   teléfono son ocho capas que el compositor recompone para siempre. */
.hm__burbujas{ display:none; position:absolute; inset:0; z-index:1; pointer-events:none }
@media (min-width:861px) and (hover:hover){ .hm__burbujas{ display:block } }
.hm__burbujas i{
  position:absolute; bottom:-4%;
  left:var(--x); width:var(--r,7px); height:var(--r,7px);
  border-radius:50%;
  background:radial-gradient(60% 60% at 34% 30%, rgba(255,255,255,.92), rgba(190,240,238,.18) 62%, transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  opacity:0;
  animation:hmBurbuja var(--t,9s) linear var(--d,0s) infinite;
}
@keyframes hmBurbuja{
  0%   { opacity:0;   transform:translate3d(0,0,0) scale(.7) }
  10%  { opacity:.75 }
  70%  { opacity:.5 }
  100% { opacity:0;   transform:translate3d(18px,-660px,0) scale(1.15) }
}

@media (prefers-reduced-motion: reduce){
  /* Sin viaje: se entra ya estando abajo del agua. La página tiene que
     tener sentido igual, no quedarse mirando el cielo. */
  .hm__viaje{ animation:none; transform:translate3d(0,-50%,0) }
  .hm__rayos{ animation:none; opacity:1 }
  .hm__burbujas{ display:none }
}

.hero__title{ max-width:13ch }
.hero__lead{ max-width:52ch }

/* ── La cáustica que cruza el titular, una sola vez ──
   Entra cuando las palabras terminaron de salir del agua (2,6 s: la
   zambullida termina a los 2,95 s y el titular alrededor de los 2,3 s).
   Es una banda inclinada que se traslada de punta a punta: `transform`
   y `opacity`, nada más, y se apaga sola.

   `mix-blend-mode:screen` sobre el fondo oscuro SUMA luz, que es
   justamente lo que hace el sol atravesando el agua. Blend queda
   encerrado dentro de .hero__inner —que ya es un contexto de apilado
   por su z-index—, así que lo que se ilumina son las letras y no la
   foto de atrás, que es lo que se quiere: la foto ya tiene su propia
   luz. */
.hero__luz{
  position:absolute; z-index:3; pointer-events:none;
  left:-38%; top:-6%; width:30%; height:112%;
  background:linear-gradient(100deg,
    rgba(214,255,250,0) 0%, rgba(214,255,250,.06) 22%,
    rgba(226,255,252,.34) 50%, rgba(214,255,250,.06) 78%,
    rgba(214,255,250,0) 100%);
  transform:translate3d(0,0,0) skewX(-13deg);
  mix-blend-mode:screen;
  opacity:0;
  animation:heroLuz 2.1s cubic-bezier(.38,.06,.24,1) 2.6s both;
}
@keyframes heroLuz{
  0%       { opacity:0; transform:translate3d(0,0,0) skewX(-13deg) }
  12%, 82% { opacity:1 }
  100%     { opacity:0; transform:translate3d(520%,0,0) skewX(-13deg) }
}

/* ── El subtítulo se destapa de izquierda a derecha ──
   Otro gesto, a propósito: el titular sale de abajo, éste se descubre
   de costado. Dos cosas que aparecen del mismo modo en el mismo bloque
   se leen como una sola.

   ⚠ EL RELLENO ES `backwards` Y NO `both`, Y ES LO QUE HACE QUE
   FUNCIONE. Con `both` el último fotograma queda pegado para siempre y
   las animaciones le ganan a los estilos en línea: el párrafo se
   quedaría clavado en opacidad 1 y el tween de salida del hero —que
   escribe opacity en línea— no tendría ningún efecto. Con `backwards`
   sólo manda antes y durante; después el elemento vuelve a su estilo
   normal y GSAP puede hundirlo con el resto del hero. */
.hero__lead--linea{
  animation:heroLinea 1.25s cubic-bezier(.22,.9,.24,1) 1.9s backwards;
}
@keyframes heroLinea{
  from{ opacity:0; clip-path:inset(0 100% 0 0); transform:translate3d(-20px,0,0) }
  to  { opacity:1; clip-path:inset(0 0 0 0);    transform:translate3d(0,0,0) }
}
@media (prefers-reduced-motion: reduce){
  .hero__luz{ display:none }
  .hero__lead--linea{ animation:none }
}

/* ══════════════════════════════════════════════════════════════════
   CIFRAS */
.cifras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
@media (max-width:760px){ .cifras{ grid-template-columns:1fr 1fr } }
.cifras div{ background:var(--surface); padding:clamp(1.1rem,2.6vw,1.7rem) .5rem; text-align:center }
.cifras b{
  display:block; font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:clamp(1.8rem,3.8vw,2.7rem); font-weight:600;
  letter-spacing:-.03em; color:var(--accent-2); line-height:1;
}
.cifras span{ display:block; margin-top:.45rem; font-size:.76rem; color:var(--muted); line-height:1.35 }

/* ══════════════════════════════════════════════════════════════════
   EN SIMPLE — tres pasos, sin una sola palabra técnica.
   Va antes que cualquier otra cosa que se mueva. */
/* Se le desarma la lista vertical que trae base.css: acá los tres
   pasos van uno al lado del otro y el hilo corre en horizontal. */
.simple__pasos.pasos{
  padding-left:0; max-width:none;
  list-style:none; display:grid; gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.4rem,4.5vw,3.4rem);
}
.simple__pasos.pasos::before{ display:none }
@media (max-width:860px){ .simple__pasos.pasos{ grid-template-columns:1fr; gap:1.4rem } }

/* ⚠ LA PIEL YA NO ESTÁ ACÁ. El borde, el relleno y el vidrio se
   mudaron a `.giro3__cara`: en una tarjeta que da la vuelta, todo lo
   que quede en el contenedor se ve por encima del giro y delata el
   truco —se vería el borde quieto mientras el contenido rota adentro.
   Acá quedan sólo dos cosas: la perspectiva, y la entrada de opacidad. */
.simple__paso{
  position:relative; isolation:isolate; overflow:visible;
  padding:0; border:0; background:none;
  perspective:1200px;

  /* ⚠ EL ESTADO DE ARRANQUE ES VISIBLE. Opacidad .55 y ocho píxeles
     más abajo, no opacidad 0: `.is-on` lo pone initPasos, y si GSAP no
     llega —CDN caído, red mala— los tres pasos tienen que estar ahí
     igual. En un bloque que explica cómo se trabaja, quedarse en blanco
     no es una animación que falló: es la página que no dice nada. */
  /* .82 y no .55: lo que se ve antes de girar ya no es una tarjeta
     vacía sino una chapa coral con el número, y a .55 el coral se
     ensuciaba contra el turquesa hasta parecer un error de color. */
  opacity:.82;
  transform:translate3d(0,8px,0);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.simple__paso.is-on{ opacity:1; transform:translate3d(0,0,0) }

/* ══════════════════════════════════════════════════════════════════
   EL PASO QUE LLEGA DADO VUELTA

   Lo que se ve primero es el dorso: una chapa coral con el número
   enorme y una palabra. Cuando la tarjeta cruza el 76 % de la pantalla
   gira sola y entrega el texto. Es la respuesta literal al pedido —«que
   giren solos a medida que scrollea» y «quedan de otro color»—, y no
   cuesta una línea de JavaScript: un `rotateY` con `transition`,
   disparado por la clase que initPasos ya ponía.

   ⚠ TODO CUELGA DE `.pasos--vivos`, Y ES LA REGLA QUE IMPORTA.
   Esa clase la agrega initPasos al arrancar. Si GSAP no cargó, initPasos
   no corre, la clase no está y la tarjeta se ve DE FRENTE desde el
   primer cuadro. Colgarse de la ausencia de `.is-on` habría dejado los
   tres pasos de espaldas para siempre el día que falle el CDN, sin un
   solo error en la consola. Nunca esconder contenido sin que lo permita
   una marca puesta por el que lo va a mostrar. */
.giro3{
  position:relative; height:100%;
  display:grid; grid-template:1fr / 1fr;
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.36,.02,.2,1);
}
.simple__pasos.pasos--vivos .giro3{ transform:rotateY(180deg) }
.simple__pasos.pasos--vivos .is-on .giro3{ transform:rotateY(0deg) }

/* Escalonado. En una pantalla ancha los tres pasos entran juntos —están
   en la misma fila, así que cruzan el disparador en el mismo píxel— y
   girando al unísono se leen como una persiana. Con dos décimas de
   diferencia se leen como tres cartas que alguien da vuelta. */
.simple__pasos.pasos--vivos li:nth-child(2) .giro3{ transition-delay:.20s }
.simple__pasos.pasos--vivos li:nth-child(3) .giro3{ transition-delay:.40s }

.giro3__cara{
  grid-area:1/1;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.3rem,2.6vw,1.8rem);
  border-radius:var(--radius);
  border:1px solid var(--line);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:border-color .75s var(--ease);
}
/* El frente puede seguir siendo vidrio translúcido: `backface-visibility`
   esconde el dorso cuando la cara de adelante mira al visitante, así que
   por el vidrio se ve el fondo de la página y no la chapa coral. */
.giro3__frente{ background:var(--vidrio) }
.simple__paso.is-on .giro3__frente{
  background:var(--vidrio-fuerte);
  border-color:rgba(255,158,122,.42);
}
.giro3__dorso{
  transform:rotateY(180deg);
  background:var(--accent); color:var(--on-accent);
  border-color:transparent;
  justify-content:space-between;
}
/* ⚠ EL PADRE VA ADELANTE, Y ES LA CUARTA VEZ EN ESTE ARCHIVO.
   Los dos son <span> adentro de un `.paso`, así que `.paso span` de
   base.css —clase + elemento, 0,1,1— le gana a `.giro3__cifra` a secas
   —0,1,0—, aunque esté escrito mucho más abajo. Sin el padre delante,
   el número gigante del dorso salía en 11 px, gris y en versalitas:
   una chapa coral con una mota en la esquina. Es EXACTAMENTE el mismo
   error que ya había pasado con `.simple__num` y con `.vivi__cita`.
   Regla, ahora sí definitiva: en este archivo, cualquier regla de una
   sola clase que tenga que pisar a una de base.css se escribe con el
   contenedor adelante. */
.simple__paso .giro3__cifra{
  display:block;
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-weight:600; font-size:clamp(3.6rem,8vw,5.6rem);
  line-height:.84; letter-spacing:-.05em;
  text-transform:none; color:inherit;
}
.simple__paso .giro3__pie{
  margin-top:auto; padding-top:1.4rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:inherit; opacity:.68;
}

/* ⚠ ACÁ HABÍA UN HALO Y SE SACÓ.
   La idea era que al encenderse cada paso soltara un resplandor coral
   detrás. En la pantalla se veía lo que Jope describió exacto: «un
   sombreado de fondo que no pega con nada» — sobre un turquesa
   saturado, un degradado radial cálido y difuso no se lee como luz, se
   lee como una mancha; y encima el fondo de la página ya se está
   moviendo solo detrás, así que eran dos nieblas peleándose.

   Lo que queda encendiendo el paso es lo que sí tiene forma: el borde
   que se define, el número que aterriza y el hilo que se estira. Y de
   paso desapareció el `inset` negativo de costado, que era 48 px de
   barra horizontal en el celular.

   La regla que deja esto: en un fondo saturado, el resplandor difuso
   no suma luz, ensucia. La luz se hace con bordes, no con nubes. */

/* El hilo que va de un paso al siguiente. Se estira cuando el paso
   anterior se enciende, así que la línea sigue a la lectura en vez de
   dibujarse toda de una. Sólo `transform`. */
.simple__paso::before{
  content:''; position:absolute; z-index:1;
  left:100%; top:50%; width:clamp(1.4rem,3vw,2.2rem); height:1px;
  background:linear-gradient(90deg, var(--accent), rgba(255,158,122,.15));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--ease) .15s;
}
.simple__paso:last-child::before{ display:none }
.simple__paso.is-on::before{ transform:scaleX(1) }
@media (max-width:860px){
  /* En una columna el hilo baja en vez de cruzar. */
  .simple__paso::before{
    left:2.05rem; top:100%; width:1px; height:1.4rem;
    background:linear-gradient(180deg, var(--accent), rgba(255,158,122,.15));
    transform:scaleY(0); transform-origin:50% 0;
  }
  .simple__paso.is-on::before{ transform:scaleY(1) }
}

/* El número aterriza girando. Es el único giro de la sección y dura
   medio segundo: alcanza para que el ojo vaya al 1 antes que al texto,
   que es el orden en el que hay que leer esto. */
/* ⚠ EL SELECTOR LLEVA EL PADRE, Y ES OBLIGATORIO. Al reusar `.paso`
   para que initPasos maneje estos bloques, se heredan también las
   reglas del componente que viven en base.css — entre ellas
   `.paso span { font-size:.72rem; text-transform:uppercase;
   color:var(--muted) }`. Ese selector tiene una clase MÁS un elemento y
   le gana a `.simple__num` a secas, aunque esté escrito antes: el
   número salía gris, en 11 px y en versalitas. Regla general: si se
   toma prestado un componente, cualquier regla propia de una sola
   clase pierde contra las suyas de clase+elemento. */
.simple__paso .simple__num{
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; margin-bottom:1rem;
  border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-weight:600; font-size:1.05rem;
  letter-spacing:0; text-transform:none;
  transform:rotate(-28deg) scale(.82);
  transition:transform .6s cubic-bezier(.2,1.3,.4,1);
}
.simple__paso.is-on .simple__num{ transform:rotate(0) scale(1) }
.simple__paso b{ display:block; font-size:1.08rem; font-weight:500; margin-bottom:.5rem }
.simple__paso p{ color:var(--text-2); font-size:.95rem; line-height:1.62; max-width:none }
/* ══════════════════════════════════════════════════════════════════
   EN EL CELULAR NO GIRA, Y ES UNA DECISIÓN, NO UNA LIMITACIÓN.

   Jope preguntó si la computadora tiene que ser la buena y el celular
   puede ser más simple. La respuesta que quedó como criterio del
   estudio: el celular no es una versión recortada, es una versión con
   MENOS COSAS PASANDO AL MISMO TIEMPO. Lo que se saca es lo que compite
   por la atención en una pantalla de nueve centímetros, no lo que
   informa.

   Acá se aplica así: en una columna la tarjeta ocupa el ancho entero de
   la pantalla, y una tarjeta de ese tamaño girando en 3D tapa todo lo
   que se está leyendo, obliga al navegador a rasterizar dos caras del
   tamaño del viewport y además llega dada vuelta justo cuando el dedo
   ya la trajo a la vista. Se lee peor y cuesta más. Se queda el
   escalonado de opacidad, el número que aterriza y el hilo que baja,
   que es movimiento suficiente para un pulgar.

   Lo que NUNCA se saca en el celular: texto, fotos, el formulario
   entero y cualquier dato que decida una compra. */
@media (max-width:860px){
  .simple__pasos.pasos--vivos .giro3,
  .simple__pasos.pasos--vivos .is-on .giro3{ transform:none; transition:none }
  .giro3{ transform-style:flat }
  .giro3__dorso{ display:none }
  .simple__paso{ perspective:none }
}

@media (prefers-reduced-motion: reduce){
  .simple__paso, .simple__num, .simple__paso::before,
  .giro3, .giro3__cara{ transition:none }
  .simple__paso{ opacity:1; transform:none; perspective:none }
  .simple__num{ transform:none }
  .simple__pasos.pasos--vivos .giro3,
  .simple__pasos.pasos--vivos .is-on .giro3{ transform:none }
  .giro3{ transform-style:flat }
  .giro3__dorso{ display:none }
}

/* ══════════════════════════════════════════════════════════════════
   LAS DOS MALDIVAS

   El corazón de la página. No es una grilla de servicios: es una
   comparación, y por eso son DOS columnas y no tres o cuatro. El que
   llega acá tiene una sola pregunta —¿cuánto me sale?— y esta sección
   le contesta que la pregunta está mal hecha.

   ⚠ NO LLEVA PRECIOS. Todos los viajes se arman a medida, así que un
   número acá sería mentira; lo que va es la diferencia entre las dos
   maneras de viajar, que es lo que de verdad mueve el presupuesto. */
.dos{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
  /* La cámara del giro vive acá, en la grilla, y no en cada tarjeta:
     con una perspectiva por tarjeta cada una gira hacia la suya y el
     par se ve torcido. El origen va arriba del centro para que el arco
     se abra hacia el lector. */
  perspective:1800px; perspective-origin:50% 38%;
}
@media (max-width:860px){ .dos{ grid-template-columns:1fr; perspective:1100px } }

/* ⚠ La altura la fija la tarjeta, no el contenido. Las dos caras están
   apiladas en la misma celda de grilla, así que la más alta manda; sin
   una altura mínima, el dorso —que tiene la lista de cuatro— empujaba
   el frente y las dos tarjetas quedaban de distinto alto. */
.dos__col{ min-height:clamp(30rem,46vw,34rem) }
.dos__cara{
  position:relative; overflow:hidden; padding:0;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
  display:flex; flex-direction:column;
}
.dos__foto{ position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; flex:none }
.dos__foto img{ display:block; width:100%; height:100%; object-fit:cover }

/* El dorso es la segunda foto entera con un velo encima. Es lo que
   pedía la sección: el mismo lugar, otra imagen, sin ocupar más alto. */
.dos__fondo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.gira__dorso.dos__cara{
  background:var(--surface);
  color:var(--text);
  border-color:rgba(255,158,122,.34);
  justify-content:flex-end;
}
.gira__dorso.dos__cara::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,32,40,.42) 0%, rgba(4,32,40,.72) 42%, rgba(4,32,40,.94) 100%);
}
.gira__dorso .dos__cuerpo{ position:relative; z-index:2 }
.gira__dorso .dos__lista li{ color:var(--text) }
.dos__cara .gira__paso{ color:var(--accent-2); margin-top:1.3rem; padding-top:0 }

/* La chapita que avisa que la tarjeta tiene otro lado: sin ella, en un
   teléfono nadie la toca.

   ⚠ VA SOBRE LA FOTO, ARRIBA A LA DERECHA. El primer lugar fue abajo a
   la derecha de la tarjeta y quedaba encima del párrafo: la última
   línea del texto pasaba por debajo de la chapita. Sobre la foto no
   pisa nada y además se ve antes, que es lo que tiene que pasar. */
.dos__pista{
  position:absolute; right:.85rem; top:.85rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.36rem .85rem; border-radius:var(--radius-pill);
  background:rgba(4,32,40,.66); border:1px solid rgba(255,198,172,.42);
  font-size:.72rem; letter-spacing:.08em; color:var(--accent-2);
  pointer-events:none;
}
.dos__pista i{ font-style:normal; font-size:.9rem }

.dos__cuerpo{ padding:clamp(1.4rem,2.8vw,2rem); flex:1; display:flex; flex-direction:column }
.dos__eti{
  display:inline-block; align-self:flex-start;
  padding:.28rem .8rem; margin-bottom:.9rem;
  border-radius:var(--radius-pill);
  background:var(--glow-soft); border:1px solid var(--line-strong);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2);
}
.dos__col h3{
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:clamp(1.5rem,2.8vw,2rem); font-weight:600; line-height:1.1;
  margin-bottom:.8rem;
}
.dos__col > .dos__cuerpo > p{ color:var(--text-2); font-size:.97rem; line-height:1.62 }
.dos__lista{ list-style:none; margin-top:1.2rem; display:grid; gap:.7rem }
.dos__lista li{
  position:relative; padding-left:1.5rem;
  color:var(--text-2); font-size:.93rem; line-height:1.55;
}
.dos__lista li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--accent); opacity:.85;
}
/* ══════════════════════════════════════════════════════════════════
   EL REMATE

   La frase que contesta «¿cuánto sale?» sin dar un número. Antes era
   un párrafo grande al pie de la comparación y se perdía entre las dos
   tarjetas; ahora es una franja propia, con línea arriba y abajo, en
   cuerpo de cartel, y se enciende palabra por palabra con el scroll.

   Las comillas de fondo son un pseudo-elemento gigante en el turquesa
   del tema: no se leen como texto, se leen como textura. */
.remate{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:clamp(3.4rem,8vw,6rem);
  margin-block:clamp(1rem,2vw,1.6rem);
}
.remate::before{
  content:'”'; position:absolute; z-index:0;
  left:-.06em; top:-.34em;
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:clamp(20rem,42vw,34rem); line-height:1;
  color:var(--surface-2); opacity:.5;
  pointer-events:none; user-select:none;
}
.remate__txt{
  position:relative; z-index:1;
  max-width:26ch;
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:clamp(1.9rem,4.6vw,3.5rem); font-weight:400;
  line-height:1.14; letter-spacing:-.015em;
  color:var(--text);
}
/* `.lectura` deja las palabras en opacidad .16 y las va prendiendo con
   el scroll. El color de la palabra ya prendida es el marfil del tema;
   el apagado lo pone el propio efecto. */
@media (max-width:860px){ .remate__txt{ max-width:none } }

/* ══════════════════════════════════════════════════════════════════
   LA LLEGADA — banda a todo el ancho */
.banda{ border-radius:0 }
.llegada{ position:relative }
.llegada__texto{
  max-width:56ch; margin-top:clamp(1.8rem,3.6vw,2.8rem);
}
.llegada__texto p{ color:var(--text-2); font-size:1.02rem; line-height:1.72 }
.llegada__texto p + p{ margin-top:1rem }
.llegada__par{
  display:grid; grid-template-columns:1.45fr 1fr;
  gap:clamp(.9rem,2vw,1.5rem);
  margin-top:clamp(1.6rem,3.2vw,2.4rem);
  align-items:start;
}
@media (max-width:760px){ .llegada__par{ grid-template-columns:1fr } }
.llegada__par figure{ margin:0; border-radius:var(--radius); overflow:hidden; position:relative }

/* ⚠ LA FOTO VA SUELTA ADENTRO DEL MARCO, Y ES LO QUE PERMITE EL
   MOVIMIENTO. Antes la imagen medía exactamente lo mismo que su marco:
   correrla un píxel deja una franja vacía, porque no hay más imagen de
   dónde sacar. Ahora va absoluta, un 18 % más alta y arrancando un 9 %
   arriba, así el parallax tiene margen para los dos lados y el marco
   nunca se queda sin nada que mostrar.

   `aspect-ratio:auto` en la <img> no está de más: la regla vieja le
   ponía 16/9 a la imagen, y con la altura al 118 % del marco eso la
   habría deformado. La proporción ahora la fija el marco. */
.llegada__par img{
  display:block; position:absolute; left:0; top:-12%;
  width:100%; height:124%;
  object-fit:cover; aspect-ratio:auto;
}

/* Dos tamaños distintos. Dos fotos iguales una al lado de la otra se
   leen como un catálogo; una grande y una chica corrida hacia abajo se
   leen como una toma y su detalle, que es lo que son: el hidroavión es
   el momento, el atolón es lo que se ve desde adentro. */
/* ⚠ Y ACÁ TAMBIÉN EL PADRE ADELANTE. `.llegada__par figure` declara
   `margin:0` y es clase + elemento: le gana a `.llegada__chica` a
   secas, así que el `margin-top` que corre la foto chica hacia abajo se
   perdía y las dos quedaban alineadas arriba —justo lo que se estaba
   tratando de romper—. El `aspect-ratio` sí entraba, porque ese la
   regla del padre no lo declara: se veía medio arreglado, que es peor
   que verse roto. */
.llegada__par .llegada__grande{ aspect-ratio:16/10 }
.llegada__par .llegada__chica { aspect-ratio:4/3; margin-top:clamp(2.2rem,6vw,4.6rem) }

.llegada__par figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(2.2rem,4.6vw,3rem) clamp(1rem,2.2vw,1.4rem) clamp(.95rem,2vw,1.3rem);
  background:linear-gradient(180deg,
    rgba(3,26,33,0) 0%, rgba(3,26,33,.40) 34%,
    rgba(3,26,33,.78) 66%, rgba(3,26,33,.95) 100%);
  font-size:.98rem; font-weight:500; line-height:1.3;
  text-shadow:0 1px 6px rgba(2,20,26,.7);
}
.llegada__par figcaption small{
  display:block; margin-top:.28rem;
  font-size:.78rem; font-weight:400; color:var(--text-2);
}
@media (max-width:760px){
  .llegada__par .llegada__chica{ margin-top:0 }
  .llegada__par .llegada__grande,
  .llegada__par .llegada__chica{ aspect-ratio:16/10 }
}

/* ══════════════════════════════════════════════════════════════════
   EXPERIENCIAS */
.exp{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.6vw,1.1rem);
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:960px){ .exp{ grid-template-columns:1fr 1fr } }
.exp figure{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:3/4;
}
.exp img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.exp figure:hover img{ transform:scale(1.06) }
/* ⚠ EL DEGRADÉ ARRANCA ARRIBA Y CIERRA CASI OPACO. La primera versión
   iba de transparente a .9 en el último tercio y funcionaba en tres de
   las cuatro fotos; en la del banco de arena —que es blanca abajo— el
   epígrafe blanco desaparecía. Un epígrafe tiene que leerse sobre
   CUALQUIER foto que le toque, porque el día que se cambia una nadie
   se acuerda de volver a mirar esto. */
.exp figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(2.4rem,5vw,3.2rem) clamp(1rem,2.2vw,1.4rem) clamp(1rem,2.2vw,1.4rem);
  background:linear-gradient(180deg,
    rgba(3,26,33,0) 0%, rgba(3,26,33,.42) 34%,
    rgba(3,26,33,.80) 66%, rgba(3,26,33,.96) 100%);
  font-size:.98rem; font-weight:500; line-height:1.3;
  text-shadow:0 1px 6px rgba(2,20,26,.7);
}
.exp figcaption small{
  display:block; margin-top:.3rem;
  font-size:.78rem; font-weight:400; color:var(--text-2);
}

/* La quinta de la grilla ocupa la fila entera: una panorámica de
   cierre. Su proporción es propia porque no comparte fila con nadie.

   ⚠ EL SELECTOR VA CON `.exp` ADELANTE, y es la TERCERA vez el mismo
   día. `.exp figure` de más arriba tiene una clase más un elemento y le
   gana a `.exp__ancha` a secas: la panorámica salía con el 3/4 de las
   tarjetas, o sea altísima. Cada vez que en este archivo una regla de
   una sola clase tenga que pisar a otra de clase+elemento, hay que
   escribirle el padre adelante. */
.exp .exp__ancha{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); grid-column:1 / -1; aspect-ratio:32/11;
}
@media (max-width:960px){ .exp .exp__ancha{ aspect-ratio:2/1 } }
.exp .exp__ancha img{ display:block; width:100%; height:100%; object-fit:cover }

/* ══════════════════════════════════════════════════════════════════
   CON QUIÉN VIAJÁS

   Cuatro fotos VERTICALES, y la proporción no es un capricho: son
   personas, y una persona entera entra en un rectángulo alto. En
   apaisado hay que recortarle las piernas o alejar tanto la cámara que
   la cara deja de leerse. Además rompe la horizontal de las otras dos
   grillas de la página, que son 4:3 y 3:4 apaisadas. */
.quien{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.6vw,1.1rem);
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:960px){ .quien{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .quien{ grid-template-columns:1fr } }
.quien__f{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:4/5;
}
.quien__f img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.quien__f:hover img{ transform:scale(1.05) }
.quien__f figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(2.6rem,5vw,3.6rem) clamp(.95rem,2vw,1.3rem) clamp(1rem,2vw,1.3rem);
  background:linear-gradient(180deg, rgba(3,26,33,0) 0%, rgba(3,26,33,.5) 34%,
                             rgba(3,26,33,.85) 68%, rgba(3,26,33,.96) 100%);
  text-shadow:0 1px 6px rgba(2,20,26,.7);
}
.quien__f b{
  display:block; font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:1.15rem; font-weight:600; margin-bottom:.3rem;
}
.quien__f span{ display:block; font-size:.8rem; line-height:1.4; color:var(--text-2) }

/* ══════════════════════════════════════════════════════════════════
   LAS REDES */
.redes__titulo{
  margin-top:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:.8rem;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.redes{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem }
.redes a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .95rem; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:var(--vidrio);
  color:var(--text-2); font-size:.86rem; text-decoration:none;
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background-color .35s var(--ease), transform .35s var(--ease);
}
.redes a:hover{
  color:var(--on-accent); background:var(--accent);
  border-color:var(--accent); transform:translate3d(0,-2px,0);
}
.redes svg{ flex:none }
/* En el pie van sólo los íconos: el nombre de usuario ya está arriba y
   repetirlo hace un pie de página de tres renglones. */
.redes--pie{ justify-content:center; margin-block:.4rem 1rem }
.redes--pie a{ padding:.5rem; border-radius:50% }

/* ══════════════════════════════════════════════════════════════════
   LA BANDA DEL ATARDECER */
.banda--atardecer{
  position:relative; overflow:hidden;
  height:clamp(15rem,34vw,25rem);
  margin-block:clamp(1rem,2.4vw,2rem);
}
.banda--atardecer img{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* Se le baja el contraste contra el fondo para que no corte la página
   en dos: es una respiración, no una sección. */
.banda--atardecer::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(7,83,99,.22) 26%,
                             rgba(7,83,99,.24) 74%, var(--bg) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   DOS AÑOS DESCALZA — la sección que ninguna otra agencia puede copiar */
.vivi{ position:relative }
.vivi__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
@media (max-width:860px){ .vivi__grid{ grid-template-columns:1fr } }
.vivi__fotos{ display:grid; gap:clamp(.7rem,1.6vw,1rem) }
.vivi__fotos figure{ margin:0; border-radius:var(--radius); overflow:hidden }
.vivi__fotos img{ display:block; width:100%; height:auto }
/* ⚠ EL SELECTOR VA CON EL PADRE ADELANTE. Con `.vivi__cita` a secas la
   cita salía en cuerpo de párrafo: `.vivi__texto p` de la línea de
   abajo tiene una clase MÁS un elemento y le gana por especificidad,
   aunque esté escrita después. Es el error más silencioso del CSS —no
   hay advertencia en ningún lado, la regla simplemente no se aplica. */
.vivi__texto .vivi__cita{
  font-family:'Fraunces', var(--serif), Georgia, serif;
  font-size:clamp(1.55rem,3.2vw,2.5rem); font-weight:400; font-style:italic;
  line-height:1.2; letter-spacing:-.005em; color:var(--accent-2);
  max-width:19ch; margin-bottom:clamp(1.6rem,3.2vw,2.4rem);
}
.vivi__texto p{ color:var(--text-2); font-size:1.01rem; line-height:1.75 }
.vivi__texto p + p{ margin-top:1.05rem }
.vivi__texto strong{ color:var(--text); font-weight:500 }

/* ══════════════════════════════════════════════════════════════════
   EL FORMULARIO — que es el producto

   Hoy la agencia pone «escribime la palabra Maldivas» y después
   pregunta a mano, una por una, las seis cosas que necesita para
   cotizar. Este bloque hace esa entrevista solo. Por eso el
   formulario de esta landing es más largo que el de las otras demos
   y no menos: cada campo de acá es un ida y vuelta de WhatsApp que
   no hay que hacer. */
.form__intro{
  margin-bottom:clamp(1.2rem,2.4vw,1.8rem);
  padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,2.2vw,1.4rem);
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--glow-soft);
  font-size:.9rem; color:var(--text-2); line-height:1.55;
}
.form__intro b{ color:var(--accent-2); font-weight:500 }

.contacto__lista svg{ color:var(--accent) }

/* ══════════════════════════════════════════════════════════════════
   CINTA */
.cinta{ margin-block:clamp(2.5rem,6vw,4rem) }
.cinta--chica .cinta__pista > span{ gap:2.4rem; padding-right:2.4rem }
.cinta b{ padding-inline:.45rem }

/* ══════════════════════════════════════════════════════════════════
   FAQ — un poco más de aire que la base: son respuestas largas */
.faq details p{ line-height:1.68 }