/* Tus Concursos - Universo DITCOM (S534). Familia de Opina y Gana, Encuestas Chile, Nota Ciudadana y Evalua Chile:
   Exo 2 (titulos y cifras) + IBM Plex Sans (texto), ambas OFL, servidas desde este sitio.
   Idea central: cada categoria es un sobre cerrado con su sello de lacre; la pregunta se abre por diez segundos y la respuesta
   queda sellada hasta el cierre. Indigo de sobre (confianza), lacre (accion) y oro (premio).
   Contrastes AA medidos (S534): tinta/papel 16,1; tenue/papel 5,9 y sobre suave 5,4; enlace/papel 8,6; blanco/sobre 13,4;
   blanco/lacre 7,4; oro/sobre 7,0. Oscuro: tinta 15,7; tenue 7,4 y 6,8; enlace 9,5; papel/lacre 8,2. */
@font-face{font-family:"Exo 2";src:url(/assets/fonts/exo2-var.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plexsans-var.woff2) format("woff2");font-weight:400 700;font-display:optional}

:root{
  --papel:#F7F8FC;--blanco:#FFFFFF;--suave:#EDEFF7;--linea:#D9DCEB;--linea-2:#C3C7DD;
  --tinta:#161A33;--tinta-2:#3B4060;--tenue:#5A5F7D;
  --sobre:#24256E;--sobre-2:#34368F;--sobre-claro:#CDD0EA;--enlace:#2C3BA8;
  --lacre:#A5221B;--lacre-h:#8C1C16;--sobre-lacre:#FFFFFF;
  --oro:#E7B33B;--oro-claro:#FBF1D6;--verde:#1F7A4D;
  --t-titulo:"Exo 2","Exo 2 Fallback","IBM Plex Sans",system-ui,sans-serif;
  --t-texto:"IBM Plex Sans","Plex Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:1160px;--r:10px
}
@media (prefers-color-scheme:dark){:root{
  --papel:#0F1124;--blanco:#151833;--suave:#171A33;--linea:#272B4D;--linea-2:#353A63;
  --tinta:#E9EBF7;--tinta-2:#C1C5DD;--tenue:#9DA2C2;
  --sobre:#1E2052;--sobre-2:#2A2D6B;--sobre-claro:#2A2D5A;--enlace:#A9B4FF;
  --lacre:#FF8A7F;--lacre-h:#FFA399;--sobre-lacre:#0F1124;
  --oro:#F2C35A;--oro-claro:#2A2410;--verde:#57C08A
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--t-texto);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--enlace);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--enlace);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol,dl,dd,figure,pre{margin:0}
h1,h2,h3{font-family:var(--t-titulo);line-height:1.15;color:var(--tinta)}
b,strong{font-weight:600}
code{font:500 .86em/1.4 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--papel);color:var(--tinta);padding:.6rem 1rem;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
.nw{white-space:nowrap}
[id]{scroll-margin-top:84px}

/* cabecera */
.cab{background:var(--papel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.cab-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinta);min-height:44px}
.marca-ico{width:34px;height:34px;flex:none}
.marca-txt{font:800 1.15rem/1 var(--t-titulo);letter-spacing:-.01em}
.nav{display:flex;list-style:none;padding:0;gap:.15rem}
.nav a{white-space:nowrap;display:flex;align-items:center;min-height:44px;padding:0 .65rem;border-radius:8px;color:var(--tinta-2);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{background:var(--suave);color:var(--tinta)}
.nav a[aria-current="page"]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--lacre)}
@media (max-width:600px){.cab-in{padding-top:6px;padding-bottom:2px;gap:0}.cab nav{width:100%}.nav{justify-content:space-between;margin:0 -.5rem}.nav a{font-size:.92rem;padding:0 .45rem}[id]{scroll-margin-top:112px}}
@media (max-width:400px){.nav{margin:0 -.35rem}.nav a{font-size:.84rem;padding:0 .28rem;letter-spacing:-.005em}}
@media (max-width:360px){.nav{margin:0 -.25rem}.nav a{font-size:.78rem;padding:0 .2rem;letter-spacing:-.01em}}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.55rem 1.15rem;border-radius:999px;border:2px solid var(--sobre);background:var(--sobre);color:#FFFFFF;font:700 1rem/1.2 var(--t-texto);text-decoration:none;cursor:pointer}
.boton:hover{background:var(--sobre-2);border-color:var(--sobre-2)}
.boton-2{background:transparent;color:var(--tinta)}
.boton-2:hover{background:var(--suave);color:var(--tinta);border-color:var(--sobre)}
.boton-lacre{background:var(--lacre);border-color:var(--lacre);color:var(--sobre-lacre)}
.boton-lacre:hover{background:var(--lacre-h);border-color:var(--lacre-h)}
@media (prefers-color-scheme:dark){.boton{color:#FFFFFF;border-color:#5E62C9;background:#3A3D9A}.boton:hover{background:#4A4EB5;border-color:#6A6ED6}.boton-2{background:transparent;color:var(--tinta)}.boton-lacre{background:var(--lacre);border-color:var(--lacre);color:var(--sobre-lacre)}.boton-lacre:hover{background:var(--lacre-h);border-color:var(--lacre-h)}}

/* portada */
.portada{padding:56px 0 52px;border-bottom:1px solid var(--linea);background:var(--papel)}
.portada-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.portada h1{font-size:clamp(2.35rem,5.6vw,3.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;max-width:13ch}
.lead{font-size:1.18rem;line-height:1.55;color:var(--tinta-2);margin-top:1.1rem;max-width:58ch}
.portada-mas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
@media (max-width:900px){.portada-in{grid-template-columns:1fr;gap:36px}.portada{padding:40px 0 40px}}

/* cuadro de pregunta: el de ejemplo, el del dialogo y el de la pagina sin JavaScript comparten forma */
.muestra{margin:0}
.muestra-cap{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--tinta-2);margin-bottom:.7rem}
.muestra-cuadro,.cuadro-in{background:var(--blanco);border:1.5px solid var(--linea-2);border-radius:16px;padding:22px 22px 20px;box-shadow:0 18px 40px -26px rgba(36,37,110,.55)}
.muestra-cab,.cuadro-cab{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.muestra-cat,.cuadro-cat{display:flex;align-items:center;gap:.45rem;font:700 .98rem/1.2 var(--t-titulo);color:var(--sobre)}
@media (prefers-color-scheme:dark){.muestra-cat,.cuadro-cat{color:var(--enlace)}}
.muestra-q,.cuadro-q{font:700 1.4rem/1.25 var(--t-titulo);margin:.9rem 0 .2rem;color:var(--tinta)}
.muestra-sms{display:flex;align-items:center;gap:.7rem;margin-top:1rem;color:var(--tenue);font-size:.95rem}
.ico-mini{width:20px;height:20px;flex:none}

.opciones{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.5rem}
.opciones li{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border:1.5px solid var(--linea);border-radius:12px;font-size:1.08rem;font-weight:500}
.op-l{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sobre);color:#FFFFFF;font:800 1rem/1 var(--t-titulo)}
@media (prefers-color-scheme:dark){.op-l{background:#3A3D9A}}
.opciones-res .op-ok{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 9%,transparent)}
.op-marca{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--verde)}

.burbuja{display:inline-block;background:var(--sobre);color:#FFFFFF;border-radius:16px 16px 16px 4px;padding:.3rem .8rem;font:700 1rem/1.4 var(--t-titulo);white-space:nowrap}
@media (prefers-color-scheme:dark){.burbuja{background:#3A3D9A}}

/* reloj: anillo de cuenta regresiva (2 pi 19 = 119,38) */
.reloj{position:relative;flex:none;width:52px;height:52px}
.reloj svg{width:52px;height:52px;transform:rotate(-90deg)}
.reloj circle{fill:none;stroke-width:4.5}
.reloj-fondo{stroke:var(--linea)}
.reloj-arco{stroke:var(--lacre);stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:0}
.reloj-n{position:absolute;inset:0;display:grid;place-items:center;font:800 1.15rem/1 var(--t-titulo);color:var(--tinta);font-variant-numeric:tabular-nums}
.reloj-7 .reloj-arco{stroke-dashoffset:35.8}
.reloj-vivo.corre .reloj-arco,.reloj-css .reloj-arco{animation:mecha var(--dur,10s) linear forwards}
@keyframes mecha{from{stroke-dashoffset:0}to{stroke-dashoffset:119.38}}

/* aviso de estado */
.aviso{background:var(--oro-claro);border-bottom:1px solid var(--linea)}
.aviso-in{padding:16px 20px}
.aviso p{max-width:80ch}

/* bloques */
.bloque{padding:60px 0}
.bloque-alt{background:var(--suave);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.sec-cab{margin-bottom:28px}
.h-sec{font-size:clamp(1.6rem,3.4vw,2.15rem);font-weight:800;letter-spacing:-.01em}
.h-sub{color:var(--tinta-2);margin-top:.6rem;max-width:64ch}
.mas{margin-top:1.4rem;font-weight:600}

/* sobres: una categoria = un sobre cerrado con su sello */
.sobres{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sobres-2{grid-template-columns:1fr}
@media (min-width:700px){.sobres{gap:18px}.sobres-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.sobres{grid-template-columns:repeat(5,minmax(0,1fr))}.sobres-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.sobres{grid-template-columns:1fr}}
.sobre-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--blanco);border:1.5px solid var(--linea-2);border-radius:var(--r);padding:58px 18px 18px;overflow:hidden}
.sobre-solapa{position:absolute;top:0;left:0;right:0;height:46px}
.lacre{position:absolute;left:50%;top:22px;transform:translate(-50%,0);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#7A7EA8;color:#FFFFFF;box-shadow:0 0 0 3px var(--blanco)}
@media (prefers-color-scheme:dark){.lacre{background:#4A4E7E}}
.sobre-solapa::before{content:"";position:absolute;inset:0;background:var(--sobre-claro);clip-path:polygon(0 0,100% 0,50% 100%)}
.ico-lacre{width:24px;height:24px}
.sobre-abierto .sobre-solapa::before{background:var(--sobre)}
.sobre-abierto .lacre{background:var(--lacre);color:var(--sobre-lacre)}
.sobre-cerrado .lacre{background:var(--oro);color:#161A33}
.sobre-grande .lacre{background:var(--oro);color:#161A33}
.sobre-t{font-size:1.18rem;font-weight:700;margin-top:28px}
.sobre-d{color:var(--tenue);font-size:.95rem;line-height:1.45;margin-top:.3rem;max-width:30ch;min-height:2.9em}
.sobre-num{font:900 2.3rem/1 var(--t-titulo);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:1rem;color:var(--tinta)}
.sobre-num-vacio{font:600 .98rem/1.3 var(--t-texto);letter-spacing:0;color:var(--tenue);border:1.5px dashed var(--linea-2);border-radius:8px;padding:.45rem .8rem}
.sobre-num-cerrado{color:var(--tenue)}
.sobre-precio{font-size:.92rem;color:var(--tinta-2);margin-top:.55rem}
.sobre-cuenta{font-size:.95rem;margin-top:.35rem}
.sobre-hora{color:var(--tenue)}
.sobre-f{width:100%;margin-top:auto;padding-top:1rem}
.sobre-f .boton{width:100%}
.sobre-sms{font-size:.92rem;margin-top:.35rem;font-weight:600}
.sobre-abre,.sobre-gana{font-size:.95rem;margin-top:.6rem;color:var(--tinta-2)}
.sobre-est{margin-top:auto;padding-top:1rem;display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;font-size:.92rem}
.sobre-grande .sobre-in{padding-top:62px}
.sobre-grande .sobre-t{font-size:1.4rem}
.sobre-grande .sobre-d{max-width:40ch;min-height:0}
.sec-aviso{margin-top:.7rem;padding-left:.8rem;border-left:3px solid var(--lacre);color:var(--tinta-2);max-width:64ch}
@media (max-width:699px){.sobre-in{padding:52px 12px 14px}.sobre-t{font-size:1.02rem;margin-top:24px}.sobre-d{font-size:.84rem;min-height:4.35em}.sobre-num{font-size:1.8rem;margin-top:.7rem}.sobre-num-vacio{font-size:.84rem;padding:.35rem .5rem}.sobre-precio,.sobre-cuenta,.sobre-sms,.sobre-abre,.sobre-gana,.sobre-est{font-size:.82rem}.sobre-f .boton{font-size:.95rem;padding:.5rem .6rem;line-height:1.15}.lacre{width:40px;height:40px;top:20px}.ico-lacre{width:21px;height:21px}.sobre-grande .sobre-in{padding-top:56px}.sobre-grande .sobre-t{font-size:1.25rem}.sobre-grande .sobre-d{font-size:.92rem}}

.pill{display:inline-flex;align-items:center;min-height:26px;padding:.1rem .65rem;border-radius:999px;font-size:.84rem;font-weight:600;background:var(--suave);color:var(--tinta-2);border:1px solid var(--linea-2)}
.pill-abierto{background:var(--lacre);color:var(--sobre-lacre);border-color:var(--lacre)}
.pill-cerrado{background:var(--oro-claro);color:var(--tinta);border-color:var(--oro)}
.pill-ejemplo{background:var(--oro-claro);color:var(--tinta);border-color:var(--oro)}

/* pasos: secuencia real del concurso */
.pasos{list-style:none;padding:0;margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;padding-top:3.1rem}
.pasos li::before{content:counter(paso);position:absolute;top:0;left:0;font:900 2.4rem/1 var(--t-titulo);color:var(--lacre)}
.pasos h3{font-size:1.15rem;font-weight:700}
.pasos p{margin-top:.4rem;color:var(--tinta-2)}
@media (max-width:900px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pasos{grid-template-columns:1fr;gap:22px}}

/* reglas */
.reglas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px 32px;margin-top:24px}
.reglas dt{font:700 1.08rem/1.25 var(--t-titulo)}
.reglas dd{margin-top:.35rem;color:var(--tinta-2)}

/* ganadores en portada */
.ganadores{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:20px}
.ganadores li{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1.5px solid var(--linea);border-radius:10px;background:var(--blanco)}
.gan-cat{display:flex;align-items:center;gap:.45rem;font-weight:600}
.gan-num{color:var(--tinta-2);white-space:nowrap}

/* paginas de texto */
.pagina{padding:48px 0 64px}
.angosto{max-width:800px}
.pagina h1{font-size:clamp(2rem,4.6vw,2.8rem);font-weight:800;letter-spacing:-.015em}
.h2-pag{font-size:1.32rem;font-weight:700;margin-top:2.1rem}
.pagina p{margin-top:.8rem;max-width:72ch}
.pagina .lead{margin-top:1rem}
.puntos{margin-top:.8rem;padding-left:1.25rem;max-width:72ch}
.puntos li{margin-top:.35rem}
.nota-legal{margin-top:2.2rem!important;padding-top:1rem;border-top:1px solid var(--linea);font-size:.95rem;color:var(--tinta-2)}
.vigencia{margin-top:1.6rem!important;font-size:.92rem;color:var(--tenue)}
.publicada{font-size:.95rem}
.caja{margin-top:1.4rem;padding:1rem 1.2rem;border:1.5px solid var(--linea-2);border-radius:12px;background:var(--blanco)}
.caja p:first-child{margin-top:0}
.vacia{margin-top:1.6rem;padding:1.3rem 1.4rem;border:1.5px dashed var(--linea-2);border-radius:12px}
.vacia-t{font:700 1.15rem/1.3 var(--t-titulo);margin-top:0!important}
.tabla-x{overflow-x:auto;outline-offset:2px;margin-top:1rem;border:1.5px solid var(--linea);border-radius:12px;background:var(--blanco)}
.tabla{border-collapse:collapse;width:100%;font-size:.98rem}
.tabla th,.tabla td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla thead th{font-weight:600;color:var(--tinta-2);background:var(--suave)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;white-space:nowrap}
.migas{padding-top:20px;font-size:.92rem}
.migas ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.migas li+li::before{content:"/";margin-right:.4rem;color:var(--tenue)}
.pagina-sin-borde{padding-top:20px}
.hash{word-break:break-all;background:var(--suave);padding:.1rem .35rem;border-radius:6px}
.codigo{margin-top:.8rem;padding:.8rem 1rem;background:var(--suave);border:1px solid var(--linea);border-radius:10px;overflow-x:auto}
.sellos{list-style:none;padding:0;margin-top:.8rem;display:grid;gap:.5rem}
.sellos li{display:grid;gap:.2rem}
.sello-exp{margin-top:2.6rem;padding-top:.4rem;border-top:1px solid var(--linea)}
.ant{margin-top:1.8rem;padding:1.2rem 1.3rem;border:1.5px solid var(--linea-2);border-radius:14px;background:var(--blanco)}
.ant-cab{display:flex;align-items:center;gap:.45rem;font-weight:600;color:var(--tinta-2);margin-top:0!important}
.ant-q{font-size:1.25rem;margin-top:.6rem}
.ant-fuente{font-size:.95rem}
.ant-sello{margin-top:.9rem}
.ant-sello summary{cursor:pointer;font-weight:600;color:var(--enlace);min-height:32px}
.gan-bloque{margin-top:1.6rem}

/* dialogo de la pregunta */
.cuadro{border:0;padding:0;background:transparent;width:min(540px,calc(100% - 32px));max-width:none;color:var(--tinta)}
.cuadro::backdrop{background:rgba(14,16,40,.66)}
.cuadro-in{box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.cuadro-t{font-size:1.4rem;font-weight:800}
.cuadro-txt{margin-top:.8rem;color:var(--tinta-2)}
.cuadro-num{margin-top:.6rem;font-weight:600}
.cuadro-sms{margin-top:1rem;font-size:.98rem;color:var(--tinta-2)}
.cuadro-bot{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.cuadro-fijo{max-width:560px;margin:0 auto}
.pregunta-sola .cuadro-q{font-size:1.5rem}

/* pie */
.pie{background:var(--sobre);color:#E6E8F7;padding:40px 0 48px;margin-top:0}
@media (prefers-color-scheme:dark){.pie{background:#0A0C1C;border-top:1px solid var(--linea)}}
.pie-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px}
.pie a{color:#FFFFFF}
.pie p{margin-top:.5rem;max-width:62ch;font-size:.95rem}
.pie-marca{font:800 1.2rem/1 var(--t-titulo);color:#FFFFFF;margin-top:0!important}
.pie-nav{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1.2rem;align-content:start}
.pie-nav a{display:inline-flex;min-height:44px;align-items:center;font-size:.95rem}
@media (max-width:760px){.pie-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.reloj-vivo.corre .reloj-arco,.reloj-css .reloj-arco{animation:none}}
/* S549 NOVA 2026-10-25: respaldos con metricas ajustadas a Exo 2 (800) y IBM Plex Sans (400) para que el cambio de fuente no mueva la pagina (CLS). Calculado con fontTools contra Arial/Liberation. */
@font-face{font-family:"Exo 2 Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arial");font-weight:500 749;size-adjust:95.8%;ascent-override:104.3%;descent-override:21.0%;line-gap-override:0%}@font-face{font-family:"Exo 2 Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arial");font-weight:750 849;size-adjust:98.2%;ascent-override:101.7%;descent-override:20.5%;line-gap-override:0%}@font-face{font-family:"Exo 2 Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arial");font-weight:850 900;size-adjust:100.2%;ascent-override:99.7%;descent-override:20.1%;line-gap-override:0%}
@font-face{font-family:"Plex Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:400 700;size-adjust:100%;ascent-override:101.2%;descent-override:27.1%;line-gap-override:0%}