/* Design tokens de marca (brandbook 2026-07-19). */
:root {
  --navy: #0b0f2b;
  --violet: #6b4dff;
  --blue: #3d7bff;
  --teal: #00d4b3;
  --light: #f2f4ff;
  --grad-brand: linear-gradient(135deg, var(--violet) 0%, var(--blue) 50%, var(--teal) 100%);
  --radius-card: 24px;
  --shadow-soft: 0 8px 30px rgba(11, 15, 43, 0.08);
  --shadow-lift: 0 16px 40px rgba(11, 15, 43, 0.14);
}

@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.72993dddf88a.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-regular.da03732a27e1.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.51205681a1ba.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.8ca0a5155296.woff2") format("woff2");
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--navy);
  background: #fff;
}
h1, h2, h3, .font-display {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
}

/* Palabra acentuada del titular: gradiente de marca sobre texto. */
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Botones. El primario "levanta" y desplaza el gradiente al hover. */
.btn-primary {
  display: inline-block;
  background: var(--grad-brand);
  background-size: 150% 150%;
  background-position: 0% 50%;
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.9rem 1.8rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  background-position: 100% 50%;
}
/* El CTA compacto del header sticky mantiene el target táctil mínimo de
   44px (Apple HIG) aunque su padding vertical sea chico. */
header .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.btn-secondary {
  display: inline-block;
  color: var(--navy);
  font-weight: 700;
  border: 2px solid rgba(11, 15, 43, 0.15);
  border-radius: 9999px;
  padding: 0.8rem 1.7rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
}

/* Cards con elevación suave al hover. */
.card {
  background: #fff;
  border: 1px solid rgba(11, 15, 43, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Reveals al scroll: landing.js agrega .is-visible via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Escalonado dentro de un grupo. */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* Ondas decorativas de marca en bordes de sección. */
/* Fondo de ondas del key visual de marca (violeta arriba-izq, teal abajo-der,
   centro blanco, tramas de puntos) — recreado como SVG para que pese KBs. */
.wave-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  /* WebP pre-rasterizado del SVG (fuente: waves-bg.svg): los feGaussianBlur
     vivos del SVG son carísimos en Firefox — el bitmap no cuesta nada. */
  background-image: url("img/waves-bg.3ef84e99c3b3.webp");
  background-size: cover;
  background-position: center;
}

/* Iconos (Lucide, MIT, vendorizados como partials). */
.icon-tile {
  display: inline-flex;
  padding: 0.8rem;
  border-radius: 1rem;
  background: var(--light);
  color: var(--violet);
}
.icon-tile svg {
  width: 28px;
  height: 28px;
}

/* "Los programas tradicionales no funcionan": cada ícono cuenta su problema
   una vez, cuando su tarjeta aparece (.reveal.is-visible). Estilo base =
   estado final (mojada, trabada, rota), así queda con movimiento reducido. */
.prob-tile { position: relative; padding: 1rem; overflow: hidden; }
.prob-tile svg { width: 44px; height: 44px; }
.prob-tile i { position: absolute; display: block; }
/* Tarjeta física: caen gotas y se destiñe. */
.prob-wet > svg { filter: grayscale(1); opacity: 0.45; transform: rotate(-4deg); }
.prob-drop { top: 6px; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--blue); opacity: 0; }
.prob-drop:nth-of-type(1) { left: 30%; }
.prob-drop:nth-of-type(2) { left: 50%; }
.prob-drop:nth-of-type(3) { left: 68%; }
.is-visible .prob-wet > svg { animation: prob-soak 2.4s 0.55s both; }
.is-visible .prob-drop { animation: prob-rain 0.9s var(--ease-in) 0.55s both; }
.is-visible .prob-drop:nth-of-type(2) { animation-delay: 0.85s; }
.is-visible .prob-drop:nth-of-type(3) { animation-delay: 1.15s; }
@keyframes prob-rain {
  0% { opacity: 0; transform: translateY(-14px); }
  15%, 70% { opacity: 1; }
  70% { transform: translateY(24px); }
  100% { opacity: 0; transform: translateY(27px) scale(1.8, 0.3); }
}
@keyframes prob-soak {
  0%, 30% { filter: none; opacity: 1; transform: none; }
  70% { filter: grayscale(0.8); opacity: 0.6; transform: none; }
  78% { transform: rotate(-7deg); }
  86% { transform: rotate(2deg); }
  100% { filter: grayscale(1); opacity: 0.45; transform: rotate(-4deg); }
}
/* App propia: la descarga se traba, tiembla y aparece una ✕. */
.prob-dl { left: 50%; top: 50%; width: 22px; height: 5px; margin: -6px 0 0 -11px; border-radius: 3px; background: rgba(107, 77, 255, 0.18); overflow: hidden; }
.prob-dl i { position: static; height: 100%; width: 68%; border-radius: 3px; background: var(--violet); }
.prob-tile .prob-nope { right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #ff5a6e; display: grid; place-items: center; }
.prob-nope svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.is-visible .prob-dl i { animation: prob-fill 2.4s 0.55s both; }
.is-visible .prob-dl { animation: prob-stall 2.4s 0.55s both; }
.is-visible .prob-nope { animation: prob-nope 2.4s 0.55s both; }
@keyframes prob-fill { 0%, 8% { width: 0; } 45% { width: 62%; } 55%, 100% { width: 68%; } }
@keyframes prob-stall {
  0%, 56% { transform: none; }
  60% { transform: translateX(-3px); }
  64% { transform: translateX(3px); }
  68% { transform: translateX(-2px); }
  72%, 100% { transform: none; }
}
@keyframes prob-nope { 0%, 72% { transform: scale(0); } 82% { transform: scale(1.25); } 90%, 100% { transform: none; } }
/* Cupón impreso: tiembla y se rompe en dos. */
.prob-half { display: block; width: 44px; height: 44px; }
.prob-r { position: absolute; left: 1rem; top: 1rem; }
.prob-l { clip-path: polygon(0 0, 54% 0, 49% 14%, 55% 28%, 48% 42%, 55% 56%, 48% 70%, 54% 84%, 50% 100%, 0 100%); transform: translate(-5px, 3px) rotate(-12deg); }
.prob-r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 50% 100%, 54% 84%, 48% 70%, 55% 56%, 48% 42%, 55% 28%, 49% 14%); transform: translate(5px, 3px) rotate(10deg); }
.is-visible .prob-l { animation: prob-tear-l 2.4s 0.55s both; }
.is-visible .prob-r { animation: prob-tear-r 2.4s 0.55s both; }
@keyframes prob-tear-l {
  0%, 30% { transform: none; }
  36% { transform: rotate(-2deg); }
  42% { transform: rotate(2deg); }
  48% { transform: none; animation-timing-function: var(--ease-out); }
  75%, 100% { transform: translate(-5px, 3px) rotate(-12deg); }
}
@keyframes prob-tear-r {
  0%, 30% { transform: none; }
  36% { transform: rotate(2deg); }
  42% { transform: rotate(-2deg); }
  48% { transform: none; animation-timing-function: var(--ease-out); }
  75%, 100% { transform: translate(5px, 3px) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .prob-tile * { animation: none !important; }
}
/* Accesibilidad: sin movimiento para quien lo pide. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn-primary, .btn-secondary, .card {
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Tarjetas wallet (hero) --- */
.wallet-card {
  margin: 0 14px;
  border-radius: 18px;
  padding: 16px;
  color: #fff;
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  animation: card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.dot.filled { background: var(--teal); border-color: var(--teal); }

@keyframes card-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-card { opacity: 1; transform: none; animation: none; }
}

/* Checkmarks del hero: el trazo se dibuja al cargar. */
.check-draw path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: check-draw 0.5s ease-out 1.2s forwards;
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .check-draw path { stroke-dashoffset: 0; animation: none; }
}

/* --- 3 pasos: números con gradiente y línea conectora que se dibuja --- */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .steps-line { position: relative; }
  .steps-line::before {
    content: "";
    position: absolute;
    /* A la altura del centro del número: escena + su margen + medio número. */
    top: calc(var(--step-scene-h) + 1rem + 26px); left: 16%; right: 16%;
    height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--blue), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s ease-out 0.2s;
    z-index: -1;
  }
  .steps-line.is-visible::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-line::before { transform: scaleX(1); transition: none; }
}

/* Escenas de los 3 pasos (escanea → guarda → gana). Regla de todas: el estilo
   base es el estado FINAL, que es lo que queda quieto sin .is-playing o con
   movimiento reducido; los keyframes arrancan desde el estado inicial. Las
   tres duran 3.6 s para ir al compás. */
:root {
  --step-scene-h: 168px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-scene {
  position: relative;
  height: var(--step-scene-h);
  max-width: 300px;
  margin: 0 auto 1rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.step-scene > * { position: absolute; }
.step-scene svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ss-badge, .ss-gift {
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 6px 14px rgba(0, 212, 179, 0.35);
}
.ss-badge svg, .ss-gift svg { width: 55%; height: 55%; stroke: #fff; stroke-width: 2.5; }
.ss-card { background: var(--grad-brand); border-radius: 12px; box-shadow: 0 8px 18px rgba(11, 15, 43, 0.16); }
.ss-pill { position: absolute; left: 12px; top: 12px; width: 40px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.75); }
.ss-dots { position: absolute; display: flex; }
.ss-dots i { border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: grid; place-items: center; }
.ss-dots i.on { background: #fff; }
.ss-dots svg, .ss-drop svg { width: 56%; height: 56%; stroke: var(--violet); stroke-width: 3; }

/* 1 · Escanea: el teléfono entra sobre el QR, barre y confirma. */
.ss-qr { left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(11, 15, 43, 0.1); }
.ss-qr img { display: block; width: 100%; height: 100%; }
.ss-phone { left: 50%; top: 50%; width: 112px; height: 150px; margin: -75px 0 0 -56px; border: 6px solid var(--navy); border-radius: 22px; }
.ss-phone::before { content: ""; position: absolute; top: 4px; left: 50%; width: 26px; height: 5px; margin-left: -13px; border-radius: 3px; background: var(--navy); }
.ss-line { position: absolute; left: 8px; right: 8px; top: 12%; height: 3px; border-radius: 2px; background: var(--teal); box-shadow: 0 0 12px 3px rgba(0, 212, 179, 0.55); opacity: 0; }
.ss-scan .ss-badge { left: calc(50% + 34px); top: 4px; width: 40px; height: 40px; }
.is-playing .ss-phone { animation: ss-phone 3.6s var(--ease-out) infinite both; }
.is-playing .ss-line { animation: ss-line 3.6s ease-in-out infinite both; }
.is-playing .ss-scan .ss-badge { animation: ss-badge 3.6s infinite both; }
@keyframes ss-phone {
  0% { opacity: 0; transform: translate(130px, 50px) rotate(14deg); }
  22%, 80% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translate(130px, 50px) rotate(14deg); }
}
@keyframes ss-line {
  0%, 24% { opacity: 0; top: 12%; }
  28% { opacity: 1; }
  44% { top: 86%; }
  58% { top: 12%; opacity: 1; }
  62%, 100% { opacity: 0; top: 12%; }
}
@keyframes ss-badge {
  0%, 60% { transform: scale(0); }
  67% { transform: scale(1.25); }
  72%, 82% { transform: scale(1); }
  88%, 100% { transform: scale(0); }
}

/* 2 · Guarda: la tarjeta cae dentro de la billetera, que acusa el golpe. */
.ss-pocket-back { left: 50%; bottom: 14px; width: 168px; height: 92px; margin-left: -84px; border-radius: 18px; background: #262c5e; }
.ss-pocket-front { left: 50%; bottom: 14px; width: 182px; height: 64px; margin-left: -91px; border-radius: 16px; background: var(--navy); transform-origin: 50% 100%; }
.ss-pocket-front::after { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; height: 4px; border-radius: 2px; background: var(--grad-brand); }
.ss-save .ss-card { left: 50%; top: 34px; width: 148px; height: 90px; margin-left: -74px; }
.ss-save .ss-dots { left: 14px; top: 34px; gap: 8px; }
.ss-save .ss-dots i { width: 16px; height: 16px; }
.is-playing .ss-save .ss-card { animation: ss-card-in 3.6s infinite both; }
.is-playing .ss-pocket-front { animation: ss-pocket 3.6s infinite both; }
@keyframes ss-card-in {
  0% { opacity: 0; transform: translateY(-150px) rotate(-6deg); }
  12% { opacity: 1; transform: translateY(-150px) rotate(-6deg); animation-timing-function: var(--ease-in); }
  40% { transform: none; animation-timing-function: var(--ease-out); }
  48% { transform: translateY(-10px); animation-timing-function: var(--ease-in); }
  55%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes ss-pocket {
  0%, 39% { transform: none; }
  43% { transform: scale(1.05, 0.9); }
  52%, 100% { transform: none; }
}

/* 3 · Gana: cae el último sello y salta el regalo con destellos. */
.ss-earn .ss-card { left: 50%; top: 40px; width: 186px; height: 106px; margin-left: -93px; }
.ss-earn .ss-dots { left: 14px; top: 60px; gap: 8px; }
.ss-earn .ss-dots i { width: 26px; height: 26px; }
.ss-drop { left: calc(50% - 93px + 14px + 4 * 34px); top: 100px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; transform-origin: 50% 100%; box-shadow: 0 3px 8px rgba(11, 15, 43, 0.2); }
.ss-earn .ss-gift { left: calc(50% + 66px); top: 16px; width: 44px; height: 44px; }
.ss-spark { width: 14px; height: 14px; background: var(--violet); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(0); }
.ss-sp1 { left: calc(50% + 52px); top: 10px; }
.ss-sp2 { left: calc(50% + 116px); top: 22px; background: var(--blue); }
.ss-sp3 { left: calc(50% + 110px); top: 66px; background: var(--teal); }
.is-playing .ss-drop { animation: ss-drop 3.6s infinite both; }
.is-playing .ss-earn .ss-gift { animation: ss-gift 3.6s infinite both; }
.is-playing .ss-spark { animation: ss-spark 3.6s infinite both; }
.is-playing .ss-sp2 { animation-delay: 0.12s; }
.is-playing .ss-sp3 { animation-delay: 0.24s; }
@keyframes ss-drop {
  0% { opacity: 0; transform: translateY(-110px) scale(0.9, 1.1); }
  10% { opacity: 1; transform: translateY(-110px) scale(0.9, 1.1); animation-timing-function: var(--ease-in); }
  26% { transform: scale(0.9, 1.1); }
  28% { transform: scale(1.3, 0.7); animation-timing-function: var(--ease-back); }
  38%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes ss-gift {
  0%, 40% { transform: scale(0); }
  48% { transform: scale(1.2); }
  54% { transform: none; }
  60% { transform: translateY(-10px) scale(0.94, 1.08); animation-timing-function: var(--ease-in); }
  66% { transform: scale(1.12, 0.88); animation-timing-function: var(--ease-back); }
  72%, 88% { transform: none; }
  96%, 100% { transform: scale(0); }
}
@keyframes ss-spark {
  0%, 52% { transform: scale(0) rotate(0); }
  60% { transform: scale(1.3) rotate(45deg); }
  72%, 100% { transform: scale(0) rotate(90deg); }
}
/* Movimiento reducido: la regla global llevaría los loops a su último cuadro
   (vacío); acá se apagan para que quede el estado final del estilo base. */
@media (prefers-reduced-motion: reduce) {
  .step-scene *, .step-scene *::before { animation: none !important; }
}

/* --- CTA final: banda con gradiente completo de marca --- */
.cta-band { background: var(--grad-brand); }

/* Tarjeta del CTA: se llena de sellos en cascada y suelta confeti, una vez,
   cuando aparece (.reveal.is-visible). Base = llena y sin confeti. */
.cta-stamps { position: relative; width: 236px; margin: 0 auto 28px; }
.cta-pass { position: relative; height: 112px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 16px 36px rgba(11, 15, 43, 0.22); }
.cta-pill { position: absolute; left: 14px; top: 13px; width: 48px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); }
.cta-grid { position: absolute; left: 0; right: 0; top: 34px; display: grid; grid-template-columns: repeat(5, 28px); gap: 10px 14px; justify-content: center; }
.cta-grid i { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.cta-grid svg { width: 15px; height: 15px; fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cta-confetti { position: absolute; left: 50%; top: 56px; }
.cta-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; }
.cta-stamps.is-visible .cta-grid i { animation: cta-fill 0.4s var(--ease-back) both; animation-delay: calc(0.35s + var(--i) * 0.12s); }
.cta-stamps.is-visible .cta-grid svg { animation: cta-ink 0.4s both; animation-delay: calc(0.45s + var(--i) * 0.12s); }
.cta-stamps.is-visible .cta-confetti i { animation: cta-burst 1.3s cubic-bezier(0.15, 0.7, 0.3, 1) 1.65s both; }
@keyframes cta-fill { from { transform: none; background: rgba(255, 255, 255, 0.25); } 50% { transform: scale(1.22); background: #fff; } to { transform: none; background: #fff; } }
@keyframes cta-ink { from { opacity: 0; } to { opacity: 1; } }
@keyframes cta-burst {
  0% { opacity: 0; transform: none; }
  2% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-stamps * { animation: none !important; }
}

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan). */
.hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

/* --- Hero v2: iPhone real con tarjetas que salen de la pantalla --- */
.phone-scene {
  position: relative;
  width: 380px;
  height: 540px;
  /* Contexto 3D para que las tarjetas compartan la profundidad del teléfono
     (no solo la inclinación 2D). Ajustable junto con --ry/--rx en .float-card. */
  /* La perspectiva NO va acá (un solo punto de fuga distorsiona distinto a las
     cards según su altura). Cada .float-card lleva su propia perspective() en
     su transform → todas se ven idénticamente inclinadas. */
}
.phone-scene .phone-img {
  height: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 24px 50px rgba(11, 15, 43, 0.25));
}
/* Las tarjetas arrancan "dentro" de la pantalla y se deslizan hacia afuera
   hasta sobresalir del borde del teléfono. --tx/--r por tarjeta. */
/* Contenedor: composición dispersa art-directed — tarjetas alternando a los
   lados del teléfono, rotaciones variadas y profundidad por escala/sombra.
   Entrada sutil (fade + rise escalonado); la tarjeta interior flota aparte. */
.phone-scene .float-card {
  position: absolute;
  width: 185px;
  /* Perspectiva 3D del plano del teléfono: perspective() POR TARJETA dentro
     del transform (no en la escena — un solo punto de fuga las distorsiona
     distinto según su altura). rotateY/rotateZ varían por tarjeta (contrapunto).
     Entrada: todas nacen del centro de la pantalla (--sx/--sy) y salen
     disparadas a su posición final mientras toman su profundidad (--tz). */
  opacity: 0;
  transform: translate(var(--sx, 0px), var(--sy, 0px)) perspective(1600px) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 7deg)) translateZ(0) scale(0.12);
  /* Longhands (NO el shorthand `animation`): el shorthand fijaría animation-delay
     con más especificidad que .fc-N y mataría el escalonado. Cada .fc-N pone su delay. */
  animation-name: card-spread;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
@keyframes card-spread {
  0%   { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) perspective(1600px) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 7deg)) translateZ(0) scale(0.12); }
  16%  { opacity: 1; transform: translate(var(--sx, 0px), var(--sy, 0px)) perspective(1600px) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 7deg)) translateZ(0) scale(0.12); }
  100% { opacity: 1; transform: translate(var(--tx, 0px), 0px) perspective(1600px) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 7deg)) translateZ(var(--tz, 60px)) scale(1); }
}
/* Composición "explosión moderada" (aprobada en artefacto, ronda 3, opción 5):
   las grandes se abren en contrapunto — cada una inclinada hacia un lado
   distinto y despegada del eje — y las minis radian alrededor del teléfono
   (NE café, O flor, E barbería tras la Panadería, SE gym). Todas las
   rotaciones apuntan "hacia afuera". left/top son la posición FINAL; --sx/--sy
   apuntan el origen de la entrada al centro de la pantalla (~x185/y255), de
   donde salen disparadas.
   OJO: translateZ + rotateY corren la card ≈ tz·sin(ry) en x; los left ya
   descuentan ese corrimiento. */
.fc-1 { top: -14px; left: 21px;  --sx: 72px;  --sy: 152px;  --ry: -10deg; --rz: -4deg; --tz: 80px; z-index: 3; animation-delay: 0.30s; }
.fc-2 { top: 195px; left: 124px; --sx: -32px; --sy: -57px;  --ry: -17deg; --rz: 6deg;  --tz: 40px; z-index: 2; animation-delay: 0.40s; }
.fc-3 { top: 400px; left: 6px;   --sx: 86px;  --sy: -190px; --ry: -12deg; --rz: -3deg; --tz: 90px; z-index: 1; animation-delay: 0.50s; }
.fc-4 { top: 44px;  left: 131px;  --sx: -38px; --sy: 185px;  --rz: 7deg;  --tz: -400px; z-index: 1; animation-delay: 0.60s; }
.fc-5 { top: 274px; left: 138px;  --sx: -46px; --sy: -45px;  --rz: 4deg;  --tz: -430px; z-index: 1; animation-delay: 0.68s; }
.fc-6 { top: 224px; left: -189px; --sx: 281px; --sy: 5px;    --rz: -8deg; --tz: -460px; z-index: 1; animation-delay: 0.76s; }
.fc-7 { top: 454px; left: 123px;  --sx: -30px; --sy: -225px; --rz: 9deg;  --tz: -390px; z-index: 1; animation-delay: 0.84s; }

/* Tarjeta interior: estilo glass + flotación continua (duraciones y fases
   distintas por tarjeta para que se sienta orgánico). */
.float-card .wallet-card {
  margin: 0;
  opacity: 1;
  border-radius: 16px;
  /* El "borde" va como anillo interior del box-shadow: un border real de 1px
     semitransparente re-antialiasa en cada frame de la flotación y parpadea. */
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 16px 28px rgba(11, 15, 43, 0.26),
    0 42px 70px rgba(11, 15, 43, 0.32);
  /* Capa GPU propia: sin esto la flotación lenta de pocos px se re-rasteriza
     en subpíxeles y se siente a tirones. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation: card-bob 5.6s ease-in-out infinite alternate;
}
.fc-2 .wallet-card { animation-duration: 6.4s; animation-delay: -1.2s; }
.fc-3 .wallet-card { animation-duration: 5.2s; animation-delay: -2.4s; }
.fc-4 .wallet-card { animation-duration: 7.1s; animation-delay: -0.6s; }
.fc-5 .wallet-card { animation-duration: 5.9s; animation-delay: -3.1s; }
.fc-6 .wallet-card { animation-duration: 6.8s; animation-delay: -1.9s; }
.fc-7 .wallet-card { animation-duration: 5.5s; animation-delay: -4.2s; }
/* Sombra más corta en las minis: están "más lejos", una sombra larga las
   traería al frente y competirían con las protagonistas. */
.fc-mini .wallet-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 8px 16px rgba(11, 15, 43, 0.16),
    0 22px 38px rgba(11, 15, 43, 0.18);
}
/* Además de subir/bajar, cada tarjeta cabecea unos grados: el vaivén
   rompe la sensación de composición congelada. */
@keyframes card-bob {
  from { transform: translate3d(0, -4px, 0) rotate(-0.5deg); }
  to   { transform: translate3d(0, 5px, 0) rotate(0.7deg); }
}
/* Pill "Funciona con Google Wallet y Apple Wallet": iconos oficiales juntos
   + texto con brillo, flotando debajo del teléfono.
   Centrado con left/right/margin-inline en vez de left:50%+transform:
   translateX(-50%) porque la animación pill-in ya anima `transform`
   (translateY) — un transform base se pierde en cuanto corre la
   animación (fill-mode:forwards se queda con el último keyframe, no
   con el valor declarado acá). top:663px queda 34px por debajo del
   borde inferior de fc-3 (la tarjeta más baja, ~629px desde el techo
   de .phone-scene) para que el badge no pise ninguna tarjeta. */
.wallet-pill {
  position: absolute;
  left: 0;
  right: 0;
  top: 663px;
  margin-inline: auto;
  width: max-content;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  animation: pill-in 0.6s ease-out 1.5s forwards;
}
@keyframes pill-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wp-ico {
  display: inline-flex;
}
.wp-ico img { width: 30px; height: auto; display: block; }
.wp-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
  .wallet-pill { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-scene .float-card {
    opacity: 1;
    animation: none;
    transform: translate(var(--tx, 0px), 0px) perspective(1600px) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 7deg)) translateZ(var(--tz, 60px)) scale(1);
  }
  .float-card .wallet-card {
    animation: none;
    transform: none;
  }
}

/* --- Hero: tarjetas realistas que salen del icono de Wallet --- */
.float-card .rcard.wallet-card { padding: 0; border-radius: 16px; }
.hero-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4B32D6; background: #EEEAFF; padding: 6px 12px; border-radius: 9999px; margin-bottom: 18px; }
.hero-trial { margin-top: 14px; font-size: 14px; color: #4A5070; }
.wallet-origin { position: absolute; left: 151px; top: 223px; width: 78px; height: 78px; transform: perspective(1600px) rotateY(-14deg) rotateZ(7deg); }
.wallet-origin-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #1C1C1E; box-shadow: 0 10px 22px -8px rgba(11, 15, 43, 0.6); animation: wallet-tap 1.2s ease-in-out 0.1s both; }
.wallet-origin-tile img { display: block; width: 58px; height: auto; }
.wallet-origin-ring { position: absolute; inset: 0; border-radius: 20px; border: 3px solid #6B4DFF; opacity: 0; animation: wallet-ring 1.1s ease-out 0.2s both; }
@keyframes wallet-tap { 0% { transform: scale(1); } 20% { transform: scale(0.86); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wallet-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wallet-origin-tile, .wallet-origin-ring { animation: none; }
}

/* ===================================================================
   Responsive / móvil. Objetivo: cero scroll horizontal (el body nunca
   se ensancha) y que el hero/nav no corten contenido en pantallas
   angostas. overflow-x: clip NO crea contenedor de scroll, así que el
   header sticky sigue funcionando.
   =================================================================== */
html, body { overflow-x: clip; }

/* Los hijos del grid del hero no deben forzar ancho mayor al viewport. */
#hero .grid > * { min-width: 0; }

/* El "escenario" del teléfono ocupa el ancho disponible y recorta lo que
   sobresalga SOLO en móvil (en desktop las tarjetas salen a propósito). */
.phone-scene { flex: none; }

/* Reserva de espacio en desktop para que la wallet-pill (ahora debajo de
   fc-3, la tarjeta más baja) no choque con la sección siguiente: sin este
   padding, el grid del hero solo cuenta el alto de .phone-scene (540px) y
   la pill queda flotando fuera de la caja de #hero, sobre "Cómo funciona". */
.phone-stage { padding-bottom: 110px; }

@media (max-width: 1023px) {
  /* Full-bleed: el escenario se extiende hasta los bordes del viewport
     (rompe el px-5 del contenedor con margin negativo) para que la línea
     de recorte coincida con el borde de la pantalla — sin cortes bruscos
     atravesando sombras o tarjetas. El padding-bottom da aire a la sombra
     del teléfono y a la wallet-pill (que viven por debajo de la escena);
     el margin-bottom lo compensa junto con el hueco que deja el scale, pero
     ya no en -150: con la pill movida debajo de fc-3 (item 2) el hueco que
     sobra al fondo de la escena escalada es menor, y -150 la hacía
     chocar con "Cómo funciona" (medido en el navegador: -90 deja ~25px
     de aire). */
  .phone-stage {
    margin-inline: calc(50% - 50vw);
    /* Techo para fc-1 (top negativo, asoma sobre el teléfono) y su vaivén;
       el margin-top lo compensa para no abrir hueco con los checks. */
    padding-top: 40px;
    margin-top: -40px;
    padding-bottom: 60px;
    margin-bottom: -90px;
    overflow: clip;
  }
  /* Escala el mockup completo (mantiene la composición interna intacta). */
  .phone-scene {
    transform: scale(0.82);
    transform-origin: top center;
  }
}

@media (max-width: 640px) {
  /* Titular: que quepa sin cortarse. */
  #hero h1 { font-size: 2rem; line-height: 1.15; }
  /* CTAs del hero apilados a ancho completo. */
  #hero .flex.flex-wrap .btn-primary,
  #hero .flex.flex-wrap .btn-secondary {
    flex: 1 1 100%;
    text-align: center;
  }
  /* Flor & Canela más adentro: aun con el stage full-bleed, a este ancho
     el borde del viewport le comía el inicio del nombre. */
  .fc-6 { left: -150px; }
  /* La pill de wallets no debe desbordar: se encoge y puede envolver. */
  .wallet-pill { white-space: normal; left: 12px; right: 12px; }
  .wp-text { font-size: 0.74rem; }
  /* Tabla comparativa: texto un punto más chico para caber en 3 columnas. */
  .card table { font-size: 0.8rem; }
}

/* ===================================================================
   Auth (signup). Mismo sistema visual que el login del admin
   (passito/templates/admin/login.html): fondo de ondas, card blanca,
   inputs .passito-input y entrada .rise. Las clases van con prefijo
   .auth-* para no chocar con .card / .reveal de la home.
   =================================================================== */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("img/waves-bg.3ef84e99c3b3.webp");
  background-size: cover;
  background-position: center;
}
.auth-shell {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 0;
}
.auth-card {
  background: #fff;
  border: 1px solid rgba(11, 15, 43, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .auth-card { padding: 2rem; }
}
.auth-foot {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
}

/* Bloques del formulario: "Tu cuenta" / "Tu negocio". */
.auth-group {
  border: 0;
  padding: 0;
  margin: 0;
}
.auth-group + .auth-group {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(11, 15, 43, 0.07);
}
.auth-legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--violet);
}

.auth-field + .auth-field { margin-top: 1rem; }
.auth-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
}
.auth-hint {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: #94a3b8;
}
.auth-error {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #dc2626;
}
.auth-alert {
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  font-size: 0.875rem;
}
.auth-alert-error {
  background: #fef2f2;
  color: #b91c1c;
  margin-bottom: 1rem;
}
/* Inputs — idénticos a los del login del admin. */
.passito-input {
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  background: #f7f8ff;
  border: 1.5px solid rgba(11, 15, 43, 0.1);
  color: var(--navy);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.passito-input::placeholder { color: #9aa1c0; }
.passito-input:focus {
  background: #fff;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(107, 77, 255, 0.12);
}
.passito-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
select.passito-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7ba8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px 18px;
}

/* Botón de mostrar/ocultar contraseña dentro del input. */
.auth-input-wrap { position: relative; }
.auth-input-wrap .passito-input { padding-right: 3rem; }
.auth-reveal {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0.45rem;
  border-radius: 0.6rem;
  color: #8b93b5;
  background: transparent;
  transition: color 0.15s, background 0.15s;
}
.auth-reveal:hover { color: var(--violet); background: rgba(107, 77, 255, 0.08); }
.auth-reveal svg { width: 19px; height: 19px; }

/* Reglas de contraseña: aparecen solo mientras alguna esté sin cumplir
   (signup.js). Son orientativas — el backend siempre revalida. */
.pw-rules {
  display: none;
  margin-top: 0.7rem;
  gap: 0.3rem;
}
.pw-rules.is-shown { display: grid; }
.pw-rule {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: #a16207;
}
.pw-rule[hidden] { display: none; }
.pw-ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: #eab308;
}
/* El check del icono solo se dibuja cuando la regla se cumple; aquí la lista
   solo muestra pendientes, así que queda como círculo vacío. */
.pw-ico path { opacity: 0; }

/* Aceptación de términos. */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #475569;
}
.auth-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(11, 15, 43, 0.18);
  background: #f7f8ff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.auth-check input[type="checkbox"]:checked {
  border-color: transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--grad-brand);
}
.auth-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.auth-check label { cursor: pointer; }
.auth-check a { color: var(--violet); text-decoration: underline; }

.auth-captcha {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
#signup-form button[type="submit"] { margin-top: 1.25rem; }

/* Entrada escalonada (mismo gesto que el login del admin). */
.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rise[data-delay="1"] { animation-delay: 0.1s; }
.rise[data-delay="2"] { animation-delay: 0.2s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; animation: none; }
}

/* --- intl-tel-input sobre el tema claro de la landing --- */
.iti { width: 100%; }
.iti__tel-input { width: 100% !important; }
.iti--separate-dial-code .iti__tel-input { padding-left: 88px !important; }
.iti--allow-dropdown .iti__country-container { background: transparent; }
.iti__country-container .iti__selected-country {
  border-radius: 0.9rem 0 0 0.9rem;
  padding-left: 0.85rem;
  padding-right: 0.4rem;
  color: var(--navy);
}
.iti__country-container .iti__selected-country:hover,
.iti__country-container .iti__selected-country[aria-expanded="true"] {
  background: rgba(107, 77, 255, 0.07);
}
.iti__selected-dial-code { color: var(--navy); font-size: 0.9375rem; }
.iti__dropdown-content {
  background: #fff;
  border: 1px solid rgba(11, 15, 43, 0.08);
  border-radius: 0.9rem;
  margin-top: 6px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.iti__country-list { max-height: 260px; }
.iti__country { color: var(--navy); padding: 8px 12px; font-size: 0.875rem; }
.iti__country:hover,
.iti__country.iti__highlight { background: var(--light); }
.iti__dial-code { color: #94a3b8; }
.iti__search-input {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11, 15, 43, 0.08);
  font-size: 0.875rem;
}
.iti__search-input::placeholder { color: #9aa1c0; }

/* Anatomía del pase, imitando un storeCard de Wallet (reutilizada por el
   pase de regalo de "growth" y la tarjeta viva del onboarding). */
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pc-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}
.pc-logo svg { width: 18px; height: 18px; flex: none; }
.pc-sellos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pc-label);
}
.pc-sellos strong {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--pc-ink);
}
.pc-strip { display: grid; grid-template-columns: repeat(5, 28px); gap: 12px 14px; justify-content: center; margin-top: 28px; }
.pc-stamp {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--pc-empty);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pc-stamp.filled { background: var(--pc-stamp); border-color: var(--pc-stamp); color: var(--pc-stamp-ink); }
.pc-stamp svg { width: 14px; height: 14px; }
.pc-fields { display: flex; gap: 12px; margin-top: 28px; }
.pc-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* La recompensa se lee completa; comercio/cliente truncan primero,
   igual que en el pase real de Wallet. */
.pc-field:last-child { flex: none; }
.pc-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-label); }
.pc-value { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-qr { margin-top: 28px; display: flex; justify-content: center; }
.pc-qr img { background: #fff; border-radius: 12px; padding: 8px; width: 96px; height: 96px; }

/* Variante compacta del pase pc-* (tarjeta de regalo de "growth" y tarjeta
   viva del onboarding). Reutiliza la anatomía y variables pc-*. */
.pcc {
  color: var(--pc-ink);
  padding: 11px 11px 12px;
  border-radius: 12px;
}
.pcc .pc-logo { font-size: 0.74rem; gap: 5px; }
.pcc .pc-logo svg { width: 13px; height: 13px; }
.pcc .pc-sellos { font-size: 0.5rem; }
.pcc .pc-sellos strong { font-size: 0.88rem; }
.pcc .pc-strip { grid-template-columns: repeat(5, 18px); gap: 5px 7px; margin-top: 8px; }
.pcc .pc-stamp { width: 18px; height: 18px; border-width: 1.5px; }
.pcc .pc-stamp svg { width: 9px; height: 9px; }
.pcc .pc-fields { margin-top: 8px; }
.pcc .pc-value { font-size: 0.66rem; }
.pcc .pc-qr { margin-top: 8px; }
.pcc .pc-qr img { width: 40px; height: 40px; padding: 3px; border-radius: 7px; }

/* --- Sección de crecimiento: tarjeta de regalo y póster del socio --- */
/* Altura fija en los dos visuales para que las dos columnas arranquen el
   texto a la misma altura: la tarjeta de regalo mide ~140 px y el poster
   ~192 px, y sin esto los dos titulos quedan desalineados. */
.gw-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.gw-card {
  width: 230px;
  box-shadow: var(--shadow-lift);
}
.pc-regalo {
  /* Tema "cafe" de stamp_sets.py: la misma tarjeta de regalo que emite un
     comercio real, no un degradado de marca genérico. */
  background: #795541;
  --pc-ink: #F6E8D6; --pc-label: #E0B98A;
  --pc-stamp: #F6E8D6; --pc-stamp-ink: #795541; --pc-empty: rgba(246, 232, 214, 0.35);
}
/* Franja fotográfica arriba del monto, como en las tarjetas de regalo reales
   del Wallet: mismas proporciones que .rstrip (3:1) pero sin la grilla de
   sellos, es una sola imagen. */
.gw-strip { position: relative; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; border-radius: 10px; margin-bottom: 8px; }
.gw-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Póster del socio: panel claro con QR, la pieza que el socio imprime y
   pega en su mostrador. Borde punteado = se recorta y se cuelga. */
.gw-poster {
  width: 178px;
  padding: 14px 12px 16px;
  border-radius: 14px;
  background: #fff;
  border: 2px dashed rgba(107, 77, 255, 0.35);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.gwp-eyebrow {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5b6485;
}
.gwp-name {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  margin-top: 1px;
}
.gwp-qr {
  display: block;
  margin: 8px auto 0;
  width: 72px;
  height: 72px;
}
.gwp-offer {
  margin-top: 8px;
  font-size: 0.66rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--violet);
}

/* ---------------------------------------------------------------------------
   Sección de precios.

   La cabecera va con el gradiente de marca y el cuerpo en blanco: la card
   entera en blanco se perdía sobre el fondo --light de la sección, y el
   precio no ganaba jerarquía sobre la lista. El contraste hace el trabajo
   que antes intentaba hacer el tamaño de fuente.
   --------------------------------------------------------------------------- */
.pricing-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.pricing-head {
  background: var(--grad-brand);
  background-size: 150% 150%;
  color: #fff;
  padding: 2.25rem 2rem;
  text-align: center;
}

/* Vidrio sobre el gradiente en vez de un color plano: cualquier color fijo
   choca con algún punto del degradado, que va de violeta a turquesa. */
.pricing-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pricing-amount {
  margin-top: 0.85rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.pricing-period {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.pricing-trial {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.pricing-body {
  padding: 2rem;
}

.pricing-features {
  display: grid;
  gap: 0.75rem;
  font-size: 0.9rem;
}

@media (min-width: 640px) {
  .pricing-features {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
  }
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--navy);
}

/* El icono no se encoge ni se estira: sin esto, un ítem de dos líneas
   deforma el SVG y los checks dejan de alinearse entre columnas. */
.pricing-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--teal);
}

/* Las garantías son de otra naturaleza que la lista de arriba (no son
   funcionalidades), así que se separan con una línea y bajan de contraste. */
.pricing-assurances {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(11, 15, 43, 0.08);
}

@media (min-width: 640px) {
  .pricing-assurances {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }
}

.pricing-assurances strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}

.pricing-assurances span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #64748b;
}

/* --- Tarjeta realista: franja con sprites del catálogo. Todo en em para
   escalar la tarjeta entera con un solo font-size (.rcard--sm = hero). --- */
.rcard { width: 18.75em; font-size: 16px; border-radius: 1.375em; overflow: hidden; font-family: "Inter", system-ui, sans-serif; box-shadow: 0 34px 60px -24px rgba(11, 15, 43, 0.55); }
.rcard--sm { font-size: 9.87px; }
.rcard-head { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.125em 0.75em; }
.rcard-brand { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1em; }
.rcard-count { display: flex; flex-direction: column; align-items: flex-end; }
.rcard-count strong { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1.19em; line-height: 1.1; }
.rcard-label { font-size: 0.56em; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; color: var(--acc); }
.rcard-fields { display: flex; flex-direction: column; gap: 0.125em; padding: 0.875em 1.125em 0.25em; }
.rcard-value { font-size: 0.875em; }
.rcard-qr { display: flex; justify-content: center; padding: 0.875em 0 1.25em; }
.rcard-qr img { display: block; width: 5.25em; height: 5.25em; padding: 0.625em; border-radius: 0.75em; background: #fff; box-sizing: content-box; }

.rstrip { position: relative; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; }
.rstrip-band { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rstrip-tint { position: absolute; inset: 0; background: #6B4DFF; mix-blend-mode: color; opacity: 0; transition: opacity 0.5s; }
.is-tinted .rstrip-tint { opacity: 0.6; }
.rstrip-grid { position: absolute; inset: 0; box-sizing: border-box; padding: 3% 5%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2%; }
.rstrip-grid > .rstamp { min-height: 0; rotate: var(--rot, 0deg); }
.rstamp { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.rstamp.is-pop { animation: rstamp-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes rstamp-pop {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* --- Muro de diseños --- */
.wall-section { background: #0B0F2B; color: #fff; padding: 64px 0 0; overflow: hidden; }
.wall-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; max-width: 1136px; margin: 0 auto 36px; padding: 0 24px; }
.wall-copy { max-width: 640px; }
.wall-copy h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; }
.wall-copy p { margin-top: 16px; font-size: 18px; line-height: 1.55; color: #C9CEEE; }
.wall-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.wall-btn-ghost { min-height: 48px; padding: 0 26px; border-radius: 9999px; border: 1.5px solid #5A5FA0; background: transparent; color: #fff; font-weight: 600; }
.wall-btn-ghost[aria-pressed="true"] { background: #fff; color: #0B0F2B; border-color: #fff; }
.wall-link { min-height: 48px; display: inline-flex; align-items: center; padding: 0 8px; font-weight: 600; color: #5EE6D0; }
.wall-stats { display: flex; gap: 36px; flex-shrink: 0; }
.wall-stats dt { font-family: var(--font-display, Poppins, sans-serif); font-weight: 600; font-size: 40px; color: #5EE6D0; }
.wall-stats dd { font-size: 14px; color: #C9CEEE; }
.wall-rows { display: flex; flex-direction: column; gap: 24px; margin-top: 56px; transform: rotate(-3deg) scale(1.06); padding-bottom: 40px; }
.wall-row { display: flex; gap: 24px; width: max-content; animation: wall-left 46s linear infinite; }
.wall-row--2 { animation-name: wall-right; animation-duration: 54s; }
.wall-row--3 { animation-duration: 62s; }
.wall-cell { width: 420px; flex-shrink: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
/* Task 16: el HTML trae una sola copia por fila; hasta que landing-scenes.js
   clona la segunda (is-looping), el loop -50% dejaría un hueco al final y
   la animación arranca sin la mitad recorrida. Sin ese JS, la fila queda
   quieta (igual que con movimiento reducido). */
.wall-rows:not(.is-looping) .wall-row { animation: none; }
@keyframes wall-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
@keyframes wall-right { from { transform: translateX(calc(-50% - 12px)); } to { transform: translateX(0); } }
@media (max-width: 767px) {
  .wall-head { flex-direction: column; align-items: flex-start; }
  .wall-cell { width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .wall-row { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .rstamp.is-pop { animation: none; }
  .rstrip-tint { transition: none; }
}

/* --- Cercanía: mapa + control + teléfono. --v (0..100) lo pone JS.
   Grid con áreas: bajo 1100px, una columna donde mapa y teléfono comparten
   el área "stage" (el teléfono se achica y se monta sobre el mapa, así el
   slider queda justo debajo y se ve el efecto mientras se arrastra); desde
   1100px, tres columnas al tamaño real, igual que antes. --- */
.nearby-section {
  /* Bloque contenedor para .nearby-phone (abs-pos con grid-area:stage bajo
     1100px): un item de grid en position:absolute solo usa su grid-area
     como bloque contenedor si el GRID CONTAINER está posicionado. Sin este
     position:relative, .nearby-section quedaba position:static y el
     teléfono terminaba con offsetParent=BODY, renderizando sobre el hero
     (comprobado en el navegador: top del teléfono en y=446 vs. top de la
     sección en y=3843). Sin efecto visual en sí mismo (no lleva top/left),
     así que no hace falta acotarlo a la media query. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "ctrl" "list";
  row-gap: 18px;
  padding: 72px 24px;
  background: #fff;
  overflow: hidden;
}
.nearby-head { grid-area: head; }
.nearby-head h2 { font-size: 36px; line-height: 1.12; }
.nearby-head > p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: #3A4060; }
.nearby-control { grid-area: ctrl; padding: 16px; border-radius: 18px; background: #F2F4FF; }
.nearby-control label { font-size: 13px; font-weight: 600; color: #3A4060; }
.nearby-control input { display: block; width: 100%; height: 44px; margin: 0; accent-color: #6B4DFF; cursor: grab; }
.nearby-readout strong { font-family: "Poppins", "Inter", system-ui, sans-serif; font-size: 32px; color: #4B32D6; }
.is-near .nearby-readout strong { color: #00866F; }
.nearby-readout span { font-size: 14px; color: #3A4060; }
.nearby-bullets { grid-area: list; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.nearby-bullets li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #00A98F; }

.nearby-map-wrap, .nearby-phone { grid-area: stage; }
.nearby-map-wrap { width: 440px; height: 600px; justify-self: center; }
.nearby-map { position: relative; width: 440px; height: 600px; border-radius: 32px; overflow: hidden; background: #E4E8FA; transform-origin: top left; }
.nearby-map > span { position: absolute; }
.nm-street { background: #fff; }
.nm-h1 { left: 0; top: 250px; width: 440px; height: 20px; }
.nm-h2 { left: 0; top: 420px; width: 440px; height: 22px; }
.nm-h3 { left: 0; top: 540px; width: 440px; height: 20px; }
.nm-v1 { left: 60px; top: 0; width: 20px; height: 600px; }
.nm-v2 { left: 209px; top: 140px; width: 22px; height: 460px; }
.nm-v3 { left: 350px; top: 0; width: 20px; height: 600px; }
.nm-park { left: 90px; top: 280px; width: 110px; height: 130px; border-radius: 10px; background: #CDEFE2; }
.nm-zone, .nm-ring { left: 90px; top: 20px; width: 260px; height: 260px; border-radius: 50%; box-sizing: border-box; }
.nm-zone { background: rgba(0, 212, 179, 0.12); border: 2px dashed #00A98F; transition: background 0.4s; }
.is-near .nm-zone { background: rgba(0, 212, 179, 0.3); }
.nm-ring { border: 2px solid #00B89C; animation: nm-ring 3s ease-out infinite; }
.nm-ring--2 { animation-delay: 1.5s; }
@keyframes nm-ring { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
.nm-route { left: 218px; top: 178px; width: 0; height: calc(570px - var(--v) * 3.7px - 191px); border-left: 4px dotted #6B4DFF; }
.nm-pin { left: 192px; top: 122px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #6B4DFF, #3D7BFF 55%, #00B89C); box-shadow: 0 12px 24px -8px rgba(107, 77, 255, 0.7); }
.nm-pin svg { width: 30px; height: 30px; }
.nm-tag { left: 220px; top: 78px; transform: translateX(-50%); white-space: nowrap; padding: 7px 14px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: #fff; background: #0B0F2B; }
.nm-person { left: 220px; top: calc(570px - var(--v) * 3.7px); width: 26px; height: 26px; margin: -13px 0 0 -13px; box-sizing: border-box; border-radius: 50%; background: #0B0F2B; border: 5px solid #fff; box-shadow: 0 4px 10px rgba(11, 15, 43, 0.45); }
.nm-person-tag { left: 246px; top: calc(570px - var(--v) * 3.7px - 14px); white-space: nowrap; padding: 5px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; background: #fff; box-shadow: 0 6px 14px -6px rgba(11, 15, 43, 0.4); }

.nearby-phone {
  width: 300px; height: 610px; box-sizing: border-box; padding: 50px 14px 0; border-radius: 48px; border: 10px solid #05071A; overflow: hidden; color: #fff; background: linear-gradient(170deg, #3B2FA0, #123A6B 60%, #0A5E63); box-shadow: 0 50px 90px -30px rgba(11, 15, 43, 0.7);
  /* Bajo 1100px el teléfono se monta sobre el mapa, achicado y anclado a la
     esquina inferior derecha. absolute (con grid-area:stage como bloque
     contenedor) para que su caja SIN transformar (610px de alto) no infle
     la fila del grid compartida con el mapa: transform no reduce el layout
     box, así que en flujo normal el renglón "stage" terminaba midiendo
     610px en vez de los 450/600px reales del mapa (comprobado en el
     navegador: 776px de mapa+control en vez de los ~620px pedidos).
     768–1099px lo agranda un poco (más aire, menos superposición). Al ras
     (right:0, no -8px de sangrado): con el bloque contenedor del abs-pos
     resuelto por grid-area, un inset negativo aquí escapaba el overflow:hidden
     de .nearby-section y volvía a la página desplazable en horizontal
     (comprobado en el navegador: scrollX pasaba a 8px bajo 1100px). */
  position: absolute; inset: auto 0 0 auto; z-index: 2;
}
/* .reveal.is-visible (arriba) pone transform:none con dos clases de
   especificidad; .nearby-phone solo tiene una, así que sin este empate el
   scale nunca se aplicaba (comprobado en el navegador: el teléfono quedaba
   a tamaño completo, tapando el mapa). .nearby-phone.reveal iguala la
   especificidad y gana por ir después en la hoja de estilos. Solo bajo
   1100px: desde ahí el teléfono vuelve a su columna propia y no necesita
   escala (visual de escritorio intacto, sin pisar .reveal ahí). */
@media (max-width: 1099px) {
  .nearby-phone.reveal { transform: scale(.6); transform-origin: bottom right; }
}
.np-clock { text-align: center; font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 500; font-size: 66px; line-height: 1; }
.np-notif { display: flex; gap: 10px; margin-top: 22px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); color: #0B0F2B; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(-20px) scale(0.95); transition: all 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.np-notif strong { display: block; }
.np-notif-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: #3B2A20; display: flex; align-items: center; justify-content: center; }
.np-card { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; transform: translateY(105%); transition: transform 0.7s cubic-bezier(0.2, 1.1, 0.4, 1) 0.15s; }
.np-card .rcard { font-size: 13.76px; }
.is-near .np-notif { opacity: 1; transform: none; }
.is-near .np-card { transform: translateY(58%); }

@media (min-width: 768px) and (max-width: 1099px) { .nearby-phone.reveal { transform: scale(.8); } }
@media (max-width: 480px) { .nearby-map-wrap { width: 330px; height: 450px; } .nearby-map { transform: scale(0.75); } }
/* Desde 1100px: tres columnas al tamaño real, sin escalar (visual de
   escritorio sin cambios respecto de antes de esta tarea). */
@media (min-width: 1100px) {
  .nearby-section {
    grid-template-columns: 330px 440px 300px;
    grid-template-areas: "head map phone" "ctrl map phone" "list map phone";
    column-gap: 44px;
    row-gap: 18px;
    align-content: center;
  }
  /* Bajo 1100px el mapa y el teléfono comparten el área "stage" (arriba);
     esa área no existe en el grid-template-areas de acá, así que sin
     reasignarlas quedaban con un grid-area inexistente y el navegador las
     auto-ubicaba en columnas implícitas nuevas (comprobado: grid-template-
     columns calculado traía un 5to track extra de 0px). */
  .nearby-map-wrap { grid-area: map; }
  .nearby-phone { grid-area: phone; }
  /* Sin override de transform acá: sin la regla .max-width:1099 de arriba
     en juego, .nearby-phone vuelve a depender solo de .reveal/.reveal.is-visible
     como antes de esta tarea (mismo fade que el resto de la sección). */
  .nearby-phone { position: relative; inset: auto; }
}
@media (prefers-reduced-motion: reduce) { .nm-ring { animation: none; opacity: 0; } .np-notif, .np-card, .nm-zone { transition: none; } }

/* --- Bento de funcionalidades --- */
.bento { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 20px; }
.bento-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; overflow: hidden; background: #F2F4FF; color: #0B0F2B; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift, 0 20px 40px -20px rgba(11, 15, 43, 0.35)); }
.bento-tile h3 { font-size: 21px; line-height: 1.2; }
.bento-tile p { font-size: 15px; line-height: 1.5; color: #3A4060; }
.bento-icon { display: inline-flex; color: #4B32D6; }
.bento-icon svg { width: 26px; height: 26px; }
.bento-tile--wide { grid-column: span 2; }
.bento-tile--hero { grid-column: span 2; grid-row: span 2; gap: 14px; background: #0B0F2B; color: #fff; }
.bento-tile--hero h3 { font-size: 28px; }
.bento-tile--hero p, .bento-tile--navy p { color: #C9CEEE; max-width: 440px; }
.bento-tile--navy { background: #0B0F2B; color: #fff; }
.bento-tile--teal { background: #E3FBF6; }
.bento-tile--warm { background: #FFF3E4; }
.bento-tile--violet { background: #EEEAFF; }
.bento-tile--grad { background: linear-gradient(135deg, #6B4DFF, #3D7BFF); color: #fff; }
.bento-tile--grad p { color: #EEF0FF; }
.bento-badge { align-self: flex-start; padding: 5px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0B0F2B !important; background: #5EE6D0; }
.bento-cta { align-self: flex-start; min-height: 48px; display: inline-flex; align-items: center; padding: 0 26px; border-radius: 9999px; font-weight: 600; background: #fff; color: #0B0F2B; }
.bento-demo-strip { position: absolute; left: 26px; right: 26px; bottom: -14px; border-radius: 20px 20px 0 0; overflow: hidden; box-shadow: 0 -10px 50px rgba(107, 77, 255, 0.45); }
.bento-tile--wide[data-feature="presets"] p { max-width: 280px; }
.bento-stack { position: absolute; right: -30px; top: 22px; width: 250px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-6deg); }
.bento-stack .rstrip { border-radius: 12px; box-shadow: 0 10px 22px -10px rgba(11, 15, 43, 0.5); }
.bento-swatches, .bento-stamps, .bento-langs, .bento-bars, .bento-coupon, .bento-qr, .bento-pulse { margin-top: auto; }
.bento-swatches { display: flex; align-items: center; gap: 8px; }
.bs-logo { width: 46px; height: 46px; margin-right: 14px; border-radius: 14px; background: conic-gradient(#C2410C, #F59E0B, #7C2D12, #C2410C); }
.bs-dot { width: 34px; height: 34px; border-radius: 50%; animation: bento-swatch 4s ease infinite; }
.bs-dot--1 { background: #C2410C; } .bs-dot--2 { background: #F59E0B; animation-delay: 0.25s; } .bs-dot--3 { background: #7C2D12; animation-delay: 0.5s; }
@keyframes bento-swatch { 0%, 10% { transform: scale(0); } 25%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.bento-pulse { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #00A98F; }
.bento-pulse::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #00A98F; animation: bento-ring 2.4s ease-out infinite; }
@keyframes bento-ring { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.bento-stamps { display: flex; align-items: center; gap: 4px; }
.bento-stamps .is-prize { animation: card-bob 3s ease-in-out infinite alternate; }
.bento-coupon { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; border: 2px dashed #6B4DFF; background: #fff; font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; color: #4B32D6; }
.bento-coupon small { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: 12px; color: #3A4060; }
.bento-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.bento-bars i { width: 16px; border-radius: 5px; background: #9C8DFF; }
.bento-bars i:nth-child(1) { height: 35%; background: #B9AEFF; } .bento-bars i:nth-child(2) { height: 55%; } .bento-bars i:nth-child(3) { height: 45%; } .bento-bars i:nth-child(4) { height: 75%; background: #7F6BFF; } .bento-bars i:nth-child(5) { height: 100%; background: #6B4DFF; }
.bento-langs { display: flex; align-items: center; gap: 14px; }
.bl-chips { display: flex; gap: 6px; }
.bl-chips span { min-width: 40px; text-align: center; padding: 7px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.12); color: #DDE1FF; transition: all 0.4s; }
.bl-chips .is-on { background: #5EE6D0; color: #0B0F2B; }
.bl-phrase { flex-grow: 1; padding: 11px 16px; border-radius: 14px; background: #fff; color: #0B0F2B; font-size: 15px; font-weight: 500; }
.bento-qr { align-self: flex-start; padding: 6px; border-radius: 10px; background: #fff; box-sizing: content-box; }
.bento-points { margin-top: auto; font-family: "Poppins", "Inter", system-ui, sans-serif; font-size: 15px; color: #3A4060; }
.bento-points strong { font-size: 30px; font-weight: 600; color: #4B32D6; margin-right: 4px; }
.bento-amount { margin-top: auto; align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 18px; color: #fff; }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La franja crece con aspect-ratio 3/1 hasta ~290px en este rango y, en
     flujo absoluto, se monta encima de .bento-cta (comprobado con
     elementFromPoint a 936-1000px). Sacarla del flujo absoluto la empuja
     debajo del botón; el margin negativo la sigue sangrando hasta el borde
     del tile como en escritorio. */
  .bento-demo-strip { position: relative; left: auto; right: auto; bottom: auto; margin: auto -26px -26px; border-radius: 20px 20px 0 0; }
}
/* Bajo 640px el grid se vuelve carrusel horizontal (15 tiles apilados medían
   ~4.200px de alto): cada tile ocupa ~82% del ancho con scroll-snap; el hero
   (demo en vivo) un poco más ancho porque lleva la franja demo + CTA. */
@media (max-width: 639px) {
  .bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 20px 16px; margin-inline: -20px; scroll-padding-inline: 20px; overscroll-behavior-x: contain; }
  .bento-tile { flex: 0 0 82%; min-height: 300px; scroll-snap-align: start; }
  .bento-tile--hero { flex-basis: 88%; min-height: 380px; }
  .bento-stack { position: static; width: 100%; transform: none; margin-top: 12px; }
}
/* Indicador del carrusel: 15 puntos, solo visibles bajo 640px. El punto
   activo lo marca el IntersectionObserver del módulo `bento` en
   landing-scenes.js, siguiendo al tile más visible. Sin avance automático. */
.bento-dots { display: none; }
@media (max-width: 639px) {
  .bento-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
  .bento-dots li { width: 6px; height: 6px; border-radius: 50%; background: #D6D9F5; transition: background 0.2s, transform 0.2s; }
  .bento-dots li.is-active { background: #6B4DFF; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .bs-dot, .bento-pulse::after, .bento-stamps .is-prize { animation: none; } .bento-tile { transition: none; } .bento-dots li { transition: none; } }

/* --- Rubros: abanico por rubro + switch clásico/realista --- */
/* En escritorio los siete chips van en una sola línea; el relleno se achica
   en los anchos intermedios para que quepan sin partirse. */
.ind-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
.ind-chip { min-height: 46px; padding: 0 16px 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 9999px; border: 1.5px solid #C9CCE6; background: #fff; color: #0B0F2B; font-size: 14px; font-weight: 600; transition: all 0.3s; }
.ind-chip[aria-pressed="true"] { background: #0B0F2B; color: #fff; border-color: #0B0F2B; }
.ind-chip-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.ind-chip-sprite { width: 28px; height: 28px; object-fit: contain; }
.ind-chip-line { display: none; }
.ind-chip-line svg { width: 16px; height: 16px; }
[data-style="classic"] .ind-chip-sprite { display: none; }
[data-style="classic"] .ind-chip-line { display: flex; }

/* Segmentado: bloque de ancho justo, centrado con margin auto. Con
   inline-flex el margin auto no centra nada. */
.ind-switch { display: flex; justify-content: center; gap: 2px; width: max-content; margin: 18px auto 0; padding: 4px; border-radius: 9999px; background: #E4E7FA; }
.ind-switch button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 9999px; font-size: 14px; font-weight: 600; background: transparent; color: #4A5070; }
.ind-switch button[aria-pressed="true"] { background: #fff; color: #0B0F2B; box-shadow: 0 4px 12px -4px rgba(11, 15, 43, 0.35); }

/* Panel de controles de marca (Marca 2): color, fondo y estilo de sellos en
   una tarjeta blanca. En escritorio los tres grupos van en fila; en móvil
   se apilan y centran. */
.ind-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 20px 24px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lift); }
.ind-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ind-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #4A5070; }
.ind-colors { display: flex; gap: 8px; }
.ind-color { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(11, 15, 43, 0.12); padding: 0; cursor: pointer; flex: none; }
.ind-color[aria-pressed="true"] { box-shadow: 0 0 0 3px #6B4DFF; border-color: #6B4DFF; }
@media (max-width: 767px) {
  .ind-panel { flex-direction: column; align-items: center; }
  .ind-group { align-items: center; }
}

/* Rubros: controles de marca. Los botones del panel solo escriben
   data-brand/data-bg en la sección (landing-scenes.js); quién gana lo
   decide el CSS. --brand llega del botón de color elegido; --card es el
   color propio del tema del rubro. */
[data-industries][data-brand="on"] .ind-card .rcard { background: var(--brand) !important; --card: var(--brand) !important; }
[data-industries][data-bg="color"] .ind-card .rstrip-band,
[data-industries][data-bg="degradado"] .ind-card .rstrip-band { display: none; }
[data-industries][data-bg="color"] .ind-card .rstrip { background: var(--brand, var(--card)) !important; }
[data-industries][data-bg="degradado"] .ind-card .rstrip { background: linear-gradient(135deg, var(--brand, var(--card)), #0B0F2B) !important; }
.ind-card .rcard, .ind-card .rstrip { transition: background 0.4s ease; }

/* Abanico: siete tarjetas absolutas; data-pos (0 al frente) da la posición.
   3 y 4 son las dos del fondo, fuera de cuadro y transparentes. */
.ind-fan { position: relative; height: 470px; margin-top: 24px; }
.ind-card { position: absolute; left: 50%; top: 10px; width: 300px; margin-left: -150px; transition: transform 0.7s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s; }
.ind-card[data-pos="0"] { transform: translateX(0) rotate(0deg) scale(1); z-index: 5; opacity: 1; }
.ind-card[data-pos="1"] { transform: translateX(250px) rotate(8deg) scale(0.86); z-index: 4; opacity: 1; }
.ind-card[data-pos="2"] { transform: translateX(440px) rotate(16deg) scale(0.72); z-index: 3; opacity: 0.6; }
.ind-card[data-pos="3"] { transform: translateX(520px) scale(0.6); z-index: 1; opacity: 0; }
.ind-card[data-pos="4"] { transform: translateX(-520px) scale(0.6); z-index: 1; opacity: 0; }
.ind-card[data-pos="5"] { transform: translateX(-440px) rotate(-16deg) scale(0.72); z-index: 3; opacity: 0.6; }
.ind-card[data-pos="6"] { transform: translateX(-250px) rotate(-8deg) scale(0.86); z-index: 4; opacity: 1; }

/* El switch solo cambia data-style: las dos tarjetas ya están renderizadas. */
.ind-card .rcard--classic { display: none; }
[data-style="classic"] .ind-card .rcard--classic { display: block; }
[data-style="classic"] .ind-card .rcard--real { display: none; }
.rslot--classic { min-height: 0; display: flex; align-items: center; justify-content: center; }
.cstamp { height: 82%; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); }
.cstamp svg { width: 56%; height: 56%; }
.cstamp.is-filled { background: var(--ink, #fff); color: var(--card, #0B0F2B); }

/* Tabletas y portátiles angostos: el chip apila icono y nombre, que es lo
   único que deja entrar los siete en una sola línea sin recortar texto. */
@media (max-width: 1023px) {
  .ind-chips { gap: 6px; }
  .ind-chip { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 8px; font-size: 12px; line-height: 1.2; }
  .ind-chip-ico { width: 28px; height: 28px; }
  .ind-chip-sprite { width: 24px; height: 24px; }
}
/* Dos filas simétricas de 4 + 3: con cada chip en un cuarto exacto del
   ancho, la segunda fila queda centrada bajo la primera (nunca 6 + 1). El
   nombre puede partirse en dos renglones; los chips de una fila igualan
   altura solos porque el contenedor flex los estira. */
@media (max-width: 767px) {
  .ind-chips { flex-wrap: wrap; gap: 8px; }
  .ind-chip { flex: 0 0 calc(25% - 6px); min-width: 0; min-height: 72px; padding: 8px 4px; font-size: clamp(9px, 2.6vw, 12px); text-align: center; white-space: normal; }
  .ind-fan { height: 430px; }
  .ind-card { width: 258px; margin-left: -129px; }
  .ind-card .rcard { font-size: 13.76px; }
  .ind-card[data-pos="1"] { transform: translateX(150px) rotate(8deg) scale(0.86); }
  .ind-card[data-pos="6"] { transform: translateX(-150px) rotate(-8deg) scale(0.86); }
  .ind-card[data-pos="2"], .ind-card[data-pos="5"] { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-card { transition: none; }
  .ind-card .rcard, .ind-card .rstrip { transition: none; }
}