/* En Plata · la web. La misma piel riso que los vídeos (marca.css): papel mantequilla,
   tinta, el tomate siempre de relleno y nunca de letra (2,97:1), y la sombra dura de tinta. */
:root{
  --fondo:#FFF0C8;
  --papel:#FFFBEF;
  --tinta:#17161C;
  --tinta-baja:#4A4540;
  --tomate:#FF4A1C;
  --azul:#2B50E8;
  --titular:"Unbounded",system-ui,sans-serif;
  --cuerpo:"Inter Tight",system-ui,sans-serif;
  --sombra:6px 6px 0 var(--tinta);
  --sombra-chica:4px 4px 0 var(--tinta);
  --ancho:720px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 18px/1.55 var(--cuerpo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--titular);letter-spacing:-.03em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-weight:900;font-size:clamp(2.1rem,8vw,3.9rem)}
h2{font-weight:800;font-size:clamp(1.35rem,4.6vw,1.8rem)}
p{margin:0}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}

/* el subrayón: tomate POR DETRÁS de la palabra, como en los rótulos */
h1 em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
h1 em::before{content:"";position:absolute;left:-.08em;right:-.08em;top:.52em;bottom:-.04em;
  background:var(--tomate);z-index:-1;transform:skewX(-8deg) rotate(-1.2deg);border-radius:5px}

/* ── barra ── */
.barra{max-width:calc(var(--ancho) + 32px);margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 1.15rem/1 var(--titular);letter-spacing:-.03em}
.barra-yt{font:700 .95rem/1 var(--cuerpo);text-decoration:none;border-bottom:2px solid var(--tinta);padding-bottom:2px}

main{max-width:calc(var(--ancho) + 32px);margin:0 auto;padding:0 16px}
section{margin-top:64px}
section > h2{margin-bottom:14px}
section > p + p{margin-top:12px}

/* ── inicio ── */
.portada{margin-top:28px}
.portada p{margin-top:20px;font-size:1.15rem;color:var(--tinta-baja);max-width:34em}
.portada .boton{margin-top:24px}

.filas{list-style:none;margin:0;padding:0;border-top:3px solid var(--tinta)}
.filas li{border-bottom:3px solid var(--tinta)}
.fila{display:grid;grid-template-columns:88px 1fr 24px;gap:16px;align-items:center;padding:16px 0;text-decoration:none}
.fila-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.fila-nombre{font:800 1.2rem/1.1 var(--titular);letter-spacing:-.02em}
.fila-encuesta{font:700 .85rem/1.3 var(--cuerpo);font-variant-numeric:tabular-nums}
.fila-donde{font-size:.85rem;font-weight:700;color:var(--tinta)}
.fila-resumen{font-size:.98rem;line-height:1.4;color:var(--tinta-baja)}
.fila-flecha{width:24px;height:24px;transition:transform .18s ease}
.fila:hover .fila-flecha{transform:translateX(4px)}
.fila:hover .fila-nombre{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.lista-intro{margin:-4px 0 18px;font-size:.95rem;color:var(--tinta-baja)}
.lista-intro a{font-weight:700}
.lista-nota{margin-top:14px;font-size:.95rem;color:var(--tinta-baja)}

.logo{display:flex;align-items:center;justify-content:center;width:88px;height:64px;padding:8px 10px;background:var(--papel);
  border:3px solid var(--tinta);border-radius:16px;box-shadow:var(--sombra-chica);flex:none}
.logo img{max-width:100%;max-height:100%;object-fit:contain}
.logo-texto{font:800 .6rem/1.1 var(--titular);letter-spacing:-.01em;text-align:center;hyphens:none;word-break:keep-all}
.logo-grande.logo-texto{font-size:.9rem}
.logo-grande{width:132px;height:96px;padding:14px 16px;border-radius:22px;box-shadow:var(--sombra)}

.temas ul{list-style:none;margin:0 0 20px;padding:0}
.tema{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:16px;align-items:center;text-decoration:none}
.tema-img{position:relative;border:3px solid var(--tinta);border-radius:14px;overflow:hidden;box-shadow:var(--sombra-chica);aspect-ratio:16/9}
.tema-img img{width:100%;height:100%;object-fit:cover}
.tema-img .video-play{width:40px;height:40px;right:8px;bottom:8px;border-width:3px}
.tema-texto{display:flex;flex-direction:column;gap:4px;font-size:.98rem;color:var(--tinta-baja);line-height:1.4}
.tema-titulo{font:800 1.05rem/1.2 var(--titular);letter-spacing:-.02em;color:var(--tinta)}
.tema:hover .tema-titulo{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.metodo p{max-width:34em}

/* ── botones ── */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;
  background:var(--tinta);color:var(--fondo);border:3px solid var(--tinta);border-radius:14px;
  font:800 1rem/1 var(--titular);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--tomate);transition:transform .12s ease,box-shadow .12s ease}
.boton:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tomate)}
.boton:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tomate)}
.boton-claro{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra-chica)}
.boton-claro:hover{box-shadow:var(--sombra)}
.boton-claro:active{box-shadow:1px 1px 0 var(--tinta)}

/* ── partido ── */
.volver{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;font-size:.95rem;text-decoration:none}
.volver svg{width:20px;height:20px}
.volver:hover{text-decoration:underline}
.partido-cabeza{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:22px}
.en-plata{margin-top:24px;font-size:1.3rem;line-height:1.4;max-width:30em}
.en-plata strong{font-family:var(--titular);font-weight:900;letter-spacing:-.02em}

.video{margin-top:36px}
.video-portada{position:relative;display:block;border:4px solid var(--tinta);border-radius:20px;overflow:hidden;
  box-shadow:var(--sombra);aspect-ratio:16/9;background:var(--tinta)}
.video-portada img{width:100%;height:100%;object-fit:cover}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:4px solid var(--tinta);border-radius:20px;box-shadow:var(--sombra);background:var(--tinta)}
.video-play{position:absolute;right:12px;bottom:12px;width:58px;height:58px;border-radius:50%;background:var(--tomate);
  border:4px solid var(--tinta);display:grid;place-items:center;box-shadow:var(--sombra-chica);transition:transform .15s ease}
.video-play svg{width:24px;height:24px;fill:var(--tinta);margin-left:3px}
.video-portada:hover .video-play,.tema:hover .video-play{transform:scale(1.08)}
.video-pie{margin-top:12px;font-size:.95rem;color:var(--tinta-baja)}

.aviso{margin-top:48px}
.aviso p{color:var(--tinta-baja)}
.aviso-donde{font-weight:700;color:var(--tinta)!important}
.aviso-fecha{font-weight:700;color:var(--tinta)!important}

.puntos{list-style:none;margin:56px 0 0;padding:0}
.punto{padding:36px 0;border-top:3px solid var(--tinta)}
.punto h2{margin-bottom:16px}
.punto > p + p{margin-top:10px}
.ojo{margin-top:22px;padding:2px 0 2px 18px;border-left:5px solid var(--tomate)}
.ojo p + p{margin-top:8px}
.ojo-titulo{font:900 1.05rem/1 var(--titular);letter-spacing:-.02em;margin-bottom:10px;display:inline-block;position:relative;z-index:0}
.ojo-titulo::before{content:"";position:absolute;left:-.12em;right:-.12em;top:.5em;bottom:-.08em;background:var(--tomate);
  z-index:-1;transform:skewX(-8deg) rotate(-1.5deg);border-radius:4px}
.en-video{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;font-size:.95rem;color:var(--azul);text-decoration:none}
.en-video svg{width:18px;height:18px;fill:currentColor}
.en-video span{font-variant-numeric:tabular-nums}
.en-video:hover{text-decoration:underline;text-underline-offset:3px}

.fuentes{margin-top:24px;padding-top:36px;border-top:3px solid var(--tinta)}
.fuentes p{font-size:.95rem;color:var(--tinta-baja)}
.fuentes-nota{margin-top:12px}
.fuentes-lista{margin:0;padding-left:1.1em;font-size:.95rem;color:var(--tinta-baja)}
.fuentes-lista li + li{margin-top:6px}
.fuentes-lista a{overflow-wrap:anywhere;text-decoration-color:rgba(23,22,28,.35);text-underline-offset:3px}
.fuentes-lista a:hover{color:var(--tinta);text-decoration-color:currentColor}

.compartir{padding:26px 22px;background:var(--tinta);color:var(--fondo);border-radius:22px}
.compartir p{margin-top:10px;color:#E9DDB8}
.compartir-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.compartir .boton{background:var(--fondo);color:var(--tinta);border-color:var(--fondo)}
.compartir .boton-claro{background:transparent;color:var(--fondo);border-color:var(--fondo);box-shadow:4px 4px 0 var(--tomate)}

.otros{margin-top:64px}
.otros h2{margin-bottom:18px}
.otros ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px 12px}
.otros a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:700 .9rem/1.2 var(--cuerpo);text-decoration:none}
.otros a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.otros .logo{width:66px;height:48px;padding:6px 8px;border-radius:12px}

/* ── pie ── */
.pie{max-width:calc(var(--ancho) + 32px);margin:80px auto 0;padding:28px 16px 40px;border-top:3px solid var(--tinta)}
.pie-redes{display:flex;flex-wrap:wrap;gap:12px 24px}
.pie-redes a{font:800 1.05rem/1 var(--titular);letter-spacing:-.02em;text-decoration:none}
.pie-redes a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pie-como{margin-top:22px;font-size:.92rem;color:var(--tinta-baja)}
.pie-como a{font-weight:700}

@media (min-width:720px){
  body{font-size:19px}
  .barra{padding:20px 16px}
  .portada{margin-top:48px}
  .partido-cabeza{flex-direction:row;align-items:center;gap:28px}
  .fila{grid-template-columns:104px 1fr 28px;gap:22px;padding:20px 0}
  .fila .logo{width:104px;height:72px;padding:10px 12px}
  .tema{grid-template-columns:240px 1fr;gap:22px}
  .compartir{padding:34px 32px}
  .video-play{right:18px;bottom:18px;width:76px;height:76px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── atajos de la portada ── */
.atajos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.atajos a{font:800 1rem/1 var(--titular);letter-spacing:-.02em;text-decoration:none;border-bottom:3px solid var(--tomate);padding-bottom:3px}
.atajos a:hover{border-color:var(--tinta)}
h3{font:800 1.15rem/1.15 var(--titular);letter-spacing:-.02em;margin:0}
[hidden]{display:none!important}

/* ── quién va ganando ── */
.encuesta-intro,.compara-intro{margin:-4px 0 22px;font-size:.98rem;color:var(--tinta-baja);max-width:34em}
.encuesta-intro a{font-weight:700}
.barras{list-style:none;margin:0;padding:0}
.barras li + li{margin-top:10px}
.barras a{display:grid;grid-template-columns:5.6em 1fr 3.6em;gap:10px;align-items:center;text-decoration:none}
.barra-nombre{font:800 .95rem/1.1 var(--titular);letter-spacing:-.02em;overflow-wrap:anywhere}
.barra-pista{position:relative;height:22px;background:var(--papel);border:3px solid var(--tinta);border-radius:8px;overflow:hidden}
.barra-relleno{position:absolute;inset:0 auto 0 0;background:var(--tinta)}
.barras li:first-child .barra-relleno,.barras a:hover .barra-relleno{background:var(--tomate)}
.barra-cifra{font:900 1.05rem/1 var(--titular);font-variant-numeric:tabular-nums;text-align:right}
.barra-cifra small{display:block;margin-top:3px;font:700 .75rem/1 var(--cuerpo);color:var(--tinta-baja)}
.barras-leyenda{margin-top:12px;font-size:.9rem;color:var(--tinta-baja)}

.cuentas{margin-top:36px;padding:24px 20px;background:var(--papel);border:3px solid var(--tinta);border-radius:20px;box-shadow:var(--sombra)}
.cuentas > p{margin-top:8px;font-size:.98rem;color:var(--tinta-baja)}
.cuentas-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ficha-suma{min-height:44px;padding:0 14px;background:var(--fondo);color:var(--tinta);border:3px solid var(--tinta);border-radius:12px;
  font:700 .95rem/1 var(--cuerpo);cursor:pointer;transition:transform .1s ease}
.ficha-suma span{font-weight:800;font-variant-numeric:tabular-nums;opacity:.6}
.ficha-suma[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}
.ficha-suma[aria-pressed="true"] span{opacity:1}
.ficha-suma:active{transform:translate(1px,1px)}
.cuentas-pista{position:relative;height:30px;margin-top:22px;background:var(--fondo);border:3px solid var(--tinta);border-radius:10px;overflow:visible}
.cuentas-relleno{position:absolute;inset:0 auto 0 0;width:0;background:var(--tinta);border-radius:6px 0 0 6px;transition:width .35s cubic-bezier(.2,.9,.3,1.2)}
.cuentas.llega .cuentas-relleno{background:var(--tomate)}
.cuentas-176{position:absolute;top:-9px;bottom:-9px;left:50.29%;width:3px;background:var(--tinta)}
.cuentas-176::after{content:"176";position:absolute;top:-1.5em;left:50%;transform:translateX(-50%);font:800 .8rem/1 var(--titular)}
.cuentas-pista{margin-top:36px}
.cuentas-total{margin-top:14px;font-size:1.05rem}
.cuentas-total strong{font-family:var(--titular);font-weight:900;letter-spacing:-.02em}

/* ── qué dice cada uno ── */
.pestanas{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 20px;padding:4px 16px 8px;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;min-height:44px;padding:0 16px;background:var(--papel);color:var(--tinta);border:3px solid var(--tinta);
  border-radius:12px;font:800 .92rem/1 var(--titular);letter-spacing:-.01em;cursor:pointer}
.pestanas button[aria-selected="true"]{background:var(--tinta);color:var(--fondo);box-shadow:3px 3px 0 var(--tomate)}
.tema-panel + .tema-panel{margin-top:36px}
.con-pestanas .tema-panel + .tema-panel{margin-top:0}
.con-pestanas .tema-panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tema-panel h3{margin-bottom:12px}
.dichos{list-style:none;margin:0;padding:0;border-top:3px solid var(--tinta)}
.dichos li{border-bottom:2px solid rgba(23,22,28,.2)}
.dichos a{display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:start;padding:14px 0;text-decoration:none;font-size:.98rem;line-height:1.45}
.dichos .logo{width:66px;height:48px;padding:6px 8px;border-radius:12px}
.dicho-nombre{display:block;font:800 1rem/1.2 var(--titular);letter-spacing:-.02em;margin-bottom:3px}
.dichos a:hover .dicho-nombre{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ── tu papeleta ── */
.selector{display:flex;flex-direction:column;gap:8px;max-width:22em}
.selector span{font:800 .95rem/1 var(--titular);letter-spacing:-.02em}
.selector select{min-height:54px;padding:0 44px 0 16px;background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317161C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px;
  color:var(--tinta);border:3px solid var(--tinta);border-radius:14px;box-shadow:var(--sombra-chica);font:700 1.05rem/1 var(--cuerpo);appearance:none;-webkit-appearance:none}
.papeleta-cuenta{margin:16px 0 0;font-weight:700}
.papeleta .filas{margin-top:16px}

@media (min-width:720px){
  .barras a{grid-template-columns:9em 1fr 5em;gap:16px}
  .cuentas{padding:30px 30px}
  .dichos a{grid-template-columns:80px 1fr;gap:18px}
  .dichos .logo{width:80px;height:56px}
}

.dichos-mas{margin-top:4px}
.dichos-mas summary{display:flex;align-items:center;min-height:52px;cursor:pointer;font:800 1rem/1.2 var(--titular);letter-spacing:-.02em;
  list-style:none;text-decoration:underline;text-decoration-color:var(--tomate);text-decoration-thickness:3px;text-underline-offset:5px}
.dichos-mas summary::-webkit-details-marker{display:none}
.dichos-mas summary span{margin-left:6px;font-variant-numeric:tabular-nums}
.dichos-mas[open] summary{margin-bottom:6px}
.barras-mas{margin-top:8px}
.barras-mas .barras{margin-top:6px}