/* Demo pública de Passito. Portado de docs/design-lab/demo-interactiva/Prototipo.dc.html
   (aprobado). Las reglas del prototipo van casi literales: cambios marcados abajo. */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../landing/fonts/poppins-600.72993dddf88a.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../landing/fonts/inter-regular.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../landing/fonts/inter-500.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../landing/fonts/inter-700.8ca0a5155296.woff2") format("woff2"); }
: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);
}
.demo-body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--navy); background: var(--light); -webkit-font-smoothing: antialiased; }
/* Sin .btn: en iPhone el enlace tocado se queda en :hover, y (0,1,1) le ganaba
   al blanco de .btn-wallet/.btn-primary (texto morado sobre fondo oscuro). */
a { color: var(--violet); } a:not(.btn):hover { color: #5a3bff; }
.demo-shell h1, .demo-shell h2, .demo-shell h3, .font-display { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; margin: 0; }
p { margin: 0; }
.text-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--grad-brand); background-size: 150% 150%; color: #fff; font-weight: 700; font-size: 1rem; border-radius: 9999px; padding: 0.95rem 1.8rem; box-shadow: var(--shadow-soft); border: 0; }
.btn-wallet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--navy); color: #fff; font-weight: 700; border-radius: 9999px; padding: 1rem 1.8rem; box-shadow: var(--shadow-soft); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--navy); font-weight: 700; border: 2px solid rgba(11, 15, 43, 0.15); border-radius: 9999px; padding: 0.8rem 1.7rem; background: transparent; }
.card { background: #fff; border: 1px solid rgba(11, 15, 43, 0.06); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.passito-input { display: flex; align-items: center; gap: 10px; padding: 0.8rem 1rem; border-radius: 0.9rem; background: #fff; border: 1.5px solid rgba(11, 15, 43, 0.10); color: #9aa1c0; }

/* Tarjeta estilo Wallet (anatomía canon del brandbook) */
.pass-card { position: relative; width: 280px; box-sizing: border-box; border-radius: 16px; padding: 20px 18px 24px; color: var(--pc-ink); box-shadow: var(--shadow-lift); }
.pc-cafe { background: linear-gradient(160deg, #f6e8d6, #a9714b); --pc-ink: #3b2a1d; --pc-label: #8a5a34; --pc-stamp: #a9714b; --pc-stamp-ink: #f6e8d6; --pc-empty: rgba(59, 42, 29, 0.35); }
.pc-barberia { background-color: #10131f; background-image: radial-gradient(circle at 18% 28%, rgba(212,175,55,0.5) 1px, transparent 2px), radial-gradient(circle at 72% 16%, rgba(212,175,55,0.35) 1px, transparent 2px), radial-gradient(circle at 44% 62%, rgba(212,175,55,0.3) 1px, transparent 2px), radial-gradient(circle at 86% 74%, rgba(212,175,55,0.45) 1px, transparent 2px), radial-gradient(circle at 8% 82%, rgba(212,175,55,0.3) 1px, transparent 2px), radial-gradient(circle at 60% 88%, rgba(212,175,55,0.25) 1px, transparent 2px), radial-gradient(circle at 30% 10%, rgba(242,244,255,0.2) 1px, transparent 2px); --pc-ink: #f2e6c4; --pc-label: #d4af37; --pc-stamp: #d4af37; --pc-stamp-ink: #10131f; --pc-empty: rgba(242, 230, 196, 0.4); }
.pc-gym { background: linear-gradient(160deg, #7b2ff7, #2b1055); --pc-ink: #ffffff; --pc-label: #00ffb3; --pc-stamp: #00ffb3; --pc-stamp-ink: #2b1055; --pc-empty: rgba(255, 255, 255, 0.4); }
/* Tarjetas realistas (spec 2026-09-17): el fondo y los sellos son las MISMAS
   imágenes que van al pase, servidas como estáticos. */
/* La foto va SOLO en la franja, como en el pase de verdad: Apple y Google
   pintan el resto de la tarjeta con un color plano. Pintarla entera prometía
   algo que el Wallet no entrega (decisión del usuario, 2026-09-17). */
.pc-real { background: var(--pc-pass); --pc-empty: rgba(255, 255, 255, 0.35); }
/* El rótulo ETAPA vive 17 px arriba de su casilla: la banda necesita ese
   aire para no cortarlo contra el borde. */
.pc-real .pc-strip { background: var(--pc-bg) center/cover; margin-left: -18px; margin-right: -18px; padding: 24px 18px 16px; }
.pc-real .pc-stamp { border: 0; background: var(--pc-none) center/contain no-repeat; }
.pc-real .pc-stamp.filled { background: var(--pc-full) center/contain no-repeat; }
.pc-real .pc-stamp.stage.filled { background: var(--pc-star) center/contain no-repeat; }
.pc-real .pc-stamp.shadow { filter: drop-shadow(1px 2px 2px rgba(11, 15, 43, 0.45)); }
/* La etapa pendiente se insinúa, como el revelado del pase: el sello con
   corona a media luz, nunca el aro de las tarjetas clásicas. */
.pc-real .pc-stamp.stage { background: var(--pc-star) center/contain no-repeat; opacity: 0.45; box-shadow: none; }
.pc-real .pc-stamp.stage.filled { opacity: 1; }
.pc-real .pc-stamp.ms, .pc-real .pc-stamp.ms-done { border: 0; box-shadow: none; }
/* Los sellos traen detalle: piden más lado que el círculo de trazo. */
.pc-real .pc-strip { grid-template-columns: repeat(5, 40px); gap: 14px 8px; }
.pc-real .pc-stamp { width: 40px; height: 40px; }
/* El logo del comercio es su propio sello, igual que en el pase. */
.pc-logo-img { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* La animación de tinta es del glyph de trazo: acá el sello entero aparece. */
.pc-real .pc-stamp.pop { animation: stamp-real 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s infinite; }
@keyframes stamp-real { 0% { opacity: 0.25; transform: scale(0.8); } 12% { transform: scale(1.35); } 22%, 100% { opacity: 1; transform: scale(1); } }
.pc-real .pc-stamp.pop::after { border-color: rgba(255, 255, 255, 0.85); }
/* Pestañas de familia: realista manda, clásico no compite por atención. */
.family-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(11, 15, 43, 0.06); align-self: flex-start; }
.family-tab { border: 0; background: transparent; font: inherit; font-size: 0.82rem; font-weight: 600; color: #64748b; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.family-tab.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11, 15, 43, 0.12); }
/* `display: inline-flex` le gana al atributo hidden del navegador: sin esta
   regla, los chips de la otra familia seguían ocupando su lugar. */
.chip[hidden] { display: none; }
.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 { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pc-empty); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.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-stamp.pop { animation: stamp-pop 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s infinite; }
.pc-stamp.pop svg { animation: stamp-ink 2.6s ease-out 0.6s infinite; }
@keyframes stamp-pop { 0% { background: transparent; border-color: var(--pc-empty); transform: scale(1); } 12% { transform: scale(1.55); } 22%, 100% { background: var(--pc-stamp); border-color: var(--pc-stamp); transform: scale(1); } }
@keyframes stamp-ink { 0%, 14% { opacity: 0; } 24%, 100% { opacity: 1; } }
.pc-stamp.pop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pc-stamp); opacity: 0; animation: ring 2.6s ease-out 0.6s infinite; }
@keyframes ring { 10% { opacity: 0.8; transform: scale(0.7); } 40%, 100% { opacity: 0; transform: scale(1.8); } }
.pc-fields { display: flex; gap: 12px; margin-top: 28px; }
.pc-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Los dos primeros campos miden lo que dice su contenido; la recompensa se
   lleva el resto y es la única que recorta. Con `flex: 0 1 auto` en todos,
   el reparto proporcional dejaba los rótulos cortados ("COMERCIO / CLIEN… /
   RECOMPENSA") aunque sobrara espacio. */
.pc-field:not(:last-child) { flex: 0 0 auto; }
.pc-field:last-child { flex: 1 1 auto; }
.pc-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 svg { background: #fff; color: var(--navy); border-radius: 12px; padding: 8px; width: 96px; height: 96px; box-sizing: border-box; display: block; }


.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(11, 15, 43, 0.12); font-size: 0.875rem; font-weight: 500; color: var(--navy); background: #fff; white-space: nowrap; }
.chip.on { border-color: var(--violet); background: rgba(107, 77, 255, 0.08); }
.sw { width: 16px; height: 16px; border-radius: 50%; flex: none; background-size: contain; background-position: center; background-repeat: no-repeat; }
.sw-cafe { background: linear-gradient(135deg, #f6e8d6, #a9714b); }
.sw-barberia { background: linear-gradient(135deg, #2e2e38, #d4af37); }
.sw-gym { background: linear-gradient(135deg, #7b2ff7, #00ffb3); }

.wallet-pill { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid #f1f5f9; border-radius: 9999px; padding: 8px 16px; font-size: 11px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-soft); }
.wallet-pill img { width: 20px; height: auto; }
.wallet-pill .y { font-weight: 400; color: #94a3b8; }
.muted { color: #64748b; }
.tiny { font-size: 0.75rem; color: #94a3b8; }

.rail { display: flex; align-items: center; justify-content: center; gap: 0; }
.rail-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; }
.rail-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #94a3b8; background: #fff; border: 2px solid rgba(11, 15, 43, 0.12); box-sizing: border-box; }
.rail-dot.done { background: var(--teal); border: 0; color: #fff; }
.rail-dot.now { background: var(--grad-brand); background-clip: border-box; border: 0; color: #fff; box-shadow: 0 0 0 4px rgba(107, 77, 255, 0.18); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 4px rgba(107, 77, 255, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(107, 77, 255, 0.08); } }
.rail-label { font-size: 0.62rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; }
.rail-label.now { color: var(--navy); }
.rail-line { height: 2px; width: 14px; background: rgba(11, 15, 43, 0.12); margin-bottom: 18px; }
.rail-line.done { background: var(--teal); }
.waves { position: absolute; inset: 0; background: url("../landing/img/waves-bg.3ef84e99c3b3.webp") center / cover no-repeat; pointer-events: none; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgba(11, 15, 43, 0.10); padding: 22px 24px 28px; box-sizing: border-box; }
.handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(11, 15, 43, 0.12); margin: 0 auto 16px; }

/* ---------- Prototipo: estados via clase en la raíz (s0..s6 + banderas) ---------- */
.logo { position: absolute; left: 50%; top: 28px; height: 28px; width: auto; margin-left: -54px; }
.rail { position: absolute; left: 0; right: 0; top: 74px; }
.title-block { position: absolute; left: 24px; right: 24px; top: 134px; text-align: center; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.title-block h1 { font-size: 1.55rem; line-height: 1.15; }
.fade { opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.fade.on { opacity: 1; pointer-events: auto; }

/* Las tarjetas: tres en Elegir (abanico), una sola sigue viva después. El wrap lleva la
   posición (transiciones); la tarjeta interna, las animaciones. */
.cardw { position: absolute; left: 55px; top: 196px; width: 280px; transform-origin: 50% 0; transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.hero-card { position: relative; transition: box-shadow 0.4s; }
/* El abanico arranca más abajo: con 12px las tarjetas laterales (rotadas)
   tapaban la segunda línea del subtítulo. */
.s0 .cardw.pos-0 { transform: translateY(52px); z-index: 4; }
.s0 .cardw.pos-1 { transform: translate(118px, 40px) rotate(7deg) scale(0.92); opacity: 0.85; z-index: 2; }
.s0 .cardw.pos-3 { transform: translate(-118px, 40px) rotate(-7deg) scale(0.92); opacity: 0.85; z-index: 2; }
.s0 .cardw.pos-0 .hero-card { animation: tilt 6s ease-in-out infinite; }
.s0 .cardw.pos-0 .glare { opacity: 1; }
.glare { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 65%); background-size: 260% 100%; animation: glare 6s ease-in-out infinite; }
@keyframes tilt { 0%, 100% { transform: scale(var(--card-k, 1)) rotateY(-14deg) rotateX(6deg); } 50% { transform: scale(var(--card-k, 1)) rotateY(14deg) rotateX(-6deg); } }
@keyframes glare { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.stage { perspective: 900px; }
.after0 .cardw { opacity: 0; transform: translateY(60px) scale(0.8); pointer-events: none; z-index: 1; }
.after0 .cardw.sel { opacity: 1; pointer-events: auto; z-index: 4; }
.s1 .cardw.sel { transform: translateY(-20px) scale(0.74); }
.s3 .cardw.sel, .s4 .cardw.sel { transform: translateY(28px); opacity: 1; }
.s3 .cardw.sel .hero-card { animation: float-a 4s ease-in-out infinite; }
.s3.wallet-added .cardw.sel .hero-card { animation: none; }
.s5 .cardw.sel { transform: translateY(0) scale(0.9); opacity: 0.3; z-index: 2; }
.s6 .cardw.sel { transform: rotate(-6deg) translateY(-40px) scale(0.84); opacity: 1; z-index: 2; }
.s6 .cardw.sel .hero-card { animation: float-a 5s ease-in-out infinite; }
@keyframes float-a { 0%, 100% { transform: scale(var(--card-k, 1)) translateY(0); } 50% { transform: scale(var(--card-k, 1)) translateY(-10px); } }

/* Chips: carrusel corto; el elegido se centra. */
/* Fila de pills arrastrable: un scroller nativo, no un transform. El JS solo
   la centra en la elegida (`renderCards`). `scroll-snap` deja el pill cuadrado
   con el dedo y las barras se esconden porque el escenario es un teléfono. */
.chips-clip { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips-clip::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 8px; width: max-content; padding: 2px 0; }
.chip { scroll-snap-align: center; }

/* ★ Envío: la tarjeta entra a un teléfono con la app de correo. */
.mailphone { position: absolute; left: 95px; top: 236px; width: 200px; height: 400px; border-radius: 30px; background: #0b0f2b; padding: 10px; box-sizing: border-box; box-shadow: 0 24px 50px rgba(11, 15, 43, 0.28); z-index: 3; opacity: 0; transform: translateY(70px) scale(0.92); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s; pointer-events: none; }
.s2 .mailphone { opacity: 1; transform: none; }
.s3 .mailphone { opacity: 0; transform: translateY(40px) scale(0.9); }
.mailscreen { position: relative; width: 100%; height: 100%; border-radius: 22px; background: #f7f8ff; overflow: hidden; padding: 14px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.mail-top { display: flex; align-items: center; justify-content: space-between; font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--navy); }
.mail-ic { position: relative; width: 26px; height: 26px; border-radius: 8px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.mail-badge { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; border-radius: 8px; background: #ff3b5c; color: #fff; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sent .mail-badge { opacity: 1; transform: scale(1); }
.mail-head { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s 0.1s, transform 0.5s 0.1s; }
.sent .mail-head { opacity: 1; transform: none; }
.mail-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.mail-from { font-size: 0.68rem; font-weight: 700; color: var(--navy); }
.mail-when { font-size: 0.6rem; color: #94a3b8; margin-left: auto; }
.mail-subj { font-size: 0.7rem; font-weight: 600; color: var(--navy); line-height: 1.3; opacity: 0; transition: opacity 0.4s 0.25s; }
.sent .mail-subj { opacity: 1; }
.mail-slot { flex: 1; border-radius: 12px; border: 1.5px dashed rgba(11, 15, 43, 0.12); transition: border-color 0.4s; }
.sent .mail-slot { border-color: transparent; }
/* La tarjeta entra en el hueco del correo, debajo del asunto: con 144px
   quedaba encima del texto "Tu tarjeta de ... te espera". */
.s2 .cardw.sel { transform: translateY(216px) scale(0.55); z-index: 4; }
.s2 .cardw.sel .hero-card { box-shadow: 0 6px 16px rgba(11, 15, 43, 0.18); }

/* ★ Wallet: la billetera sube con otras tarjetas asomadas, la tarjeta gira y
   entra (el frente la tapa y solo asoma su borde), las de atrás se hunden con
   el peso, la billetera baja con la tarjeta adentro y la tarjeta vuelve a
   subir a su lugar. Antes bajaba hasta el borde, se quedaba encima y rebotaba
   (revisión del usuario en el iPhone).
   Dos capas para que la tarjeta quede entre ellas: .pocket-back (las tarjetas
   de atrás, z 3) y .pocket-front (el cuerpo, z 5); la tarjeta va en z 4.
   --pocket-dy lleva el borde de arriba de la tarjeta a 14 px por encima del
   borde de la billetera: top de la billetera - 14 - top de la tarjeta. */
/* Alto de la billetera: 0.72 de su ancho, como el ícono (revisión del usuario: era muy
   alta). El borde de abajo se mantiene en 700; la billetera crece hacia arriba. */
.proto { --pocket-h: calc(280px * var(--card-k, 1) * 0.72); --pocket-dy: calc(490px - 280px * var(--card-k, 1) * 0.72); }
/* Mismo ancho que las tarjetas (revisión del usuario): 280 px por el --card-k, centrada. */
.pocket { position: absolute; left: 50%; width: calc(280px * var(--card-k, 1)); margin-left: calc(-140px * var(--card-k, 1)); top: calc(700px - var(--pocket-h)); height: var(--pocket-h); z-index: 5; opacity: 0; transform: translateY(160px); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; pointer-events: none; }
.pocket-back { z-index: 3; }
.adding .pocket { opacity: 1; transform: none; }
.wallet-added .pocket { opacity: 0; transform: translateY(160px); transition-delay: 0.25s; }
/* Las tarjetas de atrás miden lo mismo que la que entra (revisión del usuario):
   280 px por el --card-k del escenario, centradas en la billetera. Asoman por encima
   del borde de la que entra (que llega a -14 px), 12 px cada una. */
.pocket .bar { position: absolute; height: 80px; border-radius: 12px 12px 0 0; left: 50%; width: calc(280px * var(--card-k, 1)); margin-left: calc(-140px * var(--card-k, 1)); }
.pocket .b1 { top: -50px; background: #3d8ceb; }
.pocket .b2 { top: -38px; background: #f5b73b; }
.pocket .b3 { top: -26px; background: #45b86d; }
/* Sin filter: drop-shadow; el borde va en el SVG. */
.pocket-body { position: absolute; left: 0; right: 0; top: 27px; bottom: 0; }
/* Forma del ícono del Wallet: Apple (sobre crema con muesca) por defecto, Google
   (frente azul inclinado) en Android. Las tarjetas de atrás toman sus colores. */
.pocket-shape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pocket-apple path { fill: #e8e2d6; stroke: rgba(11, 15, 43, 0.12); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pocket-google { display: none; }
.pocket-google path { fill: #4285f4; stroke: rgba(11, 15, 43, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallet-google .pocket-apple { display: none; }
.wallet-google .pocket-google { display: block; }
.wallet-google .pocket .b1 { background: #34a853; }
.wallet-google .pocket .b2 { background: #fbbc04; }
.wallet-google .pocket .b3 { background: #ea4335; }
.adding .cardw.sel { transform: translateY(var(--pocket-dy)); transition: transform 0.7s cubic-bezier(0.55, 0, 0.3, 1) 0.4s; }
/* Sin retraso: la flotación del paso se corta al tocar y el giro debe tomarla en el mismo
   cuadro (con 50 ms de hueco la tarjeta de escritorio pasaba de 325 a 280 y volvía). */
.adding .cardw.sel .hero-card { animation: spin 0.8s ease-in-out; }
@keyframes spin { from { transform: scale(var(--card-k, 1)) rotateY(0deg); } to { transform: scale(var(--card-k, 1)) rotateY(360deg); } }
.adding .cardw.sel .glare { opacity: 1; animation: glare 0.8s ease-in-out; }
/* Al entrar: las tarjetas de atrás se hunden y el frente cede un poco. */
.adding .pocket-back .bar { animation: stack-bump 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 1.02s both; }
@keyframes stack-bump { 0% { transform: translateY(0); } 45% { transform: translateY(10px); } 100% { transform: translateY(5px); } }
/* El apretón va en el cuerpo y con `both`, como las barras. Estaba en .pocket-front sin
   fill, el mismo elemento que sube con transición de transform: en Android (Firefox y
   Chrome) el frente desaparecía entre el fin de esa transición (0.45 s) y el arranque
   del apretón (1.04 s), justo a mitad del giro (video del usuario, cuadro a cuadro). */
.adding .pocket-body { transform-origin: 50% 100%; animation: pocket-press 0.5s ease-out 1.04s both; }
@keyframes pocket-press { 0%, 100% { transform: none; } 35% { transform: scale(1.02, 0.95); } }
/* La billetera baja con la tarjeta adentro... */
.stowing .pocket { opacity: 0; transform: translateY(160px); transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.25s 0.3s; }
.stowing .cardw.sel { opacity: 0; transform: translateY(calc(var(--pocket-dy) + 160px)); transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.25s 0.3s; }
/* ...y la tarjeta sube a su lugar sin transición de transform (ya estaba
   oculta): la anima `translate`, que se suma al transform del paso. .proto sube la
   especificidad: sin él, .wallet-added (más abajo) devolvía la transición con rebote y
   la tarjeta volaba desde el fondo de la billetera pasándose 45 px de largo. */
.proto.from-pocket .cardw.sel { transition: none; animation: card-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes card-rise { from { translate: 0 70px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.wallet-added .cardw.sel { transform: translateY(28px); transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wallet-added .cardw.sel .hero-card { animation: none; }
.wallet-added .cardw.sel .glare { opacity: 0; }

/* ★ Cada sello actualiza la tarjeta: latido, odómetro, onda en la fila, destello del premio. */
.pulse .cardw.sel .hero-card { animation: card-pulse 0.9s ease-out; }
@keyframes card-pulse { 0% { transform: scale(var(--card-k, 1)); box-shadow: var(--shadow-lift); } 30% { transform: scale(calc(var(--card-k, 1) * 1.03)); box-shadow: 0 16px 40px rgba(11, 15, 43, 0.14), 0 0 0 8px rgba(0, 212, 179, 0.25); } 100% { transform: scale(var(--card-k, 1)); box-shadow: var(--shadow-lift); } }
.odo { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.odo-in { display: block; }
.odo-in.roll { animation: odo 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; }
@keyframes odo { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pulse .cardw.sel .pc-stamp.filled { animation: bump 0.45s ease-out both; }
@keyframes bump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pulse .cardw.sel .pc-stamp.pop { animation: stamp-once 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pulse .cardw.sel .pc-value.reward { animation: flash 1.1s ease-out; border-radius: 4px; }
@keyframes flash { 0% { background: rgba(255, 255, 255, 0); } 25% { background: rgba(255, 255, 255, 0.65); } 100% { background: rgba(255, 255, 255, 0); } }
.upd { position: absolute; left: 50%; top: -14px; width: 150px; margin-left: -75px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: var(--navy); font-size: 0.66rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; box-shadow: var(--shadow-lift); box-sizing: border-box; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s; }
.upd svg { color: var(--teal); }
.pulse .cardw.sel .upd { opacity: 1; transform: none; }

/* ★ Etapas: marca en el sello 9; al caer, estalla y entra un cupón chico. */
.pc-stamp.ms { border-color: var(--pc-stamp); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.pass-card .pc-stamp.ms svg { opacity: 1; color: var(--pc-stamp); }  /* gana a .pc-stamp:not(.filled) svg */
.pc-stamp.ms::before, .pc-stamp.ms-done::before { content: attr(data-label); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--pc-label); white-space: nowrap; }
.pc-stamp.ms-done { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.pc-stamp.ms-done svg { color: var(--pc-stamp-ink); }
.pc-stamp.hit::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pc-stamp); animation: burst 0.8s ease-out both; }
@keyframes burst { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.4); } }
.mini-cp { position: absolute; left: 55px; width: 280px; top: 590px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 15, 43, 0.06); box-shadow: var(--shadow-lift); box-sizing: border-box; opacity: 0; transform: translateY(24px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s; pointer-events: none; }
.stage-won .mini-cp { opacity: 1; transform: none; }
.s5 .mini-cp { opacity: 0; transform: translateY(24px); }
.s6 .mini-cp { opacity: 1; top: 408px; z-index: 4; transform: rotate(-3deg); animation: float-c 5s ease-in-out 0.4s infinite; }
@keyframes float-c { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(6px); } }
.mc-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-brand); color: #fff; position: relative; display: flex; align-items: center; justify-content: center; }
/* Etapa cumplida: al aparecer la tarjetita, el ícono salta con un anillo y
   destellos. Animación en el hijo (.mc-ic) con `both`, no en .mini-cp, que ya
   tiene la transición de transform (mismo gotcha de Android que .pocket-body). */
.mc-ring { position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--teal); opacity: 0; pointer-events: none; }
.mc-sp { position: absolute; width: 12px; height: 12px; background: var(--teal); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(0); pointer-events: none; }
.mc-sp:nth-of-type(2) { left: -13px; top: -10px; background: var(--violet); }
.mc-sp:nth-of-type(3) { right: -14px; top: -12px; }
.mc-sp:nth-of-type(4) { left: -12px; bottom: -11px; background: #3d7bff; }
.stage-won .mc-ic { animation: mc-hop 1.1s 0.35s both; }
.stage-won .mc-ring { animation: mc-ring 1.1s 0.35s both; }
.stage-won .mc-sp { animation: mc-spark 1.1s 0.35s both; }
.stage-won .mc-sp:nth-of-type(3) { animation-delay: 0.43s; }
.stage-won .mc-sp:nth-of-type(4) { animation-delay: 0.51s; }
@keyframes mc-hop { 0% { transform: scale(0.6); } 25% { transform: scale(1.2); } 38% { transform: none; } 55% { transform: translateY(-7px) scale(0.94, 1.08); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 70% { transform: scale(1.12, 0.88); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } 85%, 100% { transform: none; } }
@keyframes mc-ring { 0%, 65% { opacity: 0; transform: none; } 70% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes mc-spark { 0%, 60% { transform: scale(0) rotate(0); } 75% { transform: scale(1.5) rotate(45deg); } 100% { transform: scale(0) rotate(90deg); } }
.mc-t { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--violet); }
.mc-s { font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-top: 1px; }
.info { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(107, 77, 255, 0.07); border: 1px solid rgba(107, 77, 255, 0.16); text-align: left; }
.info-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.info-t { font-size: 0.78rem; font-weight: 700; color: var(--navy); }
.info-s { font-size: 0.75rem; color: #64748b; line-height: 1.35; margin-top: 2px; }
.mc-tag { margin-left: auto; flex: none; font-size: 0.62rem; font-weight: 700; color: var(--navy); background: rgba(0, 212, 179, 0.18); padding: 4px 8px; border-radius: 999px; }
.dots { display: inline-flex; gap: 5px; align-items: center; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); display: block; animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }

/* Toast + insignia al detectar la tarjeta en el Wallet. */
.toast-in { position: absolute; left: 24px; right: 24px; top: 192px; z-index: 9; opacity: 0; transform: translateY(-18px); transition: opacity 0.4s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.wallet-added .toast-in { opacity: 1; transform: none; }
/* Confirmación de la página (no imita un push): va debajo del título y
   empuja la tarjeta unos px para no taparla. */
.demo-confirm { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); border: 1.5px solid rgba(0, 212, 179, 0.55); box-shadow: var(--shadow-soft); color: var(--navy); font-size: 0.74rem; line-height: 1.35; font-weight: 600; text-align: left; }
.demo-confirm svg { flex: none; color: var(--teal); }
.s3.wallet-added .cardw.sel { transform: translateY(58px); }
.wbadge { position: absolute; top: 100%; margin-top: 12px; left: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 5px; background: var(--teal); color: var(--navy); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 212, 179, 0.45); opacity: 0; transform: scale(0.6); }
.wallet-added .cardw.sel .wbadge { animation: badge-once 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.s4 .wbadge, .s5 .wbadge, .s6 .wbadge { display: none; }
@keyframes badge-once { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 60% { opacity: 1; transform: translateX(-50%) scale(1.12); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
.confetti { position: absolute; width: 8px; height: 13px; border-radius: 2px; opacity: 0; z-index: 8; pointer-events: none; }
.wallet-added .confetti, .s5 .confetti { animation: fall 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
@keyframes fall { 0% { opacity: 0; transform: translateY(-60px) rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px) rotate(200deg); } }

/* Teléfono que escanea: una sola vez por toque (2.6 s). */
/* Teléfono del cajero: se ubica sobre el QR que escanea (--scan-x/--scan-y los mide
   aimScanner en demo.js, en px del escenario). Con posiciones fijas caía sobre la
   hoja en teléfonos bajos y tapaba los textos (revisión del usuario en el iPhone). */
.scan-phone { position: absolute; left: calc(var(--scan-x, 195px) - 42px); top: calc(var(--scan-y, 400px) - 100px); width: 84px; height: 160px; border-radius: 22px; background: linear-gradient(155deg, #2a3163 0%, #0b0f2b 62%); padding: 5px; box-sizing: border-box; box-shadow: 0 18px 36px rgba(11, 15, 43, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.07); z-index: 7; opacity: 0; transform: translate(150px, -70px) rotate(12deg); pointer-events: none; }
.scan-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 22px; height: 6px; margin-left: -11px; border-radius: 3px; background: #05071a; z-index: 3; }
.scanning .scan-phone { animation: phone-once 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.scan-screen { position: relative; width: 100%; height: 100%; border-radius: 17px; background: radial-gradient(120% 90% at 50% 45%, #323a70 0%, #12162f 72%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.scan-qr { width: 40px; height: 40px; background: #fff; border-radius: 5px; padding: 3px; box-sizing: border-box; opacity: 0.92; }
.scan-qr svg { width: 100%; height: 100%; color: var(--navy); display: block; }
.vf { position: absolute; width: 12px; height: 12px; border: 2.5px solid var(--teal); }
.vf.tl { top: 44px; left: 14px; border-right: 0; border-bottom: 0; } .vf.tr { top: 44px; right: 14px; border-left: 0; border-bottom: 0; }
.vf.bl { bottom: 44px; left: 14px; border-right: 0; border-top: 0; } .vf.br { bottom: 44px; right: 14px; border-left: 0; border-top: 0; }
.scan-line { position: absolute; left: 16px; right: 16px; height: 2px; top: 46px; opacity: 0; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.scanning .scan-line { animation: sweep-once 2.6s ease-in-out forwards; }
.scan-ok { position: absolute; inset: 0; background: rgba(0, 212, 179, 0.94); display: flex; align-items: center; justify-content: center; color: var(--navy); opacity: 0; }
.scanning .scan-ok { animation: ok-once 2.6s ease-out forwards; }
@keyframes phone-once { 0% { opacity: 0; transform: translate(150px, -70px) rotate(12deg); } 15% { opacity: 1; transform: translate(0, 0) rotate(-6deg); } 72% { opacity: 1; transform: translate(0, 0) rotate(-6deg); } 100% { opacity: 0; transform: translate(-150px, -70px) rotate(-14deg); } }
@keyframes sweep-once { 0%, 15% { top: 46px; opacity: 0; } 18% { opacity: 1; } 36% { top: 102px; } 52% { top: 46px; } 56%, 100% { top: 46px; opacity: 0; } }
@keyframes ok-once { 0%, 55% { opacity: 0; } 60%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
.pc-stamp.pop { animation: stamp-once 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes stamp-once { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
.pc-stamp:not(.filled) svg { opacity: 0; }
.pc-stamp.filled svg { opacity: 1; transition: opacity 0.2s 0.15s; }
.pc-stamp.gift svg { opacity: 1; color: var(--pc-empty); }

/* Cupón: entra en Premio, se perfora al canjear, flota al cierre. */
.cp { position: absolute; left: 55px; top: 320px; width: 280px; z-index: 5; opacity: 0; transform: translateY(90px) scale(0.95); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s; pointer-events: none; }
.s5 .cp, .s6 .cp { opacity: 1; transform: none; }
.coupon { position: relative; width: 280px; box-sizing: border-box; border-radius: 16px; padding: 16px 18px 18px; color: var(--pc-ink); box-shadow: var(--shadow-lift); overflow: hidden; }
.cp-strip { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.25); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cp-offer { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.15; }
.cp-sub { font-size: 0.72rem; opacity: 0.8; margin-top: 3px; }
.cp-qr { flex: none; border-radius: 8px; background: #fff; padding: 6px; line-height: 0; box-shadow: 0 2px 6px rgba(11, 15, 43, 0.18); }
.cp-qr svg { display: block; width: 52px; height: 52px; color: var(--navy); }
.rd-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--teal); color: var(--navy); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 9px; border-radius: 999px; }
.rd-check { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(0, 212, 179, 0.25); }
.cp-top { clip-path: inset(0 0 42% 0); transition: opacity 0.4s 0.3s; }
.cp-bottom { position: absolute; top: 0; left: 0; clip-path: inset(58% 0 0 0); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s; }
.perf { position: absolute; left: 12px; right: 12px; top: 58%; border-top: 2px dashed rgba(255, 255, 255, 0.85); opacity: 0; }
.cp-after { position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0.98); transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; filter: saturate(0.7); }
.redeemed .cp-top { opacity: 0; }
.redeemed .cp-bottom { transform: translateY(26px) rotate(4deg); opacity: 0; }
.redeemed .perf { animation: perf-once 0.9s ease-out; }
@keyframes perf-once { 0% { opacity: 0; } 20%, 60% { opacity: 1; } 100% { opacity: 0; } }
.redeemed .cp-after { opacity: 1; transform: none; }
.shine { position: absolute; top: -40%; bottom: -40%; width: 60px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-120px) rotate(12deg); }
.redeemed .shine { animation: shine 2.4s ease-in-out 0.6s infinite; }
@keyframes shine { 0% { transform: translateX(-120px) rotate(12deg); } 45%, 100% { transform: translateX(340px) rotate(12deg); } }
.s6 .cp { top: 292px; animation: float-b 5s ease-in-out infinite; }
@keyframes float-b { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(8px) rotate(1deg); } }
.float-shadow { position: absolute; left: 100px; right: 100px; top: 452px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(11, 15, 43, 0.22), transparent 70%); opacity: 0; transition: opacity 0.6s; }
.s6 .float-shadow { opacity: 1; animation: float-shadow 5s ease-in-out infinite; }
@keyframes float-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.88); } }

/* Hoja inferior y controles. */
.sheet { z-index: 6; }
.btn { cursor: pointer; border: 0; font-family: inherit; }
.btn:active { transform: scale(0.97); }
.hint { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; line-height: 1.45; color: #64748b; text-align: left; margin: 0; }
.hint svg { color: var(--violet); flex: none; margin-top: 2px; }
/* Esperando el Wallet: la campana emite ondas de radar para que se entienda
   que la página está escuchando. Con movimiento reducido quedan invisibles. */
.listen-ic { position: relative; flex: none; display: inline-flex; margin-top: 2px; }
.listen-ic svg { margin-top: 0; position: relative; z-index: 1; }
.listen-ic i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid var(--violet); opacity: 0; animation: listen 2.2s ease-out infinite; }
.listen-ic i + i { animation-delay: 1.1s; }
@keyframes listen { 0% { opacity: 0.7; transform: scale(0.8); } 100% { opacity: 0; transform: scale(2.6); } }
.poll-stopped .listen-ic i { animation: none; }
@media (prefers-reduced-motion: reduce) { .listen-ic i { animation: none !important; } }
/* Salto al teléfono desde el computador: el QR lleva el enlace del correo. */
.qr-hop { display: flex; align-items: center; gap: 14px; }
.qr-hop-code { flex: none; background: #fff; color: var(--navy); border: 1px solid rgba(11, 15, 43, 0.12); border-radius: 12px; padding: 6px; }
.qr-hop-code svg { width: 92px; height: 92px; display: block; }
.chip { cursor: pointer; font: inherit; }
.done-row { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 500; }
.done-row .d-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; }
/* `font: inherit` iba al final y pisaba el tamaño y el peso: el enlace salía
   más grande que el texto vecino. Va primero y luego se ajusta. */
.link { cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; text-align: center; color: var(--violet); background: none; border: 0; display: block; margin: 0 auto; text-decoration: none; }

/* ---------- Página real: escenario escalado, panel lateral, formulario ---------- */
/* overflow: clip donde exista: recorta igual que hidden pero no se deja
   desplazar al enfocar el campo del correo. */
.proto { position: relative; width: 390px; height: var(--stage-h, 844px); overflow: hidden; overflow: clip; background: #fff; box-sizing: border-box; }
.proto h2.demo-title { font-size: 1.55rem; line-height: 1.15; }
.demo-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 12px; box-sizing: border-box; transform: translateY(calc(-1 * var(--kb-shift, 0px))); transition: transform 0.2s ease; }
.demo-stage-wrap { --scale: 1; --stage-h: 844px; width: calc(390px * var(--scale)); height: calc(var(--stage-h) * var(--scale)); position: relative; border-radius: calc(28px * var(--scale)); overflow: hidden; box-shadow: var(--shadow-lift); }
.demo-stage { width: 390px; height: var(--stage-h, 844px); transform: scale(var(--scale)); transform-origin: 0 0; }
.demo-side { display: none; }
/* ---------- Escritorio (dirección A: escenario libre) ----------
   No es el escenario del teléfono metido en una caja: el header del sitio
   arriba, el riel cruzando el ancho, el relato y los controles en la columna
   izquierda y las tarjetas flotando a la derecha, sin marco. El DOM es el
   mismo que en móvil; acá se reubica. */
.demo-header { display: none; }
.stage-pill { display: none; }

@media (min-width: 960px) {
  .demo-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 56px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); border-bottom: 1px solid #e8ebfa; position: sticky; top: 0; z-index: 20; }
  .demo-header-brand { display: inline-flex; align-items: center; }
  .demo-header-brand img { display: block; width: 112px; height: auto; }
  .demo-header-nav { display: flex; align-items: center; gap: 30px; font-size: 0.9rem; font-weight: 500; }
  .demo-header-nav a { color: #475069; text-decoration: none; }
  .demo-header-nav a:hover { color: var(--violet); }
  .demo-header-cta { background: var(--grad-brand); color: #fff !important; font-weight: 700; border-radius: 999px; padding: 9px 18px; }

  /* La cáscara deja de centrar un teléfono: es una página. */
  .demo-shell { display: block; padding: 0; gap: 0; min-height: 0; }
  .demo-side { display: none; }
  .demo-stage-wrap { width: 100%; height: auto; border-radius: 0; box-shadow: none; overflow: visible; }
  .demo-stage { width: 100%; height: auto; transform: none; }
  /* Alto = viewport menos header y pie (~150 px): el pie queda abajo sin scroll
     en pantallas de 768 a 900 px; 600 px es lo mínimo que pide la escena. */
  .proto { width: 100%; height: auto; min-height: max(600px, calc(100dvh - 150px)); padding: 30px 72px 28px; box-sizing: border-box; background: transparent; overflow: visible; --card-k: 1.16; --scene-r: 9%; }
  .proto .logo { display: none; }
  .waves { inset: 0; height: auto; opacity: 0.6; -webkit-mask-image: linear-gradient(#000 45%, transparent 95%); mask-image: linear-gradient(#000 45%, transparent 95%); }

  /* Riel completo arriba, ya no dentro del teléfono. */
  /* Relativos y por encima de .waves: un absoluto pinta sobre el flujo normal. */
  .rail, .title-block, .sheet { position: relative; z-index: 2; }
  .rail { top: 0; margin: 0 auto 40px; }
  .handle { display: none; }
  .rail-step { width: 128px; }
  .rail-dot { width: 34px; height: 34px; font-size: 0.86rem; }
  .rail-line { width: 56px; }
  .rail-label { font-size: 0.68rem; }

  /* Columna izquierda: título, controles y la insignia de wallets. */
  .title-block { width: 440px; text-align: left; gap: 10px; margin-top: 70px; left: auto; right: auto; top: auto; }
  .proto h2.demo-title { font-size: 3rem; line-height: 1.06; letter-spacing: -0.02em; }
  .title-block .muted { font-size: 1.08rem; line-height: 1.55; max-width: 38ch; }
  .sheet { width: 460px; padding: 26px 0 0; background: transparent; box-shadow: none; border-radius: 0; left: auto; right: auto; bottom: auto; max-height: none; overflow: visible; }
  .sheet > .grab, .sheet-grab { display: none; }
  .stage-pill { display: inline-flex; margin-top: 30px; }
  .chips-clip { max-width: 460px; overflow: visible; }
  .chips { transform: none !important; flex-wrap: wrap; width: auto; }
  .btn-block { width: auto; min-width: 280px; }
  .link { margin: 0; text-align: left; }
  .link-row { justify-content: flex-start; }
  /* .sheet delante: la regla base .center viene después en el archivo. */
  .sheet .center { text-align: left; }
  .hint { justify-content: flex-start; }

  /* Escenario a la derecha: las tarjetas viven sobre el fondo. */
  .cardw { left: auto; right: var(--scene-r); top: 150px; }
  .toast-in { left: auto; right: var(--scene-r); width: 380px; top: 96px; }
  .mailphone { left: auto; right: calc(var(--scene-r) + 40px); top: 196px; }
  /* La tarjeta de escritorio es grande (--card-k 1.16): entra más chica (0.62) a una
     billetera centrada con ella. Billetera en 480 (su borde de abajo queda bajo la
     tarjeta antes de entrar, así el recorte de abajo nunca la deja asomar por debajo)
     y tarjeta en 150: 480 - 14 - 150. */
  .pocket { left: auto; margin-left: 0; right: calc(var(--scene-r) + 53px); width: calc(280px * 0.62); top: 480px; height: calc(280px * 0.62 * 0.72); }
  .proto { --pocket-dy: 316px; }
  /* La billetera baja es más corta que la tarjeta y en escritorio nada la tapa por
     debajo: la tarjeta se recorta al borde de abajo de la billetera, al mismo ritmo
     con que baja. Visible (px de .cardw, que ya no se escala): alto + 14. */
  /* El recorte arranca justo en el fondo de la billetera y sube lo mismo que baja la
     tarjeta (de 28 px a --pocket-dy), así el borde queda quieto y nada asoma por debajo.
     La tarjeta en reposo (313 x 1.16) queda dentro. */
  .s3 .cardw.sel { clip-path: inset(-120px -120px calc(100% - (280px * 0.62 * 0.72 + 14px + var(--pocket-dy) - 28px)) -120px); }
  /* El achique va en el giro y no en .cardw: la escala 1.16 vive en las animaciones de
     .hero-card, y al terminar el giro la tarjeta saltaba de 219 a 188 px a mitad de la
     bajada. Así se achica al ancho de la billetera mientras gira por encima de ella
     (antes la billetera chica aparecía pegada sobre la tarjeta grande) y después baja.
     Origen arriba, también en la flotación del paso, para que el giro no la corra; la
     tarjeta sube lo que bajaba por el origen (313 px de alto x 0.16 / 2 = 25 px) para quedar
     donde estaba (si no, en pantallas de 650 px salía de la vista). */
  .s3 .cardw.sel .hero-card { transform-origin: 50% 0; }
  .s3 .cardw.sel { transform: translateY(calc(28px - 313px * (var(--card-k, 1) - 1) / 2)); }
  .adding .cardw.sel .hero-card { animation: spin-desk 0.8s ease-in-out both; }
  @keyframes spin-desk { from { transform: scale(var(--card-k, 1)) rotateY(0deg); } to { transform: scale(0.62) rotateY(360deg); } }
  .adding .cardw.sel { transform: translateY(var(--pocket-dy)); clip-path: inset(-120px -120px calc(100% - (280px * 0.62 * 0.72 + 14px)) -120px); transition: transform 0.7s cubic-bezier(0.55, 0, 0.3, 1) 0.4s, clip-path 0.7s cubic-bezier(0.55, 0, 0.3, 1) 0.4s; }
  /* La transición se repite: .adding sigue puesta al guardar y la de arriba (sin opacity)
     le ganaba a la de la base; la tarjeta se borraba de golpe con la billetera a la vista. */
  .stowing .cardw.sel { transform: translateY(calc(var(--pocket-dy) + 160px)); clip-path: inset(-120px -120px calc(100% - (280px * 0.62 * 0.72 + 14px)) -120px); transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.25s 0.3s; }
  /* En la billetera la tarjeta mide 280 x 0.62 (la escala 1.16 solo vive en sus animaciones). */
  .pocket .bar { width: calc(280px * 0.62); margin-left: calc(-140px * 0.62); }
  .mini-cp { left: auto; right: var(--scene-r); top: 600px; }
  .cp { left: auto; right: var(--scene-r); top: 300px; }
  .confetti { left: auto !important; right: 20%; }
  /* Los estados ocultos (bolsillo bajado, teléfono entrando de costado) no
     deben estirar la página: sin esto aparece scroll vertical y horizontal. */
  .pocket { transform: translateY(40px); }
  .wallet-added .pocket { transform: translateY(40px); }
  .demo-shell { overflow-x: clip; }
  /* Al bajar, la caja de la tarjeta (313 px, el recorte no la achica) y la billetera salen
     por debajo del escenario: aparecía la barra de scroll y la página se corría 13 px a
     mitad de la animación. El margen (60) es menor que el pie (72): se ve lo que asoma
     sobre el pie sin alargar la página. */
  .proto.s3 { overflow: clip; overflow-clip-margin: 60px; }
  /* Cierre: el encabezado del resumen toma el lugar del título grande y la
     pila de tarjetas se abre para que se lea cada pieza. */
  .s6 .sheet { width: 520px; }
  .s6 .sheet-title { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; }
  .s6 .summary-head { gap: 10px; margin-bottom: 8px; }
  .s6 .summary-head .sheet-text { font-size: 1.08rem; line-height: 1.55; }
  .s6 .cp { top: 300px; }
  .s6 .mini-cp { top: 566px; }
  .float-shadow { left: auto; right: calc(var(--scene-r) + 40px); width: 200px; top: 676px; }
  /* En el paso del formulario la tarjeta no se achica: acompaña a la derecha. */
  .s1 .cardw.sel { transform: translateY(30px) scale(0.92); }
  .link-row { gap: 22px; }
  .demo-footer { padding: 8px 0 28px; }
}
/* Laptops chicas y tablets horizontales: misma composición, más apretada, y
   el abanico del paso 0 corrido hacia adentro para que no se corte. */
@media (min-width: 960px) and (max-width: 1279px) {
  .demo-header { padding: 12px 32px; }
  .demo-header-nav { gap: 22px; }
  .proto { padding: 30px 40px 28px; --card-k: 1; --scene-r: 14%; }
  .rail-step { width: 104px; }
  .rail-line { width: 40px; }
  .title-block { width: 380px; }
  .proto h2.demo-title { font-size: 2.5rem; }
  .sheet, .chips-clip { width: 400px; max-width: 400px; }
  .s6 .sheet { width: 420px; }
  .s6 .sheet-title { font-size: 2.2rem; }
  .toast-in { width: 340px; }
}
/* Tablet vertical: el escenario del teléfono centrado, y junto con el selector
   de idioma se calcula para caber en el viewport visual (fitStage). */
@media (max-width: 959px) {
  .demo-stage-wrap { border-radius: 0; box-shadow: none; }
  /* El pie vive fuera de .demo-shell (base.html): la página entera es la
     columna que tiene que caber, si no siempre queda scroll. */
  .demo-body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .demo-shell { padding: 0; gap: 0; flex: 1; min-height: 0; justify-content: flex-start; }
  .demo-footer { flex: none; padding: 6px 0 10px; }
}
/* Teléfono (fitStage marca .demo-phone): el escenario llena el ancho y el
   alto de la pantalla, sin franjas a los lados, y la página scrollea normal:
   el selector de idioma es el final de la página, no flota sobre la hoja ni
   sube con el teclado. Fondo blanco, el mismo de la hoja, para que el pie la
   continúe y el rebote del scroll no muestre otro color. */
@media (max-width: 959px) {
  .demo-body.demo-phone { height: auto; overflow: visible; display: block; background: #fff; }
  .demo-phone .demo-shell { display: block; min-height: 0; }
  .demo-stage-wrap.fill { width: 100%; }
  .demo-phone .demo-footer { padding: 14px 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
}
.demo-footer { padding: 12px 0 24px; }
/* Respiro entre bloques de la hoja: la caja informativa, el botón y la pista
   quedaban pegados (revisión del usuario). */
.sheet-step { display: flex; flex-direction: column; gap: 16px; }
/* Los bloques por estado (data-when) también separan lo suyo: el botón, la
   pista y "Ya la agregué" quedaban pegados. */
.sheet-step > div[data-when] { display: flex; flex-direction: column; gap: 12px; }
/* Modo muestra (spec 2026-09-16): el `data-when="real"` que envuelve el
   contenido real dentro de otro `data-when` es un bloque plano y sus hijos
   (hint, p, link-row) quedaban pegados sin la columna ni el espaciado de arriba. */
.sheet-step > div[data-when] > div[data-when] { display: flex; flex-direction: column; gap: 12px; }
.sheet-step[hidden], [data-when][hidden] { display: none !important; }
.sheet-title { font-size: 1.35rem; line-height: 1.2; }
.sheet-text { font-size: 0.9rem; }
.form-head { display: flex; flex-direction: column; gap: 6px; }
.passito-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--navy); }
.passito-input:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(107, 77, 255, 0.12); color: var(--navy); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--violet); flex: none; }
.btn-block { width: 100%; box-sizing: border-box; text-decoration: none; }
.btn-big { padding: 1.1rem 1.8rem; font-size: 1.05rem; }
.btn-wallet img { width: 26px; height: auto; }
.late-wallet { display: flex; flex-direction: column; gap: 8px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.status-line { font-size: 0.92rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; }
.center { text-align: center; }
.link-row { display: flex; gap: 18px; justify-content: center; }
.link-muted { color: #64748b; }
.done-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.summary-head { display: flex; flex-direction: column; gap: 6px; }
.demo-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff1f2; color: #9f1239; font-size: 0.82rem; }
.demo-message { max-width: 420px; margin: 80px auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.round-chip { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: none; background: var(--navy); color: #fff; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; }
.s6 .cardw.sel .round-chip { display: inline-flex; }
.s4 .toast-in, .s5 .toast-in, .s6 .toast-in, .s7 .toast-in { opacity: 0; }
.s7 .cardw.sel { opacity: 0.35; }
/* Swipe entre diseños (paso 0): el navegador se queda con el scroll vertical y
   deja el arrastre horizontal a demo.js. */
.s0 .cardw { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.s0 .cardw img, .s0 .cardw svg { -webkit-user-drag: none; }
.rail { list-style: none; margin: 0; padding: 0; }
.btn:focus-visible, .chip:focus-visible, .link:focus-visible, .btn-wallet:focus-visible { outline: 3px solid rgba(107, 77, 255, 0.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .proto *, .proto *::before, .proto *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Pantallas cortas (menos de ~800 px de alto útil) ----------
   El escenario del prototipo mide 390x844. En un teléfono chico, ajustarlo
   por alto dejaba todo un 20% más pequeño y con franjas a los lados. En modo
   compacto el JS lo ajusta por ancho y recorta el alto del escenario
   (--stage-h): la hoja sigue anclada abajo y el bloque de arriba sube. */
.proto.compact .logo { display: none; }
.proto.compact .rail { top: 18px; }
.proto.compact .title-block { top: 74px; }
.proto.compact .cardw { top: 150px; }
.proto.compact .toast-in { top: 138px; }
.proto.compact .mailphone { top: 178px; height: 352px; }
.proto.compact .cp { top: 250px; }
/* El cupón se achica con la misma medida que la tarjeta. En compacto la
   tarjeta va a `scale(var(--card-k))` y el cupón se quedaba a tamaño completo:
   salía más grande que ella y se le montaba encima (visto en Firefox Android,
   que entra en compacto porque su barra deja menos alto). La escala va en el
   `.coupon` de adentro, no en `.cp`, que es quien lleva la entrada y el
   flotado. */
.proto.compact .coupon { transform: scale(var(--card-k)); transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.proto.compact .cp-after { transform: scale(calc(0.98 * var(--card-k))); }
.proto.compact .redeemed .cp-after { transform: scale(var(--card-k)); }
.proto.compact .redeemed .cp-bottom { transform: scale(var(--card-k)) translateY(26px) rotate(4deg); }
/* El cupón chico no tiene envoltorio propio: se achica por medidas, y se
   recentra porque el escenario mide 390 y él vive en left: 55px. */
.proto.compact .mini-cp { width: calc(280px * var(--card-k)); left: calc(55px + 280px * (1 - var(--card-k)) / 2); padding: 8px 10px; font-size: 0.92em; }
.proto.compact .pocket { top: calc(var(--stage-h, 844px) - 80px - var(--pocket-h)); }
/* Misma cuenta que en la base: top de la billetera (stage-h - 80 - alto) - 14 - top de la tarjeta (150). */
.proto.compact { --pocket-dy: calc(var(--stage-h, 844px) - 244px - 280px * var(--card-k, 1) * 0.72); }
.proto.compact .mini-cp { top: calc(var(--stage-h, 844px) - 240px); }
/* Paso 4, compacto: la hoja arranca donde termina la tarjeta, así que el aviso
   de etapa no tiene hueco debajo y caía encima del QR, recortado por la hoja
   (revisión del usuario en el iPhone). Va en la banda de los avisos (la misma
   de .toast-in), con alto fijo y una sola línea: el nombre del cupón lo
   estiraba hasta cubrir media tarjeta. */
.proto.compact.s4 .mini-cp { top: 128px; left: 24px; width: calc(100% - 48px); height: 40px; padding: 0 10px; gap: 8px; border-radius: 12px; z-index: 9; }
.proto.compact.s4 .mini-cp > div { min-width: 0; }
.proto.compact.s4 .mc-ic { width: 26px; height: 26px; border-radius: 8px; }
.proto.compact.s4 .mc-t { font-size: 0.56rem; }
.proto.compact.s4 .mc-s { font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto.compact.s4 .mc-tag { font-size: 0.54rem; padding: 3px 6px; }
.proto.compact .s2 .cardw.sel, .proto.compact.s2 .cardw.sel { transform: translateY(186px) scale(0.5); }
.proto.compact .demo-confirm { font-size: 0.72rem; padding: 7px 10px; }

/* Error inline del formulario: el globo nativo del navegador no se ve dentro
   del escenario escalado, así que los mensajes los pinta la página. */
.field-error { margin: -6px 0 0; font-size: 0.78rem; color: #b91c1c; }
.passito-input.invalid { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }

/* En compacto la tarjeta se achica un poco para no meterse debajo de la hoja. */
/* La tarjeta se achica con --card-k: las animaciones la componen en sus
   keyframes, si no el transform estático quedaría pisado. */
.proto.compact { --card-k: 0.78; }
.proto.compact h2.demo-title { font-size: 1.3rem; }
.proto.compact .title-block .muted { font-size: 0.82rem; }
.proto.compact .cardw .pass-card { transform: scale(var(--card-k)); transform-origin: 50% 0; }
.proto.compact .cardw .pass-card { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
/* Paso de sellar en teléfono: la hoja es alta (etapa, botón y pista) y tapaba el QR que
   escanea el cajero. La tarjeta se achica un poco y sube para que el QR quede a la vista;
   la tarjeta "Etapa cumplida" se aparta mientras dura el escaneo. */
.proto.compact.s4 { --card-k: 0.72; }
.proto.compact.s4 .cardw.sel { transform: translateY(18px); }
.proto.compact.scanning .mini-cp { opacity: 0; transform: translateY(24px); }
.proto.compact .hero-card { transform-origin: 50% 0; }
.proto.compact.s0 .cardw.pos-0 { transform: translateY(8px); }
.proto.compact.s0 .cardw.pos-1 { transform: translate(104px, 4px) rotate(7deg) scale(0.92); }
.proto.compact.s0 .cardw.pos-3 { transform: translate(-104px, 4px) rotate(-7deg) scale(0.92); }
/* Cierre en teléfono: la hoja con el resumen es alta y tapaba la tarjeta; sube
   para asomarse entre los pasos y la hoja. Especificidad alta a propósito:
   `.wallet-added .cardw.sel` viene después y pisaba la regla general de .s6. */
.proto.compact.s6 .cardw.sel { transform: translateY(-56px) rotate(-4deg) scale(0.88); }

/* En compacto la hoja recorta su propio alto y, si el contenido no cabe
   (el cierre con la lista), scrollea ella sola en vez de irse por debajo. */
.proto.compact .sheet { padding: 16px 20px 18px; max-height: calc(var(--stage-h, 844px) - 118px); overflow-y: auto; overscroll-behavior: contain; }
.proto.compact .sheet-step { gap: 12px; }
.proto.compact .sheet-step > div[data-when] { gap: 8px; }
/* Mismo respiro anidado que la variante normal, pero con el gap compacto. */
.proto.compact .sheet-step > div[data-when] > div[data-when] { gap: 8px; }
.proto.compact .sheet-title { font-size: 1.15rem; }
.proto.compact .sheet-text { font-size: 0.84rem; }
.proto.compact .done-list { gap: 8px; }
.proto.compact .btn-big { padding: 0.9rem 1.4rem; font-size: 0.98rem; }

/* ---------- Modo muestra (spec 2026-09-16) ----------
   Etiqueta junto al título, aviso en la hoja y la notificación dibujada. */
.sim-pill { align-self: center; display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
/* La confirmación "¡Ya está en tu Wallet!" habla del Wallet real. */
.sim .toast-in { display: none; }
.sim-notif { position: absolute; left: 16px; right: 16px; top: 12px; z-index: 12; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-lift); text-align: left; opacity: 0; transform: translateY(-16px); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.notif-on .sim-notif { opacity: 1; transform: none; }
.notif-ios .sim-notif { border-radius: 22px; background: rgba(245, 245, 247, 0.97); }
.sim-notif-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.sim-notif-app { margin: 0; font-size: 0.62rem; font-weight: 600; color: #64748b; }
.sim-notif-title { margin: 1px 0 0; font-size: 0.76rem; font-weight: 700; color: var(--navy); }
.sim-notif-body { margin: 1px 0 0; font-size: 0.74rem; line-height: 1.35; color: var(--navy); }
.sim-notif-label { display: inline-block; margin-top: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); }
@media (min-width: 960px) {
  .sim-pill { align-self: flex-start; }
  .sim-notif { left: auto; right: var(--scene-r); width: 360px; top: 40px; }
}