@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
  --pink: #de3769;
  --ink: #1c1c1c;
  --bg-1: #f4f4f4;
  --bg-2: #dfdfdf;
  --header-h: 96px;
  --scene-bg: #e7e7e7;
}

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

html {
  scroll-behavior: smooth;
  background: #000;
  background-color: #000 !important;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* No quiero simplemente una sección de 100vh; quiero el comportamiento
   edge-to-edge de Safari moderno, donde el fondo continúa detrás de la
   interfaz translúcida del navegador. Por eso html/body llevan su propio
   fondo sólido/gradiente de borde a borde, y min-height encadena
   vh -> svh -> dvh (el navegador usa la última unidad que entienda,
   quedándose con dvh en iOS moderno, que se re-calcula solo cuando
   aparecen/desaparecen las barras de Safari, sin saltos ni franjas). */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  background: var(--scene-bg);
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* ---------------- Video — sin UI nativa en NINGÚN dispositivo ----------------
   Oculta el overlay de play/pause, la barra de controles y el ícono de
   "cast"/reproducción remota de Chrome-Android en TODOS los tamaños de
   pantalla (antes esta regla solo vivía dentro de un @media mobile, así
   que en iPad y escritorio el ícono sí podía asomarse un instante).
   No afecta autoplay/loop/pointer-events: es puramente cosmético sobre
   la UI que el propio navegador podría dibujar encima del video. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button,
video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
}


video {
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

video:not([controls]) {
  outline: none;
}

/* ---------------- Header ---------------- */

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  position: relative;
  z-index: 50;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
  flex-shrink: 0;
}

.nav-right { justify-content: flex-end; }

.nav-link {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-link.bold { font-weight: 700; }

.nav-link:hover { opacity: 0.55; }

.logo {
  display: block;
  flex-shrink: 0;
}

.logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* ---------------- Hero ---------------- */
/* Sits in normal flow at the top of the sticky flex column, so it
   reserves real vertical space — that's what pushes the Mac down
   and creates the gap between title and image. It still fades out
   via JS as the user scrolls (opacity/transform set inline). */

.hero {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: 100%;
  padding: clamp(32px, 5vh, 64px) 24px clamp(40px, 6vh, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-title {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: clamp(40px, 5.1vw, 90px);
  line-height: 1.12;
  color: var(--ink);
  max-width: 1600px;
  white-space: nowrap;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* ---- Entrada: "Work mode, but" primero ---- */
.hero-line1 {
  display: inline-block;
  opacity: 0;
  transform: scale(1.8) translateY(10px);
  filter: blur(8px);
  animation: heroZoomIn .85s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}

@keyframes heroZoomIn {
  0% {
    opacity: 0;
    transform: scale(1.8) translateY(10px);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  70% {
    transform: scale(.94) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* ---- "make it yours": brillo + estrellitas ---- */
.hero-title em {
  position: relative;
  display: inline-block;
  font-style: italic;
  opacity: 0;
  transform: scale(1.8) translateY(10px);

  background: linear-gradient(
    100deg,
    var(--pink) 30%,
    #ffd3e2 44%,
    #fff 50%,
    #ffd3e2 56%,
    var(--pink) 70%
  );
  background-size: 260% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--pink);
  -webkit-text-fill-color: var(--pink);
  filter: drop-shadow(0 0 0 rgba(222, 55, 105, 0));
  animation:
    heroZoomInEm .85s cubic-bezier(.22, 1, .36, 1) .5s forwards,
    heroShine 1.6s ease-out 1.35s 1 forwards,
    heroShine 1.6s ease-out 4.8s infinite,
    heroGlowPulse 2.6s ease-in-out 1.35s infinite;
}

@keyframes heroZoomInEm {
  0% { opacity: 0; transform: scale(1.8) translateY(10px); }
  55% { opacity: 1; }
  70% { transform: scale(.94) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title em {
    -webkit-text-fill-color: transparent;
  }
}

@keyframes heroShine {
  to { background-position: -60% 0; }
}

@keyframes heroGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(222, 55, 105, .25)); }
  50% { filter: drop-shadow(0 0 16px rgba(222, 55, 105, .45)); }
}

/* ---- Estrellitas ---- */
.sparkle {
  position: absolute;
  fill: var(--pink);
  opacity: 0;
  transform: scale(0) rotate(-15deg);
  pointer-events: none;
}

.sparkle-1 {
  top: -.15em;
  left: 2px;
  width: 14px;
  height: 14px;
  animation:
    sparklePop .5s cubic-bezier(.3, 1.6, .5, 1) 1.15s forwards,
    sparkleTwinkle 1.8s ease-in-out 1.65s infinite;
}

.sparkle-2 {
  top: -.25em;
  right: 22%;
  width: 20px;
  height: 20px;
  animation:
    sparklePop .5s cubic-bezier(.3, 1.6, .5, 1) 1.3s forwards,
    sparkleTwinkle 2.1s ease-in-out 1.8s infinite;
}

.sparkle-3 {
  bottom: -.1em;
  right: -2px;
  width: 13px;
  height: 13px;
  animation:
    sparklePop .5s cubic-bezier(.3, 1.6, .5, 1) 1.45s forwards,
    sparkleTwinkle 1.9s ease-in-out 1.95s infinite;
}

.sparkle-4 {
  top: 38%;
  left: -14px;
  width: 10px;
  height: 10px;
  fill: #ffb7ce;
  animation:
    sparklePop .45s cubic-bezier(.3, 1.6, .5, 1) 1.6s forwards,
    sparkleTwinkle 1.6s ease-in-out 2.05s infinite;
}

.sparkle-5 {
  top: -.4em;
  left: 40%;
  width: 11px;
  height: 11px;
  fill: #ffb7ce;
  animation:
    sparklePop .45s cubic-bezier(.3, 1.6, .5, 1) 1.75s forwards,
    sparkleTwinkle 2.2s ease-in-out 2.2s infinite;
}

.sparkle-6 {
  bottom: -.2em;
  left: 10%;
  width: 16px;
  height: 16px;
  animation:
    sparklePop .5s cubic-bezier(.3, 1.6, .5, 1) 1.9s forwards,
    sparkleTwinkle 2s ease-in-out 2.4s infinite;
}

@keyframes sparklePop {
  0% { opacity: 0; transform: scale(0) rotate(-15deg); }
  60% { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes sparkleTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .35; transform: scale(.7) rotate(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-line1,
  .hero-title em,
  .sparkle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------------- Outro CTA ---------------- */
/* Mismo lugar/estilo posicional que .hero (absolute, arriba de la
   escena), pero arranca invisible — el JS la revela cuando la Mac
   ya terminó de acomodarse en la bolsa (pack ≈ 1). */

.outro {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 150px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.outro-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.08;
  margin-bottom: 10px;
}

.outro-title strong { font-weight: 700; }

.outro-sub {
  font-size: clamp(17px, 2vw, 24px);
  color: #444;
  margin-bottom: clamp(20px, 3vh, 34px);
}

.outro-btn {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 500;
  padding: clamp(16px, 2.2vh, 22px) clamp(30px, 3.2vw, 44px);
  border-radius: 999px;
}

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

/* ---------------- Bag scene (scroll-driven) ---------------- */
/* .bag-scene is a tall track that gives the scroll "runway" needed
   to drive the animation. .bag-sticky pins itself to the viewport
   while the user scrolls through that runway, and script.js reads
   the scroll progress to move/rotate #macbookStage and to reveal
   stickers one by one once it's docked in the bag.

   Sequence:
   0.00–0.66  Mac stays perfectly CENTERED in the viewport while
              stickers land on it.
   0.66–0.72  short pause, fully-stickered Mac.
   0.72–1.00  Mac travels down into the bag.
*/

.bag-scene {
  position: relative;
  height: 560vh;
  background: radial-gradient(ellipse 120% 82% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 100%);
}

.bag-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 120% 82% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 100%);
}

/* Takes all the leftover vertical space below the hero. The Mac and
   the bag are centered/anchored inside THIS box, not the full
   viewport — that's what creates the gap under the title. */
.stage-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------- MacBook stage ---------------- */
/* top/left: 50% + translate(-50%,-50%) is the actual centering.
   .bag-sticky has a fixed height (100dvh) so this stays dead-center
   on every device, including mobile browsers with dynamic toolbars. */

.macbook-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(620px, 52vw);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  will-change: transform;
  opacity: 0;
  transition: opacity .35s ease;
}

.macbook-stage.is-ready {
  opacity: 1;
}

.macbook-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.macbook-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 1;
  width: 68%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 72%);
  transform: translateX(-50%);
  filter: blur(10px);
  pointer-events: none;
}

/* Stickers are positioned as %/px relative to #macbookStage, then
   nudged by --x/--y (scroll-in offset) and scaled by --s. JS drives
   all of this per animation frame, so transitions stay off. */

.sticker {
  position: absolute;
  width: var(--w);
  height: auto;
  transform: translate3d(
      calc(-50% + var(--x, 0px)),
      calc(-50% + var(--y, 0px)),
      0
    )
    rotate(var(--r, 0deg))
    scale(var(--s, 1));
  transition: none !important;
  will-change: transform, opacity;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.14));
}

.sticker.mode-fixed {
  z-index: var(--z, 5);
  opacity: 1;
}

.sticker.mode-scroll {
  z-index: var(--z, 6);
  opacity: 0;
}

/* ---------------- Bag ---------------- */

.bag-bg-img,
.bag-fg-img {
  position: absolute;
  left: 50%;
  bottom: -1vh;
  width: min(700px, 58vw);
  opacity: 0;
  transform: translate3d(-50%, 56vh, 0);
  transition: none !important;
  pointer-events: none;
  display: block;
  will-change: transform, opacity;
}

.bag-bg-img { z-index: 2; }
.bag-fg-img { z-index: 6; }

/* ---- "Haz scroll y descubre cómo" — SOLO MOBILE ---- */

.scroll-hint{
  display: none;
}

.scroll-hint-cta{
  position: relative;
  z-index: 50;
  color: var(--ink);
  font-size: clamp(30px, 8.6vw, 40px);
  line-height: 1.2;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 32px rgba(255,255,255,.7);
}

.scroll-hint-l1{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.56em;
}

.scroll-hint-cta em{
  display: block;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
}

/* =====================================================
   TRUST BAR (idéntico a style-mobile-fluid-v3.css)
   ===================================================== */

.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 (idéntico al real — requiere el
   revealObserver de script.js para que .reveal pase a
   .reveal.revealed cuando entra en viewport)
   ===================================================== */

.reveal{
  opacity: 0;

  transform: translateY(45px);

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

.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 (misma configuración/clases que
   style-mobile-fluid-v3.css, pero recalibrada: esta foto
   -mujer-macbook.png- tiene a la modelo del lado DERECHO,
   así que carpetas y texto van del lado IZQUIERDO — en la
   producción real es al revés porque la foto de allá tiene
   a la persona a la izquierda.)
   ===================================================== */

.idea-section{
  width: 100%;
  overflow: hidden;
  background: #e8e8e6;
}

.idea-inner{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  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;
}

.folder-item{
  position: absolute;
  width: 11.6cqw;
  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(--ink);
  font-size: 2.1cqw;
  font-weight: 700;
  line-height: 1;
}

.folder-photos{
  left: 12.0%;
  top: 16.3%;
  transition-delay: .05s;
}

.folder-stickers{
  left: 32.0%;
  top: 16.0%;
  transition-delay: .13s;
}

.folder-texts{
  left: 52.0%;
  top: 16.0%;
  transition-delay: .21s;
}

.folder-item.reveal{
  opacity: 0;
  transform: translate(-50%, calc(-50% + 45px));
}

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

.idea-text{
  position: absolute;
  left: 5.8%;
  top: 56.5%;
  width: 30.1%;
  text-align: left;
  z-index: 3;
  transition-delay: .18s;
}

.idea-title{
  margin: 0 0 1.6cqw;
  color: var(--ink);
  font-size: 5.4cqw;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

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

.idea-text.reveal{
  opacity: 0;
  transform: translateY(calc(-50% + 45px));
}

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

.idea-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  background: var(--pink);
  color: #fff;
  font-size: 1.8cqw;
  font-weight: 500;
  padding: 1cqw 1.8cqw;
  border-radius: 999px;
}

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

/* =====================================================
   VIDEO + CARACTERÍSTICAS (debajo de la sección idea)
   Caja blanca con borde rosa junto al video — tal cual
   la foto de referencia: NO es texto sobrepuesto en el
   video, es una tarjeta aparte a la derecha, con texto
   en negro.
   ===================================================== */

.macbook-info-section{
  width: 100%;
}

.macbook-info-inner{
  width: 100%;
}

.macbook-info-video-wrap{
  position: relative;
  width: 100%;
  line-height: 0;
  container-type: inline-size;
}

.video-el{
  display: block;
  width: 100%;
  height: auto;
}

.macbook-info-title{
  position: absolute;
  top: 7.0%;
  left: 71.8%;
  width: 26%;
  font-weight: 400;
  font-size: 4cqw;
  line-height: 1.15;
  color: var(--ink);
}

.macbook-info-title strong{
  font-weight: 800;
}

.macbook-info-item{
  display: flex;
  align-items: flex-start;
  gap: 1.2cqw;
  width: 30%;
}

.macbook-info-item.item-1{ position: absolute; top: 30.0%; left: 68.7%; }
.macbook-info-item.item-2{ position: absolute; top: 45.5%; left: 68.8%; }
.macbook-info-item.item-3{ position: absolute; top: 62.2%; left: 68.9%; }

.macbook-info-check{
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f5c6d3;
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-1 .macbook-info-check{ width: 2.9cqw; height: 2.9cqw; }
.item-2 .macbook-info-check{ width: 2.9cqw; height: 2.9cqw; }
.item-3 .macbook-info-check{ width: 2.87cqw; height: 2.87cqw; }

.macbook-info-check svg{
  width: 55%;
  height: 55%;
}

.macbook-info-item h3{
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4cqw;
  color: var(--ink);
}

.item-1 h3{ font-size: 1.6cqw; }
.item-2 h3{ font-size: 1.6cqw; }
.item-3 h3{ font-size: 1.58cqw; }

.macbook-info-item p{
  color: #333;
  line-height: 1.4;
}

.item-1 p{ font-size: 1.3cqw; }
.item-2 p{ font-size: 1.3cqw; }
.item-3 p{ font-size: 1.28cqw; }

.macbook-info-btn{
  position: absolute;
  top: 81.9%;
  left: 75.5%;
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 2.1cqw;
  padding: 1.9cqw 3.4cqw;
  border-radius: 999px;
  white-space: nowrap;
}

.macbook-info-title.reveal{ transition-delay: .05s; }
.macbook-info-item.item-1.reveal{ transition-delay: .15s; }
.macbook-info-item.item-2.reveal{ transition-delay: .25s; }
.macbook-info-item.item-3.reveal{ transition-delay: .35s; }
.macbook-info-btn.reveal{ transition-delay: .45s; }

/* ---- Mobile-only version (video arriba + tarjeta con 4 elementos) ---- */

.mi-mobile-section{ display: none; }

@media (max-width: 480px) {

  .macbook-info-section{ display: none; }

  .mi-mobile-section{
    display: block;
    padding: 0;
  }

  .mi-mobile-video-wrap{
    position: relative;
    width: 100%;
    line-height: 0;
    container-type: inline-size;
  }

  .mi-mobile-video{
    display: block;
    width: 100%;
    height: auto;
  }

  .mi-mobile-card{
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
  }

  .mi-mobile-grid{
    position: absolute;
    top: 71%;
    left: 4.8%;
    width: 92.1%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.4cqw;
    row-gap: 3.5cqw;
  }

  .mi-mobile-item{
    display: flex;
    align-items: flex-start;
    gap: 2cqw;
    min-width: 0;
    overflow: hidden;
  }

  .mi-mobile-check{
    flex: 0 0 auto;
    width: 6cqw;
    height: 6cqw;
    border-radius: 50%;
    background: #f5c6d3;
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mi-mobile-check svg{ width: 55%; height: 55%; }

  .mi-mobile-item h3{
    margin-bottom: .3cqw;
    font-size: 3cqw;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    text-shadow: 0 1px 6px rgba(255,255,255,.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mi-mobile-item p{
    font-size: 2.35cqw;
    line-height: 1.2;
    color: #333;
    text-shadow: 0 1px 6px rgba(255,255,255,.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mi-mobile-cta{
    width: 100%;
    background: #fff;
    padding: 0 14px 4px;
    display: flex;
    justify-content: center;
  }

  .mi-mobile-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pink);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 26px;
    border-radius: 999px;
  }
}

/* =====================================================
   NO SON CALCOMANÍAS (idéntico a style-mobile-fluid-v3.css
   — misma configuración, solo para esta sección)
   ===================================================== */

.quality-section{
  width: 100%;
  background: #fff;
  padding-top: clamp(24px, 4vw, 56px);
}

.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 (misma lógica de style-mobile-fluid-v3.css) ---- */

@media (max-width: 480px){

  .quality-section{
    padding-top: 14px;
  }

  .quality-inner{
    padding: 1.5cqw 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-top: 2.4cqw;
    margin-bottom: 0;
    border-radius: 3cqw;
  }

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

  .quality-cta-btn{
    margin-top: 3cqw;
    padding: 3cqw 6cqw;
    font-size: 3.8cqw;
  }

}

/* =====================================================
   CLIENTES FELICES (idéntico a style-mobile-fluid-v3.css
   — misma configuración, solo para esta sección. La única
   diferencia real: ahí usan iframes de Cloudinary Player
   con un hack de escala en JS; aquí me diste MP4 directos,
   así que son <video> normales con object-fit:cover — no
   hace falta el hack.)
   ===================================================== */

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

/* Este wrapper también lleva la clase .reveal (ver HTML), y esa
   clase anima opacity+transform al entrar en pantalla. El problema:
   aquí el wrapper es directamente el padre de un <video> que ya
   está reproduciéndose en loop, y animar su transform (+ el
   clip-path/overflow que ya trae) fuerza a WebKit a recomponer la
   capa del video justo cuando entra en viewport — en iPad eso puede
   dejar el video "congelado" después de esa única animación de
   entrada. Se conserva el fade de opacidad (así el efecto de
   aparición sigue viéndose) pero se anula el desplazamiento por
   transform SOLO en este wrapper, sin tocar el resto de los
   elementos .reveal de la página. */
.social-proof-video.reveal,
.social-proof-video.reveal.revealed{
  transform: none;
}

.social-proof-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Mobile (misma lógica de style-mobile-fluid-v3.css) ---- */

@media (max-width: 480px){

  .social-proof-inner{
    padding: .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: .8cqw;
    margin: 0 0 3cqw;
    padding: 0 2.5cqw;
    overflow: visible;
  }

  .social-proof-video{
    flex: 1 1 0;
    border-width: 1.5px;
  }

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

}

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

/* ---- Mobile (base en style-mobile-fluid-v3.css, texto más grande) ---- */

@media (max-width: 480px){

  .testimonial-bar{
    gap: 2cqw;
    margin: 0 5.5cqw;
    padding: 2.6cqw 3.4cqw;
    border-radius: 3cqw;
  }

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

  .testimonial-text{
    margin-bottom: 1cqw;
    font-size: 3.6cqw;
  }

  .testimonial-meta{
    gap: 1.6cqw;
  }

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

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

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

  .testimonial-next-btn{
    width: 5.2cqw;
    height: 5.2cqw;
    box-shadow: inset 0 0 0 1.3px #fff;
  }

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

}

/* =====================================================
   APOYO CON EL DISEÑO (idéntico a style-mobile-fluid-v3.css
   — misma configuración, solo para esta sección. Incluye
   la clase base .btn/.btn-primary que usa el botón "Ir al
   editor", porque tu código real la define aparte y este
   proyecto no la tenía todavía.)
   ===================================================== */

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

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

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

/* ---------- BRILLO + ESTRELLITAS EN LOS BOTONES ROSAS ----------
   Mismo efecto que en la landing de las fundas: pulso de
   box-shadow + 4 estrellitas destellando en distintas esquinas
   y tiempos. Se aplica a los 6 botones rosas de esta landing
   (idea-btn / dual-cta-btn vía .btn-primary, quality-cta-btn,
   macbook-info-btn, mi-mobile-btn, outro-btn). Corre por
   opacity/transform/box-shadow, no toca layout. Se desactiva
   con prefers-reduced-motion. */
.btn-primary,
.quality-cta-btn,
.mi-mobile-btn,
.outro-btn{
  position: relative;
  isolation: isolate;

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

.macbook-info-btn{
  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,
.quality-cta-btn::before,
.macbook-info-btn::before,
.mi-mobile-btn::before,
.outro-btn::before,
.btn-primary::after,
.quality-cta-btn::after,
.macbook-info-btn::after,
.mi-mobile-btn::after,
.outro-btn::after{
  content: '';
  position: absolute;

  width: .5em;
  height: .5em;

  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,
.quality-cta-btn::before,
.macbook-info-btn::before,
.mi-mobile-btn::before,
.outro-btn::before{
  top: 14%;
  left: 10%;
}

.btn-primary::after,
.quality-cta-btn::after,
.macbook-info-btn::after,
.mi-mobile-btn::after,
.outro-btn::after{
  width: .35em;
  height: .35em;

  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,
  .quality-cta-btn,
  .macbook-info-btn,
  .mi-mobile-btn,
  .outro-btn,
  .btn-primary::before,
  .quality-cta-btn::before,
  .macbook-info-btn::before,
  .mi-mobile-btn::before,
  .outro-btn::before,
  .btn-primary::after,
  .quality-cta-btn::after,
  .macbook-info-btn::after,
  .mi-mobile-btn::after,
  .outro-btn::after,
  .cta-sparkle{
    animation: none;
  }
}

.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 (idéntico a style-mobile-fluid-v3.css) ---- */

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

}

/* ============================================================
   RESPONSIVE — HERO / HEADER / BAG SCENE
   ------------------------------------------------------------
   Cascada mobile-last: cada breakpoint hereda del anterior y
   solo sobreescribe lo que cambia. Esta sección reemplaza al
   historial de parches iterativos (mismos valores finales,
   verificados uno por uno contra el archivo original — sin
   los pasos intermedios que ya quedaban sobreescritos).
   ============================================================ */

@media (max-width: 1280px) {
  :root { --header-h: 86px; }
  .site-header { padding: 0 32px; }
  .nav-left, .nav-right { gap: 24px; }
  .nav-link { font-size: 12px; }
  .logo img { height: 30px; }

  .hero { padding: 24px 20px 42px; }

  .hero-title {
    font-size: clamp(58px, 7.4vw, 96px);
    max-width: 1180px;
    line-height: 1.01;
  }

  .macbook-stage { width: min(560px, 60vw); }
  .bag-bg-img, .bag-fg-img { width: min(640px, 68vw); }
}

@media (max-width: 1024px) {
  :root { --header-h: 78px; }
  .site-header { padding: 0 24px; }
  .nav-left, .nav-right { gap: 18px; }
  .nav-link { font-size: 11px; letter-spacing: .03em; }
  .logo img { height: 28px; }

  .hero { padding: 18px 16px 28px; }

  .hero-title {
    font-size: clamp(44px, 6.4vw, 70px);
    max-width: 920px;
    white-space: normal;
    line-height: 1.02;
  }

  .hero-line1 {
    display: block;
    margin-bottom: .05em;
  }

  .macbook-stage { width: min(500px, 68vw); }
  .bag-bg-img, .bag-fg-img { width: min(580px, 76vw); }

  .outro { padding-top: 86px; }

  .outro-title {
    font-size: clamp(36px, 6vw, 60px);
    line-height: 1.1;
  }

  .outro-sub {
    font-size: clamp(16px, 2vw, 22px);
    margin-bottom: 22px;
  }

  .outro-btn {
    font-size: 16px;
    padding: 14px 28px;
  }
}

@media (max-width: 820px) {
  :root { --header-h: 70px; }

  .nav-link { font-size: 10px; letter-spacing: .02em; }

  .nav-right .nav-link:last-child { display: none; }

  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 12px;
    column-gap: 8px;
  }

  .nav-left,
  .nav-right {
    display: flex;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
  }

  .nav-left { justify-content: flex-start; }
  .nav-right { justify-content: flex-end; }

  .nav-left .nav-link,
  .nav-right .nav-link,
  .nav-left .nav-link:not(.bold),
  .nav-right .nav-link:last-child {
    display: inline-block;
    font-size: clamp(8px, 1.25vw, 10px);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .logo img { height: clamp(22px, 3.4vw, 27px); }

  .hero { padding: 12px 14px 22px; }

  .hero-title {
    font-size: clamp(52px, 8.2vw, 72px);
    max-width: 94vw;
    line-height: .98;
  }

  .sparkle-2 { right: 14%; }
  .sparkle-4 { left: -10px; }
  .sparkle-6 { left: 6%; }

  .macbook-stage { width: min(440px, 76vw); }
  .bag-bg-img, .bag-fg-img { width: min(530px, 88vw); }

  .outro {
    padding-top: 70px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .outro-title {
    max-width: 92vw;
    font-size: clamp(32px, 7vw, 48px);
  }
}

@media (max-height: 760px) and (max-width: 1024px) {
  .hero { padding-bottom: 16px; }
  .outro { padding-top: 62px; }
  .macbook-stage { width: min(420px, 64vw); }
  .bag-bg-img, .bag-fg-img { width: min(500px, 78vw); }
}

@media (max-width: 640px) {
  :root {
    --header-h: 58px;
    --mobile-bg-x: 49%;
    --mobile-bg-y: 50%;
    --mobile-bg-zoom: cover;
  }

  .site-header {
    padding: 0 7px;
    column-gap: 5px;
    min-height: var(--header-h);
  }

  .nav-left,
  .nav-right {
    gap: 6px;
  }

  .nav-left { gap: 0; }

  .nav-left .nav-link:not(.bold),
  .nav-right .nav-link {
    display: none;
  }

  .nav-left .nav-link,
  .nav-right .nav-link,
  .nav-left .nav-link:not(.bold),
  .nav-right .nav-link:last-child,
  .nav-left .nav-link.bold {
    display: inline-block;
    font-size: clamp(6.8px, 1.55vw, 8.5px);
    letter-spacing: -.01em;
  }

  .nav-left .nav-link.bold { font-size: 11px; }

  .logo img { height: clamp(20px, 4vw, 24px); }

  /* Sube ligeramente todo el bloque del título inicial. */
  .hero {
    padding: 34px 12px 8px;
    padding-top: 30px;
    transform: translateY(-14px);
  }

  .hero-title {
    font-size: clamp(50px, 11vw, 66px);
    line-height: .95;
    max-width: 96vw;
    margin-bottom: 0;
  }

  /* El desvío a Montserrat se probó y se revirtió; el resultado
     final es el mismo estilo heredado de .hero-title (Times New
     Roman), solo cambia el display y el margen respecto a 1024px. */
  .hero-line1 {
    display: inline-block;
    margin-bottom: .04em;
  }

  .sparkle-1, .sparkle-2, .sparkle-3,
  .sparkle-4, .sparkle-5, .sparkle-6 {
    transform-origin: center center;
  }

  .macbook-stage {
    top: 52.2%;
    width: min(430px, 92vw);
  }

  .bag-bg-img, .bag-fg-img { width: min(560px, 108vw); }

  .outro {
    padding-top: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .outro-title {
    font-size: clamp(34px, 10vw, 50px);
    line-height: 1.02;
    max-width: 92vw;
  }

  .outro-sub {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .outro-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  /* Track de scroll más corto en móvil (era 560vh): las
     proporciones internas de la animación son % de esta altura,
     así que se mantienen exactamente iguales — solo se recorre
     más rápido (ver script.js updateScene). Único fondo real
     de la Sección 1 en mobile es la imagen de referencia; nada
     de background-attachment:fixed (en iOS ese cálculo no
     siempre usa el viewport real en un elemento tan alto). */
  .bag-scene {
    height: 185svh;
    background-image: url('/images/fondo-celular.png');
    background-size: var(--mobile-bg-zoom) !important;
    background-position: var(--mobile-bg-x) var(--mobile-bg-y) !important;
    background-repeat: no-repeat;
  }

  .bag-sticky {
    height: 100dvh;
    min-height: 100svh;
    max-height: none;
    background-image: url('/images/fondo-celular.png');
    background-size: cover;
    background-position: 49% 50%;
    background-repeat: no-repeat;
  }

  /* Revelados de las demás secciones más rápidos en móvil. */
  .reveal {
    transition-duration: .55s !important;
  }

  /* Bloquea el toque directo sobre el video (el tapLayer de script.js
     se encarga de recibirlo) — SOLO en este rango de ancho. En iPad
     el video debe seguir siendo tocable directamente (ver JS: ahí es
     donde vive el respaldo de autoplay), así que este bloqueo no se
     extiende fuera de este media query. */
  video {
    pointer-events: none;
  }

  .scroll-hint-cta em { font-size: 0.78em; }
}

@media (max-width: 480px) {
  :root { --header-h: 64px; }

  /* ---- Sección IDEA: solo mobile, cambia encuadre y textos ---- */
  .idea-inner { aspect-ratio: 882 / 816; }

  .folder-item { width: 17cqw; }

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

  .folder-photos { left: 12.7%; top: 13%; }
  .folder-stickers { left: 37.6%; top: 12.8%; }
  .folder-texts { left: 62.5%; top: 12.8%; }

  .idea-text {
    left: 4%;
    top: 41%;
    width: 88%;
  }

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

  .idea-title {
    font-size: 7.2cqw;
    margin-bottom: 2cqw;
  }

  .idea-btn {
    font-size: 3cqw;
    padding: 1.6cqw 3.2cqw;
  }

  /* ---- Header / hero / mac / outro ---- */
  .site-header {
    padding: 0 5px;
    column-gap: 3px;
    background: #fff;
  }

  .nav-left,
  .nav-right {
    display: none;
  }

  .logo { grid-column: 2; }

  .logo img {
    height: clamp(24px, 6vw, 30px);
    margin-top: 12px;
  }

  .macbook-stage { width: min(460px, 96vw); }

  .bag-bg-img, .bag-fg-img { width: min(460px, 96vw); }

  .scroll-hint {
    display: block;
    position: absolute;
    left: 50%;
    top: 58%;
    bottom: auto;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 20px;
    text-align: center;
    z-index: 3;
    isolation: isolate;
    pointer-events: none;
  }

  .scroll-hint-cta em { font-size: 0.74em; }

  .outro-title {
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1;
  }

  .outro-sub { margin-bottom: 12px; }
}

@media (max-height: 760px) and (max-width: 640px) {
  .hero { padding-top: 12px; }

  .hero-title {
    font-size: clamp(34px, 8.2vw, 44px);
  }

  .macbook-stage {
    top: 58%;
    width: min(460px, 96vw);
  }

  .bag-bg-img, .bag-fg-img { width: min(460px, 96vw); }
}

/* Igual que arriba pero para el rango 481–640px: el texto y la
   posición de la Mac vuelven a su valor normal de este breakpoint
   incluso en pantallas bajas. */
@media (max-width: 640px) {
  .hero { padding-top: 30px; }

  .hero-title {
    font-size: clamp(50px, 11vw, 66px);
    line-height: .95;
    max-width: 96vw;
    margin-bottom: 0;
  }

  .macbook-stage { top: 52.2%; }
}

/* El texto del hero conserva su tamaño compacto de ≤480px incluso
   en pantallas bajas (iPhone en horizontal, etc.) — solo la Mac y
   la bolsa usan la posición especial de altura reducida de arriba. */
@media (max-width: 480px) {
  .hero {
    padding-top: 56px;
    padding-bottom: 0;
    transform: translateY(-16px);
  }

  .hero-title {
    font-size: clamp(56px, 14vw, 72px);
    max-width: 97vw;
    line-height: .93;
  }

  .macbook-stage { top: 52.6%; }
}

/* =====================================================
   LARGE SCREENS — mantiene el CTA final claramente arriba
   de la Mac. No afecta tablet/mobile (min-width: 1025px).
   ===================================================== */
/* ---------------- Sección 1: fondo propio para escritorio/pantallas grandes ---------------- */
@media (min-width: 641px) {
  .bag-scene,
  .bag-sticky {
    background-image: url('/images/fondo-escritorio.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1025px) {
  .outro {
    padding-top: clamp(46px, 5.4vh, 64px);
  }

  .outro-title {
    font-size: clamp(46px, 5.8vw, 78px);
    line-height: 1.04;
    margin-bottom: 10px;
  }

  .outro-sub {
    font-size: clamp(17px, 1.9vw, 23px);
    margin-bottom: clamp(18px, 2.4vh, 28px);
  }

  .outro-btn {
    font-size: clamp(17px, 1.9vw, 23px);
    padding: clamp(16px, 2vh, 22px) clamp(34px, 3.4vw, 48px);
  }
}

/* ============================================================
   IPHONE / SAFARI MÓVIL — FULLSCREEN EDGE-TO-EDGE
   ------------------------------------------------------------
   El fondo (html/body, arriba del archivo) ya llega solo hasta
   los 4 bordes físicos gracias a viewport-fit=cover + min-height
   en dvh — no hace falta nada extra para "pintar" detrás de las
   barras translúcidas. Lo único que sí puede quedar tapado por
   la Dynamic Island / notch es CONTENIDO real: el logo/nav del
   header, pegado al borde superior en teléfono.

   La solución agranda el header con el alto exacto del inset
   (no le mete padding que encoja su contenido) — el logo se ve
   igual de grande y en el mismo lugar relativo dentro de su
   caja, solo que la caja entera se corre hacia abajo en equipos
   con notch. Sin notch (o en Android/desktop) env(...) vale 0px
   y esta regla no cambia nada visualmente.

   Detección: -webkit-touch-callout solo pasa en motores WebKit
   de iOS — no dispara en Chrome/Firefox de Android ni escritorio.
   Combinado con max-width:480px para tocar solo el layout de
   teléfono, nunca tablet/escritorio.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 480px) {
    .site-header {
      height: calc(var(--header-h) + env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);
      /* max() = nunca menor a lo que ya había; solo crece si el
         dispositivo pide más aire a los lados (p. ej. horizontal,
         donde el notch puede quedar a un costado). */
      padding-left: max(5px, env(safe-area-inset-left));
      padding-right: max(5px, env(safe-area-inset-right));
    }
  }
}

/* ============================================================
   AJUSTE EXCLUSIVO TELÉFONOS 360–430 px
   No modifica escritorio ni tablet. Corrige un conflicto de
   z-index/isolation propio de ese rango de anchos.
   ============================================================ */
@media (min-width: 280px) and (max-width: 430px) {
  .macbook-stage {
    z-index: 4;
    isolation: isolate;
  }

  .macbook-stage::before {
    z-index: 1;
  }

  .macbook-img {
    z-index: 2;
  }

  .sticker.mode-fixed,
  .sticker.mode-scroll {
    z-index: var(--z, 5);
  }

  .scroll-hint {
    top: 66%;
    z-index: 8;
    isolation: auto;
  }

  .scroll-hint-cta {
    position: relative;
    z-index: 1;
  }

  .scroll-hint-l1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
  }

  .bag-bg-img,
  .bag-fg-img {
    bottom: -1.8vh;
  }
}

/* ============================================================
   iOS SAFARI — SECCIÓN 1 CONTINUA / EFECTO CRISTAL
   Solo móvil. La imagen permanece en la escena real y el sticky
   queda transparente para que Safari pueda verla detrás de su
   interfaz translúcida. Desktop no se modifica.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    html,
    body {
      background: var(--scene-bg);
    }

    .site-header {
      background: var(--scene-bg);
    }

    .bag-scene {
      height: 220svh;
      background-image: url('/images/fondo-celular.png');
      background-size: cover;
      background-position: 49% 50%;
      background-repeat: no-repeat;
      overflow: visible;
    }

    .bag-sticky {
      top: 0;
      height: 100dvh;
      min-height: 100svh;
      max-height: none;
      overflow: hidden;

      /* CLAVE: no crear una segunda capa opaca.
         Safari ve la escena real por detrás de su barra. */
      background: transparent;

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

    .trust-bar-section {
      margin-top: 0;
    }
  }
}

/* ============================================================
   SAFARI iPHONE — BARRA DEL NAVEGADOR NEGRA
   ------------------------------------------------------------
   html ya fuerza background:#000 !important arriba del archivo
   (aplica en todos los navegadores). Este bloque es un refuerzo
   específico para el motor WebKit de iOS — se deja por separado
   a propósito como respaldo, en caso de que Safari necesite el
   valor re-declarado dentro de su propio feature query.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  html {
    background: #000 !important;
  }
}

/* El track de scroll definitivo en móvil es 185svh (ver bloque
   640px arriba); esto aplica también dentro de Safari iOS, cuyo
   bloque de arriba usa 220svh como base antes de este ajuste. */
@media (max-width: 640px) {
  .bag-scene { height: 185svh; }
}

/* iPad (y tablets táctiles en general, sin importar orientación):
   mismo ritmo de scroll ágil que celular. Se detecta por hover:none
   en vez de por ancho fijo, para no afectar ventanas angostas de
   escritorio (que sí tienen mouse/hover) ni el resto del layout
   tablet (que sigue usando los breakpoints de 1024/820px). */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
  .bag-scene { height: 185svh; }
}

/* iPad horizontal: el layout general ya está bien, solo el bloque
   "Take your style everywhere / Protección completa..." queda con
   demasiado aire arriba — se empuja más abajo solo en este caso
   (tablet táctil + orientación horizontal), sin tocar desktop. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (max-width: 1366px) {
  .outro {
    padding-top: clamp(120px, 18vh, 200px);
  }
}

/* ============================================================
   iPad VERTICAL — Sección 1 (hasta la bolsa) = mismo acomodo
   que iPhone, pero responsivo al ancho real de iPad (los valores
   ya usan clamp()/vw, igual que en el celular, así que escalan
   solos en vez de quedar clavados en tamaño de teléfono).

   Ojo: SOLO esta sección. Nada de header/nav, ni otras secciones
   de la página (idea, quality, social-proof, etc.) — esas se
   quedan exactamente como ya estaban para iPad. Horizontal
   tampoco se toca (ver bloque de arriba, ya afinado aparte).

   Se detecta por hover:none + pointer:coarse + orientation:portrait,
   igual criterio que el resto de los ajustes táctiles de iPad.
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 641px) and (max-width: 1366px) {

  .hero {
    padding: 56px 12px 0;
    transform: translateY(-16px);
  }

  .hero-title {
    font-size: clamp(56px, 14vw, 72px);
    line-height: .93;
    max-width: 97vw;
    margin-bottom: 0;
  }

  .hero-line1 {
    display: inline-block;
    margin-bottom: .04em;
  }

  .sparkle-1, .sparkle-2, .sparkle-3,
  .sparkle-4, .sparkle-5, .sparkle-6 {
    transform-origin: center center;
  }

  .macbook-stage {
    top: 52.6%;
    width: min(600px, 108vw);
  }

  .bag-bg-img, .bag-fg-img { width: min(600px, 112vw); }

  .scroll-hint {
    display: block;
    position: absolute;
    left: 50%;
    top: 66%;
    bottom: auto;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 20px;
    text-align: center;
    z-index: 3;
    isolation: isolate;
    pointer-events: none;
  }

  .scroll-hint-cta em { font-size: 0.74em; }

  .outro {
    padding-top: 130px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .outro-title {
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1;
    max-width: 92vw;
  }

  .outro-sub {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .outro-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  /* FLUIDEZ — dos causas muy probables del traqueteo en iPad:

     1) .bag-scene mide ~185svh de alto (más de 2000px reales en
        iPad) y antes tenía la MISMA foto pesada de fondo que
        .bag-sticky pintada encima de esa superficie gigante,
        duplicando el trabajo de pintado en cada frame de scroll.
        .bag-sticky (100dvh, lo que realmente se ve) es la única
        que necesita la foto; .bag-scene solo necesita un color de
        respaldo barato para el rebote elástico de iOS en los bordes.

     2) Los 26 stickers llevan filter:drop-shadow, que es de los
        efectos más caros de compositar — multiplicado por 26
        elementos que además cambian transform en cada frame de
        scroll, es un cuello de botella clásico en iPad. Se
        desactiva solo aquí; en el resto de vistas se queda igual. */
  .bag-scene {
    background-image: none;
    background: radial-gradient(ellipse 120% 82% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 100%);
  }

  .bag-sticky {
    height: 100dvh;
    min-height: 100svh;
    max-height: none;
    background-image: url('/images/fondo-ipad.png');
    background-size: cover;
    background-position: 49% 50%;
    background-repeat: no-repeat;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .macbook-stage {
    will-change: transform;
  }

  .sticker {
    filter: none;
  }
}

/* ============================================================
   SAFARI 26 (Liquid Glass) — barras translúcidas
   ------------------------------------------------------------
   Antes había aquí un truco que forzaba un color plano fijo
   para "teñir" la barra de Safari. Se quitó a propósito: lo que
   se quiere es el comportamiento nativo edge-to-edge, donde la
   barra translúcida de Safari muestra el contenido real a
   través suyo. Con html/body ya cubriendo los 4 bordes físicos
   no hace falta ningún parche extra.
   ============================================================ */

/* ============================================================
   iPadOS SAFARI — FULLSCREEN EDGE-TO-EDGE / LIQUID GLASS
   ------------------------------------------------------------
   Replica en iPad la arquitectura que ya funciona en iPhone:
   la superficie visual pertenece a .bag-scene y el sticky queda
   transparente. Así Safari puede componer su barra translúcida
   sobre el contenido real, en vez de encontrar una capa opaca.

   Solo afecta iPad/tablets táctiles entre 641px y 1366px.
   No cambia desktop ni la composición/posiciones del layout.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
    html,
    body {
      width: 100%;
      min-height: 100%;
      background: var(--scene-bg);
    }

    .bag-scene {
      min-height: 185svh;
      overflow: visible;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 49% 50%;
    }

    .bag-sticky {
      top: 0;
      height: 100vh;
      height: 100svh;
      height: 100dvh;
      min-height: 100svh;
      max-height: none;
      overflow: hidden;

      /* Clave del efecto: Safari ve .bag-scene a través del sticky. */
      background: transparent !important;
      background-image: none !important;

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

    .trust-bar-section {
      margin-top: 0;
    }
  }

  /* Conserva exactamente el fondo diseñado para iPad vertical,
     pero ahora colocado en la escena real y no en la capa sticky. */
  @media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 641px) and (max-width: 1366px) {
    .bag-scene {
      background-image: url('/images/fondo-ipad.png');
      background-color: var(--scene-bg);
    }
  }
}

/* ============================================================
   iPad — composición más ligera sin tocar videos ni layout
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
  .bag-sticky,
  .stage-area,
  .macbook-stage {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* La sombra difuminada inferior obliga a repintar una superficie
     grande mientras la Mac se transforma. En iPad usamos una versión
     más barata y visualmente equivalente. */
  .macbook-stage::before {
    filter: none;
    opacity: .72;
  }

  /* Una vez oculto el título, sus animaciones infinitas dejan de
     gastar composición GPU aunque el nodo siga dentro del sticky. */
  .hero[style*="visibility: hidden"] .hero-title em,
  .hero[style*="visibility: hidden"] .sparkle {
    animation-play-state: paused !important;
  }
}