/* =========================================================================
   Fachada Digital — página de marca
   Celular primero (375px) y después compu. Colores exactos del logo (60-30-10).
   ========================================================================= */
:root {
  --fondo: #ECF0F9;
  --marino: #121E37;
  --azul: #426AC4;
  --azul-hover: #3559AE;
  --azul-claro: #DCE5F7;
  --texto-suave: #4A5670;
  --blanco: #FFFFFF;
  --linea: #D7DEEC;
  --whatsapp: #25D366;
  --sombra-suave: 0 24px 60px -30px rgba(18, 30, 55, .35);
  --radio: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--marino);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; /* clip no rompe el celular fijo (sticky) */
}
html { overflow-x: hidden; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--azul); color: #fff; }

.contenedor { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Fondo "aurora": luces suaves que se mueven lento ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle, rgba(66,106,196,.30), rgba(66,106,196,0) 68%);
  will-change: transform;
}
.aurora span:nth-child(1) { width: 90vmax; height: 90vmax; left: -40vmax; top: -45vmax; animation: flotar 26s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { width: 70vmax; height: 70vmax; right: -35vmax; top: 20vh; background: radial-gradient(circle, rgba(140,170,230,.35), rgba(140,170,230,0) 68%); animation: flotar 32s ease-in-out infinite alternate-reverse; }
.aurora span:nth-child(3) { width: 60vmax; height: 60vmax; left: 10vw; bottom: -40vmax; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 65%); animation: flotar 38s ease-in-out infinite alternate; }
@keyframes flotar { to { transform: translate3d(8vw, 6vh, 0) scale(1.08); } }

/* ---------- Línea de progreso ---------- */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Barra (aparece al bajar) ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: rgba(236, 240, 249, .78);
  backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid rgba(18, 30, 55, .07);
  transform: translateY(-105%); transition: transform .45s var(--ease);
}
.barra.visible { transform: translateY(0); }
.barra .contenedor { display: flex; align-items: center; gap: 12px; height: 60px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.marca img { width: 30px; height: 30px; border-radius: 8px; }
.barra .marca span { display: none; }
.barra-links { display: none; gap: 26px; margin-left: 28px; font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.barra-links a { text-decoration: none; transition: color .2s; }
.barra-links a:hover { color: var(--marino); }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.entrar { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--texto-suave); }
.entrar:hover { color: var(--marino); }
.btn-chico { background: var(--azul); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 10px; transition: background .2s, transform .2s; }
.btn-chico:hover { background: var(--azul-hover); transform: translateY(-1px); }

/* ---------- Botones ---------- */
.btn-principal {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--azul); color: #fff; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 16px; line-height: 1.3; padding: 17px 22px; border-radius: 14px;
  box-shadow: 0 14px 30px -12px rgba(66, 106, 196, .8), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn-principal::after { /* brillo que cruza el botón */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%);
  transform: translateX(-120%); animation: brillo 4.5s var(--ease) infinite;
}
@keyframes brillo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-principal:hover { background: var(--azul-hover); transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(66,106,196,.9); }
.btn-principal svg { width: 20px; height: 20px; flex: none; }
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--azul); color: var(--azul); text-decoration: none; font-weight: 700;
  font-size: 15px; padding: 12px 18px; border-radius: 12px; transition: background .2s, transform .2s;
}
.btn-secundario:hover { background: rgba(66,106,196,.08); transform: translateY(-1px); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--azul);
  background: rgba(66, 106, 196, .10); padding: 7px 12px; border-radius: 999px;
}
.ventanita { width: 7px; height: 10px; border-radius: 2px; background: var(--azul); }

/* ---------- Tarjeta de Wallet (réplica fiel de la plantilla real) ---------- */
.pase {
  --p-fondo: #E8EFF7; --p-acento: #1D3A60;
  background: var(--p-fondo); color: var(--p-acento);
  border-radius: 13px; overflow: hidden; width: 100%;
  font-family: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  box-shadow: 0 18px 40px -22px rgba(18,30,55,.55), 0 0 0 .5px rgba(18,30,55,.12);
}
.pase { container-type: inline-size; }
/* Todo dentro de la tarjeta se mide en "cqw" (% del ancho de la tarjeta): así se ve
   igual de proporcionada en el celular grande, en la galería o en miniatura. */
.pase-cabeza { display: flex; align-items: center; padding: 3.4cqw 3.8cqw 2.6cqw; }
.pase-logo { height: 9.4cqw; width: auto; max-width: 62%; object-fit: contain; object-position: left center; }
.pase-franja { position: relative; aspect-ratio: 375 / 144; }
.pase-franja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.pase-franja img.siguiente { opacity: 0; }
.pase.con-sello .pase-franja img.siguiente { opacity: 1; }
.pase-campos { display: flex; justify-content: space-between; gap: 3cqw; padding: 3.2cqw 3.8cqw 1cqw; }
.pase-campos small { display: block; font-size: 2.8cqw; font-weight: 600; letter-spacing: .02em; opacity: .95; white-space: nowrap; }
.pase-campos b { display: block; font-size: 5cqw; font-weight: 500; margin-top: .3cqw; white-space: nowrap; }
.pase-campos .der { text-align: right; }
.pase-qr { display: grid; justify-items: center; gap: 1.6cqw; padding: 3.8cqw 0 4.4cqw; }
.pase-qr > span:first-child { background: #fff; padding: 2.5cqw; border-radius: 1.8cqw; width: 37%; }
.pase-qr small { font-size: 2.8cqw; opacity: .8; }
.mini-pase { border-radius: 8px; }
.pase-oscuro .pase-campos small, .pase-oscuro .pase-qr small { opacity: .85; }

/* ---------- Celular genérico ---------- */
.celular {
  position: relative; width: min(290px, 78vw); padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg, #1d2a48, var(--marino) 40%);
  box-shadow: 0 50px 90px -40px rgba(18, 30, 55, .7), inset 0 0 0 1.5px #2F3E62;
}
.pantalla { position: relative; border-radius: 37px; overflow: hidden; background: #F2F3F7; aspect-ratio: 9 / 19.2; }
.camara { position: absolute; z-index: 5; top: 12px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #070C18; }
.wallet { position: absolute; inset: 0; padding: 38px 12px 12px; display: flex; flex-direction: column; }
.wallet-titulo { font-family: -apple-system, system-ui, sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -.02em; margin: 0 2px 10px; color: #111; }
.pila { display: grid; }
.pila .pestana {
  height: 34px; border-radius: 12px 12px 0 0; margin-bottom: -10px; padding: 7px 11px;
  display: flex; align-items: flex-start; box-shadow: 0 -1px 0 rgba(0,0,0,.05);
}
.pila .pestana img { height: 17px; width: auto; }
.pila .pase { position: relative; }
.aviso-sello {
  position: absolute; z-index: 6; left: 50%; bottom: 13%; transform: translate(-50%, 10px) scale(.92);
  background: var(--marino); color: #fff; font-size: 12px; font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif;
  padding: 8px 13px; border-radius: 999px; opacity: 0; pointer-events: none; white-space: nowrap;
  box-shadow: 0 10px 22px -8px rgba(18,30,55,.6); transition: opacity .35s, transform .45s var(--ease);
}
.aviso-sello.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Portada ---------- */
.portada { position: relative; padding: 22px 0 70px; overflow-x: clip; }
.portada .marca { font-size: 16px; }
.portada-grid { display: grid; gap: 50px; margin-top: 42px; }
h1 { margin: 18px 0 0; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(2.5rem, 11vw, 4.6rem); }
h1 .acento { color: var(--azul); display: block; }
.palabra { display: inline-block; }
.subtitulo { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--texto-suave); max-width: 520px; }
.acciones { margin-top: 30px; display: grid; gap: 14px; }
.enlace-dudas { justify-self: center; font-size: 15px; font-weight: 600; color: var(--marino); text-decoration: none; }
.enlace-dudas:hover { text-decoration: underline; text-underline-offset: 4px; }
.micro { margin: 18px 0 0; display: flex; justify-content: center; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); }
.micro span { display: inline-flex; align-items: center; gap: 6px; }
.micro svg { width: 15px; height: 15px; color: var(--azul); }
.visual { position: relative; display: flex; justify-content: center; }
.visual .celular { transform: rotate(-3deg); }
.visual::before { /* halo detrás del celular */
  content: ""; position: absolute; inset: 8% 5%; border-radius: 50%;
  background: radial-gradient(circle, rgba(66,106,196,.35), rgba(66,106,196,0) 65%); filter: blur(10px);
}

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 72px 0; }
.seccion h2 { margin: 0; font-size: clamp(1.9rem, 8vw, 3.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.intro-seccion { max-width: 680px; }
.intro-seccion .etiqueta { margin-bottom: 16px; }
.texto-seccion { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--texto-suave); }
.panel { background: rgba(255,255,255,.82); border: 1px solid rgba(215,222,236,.9); border-radius: var(--radio); padding: 24px 20px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lista-ventanas { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.lista-ventanas li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.lista-ventanas li::before { content: ""; flex: none; width: 10px; height: 14px; border-radius: 3px; margin-top: 5px; background: var(--azul); box-shadow: 0 0 0 4px rgba(66,106,196,.12); }
.centrado { text-align: center; }
.accion-seccion { margin-top: 30px; display: grid; }

/* Aparición al llegar (solo con JavaScript activo) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .revelar.visto { opacity: 1; transform: none; }

/* ---------- 3. Giros en cinta ---------- */
.cinta { margin-top: 30px; display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-fila { display: flex; gap: 12px; width: max-content; animation: desliza 34s linear infinite; }
.cinta-fila.reversa { animation-direction: reverse; animation-duration: 40s; }
@keyframes desliza { to { transform: translateX(-50%); } }
.giro { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 10px 20px 10px 10px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.giro-icono { width: 40px; height: 40px; border-radius: 50%; background: rgba(66,106,196,.10); display: grid; place-items: center; color: var(--azul); }
.giro-icono svg { width: 20px; height: 20px; }
.giros-nota { margin: 26px 0 0; color: var(--texto-suave); font-size: 16px; }
.giros-enlace { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--azul); text-decoration: none; }
.giros-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 4. El problema: texto que se "enciende" al bajar ---------- */
.problema-grid { display: grid; gap: 30px; }
.texto-encendible { margin: 18px 0 0; font-size: clamp(1.35rem, 5.6vw, 2rem); line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.texto-encendible .p { color: rgba(18,30,55,.18); transition: color .2s; }
.texto-encendible .p.on { color: var(--marino); }
.no-anim .texto-encendible .p { color: var(--marino); }
.problema-giro { font-weight: 800; font-size: 18px; margin: 0 0 18px; letter-spacing: -.01em; }

/* ---------- 5. Cómo funciona: historia con celular fijo ---------- */
.historia { margin-top: 34px; display: grid; }
.historia-cel {
  position: sticky; top: 60px; z-index: 2; display: flex; justify-content: center;
  margin: 0 -20px; padding: 10px 20px 14px; background: var(--fondo); /* tapa el texto que pasa por debajo */
}
.historia-cel::after { /* los pasos se desvanecen al pasar por debajo del celular */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 44px;
  background: linear-gradient(var(--fondo), rgba(236,240,249,0)); pointer-events: none;
}
.historia-cel .celular { width: min(196px, 52vw); border-radius: 34px; padding: 8px; }
.historia-cel .pantalla { border-radius: 29px; }
.historia-pasos { position: relative; z-index: 1; display: grid; gap: 22vh; padding: 12vh 0 18vh; }
.paso { transition: opacity .5s, transform .5s var(--ease); opacity: .35; transform: scale(.98); }
.paso.activo { opacity: 1; transform: none; }
.no-anim .paso { opacity: 1; transform: none; }
.mini-ventanas { display: flex; gap: 6px; margin-bottom: 10px; }
.mini-ventanas span { width: 13px; height: 18px; border-radius: 4px; background: rgba(66,106,196,.16); transition: background .4s, transform .4s; }
.mini-ventanas span.on { background: var(--azul); transform: translateY(-1px); }
.paso-num { font-size: 13px; font-weight: 800; color: var(--azul); letter-spacing: .05em; }
.paso h3 { margin: 6px 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.paso p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texto-suave); }
.pildora { display: inline-block; align-self: flex-start; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--azul); background: rgba(66,106,196,.10); padding: 7px 11px; border-radius: 999px; }

/* Pantallas del celular de la historia */
.escena { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.escena.activa { opacity: 1; }
/* Escena 1: WhatsApp */
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: #EFEAE2; font-family: -apple-system, system-ui, sans-serif; }
.chat-cabeza { display: flex; align-items: center; gap: 8px; padding: 34px 10px 9px; background: #F6F6F6; border-bottom: 1px solid #e3e3e3; }
.chat-cabeza img { width: 26px; height: 26px; border-radius: 50%; }
.chat-cabeza b { font-size: 11.5px; display: block; }
.chat-cabeza small { font-size: 9px; color: #6b6b6b; }
.chat-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 10px 9px 14px; }
.burbuja { max-width: 84%; font-size: 10.5px; line-height: 1.38; padding: 7px 9px; border-radius: 9px; box-shadow: 0 1px .5px rgba(0,0,0,.12); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.burbuja.yo { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; }
.burbuja.el { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.burbuja .mini-pase { margin-top: 6px; width: 132px; }
.escena.activa .burbuja { opacity: 1; transform: none; }
.escena.activa .burbuja:nth-child(2) { transition-delay: .7s; }
.escena.activa .burbuja:nth-child(3) { transition-delay: 1.4s; }
/* Escena 2: la tarjeta se arma */
.armado { position: absolute; inset: 0; padding: 40px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.armado .pase > * { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease); }
.escena.activa .armado .pase > * { opacity: 1; transform: none; }
.escena.activa .armado .pase > :nth-child(2) { transition-delay: .35s; }
.escena.activa .armado .pase > :nth-child(3) { transition-delay: .7s; }
.escena.activa .armado .pase > :nth-child(4) { transition-delay: 1s; }
.armado-chip { align-self: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 10.5px; font-weight: 700; color: var(--azul); background: #fff; border-radius: 999px; padding: 6px 10px; box-shadow: 0 6px 14px -8px rgba(18,30,55,.4); opacity: 0; transition: opacity .5s 1.3s; }
.escena.activa .armado-chip { opacity: 1; }
/* Escena 3: llega el sello + notificación */
.notificacion {
  position: absolute; z-index: 4; left: 8px; right: 8px; top: 30px; display: flex; gap: 8px; align-items: flex-start;
  background: rgba(250,250,252,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 14px; padding: 9px 10px; font-family: -apple-system, system-ui, sans-serif; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35);
  transform: translateY(-140%); transition: transform .6s var(--ease);
}
.notificacion img { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.notificacion b { display: block; font-size: 10.5px; }
.notificacion span { font-size: 10px; color: #333; line-height: 1.3; }
.escena.activa .notificacion { transform: none; transition-delay: 1s; }

/* ---------- 6. Pruébala ---------- */
.prueba {
  position: relative; border-radius: 30px; padding: 2px; overflow: hidden; isolation: isolate;
}
.prueba::before { /* borde de luz que gira */
  content: ""; position: absolute; inset: -60%; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(66,106,196,.9) 80%, rgba(170,195,245,.9) 86%, transparent 94%);
  animation: girar 7s linear infinite;
}
.prueba::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 28px; background: linear-gradient(150deg, #fff, #E6ECF9); }
@keyframes girar { to { transform: rotate(1turn); } }
.prueba-contenido { display: grid; gap: 26px; padding: 32px 22px; }
.prueba .btn-principal { margin-top: 24px; }
.letra-chica { margin: 14px 0 0; font-size: 13px; color: var(--texto-suave); }
.qr-caja { display: none; }
.btn-pronto { display: flex; justify-content: center; margin-top: 24px; padding: 17px 22px; border-radius: 14px; font-weight: 700; font-size: 15.5px; color: var(--azul); background: rgba(66,106,196,.10); border: 1.5px dashed rgba(66,106,196,.45); cursor: default; }
.pronto-chip { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--azul); background: rgba(66,106,196,.12); padding: 4px 9px; border-radius: 999px; margin-right: 4px; }

/* ---------- 7. Galería de tarjetas reales ---------- */
.galeria { margin: 30px -20px 0; padding: 10px 20px 26px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria .pase { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; }
.desliza { margin: 0; font-size: 13px; color: var(--texto-suave); }

/* ---------- 8. Qué incluye (bento) ---------- */
.bento { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.caja { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; border-radius: 20px; transition: transform .35s var(--ease), box-shadow .35s; }
.caja.grande, .caja.ancha { grid-column: 1 / -1; }
.caja h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.caja p { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.ilustracion { margin-top: auto; border-radius: 14px; background: linear-gradient(160deg, #F4F6FC, #E8EDF8); min-height: 110px; padding: 12px; display: grid; place-items: center; overflow: hidden; }
.caja.grande .ilustracion { padding: 22px 18px; }
.caja.grande .pase { max-width: 290px; transform: rotate(-2deg); }
.img-cartel { width: 78%; max-width: 150px; border-radius: 6px; box-shadow: 0 14px 26px -14px rgba(18,30,55,.55); transform: rotate(3deg) translateY(18px); }
.m-escaner { width: 100%; max-width: 150px; background: #fff; border-radius: 12px; padding: 10px; display: grid; gap: 7px; box-shadow: 0 10px 22px -14px rgba(18,30,55,.5); font-size: 9px; }
.m-escaner b { font-size: 11px; }
.m-escaner .b1 { background: var(--marino); color: #fff; text-align: center; border-radius: 6px; padding: 6px 4px; font-weight: 700; }
.m-escaner .b2 { border: 1px solid var(--linea); border-radius: 6px; padding: 5px 6px; color: #8A93A8; }
.m-reporte { display: flex; align-items: flex-end; gap: 6px; height: 76px; }
.m-reporte span { width: 12px; border-radius: 5px 5px 2px 2px; background: rgba(66,106,196,.3); }
.m-reporte span:nth-child(5), .m-reporte span:nth-child(6) { background: var(--azul); }
.m-guia { width: 100%; max-width: 140px; background: #fff; border-radius: 10px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 10px 20px -12px rgba(18,30,55,.45); }
.m-guia i { display: flex; align-items: center; gap: 6px; font-style: normal; }
.m-guia i::before { content: "✓"; font-size: 10px; font-weight: 800; color: #fff; background: var(--azul); width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; }
.m-guia i::after { content: ""; height: 6px; flex: 1; border-radius: 3px; background: #DCE3F1; }
.m-aviso { width: 100%; max-width: 170px; display: flex; gap: 7px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 8px; box-shadow: 0 10px 22px -12px rgba(18,30,55,.45); font-family: -apple-system, system-ui, sans-serif; }
.m-aviso img { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.m-aviso b { display: block; font-size: 9.5px; }
.m-aviso span { font-size: 9.5px; color: #333; }
.m-diseno { display: flex; gap: 7px; }
.m-diseno span { width: 24px; height: 34px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(18,30,55,.1); }
.m-chat { width: 100%; max-width: 230px; display: grid; gap: 8px; }
.m-chat span { font-size: 12px; line-height: 1.35; padding: 8px 11px; border-radius: 12px; max-width: 86%; }
.m-chat .ellos { background: #fff; justify-self: start; border-bottom-left-radius: 4px; }
.m-chat .yo { background: #D8F5E1; justify-self: end; border-bottom-right-radius: 4px; }

/* ---------- 9. Precio ---------- */
.precio-caja { position: relative; margin: 30px auto 0; max-width: 470px; padding: 26px 22px; box-shadow: var(--sombra-suave); }
.selector { display: grid; grid-template-columns: 1fr 1fr; background: #EEF2FA; border-radius: 12px; padding: 4px; }
.selector button { font: inherit; font-size: 14px; font-weight: 700; border: 0; background: transparent; color: var(--texto-suave); padding: 9px 8px; border-radius: 9px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.selector button.activo { background: #fff; color: var(--marino); box-shadow: 0 2px 8px -3px rgba(18,30,55,.25); }
.selector button small { display: block; color: var(--azul); font-weight: 800; font-size: 11.5px; }
.monto { margin: 24px 0 0; font-size: 50px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.monto span { font-size: 17px; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.equivale { margin: 8px 0 0; font-size: 14px; color: var(--azul); font-weight: 700; min-height: 20px; }
.instalacion { margin: 6px 0 22px; font-size: 15px; color: var(--texto-suave); }
.precio-caja .lista-ventanas { gap: 12px; }
.precio-caja .lista-ventanas li { font-size: 15px; }
.precio-caja .btn-principal { margin-top: 26px; }
.nota-cancelar { margin: 14px 0 0; font-size: 13.5px; color: var(--texto-suave); text-align: center; }

/* ---------- 10. Quién ---------- */
.quien { display: grid; gap: 22px; }
.foto { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #DCE4F6, #BFCDEE); color: var(--azul); box-shadow: 0 0 0 6px rgba(66,106,196,.08); }
.foto svg { width: 42px; height: 42px; }
.quien h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.quien p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--texto-suave); }
.quien p strong { color: var(--marino); }
.firma { margin: 20px 0 16px; font-weight: 800; }
.firma small { display: block; font-weight: 600; color: var(--texto-suave); font-size: 14px; }

/* ---------- 11. Preguntas ---------- */
.preguntas { margin-top: 26px; display: grid; gap: 10px; }
.preguntas details { background: rgba(255,255,255,.85); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.preguntas summary { list-style: none; cursor: pointer; padding: 18px; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(66,106,196,.10); color: var(--azul); font-weight: 800; font-size: 18px; transition: transform .3s var(--ease); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0; padding: 0 18px 18px; font-size: 15.5px; line-height: 1.65; color: var(--texto-suave); }

/* ---------- 12. Cierre ---------- */
.cierre { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 30px; padding: 44px 22px; border: 1px solid var(--linea); background: #fff; }
.cierre::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(40% 40% at 30% 30%, rgba(66,106,196,.22), transparent 70%), radial-gradient(40% 40% at 70% 70%, rgba(140,170,230,.3), transparent 70%); animation: girar 24s linear infinite; }
.cierre h2 { font-size: clamp(2rem, 8.5vw, 3.4rem); }
.cierre .texto-seccion { margin-left: auto; margin-right: auto; max-width: 480px; }
.cierre .accion-seccion { justify-items: center; }
.cierre .micro { margin-top: 14px; justify-content: center; }
.separador { height: 1px; background: var(--linea); margin: 30px auto 22px; max-width: 420px; }
.web { margin: 0; font-size: 15px; color: var(--texto-suave); }
.web a { font-weight: 700; color: var(--azul); text-decoration: none; }

/* ---------- 13. Pie ---------- */
.pie { padding: 36px 0 100px; border-top: 1px solid var(--linea); }
.pie-lema { margin: 10px 0 18px; font-size: 14px; color: var(--texto-suave); }
.pie-links { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; font-weight: 600; }
.pie-links a { text-decoration: none; }
.pie-links a:hover { color: var(--azul); }
.pie-derechos { margin: 22px 0 0; font-size: 13px; color: var(--texto-suave); }

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--whatsapp); display: grid; place-items: center; box-shadow: 0 12px 26px -8px rgba(18,30,55,.45); transform: scale(0); transition: transform .35s var(--ease); }
.flotante.visible { transform: scale(1); }
.flotante svg { width: 30px; height: 30px; }

/* =========================================================================
   Pantallas más grandes
   ========================================================================= */
@media (min-width: 480px) { .barra .marca span { display: inline; } }
@media (min-width: 720px) {
  .galeria { margin: 34px 0 0; padding: 10px 0 20px; overflow: visible; justify-content: center; }
  .galeria .pase { flex: 0 1 300px; }
  .desliza { display: none; }
}
@media (min-width: 960px) {
  .barra-links { display: flex; }
  .portada { padding: 28px 0 110px; min-height: 100vh; }
  .portada-grid { grid-template-columns: 1.15fr .85fr; align-items: center; margin-top: 56px; }
  .acciones { justify-items: start; }
  .btn-principal { padding: 18px 26px; }
  .enlace-dudas { justify-self: start; }
  .micro { justify-content: flex-start; }
  .celular { width: 310px; }
  .flotante { display: none; }
  .seccion { padding: 120px 0; }
  .panel { padding: 32px; }
  .problema-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
  .accion-seccion { justify-items: start; }
  .historia { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .historia-cel { order: 2; top: 12vh; padding: 0; margin: 0; background: none; }
  .historia-cel::after { display: none; }
  .historia-cel .celular { width: 290px; border-radius: 46px; padding: 10px; }
  .historia-cel .pantalla { border-radius: 37px; }
  .historia-pasos { gap: 0; padding: 0; }
  .paso { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; }
  .prueba-contenido { grid-template-columns: 1.3fr .7fr; align-items: center; padding: 52px; gap: 40px; }
  .prueba .solo-cel { display: none; }
  .qr-caja { display: block; background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 22px; text-align: center; }
  .qr-caja .pase { max-width: 230px; margin: 0 auto; transform: rotate(2deg); }
  .qr-caja p { margin: 14px 0 0; font-size: 14px; font-weight: 700; }
  .galeria { gap: 26px; padding-top: 30px; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .caja { padding: 24px; gap: 14px; }
  .caja:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); }
  .caja.grande { grid-column: span 2; grid-row: span 2; }
  .caja.grande .ilustracion { flex: 1; }
  .caja.ancha { grid-column: span 2; }
  .caja h3 { font-size: 17px; }
  .caja p { font-size: 14.5px; }
  .ilustracion { min-height: 130px; padding: 16px; }
  .quien { grid-template-columns: auto 1fr; gap: 40px; align-items: start; padding: 48px; }
  .foto { width: 140px; height: 140px; }
  .preguntas { max-width: 840px; }
  .cierre { padding: 80px 48px; }
  .pie { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .texto-encendible .p { color: var(--marino); }
  .paso { opacity: 1; transform: none; }
}