: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;
}


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

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

  width: 100%;
  height: 6.4vw;

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

  padding: 0 2.86vw;

  background: transparent;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 2.9vw;

  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: 1.05vw;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition: opacity .2s ease;
}

.nav-links a:hover{
  opacity: .55;
}

.nav-pill{
  padding: .75vw 1.6vw;

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

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

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

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

.logo img{
  display: block;
  height: 2vw;
}

.nav-item-mobile{
  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;
  }

}


/* =====================================================
   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('https://i.ibb.co/MDBg83kB/cielo-comprimido.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;

  animation:
    titleIn
    1.1s
    cubic-bezier(.16, .8, .24, 1)
    both;
}

@keyframes titleIn{

  0%{
    transform:
      translateX(-50%)
      translateY(-26px)
      scale(1.06);

    filter: blur(6px);
  }

  100%{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);

    filter: blur(0);
  }

}


/* =====================================================
   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;
}


/* =====================================================
   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;
}

.btn:hover{
  transform: translateY(-2px);
}

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

.btn-primary:hover{
  background: #b92b56;
}

.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;
}

.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, 0px));

  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 unos px a la
   izquierda (valor negativo) o derecha (valor positivo)
   hasta que quede centrada bajo su texto. Usa
   --img-scale para agrandar/achicar esa funda en
   particular. */

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

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

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

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


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

.case-card:hover .case-card-image{
  transform:
    scale(var(--img-scale, 1.32))
    translateX(var(--img-shift-x, 0px))
    translateY(-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.
   ===================================================== */

@media (max-width: 480px){

  .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;
}

.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;
}

.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 iframe{
  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;
}

.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;
}

.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;
}

.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: 400;
  line-height: 1.15;
}

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

.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.
   ===================================================== */

html.ig-webview .hero-title{
  /* Misma entrada (fade + translateY + scale), sin el
     filter:blur() del keyframe original. Animar `filter` obliga
     al navegador a re-rasterizar la capa completa en cada frame
     de la animación en vez de sólo componerla; en WKWebView/
     Android WebView eso es notablemente más caro que en Safari
     normal y aquí sólo dura ~150ms al cargar, así que la
     diferencia visual es imperceptible. */
  animation-name: titleInLite;
}

@keyframes titleInLite{

  /* IMPORTANTE: este keyframe NO toca `opacity`, a propósito —
     igual que el `titleIn` original, que tampoco la tocaba. El
     desvanecido del título al hacer scroll lo controla por
     completo el JS (heroTitle.style.opacity, en updateJourney).
     Si el keyframe incluye `opacity` y la animación tiene
     `animation-fill-mode: both` (heredado del shorthand de
     `.hero-title`), el valor final animado (opacity:1) queda con
     PRIORIDAD DE CASCADA MÁS ALTA que un estilo inline normal —
     por encima incluso del `style.opacity` que el JS va
     actualizando en cada frame de scroll. Resultado: el título
     se queda pegado en opacity:1 para siempre y nunca se
     desvanece, aunque el JS sí esté escribiendo el valor correcto
     — exactamente el bug reportado. Quitar `opacity` de aquí deja
     que el JS sea, otra vez, el único dueño de esa propiedad. */

  0%{
    transform:
      translateX(-50%)
      translateY(-26px)
      scale(1.06);
  }

  100%{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}

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;
}

/* =====================================================
   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;
}