/* =========================================================================
   RematesTapatíos v3 "Banco de pruebas": capa de diseño y movimiento.
   Va DESPUÉS de styles.css (v2) y sobrescribe tipografía, superficies y
   componentes. Idea: cada pieza pasa por el banco de pruebas y sale con su
   etiqueta colgada. Firma visual: tarjetas en forma de etiqueta de precio
   (esquina cortada + ojillo) que se columpian desde el ojillo al pasar el mouse.
   Movimiento: clips de HyperFrames (assets/motion/) + revelados al hacer
   scroll (assets/motion.js). Todo se apaga con prefers-reduced-motion.
   CSP: sin estilos inline; todo vive en hojas externas.
   ========================================================================= */

/* ---------- Tokens v3 ---------- */
:root{
  --font-display:'Archivo Black','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --signal:#7BE0B5;          /* lectura "OK" sobre navy (11:1 sobre #0E2A38) */
  --signal-ink:#06141B;
  --bench:#081A23;           /* fondo del banco */
  --bench-line:rgba(255,255,255,.06);
  --tag-cut:22px;            /* esquina cortada de la etiqueta */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-swing:cubic-bezier(.34,1.56,.64,1);
  --dur-reveal:700ms;
  --fs-4xl:clamp(2.25rem,6vw,4.25rem);
  --fs-3xl:clamp(1.875rem,4vw,2.75rem);
}

/* Las tarjetas giran al entrar: que nunca generen scroll horizontal */
html,body{overflow-x:clip}

/* ---------- Tipografía ---------- */
h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:1.04}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
.info h1{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.08}
.empty h1,.pay-msg h1,.state h1{font-size:var(--fs-2xl)}
.eyebrow{font-family:var(--font-mono);font-weight:700;letter-spacing:.12em}
.eyebrow::before{width:8px;height:8px;border-radius:50%}
.rt,.pay-folio b,.ficha-head b,.field-label{font-family:var(--font-mono)}
.price .now,.price-blk .now,.ticket-price,.cta-bar .px,.pay-grand{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em}
.btn{font-weight:800;letter-spacing:.005em}

/* ---------- Header ---------- */
.site-header{border-bottom-color:transparent;box-shadow:0 1px 0 var(--border)}
.nav-links a{font-weight:700}
.nav-links a[aria-current="page"]::after{height:3px;bottom:2px}
/* progreso de lectura: una "señal" coral bajo el header (scaleX desde motion.js) */
.scope-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent-brand);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- Héroe: banco de pruebas ---------- */
.hero{background:var(--bench);padding:var(--sp-7) 0 var(--sp-8)}
.hero::before{opacity:1;background-size:40px 40px;
  background-image:linear-gradient(var(--bench-line) 1px,transparent 1px),linear-gradient(90deg,var(--bench-line) 1px,transparent 1px)}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,90,60,.18),transparent)}
.hero-grid{grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem)}
.hero h1 .hl{color:var(--accent-brand)}
.hero-points li{font-family:var(--font-mono);font-weight:500;font-size:.8rem;letter-spacing:.02em}

.bench{position:relative}
.bench-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0E2A38;aspect-ratio:4/3;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.45)}
.bench-frame video,.bench-frame img{width:100%;height:100%;object-fit:cover;display:block}
.bench .ticket-slot{position:relative;margin:calc(var(--sp-7) * -1) var(--sp-5) 0 auto;max-width:360px;z-index:2}

/* Ficha del héroe: etiqueta horizontal con datos reales de la primera pieza disponible */
.ticket{border-radius:0;box-shadow:0 18px 50px rgba(0,0,0,.4);
  clip-path:polygon(var(--tag-cut) 0,100% 0,100% 100%,0 100%,0 var(--tag-cut))}
.ticket::before{height:0}
.ticket::after{content:"";position:absolute;left:14px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--bench);z-index:2}
.bench .ticket-ph{display:none}
.bench .ticket-body{padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6)}
.bench .ticket-empty{padding:var(--sp-5)}
.bench .ticket-empty .tag-art{width:56px;margin-bottom:var(--sp-2)}
.ticket-kicker{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);margin-bottom:var(--sp-2)}

/* Botón para pausar cada animación (WCAG 2.2.2) */
.mv-wrap{position:relative}
.mv-toggle{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;
  padding:0 12px;border-radius:var(--r-pill);border:0;background:rgba(8,26,35,.72);color:#fff;font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  backdrop-filter:blur(6px)}
.mv-toggle:hover{background:rgba(8,26,35,.9)}
.mv-toggle svg{width:16px;height:16px}
.bench-frame .mv-toggle{bottom:auto;top:12px}
.mv-light .mv-toggle{background:rgba(14,42,56,.82)}

/* ---------- Cinta de lectura (datos reales de cómo vendemos) ---------- */
.readout{background:var(--navy-900);color:var(--fg-inverse-muted);border-block:1px solid rgba(255,255,255,.08);overflow:hidden}
.readout-track{display:flex;width:max-content;gap:0;animation:readout 38s linear infinite}
.readout:hover .readout-track,.readout:focus-within .readout-track{animation-play-state:paused}
.readout ul{display:flex;margin:0;padding:0;list-style:none}
.readout li{display:flex;align-items:center;gap:10px;padding:14px 28px;font-family:var(--font-mono);font-size:.82rem;font-weight:500;white-space:nowrap}
.readout li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--signal);flex:none}
@keyframes readout{to{transform:translateX(-50%)}}

/* ---------- Banda "cómo compras" (clip cinético) ---------- */
.promise{border-radius:var(--r-lg);overflow:hidden;background:#0E2A38;aspect-ratio:5/2;margin-bottom:var(--sp-6);
  box-shadow:0 0 0 1px var(--border)}
.promise video,.promise img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Tarjetas: etiquetas que cuelgan del ojillo ---------- */
.grid{gap:var(--sp-6) var(--sp-5)}
.card{border:0;border-radius:0;background:var(--white);box-shadow:none;overflow:visible;position:relative;
  transform-origin:var(--tag-cut) 0;transition:transform 600ms var(--ease-swing)}
.card{clip-path:polygon(var(--tag-cut) 0,100% 0,100% 100%,0 100%,0 var(--tag-cut))}
.card-ph{border-radius:0}
.card-ph::after{content:"";position:absolute;left:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--bg-soft);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);z-index:2}
.card-ph .tags{left:34px}
.card:hover{transform:rotate(-1.4deg) translateY(-2px);box-shadow:none}
.card .ttl{font-size:1.1rem}
.card-ph img{transition:transform 700ms var(--ease-out)}
.card:hover .card-ph img{transform:scale(1.04)}
.bg-sand .card,.sec .grid .card{outline:1px solid var(--border);outline-offset:-1px}
.card .card-actions{padding-top:var(--sp-2)}

/* Categorías */
.cat{border-radius:0;clip-path:polygon(var(--tag-cut) 0,100% 0,100% 100%,0 100%,0 var(--tag-cut));border:0;outline:1px solid var(--border);outline-offset:-1px}
.cat b{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em}
.cat--anchor{outline:0;background-color:var(--bench);
  background-image:linear-gradient(var(--bench-line) 1px,transparent 1px),linear-gradient(90deg,var(--bench-line) 1px,transparent 1px),radial-gradient(420px 260px at 90% 0%,rgba(255,90,60,.3),transparent 70%);
  background-size:32px 32px,32px 32px,auto}
.cat .cat-arrow{transition:transform var(--dur) var(--ease)}
.cat:hover .cat-arrow{transform:translateX(4px)}

/* Mosaico de tarjetas de video: banco oscuro con el clip arriba */
.cat--componentes{grid-row:span 2;justify-content:flex-end;color:#fff;outline:0;background-color:var(--bench);
  background-image:linear-gradient(var(--bench-line) 1px,transparent 1px),linear-gradient(90deg,var(--bench-line) 1px,transparent 1px);background-size:32px 32px}
.cat--componentes:hover{color:#fff}
.cat--componentes .cat-ico{background:rgba(255,255,255,.1);color:var(--signal)}
.cat--componentes span{color:var(--fg-inverse-muted)}
.cat--componentes .cat-arrow{color:var(--accent-on-dark)}
.cat-clip{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-3);aspect-ratio:4/3;overflow:hidden}
.cat-clip video{width:100%;height:100%;object-fit:cover;display:block}
.cat .cat-count{margin-top:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-xs)!important;font-weight:700;letter-spacing:.04em}

/* Pasos: el banco de pruebas en tres lecturas */
.step{border-radius:0;border:0;outline:1px solid var(--border);outline-offset:-1px;clip-path:polygon(var(--tag-cut) 0,100% 0,100% 100%,0 100%,0 var(--tag-cut))}
.step-num{font-family:var(--font-mono);background:var(--bench);color:var(--signal);border-radius:var(--r-xs)}
.tl-num{font-family:var(--font-mono);background:var(--bench);color:var(--signal)}

/* Banda CTA */
.cta-band{border-radius:0;clip-path:polygon(32px 0,100% 0,100% 100%,0 100%,0 32px);background-color:var(--bench);
  background-image:linear-gradient(var(--bench-line) 1px,transparent 1px),linear-gradient(90deg,var(--bench-line) 1px,transparent 1px),radial-gradient(520px 300px at 100% 0%,rgba(255,90,60,.25),transparent 70%);
  background-size:40px 40px,40px 40px,auto}

/* Trustband */
.trustband{background:var(--white)}
.trustband li b{font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.01em}

/* ---------- Producto ---------- */
.gallery-main{border-radius:0;border:0;clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px)}
.gallery-main video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-note{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--fg-muted);font-family:var(--font-mono)}
.ficha{border-radius:0;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);border:0;outline:1px solid var(--border);outline-offset:-1px}
.ficha-head{background:var(--bench)}
.ficha-head b{color:var(--signal)}
.meter-bar span{transform-origin:0 50%}
.calc{border-radius:0;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);border:0;outline:1px solid var(--border);outline-offset:-1px}
.calc-out b{font-family:var(--font-mono)}

/* ---------- Pagar ---------- */
.pay-card{border-radius:0;clip-path:polygon(24px 0,100% 0,100% 100%,0 100%,0 24px);box-shadow:none;outline:1px solid var(--border);outline-offset:-1px}
.pay-top{background:var(--bench);height:8px}
.pay-grand{background:var(--bench);border-radius:var(--r-xs)}
.pay-grand .g:last-child{color:var(--signal)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bench)}

/* =========================================================================
   Movimiento
   Regla: el contenido es visible SIN JavaScript. motion.js solo oculta (.rv)
   lo que está fuera de la pantalla al cargar y lo revela al entrar.
   ========================================================================= */
/* Entrada del héroe (CSS puro, una sola vez) */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes swing-in{0%{opacity:0;transform:translateY(-28px) rotate(-7deg)}60%{opacity:1;transform:translateY(0) rotate(1.6deg)}100%{opacity:1;transform:none}}
.hero .eyebrow{animation:rise 600ms var(--ease-out) both}
.hero h1{animation:rise 700ms 80ms var(--ease-out) both}
.hero .lead{animation:rise 700ms 180ms var(--ease-out) both}
.hero-cta{animation:rise 700ms 260ms var(--ease-out) both}
.hero-points{animation:rise 700ms 340ms var(--ease-out) both}
.bench-frame{animation:rise 800ms 120ms var(--ease-out) both}
.bench .ticket-slot{transform-origin:24px 0;animation:swing-in 900ms 650ms var(--ease-out) both}

/* Revelado al hacer scroll */
.rv{opacity:0;transform:translateY(22px)}
.rv.is-in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.rv.d1.is-in{transition-delay:60ms}.rv.d2.is-in{transition-delay:120ms}.rv.d3.is-in{transition-delay:180ms}
.rv.d4.is-in{transition-delay:240ms}.rv.d5.is-in{transition-delay:300ms}
/* tarjetas: entran colgando (desde el ojillo) */
.card.rv{transform:translateY(-14px) rotate(-3deg)}
.card.rv.is-in{transform:none;transition:opacity 500ms var(--ease-out),transform 800ms var(--ease-swing)}
/* medidor: se "carga" al entrar */
.meter.rv{opacity:1;transform:none}
.meter.rv .meter-bar span{transform:scaleX(0)}
.meter.rv.is-in .meter-bar span{transform:scaleX(1);transition:transform 1200ms 200ms var(--ease-out)}

/* Respeto total a "reducir movimiento" */
@media (prefers-reduced-motion:reduce){
  .rv,.card.rv{opacity:1!important;transform:none!important}
  .meter.rv .meter-bar span{transform:none!important}
  .readout-track{animation:none!important;flex-wrap:wrap;width:auto}
  .readout-track ul[aria-hidden="true"]{display:none}
  .card,.card:hover{transform:none!important}
  .scope-line{display:none}
}

/* ---------- Responsive v3 ---------- */
@media (max-width:1020px){
  .cat--componentes{grid-row:auto}
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .bench{max-width:560px}
  .hero-visual{max-width:none}
}
@media (max-width:640px){
  .hero{padding:var(--sp-6) 0 var(--sp-7)}
  .hero h1{font-size:clamp(2.1rem,10vw,2.8rem)}
  .bench .ticket-slot{margin:calc(var(--sp-5) * -1) var(--sp-3) 0 var(--sp-5);max-width:none}
  .promise{aspect-ratio:5/2;border-radius:var(--r-md)}
  .readout li{padding:12px 20px;font-size:.78rem}
  .grid{gap:var(--sp-5)}
  .mv-toggle .lbl{display:none}
}
.gallery-main .mv-wrap{height:100%}