:root{
  --pink: #DE3769;
  --black: #0F0F0F;
  --cream: #F7F5F2;
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  /* scroll-behavior: smooth (global) se quitó: en mobile hace que
     el navegador "amortigüe"/intente interpolar cada gesto de
     scroll táctil, y combinado con el JS que lee la posición de
     scroll en cada frame (animación de la sección 1), se sentía
     como si el primer scroll no hiciera nada y hubiera que
     scrollear dos veces para que agarrara. Los dos lugares que sí
     necesitan scroll suave (el salto a la comparativa y las
     flechas del carrusel de reseñas) ya piden behavior:'smooth'
     directamente en el JS, así que siguen funcionando igual. */

  /* Evita que el "rebote" nativo del navegador (rubber-band al
     llegar al tope superior/inferior del documento) pelee contra
     la animación ligada al scroll justo cuando el usuario
     invierte el gesto rápido — que es exactamente cuando ese
     rebote nativo tiende a activarse. */
  overscroll-behavior-y: none;
}

body{
  font-family: 'Montserrat', sans-serif;
  background: var(--cream);
  color: var(--black);
  overflow-x: clip;
  overscroll-behavior-y: none;

  /* Le dice al navegador, ANTES de que llegue el primer touch,
     que este documento sólo hace pan vertical. Sin esto, tanto
     WKWebView (Instagram iOS) como Android WebView (Instagram
     Android) tienen que esperar unos frames al inicio de cada
     gesto para decidir si es scroll, pinch-zoom o un gesto
     horizontal antes de empezar a mover la página — ese retraso
     de "arranque" es buena parte de la sensación de scroll
     "pesado" que se nota más en WebView que en Safari/Chrome
     normales. Las zonas que sí necesitan gestos horizontales (el
     slider comparativo) ya declaran su propio touch-action más
     específico y ganan por especificidad, así que esto no las
     afecta. */
  touch-action: pan-y;

  /* Quita el flash gris que iOS/iPadOS dibuja sobre cualquier
     elemento tocado (links, botones, tarjetas) mientras decide si
     hay :active/:hover que aplicar. Puramente visual — no cambia
     ningún timing de scroll ni de gestos — pero sumado a que los
     :hover de abajo ahora sólo aplican con mouse (ver `@media
     (hover: hover)`), el tap en iPad queda limpio e inmediato. */
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   NAV
   ===================================================== */

.navbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;

  /* La franja sigue siendo `width:100%` (llega borde a borde,
     igual que antes), pero su CONTENIDO (alto, padding,
     tipografía) usaba `vw` puro y sin tope: en un monitor
     grande/ultrawide o un iMac (ventana de 2500–5000px+) esos
     valores crecen sin límite y el nav se vuelve gigante — logo
     enorme, texto enorme, mucho más alto de lo que se diseñó.
     `min(Xvw, Ypx)` dice "usa el valor fluido, pero nunca pases
     de Ypx" — Ypx es el tamaño que ya tenía a 1280px de ancho,
     el mismo tope que usan el resto de las secciones del sitio
     (`min(100%, 1280px)` en social-proof, whatsapp-cta, etc.),
     así el nav queda consistente con ellas y dejar de crecer más
     allá de ese punto. Por debajo de 1280px el comportamiento es
     IDÉNTICO al de antes (min() no hace nada hasta que el valor
     en vw supera el tope en px). `max-width + margin:auto`
     (con left/right:0 arriba) centra el nav en pantallas anchas
     para que "Personaliza/Catálogo" y "Nosotros/FAQ" no queden
     pegados a los bordes extremos de la ventana. */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: min(6.4vw, 82px);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 min(2.86vw, 37px);

  background: transparent;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: min(2.9vw, 37px);

  list-style: none;
}

.nav-links:first-of-type{
  justify-content: flex-start;
}

.nav-links:last-of-type{
  justify-content: flex-end;
}

.nav-links a{
  color: var(--black);

  font-size: min(1.05vw, 13.4px);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine){
  .nav-links a:hover{
    opacity: .55;
  }
}

.nav-pill{
  padding: min(.75vw, 9.6px) min(1.6vw, 20.5px);

  border: 1.5px solid var(--black);
  border-radius: 999px;

  transition:
    background .15s ease,
    color .15s ease,
    opacity .15s ease !important;
}

@media (hover: hover) and (pointer: fine){
  .nav-pill:hover{
    background: var(--black);
    color: #fff;
    opacity: 1 !important;
  }
}

.logo{
  grid-column: 2;
  justify-self: center;
}

.logo img{
  display: block;
  height: min(2vw, 25.6px);
}

.nav-item-mobile{
  display: none;
}

.nav-item-tablet-portrait{
  display: none;
}


/* =====================================================
   MOBILE — HEADER + ONDITAS "ESTÁ SONANDO"
   Header: solo el logo, centrado. Todos los links quedan
   ocultos (no se borran del HTML). También se ocultan las
   onditas rosas del hero en mobile.
   ===================================================== */

@media (max-width: 480px){

  .navbar{
    height: 16vw;

    padding: 0 5vw;
  }

  .nav-links{
    display: none;
  }

  .logo img{
    height: 6vw;
  }

  .ring-sonar{
    display: none;
  }

}


/* =====================================================
   NAV — iPad EN VERTICAL
   Los mismos valores en `vw` que en escritorio se ven muy
   chicos en un iPad portrait (pantalla ancha en px pero
   vertical), tanto el logo como el texto de los links. Se
   agranda SOLO aquí, usando la misma detección táctil que
   ya se usa en el resto del archivo para iPad/tablet (no
   afecta iPhone, que ya tiene su propio bloque arriba, ni
   iPad en horizontal, ni desktop). `clamp()` mantiene el
   tamaño estable y proporcional dentro del rango típico de
   anchos de iPad en vertical (iPad mini a iPad Pro 12.9).
   ===================================================== */

@media (min-width: 641px) and (max-width: 1200px) and (max-aspect-ratio: 1/1){

  .navbar{
    height: clamp(64px, 9vw, 92px);

    padding: 0 clamp(20px, 4vw, 32px);
  }

  .nav-links{
    gap: clamp(20px, 4vw, 36px);
  }

  .nav-links a{
    font-size: clamp(15px, 1.7vw, 19px);
  }

  .nav-pill{
    padding: clamp(9px, 1.2vw, 14px) clamp(18px, 2.4vw, 28px);
  }

  .logo img{
    height: clamp(30px, 3.6vw, 44px);
  }

  /* Solo en iPad vertical: se quita "Nosotros" y el Catálogo de
     la izquierda, y en su lugar aparece este Catálogo del lado
     derecho, como link normal (igual que FAQ, sin la píldora) —
     así la izquierda se queda con un solo botón (Personaliza). */
  .nav-nosotros{
    display: none;
  }

  .nav-catalogo-desktop{
    display: none;
  }

  /* También se quita FAQ: en iPad vertical el header se queda
     solo con Personaliza (izquierda), el logo (centro) y
     Catálogo (derecha). */
  .nav-faq-desktop{
    display: none;
  }

  .nav-item-tablet-portrait{
    display: list-item;
  }

}


/* =====================================================
   JOURNEY PRINCIPAL
   ===================================================== */

.journey-section{
  position: relative;
  height: 480vh;

  /* CAMBIO CLAVE (rebote al subir en Safari iOS): antes era
     `480dvh`. dvh se recalcula EN VIVO cada vez que la barra de
     direcciones de Safari se esconde/reaparece — y eso pasa
     justo mientras el dedo sigue en pantalla, sobre todo al
     invertir el sentido del scroll (Safari muestra la barra de
     nuevo al subir). Como esta sección es la que define cuánto
     mide el documento (su "pista" de scroll), que su altura
     cambie a medio gesto significa que el navegador está
     recalculando la posición de scroll bajo el dedo del usuario
     en tiempo real: eso es exactamente el "pelear contra el
     scroll" que se sentía como rebote/tirón, y explica por qué
     era mucho más notorio al subir que al bajar (la barra
     reaparece al subir, no al bajar).
     `svh` usa siempre la altura "pequeña" (con la barra
     visible) y NUNCA cambia con la barra — la pista de scroll
     queda fija de principio a fin, sin importar hacia dónde se
     mueva el usuario.

     NOTA iPad: en tablets, script-mobile-fluid-v3.js sobreescribe
     esta altura con un valor en `px` fijo vía estilo inline
     (mayor prioridad de cascada que esta regla, sin necesidad de
     !important), calculado una sola vez y sólo actualizado ante
     un cambio real de tamaño/orientación — ver
     `applyTabletStableHeight()` en el JS. En iPhone, Android y
     desktop no se aplica ningún estilo inline y esta unidad
     `svh` sigue siendo la que manda, sin cambios. */
  height: 480svh;
}

.journey-stage{
  position: sticky;
  top: 0;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  height: 100vh;

  /* CORRECCIÓN: `svh` aquí dejaba un rectángulo blanco visible
     debajo del pasto cuando la barra de Safari está minimizada
     (100svh < alto real visible en ese momento). El causante real
     del rebote NO era este stage — es `.journey-section` de
     arriba, porque su altura determina cuánto mide el documento
     (la distancia real de scroll). Que ESTE contenedor (el que
     sólo se ve pegado en pantalla, pinned) cambie de tamaño en
     vivo con la barra es un ajuste puramente visual/cosmético,
     igual al de cualquier sitio a pantalla completa — no mueve
     la posición de scroll del documento bajo el dedo. Por eso
     puede quedarse en `dvh` (siempre cubre el 100% visible, sin
     franja) mientras `.journey-section` se queda en `svh`.

     NOTA iPad: aquí es exactamente donde estaba el resize visible
     en iPad — `dvh` sí puede recalcularse en vivo ahí (a
     diferencia de iPhone, donde es cosmético e imperceptible). En
     tablets, el JS fija esta altura en `px` una sola vez vía
     estilo inline (ver nota junto a `.journey-section` arriba y
     `applyTabletStableHeight()` en el JS); en iPhone/Android/
     desktop esta línea sigue mandando sin ningún cambio. */
  height: 100dvh;

  overflow: hidden;
  contain: layout style paint;

  background: #dce4f0;

  container-type: inline-size;
}

.journey-stage img{

  /* FIX iPad (swipe que a veces no responde): ninguna de estas
     imágenes es interactiva — el único elemento clicable de la
     sección, el botón final, es un <a>, no una <img>, así que
     esta regla no lo afecta. Sin esto, un swipe que empieza
     sobre una imagen —aunque sea una zona transparente del
     PNG— puede ser capturado por el gesto nativo de "arrastrar
     / guardar imagen" de Safari en vez de pasarle el scroll a
     la página. Safari en iPad reconoce ese gesto de arrastre de
     imagen con mucha más facilidad que en iPhone, de ahí que el
     bug fuera mucho más notorio ahí. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

}

.journey-bg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  width: 100%;
  height: 200%;

  background:
    url('/images/fondo-cielo.png')
    center top / 100% 100%
    no-repeat;

  transform: translateY(0);
  will-change: transform;
}

.journey-inner{
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

  container-type: inline-size;
  z-index: 8;
}


/* =====================================================
   HERO
   ===================================================== */

.hero-title{
  position: absolute;
  top: 15%;
  left: 50%;

  width: 54%;
  height: auto;

  display: block;

  z-index: 3;

  transition: opacity .3s ease;

  /* Sin animación de entrada: fijo en su posición final desde el
     primer frame. El único movimiento que le queda es el fade-out
     al hacer scroll, que sigue controlando el JS (heroTitle.style.
     opacity, en updateJourney) — eso no se toca. */
  transform: translateX(-50%);
}



/* =====================================================
   BOLSA
   ===================================================== */

.bag-bg,
.bag-plastic{
  position: absolute;
  top: 38%;
  left: 49.55%;

  width: 29cqw;
  height: auto;

  /* El `left` de aquí (y el de su versión mobile con !important,
     más abajo en el archivo) sigue siendo la posición base fija,
     igual que en el original. El JS ya NO reescribe `left` en
     cada frame (forzaba layout); en vez de eso, mete el
     desplazamiento ADICIONAL que sí cambia con el scroll (sólo
     en desktop) dentro de este mismo `transform`, sumado al
     recentrado -50%,-50%. En mobile ese desplazamiento extra
     siempre es 0deg/0px, así que el transform queda idéntico al
     valor estático de aquí abajo y no interfiere con el `left`
     fijo del media query mobile. */
  transform: translate(-50%, -50%);

  opacity: 0;
  pointer-events: none;

  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bag-bg{
  z-index: 0;
}

.bag-plastic{
  z-index: 6;
}


/* =====================================================
   GRUPOS DE FUNDAS
   ===================================================== */

.journey-group{
  position: absolute;
  z-index: 2;
  will-change: transform;

  /* Truco clásico de WebKit: fuerza que la capa GPU quede
     "sellada" de forma estable durante scale()/rotate(), en vez
     de que Safari decida recomponerla a medio gesto — reduce
     parpadeo/tirón, sobre todo notorio en iPad al invertir el
     scroll. No cambia nada visual (el elemento nunca se voltea). */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.journey-stage.cases-on .journey-group{
  animation:
    phoneRing .6s ease-in-out .85s 2;
}

@keyframes phoneRing{

  0%, 100%{
    transform: rotate(0deg);
  }

  15%{
    transform: rotate(-7deg);
  }

  30%{
    transform: rotate(6deg);
  }

  45%{
    transform: rotate(-5deg);
  }

  60%{
    transform: rotate(4deg);
  }

  75%{
    transform: rotate(-2deg);
  }

  90%{
    transform: rotate(1deg);
  }

}


/* ---------- ONDITAS "ESTÁ SONANDO" ---------- */

.ring-sonar{
  position: absolute;
  z-index: 5;

  left: var(--x);
  top: var(--y);

  width: 5.6cqw;
  height: auto;

  transform:
    translate(-50%, -50%)
    rotate(30deg);

  pointer-events: none;
}

.ring-sonar-left{
  transform:
    translate(-50%, -50%)
    scaleX(-1)
    rotate(-42deg);
}

.ring-wave{
  opacity: 0;
}

.ring-wave:nth-child(2){
  animation-delay: .16s;
}

.ring-wave:nth-child(3){
  animation-delay: .32s;
}

.journey-stage.cases-on .ring-wave{
  animation:
    ringWave 1s ease-in-out .9s 2;
}

@keyframes ringWave{

  0%{
    opacity: 0;
  }

  30%{
    opacity: 1;
  }

  70%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}


/* =====================================================
   FUNDAS DEL HERO
   ===================================================== */

.case{
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: var(--w);

  transform:
    translate(-50%, -50%)
    scale(.85);

  opacity: 0;

  transition:
    opacity .8s ease,
    transform .8s ease;

  z-index: 1;
}

.case img{
  display: block;

  width: 100%;
  height: auto;
}

.journey-stage.cases-on .case{
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


/* =====================================================
   STICKERS
   ===================================================== */

.sticker{
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: var(--w);

  transform:
    translate(-50%, -50%)
    scale(0)
    rotate(var(--r, 0deg));

  opacity: 0;

  pointer-events: none;

  z-index: 2;

  /* FIX jank iPad: `will-change` YA NO va aquí (base .sticker,
     las 27 stickers de las 3 fundas). Dejarlo permanente
     promovía las 27 a capas GPU filtradas independientes durante
     TODO el scroll de la sección (480vh), pero sólo 13 de ellas
     (.scroll-reveal) se actualizan por JS cada frame — las otras
     14 (.fixed) sólo hacen una transición CSS única al inicio y
     no lo necesitan. En iPhone el canvas es chico y se disimula;
     en iPad, con muchos más píxeles que rellenar, esas ~14 capas
     filtradas de más sostenidas todo el recorrido sí se sentían
     pesadas. Ahora sólo las 13 que de verdad se animan cada
     frame la llevan (ver `.sticker.scroll-reveal` abajo).

     FIX fluidez general: `filter: drop-shadow()` TAMPOCO va aquí
     ya. Es, documentadamente, de lo más caro que existe para
     animar — mucho más que transform/opacity — porque Safari
     tiene que re-rasterizar la sombra cada vez que el tamaño del
     elemento cambia. Las 13 stickers escalaban de 0 a 1 CON esa
     sombra puesta todo el tiempo. Ahora la sombra sólo está
     presente cuando el sticker ya terminó de escalar (ver
     `.sticker.fixed` y `.sticker.scroll-reveal.is-settled` abajo)
     — durante el instante en que crece no se ve, pero esa
     transición dura una fracción de segundo, así que no se nota,
     y el resultado final (asentado) se ve exactamente igual que
     antes. */
}

.sticker img{
  display: block;

  width: 100%;
  height: auto;
}

.sticker.fixed{
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.85)
    rotate(var(--r, 0deg));

  /* Ésta sí la lleva siempre: sólo anima UNA vez vía transición
     CSS (no cada frame de scroll), así que el costo de
     drop-shadow no se repite 60 veces por segundo. */
  filter:
    drop-shadow(
      0 3px 6px rgba(0, 0, 0, .15)
    );

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.journey-stage.cases-on .sticker.fixed{
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1)
    rotate(var(--r, 0deg));
}

.sticker.scroll-reveal{
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0)
    rotate(var(--r, 0deg));

  /* Única de las 27 stickers que de verdad se anima cada frame
     por JS durante el scroll — ver nota en la regla base
     .sticker de más arriba. */
  will-change:
    transform,
    opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sticker.scroll-reveal.is-settled{
  /* Sombra sólo cuando YA terminó de escalar (localProgress 0 ó
     1 — el JS marca esta clase, ver updateJourney). Visualmente
     idéntico al diseño original en el estado final; el ahorro
     es no re-rasterizarla en cada uno de los frames intermedios
     mientras el sticker está en pleno scale(). */
  filter:
    drop-shadow(
      0 3px 6px rgba(0, 0, 0, .15)
    );
}


/* =====================================================
   PASTO
   ===================================================== */

.grass{
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: auto;

  opacity: 0;

  pointer-events: none;

  z-index: 7;

  /* Se desvanece (opacity) en cada frame de scroll — mismo motivo
     que .bag-bg/.bag-plastic más arriba: ponerlo en su propia capa
     GPU evita que el navegador tenga que recomponer el resto del
     stage cada vez que cambia. */
  will-change: opacity;
}


/* =====================================================
   BOTONES GENERALES
   ===================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;

  padding: 1.2cqw 3cqw;

  border-radius: 999px;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.8cqw;
  font-weight: 500;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background .2s ease,
    transform .2s ease;
}

@media (hover: hover) and (pointer: fine){
  .btn:hover{
    transform: translateY(-2px);
  }
}

.btn-primary{
  background: var(--pink);
  color: #fff;
}

@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{
    background: #b92b56;
  }
}

/* ---------- BRILLO + ESTRELLITAS EN LOS BOTONES ROSAS ----------
   Se aplica aquí a `.btn-primary` (Personaliza tu funda /
   Diseña ahora / Ir al editor) y también, por selector agrupado,
   a `.compare-cta-btn` y `.quality-cta-btn` (definidos más abajo
   en el archivo, junto a sus propias secciones) — los 3 son la
   misma píldora rosa, así que comparten el mismo efecto para no
   duplicar animaciones. Todo corre por `opacity`/`transform`/
   `box-shadow` en un pseudo-elemento pequeño: no toca layout ni
   compite con el scroll del journey. Se desactiva por completo
   con `prefers-reduced-motion` más abajo. */
.btn-primary,
.compare-cta-btn,
.quality-cta-btn{
  position: relative;
  isolation: isolate;

  animation: ctaGlow 2.6s ease-in-out infinite;
}

@keyframes ctaGlow{
  0%, 100%{
    box-shadow: 0 0 0 0 rgba(222, 55, 105, .5);
  }
  50%{
    box-shadow: 0 0 1.4em .3em rgba(222, 55, 105, .45);
  }
}

.btn-primary::before,
.compare-cta-btn::before,
.quality-cta-btn::before,
.btn-primary::after,
.compare-cta-btn::after,
.quality-cta-btn::after{
  content: '';
  position: absolute;

  width: .9em;
  height: .9em;

  background: #fff;
  clip-path: polygon(
    50% 0%, 61% 35%, 100% 50%, 61% 65%,
    50% 100%, 39% 65%, 0% 50%, 39% 35%
  );

  opacity: 0;
  pointer-events: none;

  animation: ctaSparkle 2.6s ease-in-out infinite;
}

.btn-primary::before,
.compare-cta-btn::before,
.quality-cta-btn::before{
  top: 14%;
  left: 10%;
}

.btn-primary::after,
.compare-cta-btn::after,
.quality-cta-btn::after{
  width: .6em;
  height: .6em;

  bottom: 16%;
  right: 12%;

  animation-delay: .55s;
}

@keyframes ctaSparkle{
  0%, 35%, 100%{
    opacity: 0;
    transform: scale(.3) rotate(0deg);
  }
  55%{
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }
  75%{
    opacity: 0;
    transform: scale(.4) rotate(25deg);
  }
}

.cta-sparkle{
  content: '';
  position: absolute;

  background: #fff;
  clip-path: polygon(
    50% 0%, 61% 35%, 100% 50%, 61% 65%,
    50% 100%, 39% 65%, 0% 50%, 39% 35%
  );

  opacity: 0;
  pointer-events: none;

  animation: ctaSparkle 2.6s ease-in-out infinite;
}

.cta-sparkle-3{
  width: .4em;
  height: .4em;

  top: 20%;
  right: 20%;

  animation-delay: 1.1s;
}

.cta-sparkle-4{
  width: .55em;
  height: .55em;

  bottom: 14%;
  left: 16%;

  animation-delay: 1.7s;
}

@media (prefers-reduced-motion: reduce){
  .btn-primary,
  .compare-cta-btn,
  .quality-cta-btn,
  .btn-primary::before,
  .compare-cta-btn::before,
  .quality-cta-btn::before,
  .btn-primary::after,
  .compare-cta-btn::after,
  .quality-cta-btn::after,
  .cta-sparkle{
    animation: none;
  }
}

.final-cta strong{
  font-weight: 700;
}


/* =====================================================
   TEXTO FINAL DE LA BOLSA
   ===================================================== */

.pack-text{
  position: absolute;
  top: 38%;
  left: 55%;

  width: 40%;

  transform: translateY(-50%);

  opacity: 0;

  pointer-events: none;

  z-index: 8;
}

.pack-text.is-visible{
  pointer-events: auto;
}

.pack-text .final-cta{
  transition: transform .3s cubic-bezier(.16, .8, .24, 1);
}

.pack-text.is-visible .final-cta{
  transform: scale(1);
}

.pack-text:not(.is-visible) .final-cta{
  transform: scale(.9);
}

.pack-title{
  margin-bottom: 1cqw;

  color: var(--black);

  font-size: 4.4cqw;
  font-weight: 400;
  line-height: 1.05;
}

.pack-title strong{
  font-weight: 800;
}

.pack-subtitle{
  margin-bottom: 1.6cqw;

  color: #2b2b2b;

  font-size: 1.7cqw;
  font-weight: 400;
  line-height: 1.35;
}

.pack-subtitle strong{
  color: var(--black);
  font-weight: 700;
}


/* =====================================================
   TOPE DE ESCALA (se aplica en cada -inner de sección,
   así el fondo de color de cada sección sigue llegando
   de borde a borde, y solo el contenido queda centrado
   y con tope — mismo espíritu que el MAX_ZOOM del hero)
   ===================================================== */


/* =====================================================
   TRUST BAR
   ===================================================== */

.trust-bar-section{
  background: #0A0A0A;

  margin-top: -4px;
  padding-top: 4px;
}

.trust-bar-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;
}

.trust-bar{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;

  padding:
    2.02cqw
    3.33cqw;
}

.trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 .48cqw;

  color: #fff;
  text-align: center;
}

.trust-icon{
  width: 5.2cqw;
  height: 5.2cqw;

  margin-bottom: .6cqw;

  color: #fff;
}

.trust-item p{
  color: #fff;

  font-size: 1.8cqw;

  font-weight: 400;
  line-height: 1.35;
}

.trust-heading{
  width: 100%;
  margin: 0;

  padding:
    3cqw
    4cqw
    5cqw;

  color: #fff;

  font-size: 4.4cqw;

  font-weight: 300;
  line-height: 1.15;

  text-align: center;
}

.trust-heading strong{
  font-weight: 800;
}


/* =====================================================
   MOBILE — BARRA DE CONFIANZA
   ===================================================== */

@media (max-width: 480px){

  .trust-bar{
    padding: 5cqw 3cqw;
  }

  .trust-item{
    padding: 0 .8cqw;
  }

  .trust-icon{
    width: 9.5cqw;
    height: 9.5cqw;

    margin-bottom: 1.4cqw;
  }

  .trust-item p{
    font-size: 2.9cqw;
    line-height: 1.3;
  }

  .trust-heading{
    padding: 5cqw 4cqw 6cqw;

    font-size: 7cqw;
  }

}


/* =====================================================
   ANIMACIÓN REVEAL
   ===================================================== */

.reveal{
  opacity: 0;

  transform: translateY(45px);

  transition:
    opacity .85s cubic-bezier(.16, .8, .24, 1),
    transform .85s cubic-bezier(.16, .8, .24, 1);

  /* `will-change` YA NO va fijo aquí. Esta clase la llevan
     ~25 elementos repartidos por TODA la página (trust items,
     tarjetas de calidad, videos de reseñas, testimonios...),
     y cada uno de ellos SÓLO anima una vez, la primera vez que
     entra en viewport — después de eso queda quieto para
     siempre (ver revealObserver). Dejar will-change puesto de
     forma permanente en los 25 promueve 25 capas GPU
     compuestas de forma independiente durante TODA la vida de
     la página, aunque 24 de ellas ya hayan terminado de animar
     hace rato — es "demasiadas capas GPU" sostenidas por nada.
     En Safari de escritorio/iPhone se disimula por la memoria
     de compositor disponible; en el WebView de Instagram
     (sobre todo Android, con presupuesto de capas mucho más
     chico) esas capas fantasma sí compiten por GPU con la
     animación real del scroll. Ahora will-change se añade por
     JS justo antes de revelar cada elemento y se quita justo
     después de que termina su transición — el ahorro visual es
     cero, el ahorro de memoria de compositor es real. */
}

.reveal.revealed{
  opacity: 1;
  transform: translateY(0);
}

.trust-item:nth-child(1){
  transition-delay: .05s;
}

.trust-item:nth-child(2){
  transition-delay: .13s;
}

.trust-item:nth-child(3){
  transition-delay: .21s;
}

.trust-item:nth-child(4){
  transition-delay: .29s;
}

.trust-item:nth-child(5){
  transition-delay: .37s;
}


/* =====================================================
   SECCIÓN IDEA
   ===================================================== */

.idea-section{
  width: 100%;

  overflow: hidden;

  background: #e8e8e6;
}

.idea-inner{
  position: relative;

  width: 100%;
  aspect-ratio: 1265 / 624;

  overflow: hidden;

  background: #e8e8e6;

  container-type: inline-size;
}

.idea-background{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  pointer-events: none;

  z-index: 0;
}

.idea-background-mobile{
  display: none;
}


/* =====================================================
   CARPETAS
   ===================================================== */

.folder-item{
  position: absolute;

  width: 10.5cqw;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  z-index: 2;
}

.folder-icon{
  display: block;

  width: 100%;
  height: auto;

  filter:
    drop-shadow(
      0 5px 8px rgba(0, 0, 0, .08)
    );
}

.folder-item p{
  margin-top: .35cqw;

  color: var(--black);

  font-size: 1.55cqw;
  font-weight: 700;
  line-height: 1;
}

.folder-drawings{
  left: 9.2%;
  top: 30.5%;

  transition-delay: .05s;
}

.folder-photos{
  left: 28.4%;
  top: 17%;

  transition-delay: .13s;
}

.folder-texts{
  left: 21.5%;
  top: 52%;

  transition-delay: .21s;
}

.folder-stickers{
  left: 10%;
  top: 80.5%;

  transition-delay: .29s;
}

.folder-item.reveal{
  opacity: 0;

  transform:
    translate(
      -50%,
      calc(-50% + 45px)
    );
}

.folder-item.reveal.revealed{
  opacity: 1;

  transform:
    translate(-50%, -50%);
}


/* =====================================================
   TEXTO DERECHO DE IDEA
   ===================================================== */

.idea-text{
  position: absolute;

  left: 63.5%;
  top: 49%;

  width: 32%;

  text-align: center;

  z-index: 3;

  transition-delay: .18s;
}

.idea-title{
  margin: 0 0 1.6cqw;

  color: var(--black);

  font-size: 4.15cqw;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.idea-title strong{
  font-weight: 800;
}

.idea-title-break-mobile{
  display: none;
}

.idea-text.reveal{
  opacity: 0;

  transform:
    translateY(
      calc(-50% + 45px)
    );
}

.idea-text.reveal.revealed{
  opacity: 1;

  transform:
    translateY(-50%);
}

.idea-btn{
  width: max-content;
}

.idea-btn strong{
  font-weight: 700;
}


/* =====================================================
   COMPARATIVA (SLIDER ANTES / DESPUÉS)
   ===================================================== */

.compare-section{
  width: 100%;

  background: #fff;
}

.compare-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;

  padding: 4cqw 3cqw 2.5cqw;
}

.compare-funda-name{
  margin: 0 0 .6cqw;

  color: #aaa;

  font-family: 'Montserrat', sans-serif;

  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;

  transition: opacity .2s ease;
}

.compare-title{
  margin: 0 0 .8cqw;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: center;

  transition: opacity .2s ease;
}

.compare-title strong{
  color: var(--pink);
  font-weight: 800;
}

.compare-active-subtext{
  margin: 0 0 2.4cqw;

  color: #999;

  font-family: 'Montserrat', sans-serif;

  font-size: 2cqw;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: center;

  transition: opacity .2s ease;
}


/* ---------- LAYOUT DE 3 COLUMNAS ---------- */

.compare-layout{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3.4cqw;
}

.compare-side{
  flex: 0 0 23%;
  max-width: 23%;

  display: flex;
  flex-direction: column;
}

.compare-side-title{
  margin: 1.4cqw 0 1.5cqw;
  padding-bottom: .9cqw;

  border-bottom: 1px solid #ddd;

  color: #000;

  font-size: 1.5cqw;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.compare-logo-wrap{
  display: flex;
  align-items: flex-end;
  justify-content: center;

  margin-top: 1.4cqw;
}

.compare-logo{
  display: block;

  width: auto;
  height: 3.4cqw;
}


/* ---------- LISTAS ---------- */

.compare-list{
  flex: 1;

  list-style: none;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.compare-list > li{
  display: flex;
  align-items: flex-start;
  gap: 1.1cqw;

  padding: 1.3cqw 0;

  border-bottom: 1px solid #eee;

  font-size: 1.55cqw;
  font-weight: 400;
}

.compare-list > li:first-child{
  padding-top: 0;
}

.compare-list > li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.compare-list > li > strong{
  display: block;
  margin-bottom: .3cqw;

  font-size: 1.6cqw;
  font-weight: 700;
}

.compare-sublist{
  list-style: disc;
  margin-left: 1.1em;

  display: flex;
  flex-direction: column;
  gap: .2cqw;

  color: #444;
  font-size: 1.3cqw;
  font-weight: 400;
}

.compare-icon{
  flex: 0 0 auto;

  width: 2.5cqw;
  height: 2.5cqw;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
}

.compare-icon svg{
  width: 50%;
  height: 50%;
}

.compare-icon-bad{
  background: #ececec;
  color: #333;
}

.compare-icon-good{
  background: #fbdce6;
  color: var(--pink);
}


/* ---------- SLIDER CENTRAL ---------- */

.compare-slider{
  flex: 0 0 36%;
  max-width: 36%;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1cqw;
}

.compare-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;

  padding: 1.2cqw 3cqw;

  border-radius: 999px;

  background: var(--pink);

  color: #fff;
  text-decoration: none;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.8cqw;
  font-weight: 500;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

@media (hover: hover) and (pointer: fine){
  .compare-cta-btn:hover{
    transform: translateY(-2px);
    opacity: .92;
  }
}

.compare-frame{
  position: relative;

  width: 100%;
  aspect-ratio: 3 / 3.5;

  overflow: hidden;

  border-radius: 1.2cqw;

  background: #f4f4f4;

  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.compare-img{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
  transform: scale(1.28);

  pointer-events: none;
}

.compare-after-wrap{
  position: absolute;
  inset: 0;

  clip-path: inset(0 50% 0 0);
}

.compare-handle{
  position: absolute;
  top: 0;
  left: 50%;

  height: 100%;
  width: 0;

  pointer-events: none;
}

.compare-handle-line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 2px;

  transform: translateX(-50%);

  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.compare-handle-btn{
  position: absolute;
  top: 50%;
  left: 0;

  width: 3cqw;
  height: 3cqw;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .05cqw;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #fff;
  box-shadow: 0 .3cqw .9cqw rgba(0, 0, 0, .18);

  color: #333;

  cursor: ew-resize;
  pointer-events: auto;

  transition: transform .15s ease;

  animation: compareHandlePulse 1.7s ease-in-out infinite;
}

.compare-frame.is-dragging .compare-handle-btn{
  transform: translate(-50%, -50%) scale(1.12);
}

.compare-frame.has-interacted .compare-handle-btn{
  animation: none;
}

@keyframes compareHandlePulse{

  0%, 100%{
    box-shadow:
      0 .3cqw .9cqw rgba(0, 0, 0, .18),
      0 0 0 0 rgba(255, 255, 255, 0);
  }

  50%{
    box-shadow:
      0 .3cqw 1.1cqw rgba(0, 0, 0, .24),
      0 0 0 .6cqw rgba(255, 255, 255, .45);
  }

}

.compare-handle-btn svg{
  width: 1cqw;
  height: 1cqw;
}


/* ---------- CHIP "DESLIZA" ---------- */

.compare-hint{
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4%;

  display: flex;
  align-items: center;
  gap: .5cqw;

  padding: .6cqw 1.2cqw;

  transform: translateX(-50%);

  border-radius: 999px;

  background: rgba(255, 255, 255, .94);
  box-shadow: 0 .3cqw .9cqw rgba(0, 0, 0, .16);

  color: #333;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.05cqw;
  font-weight: 600;
  letter-spacing: .01em;

  pointer-events: none;

  opacity: 1;
  transition: opacity .5s ease;
}

.compare-hint svg{
  width: 1.2cqw;
  height: 1.2cqw;

  color: #333;
}

.compare-frame.has-interacted .compare-hint{
  opacity: 0;
}


/* =====================================================
   MOBILE — SECCIÓN COMPARACIÓN (ANTES/DESPUÉS)
   El contenedor .compare-inner pasa de ~1280px (desktop)
   a ~ancho de pantalla del iPhone, así que los mismos cqw
   quedan minúsculos. Se mantiene la fila de 3 columnas
   (otras marcas | slider | REMARK) como en desktop,
   reduciendo el slider para que las 2 listas quepan
   a los lados sin apilarse.
   ===================================================== */

@media (max-width: 480px){
  .compare-inner{
    padding: 2cqw 2.5cqw 2cqw;
  }
  .compare-funda-name{
    font-size: 4.2cqw;
  }
  .compare-title{
    margin-bottom: 1.4cqw;
    font-size: 6.2cqw;
  }
  .compare-active-subtext{
    margin-bottom: 2cqw;
    font-size: 3.8cqw;
  }
  .compare-layout{
    position: relative;
    display: block;
  }
  .compare-side{
    position: static;
    flex: none;
    width: auto;
    max-width: none;
    display: block;
  }
  .compare-side.reveal,
  .compare-side.reveal.revealed{
    transform: none;
  }
  .compare-side-title{
    display: none;
  }
  .compare-list{
    display: block;
    gap: 0;
  }
  .compare-list > li{
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    width: max-content;
    max-width: 60%;
    margin: 0;
    padding: 1.8cqw 3cqw 1.8cqw 1.8cqw;
    border-radius: 999px;
    border: 0.4cqw solid #1a1a1a;
    background: #fff;
    font-size: 2.5cqw;
  }
  .compare-side-good .compare-list > li{
    border-color: var(--pink);
  }
  /* top/left/right de cada pill ya no van aquí: los pone
     script.js en píxeles reales, midiendo el marco (ver
     layoutComparePills). Cambia data-top / data-side en
     el <li> correspondiente dentro de index.html. */
  .compare-list > li:first-child,
  .compare-list > li:last-child{
    padding-top: 1.8cqw;
    padding-bottom: 1.8cqw;
    border-bottom: 0.4cqw solid #1a1a1a;
  }
  .compare-side-good .compare-list > li:first-child,
  .compare-side-good .compare-list > li:last-child{
    border-bottom-color: var(--pink);
  }
  .compare-list > li > strong{
    margin-bottom: .25cqw;
    font-size: 2.7cqw;
  }
  .compare-sublist{
    gap: .2cqw;
    font-size: 2.25cqw;
  }
  .compare-icon{
    width: 5.4cqw;
    height: 5.4cqw;
    flex: 0 0 auto;
  }
  .compare-slider{
    flex: none;
    width: 100%;
    max-width: 100%;
    gap: 1.4cqw;
  }
  .compare-frame{
    aspect-ratio: 3 / 3.5;
    background: transparent;
    border-radius: 2.7cqw;
  }
  .compare-img{
    object-fit: contain;
    transform: translate(0%, 0%) scale(0.94);
  }
  .compare-cta-btn{
    padding: 3cqw 6cqw;
    font-size: 3.8cqw;
  }
  .compare-handle-btn{
    width: 5.5cqw;
    height: 5.5cqw;
    gap: .1cqw;
    box-shadow: 0 .55cqw 1.6cqw rgba(0, 0, 0, .18);
  }
  .compare-handle-btn svg{
    width: 1.9cqw;
    height: 1.9cqw;
  }
  .compare-hint{
    bottom: 5%;
    gap: .9cqw;
    padding: 1.15cqw 2.2cqw;
    box-shadow: 0 .55cqw 1.6cqw rgba(0, 0, 0, .16);
    font-size: 1.9cqw;
  }
  .compare-hint svg{
    width: 2.2cqw;
    height: 2.2cqw;
  }
}


/* =====================================================
   TIPOS DE FUNDAS
   ===================================================== */

.cases-chooser-section{
  width: 100%;


  background: #f1f1f1;
}

.cases-chooser-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;

  padding:
    1.55cqw
    1.79cqw
    2.14cqw;
}


/* =====================================================
   ENCABEZADO DE TIPOS DE FUNDAS
   ===================================================== */

.cases-chooser-header{
  margin-bottom: 3.4cqw;

  text-align: center;
}

.cases-chooser-title{
  margin: 0 0 .48cqw;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 4.8cqw;

  font-weight: 300;
  line-height: .98;
  letter-spacing: -.05em;
  white-space: nowrap;
}

.cases-chooser-title strong{
  font-weight: 800;
}

.cases-chooser-subtitle{
  margin: 0;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 2.9cqw;

  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.cases-chooser-subtitle span{
  color: var(--pink);
  font-weight: 800;
}


/* =====================================================
   FILA DE LAS CUATRO FUNDAS
   ===================================================== */

.cases-grid{
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  grid-template-rows: auto auto;

  column-gap: .6cqw;
  row-gap: 0px;
}

.case-card:nth-child(1) .case-card-image-wrap{ grid-column: 1; grid-row: 1; }
.case-card:nth-child(1) .case-card-info{       grid-column: 1; grid-row: 2; }

.case-card:nth-child(2) .case-card-image-wrap{ grid-column: 2; grid-row: 1; }
.case-card:nth-child(2) .case-card-info{       grid-column: 2; grid-row: 2; }

.case-card:nth-child(3) .case-card-image-wrap{ grid-column: 3; grid-row: 1; }
.case-card:nth-child(3) .case-card-info{       grid-column: 3; grid-row: 2; }

.case-card:nth-child(4) .case-card-image-wrap{ grid-column: 4; grid-row: 1; }
.case-card:nth-child(4) .case-card-info{       grid-column: 4; grid-row: 2; }


/* =====================================================
   TARJETAS
   ===================================================== */

.case-card{
  display: contents;

  color: inherit;
  text-decoration: none;

  cursor: pointer;
}

.case-card-badge{
  position: absolute;
  z-index: 2;
  top: -1.3cqw;
  left: 50%;

  padding: .6cqw 1.4cqw;

  transform: translateX(-50%);

  border-radius: 999px;

  background: var(--pink);

  color: #fff;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.3cqw;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;

  opacity: 0;
  pointer-events: none;

  transition: opacity .2s ease;
}

.case-card.is-active .case-card-badge{
  opacity: 1;
}


/* =====================================================
   CONTENEDOR DE IMAGEN
   ===================================================== */

.case-card-image-wrap{
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  aspect-ratio: 3 / 4.15;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  margin-bottom: -.7cqw;

  overflow: visible;
}

.case-card-image-wrap::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% 10% 2%;

  border-radius: 1.6cqw;

  background: var(--pink);

  opacity: 0;

  transition: opacity .25s ease;
}

.case-card.is-active .case-card-image-wrap::before{
  opacity: .22;
}

/* Si en algún PNG el aire de abajo sobra o falta,
   ajustá el margin-bottom solo de esa tarjeta aquí
   (más negativo = texto más pegado a la funda) */

.cases-grid .case-card:nth-child(1) .case-card-image-wrap{ margin-bottom: -.7cqw; }
.cases-grid .case-card:nth-child(2) .case-card-image-wrap{ margin-bottom: -.7cqw; }
.cases-grid .case-card:nth-child(3) .case-card-image-wrap{ margin-bottom: -.7cqw; }
.cases-grid .case-card:nth-child(4) .case-card-image-wrap{ margin-bottom: .7cqw; }


/* =====================================================
   IMÁGENES DE LAS FUNDAS
   ===================================================== */

.case-card-image{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center bottom;

  transform-origin: center bottom;
  transform:
    scale(var(--img-scale, 1.32))
    translateX(var(--img-shift-x, 0%))
    translateY(var(--img-shift-y, 0%));

  transition:
    transform .28s ease,
    filter .28s ease;
}


/* Ajustes por funda: si el texto (centrado) no queda
   alineado con la funda que se ve, es porque el PNG
   trae distinto "aire" transparente de cada lado.
   Usa --img-shift-x para correr la imagen (en % de su
   propio ancho) a la izquierda (negativo) o derecha
   (positivo) hasta que quede centrada bajo su texto.
   Usa --img-shift-y (en % de su propia altura) para
   subirla (negativo) o bajarla (positivo). Se usa % y
   no px para que el ajuste se vea igual en desktop y
   en móvil, sin importar cuánto crezca o achique la
   tarjeta. Usa --img-scale para agrandar/achicar esa
   funda en particular. */

.cases-grid
.case-card:nth-child(1)
.case-card-image{
  --img-scale: 0.86;
  --img-shift-x: 0%;
  --img-shift-y: -7%;
}

.cases-grid
.case-card:nth-child(2)
.case-card-image{
  --img-scale: 1.32;
  --img-shift-x: 0%;
  --img-shift-y: 0%;
}

.cases-grid
.case-card:nth-child(3)
.case-card-image{
  --img-scale: 1.32;
  --img-shift-x: 0%;
  --img-shift-y: 0%;
}

.cases-grid
.case-card:nth-child(4)
.case-card-image{
  --img-scale: 0.82;
  --img-shift-x: 0%;
  --img-shift-y: -8.5%;
}


/* =====================================================
   HOVER
   ===================================================== */

@media (hover: hover) and (pointer: fine){
  .case-card:hover .case-card-image{
    transform:
      scale(var(--img-scale, 1.32))
      translateX(var(--img-shift-x, 0%))
      translateY(calc(var(--img-shift-y, 0%) - 6px))
      scale(1.025);

    filter:
      drop-shadow(
        0 14px 18px rgba(0, 0, 0, .09)
      );
  }
}


/* =====================================================
   INFORMACIÓN DE PRODUCTO
   ===================================================== */

.case-card-info{
  width: 100%;

  text-align: center;

  container-type: inline-size;
}

.case-card-title{
  margin: 0 0 2px;

  color: #111;

  font-family: 'Montserrat', sans-serif;

  font-size: 8.6cqw;

  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.case-card-title strong{
  font-weight: 800;
}

.case-card-price{
  margin: 0;

  color: #555;

  font-family: 'Montserrat', sans-serif;

  font-size: 6.2cqw;

  font-weight: 400;
  line-height: 1.2;
}


/* =====================================================
   ANIMACIÓN ESCALONADA DE PRODUCTOS
   ===================================================== */

.cases-grid
.case-card:nth-child(1){
  transition-delay: .04s;
}

.cases-grid
.case-card:nth-child(2){
  transition-delay: .11s;
}

.cases-grid
.case-card:nth-child(3){
  transition-delay: .18s;
}

.cases-grid
.case-card:nth-child(4){
  transition-delay: .25s;
}


/* =====================================================
   TABLET
   ===================================================== */

/* =====================================================
   AJUSTES DEL HERO EN FORMATOS MÁS ANGOSTOS
   (esto no es "responsive" de layout: es la misma lógica
   proporcional del hero, afinada para cuando el aspect-fit
   de fitJourneyInner() da un frame más angosto/alto)
   ===================================================== */

@media (max-width: 1179px){

  .hero-title{
    width: 62%;
  }

  .pack-text{
    left: 52%;
    width: 42%;
  }

  .pack-title{
    font-size: 5.6cqw;
  }

  .pack-subtitle{
    font-size: 2.2cqw;
  }

}


/* =====================================================
   MOBILE — SECCIÓN 1 (COMPOSICIÓN EDITORIAL DE FUNDAS)
   Contenedor vertical de referencia: 652 x 1036.
   Solo reposiciona los grupos jGroup0/1/2 como unidades
   completas (funda + sus stickers) vía left/top/width
   centrado + rotate. La composición interna de cada
   grupo (posición de cada sticker dentro de su funda)
   no se toca — se preserva su proporción original.

   También aplica en iPad EN VERTICAL (cualquier modelo, de
   iPad mini a iPad Pro 12.9): mismo condición táctil +
   orientación que ya usa `script.js` (isHeroMobileViewport)
   para elegir el aspect ratio y las coordenadas mobile del
   journey, así que CSS y JS quedan sincronizados. Todos los
   valores de aquí abajo son % o cqw (relativos al propio
   contenedor journey-inner/journey-stage, que ya lo escala
   `fitJourneyInner()` en JS), nunca `vw`, así que no hace
   falta reescalarlos para las distintas anchuras de iPad —
   el mismo % se ve proporcionalmente igual en todos. iPad en
   HORIZONTAL no entra aquí y sigue con el layout de
   escritorio, sin cambios. */

@media (max-width: 480px),
       (min-width: 641px) and (max-width: 1200px) and
       (max-aspect-ratio: 1/1){

  /* Las "onditas" del hero ya se ocultan en celular (ver el bloque
     de nav más arriba); se ocultan aquí también para iPad vertical,
     por la misma razón. */
  .ring-sonar{
    display: none;
  }

  .hero-title{
    top: 11.5% !important;
    width: 80% !important;
  }

  /* left/top/width/height NO llevan !important: el scroll
     (updateJourney en script.js) las controla en cada frame
     vía inline style. Estos valores son solo el estado inicial
     (progress = 0), igual a lo que ya venía del editor visual. */
  #jGroup0{
    left: 70.1%;
    top: 51.7%;
    width: 32.37%;
    height: 25.94%;
    transform: translate(-50%, -50%) rotate(9deg);
  }

  #jGroup1{
    left: 47.1%;
    top: 78.5%;
    width: 29.11%;
    height: 33.11%;
    transform: translate(-50%, -50%) rotate(-27deg);
  }

  #jGroup2{
    left: 30.8%;
    top: 39.3%;
    width: 29.39%;
    height: 30.47%;
    transform: translate(-50%, -50%) rotate(-15deg);
  }

  /* ---------- BOLSA (estado final, al terminar el scroll) ---------- */

  .bag-bg{
    top: 29.46% !important;
    left: 51.23% !important;
    width: 52.1cqw !important;
  }

  .bag-plastic{
    top: 30.45% !important;
    left: 51.16% !important;
    width: 49.2cqw !important;
  }

  /* La animación de "vibración" (phoneRing/phoneRingMobile) pisa
     por completo la propiedad transform mientras corre, así que
     debe reproducir por su cuenta el transform de "reposo" de
     cada modo. En mobile ese reposo es sólo rotate(var(--jr))
     (el JS ya no usa translate(-50%,-50%): la caja del grupo
     queda fija con su centro real en su posición, y el JS sólo
     mueve/escala desde ahí) — por eso esta versión mobile no
     lleva translate, igual que la de desktop. */

  #jGroup0{ --jr: 9deg; }
  #jGroup1{ --jr: -27deg; }
  #jGroup2{ --jr: -15deg; }

  .journey-stage.cases-on #jGroup0,
  .journey-stage.cases-on #jGroup1,
  .journey-stage.cases-on #jGroup2{
    animation: phoneRingMobile .6s ease-in-out .85s 2;
  }

  /* ---------- TEXTO "CONSIDER IT PACKED" ---------- */

  .pack-text{
    top: 56% !important;
    left: 50% !important;
    width: 82% !important;
    transform: translateX(-50%) !important;
    text-align: center;
  }

  .pack-title{
    font-size: 10cqw !important;
  }

  .pack-subtitle{
    font-size: 4.4cqw !important;
  }

  .final-cta{
    padding: 3cqw 6cqw;

    font-size: 3.8cqw;
  }

}

@keyframes phoneRingMobile{

  0%, 100%{
    transform: rotate(var(--jr));
  }

  15%{
    transform: rotate(calc(var(--jr) - 7deg));
  }

  30%{
    transform: rotate(calc(var(--jr) + 6deg));
  }

  45%{
    transform: rotate(calc(var(--jr) - 5deg));
  }

  60%{
    transform: rotate(calc(var(--jr) + 4deg));
  }

  75%{
    transform: rotate(calc(var(--jr) - 2deg));
  }

  90%{
    transform: rotate(calc(var(--jr) + 1deg));
  }

}


/* =====================================================
   NO SON CALCOMANÍAS
   ===================================================== */

.quality-section{
  width: 100%;

  background: #fff;
}

.quality-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;

  padding: .5cqw 3cqw 3cqw;

  text-align: center;
}

.quality-eyebrow{
  margin: 0 0 .3cqw;

  color: #aaa;

  font-family: 'Montserrat', sans-serif;

  font-size: 2.8cqw;
  font-weight: 400;
  letter-spacing: -.01em;
  text-align: center;
}

.quality-title{
  margin: 0 0 3cqw;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 4.2cqw;
  font-weight: 400;
  letter-spacing: -.03em;
  text-align: center;
}

.quality-title strong{
  color: var(--pink);
  font-weight: 800;
}

.quality-grid{
  display: flex;
  justify-content: center;

  gap: 2cqw;
}

.quality-item{
  flex: 0 0 31.3%;
  max-width: 31.3%;
}

.quality-grid .quality-item:nth-child(1){
  transition-delay: .05s;
}

.quality-grid .quality-item:nth-child(2){
  transition-delay: .15s;
}

.quality-grid .quality-item:nth-child(3){
  transition-delay: .25s;
}

.quality-image-wrap{
  width: 100%;
  aspect-ratio: 1 / .94;

  margin-bottom: 1.4cqw;

  overflow: hidden;

  border-radius: 1.2cqw;
}

.quality-image-wrap img{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.quality-caption{
  margin: 0;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 1.9cqw;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.quality-caption strong{
  font-weight: 700;
}

.quality-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;

  margin: 2.8cqw auto 0;

  padding: 1.2cqw 3cqw;

  border-radius: 999px;

  background: var(--pink);

  color: #fff;
  text-decoration: none;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.8cqw;
  font-weight: 500;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

@media (hover: hover) and (pointer: fine){
  .quality-cta-btn:hover{
    transform: translateY(-2px);
    opacity: .92;
  }
}


/* =====================================================
   MOBILE — NO SON CALCOMANÍAS
   Mismo motivo que en la sección de comparación: el
   contenedor pasa de ~1280px a ancho de iPhone, así que
   los cqw quedan minúsculos. Aquí se apilan las 3 tarjetas
   en columna y se recalibran los tamaños.
   ===================================================== */

@media (max-width: 480px){

  .quality-inner{
    padding: 4cqw 5.5cqw 3cqw;
  }

  .quality-eyebrow{
    margin-bottom: 1.4cqw;

    font-size: 5cqw;
  }

  .quality-title{
    margin-bottom: 6cqw;

    font-size: 7cqw;
  }

  .quality-grid{
    flex-direction: column;
    align-items: center;

    gap: 6cqw;
  }

  .quality-item{
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;

    display: flex;
    flex-direction: column-reverse;
  }

  .quality-image-wrap{
    margin-bottom: 0;
    margin-top: 2.4cqw;

    border-radius: 3cqw;
  }

  .quality-caption{
    font-size: 4.6cqw;
  }

  .quality-cta-btn{
    margin-top: 3cqw;

    padding: 3cqw 6cqw;

    font-size: 3.8cqw;
  }

}


/* =====================================================
   + DE 10K CLIENTES FELICES
   ===================================================== */

.social-proof-section{
  width: 100%;

  background: #fff;
}

.social-proof-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;

  padding: 1.2cqw 3cqw 2cqw;
}

.social-proof-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4cqw;

  margin: 0 0 2.2cqw;
}

.social-proof-title{
  margin: 0;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 4.4cqw;
  font-weight: 400;
  letter-spacing: -.03em;
}

.social-proof-title strong{
  font-weight: 800;
}

.social-proof-social-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1.6cqw 3.2cqw;

  border: 2px solid #000;
  border-radius: 999px;

  color: #000;
  text-decoration: none;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.9cqw;
  font-weight: 400;

  transition:
    background .15s ease,
    color .15s ease;
}

@media (hover: hover) and (pointer: fine){
  .social-proof-social-btn:hover{
    background: #000;
    color: #fff;
  }
}

.social-proof-carousel-wrap{
  position: relative;
}

.social-proof-arrow{
  display: none;
}

.social-proof-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 1.2cqw;

  margin: 0 0 1.6cqw;
}

.social-proof-grid .social-proof-video:nth-child(1){
  transition-delay: .04s;
}

.social-proof-grid .social-proof-video:nth-child(2){
  transition-delay: .11s;
}

.social-proof-grid .social-proof-video:nth-child(3){
  transition-delay: .18s;
}

.social-proof-grid .social-proof-video:nth-child(4){
  transition-delay: .25s;
}

.social-proof-video{
  position: relative;

  width: 100%;
  aspect-ratio: 9 / 16;

  overflow: hidden;
  clip-path: inset(0 round 1.49cqw);

  border: 3px solid #000;
  border-radius: 1.49cqw;

  background: #eee;
}

.social-proof-video video{
  position: absolute;
  top: 0;
  left: 0;

  width: 300px;
  height: 533.33px;

  transform-origin: top left;

  border: none;
}


/* =====================================================
   MOBILE — + DE 10K CLIENTES FELICES (CARRUSEL)
   En vez de forzar 2x2 (que el usuario no quiere), el
   grid se vuelve una fila horizontal con scroll-snap.
   Cada tarjeta ocupa la mayoría del ancho y se ve un
   pedacito de la siguiente, invitando a deslizar. Las
   flechas hacen scroll de una tarjeta a la vez.
   ===================================================== */

@media (max-width: 480px){

  .social-proof-inner{
    padding: 0.5cqw 0 6cqw;
  }

  .social-proof-header{
    flex-direction: column;
    justify-content: center;
    text-align: center;

    margin: 0 0 4cqw;

    padding: 0 5.5cqw;
  }

  .social-proof-title{
    font-size: 6cqw;
  }

  .social-proof-social-btn{
    padding: 3cqw 6cqw;

    font-size: 3.8cqw;
  }

  .social-proof-carousel-wrap{
    padding: 0;
  }

  .social-proof-grid{
    display: flex;

    gap: 1.6cqw;

    margin: 0 0 3cqw;

    padding: 0 5.5cqw;

    overflow: visible;
  }

  .social-proof-video{
    flex: 1 1 0;

    border-width: 1.5px;
  }

  .social-proof-arrow{
    display: none !important;
  }

  .social-proof-arrow{
    position: absolute;
    top: 42%;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 9cqw;
    height: 9cqw;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .92);
    box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .18);

    color: #000;

    cursor: pointer;
  }

  .social-proof-arrow svg{
    width: 4.4cqw;
    height: 4.4cqw;
  }

  .social-proof-arrow-prev{
    left: 1.5cqw;
  }

  .social-proof-arrow-next{
    right: 1.5cqw;
  }

}


/* ---------- BARRA DE RESEÑA ---------- */

.testimonial-bar{
  position: relative;

  display: flex;
  align-items: center;
  gap: 1.4cqw;

  padding: 1.8cqw 4cqw;

  border-radius: 1cqw;

  background: #111;
}

.testimonial-quote-mark{
  flex: 0 0 auto;

  color: var(--pink);

  font-family: Georgia, serif;
  font-size: 5.2cqw;
  line-height: .6;
}

.testimonial-content{
  flex: 1;

  transition: opacity .25s ease;
}

.testimonial-text{
  margin: 0 0 .7cqw;

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 1.9cqw;
  font-weight: 400;
  letter-spacing: -.01em;
}

.testimonial-meta{
  display: flex;
  align-items: center;
  gap: .9cqw;
}

.testimonial-stars{
  display: flex;
  gap: .2cqw;

  color: #ffc94d;
}

.testimonial-stars svg{
  width: 1.4cqw;
  height: 1.4cqw;
}

.testimonial-name{
  color: #ddd;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.35cqw;
  font-style: italic;
  font-weight: 400;
}

.testimonial-next-btn{
  flex: 0 0 auto;

  width: 2.8cqw;
  height: 2.8cqw;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: transparent;
  box-shadow: inset 0 0 0 1.5px #fff;

  color: #fff;

  cursor: pointer;

  transition: background .15s ease;
}

@media (hover: hover) and (pointer: fine){
  .testimonial-next-btn:hover{
    background: rgba(255, 255, 255, .12);
  }
}

.testimonial-next-btn svg{
  width: 1.3cqw;
  height: 1.3cqw;
}


/* =====================================================
   ¿QUIERES QUE TE APOYEMOS CON EL DISEÑO?
   ===================================================== */

.whatsapp-cta-section{
  width: 100%;

  background: #fff;
}

.whatsapp-cta-inner{
  container-type: inline-size;

  width: min(100%, 1280px);

  margin: 0 auto;

  padding: .6cqw 3cqw 5cqw;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}

.dual-cta-col{
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.dual-cta-divider{
  align-self: stretch;

  width: 1px;

  background: #e2e2e2;
}

.dual-cta-btn{
  min-width: 15cqw;

  padding: 1.4cqw 2.6cqw;
}

@media (hover: hover) and (pointer: fine){
  .dual-cta-btn:hover{
    background: var(--pink);

    transform: translateY(-2px);
    opacity: .93;
  }
}

.whatsapp-cta-title{
  min-height: 6.4cqw;
  margin: 0 0 2.2cqw;

  color: #000;

  font-family: 'Montserrat', sans-serif;

  font-size: 2.7cqw;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-align: center;
}

.whatsapp-cta-title strong{
  font-weight: 800;
}

.whatsapp-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;

  min-width: 15cqw;

  padding: 1.4cqw 2.6cqw;

  border-radius: 999px;

  background: #4caf50;

  text-decoration: none;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

@media (hover: hover) and (pointer: fine){
  .whatsapp-cta-btn:hover{
    transform: translateY(-2px);
    opacity: .93;
  }
}

.whatsapp-cta-text{
  color: #fff;

  font-family: 'Montserrat', sans-serif;
  font-size: 1.9cqw;
  font-weight: 500;
  line-height: 1.15;
}

.whatsapp-cta-text strong{
  font-weight: 700;
}

.whatsapp-cta-icon{
  flex: 0 0 auto;

  width: 3.2cqw;
  height: 3.2cqw;
}


/* =====================================================
   MOBILE — BARRA DE RESEÑA
   ===================================================== */

@media (max-width: 480px){

  .testimonial-bar{
    gap: 2.5cqw;

    margin: 0 5.5cqw;

    padding: 3.4cqw 4cqw;

    border-radius: 3cqw;
  }

  .testimonial-quote-mark{
    font-size: 9cqw;
  }

  .testimonial-text{
    margin-bottom: 1.4cqw;

    font-size: 3.4cqw;
  }

  .testimonial-meta{
    gap: 1.6cqw;
  }

  .testimonial-stars{
    gap: .5cqw;
  }

  .testimonial-stars svg{
    width: 2.6cqw;
    height: 2.6cqw;
  }

  .testimonial-name{
    font-size: 2.6cqw;
  }

  .testimonial-next-btn{
    width: 6.2cqw;
    height: 6.2cqw;

    box-shadow: inset 0 0 0 1.3px #fff;
  }

  .testimonial-next-btn svg{
    width: 2.8cqw;
    height: 2.8cqw;
  }

}


/* =====================================================
   MOBILE — ¿QUIERES QUE TE APOYEMOS CON EL DISEÑO?
   Las 2 columnas se apilan; el divisor vertical se
   convierte en una línea horizontal entre ambas.
   ===================================================== */

@media (max-width: 480px){

  .whatsapp-cta-inner{
    flex-direction: column;

    padding: 4cqw 5.5cqw 10cqw;

    gap: 6cqw;
  }

  .dual-cta-divider{
    align-self: center;

    width: 60%;
    height: 1px;
  }

  .whatsapp-cta-title{
    min-height: 0;
    margin-bottom: 3.4cqw;

    font-size: 4.6cqw;
  }

  .whatsapp-cta-btn,
  .dual-cta-btn{
    min-width: 0;

    padding: 3cqw 6cqw;

    font-size: 3.8cqw;
  }

  .whatsapp-cta-btn{
    gap: 2cqw;
  }

  .whatsapp-cta-text{
    font-size: 3.8cqw;
  }

  .whatsapp-cta-icon{
    width: 5.6cqw;
    height: 5.6cqw;
  }

}


/* =====================================================
   MOBILE — TIPOS DE FUNDAS (2 FILAS x 2 COLUMNAS)
   ===================================================== */

@media (max-width: 480px){

  .cases-chooser-title{
    margin-bottom: 3cqw;

    font-size: 7.8cqw;
    white-space: normal;
  }

  .cases-chooser-subtitle{
    font-size: 4.6cqw;
    font-weight: 400;
    white-space: normal;
  }

  .cases-chooser-subtitle span{
    font-weight: 400;
  }

  .case-card-badge{
    top: -2.4cqw;

    padding: 2.2cqw 3cqw;

    font-size: 2.8cqw;
  }

  .cases-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto auto;

    column-gap: 2cqw;
    row-gap: 1.5cqw;
  }

  .case-card:nth-child(1) .case-card-image-wrap{ grid-column: 1; grid-row: 1; }
  .case-card:nth-child(1) .case-card-info{       grid-column: 1; grid-row: 2; }

  .case-card:nth-child(2) .case-card-image-wrap{ grid-column: 2; grid-row: 1; }
  .case-card:nth-child(2) .case-card-info{       grid-column: 2; grid-row: 2; }

  .case-card:nth-child(3) .case-card-image-wrap{ grid-column: 1; grid-row: 3; }
  .case-card:nth-child(3) .case-card-info{       grid-column: 1; grid-row: 4; }

  .case-card:nth-child(4) .case-card-image-wrap{ grid-column: 2; grid-row: 3; }
  .case-card:nth-child(4) .case-card-info{       grid-column: 2; grid-row: 4; }

}


/* =====================================================
   MOBILE — SECCIÓN IDEA
   ===================================================== */

@media (max-width: 480px){

  .idea-inner{
    aspect-ratio: 944 / 880;
  }

  .idea-background-desktop{
    display: none;
  }

  .idea-background-mobile{
    display: block;
    object-position: 0.03% 50.52%;
    transform: scale(1);
  }

  .folder-drawings{
    display: none;
  }

  .folder-item{
    width: 18cqw;
  }

  .folder-item p{
    font-size: 2.4cqw;
    margin-top: .6cqw;
  }

  .folder-photos{
    left: 79%;
    top: 23.26%;
  }

  .folder-stickers{
    left: 79%;
    top: 49.46%;
  }

  .folder-texts{
    left: 79%;
    top: 75.66%;
  }

  /* En móvil el texto y el CTA no necesitan reveal. Antes el
     wrapper era `position: static` y sus dos hijos absolutos se
     anclaban indirectamente a `.idea-inner`. Safari/WKWebView
     podía promover temporalmente ese wrapper a una capa por la
     clase `.reveal` y dejar sus hijos pintados en una posición
     vieja hasta el siguiente repaint (normalmente al regresar el
     scroll). Ahora el wrapper es un containing block real que
     cubre toda la sección: las coordenadas porcentuales siguen
     siendo exactamente las mismas, pero título y botón permanecen
     ligados a una caja estable durante todo el scroll. */
  .idea-text{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    pointer-events: none;
  }

  .idea-text.reveal,
  .idea-text.reveal.revealed{
    transform: none;
    will-change: auto !important;
    opacity: 1 !important;
    transition: none;
  }

  .idea-text .idea-btn{
    pointer-events: auto;
  }

  .idea-title{
    position: absolute;
    left: 7.99%;
    top: 5.85%;
    width: 100%;
    font-size: 6.9cqw;
    margin: 0;
    text-align: left;
  }

  .idea-title-break-1{
    display: none;
  }

  .idea-title-break-mobile{
    display: block;
  }

  .idea-btn{
    position: absolute;
    left: 7.52%;
    top: 23.30%;

    padding: 3cqw 6cqw;

    font-size: 3.8cqw;
  }

}


/* =====================================================
   REDUCIR MOVIMIENTO
   ===================================================== */

@media (prefers-reduced-motion: reduce){

  .reveal,
  .folder-item.reveal,
  .idea-text.reveal{
    opacity: 1;
    transition: none;
  }

  .reveal{
    transform: none;
  }

  .folder-item.reveal{
    transform:
      translate(-50%, -50%);
  }

  .idea-text.reveal{
    transform:
      translateY(-50%);
  }

  .case-card-image{
    transition: none;
  }

}
/* =====================================================
   MOBILE — BLOQUEO LATERAL SEGURO
   No intercepta touchmove ni modifica el scroll vertical,
   por lo que conserva completa la animación del journey.
   ===================================================== */
@media (max-width: 480px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .journey-section,
  .journey-stage{
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .journey-stage{
    touch-action: pan-y;
  }

  .journey-inner{
    max-width: none;
  }
}


/* =====================================================
   MODO INSTAGRAM (WKWebView iOS / Android WebView)
   La clase `ig-webview` (y `ig-android` para el caso más
   débil) las añade script-mobile-fluid-v3.js apenas detecta
   que la página se abrió dentro del navegador interno de
   Instagram — NUNCA se activan en Safari/Chrome normales, así
   que nada de esto puede "romper" la experiencia fuera de
   Instagram. El diseño final se ve idéntico; lo único que
   cambia es CÓMO se logra, quitando trabajo de composición
   que el usuario no percibe.
   ===================================================== */

/* NOTA: el título ya no tiene animación de entrada para NADIE
   (incluido Instagram WebView) — queda fijo en su posición final
   desde el primer frame, ver `.hero-title` más arriba. Por eso ya
   no hay un override de `.hero-title` aquí para `ig-webview`. */

html.ig-android .sticker.fixed,
html.ig-android .sticker.scroll-reveal.is-settled{
  /* El drop-shadow de las 27 stickers ya sólo se aplica cuando
     terminaron de escalar (ver nota junto a `.sticker` más
     arriba) — pero en Android WebView, que compone con mucho
     menos margen que Safari/WKWebView, incluso ese drop-shadow
     "en reposo" repartido en ~20 elementos visibles a la vez
     puede pesar durante los primeros frames de la sección
     journey, justo cuando el usuario también está scrolleando y
     el hilo principal está más ocupado. Se desactiva sólo aquí
     (Android + Instagram); en iOS/Instagram y en cualquier
     Safari/Chrome normal la sombra se queda exactamente igual
     que antes. */
  filter: none;
}

html.ig-webview .journey-bg{
  /* Este fondo cubre 200% de alto y se mueve por transform en
     cada frame de scroll (ver updateJourney en el JS) — es el
     único elemento, junto a los grupos, que SIEMPRE debe
     quedarse como capa GPU aparte mientras dura la sección.
     `contain: paint` evita que su repintado (irrelevante, es una
     imagen estática moviéndose) pueda disparar trabajo de
     layout/paint fuera de su propia caja — un aislamiento barato
     que ayuda más en WebView, donde el presupuesto de invalidación
     por frame es más chico. */
  contain: paint;
}

/* `touch-action: pan-y` (arriba, en `body`) ya le dice al
   navegador qué GESTOS aceptar, pero en el WebView de Instagram
   eso no evita el "rebote"/deslizamiento lateral de la página
   completa cuando el dedo se mueve un poco hacia los lados sin
   querer — eso es overscroll/rubber-band nativo del propio
   WebView, no un gesto que `touch-action` controle. Se bloquea
   sólo en horizontal (`overscroll-behavior-x`) y sólo dentro de
   Instagram, para no tocar el rebote normal de Safari/Chrome
   fuera de ahí. El scroll vertical normal sigue exactamente
   igual. */
html.ig-webview,
html.ig-webview body{
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* =====================================================
   iPAD / TABLET — CIERRE VISUAL A PANTALLA COMPLETA
   No cambia la escala ni las coordenadas del journey. Únicamente
   prolonga visualmente la base del pasto hasta el borde inferior,
   evitando que se vea el fondo azul como una franja rectangular.
   La opacidad se sincroniza desde JS con la aparición del pasto.
   ===================================================== */
html.tablet-stable-viewport .journey-stage::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 6;
  height: clamp(90px, 16vh, 180px);
  pointer-events: none;
  opacity: var(--grass-opacity, 0);
  background:
    linear-gradient(
      to bottom,
      rgba(9, 24, 12, 0) 0%,
      rgba(8, 20, 10, .72) 34%,
      rgba(5, 13, 7, .97) 70%,
      #050d07 100%
    );
  transform: translateZ(0);
}

html.tablet-stable-viewport .grass{
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  max-width: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================================
   SAFARI iOS/iPadOS — CONFIGURACIÓN REPLICADA DEL CÓDIGO BUENO
   Una sola superficie visual: .bag-scene.
   El sticky no pinta fondo ni crea una capa aislada.
   ============================================================ */

html {
  width: 100%;
  min-height: 100%;
  background: #000 !important;
  background-color: #000 !important;
}

body {
  width: 100%;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    background-color: #dce4f0;
  }

  html {
    background: #000 !important;
    background-color: #000 !important;
  }

  /* iPhone */
  @media (max-width: 640px) {
    .journey-section.bag-scene {
      position: relative;
      height: 220svh;
      height: 185svh;
      min-height: 185svh;
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
      background-image: url('/images/fondo-cielo.png');
      background-size: cover;
      background-position: 49% 50%;
      background-repeat: no-repeat;
      background-color: #dce4f0;
    }

    .journey-stage.bag-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      height: 100svh;
      height: 100dvh;
      min-height: 100svh;
      max-height: none;
      overflow: hidden;

      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;

      transform: none !important;
      -webkit-transform: none !important;
      contain: none !important;
      isolation: auto !important;
    }

    /* La foto ya vive afuera. Esta capa interna no debe volver a
       convertirse en otra superficie azul rectangular. */
    .journey-stage.bag-sticky .journey-bg {
      height: 100%;
      background: transparent !important;
      background-image: none !important;
      transform: none !important;
      -webkit-transform: none !important;
      will-change: auto !important;
      contain: none !important;
    }
  }

  /* iPad / iPadOS */
  @media (min-width: 641px) and (max-width: 1366px) {
    .journey-section.bag-scene {
      position: relative;
      height: 220svh !important;
      height: 185svh !important;
      min-height: 185svh;
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
      background-image: url('/images/fondo-cielo.png');
      background-size: cover;
      background-position: 49% 50%;
      background-repeat: no-repeat;
      background-color: #dce4f0;
    }

    .journey-stage.bag-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh !important;
      height: 100svh !important;
      height: 100dvh !important;
      min-height: 100svh;
      max-height: none;
      overflow: hidden;

      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;

      transform: none !important;
      -webkit-transform: none !important;
      contain: none !important;
      isolation: auto !important;
    }

    .journey-stage.bag-sticky .journey-bg {
      height: 100%;
      background: transparent !important;
      background-image: none !important;
      transform: none !important;
      -webkit-transform: none !important;
      will-change: auto !important;
      contain: none !important;
    }

    /* El parche viejo sí dibujaba literalmente una franja inferior. */
    html.tablet-stable-viewport .journey-stage::after {
      content: none !important;
      display: none !important;
    }
  }
}

/* ============================================================
   SAFARI MÓVIL/IPAD — CIERRE ENTRE EL PASTO Y BENEFICIOS
   Al soltarse el sticky, Safari puede mostrar durante unos px el
   fondo exterior de .bag-scene. Como la imagen del cielo es clara,
   se percibía como un rectángulo blanco antes de la sección negra.
   Esta capa vive DETRÁS del contenido y sólo oscurece el remate
   final de la pista; no modifica el sticky ni el efecto cristalino.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px),
         (min-width: 641px) and (max-width: 1366px) {

    .journey-section.bag-scene::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      height: max(72px, 10svh);
      pointer-events: none;
      background: #0A0A0A;
    }

    .journey-stage.bag-sticky {
      z-index: 1;
    }

    .trust-bar-section {
      position: relative;
      z-index: 2;
      margin-top: -2px;
      padding-top: 6px;
    }
  }
}

/* ============================================================
   AJUSTE FINO — SUBIR VISUALMENTE EL PASTO
   No cambia el efecto cristalino ni la animación principal.
   Sólo agranda el PNG del pasto para que se vea más alto,
   manteniendo su base pegada al borde inferior.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  /* iPad en VERTICAL se agrega aquí (mismo valor que celular): la
     composición ahora usa el aspect ratio mobile (ver
     isHeroMobileViewport en script.js), así que el pasto necesita
     la misma proporción de ancho que en celular, no la de iPad
     horizontal. iPad HORIZONTAL sigue con su propio valor abajo. */
  @media (max-width: 640px),
         (min-width: 641px) and (max-width: 1200px) and
         (max-aspect-ratio: 1/1) {
    .journey-stage.bag-sticky .grass {
      left: 50%;
      right: auto;
      bottom: -1px;
      width: 126%;
      max-width: none;
      transform: translateX(-50%);
    }
  }

  @media (min-width: 641px) and (max-width: 1366px) and (min-aspect-ratio: 1/1) {
    .journey-stage.bag-sticky .grass {
      left: 50%;
      right: auto;
      bottom: -1px;
      width: 112%;
      max-width: none;
      transform: translateX(-50%);
    }
  }
}


/* ============================================================
   CIERRE NATURAL — PASTO ALTO SIN BLOQUE NEGRO VISIBLE
   La base negra anterior era demasiado alta y se veía como una
   pared detrás del botón. Ahora el pasto cubre visualmente la
   unión y sólo quedan unos pocos píxeles negros fuera de vista,
   justo en el empalme con la sección de beneficios.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  /* iPad en VERTICAL se agrega aquí (mismo valor que celular), por
     la misma razón que el bloque anterior: composición mobile ⇒
     proporción de pasto de celular. iPad HORIZONTAL sigue abajo. */
  @media (max-width: 640px),
         (min-width: 641px) and (max-width: 1200px) and
         (max-aspect-ratio: 1/1) {
    /* Nunca dibujar una placa negra dentro del viewport. */
    .journey-stage.bag-sticky::before {
      content: none !important;
      display: none !important;
    }

    /* Más alto, pero sin deformarlo exageradamente. La base queda
       pegada abajo y el follaje sube detrás del botón. */
    .journey-stage.bag-sticky .grass {
      left: 50%;
      right: auto;
      bottom: -2px;
      width: 140%;
      max-width: none;
      transform: translateX(-50%);
      z-index: 7;
    }

    /* Sólo cubre la costura real entre secciones; no invade la
       escena ni puede verse como un rectángulo grande. */
    .journey-section.bag-scene::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      height: 18px;
      pointer-events: none;
      background: #0A0A0A;
    }

    .trust-bar-section {
      position: relative;
      z-index: 2;
      margin-top: -10px;
      padding-top: 12px;
      background: #0A0A0A;
    }
  }

  /* Se había subido a 220% como parche mientras el degradado de
     fondo no se apagaba (bug de hover/pointer ya corregido arriba
     — ver bloque "iPad / iPadOS" más arriba, que ahora sí apaga
     `html.tablet-stable-viewport .journey-stage::after`). Con eso
     resuelto, un poco más que celular basta para verse bien. */
  @media (min-width: 641px) and (max-width: 1200px) and (max-aspect-ratio: 1/1) {
    .journey-stage.bag-sticky .grass {
      width: 160%;
    }
  }

  @media (min-width: 641px) and (max-width: 1366px) and (min-aspect-ratio: 1/1) {
    .journey-stage.bag-sticky::before {
      content: none !important;
      display: none !important;
    }

    .journey-stage.bag-sticky .grass {
      left: 50%;
      right: auto;
      bottom: -2px;
      width: 122%;
      max-width: none;
      transform: translateX(-50%);
      z-index: 7;
    }

    .journey-section.bag-scene::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      height: 20px;
      pointer-events: none;
      background: #0A0A0A;
    }

    .trust-bar-section {
      margin-top: -10px;
      padding-top: 12px;
    }
  }
}


/* ============================================================
   SAFARI — CIELO ARRIBA, NEGRO SÓLO EN EL CIERRE INFERIOR
   El fondo raíz negro oscurecía también la zona superior detrás
   de la hora/Dynamic Island. La raíz vuelve al tono del cielo.
   El negro inferior lo aporta la sección de beneficios y el
   pequeño solape oculto detrás del pasto.
   ============================================================ */
html,
body {
  background: #dce4f0 !important;
  background-color: #dce4f0 !important;
}

@supports (-webkit-touch-callout: none) {
  html,
  body {
    background: #dce4f0 !important;
    background-color: #dce4f0 !important;
  }

  .journey-section.bag-scene {
    background-color: #dce4f0 !important;
  }

  .trust-bar-section {
    background: #0A0A0A !important;
    background-color: #0A0A0A !important;
  }

  @media (max-width: 640px),
         (min-width: 641px) and (max-width: 1366px) {
    /* Cierre negro mínimo, completamente detrás del pasto. */
    .journey-section.bag-scene::after {
      height: 18px !important;
      background: #0A0A0A !important;
    }

    .trust-bar-section {
      margin-top: -12px !important;
      padding-top: 14px !important;
    }
  }
}


/* =====================================================
   VIDEOS DECORATIVOS — SAFARI / WKWEBVIEW
   ===================================================== */
.social-proof-video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.social-proof-video video::-webkit-media-controls,
.social-proof-video video::-webkit-media-controls-enclosure,
.social-proof-video video::-webkit-media-controls-panel,
.social-proof-video video::-webkit-media-controls-play-button,
.social-proof-video video::-webkit-media-controls-start-playback-button,
.social-proof-video video::-webkit-media-controls-overlay-play-button{
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}