/* LA HOJA COMÚN DE sabo.gg (4-nov-2026, chat rediseno-pollar-4nov).
   Amor: «algo similar a pollar.news: sencillo, todo bien organizado, mejor hecho y menos vibecodeado».
   Medidas y origen de cada valor: amor-hq docs/marca/referencia-pollar-4nov.md. Decisiones del hub (4-nov):
   una sola letra de contenido, Overused Grotesk, sin mayúsculas; línea de 1 px y filas en vez de tarjetas, sin sombras ni bordes de
   2 px; cian escaso (botón principal, página activa, una marca por pantalla); enlaces blanco subrayado; tema oscuro fijo.
   La pieza base: título, línea llena debajo, filas separadas por una línea fina.
   El armazón lo pone tools/paginas/armazon.mjs. test/la-cara-es-la-del-rediseno.mjs vigila esta hoja. */

@font-face{font-family:'SABO Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/sabo-grotesk-vf.woff2') format('woff2');}
@font-face{font-family:'SABO Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sabo-mono-400.woff2') format('woff2');}
/* reserva con la misma caja que SABO Grotesk (los anchos son los de Overused, de donde sale), para que el texto no salte al cargar */
@font-face{font-family:'Grotesk Reserva';src:local('Arial');size-adjust:92.97%;ascent-override:107.56%;descent-override:37.65%;line-gap-override:0%;}

:root{
  color-scheme:dark;
  --bg:#000; --card:#0a0b0c; --hueco:#111315;
  --line:rgba(255,255,255,.1); --line-fina:rgba(255,255,255,.06); --line-control:rgba(255,255,255,.2); --rule:#f2f2f2;
  --txt:#f2f2f2; --dek:#c4c4c4; --dim:#a6abae; --muted:#8a9197;
  --brand:#40f2fe; --brand-claro:#8df7fe; --on-brand:#04110f; --live:#e40014;
  --subrayado:rgba(242,242,242,.3);
  /* los nombres de antes, que aún usa algún resto de contenido */
  --fg:var(--txt); --gold:var(--txt); --cy:var(--brand); --ink:var(--on-brand); --line2:var(--line-control); --card2:var(--hueco);
  --sans:'SABO Grotesk','Grotesk Reserva',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'SABO Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --gut:20px; --fila:13px; --barra-movil:57px;
  --ls-titulo:-.022em; --ls-texto:-.015em; --ls-lista:-.007em;
  --t-pagina:500 27px/31px var(--sans); --t-h1:500 31px/36px var(--sans);
}
@media(min-width:768px){:root{--gut:33px;--t-pagina:500 30px/34px var(--sans);--t-h1:500 40px/46px var(--sans);}}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;background:var(--bg);--salto:16px;scrollbar-gutter:stable;font-synthesis-weight:none;}
[id]{scroll-margin-top:var(--salto);}
body{background:var(--bg);color:var(--txt);font:400 16px/24px var(--sans);letter-spacing:var(--ls-texto);-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
::selection{background:var(--brand);color:#000;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px;}
[hidden]{display:none !important;}
b,strong{color:var(--txt);font-weight:500;}
time,.cifra,.num{font-variant-numeric:tabular-nums;}

.saltar{position:absolute;left:12px;top:-60px;z-index:90;padding:10px 16px;background:var(--txt);color:#000;border-radius:999px;font-weight:500;}
.saltar:focus{top:12px;}

/* ── la retícula: 240 + 640 + 360 desde 1280; menú y centro desde 768; una columna en el móvil ── */
.reticula{display:grid;grid-template-columns:minmax(0,1fr);}
.centro{min-width:0;}
.wrap{width:100%;max-width:640px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.derecha{min-width:0;}
.derecha-in{max-width:640px;margin:0 auto;padding:0 var(--gut);}
.derecha-in:empty{display:none;}
.pie{grid-column:1 / -1;}
@media(min-width:768px){
  .reticula{grid-template-columns:216px minmax(0,1fr);}
  .nav{grid-column:1;grid-row:1 / span 3;}
  .centro,.derecha,.pie{grid-column:2;}
}
@media(min-width:1024px){.reticula{grid-template-columns:224px minmax(0,1fr);}}
@media(min-width:1280px){
  .reticula{grid-template-columns:240px 640px 360px;max-width:1240px;margin:0 auto;grid-template-rows:1fr auto;}
  .nav{grid-row:1 / span 2;}
  .centro{grid-column:2;grid-row:1;border-right:1px solid var(--line);min-height:100vh;}
  .derecha{grid-column:3;grid-row:1;}
  .derecha-in{position:sticky;top:var(--alto-directo,0px);max-height:100vh;overflow-y:auto;scrollbar-width:thin;padding:28px 24px 28px 28px;margin:0;}
  .pie{grid-column:2 / span 2;grid-row:2;border-top:1px solid var(--line);}
  .centro .indice,.centro .cifras{display:none;}
}
@media(max-width:1279px){.indice-d,.cifras-d{display:none;}}

/* ── el menú: a la izquierda, fijo y con su lista propia; en el móvil es solo el logo y Entrar, y se va con la página ── */
.nav{background:var(--bg);view-transition-name:barra-sabo;}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut);border-bottom:1px solid var(--line-fina);}
.nav .buscar,.menu-lista{display:none;}
.logo img{height:28px;width:auto;}
.nav .btn.chico{flex:0 0 auto;}
.menu-t{margin:18px 0 4px;padding:0 8px;font-size:13px;line-height:18px;color:var(--dim);letter-spacing:var(--ls-lista);}
.nav-links a{display:flex;align-items:center;min-height:34px;padding:5px 8px;border-radius:7px;font-weight:500;color:rgba(242,242,242,.8);}
.nav-links a.on{font-weight:600;color:var(--brand);}
.menu-lista:has(.menu-l [aria-current]) .nav-links a.on{color:var(--txt);}
.menu-l a{display:flex;align-items:center;min-height:32px;padding:4px 8px;border-radius:7px;font-size:15px;line-height:22px;letter-spacing:var(--ls-lista);color:var(--dim);}
.menu-l a[aria-current]{color:var(--brand);font-weight:500;}
@media(hover:hover){.nav-links a:hover,.menu-l a:hover{background:rgba(255,255,255,.05);color:var(--txt);}}
@media(min-width:768px){
  .nav{position:sticky;top:var(--alto-directo,0px);height:calc(100vh - var(--alto-directo,0px));z-index:50;border-right:1px solid var(--line);}
  .nav-in{height:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;padding:18px 14px 14px 12px;border-bottom:0;}
  .logo{padding-left:8px;}
  .nav .buscar{display:flex;width:100%;}
  .menu-lista{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;}
  .nav .btn.chico{width:100%;}
}
/* El menú único de nginx (menu-sabo.js) mete su botón en esta barra: aquí no hace falta, el menú ya está a la vista. */
.nav-in .ms-boton,.pie .ms-pie{display:none;}
@media(min-width:900px){.nav-in .ms-boton{display:none;}}

/* ── las pestañas del móvil: cinco, sin hamburguesa ── */
.pestanas{display:none;}
@media(max-width:767px){
  .pestanas{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg);border-top:1px solid var(--line-fina);padding-bottom:env(safe-area-inset-bottom);}
  .pestanas a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--barra-movil);font-size:11px;line-height:11px;letter-spacing:0;color:var(--dim);}
  .pestanas a.on{color:var(--txt);font-weight:500;}
  .pestanas a.on::before{content:'';position:absolute;top:0;left:50%;width:24px;height:2px;margin-left:-12px;background:var(--brand);}
  body{padding-bottom:calc(var(--barra-movil) + env(safe-area-inset-bottom));}
  .aviso-idioma{bottom:calc(var(--barra-movil) + 12px + env(safe-area-inset-bottom)) !important;}
  #sabo-cookies{bottom:calc(var(--barra-movil) + 8px + env(safe-area-inset-bottom)) !important;}
}

/* ── títulos y textos ── */
h1,h2,h3{font-weight:500;text-wrap:balance;}
h2{font-size:23px;line-height:29px;letter-spacing:var(--ls-titulo);}
h3{font-size:17px;line-height:22px;letter-spacing:var(--ls-texto);}
.etq{display:block;margin-bottom:4px;font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
.lead{margin-top:10px;font-size:17px;line-height:24px;color:var(--dek);text-wrap:pretty;}
.cy,.hi{color:inherit;}
body:not(.pag-texto) .hero h1 .cy,body:not(.pag-texto) .hero h1 .hi{color:var(--brand);}
.nota{font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
.enlace,.texto a,.faqs a,.oferta a,#alta .lead a,.lead a,.notas a,.pie-abajo a{color:var(--txt);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--subrayado);text-underline-offset:3px;}
@media(hover:hover){.enlace:hover,.texto a:hover,.faqs a:hover,.oferta a:hover,.lead a:hover,.notas a:hover,.pie-abajo a:hover{text-decoration-color:currentColor;}}

/* ── botones: pastilla plana. El principal es cian; el segundo, línea ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;background:var(--brand);color:var(--on-brand);border:0;border-radius:999px;font:500 16px/24px var(--sans);letter-spacing:var(--ls-texto);cursor:pointer;white-space:nowrap;transition:background-color .15s;}
@media(hover:hover){.btn:hover{background:var(--brand-claro);}}
.btn.sec2,.btn.chico{background:transparent;color:var(--txt);border:1px solid var(--line-control);}
@media(hover:hover){.btn.sec2:hover,.btn.chico:hover{background:transparent;border-color:var(--txt);}}
.btn.chico{min-height:36px;padding:5px 16px;font-size:15px;line-height:22px;}
.botones{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:18px;}

/* ── portada de cada página ── */
.hero{padding-top:28px;padding-bottom:12px;}
.chip{display:block;font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
.hero h1{margin-top:6px;font:var(--t-pagina);letter-spacing:var(--ls-titulo);}
.pag-texto .hero h1{font:var(--t-h1);letter-spacing:var(--ls-titulo);}
.lema{margin-top:10px;font-size:20px;line-height:26px;font-weight:550;}
.lema b{font-weight:550;}
.hero .sub{margin-top:10px;font-size:17px;line-height:24px;color:var(--dek);text-wrap:pretty;}
.hero .sub b{color:var(--txt);}
.hero .nota{margin-top:12px;}
@media(max-width:767px){.hero .sub,.lead{font-size:16px;line-height:22px;}}
.aviso{display:block;margin-top:12px;font-size:13px;line-height:18px;color:var(--txt);}
.primeros{display:block;margin-top:12px;font-size:13px;line-height:18px;color:var(--dim);}

/* ── secciones: aire y nada más; la línea la pone la lista ── */
.sec{padding-top:30px;padding-bottom:6px;}
.centro > .sec:last-child{padding-bottom:40px;}
.sec > .wrap > .botones:last-child{margin-bottom:8px;}

/* LA PIEZA BASE: las listas abren con la línea llena y cada fila cierra con la fina */
.caminos,.recibes,.cifras,.pasos,.precios2,.filas,.faqs,.stats,.packs,.reglas,.leyenda,.juegos,.oferta,.hechos,.resumen,.nivel,.vistazo,.dudas,.juegos-g,.pjs,.tier-lista{display:block;margin-top:14px;border-top:1px solid var(--rule);max-width:none;}
.tabla,.compara,.copias{margin-top:14px;border-top:1px solid var(--rule);}

/* los dos caminos */
.caminos{margin-top:26px;}
.camino{display:block;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.camino .etq{margin:0 0 2px;}
.camino h2{font-size:17px;line-height:22px;letter-spacing:var(--ls-texto);}
.camino p{margin-top:4px;font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dim);}
.camino .precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:8px;}
.camino .precio strong{font-size:17px;line-height:22px;font-weight:500;}
.camino .precio .u{font-size:13px;line-height:18px;color:var(--dim);}
.camino .precio .nota{flex-basis:100%;}
.camino .ir{display:inline-block;margin-top:6px;font-size:15px;line-height:20px;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--subrayado);text-underline-offset:3px;}
@media(hover:hover){.camino:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}}

/* lista corrida */
.lista{list-style:none;margin-top:14px;border-top:1px solid var(--line);}
.lista li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dek);}

.duo{display:block;margin-top:14px;}
.duo > * + *{margin-top:20px;}

/* la demo de la partida de LoL */
.demo .pantalla{position:relative;aspect-ratio:16/9;background:var(--hueco);border-radius:6px;overflow:hidden;}
.demo .pantalla iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.demo .tapa{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:var(--hueco);}
.demo .tapa img{width:100%;height:100%;object-fit:cover;}
.demo .tapa .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:64px;height:44px;background:var(--brand);border-radius:999px;}
.demo .tapa .play::after{content:'';margin-left:3px;border-left:14px solid var(--on-brand);border-top:8px solid transparent;border-bottom:8px solid transparent;}
.demo .linea{padding-top:6px;font-size:11px;line-height:15px;letter-spacing:0;color:var(--dim);}
.demo .fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:0;border:0;}
.demo .fila + .fila{margin-top:6px;}
.demo #tlnow{font-family:var(--mono);color:var(--txt);}
.demo .barra{display:flex;align-items:stretch;gap:6px;margin-top:6px;}
.demo .ficha{display:flex;align-items:center;min-height:24px;padding:0 8px;background:none;border:1px solid var(--line-control);border-radius:999px;color:var(--dim);font:inherit;cursor:pointer;}
.demo .ficha.top{color:var(--txt);}
.demo #tlbar{position:relative;flex:1;height:24px;background:var(--hueco);border-radius:4px;cursor:pointer;}
.demo .cuadro{display:inline-block;width:8px;height:8px;margin-right:4px;background:var(--brand);}

/* qué recibes */
.recibes{margin-top:0;}
.recibes > div{display:grid;grid-template-columns:32px 1fr;gap:2px 8px;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.recibes .n{font-family:var(--mono);font-size:13px;line-height:22px;letter-spacing:0;color:var(--dim);}
.recibes p{grid-column:2;font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dim);}

/* verticales */
.verticales{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.verticales figure:nth-child(n+4){display:none;}
.duo .verticales{margin-top:8px;}
@media(min-width:768px){.sec > .wrap > .verticales{grid-template-columns:repeat(5,1fr);}.sec > .wrap > .verticales figure:nth-child(n+4){display:block;}}
.verticales video,.verticales img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--hueco);border-radius:6px;}
.verticales figcaption{display:grid;gap:0;margin-top:6px;font-size:12px;line-height:16px;letter-spacing:0;color:var(--dim);}
.verticales figcaption b{font-weight:500;}

/* cifras: nombre a la izquierda, número en mono a la derecha */
.cifras > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);}
.cifras b{order:2;font:400 15px/20px var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;}
.cifras span{font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dek);}

/* los pasos */
.paso{padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.paso .n{display:block;font:400 13px/18px var(--mono);letter-spacing:0;color:var(--dim);}
.paso h3{margin-top:2px;}
.paso p{margin-top:4px;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}

/* precios */
.precio-c{padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.precio-c .etq{margin-bottom:2px;}
.precio-c .cifra{font-size:30px;line-height:34px;font-weight:500;letter-spacing:var(--ls-titulo);}
.precio-c .cifra small{margin-left:6px;font-size:15px;font-weight:400;letter-spacing:var(--ls-lista);color:var(--dim);}
.precio-c p{margin-top:4px;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}
.prueba{margin-top:20px;padding-top:12px;border-top:1px solid var(--rule);}
.prueba h3{font-size:20px;line-height:26px;font-weight:550;}
.prueba p{margin-top:6px;max-width:540px;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dek);}
.prueba .btn{margin-top:14px;}
.notas{margin-top:16px;display:grid;gap:8px;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}

/* preguntas */
.faqs details{border-bottom:1px solid var(--line);}
.faqs summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:11px 0;cursor:pointer;font-size:16px;line-height:21px;font-weight:500;}
.faqs summary::-webkit-details-marker{display:none;}
.faqs summary::after{content:'+';flex:0 0 auto;font:400 17px/20px var(--mono);color:var(--dim);}
.faqs details[open] summary::after{content:'−';}
.faqs details p{padding:0 0 14px;margin:0;max-width:none;font-size:15px;line-height:22px;letter-spacing:var(--ls-lista);color:var(--dek);}

/* el cierre */
.cierre h2{font-size:20px;line-height:26px;font-weight:550;letter-spacing:var(--ls-texto);}
.cierre .botones{margin-top:12px;}
.cierre .nota{margin-top:10px;}

/* ── el pie ── */
.pie{padding:24px 0 28px;border-top:1px solid var(--line);}
.pie .wrap{max-width:none;}
.pie-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;}
.pie-cols > .logo{display:none;}
@media(min-width:768px){.pie-cols{grid-template-columns:repeat(4,1fr);}}
.pie .pie-t{margin-bottom:4px;font-size:13px;line-height:18px;color:var(--dim);}
.pie ul{list-style:none;}
.pie li a{display:inline-flex;align-items:center;min-height:30px;font-size:14px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dek);}
@media(hover:hover){.pie li a:hover{color:var(--txt);text-decoration:underline;text-underline-offset:3px;}}
.pie-abajo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px;line-height:18px;color:var(--dim);}
.pie-abajo a{color:var(--dek);}
.idioma{position:relative;}
.idioma summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line-control);border-radius:999px;color:var(--dek);}
.idioma summary::-webkit-details-marker{display:none;}
.idioma summary::after{content:'▾';color:var(--dim);}
.idioma ul{list-style:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;width:176px;padding:4px;background:var(--card);border:1px solid var(--line-control);border-radius:10px;}
.idioma ul a{display:flex;align-items:center;min-height:36px;padding:0 10px;border-radius:7px;font-size:14px;line-height:21px;color:var(--dek);text-decoration:none;}
.idioma ul a[aria-current]{font-weight:600;color:var(--txt);background:rgba(255,255,255,.05);}

/* el aviso de idioma */
.aviso-idioma{position:fixed;left:var(--gut);right:var(--gut);bottom:12px;z-index:70;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;background:var(--card);border:1px solid var(--line-control);border-radius:10px;font-size:14px;line-height:20px;color:var(--txt);}
.aviso-idioma p{flex:1 1 240px;}
.aviso-idioma .bs{display:flex;gap:8px;flex:0 0 auto;}
.aviso-idioma button{min-height:40px;padding:6px 16px;border-radius:999px;font:500 15px/22px var(--sans);cursor:pointer;}
.aviso-idioma .si{background:var(--brand);color:var(--on-brand);border:0;}
.aviso-idioma .no{background:transparent;color:var(--txt);border:1px solid var(--line-control);}
body.con-aviso{padding-bottom:120px;}

/* ── la columna derecha ── */
.lista-d{margin-bottom:27px;}
.lista-t{padding-bottom:8px;border-bottom:1px solid var(--rule);font-size:15px;line-height:20px;font-weight:500;letter-spacing:var(--ls-lista);}
.lista-d > a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dek);}
@media(hover:hover){.lista-d > a:hover{color:var(--txt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}}
.lista-d .cifras{margin:0;border-top:0;}
.lista-d .cifras span{font-size:13px;line-height:18px;font-weight:500;color:var(--txt);}
.lista-d .cifras b{font-size:13px;line-height:18px;}
.revisada{font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
@media(max-width:1279px){.derecha-in .lista-d:first-child{margin-top:28px;}.revisada{padding-top:14px;}}

/* ── /pricing ── */
.stat{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;padding:9px 0;border-bottom:1px solid var(--line);}
.stat b{font:400 15px/20px var(--mono);letter-spacing:0;white-space:nowrap;}
.stat .cap{font-size:13px;line-height:18px;color:var(--dim);}
.fila{display:grid;gap:2px;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.fila p{font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}
.compara{width:100%;border-collapse:collapse;font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);}
.compara th,.compara td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400;}
.compara thead th{font-size:13px;line-height:18px;color:var(--dim);vertical-align:bottom;}
.compara .num{text-align:right;font-family:var(--mono);font-size:13px;letter-spacing:0;white-space:nowrap;}
.compara thead .num{font-family:var(--sans);white-space:normal;}
.compara td small{display:block;margin-top:1px;font-size:12px;line-height:16px;letter-spacing:0;color:var(--dim);}
.compara tr.grupo th{padding-top:18px;font-size:13px;line-height:18px;font-weight:500;color:var(--txt);border-bottom-color:var(--line-control);}
.compara th:first-child,.compara td:first-child{padding-left:0;}
.compara th:last-child,.compara td:last-child{padding-right:0;}
#compara .nota,#planes .nota{margin-top:12px;}
.pack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;padding:var(--fila) 0;border-bottom:1px solid var(--line);align-items:baseline;}
.pk-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:16px;line-height:21px;font-weight:500;}
.pk-price{grid-column:2;grid-row:1;font:400 15px/21px var(--mono);letter-spacing:0;text-align:right;}
.pk-unit{grid-column:1 / -1;}
.pk-unit,.pk-sp,.pk-tag{grid-column:1 / -1;font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
.pk-sp b,.pk-tag b{color:var(--txt);font-weight:500;}
.pk-sp .g{color:var(--txt);}
.flag{font-size:13px;line-height:18px;font-weight:400;color:var(--brand);}
.regla{padding:var(--fila) 0;border-bottom:1px solid var(--line);font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}

/* ── /juegos ── */
.e-live{color:var(--txt);} .e-probado{color:var(--dek);} .e-idea{color:var(--dim);} .e-video{color:var(--muted);}
.est{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dim);}
.est b{display:block;font-weight:500;color:inherit;}
.juego{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 12px;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.juego > *{grid-column:1;}
.juego .ico{grid-column:2;grid-row:1 / span 4;display:block;width:44px;height:44px;}
.juego .ico svg{display:block;width:44px;height:44px;}
.juego > div{min-width:0;}
.juego .chip{display:block;margin-top:1px;}
.juego p{margin-top:6px;font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dim);}
.juego .lb{margin-right:4px;font-size:13px;font-weight:500;color:var(--txt);}
.juego code{font:400 13px/18px var(--mono);letter-spacing:0;color:var(--dek);}
#lista .nota{margin-top:12px;}

/* ── /creadores ── */
.ej{display:grid;gap:18px;margin-top:14px;}
@media(min-width:768px){.ej{grid-template-columns:200px minmax(0,1fr);align-items:start;}}
.ej video{width:100%;max-width:220px;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--hueco);border-radius:6px;}
.ej .cap{margin-top:6px;font-size:12px;line-height:16px;color:var(--dim);}
.ej .lead{margin-top:0;}
.oferta > div{padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.oferta p{margin-top:2px;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dim);}
.caja{margin-top:14px;}
.caja label{display:block;margin-bottom:6px;font-size:13px;line-height:18px;color:var(--dim);}
.caja input{width:100%;min-height:48px;padding:0 14px;background:var(--bg);color:var(--txt);border:1px solid var(--line-control);border-radius:10px;font:400 16px/24px var(--sans);}
.caja input:focus{border-color:var(--txt);outline:none;}
.caja .linea{margin-top:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 13px/20px var(--mono);letter-spacing:0;word-break:break-word;}
.caja .linea.vacia{color:var(--dim);}
.caja .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px;}
.caja .btn:disabled{opacity:.45;cursor:not-allowed;}
.caja .nota{word-break:break-all;}

/* ── guías y páginas de pregunta y respuesta ── */
.texto p,.texto li{font-size:18px;line-height:29px;letter-spacing:var(--ls-texto);color:var(--dek);text-wrap:pretty;}
.texto p{margin-top:12px;}
.texto p b,.texto li b{color:var(--txt);}
.texto h3{margin-top:26px;font-size:17px;line-height:22px;}
.texto h3 small{display:block;margin-top:2px;font-size:13px;line-height:18px;font-weight:400;letter-spacing:var(--ls-lista);color:var(--dim);}
.texto ul,.texto ol{margin-top:10px;padding-left:20px;display:grid;gap:6px;}
.texto .lista{padding-left:0;display:block;gap:0;}
.texto .lista li{font-size:15px;line-height:20px;}
.texto .faqs details p{margin-top:0;font-size:15px;line-height:22px;}
.texto .nota{font-size:13px;line-height:18px;color:var(--dim);}
.texto > .nota{margin-top:12px;}
.indice{margin-top:18px;}
.indice b{display:block;padding-bottom:8px;border-bottom:1px solid var(--rule);font-size:15px;line-height:20px;font-weight:500;}
.texto .indice ol,.indice ol{list-style:none;display:block;margin:0;padding:0;}
.indice a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dek);}
.tabla{width:100%;border-collapse:collapse;font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);}
.tabla th,.tabla td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400;color:var(--dek);overflow-wrap:anywhere;}
.tabla th{font-size:13px;line-height:18px;color:var(--dim);}
.tabla td:first-child{color:var(--txt);}
.tabla th:first-child,.tabla td:first-child{padding-left:0;}
.tabla th:last-child,.tabla td:last-child{padding-right:0;}
.tabla.jefe td:first-child{white-space:nowrap;padding-right:16px;}
.resumen > div{padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.resumen h3{margin:0 0 4px;}
.hab{margin-top:0;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.hab + .hab{margin-top:0;}
.hab-c{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.hab-c h3{margin:0;flex:1 1 auto;}
.hab-c .ico{order:2;flex:0 0 auto;width:44px;height:44px;border-radius:6px;background:var(--hueco);}
.hab .datos{margin-top:6px;font:400 13px/18px var(--mono);letter-spacing:0;color:var(--dim);}
.texto .hab p{margin-top:6px;font-size:16px;line-height:24px;}
.texto .hab .desb{font-size:13px;line-height:18px;color:var(--dim);}
.texto .hab .desb span{margin-right:6px;font-weight:500;color:var(--txt);}
.nivel > div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 8px;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.nivel .n{font:400 15px/24px var(--mono);letter-spacing:0;color:var(--dim);}
.nivel .n.a{color:var(--txt);}
.nivel p{margin:0;font-size:16px;line-height:24px;}
.nivel .cb p + p{color:var(--dim);font-size:15px;line-height:21px;}
.nivel .compra{margin:8px 0;}
.cta-sabo{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);}
.cta-sabo h3{margin-top:0;font-size:20px;line-height:26px;font-weight:550;}
.hechos > div{display:grid;gap:2px;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.hechos dt{font-size:13px;line-height:18px;font-weight:500;color:var(--txt);}
.hechos dd{font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dek);}
.glosario{margin-top:14px;}
.glosario dt{margin-top:12px;font-size:15px;line-height:20px;font-weight:500;color:var(--txt);}
.glosario dd{margin-top:2px;font-size:16px;line-height:24px;color:var(--dek);}

/* las pestañas de cada juego: en el móvil, una fila que se desliza (desde 768 están en el menú) */
.subnav{position:sticky;top:var(--alto-directo,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line-fina);view-transition-name:barra-pestanas;}
.subnav .wrap{max-width:none;}
.subnav-in{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;}
.subnav-in::-webkit-scrollbar{display:none;}
.subnav .subnav-t{flex:0 0 auto;padding:0 6px 0 0;font-size:13px;color:var(--dim);}
.subnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:14px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--dim);white-space:nowrap;}
.subnav a[aria-current]{color:var(--brand);font-weight:500;}
.subnav a.subnav-t{padding-left:0;}
html:has(.subnav){--salto:60px;}
@media(min-width:768px){.subnav{display:none;}html:has(.subnav){--salto:16px;}}
@media print{.subnav{display:none !important;}}

/* el índice de guías: una fila por juego */
.juego-g{display:flex;align-items:center;gap:14px;padding:var(--fila) 0;border-bottom:1px solid var(--line);color:var(--txt);text-decoration:none !important;}
.juego-g > span:not(.mc){order:1;flex:1 1 auto;min-width:0;}
.juego-g img,.juego-g .mc{order:2;flex:0 0 auto;width:56px;height:56px;border-radius:6px;}
.juego-g .mc{display:flex;align-items:center;justify-content:center;background:var(--hueco);font:400 15px/1 var(--mono);letter-spacing:0;color:var(--dek);}
.juego-g b{display:block;font-size:17px;line-height:22px;font-weight:500;}
.juego-g small{display:block;margin-top:2px;font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
@media(hover:hover){.juego-g:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}}

/* personajes y fichas */
.pjs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 16px;margin:14px 0;}
.pjs a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:20px;letter-spacing:var(--ls-lista);color:var(--txt);text-decoration:none;}
.pjs .ico{order:2;width:40px;height:40px;border-radius:6px;}
.art-cab{display:flex;align-items:center;gap:16px;margin-top:8px;}
.art-cab .ico{order:2;margin-left:auto;width:64px;height:64px;border-radius:6px;background:var(--hueco);}
.art-cab p{margin:0;}
.art{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.art p{margin:0 0 4px;font-size:16px;line-height:24px;}
.cod{display:grid;grid-template-columns:repeat(3,28px);gap:3px;margin:10px 0;font:400 18px/28px var(--mono);letter-spacing:0;text-align:center;color:var(--txt);}
.art .cod{margin:0;grid-template-columns:repeat(3,22px);font-size:14px;line-height:22px;}
.cod i{font-style:normal;background:var(--hueco);border-radius:4px;}
@media(max-width:520px){.art{grid-template-columns:44px minmax(0,1fr);}.art .cod{grid-column:2;}}
.copias{border-collapse:collapse;font:400 13px/18px var(--mono);letter-spacing:0;}
.copias th,.copias td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);text-align:left;}
.copias th{font-family:var(--sans);font-weight:400;color:var(--dim);}
.copias td{color:var(--txt);}
.retrato{display:flex;align-items:center;gap:14px;margin:14px 0 18px;}
.retrato img{width:64px;height:64px;border-radius:6px;background:var(--hueco);}
.vz,.fobj{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.vz > .ico,.fobj > .ics{order:2;}
.vz .ico,.fobj .ico{display:block;width:44px;height:44px;border-radius:6px;background:var(--hueco);}
@media(min-width:768px){.vz .ico,.fobj .ico,.hab-c .ico{width:56px;height:56px;}}
.fobj .ics{display:flex;flex-direction:column;gap:6px;}
.vz b,.fobj .nom b{color:var(--txt);font-weight:500;}
.vz b .en{color:var(--dim);font-size:.86em;}
.vz a{color:var(--txt);}
.vz .tecla{margin-left:8px;vertical-align:1px;}
.vz .etq2{display:inline-block;margin-left:6px;font-size:12px;color:var(--dim);}
.vz .gris{color:var(--dim);}
.texto .vz p,.texto .fobj p{margin:2px 0 0;font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);}
.texto .fobj .nom{margin:0;font-size:16px;line-height:21px;}
.texto .fobj .mult,.texto .fobj .desc,.texto .fobj .ojo{margin-top:4px;font-size:13px;line-height:18px;color:var(--dim);}
.fobj .mult span,.fobj .ojo span,.tier li .ojo span,.tier li .mult span{margin-right:6px;font-weight:500;color:var(--txt);}
.fobj .mult.no span{color:var(--dim);}
.tecla{flex:0 0 auto;margin-left:auto;padding:1px 6px;border:1px solid var(--line-control);border-radius:4px;font:400 11px/15px var(--mono);letter-spacing:0;color:var(--dim);white-space:nowrap;}
.hab-c small .tecla{display:inline-block;margin:4px 0 0 6px;}
.obj{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;}
.obj .ico{flex:0 0 auto;width:28px;height:28px;border-radius:4px;background:var(--hueco);}
.obj b{color:var(--txt);font-weight:500;}
.obj .en{color:var(--dim);font-size:.86em;}
.texto li .obj,.tabla .obj{display:inline;}
.obj.t{display:inline;gap:0;color:var(--txt);vertical-align:baseline;font:inherit;}
.texto li .obj,.tier li .obj,.tabla .obj{vertical-align:baseline;}
.obj.t .ico,.texto li .obj .ico,.tier li .obj .ico,.tabla .obj .ico{display:inline-block;width:1.25em;height:1.25em;vertical-align:middle;position:static;margin:0 0 0 .3em;}
.texto .lista li .ico{display:inline-block;width:28px;height:28px;vertical-align:-8px;margin-right:8px;border-radius:4px;background:var(--hueco);}
.ico.sp{display:block;width:44px;height:44px;border-radius:6px;background:url('/img/ror2/indice-sprite.webp') 0 0/352px auto no-repeat var(--hueco);}
.nivel > div:has(> .ico){grid-template-columns:minmax(0,1fr) 44px;gap:0 12px;}
.nivel > div > .ico{order:2;}
.texto .compra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.compra .obj{padding:3px 8px 3px 4px;border:1px solid var(--line);border-radius:7px;}
.compra .obj .ico{width:28px;height:28px;}
.compra .obj .en{display:none;}
.compra .obj b{font-size:15px;}
.compra .fl{color:var(--dim);}
.texto h2 .obj{gap:10px;}
.texto h2 .obj .ico{width:36px;height:36px;border-radius:6px;}
.texto h2 .obj b{font-weight:inherit;}
.tier{display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 8px;align-items:start;padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.tier .t{font:400 17px/24px var(--mono);letter-spacing:0;color:var(--dim);}
.tier .t.s{color:var(--brand);}
.tier .t.a{color:var(--txt);}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.tier li{font-size:15px;line-height:21px;letter-spacing:var(--ls-lista);color:var(--dek);}
.tier li .ac{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--dim);}
.tier li .ac b{font-weight:500;color:var(--txt);}
.tier li .mult,.tier li .ojo{display:block;margin-top:2px;font-size:13px;line-height:18px;}
.dudas{margin-top:14px;}
.duda{padding:var(--fila) 0;border-bottom:1px solid var(--line);}
.duda h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;}
.duda h3 .ico{margin-left:auto;width:36px;height:36px;border-radius:6px;}
.texto .duda p{margin:4px 0 0;font-size:16px;line-height:24px;}
.texto .duda ul{margin:4px 0 0;}
.texto .duda li{font-size:16px;line-height:24px;}
.duda .mas{font-size:13px;}
.dudas-indice{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:10px;}
.texto .dudas-indice a{display:inline-flex;align-items:center;min-height:30px;font-size:14px;line-height:20px;color:var(--dek);}
.con-video{display:block;}
.guia-video{margin:14px 0;max-width:340px;}
.guia-video video{width:100%;height:auto;display:block;border-radius:6px;background:var(--hueco);}
.guia-video figcaption{margin-top:8px;}
.gv-t{margin:0 0 4px;font-size:13px;line-height:18px;font-weight:500;color:var(--txt);}
.guia-video ul{margin:0;padding-left:18px;font-size:15px;}
.sigueme{padding-top:24px;}
.sigueme p{font-size:15px;line-height:21px;color:var(--dim);}

/* ── el buscador ── */
.buscar{position:relative;flex:0 0 auto;display:flex;align-items:center;}
.buscar .lupa{position:absolute;left:10px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--dim);pointer-events:none;}
.buscar input{width:100%;height:36px;padding:0 30px 0 32px;background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:10px;font:400 14.5px/20px var(--sans);letter-spacing:var(--ls-lista);-webkit-appearance:none;appearance:none;}
.buscar input::placeholder{color:var(--dim);opacity:1;}
.buscar input:focus{outline:none;border-color:var(--line-control);}
.buscar input::-webkit-search-cancel-button{display:none;}
.buscar kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:400 12px/1 var(--mono);color:var(--dim);pointer-events:none;}
.buscar input:focus ~ kbd,.buscar.con-texto kbd{display:none;}
.buscar-res{position:absolute;left:0;top:calc(100% + 6px);width:min(460px,calc(100vw - 2 * var(--gut)));max-height:min(70vh,560px);overflow-y:auto;background:var(--card);border:1px solid var(--line-control);border-radius:10px;z-index:60;}
.buscar-res a{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:10px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--txt);text-decoration:none !important;}
.buscar-res a > span:last-child:not(.sin-ico){order:-1;}
.buscar-res a:last-child{border-bottom:0;}
.buscar-res a:hover,.buscar-res a[aria-selected="true"]{background:rgba(255,255,255,.06);}
.buscar-res img,.buscar-res .sin-ico{width:36px;height:36px;border-radius:6px;}
.buscar-res .sin-ico{display:flex;align-items:center;justify-content:center;background:var(--hueco);color:var(--dim);font:400 15px/1 var(--mono);}
.buscar-res b{font-weight:500;font-size:15px;line-height:20px;}
.buscar-res small{margin-left:6px;font-size:12px;color:var(--dim);}
.buscar-res p{margin:2px 0 0;font-size:13px;line-height:18px;letter-spacing:var(--ls-lista);color:var(--dim);}
.buscar-res .vacio{padding:14px 12px;font-size:14px;line-height:20px;color:var(--dim);}
.buscar.grande{width:100%;margin-top:6px;}
.buscar.grande input{height:48px;padding-left:40px;font-size:16px;border-color:var(--line-control);}
.buscar.grande .lupa{left:14px;width:18px;height:18px;}
.buscar.grande .buscar-res{width:100%;}
.buscar-portada{margin-top:4px;}
.subnav-fila{display:flex;align-items:center;gap:8px;position:relative;}
.subnav-fila .subnav-in{flex:1 1 auto;min-width:0;}
.subnav-fila .buscar input{width:40px;padding:0;color:transparent;cursor:pointer;border-color:transparent;}
.subnav-fila .buscar input::placeholder{color:transparent;}
.subnav-fila .buscar .lupa{left:11px;}
.subnav-fila .buscar kbd{display:none;}
.subnav-fila .buscar.abierta{position:absolute;left:var(--gut);right:var(--gut);top:0;bottom:0;background:var(--bg);z-index:61;}
.subnav-fila .buscar.abierta input{width:100%;height:100%;padding:0 12px 0 34px;color:var(--txt);cursor:text;}
.subnav-fila .buscar.abierta input::placeholder{color:var(--dim);}
.subnav-fila .buscar-res{width:100%;left:0;right:0;}
.visto{outline:1px solid var(--brand);outline-offset:4px;border-radius:6px;transition:outline-color 1.6s ease;}
.visto.ya{outline-color:transparent;}
a.glos{color:inherit;text-decoration:underline dotted var(--dim);text-decoration-thickness:1px;text-underline-offset:3px;}

/* ── de una página a otra: el menú se queda quieto ── */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-old(barra-sabo),::view-transition-old(barra-pestanas){display:none;}
::view-transition-new(root){animation:fundir-entra .14s ease-out both;mix-blend-mode:normal;}
::view-transition-new(barra-sabo),::view-transition-new(barra-pestanas){animation:none;opacity:1;}
::view-transition-group(barra-sabo),::view-transition-group(barra-pestanas){animation:none;}
@keyframes fundir-entra{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none !important;transition:none !important;}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}}

/* una lista que acaba su sección no dibuja su cierre si lo siguiente empieza con línea */
.sec .faqs:last-child details:last-child,.sec .recibes:last-child > div:last-child,.sec .filas:last-child > .fila:last-child,
.sec .reglas:last-child > :last-child,.sec .hechos:last-child > :last-child,.sec .cifras:last-child > div:last-child,.sec .tier:last-child,
.sec .tabla:last-child tr:last-child th,.sec .tabla:last-child tr:last-child td,.sec .compara:last-child tr:last-child th,.sec .compara:last-child tr:last-child td{border-bottom:1px solid var(--line);}

/* la caja pequeña de public/punta.js */
.punta{position:fixed;z-index:80;max-width:min(320px,calc(100vw - 24px));padding:8px 10px;background:var(--card);border:1px solid var(--line-control);border-radius:6px;color:var(--dek);font:400 13px/18px var(--sans);letter-spacing:var(--ls-lista);pointer-events:none;}
.punta[hidden]{display:none;}
.punta b{display:block;margin-bottom:2px;color:var(--txt);font-weight:500;}
[data-q]{cursor:help;}
a[data-q]{cursor:pointer;}

@media print{
  .nav,.derecha,.pestanas,.pie,#barraDirecto,.aviso-idioma,.botones{display:none !important;}
  .reticula{display:block;}
  body,html{background:#fff;color:#111;}
  .texto p,.texto li,.tabla td,.hechos dd,.nivel p{color:#222;}
  h1,h2,h3,b,.texto b,.tabla td:first-child{color:#000 !important;}
  .vz,.fobj,.hab{break-inside:avoid;}
}

/* (12-nov, Amor: «la web siempre en negro si, pero que de la opcion del blanco o modo de dia») EL MODO DÍA, el de sabo.gg: negro por
   defecto para todos (el script tema-js de cada página pone data-tema="oscuro" si no hay nada guardado), y el sol lo pone claro; se
   recuerda en el navegador (sabo-tema), el mismo que en sabo.gg. Los colores, los del tema claro de la landing. */
:root{--ver-sol:block;--ver-luna:none;--hover:rgba(255,255,255,.05);}
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:#fff; --card:#f7f7f8; --hueco:#eff0f1;
  --line:rgba(0,0,0,.12); --line-fina:rgba(0,0,0,.07); --line-control:rgba(0,0,0,.24); --rule:#000;
  --txt:#000; --dek:#3a3a3a; --dim:#54595d; --muted:#5f656a;
  --brand:#00707a; --brand-claro:#005a62; --on-brand:#fff; --live:#c8001a;
  --subrayado:rgba(0,0,0,.3); --hover:rgba(0,0,0,.05);
  --ver-sol:none; --ver-luna:block;
}
:root[data-tema="claro"] svg [fill="#e8ddc7"]{fill:var(--txt);}
/* style.css fija dos colores claros sobre negro (las pestañas de la barra y el fondo al pasar el ratón): en modo día, los tokens */
:root[data-tema="claro"] .top .tabs .tab,:root[data-tema="claro"] .pestanas a.tab{color:var(--dek);}
:root[data-tema="claro"] .top .tabs .tab.act{color:var(--brand);}
@media(hover:hover){:root[data-tema="claro"] .top .tabs .tab:hover,:root[data-tema="claro"] #nav a:hover,:root[data-tema="claro"] #lateral a:hover{background:var(--hover);color:var(--txt);}}
.tema-b{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:1px solid var(--line-control);border-radius:999px;color:var(--dim);cursor:pointer;}
@media(hover:hover){.tema-b:hover{color:var(--txt);border-color:var(--txt);}}
.tema-sol{display:var(--ver-sol);}
.tema-luna{display:var(--ver-luna);}