/* tv.pequin.com.ar — página de la tele. Todo en rem: se agranda con la pantalla (1920x1080 = 16 px). */
:root{--ink:#03254B;--ink2:#0B3A73;--naranja:#F36220;--crema:#FAF7F2;--azul-claro:#BFD3F2}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:min(0.8334vw,1.4815vh)}
html,body{height:100%;background:var(--ink);color:#fff;font-family:Inter,"Segoe UI",Roboto,system-ui,sans-serif;overflow:hidden;cursor:none}
#app{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 6rem;background:radial-gradient(60% 80% at 50% 0%,var(--ink2),var(--ink))}
.marca{position:absolute;top:2.2rem;left:3rem;display:flex;align-items:center;gap:1rem;font-size:1.7rem;font-weight:700;color:var(--azul-claro)}
.marca img{height:3.4rem;width:auto}
.vista{display:none;flex-direction:column;align-items:center;gap:2.2rem;max-width:62rem}
.vista.on{display:flex}
h1{font-size:4.6rem;font-weight:900;letter-spacing:-.02em;line-height:1.05}
.codigo{display:flex;gap:1.6rem}
.codigo b{display:flex;align-items:center;justify-content:center;width:11rem;height:14rem;background:#fff;color:var(--ink);border-radius:1.6rem;font-size:10rem;font-weight:900;font-variant-numeric:tabular-nums;box-shadow:0 1.4rem 4rem rgba(0,0,0,.35)}
.vence{font-size:1.8rem;color:var(--azul-claro);font-weight:700;min-height:2.4rem}
.pasos{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:1.1rem;text-align:left;font-size:2.4rem;font-weight:500}
.pasos li{counter-increment:p;display:flex;align-items:center;gap:1.4rem}
.pasos li::before{content:counter(p);display:flex;align-items:center;justify-content:center;flex:0 0 3.4rem;height:3.4rem;border-radius:50%;background:var(--naranja);color:#fff;font-weight:900;font-size:2rem}
.nota{font-size:1.9rem;color:var(--azul-claro);font-weight:500;line-height:1.4}
.grande{font-size:2.5rem;line-height:1.4;font-weight:500}
.aviso{font-size:1.8rem;font-weight:700;color:#FFD166;min-height:2.4rem}
.barra{width:36rem;height:.7rem;background:rgba(255,255,255,.18);border-radius:1rem;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--naranja);border-radius:1rem}
.boton{display:inline-block;background:#fff;color:var(--ink);font-size:2rem;font-weight:700;padding:1.3rem 2.4rem;border-radius:1.2rem;text-decoration:none}
.boton:focus{outline:.35rem solid var(--naranja)}
.pie{position:absolute;bottom:2rem;left:3rem;right:3rem;font-size:1.5rem;color:#8fa9cc;font-weight:500}
.pie b{color:var(--azul-claro)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}