/* taggy — home (dirección A · Mostrador) */

/* ---------- Fuentes (autoalojadas, subconjunto latino) ---------- */
@font-face { font-family: 'Bagel Fat One'; src: url(../fuentes/bagel-fat-one-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(../fuentes/bricolage-latin-wght.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
/* Fallbacks con métricas ajustadas (calculadas con fontTools contra Arial): el cambio de fuente no mueve el layout */
@font-face { font-family: 'Bagel fallback'; src: local('Arial'); size-adjust: 102.7%; ascent-override: 113%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage fallback'; src: local('Arial'); size-adjust: 111.2%; ascent-override: 83.7%; descent-override: 24.3%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --marca-naranja: #FB6B35;
  --marca-blanco: #FAFAFA;
  --marca-terracota: #BA7056;
  --marca-cacao: #7A6057;
  --marca-niebla: #D8D6D6;
  --color-tinta: #2A1B14;
  --color-naranja-texto: #C4461A;
  --naranja-sombra: #c9501f;
  --naranja-claro: #ff8a5c;
  --papel: #fff;
  --rosado: #fff1ea;

  --fuente-display: 'Bagel Fat One', 'Bagel fallback', sans-serif;
  --fuente-texto: 'Bricolage Grotesque', 'Bricolage fallback', system-ui, sans-serif;
  --fs-display: clamp(2.7rem, 11.5vw, 5.6rem);
  --fs-h2: clamp(2.1rem, 7vw, 3.7rem);
  --fs-h3: clamp(1.15rem, 1vw + .9rem, 1.35rem);
  --fs-bajada: clamp(1.08rem, 1.4vw + .7rem, 1.3rem);

  --ease-firma: cubic-bezier(.16, 1, .3, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --ease-sello: cubic-bezier(.34, 1.56, .64, 1);
  --t-rapido: 150ms;
  --t-ui: 300ms;
  --t-reveal: 800ms;

  --ancho: 1240px;
  --gutter: 20px;
  --seccion: clamp(72px, 10vw, 128px);
  --radio: 24px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--marca-blanco); color: var(--color-tinta); font: 400 1rem/1.6 var(--fuente-texto); font-optical-sizing: auto; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font: 400 var(--fs-h2)/1 var(--fuente-display); letter-spacing: -.01em; text-wrap: balance; }
h3 { font: 700 var(--fs-h3)/1.25 var(--fuente-texto); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.intro { margin-top: 18px; max-width: 58ch; font-size: var(--fs-bajada); line-height: 1.5; text-wrap: pretty; }
.ejemplo { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--marca-cacao); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--color-tinta); color: var(--marca-blanco); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer; border: 0;
  transition: transform var(--t-rapido) var(--ease-ui), box-shadow var(--t-rapido) var(--ease-ui), background var(--t-rapido) var(--ease-ui); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-principal { background: var(--marca-naranja); color: var(--color-tinta); padding: 16px clamp(16px, 4vw, 26px); font-size: clamp(.95rem, 4.1vw, 1.05rem); white-space: nowrap; box-shadow: 0 4px 0 var(--naranja-sombra); }
.btn-principal:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--naranja-sombra); }
.btn-oscuro { background: var(--color-tinta); color: var(--marca-blanco); box-shadow: 0 4px 0 #000; }
.btn-oscuro:active { box-shadow: 0 1px 0 #000; }
.btn-chico { padding: 10px 16px; font-size: .9rem; box-shadow: 0 3px 0 var(--naranja-sombra); }
@media (hover: hover) {
  .btn-principal:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--naranja-sombra); }
  .btn-oscuro:hover { box-shadow: 0 6px 0 #000; background: #3a271e; }
}
.respaldo-wa { margin-top: 10px; font-size: .82rem; color: var(--marca-cacao); }
.link { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--marca-naranja); }

/* ---------- Header (M-09) ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--marca-blanco); transition: transform var(--t-ui) var(--ease-firma), box-shadow var(--t-ui) var(--ease-ui); }
/* Sin backdrop-filter: medido en mobile, el vidrio del header sticky sumaba ~1,5 s de estilo y layout al cargar (CPU 4×) */
.barra.oculta { transform: translateY(-100%); }
.barra.con-sombra { box-shadow: 0 1px 0 var(--marca-niebla); }
.barra-int { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { display: inline-flex; width: 92px; color: var(--marca-naranja); }
.logo svg { width: 100%; height: auto; fill: currentColor; }
.nav { display: none; gap: 28px; font-weight: 600; font-size: .95rem; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--color-naranja-texto); }
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.ingresar { position: relative; }
.ingresar-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0; font-weight: 600; font-size: .95rem; cursor: pointer; padding: 8px 4px; }
.ingresar-btn svg { width: 14px; height: 14px; transition: transform var(--t-ui) var(--ease-firma); }
.ingresar-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-ingresar { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--papel); border-radius: 16px; box-shadow: 0 18px 40px -16px rgb(42 27 20 / .35), 0 0 0 1px var(--marca-niebla);
  transform-origin: top right; animation: abre var(--t-ui) var(--ease-firma); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.menu-ingresar a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu-ingresar a small { display: block; font-weight: 400; color: var(--marca-cacao); font-size: .8rem; }
.menu-ingresar a:hover, .menu-ingresar a:focus-visible { background: var(--rosado); }
.ingresar-mobile { display: none; }

/* ---------- Hero ---------- */
.hero { --mostrador: 132px; position: relative; overflow: clip; isolation: isolate; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--mostrador); z-index: -1; background: var(--marca-naranja); box-shadow: 0 10px 0 var(--naranja-claro) inset; }
.hero-grilla { display: grid; padding-top: 18px; }
.texto-hero { display: contents; }
.texto-hero > * { grid-column: 1; }
h1 { font: 400 var(--fs-display)/.95 var(--fuente-display); letter-spacing: -.01em; text-wrap: balance; }
.bajada { margin-top: 22px; max-width: 34ch; font-size: var(--fs-bajada); line-height: 1.5; text-wrap: pretty; }
.bajada .rota { color: var(--color-naranja-texto); font-weight: 700; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.ctas .btn-principal { flex: 1 1 100%; }
.confianza { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--marca-cacao); font-weight: 500; }
.confianza li { display: flex; align-items: center; gap: 7px; }
.confianza svg { width: 18px; height: 18px; flex: none; fill: var(--marca-naranja); }
.escena { position: relative; display: grid; justify-items: center; margin-top: 34px; padding-bottom: 18px; }
.lado-tarjeta { position: relative; display: grid; justify-items: center; width: min(100%, 340px); }

/* ---------- Palabra rotativa (M-01 + fadeInUp) ---------- */
.rota { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rota > span { grid-area: 1 / 1; white-space: nowrap; visibility: hidden; }
.rota > span.activa { visibility: visible; }
.js .rota > span.activa.entra { animation: fadeInUp .7s var(--ease-firma) both; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } }
.rota-estatica { display: none; }

/* ---------- Titular cinético (M-36) ---------- */
.m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js .hero .m > span { display: inline-block; animation: sube .55s var(--ease-firma) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes sube { from { transform: translateY(110%); } }

/* ---------- Tarjeta de sellos (componente) ---------- */
.invita { margin: 0 0 12px; text-align: center; font: 600 .95rem/1.2 var(--fuente-texto); color: var(--marca-cacao); }
.invita svg { display: inline-block; width: 1.1em; vertical-align: -.2em; margin-right: .3em; fill: var(--marca-naranja); }
.tarjeta-escena { perspective: 1200px; width: min(100%, 340px); }
.tarjeta {
  --tj-fondo: linear-gradient(145deg, #8a6a5f 0%, var(--marca-cacao) 48%, #5f4740 100%);
  --tj-texto: var(--marca-blanco);
  --tj-globo-vacio: rgb(255 255 255 / .2);
  --tj-globo-lleno: var(--marca-blanco);
  --tj-marca: var(--marca-naranja);
  position: relative; display: grid; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
  transform-style: preserve-3d; transition: transform .8s var(--ease-firma); -webkit-tap-highlight-color: transparent;
}
.tarjeta.girada { transform: rotateY(180deg); }
.cara { position: absolute; inset: 0; border-radius: 30px; padding: 26px 24px 24px; color: var(--tj-texto); background: var(--tj-fondo); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 30px 60px -28px rgb(42 27 20 / .55), 0 12px 24px -16px rgb(42 27 20 / .35); transition: background var(--t-reveal) var(--ease-firma); }
.cara::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / .22), transparent 55%); }
.frente { position: relative; display: block; }
.dorso { transform: rotateY(180deg); display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; }
.tj-comercio { display: block; font: 600 .95rem/1.2 var(--fuente-texto); opacity: .92; }
.tj-cuenta { display: block; margin: 4px 0 18px; font: 400 2.6rem/1 var(--fuente-display); }
.tj-cuenta small { font-size: .55em; opacity: .7; }
.globos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.globo { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--tj-globo-vacio); font: 600 1.05rem/1 var(--fuente-texto); color: var(--tj-texto); transition: background var(--t-ui) var(--ease-ui); }
.globo svg { width: 38%; height: auto; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.globo.lleno { background: var(--tj-globo-lleno); color: var(--tj-marca); }
.globo.nuevo { animation: sellar .55s var(--ease-sello) both; }
@keyframes sellar { 0% { transform: scale(.55); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.globo .mas { position: absolute; top: -6px; right: -4px; font: 400 1.4rem/1 var(--fuente-display); color: var(--tj-marca); pointer-events: none; opacity: 0; }
.globo.nuevo .mas { animation: mas .8s var(--ease-firma) both; }
@keyframes mas { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }
.qr { display: block; width: 62%; aspect-ratio: 1; background: var(--marca-blanco); border-radius: 18px; padding: 12px; }
.qr svg { width: 100%; height: 100%; }
.tj-codigo-label { display: block; font: 500 .78rem/1.3 var(--fuente-texto); opacity: .85; }
.tj-codigo { display: block; font: 700 1.25rem/1 var(--fuente-texto); letter-spacing: .18em; }
.tarjeta-acciones { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.btn-tarjeta { border: 1.5px solid currentColor; background: var(--marca-blanco); color: var(--color-tinta); border-radius: 999px; padding: 9px 16px; font: 600 .9rem/1 var(--fuente-texto); cursor: pointer; }
.tarjeta-estado { min-height: 2.6em; margin-top: 10px; text-align: center; font: 500 .92rem/1.3 var(--fuente-texto); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-firma); transform-style: preserve-3d; }
}

/* ---------- Tickets (recurso de la dirección A) ---------- */
.ticket { position: relative; background: var(--papel); color: var(--color-tinta); padding: 16px 18px 26px; box-shadow: 0 14px 28px -14px rgb(42 27 20 / .45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.t-nombre { font-weight: 700; font-size: .95rem; }
.t-seg { display: inline-block; margin: 6px 0 8px; padding: 3px 9px; border-radius: 999px; background: var(--rosado); font-weight: 600; font-size: .85rem; }
.t-fila { display: flex; justify-content: space-between; gap: 10px; border-top: 1.5px dashed var(--marca-niebla); padding-top: 6px; color: var(--marca-cacao); font-size: .82rem; }
.t-fila b { color: var(--color-tinta); white-space: nowrap; }
.t-ej { margin-top: 8px; font-size: .7rem; color: var(--marca-cacao); }
.ticket.imprime { animation: imprime .7s var(--ease-firma) both; }
@keyframes imprime { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.hero .ticket { position: absolute; width: 196px; font-size: .82rem; line-height: 1.35; z-index: 2; display: none; }
.ticket-1 { right: -150px; top: -26px; rotate: 5deg; }
.ticket-2 { left: -176px; bottom: 26px; rotate: -6deg; }

/* ---------- §2 Prueba rápida (sobre el mostrador) ---------- */
.prueba { background: var(--marca-naranja); padding-block: 8px 64px; overflow: clip; }
.prueba-titulo { text-align: center; font: 400 clamp(2.4rem, 9vw, 3.6rem)/1 var(--fuente-display); margin-bottom: 26px; } /* mismo estilo que las cifras */
.cinta { overflow: clip; mask-image: linear-gradient(90deg, #0000, #000 8%, #000 92%, #0000); -webkit-mask-image: linear-gradient(90deg, #0000, #000 8%, #000 92%, #0000); }
.cinta-pista { display: flex; width: max-content; animation: cinta 45s linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista, .cinta.pausada .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-33.333%); } }
.cinta-grupo { display: flex; gap: 12px; padding-right: 12px; margin: 0; list-style: none; padding-left: 0; }
.rubro { display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 18px 9px 12px; border-radius: 999px; background: var(--marca-blanco); color: var(--color-tinta); font-weight: 700; }
.rubro svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--color-naranja-texto); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- §3 El problema ---------- */
.problema-grilla { display: grid; gap: 40px; }
.problema-texto p + p { margin-top: 14px; }
.problema-texto .lead { font-size: var(--fs-bajada); line-height: 1.5; margin-top: 20px; }
.problema-texto .problema-link { margin-top: 22px; }
/* §3 Cartón vs. celular: el contraste anónima / con nombre, sin tabla */
.carton-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; max-width: 460px; width: 100%; justify-self: center; padding-block: 12px 34px; }
.carton { position: relative; aspect-ratio: 1.6; padding: 14px 16px; border-radius: 6px; background: linear-gradient(160deg, #eadbc2, #d9c5a6); color: #6b5640; rotate: -7deg; box-shadow: 0 14px 24px -16px rgb(42 27 20 / .6); clip-path: polygon(0 3%, 12% 0, 30% 2%, 55% 0, 80% 3%, 100% 0, 98% 40%, 100% 72%, 97% 100%, 70% 97%, 42% 100%, 15% 97%, 0 100%, 2% 60%); display: grid; align-content: start; gap: 8px; }
.carton::before { content: ''; position: absolute; inset: 0 48% 0 auto; width: 1.5px; background: rgb(107 86 64 / .25); } /* doblez */
.carton-titulo { font: 700 .7rem/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; }
.carton-sellos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.carton-sellos i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgb(107 86 64 / .5); }
.carton-sellos i.s { border: 2.5px solid rgb(196 70 26 / .55); rotate: 12deg; }
.carton-linea { font-size: .68rem; letter-spacing: .04em; }
.carton-mancha { position: absolute; right: 10%; bottom: 8%; width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgb(122 96 87 / .22); }
.carton-rotulo { position: absolute; bottom: 0; translate: -50% 0; white-space: nowrap; font-weight: 700; font-size: .85rem; color: var(--marca-cacao); }
.rotulo-a { left: 25%; }
.rotulo-b { left: 75%; color: var(--color-naranja-texto); }
.celu-mini { position: relative; justify-self: center; width: min(100%, 168px); aspect-ratio: .56; border-radius: 30px; background: var(--color-tinta); padding: 9px; rotate: 4deg; box-shadow: 0 22px 34px -20px rgb(42 27 20 / .75); }
.celu-mini-pantalla { height: 100%; border-radius: 22px; background: var(--marca-blanco); padding: 18px 10px; display: grid; align-content: center; gap: 12px; }
.cm-tarjeta { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(145deg, #8a6a5f, #5f4740); color: var(--marca-blanco); }
.cm-tarjeta b { font: 400 1.4rem/1 var(--fuente-display); }
.cm-tarjeta small { font-size: .8rem; opacity: .8; }
.cm-globos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cm-globos i { aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .25); }
.cm-globos i.l { background: var(--marca-naranja); }
.cm-cliente { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; background: var(--rosado); font-size: .72rem; font-weight: 600; }
.cm-cliente b { font-size: .85rem; }
.js .carton.revela { transform: translate(-24px, 12px); }
.js .celu-mini.revela { transform: translate(24px, 12px); }
.js .carton.revela.visto, .js .celu-mini.revela.visto { transform: none; }

/* ---------- §4 Cómo funciona ---------- */
/* §4 Recorrido: tres pasos unidos por una línea que se completa al verla */
.recorrido { display: grid; margin: 44px 0 0; padding: 0; list-style: none; }
.rec-paso { position: relative; display: grid; grid-template-columns: 64px 1fr; align-content: start; column-gap: 18px; padding-bottom: 34px; }
.rec-paso:last-child { padding-bottom: 0; }
.rec-icono { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--marca-naranja); box-shadow: 0 12px 22px -14px rgb(196 70 26 / .9); }
.rec-icono svg { width: 30px; height: 30px; fill: none; stroke: var(--color-tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-num { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-tinta); color: var(--marca-blanco); font: 700 .8rem/1 var(--fuente-texto); box-shadow: 0 0 0 3px var(--marca-blanco); }
.rec-paso h3 { margin: 4px 0 6px; }
.rec-paso p { color: #4a3a33; max-width: 34ch; }
.rec-paso:not(:last-child)::before, .rec-paso:not(:last-child)::after { content: ''; position: absolute; left: 31px; top: 74px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--marca-niebla); }
.rec-paso:not(:last-child)::after { background: var(--marca-naranja); transform-origin: top; }
.js .rec-paso::after { transform: scaleY(0); transition: transform .7s var(--ease-firma) calc(var(--k) * 500ms + 350ms); }
.js .rec-icono, .js .rec-paso h3, .js .rec-paso p { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-ui) calc(var(--k) * 500ms), transform .6s var(--ease-sello) calc(var(--k) * 500ms); }
.js .recorrido.visto .rec-paso::after, .js .recorrido.visto .rec-icono, .js .recorrido.visto h3, .js .recorrido.visto p { opacity: 1; transform: none; }
.recorrido-link { margin-top: 28px; }

/* ---------- §5 Segmentos ---------- */
.segmentos-int { display: grid; gap: 40px; }
/* Propuesta de valor que se llena como tinta al hacer scroll (M-41) */
.tinta { display: inline; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--color-tinta) 0 0) 0 0 / 0% 100% no-repeat, linear-gradient(#cbbdb6 0 0);
  -webkit-background-clip: text; background-clip: text; animation: llena linear both; animation-timeline: view(); animation-range: entry 15% cover 50%; }
@keyframes llena { to { background-size: 100% 100%, auto; } }
@supports not (animation-timeline: view()) { .tinta { color: var(--color-tinta); background: none; } }
.segmentos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.segmento { padding: 18px 16px 30px; }
.segmento .seg-icono { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 10px; }
.segmento h3 { font-size: 1.05rem; margin-bottom: 6px; }
.segmento p { font-size: .9rem; color: #4a3a33; line-height: 1.45; }
.js .segmento.espera { opacity: 0; transform: translateY(-18px) scaleY(.6); }
.js .segmento { transform-origin: 50% 0; }
.js .segmento.visto { animation: sale-ticket .7s var(--ease-firma) both; animation-delay: calc(var(--k) * 110ms); }
@keyframes sale-ticket { from { opacity: 0; transform: translateY(-18px) scaleY(.6); } } /* solo transform/opacity (mobile) */
.bloque-ui { background: var(--papel); border-radius: var(--radio); padding: 22px; box-shadow: 0 0 0 1px var(--marca-niebla); }
.bloque-ui h3 { margin-bottom: 8px; }
.bloque-ui > p { color: #4a3a33; }
.reglas { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.regla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--rosado); font-size: .92rem; }
.regla b { font-weight: 700; }
.reglas-solo { max-width: 720px; }
@media (min-width: 960px) {
  .reglas-solo { max-width: none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
  .reglas-solo h3 { margin: 0; }
  .reglas-solo .reglas { grid-template-columns: 1fr 1fr; margin: 0; }
}
.pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--papel); box-shadow: 0 0 0 1.5px var(--marca-naranja); font-weight: 700; }

/* ---------- §6 Canales (fondo tinta) ---------- */
.oscura { background: var(--color-tinta); color: var(--marca-blanco); }
.oscura .intro, .oscura p { color: #eadfd9; }
.oscura h2, .oscura h3 { color: var(--marca-blanco); }
.oscura :focus-visible { outline-color: var(--marca-blanco); }
/* §6: menos aire arriba y abajo; segmento, canales y aviso centrados */
.seccion-circuito { padding-block: clamp(48px, 6vw, 80px); }
.canales-grilla { display: grid; gap: 22px; margin-top: 36px; justify-items: center; }
.flujo { display: grid; gap: 14px; justify-items: center; width: 100%; }
.consent-linea { font-size: .95rem; text-align: center; text-wrap: balance; }
.consent-linea .link { color: var(--marca-blanco); }
.chip-seg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--marca-naranja); color: var(--color-tinta); font-weight: 700; }
.flecha-flujo { width: 2px; height: 28px; background: repeating-linear-gradient(var(--marca-naranja) 0 5px, transparent 5px 10px); }
.canales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; width: 100%; }
.canal { display: flex; align-items: center; gap: 10px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); border-radius: 14px; padding: 12px 14px; }
.canal svg { flex: none; width: 24px; height: 24px; fill: var(--marca-naranja); }
.canal h3 { font-size: .98rem; line-height: 1.2; }
.oscura .ejemplo { color: #cdbdb5; margin-top: 8px; }

/* ---------- §7 Resumen ---------- */
.panel { margin-top: 40px; background: var(--papel); border-radius: 28px; padding: 22px; box-shadow: 0 0 0 1px var(--marca-niebla), 0 30px 60px -40px rgb(42 27 20 / .35); }
.panel-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.panel-cabeza b { font-size: 1.05rem; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.kpi { background: var(--marca-blanco); border-radius: 16px; padding: 14px; }
.kpi dt { font-size: .8rem; color: var(--marca-cacao); font-weight: 600; }
.kpi dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.kpi .valor { font: 400 1.5rem/1 var(--fuente-display); font-variant-numeric: tabular-nums; }
.delta { font-size: .78rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--rosado); color: var(--color-naranja-texto); white-space: nowrap; }
.delta.baja { background: #efe9e4; color: var(--marca-cacao); }
.grafico { margin-top: 18px; }
.grafico svg { width: 100%; height: clamp(110px, 14vw, 170px); overflow: visible; }
.grafico .linea-graf { vector-effect: non-scaling-stroke; fill: none; stroke: var(--marca-naranja); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grafico .area-graf { fill: url(#degrade); }
.js .grafico svg { clip-path: inset(-8px 100% -8px -8px); }
.js .grafico.visto svg { clip-path: inset(-8px); transition: clip-path 1.6s var(--ease-firma); }
.grafico-pie { display: flex; justify-content: space-between; font-size: .75rem; color: var(--marca-cacao); margin-top: 6px; }

/* ---------- §8 Tu marca ---------- */
.marca-grilla { display: grid; gap: 40px; align-items: center; }
.paletas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.paleta { width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(135deg, var(--p1) 50%, var(--p2) 50%); box-shadow: 0 0 0 2px var(--marca-blanco), 0 0 0 3.5px var(--marca-niebla); transition: transform var(--t-rapido) var(--ease-ui), box-shadow var(--t-rapido) var(--ease-ui); }
.paleta[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--marca-blanco), 0 0 0 5.5px var(--color-tinta); }
@media (hover: hover) { .paleta:hover { transform: scale(1.08); } }
.paletas-label { margin-top: 26px; font-weight: 700; }
.redes { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.redes span { width: 42px; height: 42px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--marca-niebla); }
.redes svg { width: 20px; height: 20px; fill: var(--color-tinta); }
.lado-tarjeta .tarjeta-estado:empty { min-height: 0; }
.redes-titulo { margin-top: 18px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--marca-cacao); }

/* ---------- §9 Mostrador (operación) ---------- */

/* ---------- §10 Billetera ---------- */

/* ---------- §11b Detrás de taggy ---------- */
/* §11b Touch and Grow: un "agregado" con la estética de la web de Touch (fondo tinta, grilla, brillo naranja y ámbar) */
.tyg { position: relative; isolation: isolate; overflow: clip; background: var(--color-tinta); color: var(--marca-blanco); }
.tyg::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(110% 90% at 15% 0%, #000 25%, #0000 75%); mask-image: radial-gradient(110% 90% at 15% 0%, #000 25%, #0000 75%); }
.tyg::after { content: ''; position: absolute; z-index: -1; left: -15%; top: -40%; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(251 107 53 / .32), rgb(249 160 17 / .08) 55%, transparent); }
.tyg h2, .tyg h3 { color: var(--marca-blanco); }
.tyg p { color: #eadfd9; }
.tyg :focus-visible { outline-color: var(--marca-blanco); }
.tyg-grilla { display: grid; gap: 30px; }
.tyg-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.tyg-logo { width: 132px; height: auto; }
.tyg h2 { font: 800 clamp(2.2rem, 7vw, 3.6rem)/1.02 var(--fuente-texto); letter-spacing: -.035em; }
.tyg-acento, .tyg-rota > span { background: linear-gradient(90deg, var(--marca-naranja), #f9a011); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tyg-panel { border-radius: 22px; padding: 18px; background: linear-gradient(160deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.tyg-panel-cabeza { display: flex; align-items: center; gap: 10px; padding: 2px 4px 16px; font-weight: 700; font-size: .9rem; }
.tyg-panel-cabeza img { width: 26px; height: auto; }
.tyg-estado { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(52 199 89 / .12); color: #8be6a9; font-size: .78rem; }
.tyg-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgb(52 199 89 / .2); }
.tyg-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tyg-items li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .06); color: #eadfd9; font-size: .95rem; }
.tyg-n { grid-row: 1 / span 2; font: 600 .78rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f9a011; }
.tyg-items b { color: var(--marca-blanco); }

/* ---------- §12 Preguntas ---------- */
.faq-lista { margin-top: 36px; display: grid; column-gap: 56px; align-items: start; }
.faq-col { border-top: 1.5px solid var(--marca-niebla); }
.faq-col + .faq-col { border-top: 0; }
.faq details { border-bottom: 1.5px solid var(--marca-niebla); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--rosado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1B14' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--t-ui) var(--ease-firma), background-color var(--t-ui) var(--ease-ui); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--marca-naranja); }
.faq .respuesta { padding: 0 2px 20px; max-width: 64ch; color: #4a3a33; }
.faq details[open] .respuesta { animation: abre-r var(--t-ui) var(--ease-firma); }
@keyframes abre-r { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- §13 Cierre ---------- */
.cierre { --mostrador: 150px; position: relative; isolation: isolate; padding-top: var(--seccion); overflow: clip; }
.cierre::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--mostrador); z-index: -1; background: var(--marca-naranja); box-shadow: 0 10px 0 var(--naranja-claro) inset; }
.cierre-grilla { display: grid; gap: 36px; }
.pasos-demo { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: pd; }
.pasos-demo li { display: flex; gap: 12px; align-items: baseline; counter-increment: pd; }
.pasos-demo li::before { content: counter(pd); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca-naranja); font: 400 1rem/1 var(--fuente-display); transform: translateY(4px); }
.cierre .ctas { margin-top: 30px; }
.cierre-escena { display: grid; justify-items: center; padding-bottom: 40px; }
.cierre-escena .tarjeta { cursor: default; }
.premio-listo { margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: var(--color-tinta); color: var(--marca-blanco); font-weight: 700; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity var(--t-ui) var(--ease-ui), transform .5s var(--ease-sello); }
.premio-listo.on { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.pie { background: var(--marca-naranja); color: var(--color-tinta); padding: 8px 0 110px; }
.pie-grilla { display: grid; gap: 30px; }
.pie .logo { color: var(--marca-blanco); width: 120px; }
.pie h2 { font: 700 .95rem/1.3 var(--fuente-texto); margin-bottom: 10px; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pie a { text-decoration: none; font-weight: 500; }
.pie a:hover { text-decoration: underline; }
.pie-legal { margin-top: 36px; padding-top: 18px; border-top: 1.5px solid rgb(42 27 20 / .2); display: grid; gap: 6px; font-size: .85rem; }

/* ---------- Botón flotante WhatsApp (M-27 + M-21) ---------- */
.flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 999px; background: var(--color-tinta); color: var(--marca-blanco); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 2px var(--marca-blanco), 0 14px 30px -12px rgb(42 27 20 / .6); /* aro claro: se distingue también sobre secciones oscuras */
  transform: translateY(140%); transition: transform .5s var(--ease-firma); }
.flotante svg { width: 22px; height: 22px; fill: #25D366; }
.flotante.ver { transform: none; }
.flotante.ver::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgb(251 107 53 / .6); animation: pulso 1.8s var(--ease-ui) 3; pointer-events: none; }
@keyframes pulso { to { box-shadow: 0 0 0 16px rgb(251 107 53 / 0); } }

/* ---------- Reveals (M-13) ---------- */
.js .revela { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-firma), transform .8s var(--ease-firma); transition-delay: calc(var(--k, 0) * 90ms); }
.js .revela.visto { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .ctas .btn-principal { flex: 0 0 auto; }
  .hero .ticket { display: block; }
  .recorrido { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .rec-paso { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-bottom: 0; }
  .rec-icono { grid-row: auto; margin-bottom: 18px; }
  .rec-paso:not(:last-child)::before, .rec-paso:not(:last-child)::after { left: calc(50% + 46px); top: 31px; bottom: auto; width: calc(100% + 32px - 92px); height: 2px; }
  .rec-paso:not(:last-child)::after { transform-origin: left; }
  .js .rec-paso::after { transform: scaleX(0); }
  .recorrido-link { text-align: center; }
  .segmentos { grid-template-columns: repeat(4, 1fr); }
  .canales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .pie-grilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .invita { justify-self: start; }
}
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .nav { display: flex; }
  .logo { width: 112px; }
  .barra-int { padding-block: 18px; }
  .hero { --mostrador: 150px; }
  .hero-grilla { grid-template-columns: 1.15fr .85fr; grid-template-rows: auto auto auto auto 1fr; column-gap: 40px; padding-top: clamp(40px, 11svh, 120px); /* aire fijo arriba (no filas fr): centrar según el alto del texto movía el hero al cargar la fuente, CLS 0,10 */ min-height: min(calc(100svh - 84px), 820px); }
  .confianza { margin-bottom: calc(var(--mostrador) + 40px); }
  .escena { grid-column: 2; grid-row: 1 / -1; align-self: end; margin-top: 0; padding-bottom: 40px; }
  .problema-grilla { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
  .segmentos-int { grid-template-columns: 1fr; }
  /* §6 más liviano: segmento → canales en una sola fila, el aviso de consentimiento debajo */
  .canales-grilla { margin-top: 36px; gap: 18px; }
  .flujo { grid-auto-flow: column; justify-content: center; align-items: center; gap: 14px; }
  .flecha-flujo { width: 40px; height: 2px; margin-left: 0; background: repeating-linear-gradient(90deg, var(--marca-naranja) 0 5px, transparent 5px 10px); }
  .canales { grid-template-columns: repeat(4, auto); width: auto; }
  .kpis { grid-template-columns: repeat(7, 1fr); }
  .faq-lista { grid-template-columns: 1fr 1fr; }
  .faq-col + .faq-col { border-top: 1.5px solid var(--marca-niebla); }
  .marca-grilla { grid-template-columns: 1fr 1fr; gap: 64px; }
  .tyg-grilla { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; }
  .seccion.tyg { padding-block: 72px; } /* menos aire que el resto: es un bloque "agregado" */
  .cierre-grilla { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 64px; }
  .cierre-texto { padding-bottom: calc(var(--mostrador) + 48px); }
  .flotante { right: 28px; bottom: 28px; padding: 15px 22px; font-size: 1.02rem; } /* CTA flotante también en desktop: regla del laboratorio */
  .flotante:hover { background: #3d2a20; }
  .pie { padding-bottom: 48px; }
}
@media (max-width: 959px) {
  .ingresar-mobile { display: inline-flex; }
  .ingresar:not(.ingresar-mobile) { display: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; animation-delay: 0s !important; transition-delay: 0s !important; animation-timeline: auto !important; }
  html { scroll-behavior: auto; }
  .rota { display: none; }
  .rota-estatica { display: inline; }
  .cinta-pista { animation: none; }
  .tinta { animation: none; color: var(--color-tinta); background: none; }
}

/* ---------- Páginas legales y 404 ---------- */
.legal { padding-block: 56px 96px; }
.legal-int { max-width: 760px; }
.legal h1 { font: 400 clamp(2.3rem, 8vw, 3.6rem)/1 var(--fuente-display); }
.legal .aviso-borrador { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--rosado); font-weight: 600; font-size: .92rem; }
.legal h2 { font: 700 1.25rem/1.3 var(--fuente-texto); margin-top: 36px; }
.legal p, .legal li { margin-top: 12px; color: #4a3a33; }
.legal ul { padding-left: 1.2em; }
.legal .leyenda { margin-top: 36px; padding: 18px; border-radius: 14px; background: #f4efec; font-size: .9rem; }
.legal .volver { margin-top: 36px; display: inline-flex; }
.pie-simple { padding: 28px 0 40px; background: var(--marca-naranja); font-size: .9rem; }
.pie-simple .contenedor { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.pie-simple a { font-weight: 600; }

/* Secciones debajo del primer pantallazo: el navegador no las calcula hasta que se acercan.
   Medido en mobile con CPU 4×: layout inicial de ~1.000 a ~340 ms. */
main > section:not(.hero):not(.prueba) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.todo-visible main > section:not(.hero):not(.prueba) { content-visibility: visible; } /* al usar un ancla interna (ver main.js) */

/* ---------- §6 Video del circuito (propuesta 03_diseno/propuestas/video-circuito, aprobada el 2026-10-16) ---------- */
.circuito { display: grid; gap: 18px; margin-top: 28px; }
.circ-video { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.24; overflow: hidden;
  background: radial-gradient(closest-side, #452d21, var(--color-tinta)); }
/* bordes difuminados con el color del fondo: la escena no queda en una caja */
.circ-difuminado { position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(90deg, var(--color-tinta), rgb(42 27 20 / 0) 14%, rgb(42 27 20 / 0) 86%, var(--color-tinta)), linear-gradient(var(--color-tinta), rgb(42 27 20 / 0) 12%, rgb(42 27 20 / 0) 86%, var(--color-tinta)); }
.circ-escenario { --u: .98cqi; --cy: 19; position: absolute; inset: 0; perspective: calc(var(--u) * 420); perspective-origin: 50% 42%; }
.circ-escenario i, .circ-escenario b { font-style: normal; }
.circ-inclina { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.circ-camara { position: absolute; left: 50%; top: calc(50% + var(--cy, 9) * var(--u)); width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); }
.circ-camara > * { position: absolute; left: 0; top: 0; }

/* planos de piso: --x --y (esquina), --w --d (tamaño), --z (altura) en unidades del mundo */
.circ-plano { width: calc(var(--w) * var(--u)); height: calc(var(--d) * var(--u)); transform: translate3d(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)), calc(var(--z, 0) * var(--u))); }
.circ-grilla { background: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / calc(var(--u) * 8) calc(var(--u) * 8), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / calc(var(--u) * 8) calc(var(--u) * 8);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.circ-calle { background: #3a2a22; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.circ-calle::after { content: ''; position: absolute; left: 0; right: 0; top: 45%; height: calc(var(--u) * .9); background: repeating-linear-gradient(90deg, #6b5446 0 calc(var(--u) * 6), transparent 0 calc(var(--u) * 11)); }
.circ-vereda { background: #d6c9c1; border-bottom: calc(var(--u) * 1) solid #a99a90; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.circ-vereda::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .07) 1px, transparent 1px) 0 0 / calc(var(--u) * 7) 100%; }
.circ-piso { background: repeating-conic-gradient(#f6e9df 0 25%, #eedbcd 0 50%) 0 0 / calc(var(--u) * 12) calc(var(--u) * 12); }
.circ-felpudo { border-radius: calc(var(--u) * .8); background: var(--marca-naranja); display: grid; place-items: center; color: #fff; font: 400 calc(var(--u) * 2.2)/1 var(--fuente-display); }

/* cajas: tapa + cara izquierda (mira a -x) + cara frontal (mira a +y) */
.circ-caja { transform-style: preserve-3d; }
.circ-caja > i { position: absolute; left: 0; top: 0; display: block; }
.circ-c-top { width: calc(var(--w) * var(--u)); height: calc(var(--d) * var(--u)); background: var(--c1); transform: translate3d(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)), calc((var(--z, 0) + var(--h)) * var(--u))); }
.circ-c-izq { width: calc(var(--d) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--c2); transform-origin: 0 100%; transform: translate3d(calc(var(--x) * var(--u)), calc((var(--y) - var(--h)) * var(--u)), calc(var(--z, 0) * var(--u))) rotateZ(90deg) rotateX(-90deg); }
.circ-c-fte { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--c3); transform-origin: 0 100%; transform: translate3d(calc(var(--x) * var(--u)), calc((var(--y) + var(--d) - var(--h)) * var(--u)), calc(var(--z, 0) * var(--u))) rotateX(-90deg); }

/* paredes del fondo */
.circ-pared { transform-origin: 0 100%; }
.circ-pared-a { width: calc(48 * var(--u)); height: calc(26 * var(--u)); background: linear-gradient(#f8dfcf, #f1cfba); transform: translate3d(calc(-24 * var(--u)), calc(-50 * var(--u)), 0) rotateX(-90deg); }
.circ-pared-b { width: calc(48 * var(--u)); height: calc(26 * var(--u)); background: linear-gradient(#efc9b2, #e6b99f); transform: translate3d(calc(24 * var(--u)), calc(-50 * var(--u)), 0) rotateZ(90deg) rotateX(-90deg); }
.circ-pared > b { position: absolute; display: block; }
.circ-estante { left: calc(5 * var(--u)); width: calc(20 * var(--u)); height: calc(1.1 * var(--u)); background: #8a6a5c; border-radius: 2px; }
.circ-estante::before { content: ''; position: absolute; left: calc(1.2 * var(--u)); bottom: 100%; width: calc(17 * var(--u)); height: calc(4 * var(--u));
  background: linear-gradient(90deg, #fb6b35 0 16%, transparent 0 22%, #ffd2bd 0 36%, transparent 0 42%, #7a6057 0 56%, transparent 0 62%, #3f8f86 0 76%, transparent 0 82%, #f9a011 0); border-radius: 2px 2px 0 0; }
.circ-reloj-pared { left: calc(32 * var(--u)); top: calc(4 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .8) var(--marca-cacao); }
.circ-aguja { position: absolute; left: 50%; bottom: 50%; width: 8%; margin-left: -4%; border-radius: 99px; background: var(--color-tinta); transform-origin: 50% 100%; }
.circ-aguja.circ-m { height: 40%; } .circ-aguja.circ-h { height: 27%; width: 11%; margin-left: -5.5%; background: var(--marca-naranja); }
.circ-neon { left: calc(22 * var(--u)); top: calc(4 * var(--u)); padding: calc(var(--u) * .8) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1.6); background: var(--color-tinta); color: #ffb08f;
  font: 400 calc(var(--u) * 4)/1 var(--fuente-display); white-space: nowrap; text-shadow: 0 0 calc(var(--u) * 1.2) var(--marca-naranja); }
.circ-puerta-fondo { left: calc(3 * var(--u)); bottom: 0; width: calc(9 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0; background: #8a6a5c; box-shadow: inset 0 0 0 calc(var(--u) * .7) #6f5347; }
.circ-tapa { background: #c99f88; }

/* objetos parados que miran a la cámara (billboards) */
.circ-bb { width: calc(var(--bw) * var(--u)); height: calc(var(--bh) * var(--u)); transform-origin: 50% 100%;
  transform: translate3d(calc((var(--x) - var(--bw) / 2) * var(--u)), calc((var(--y) - var(--bh)) * var(--u)), calc(var(--z, 0) * var(--u))) rotateZ(38deg) rotateX(-90deg) scaleY(1.2); }
.circ-qr { border-radius: calc(var(--u) * .6); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) var(--marca-naranja);
  background-image: conic-gradient(var(--color-tinta) 25%, transparent 0 50%, var(--color-tinta) 0 75%, transparent 0); background-size: calc(var(--u) * 1.4) calc(var(--u) * 1.4); background-clip: content-box; padding: calc(var(--u) * .7); }
.circ-follaje { border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #6fb36a, #3f7d45 70%); }
.circ-arbol { background: radial-gradient(circle at 50% 33%, #79b46f 0 34%, transparent 35%), radial-gradient(circle at 34% 45%, #4f8f52 0 24%, transparent 25%), radial-gradient(circle at 66% 45%, #4f8f52 0 24%, transparent 25%), linear-gradient(90deg, transparent 45%, #6f5347 0 55%, transparent 0) 0 100% / 100% 42% no-repeat; }
.circ-farol { background: linear-gradient(90deg, transparent 44%, #5a463c 0 56%, transparent 0) 0 100% / 100% 88% no-repeat, radial-gradient(circle at 50% calc(var(--u) * 1.8), #ffe2a8 0 calc(var(--u) * 1.6), transparent calc(var(--u) * 1.75)); }
.circ-halo { border-radius: 50%; background: radial-gradient(closest-side, rgb(255 214 140 / .75), rgb(255 190 100 / .25) 55%, transparent); opacity: 0; }

/* personas */
.circ-persona { width: var(--u); height: var(--u); transform-style: preserve-3d; transform: translate(0%, 0%); }
.circ-sombra { position: absolute; left: calc(-4 * var(--u)); top: calc(-2.2 * var(--u)); width: calc(8 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgb(42 27 20 / .38), transparent); transform: translateZ(calc(var(--u) * .9)); }
.circ-figura { position: absolute; left: calc(-4.5 * var(--u)); top: calc(-18 * var(--u)); width: calc(9 * var(--u)); height: calc(18 * var(--u)); transform-origin: 50% 100%; transform: rotateZ(38deg) rotateX(-90deg) scaleY(1.2); }
.circ-cuerpo { position: absolute; inset: 0; }
.circ-cuerpo > i { position: absolute; display: block; }
.circ-cabeza { left: 50%; top: 0; width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); margin-left: calc(-3.2 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 36% 58%, var(--color-tinta) 0 5%, transparent 6%), radial-gradient(circle at 64% 58%, var(--color-tinta) 0 5%, transparent 6%), radial-gradient(circle at 26% 74%, rgb(251 107 53 / .35) 0 9%, transparent 10%), radial-gradient(circle at 74% 74%, rgb(251 107 53 / .35) 0 9%, transparent 10%), var(--piel); }
.circ-cabeza::before { content: ''; position: absolute; inset: -6% -5% 52%; border-radius: 50% 50% 30% 30%; background: var(--pelo); }
.circ-torso { left: 50%; top: calc(6.2 * var(--u)); width: calc(8 * var(--u)); height: calc(7.4 * var(--u)); margin-left: calc(-4 * var(--u)); border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u)); background: var(--remera); box-shadow: inset calc(var(--u) * -1.2) 0 0 rgb(0 0 0 / .12); }
.circ-pierna { top: calc(13.2 * var(--u)); width: calc(2.4 * var(--u)); height: calc(4.8 * var(--u)); border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1); background: #3b2a22; }
.circ-pierna.circ-i { left: calc(2.1 * var(--u)); } .circ-pierna.circ-d { right: calc(2.1 * var(--u)); }
.circ-persona.circ-a { --remera: #FB6B35; --pelo: #5a3d30; --piel: #f2c4a5; }
.circ-persona.circ-b { --remera: #3f8f86; --pelo: #2a1b14; --piel: #c98d6b; }
.circ-persona.circ-b .circ-figura, .circ-persona.circ-b .circ-sombra { opacity: 0; }
.circ-persona.circ-cajero { --remera: #4a3a33; --pelo: #2a1b14; --piel: #e2ad86; }
.circ-cajero .circ-figura { left: calc(-4.2 * var(--u)); width: calc(8.4 * var(--u)); }
.circ-cajero .circ-torso { background: linear-gradient(90deg, var(--remera) 0 24%, #fff3ea 0 76%, var(--remera) 0); }
.circ-cajero .circ-torso::after { content: ''; position: absolute; left: 34%; right: 34%; top: 38%; height: 18%; border-radius: 2px; background: var(--marca-naranja); }
.circ-cajero .circ-cabeza::after { content: ''; position: absolute; left: -8%; right: -8%; top: -12%; height: 34%; border-radius: 99px 99px 20% 20%; background: var(--marca-naranja); }

/* noche */
.circ-noche { position: absolute; inset: 0; background: radial-gradient(90% 80% at 30% 75%, rgb(10 16 48 / .35), rgb(8 10 34 / .72)); opacity: 0; pointer-events: none; }

/* ================= Tarjetas flotantes (plano delantero) ================= */
.circ-hud { --u: .98cqi; --cy: 19; position: absolute; inset: 0; pointer-events: none; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.circ-ancla { position: absolute; left: calc(50% + var(--ax) * var(--u)); top: calc(50% + (var(--ay) + var(--cy, 9)) * var(--u)); width: 0; height: 0; }
.circ-ancla > * { position: absolute; left: 0; bottom: 0; translate: -50% 0; opacity: 0; transform-origin: 50% 100%; }
.circ-card { width: clamp(9.4rem, 40cqi, 13.4rem); padding: .7rem .8rem .8rem; border-radius: 1.1rem; background: #fff; color: var(--color-tinta); font-size: clamp(.72rem, 2.6cqi, .86rem); line-height: 1.3;
  box-shadow: 0 1.6rem 2.2rem -1rem rgb(0 0 0 / .6), 0 0 0 1px rgb(42 27 20 / .06); }
.circ-card::after { content: ''; position: absolute; left: var(--cola, 50%); bottom: -.45rem; width: 1rem; height: 1rem; margin-left: -.5rem; background: #fff; border-radius: 0 0 .25rem 0; transform: rotate(45deg); }
.circ-card-cabeza { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.circ-app { flex: none; width: 1.5rem; height: 1.5rem; border-radius: .45rem; background: var(--marca-naranja); color: #fff; display: grid; place-items: center; font: 400 .8rem/1 var(--fuente-display); }
.circ-card-cabeza small { margin-left: auto; font-weight: 500; color: #7a645a; font-size: .9em; }
.circ-pantallas { display: grid; margin-top: .55rem; }
.circ-pantallas > * { grid-area: 1 / 1; }
.circ-btn-g { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem; border-radius: .7rem; border: 1px solid #e8dcd5; font-weight: 700; }
.circ-btn-g svg { width: 1em; height: 1em; }
.circ-btn-g + small { display: block; margin-top: .35rem; text-align: center; color: #7a645a; }
.circ-sellos { display: flex; gap: .3rem; margin-top: .45rem; }
.circ-sellos i { position: relative; flex: 1; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #e5cfc3; }
.circ-sellos i.circ-on::after, .circ-sellos i.circ-pop::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--marca-naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat; }
.circ-sellos i.circ-pop::after { transform: scale(0); }
.circ-ok { margin-top: .45rem; font-weight: 700; color: #1f7a4d; }
.circ-mas1 { position: absolute; right: -.4rem; top: -.9rem; padding: .25rem .55rem; border-radius: 99px; background: #1f9d5c; color: #fff; font-weight: 800; font-size: .95em; opacity: 0; }
.circ-push { width: clamp(10.4rem, 46cqi, 15rem); border-radius: 1rem; background: rgb(255 255 255 / .94); }
.circ-push p { margin-top: .3rem; }
.circuito .circ-card p { color: inherit; }
.circuito .circ-paso span:last-child { color: #cdbdb5; }
.circ-post { width: clamp(11rem, 52cqi, 14rem); padding: 0; overflow: hidden; }
.circ-post .circ-card-cabeza, .circ-push .circ-card-cabeza { white-space: nowrap; }
.circ-post .circ-card-cabeza { padding: .55rem .7rem; }
.circ-post-img { position: relative; display: grid; place-items: center; aspect-ratio: 2.5; background: linear-gradient(135deg, #ff8a5c, #FB6B35 55%, #e2551f); color: #fff; text-align: center; font: 400 clamp(.95rem, 3.6cqi, 1.25rem)/1.05 var(--fuente-display); padding: .6rem; }
.circ-post-img::before { content: ''; position: absolute; right: 10%; top: 14%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .18); }
.circ-post-pie { display: flex; align-items: center; justify-content: space-between; padding: .5rem .7rem .6rem; font-weight: 700; }
.circ-post-pie span { white-space: nowrap; padding: .25rem .55rem; border-radius: .5rem; background: #f1e7e1; font-size: .9em; }
.circ-post::after { background: #fff; }
.circ-reloj { display: grid; justify-items: center; gap: .5rem; }
.circ-esfera { position: relative; width: clamp(4.4rem, 20cqi, 6.2rem); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from -1.5deg, #d9c8bf 0 3deg, transparent 0 30deg) , #fff;
  -webkit-mask: none; box-shadow: 0 0 0 .32rem var(--marca-naranja), 0 1.6rem 2.2rem -1rem rgb(0 0 0 / .6); }
.circ-esfera::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: #fff; }
.circ-esfera::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--color-tinta); }
.circ-reloj .circ-chip { padding: .3rem .75rem; border-radius: 99px; background: #fff; color: var(--color-tinta); font-weight: 800; font-size: clamp(.75rem, 2.8cqi, .9rem); white-space: nowrap; box-shadow: 0 .8rem 1.4rem -.8rem rgb(0 0 0 / .6); }

.circ-panel { position: absolute; left: 4%; top: 3%; width: clamp(11.4rem, 46cqi, 16.5rem); padding: 0;
  color: var(--marca-blanco); font-size: clamp(.7rem, 2.5cqi, .84rem); box-shadow: 0 1.2rem 2rem -1.2rem rgb(0 0 0 / .7); }
.circ-panel-cabeza { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #eadfd9; text-shadow: 0 1px 6px var(--color-tinta); }
.circ-panel-cabeza::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 .2rem rgb(53 208 127 / .2); }
.circ-filas { display: grid; margin-top: .35rem; }
.circ-fila { grid-area: 1 / 1; display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: .65rem; background: #fff; color: var(--color-tinta); font-weight: 700; white-space: nowrap; opacity: 0; }
.circ-fila::before { content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.circ-fila small { margin-left: auto; padding-left: .3rem; font-weight: 600; color: #6f5a50; white-space: nowrap; }
.circ-fila.circ-r0 { --c: #1f9d5c; opacity: 1; } .circ-fila.circ-r1 { --c: var(--marca-naranja); } .circ-fila.circ-r2 { --c: #d93a2b; } .circ-fila.circ-r3 { --c: #f9a011; }


/* ================= Pasos (subtítulos) ================= */
.circ-pasos-caja { position: relative; z-index: 1; background: var(--color-tinta); }
.circ-pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.circ-paso { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; opacity: 0; }
.circ-paso-num { grid-row: span 2; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--marca-naranja); color: #fff; display: grid; place-items: center; font-weight: 800; }
.circ-paso b { font-size: 1.12rem; line-height: 1.25; }
.circ-paso span:last-child { color: #cdbdb5; font-size: .95rem; line-height: 1.35; }
.circ-paso-barra, .circ-paso-fondo, .circ-clon { display: none; }
.circ-paso:first-child { opacity: 1; }
.circ-progreso { display: flex; gap: 6px; margin-top: 2px; }
.circ-progreso i { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .16); overflow: hidden; }
.circ-progreso b { display: block; height: 100%; background: var(--marca-naranja); transform-origin: 0 50%; transform: scaleX(0); }

@media (min-width: 960px) {
  .circuito { --ventana: calc(4 * 92px + 3 * 8px); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
  .circ-video { width: calc(var(--ventana) * 1.5); height: var(--ventana); aspect-ratio: auto; }
  .circ-escenario, .circ-hud { --u: .72cqi; --cy: 7; }
  .circ-ancla.circ-en-mostrador { --ax: 20 !important; }
  /* video más chico en desktop: tarjetas y panel más compactos para que no se pisen */
  .circ-card { width: clamp(9rem, 29cqi, 11.5rem); font-size: .76rem; padding: .55rem .65rem .65rem; }
  .circ-push { width: clamp(10rem, 34cqi, 13rem); }
  .circ-post { width: clamp(10rem, 32cqi, 12rem); padding: 0; }
  .circ-post-img { aspect-ratio: 2.3; font-size: .95rem; }
  .circ-app { width: 1.3rem; height: 1.3rem; font-size: .7rem; }
  .circ-panel { width: clamp(10rem, 34cqi, 12.6rem); font-size: .74rem; }
  .circ-esfera { width: clamp(4rem, 15cqi, 5.2rem); }
  .circ-panel { left: 5%; top: 5%; }
  .circ-progreso { display: none; }
  /* el video ocupa el alto de 4 pasos; los 6 pasos (+ 4 copias para el loop) suben solos en una ventana con degradado abajo */
  .circ-pasos-caja { height: calc(var(--ventana) + 12px); padding-top: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12px, #000 58%, transparent); mask-image: linear-gradient(transparent, #000 12px, #000 58%, transparent); }
  .circ-pasos { --paso-h: 92px; gap: 8px; }
  .circ-clon { display: grid; }
  .circ-paso { grid-area: auto; height: var(--paso-h); align-content: center; padding: 0 16px; border-radius: 16px; overflow: hidden; opacity: .6; }
  .circ-paso-fondo { display: block; position: absolute; inset: 0; background: rgb(255 255 255 / .07); opacity: 0; }
  .circ-paso-barra { display: block; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: var(--marca-naranja); transform-origin: 0 50%; transform: scaleX(0); }
  .circ-paso > :not(.circ-paso-fondo, .circ-paso-barra) { position: relative; }
}

/* movimiento reducido o sin JS: escena quieta en "vuelve y suma su sello" y la lista completa */
.circ-quieto .circ-persona.circ-a { transform: translate(0%, 0%); }
.circ-quieto .circ-c-sello { opacity: 1; }
.circ-quieto .circ-c-sello .circ-sellos i.circ-pop::after { transform: none; }
.circ-quieto .circ-progreso { display: none; }
.circ-quieto .circ-pasos { gap: 14px; }
.circ-quieto .circ-paso { grid-area: auto; opacity: 1; }
.circ-quieto .circ-clon { display: none; }
.circ-quieto .circ-pasos-caja { height: auto; -webkit-mask-image: none; mask-image: none; }