@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url(/f/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url(/f/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/f/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/f/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --paper:#F4F6F8; --panel:#FFFFFF; --sunk:#EDF1F4; --line:#DDE4EA;
  --ink:#1B2024; --ink-2:#3D4852; --muted:#6B7883;
  --accent:#17696B; --accent-soft:#DDEEEE;
  --alerta:#B3261E; --alerta-bg:#FBEAE8;
  --ambar:#8A5A08; --ambar-bg:#FBF1DF;
  --sombra:0 1px 2px rgba(20,30,40,.05), 0 4px 14px rgba(20,30,40,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1216; --panel:#181F26; --sunk:#141B21; --line:#2A343D;
    --ink:#E9EDF1; --ink-2:#C3CDD6; --muted:#8593A0;
    --accent:#4FB3B0; --accent-soft:#12312F;
    --alerta:#F1998F; --alerta-bg:#3A1D1A;
    --ambar:#E0B268; --ambar-bg:#332616;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}

/* cabecera */
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top-in{
  max-width:1280px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:14px;
}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none}
.marca-barco{height:34px; width:auto}
.marca-n{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.02em; color:var(--ink);
}
.marca-n i{font-style:normal; color:var(--accent); margin-left:5px}
.volver{
  margin-left:auto; font-size:13px; font-weight:600; color:var(--accent);
  text-decoration:none; border:1px solid var(--line); border-radius:99px;
  padding:6px 14px; background:var(--paper);
}
.volver:hover{border-color:var(--accent)}

/* pestañas de los cuatro documentos */
.tabs{background:var(--sunk); border-bottom:1px solid var(--line)}
.tabs-in{
  max-width:1280px; margin:0 auto; padding:0 22px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a, .tabs span{
  display:block; white-space:nowrap; padding:11px 14px; font-size:13px;
  font-weight:600; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent;
}
.tabs a:hover{color:var(--ink)}
.tabs span{color:var(--accent); border-bottom-color:var(--accent)}

/* documento */
.doc{max-width:78ch; margin:0 auto; padding:34px 22px 10px}
h1{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:0 0 10px;
}
.entradilla{font-size:17px; color:var(--ink-2); margin:0 0 16px}
.sello{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
  font-size:11.5px; color:var(--muted);
}
.sello span{
  background:var(--sunk); border:1px solid var(--line); border-radius:99px;
  padding:3px 10px;
}
h2{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px;
  letter-spacing:-.01em; margin:34px 0 10px; padding-top:14px;
  border-top:1px solid var(--line); scroll-margin-top:16px;
}
h2 .num{
  display:inline-block; min-width:1.9em; color:var(--accent);
  font-size:15px; vertical-align:2px;
}
h3{font-size:16.5px; font-weight:700; margin:22px 0 6px; color:var(--ink)}
p, li{color:var(--ink-2)}
p{margin:0 0 12px}
ul, ol{margin:0 0 14px; padding-left:22px}
li{margin:0 0 6px}
b, strong{color:var(--ink); font-weight:600}
a{color:var(--accent)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--sunk); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px;
}
.datos-titular{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:6px 18px; margin:0 0 18px; box-shadow:var(--sombra);
}
.datos-titular dl{display:grid; grid-template-columns:auto 1fr; gap:2px 18px; margin:14px 0}
.datos-titular dt{font-size:12.5px; color:var(--muted); padding-top:3px}
.datos-titular dd{margin:0; color:var(--ink); font-weight:600}
.pendiente{
  display:inline-block; background:var(--alerta-bg); color:var(--alerta);
  border:1px dashed var(--alerta); border-radius:6px; padding:1px 8px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
table{
  width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
th, td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--sunk)}
tr:last-child td{border-bottom:none}
.aviso{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 10px 10px 0; padding:13px 16px; margin:0 0 18px; font-size:15px;
}
.aviso.rojo{border-left-color:var(--alerta); background:var(--alerta-bg)}
.aviso.ambar{border-left-color:var(--ambar); background:var(--ambar-bg)}
.indice{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:0 0 26px; box-shadow:var(--sombra);
}
.indice h2{margin:0 0 6px; border:none; padding:0; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.indice ol{margin:0; padding-left:20px; font-size:14.5px}
.indice li{margin:2px 0}
.pie-aqui{font-size:12.5px; font-weight:600; color:var(--muted)}
@media (max-width:620px){
  body{font-size:16px}
  .doc{padding:24px 16px 6px}
  h1{font-size:27px}
  .top-in, .tabs-in{padding-left:16px; padding-right:16px}
  .datos-titular dl{grid-template-columns:1fr; gap:0 0}
  .datos-titular dd{margin-bottom:9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
html{scroll-behavior:smooth}

/* ================= pie legal (común a ranking, guía y legales) =================
   Tres plantas: marca y navegación en columnas; los tres avisos obligatorios,
   cada uno con su rótulo, también en columnas; y la línea de copyright. Antes
   era un bloque de párrafos corridos y parecía un descargo pegado con prisa. */
.pie-legal{
  border-top:1px solid var(--line); background:var(--panel);
  margin-top:40px; padding:30px 0 26px; font-family:inherit;
}
.pie-in{max-width:1280px; margin:0 auto; padding:0 22px}
.pie-sup{display:grid; grid-template-columns:minmax(240px,1.5fr) 1fr 1fr; gap:24px 36px}
.pie-h{
  margin:0 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.pie-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-bottom:9px}
.pie-logo img{height:30px; width:auto; display:block}
:root[data-theme="dark"] .pie-logo img{filter:brightness(1.28) saturate(1.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pie-logo img{filter:brightness(1.28) saturate(1.05)}
}
.pie-logo b{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16.5px;
  letter-spacing:-.02em; color:var(--ink);
}
.pie-logo b i{font-style:normal; color:var(--accent); margin-left:4px}
.pie-marca{margin:0; font-size:12.5px; color:var(--muted); line-height:1.55; max-width:44ch}
.pie-nav{display:flex; flex-direction:column; gap:7px}
.pie-nav a{
  font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
  width:fit-content; border-bottom:1px solid transparent; line-height:1.3;
}
.pie-nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.pie-aqui{font-size:13px; font-weight:600; color:var(--muted); line-height:1.3}
.pie-avisos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px 36px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
.pie-avisos p{margin:0; font-size:11.5px; color:var(--muted); line-height:1.6}
.pie-avisos b{color:var(--ink-2); font-weight:600}
.pie-avisos a{color:var(--accent)}
.pie-avisos code{font-size:10.5px}
.pie-copy{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted);
}
.pie-copy a{color:var(--muted)}
.pie-copy a:hover{color:var(--accent)}
.pie-copy span{margin:0}
@media (max-width:900px){
  .pie-sup{grid-template-columns:1fr 1fr}
  .pie-sup > :first-child{grid-column:1 / -1}
  .pie-avisos{grid-template-columns:1fr}
}
@media (max-width:620px){ .pie-in{padding:0 16px} .pie-sup{grid-template-columns:1fr} }

.top-der{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.idiomas{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.idiomas a,.idiomas span{display:block;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;text-decoration:none;
  line-height:1.5}
.idiomas a{color:var(--muted)}
.idiomas a:hover{color:var(--ink);background:var(--sunk,rgba(127,127,127,.12))}
.idiomas .aqui{color:var(--paper);background:var(--accent);cursor:default}
@media (max-width:620px){.idiomas a,.idiomas span{padding:3px 8px;font-size:11px}}

/* La esquina derecha de la cabecera: el selector de idioma, en la misma línea
   que el logo y el titular y pegado al borde derecho, justo encima del carril
   de anuncios. En pantalla ancha va `absolute` a propósito: `.portada` reserva
   por la derecha el ancho del carril para no meterse debajo de los anuncios, y
   en el flujo el selector se quedaría al borde de ese hueco —a 322px del
   borde—, no al borde. Sacado del flujo, cae sobre la columna del carril y
   comparte con él el margen derecho.
   Es un hueco pensado para crecer: el día que haya login o alta de usuario, el
   botón entra aquí al lado sin rehacer la cabecera. */
.cab-der{display:flex; align-items:flex-start; gap:10px; flex-shrink:0;
  align-self:flex-start; padding-top:2px; margin-left:auto}
.portada{position:relative}

:root{
  --paper:#F4F6F8; --panel:#FFFFFF; --sunk:#EDF1F4; --line:#DDE4EA; --line2:#EAEFF3;
  --ink:#1B2024; --ink-2:#4A5560; --muted:#727F8B;
  --accent:#17696B; --accent-soft:#DDEEEE;
  --marca:#1B3A6B; --marca-2:#17696B;
  --facil:#0F7A5A; --facil-bg:#E2F3EC;
  --normal:#0E6FA8; --normal-bg:#E4F0F8;
  --dificil:#A85A08; --dificil-bg:#FAEEDE;
  --nuevo:#5C6673; --nuevo-bg:#EDF1F4;
  --alerta:#B3261E; --alerta-bg:#FBEAE8;
  --gastado:#D5DDE4;
  --cta:#B0691A; --cta-tx:#FFF7EE;
  --sombra:0 1px 2px rgba(20,30,40,.05), 0 4px 14px rgba(20,30,40,.05);
  --sombra-alta:0 8px 24px rgba(20,30,40,.10), 0 32px 64px rgba(20,30,40,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1216; --panel:#181F26; --sunk:#141B21; --line:#2A343D; --line2:#222B33;
    --ink:#E9EDF1; --ink-2:#B6C2CD; --muted:#8593A0;
    --accent:#4FB3B5; --accent-soft:#12312F;
    --marca:#8FB3E8; --marca-2:#4FB3B5;
    --facil:#3FC79B; --facil-bg:#102E26;
    --normal:#5AAEE0; --normal-bg:#132836;
    --dificil:#E0A055; --dificil-bg:#2E2315;
    --nuevo:#94A3B0; --nuevo-bg:#1D252C;
    --alerta:#EC8177; --alerta-bg:#331C1A;
    --gastado:#2C3841;
    --cta:#C9873C; --cta-tx:#1B1206;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
    --sombra-alta:0 8px 24px rgba(0,0,0,.45), 0 32px 64px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1216; --panel:#181F26; --sunk:#141B21; --line:#2A343D; --line2:#222B33;
  --ink:#E9EDF1; --ink-2:#B6C2CD; --muted:#8593A0;
  --accent:#4FB3B5; --accent-soft:#12312F;
  --marca:#8FB3E8; --marca-2:#4FB3B5;
  --facil:#3FC79B; --facil-bg:#102E26;
  --normal:#5AAEE0; --normal-bg:#132836;
  --dificil:#E0A055; --dificil-bg:#2E2315;
  --nuevo:#94A3B0; --nuevo-bg:#1D252C;
  --alerta:#EC8177; --alerta-bg:#331C1A;
  --gastado:#2C3841;
  --cta:#C9873C; --cta-tx:#1B1206;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
  --sombra-alta:0 8px 24px rgba(0,0,0,.45), 0 32px 64px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Figtree,"Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
.wrap{max-width:1660px; margin:0 auto; padding:0 20px 26px}
.pie-legal .pie-in{max-width:1660px; padding:0 20px}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,sans-serif; margin:0}
a{color:inherit}

/* ================= portada ================= */
header{padding:10px 0 0}
/* La marca es una fila: barco a la izquierda y el nombre a su derecha en dos
   líneas. Antes el barco medía 180px y ocupaba él solo el alto entero de la
   portada; el bloque de marca manda menos que el titular y no merece esa
   mitad de pantalla. */
.portada{display:flex; align-items:stretch; gap:0}
/* El nombre arranca arriba del todo, en la misma línea que el titular y el
   carril: centrado en el alto del barco quedaba 8px más abajo que todo lo
   demás. */
.marca{
  display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start;
  /* sin relleno por la izquierda: los 17px separaban la marca del selector de
     idioma, y desde que este se fue a la esquina derecha el logo abre la fila
     y arranca pegado al borde, como abría antes el selector. */
  gap:13px; flex-shrink:0; text-decoration:none; padding:0 17px 0 0;
}
.marca-txt{display:flex; flex-direction:column; align-items:flex-start; gap:3px}
/* el mismo alto que el bloque de texto de al lado: CLIPPER (31) + HUB (31)
   + hueco (3) + subtítulo (14) + su margen (1) = 80px */
.marca-barco{display:block; height:80px; width:auto; flex-shrink:0}
/* el barco es teal oscuro y sobre el papel negro pierde fuerza */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marca-barco{filter:brightness(1.28) saturate(1.05)}
}
:root[data-theme="dark"] .marca-barco{filter:brightness(1.28) saturate(1.05)}
/* El nombre va inclinado hacia delante: da sensación de marcha, y es un sesgo
   real, no la cursiva sintética que se inventaría el navegador —la fuente no
   trae itálica—. */
.marca-n{
  display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:31px;
  font-weight:700; letter-spacing:.01em; line-height:1.0; white-space:nowrap;
  transform:skewX(-9deg); transform-origin:left center;
}
/* las dos palabras, una por línea: en columna el nombre cabe al lado del
   barco sin obligar a la fila a ensancharse */
.marca-n b{display:block; color:var(--marca); font-weight:700}
.marca-n i{display:block; color:var(--marca-2); font-style:normal; font-weight:600;
  margin-left:0; padding-left:2px}
.marca-sub{
  display:block; text-align:left; font-size:9.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:1px;
}
/* El titular arranca arriba del todo —a la altura del carril, que empieza
   pegado al borde superior de la portada— y justo después del logo. Centrado en el hueco quedaba flotando en mitad de la
   portada y bajo la línea de los otros dos. */
/* Rejilla de una columna que mide lo que mide el titular: así la línea de
   «datos actualizados» se centra bajo el texto del titular, no bajo todo el
   hueco. `minmax(0, max-content)` deja que el titular rompa cuando no cabe. */
.titulo{
  flex:1; min-width:0; display:grid; grid-template-columns:minmax(0, max-content);
  justify-content:start; justify-items:center; align-content:start;
  text-align:left; padding:0 17px; container-type:inline-size;
}
.titulo h1{justify-self:stretch}
/* Una sola línea. El tamaño se mide contra el ancho del propio hueco (cqw,
   no vw): entre 1081 y 1440px el carril todavía no es fijo y la caja del
   titular es la mitad de ancha, así que un tamaño en vw partiría la frase.
   El `nowrap` solo se aplica ahí; por debajo la portada ya apila y el titular
   puede romper como quiera. */
h1{font-size:clamp(22px,3.1cqw,30px); font-weight:700; letter-spacing:-.03em;
  line-height:1.12; margin-bottom:4px; text-wrap:balance}
@media (min-width:1081px){ h1{white-space:nowrap; text-wrap:nowrap} }
h1 .cifra-hero{color:var(--facil)}
/* una sola línea: se rompe sola por debajo de la portada ancha */
.entrada{font-size:16px; color:var(--ink-2); margin:0; line-height:1.45;
  white-space:nowrap; max-width:100%; overflow-wrap:normal}
.entrada b{color:var(--ink); font-weight:600}
@media (max-width:1360px){ .entrada{white-space:normal; max-width:70ch} }
.entrada em{font-style:normal; color:var(--alerta); font-weight:600}
.frescura{
  display:inline-flex; align-items:center; gap:6px; margin:2px 0 5px;
  font-size:13px; color:var(--muted); flex-wrap:wrap; justify-content:center;
}
.frescura b{color:var(--ink-2); font-weight:600}
.frescura .sep{width:1px; height:12px; background:var(--line); margin:0 3px}
/* Dos redacciones del mismo sello: la larga en pantalla ancha y una corta en
   móvil, donde la larga ocupaba cuatro líneas. Se acorta el texto y no la
   letra: 13 px ya es el mínimo cómodo, y este es el dato que hace creíble al
   sitio — encogerlo hasta que no se lea es quitarlo con disimulo. */
.fr-corta{display:none}
@media (max-width:860px){
  .fr-larga{display:none}
  .fr-corta{display:inline}
  /* `.frescura` es un flex con `wrap`, así que en estrecho el punto verde, la
     barrita y el recuento envolvían CADA UNO por su cuenta: el punto acababa
     solo en una línea y la barra colgando al principio de otra. En móvil pasa
     a texto corrido, que envuelve por palabras como cualquier párrafo. */
  .frescura{display:block; text-align:center; line-height:1.45}
  .frescura .pulso{display:inline-block; vertical-align:middle; margin-right:5px}
  .frescura .sep{display:none}          /* separaba dos líneas: no separa nada */
  .frescura b{display:block}            /* el recuento, en su propia línea */
}
@media (max-width:380px){
  /* Teléfonos estrechos de verdad (iPhone SE: 320 px CSS). Ahí el relleno se
     comía 74 de los 320 px —40 del `.wrap` y 34 del `.titulo`— y dejaba 246
     para el texto. Se recorta el relleno antes que el texto: beneficia a todo
     lo de la cabecera, no solo al sello. */
  .wrap{padding-left:12px; padding-right:12px}
  .titulo{padding-left:4px; padding-right:4px}
  .frescura{font-size:12px}
  /* El titular ocupaba TRES líneas a 320 px con 22px de cuerpo. A 18 caben en
     dos, que es lo que pidió el titular: la cifra grande sigue leyéndose de
     lejos y deja de comerse media pantalla. */
  h1{font-size:18px}
}
.pulso{width:7px; height:7px; border-radius:50%; background:var(--facil);
  box-shadow:0 0 0 3px var(--facil-bg)}


/* ================= filtros ================= */
/* Los filtros ya no se quedan pegados: al bajar estorban y lo único que hace
   falta para leer la tabla es el nombre de cada columna. */
.filtros{padding:0 0 7px; margin-top:14px; border-bottom:1px solid var(--line)}
.fila{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.fila + .fila{margin-top:8px}
/* Las dos filas de chips son la misma cosa —filtros— y van juntas; el hueco
   grande se guarda para separarlas del buscador.
   Ojo al selector: desde que cada fila de chips va envuelta en `.chips-wrap`
   (para colgarle las flechas), el buscador ya NO es hermano adyacente de una
   `.fila`, así que `.fila + .fila` dejó de alcanzarle y las dos filas se
   quedaron pegadas. El hueco lo da ahora el panel. */
#panel-chips + .fila{margin-top:8px}
/* La barra plegable es solo de móvil; en ancho los chips se ven enteros. */
.barra-movil{display:none}
/* Tercera vez que muerde el mismo fallo (ver ROADMAP §4, Front): el .pt
   lleva `display` propio y eso gana al atributo [hidden], así que el
   contador enseñaba "Filtros 0" con el panel limpio. */
.chip .pt[hidden]{display:none}
#panel-chips{display:block}
/* Los chips se reparten el ancho de la fila: así las dos filas acaban a ras
   del borde derecho aunque no lleven los mismos chips. Por debajo del ancho
   del contenido dejan de crecer y la fila se desliza, como siempre. */
.fila-chips .chip{flex:1 1 auto}
/* Dos filas de filtros, y solo dos: no rompen nunca. Si no caben, se
   deslizan. Los veinte chips están repartidos para que en pantalla ancha
   quepan enteros; por debajo, la cola se desliza. */
/* Los chips se deslizan, pero SIN barra: una línea gris bajo cada fila ensucia
   dos veces la misma pantalla y encima no dice hacia dónde hay más. En su
   lugar, una flecha a cada lado que aparece solo cuando queda algo por ese
   lado y que DESLIZA al pulsarla — así sirve con ratón, con dedo y con
   teclado, no solo de aviso. */
.fila-chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:0;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth}
.fila-chips::-webkit-scrollbar{display:none}
.chips-wrap{position:relative}
.chips-wrap + .chips-wrap{margin-top:6px}
.chips-flecha{
  position:absolute; top:0; bottom:0; width:40px; border:0; cursor:pointer;
  display:none; align-items:center; padding:0; font-size:20px; line-height:1;
  color:var(--ink-2); background:linear-gradient(to left, var(--paper) 58%, transparent);
}
.chips-flecha.der{right:0; justify-content:flex-end}
.chips-flecha.izq{left:0; justify-content:flex-start;
  background:linear-gradient(to right, var(--paper) 58%, transparent)}
.chips-wrap.hay-der .chips-flecha.der,
.chips-wrap.hay-izq .chips-flecha.izq{display:flex}
.chips-flecha:hover{color:var(--accent)}
.chips-flecha:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.sep{width:1px; height:19px; background:var(--line); margin:0 3px; flex-shrink:0}
.chip{
  font-family:inherit; font-size:11.5px; font-weight:500; color:var(--ink-2);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:5px 7px; cursor:pointer; transition:all .13s; white-space:nowrap;
  flex-shrink:0;
}
/* solo aparece cuando hay algo que quitar: así no gasta sitio en reposo */
.chip.limpiar{color:var(--alerta); border-style:dashed}
.chip.limpiar[hidden]{display:none}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent);
  color:#fff; font-weight:600}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* hueco fijo para la cifra, con sitio para tres dígitos: así el chip no cambia
   de ancho cada vez que se recalculan las cuentas y la fila no baila al
   filtrar. Eran 30px —cuatro dígitos— y con veinte chips en dos filas esos
   cinco píxeles de más eran los que echaban el último chip fuera. El listado
   tiene 477 campañas; el día que pase de mil, aquí hay que volver. */
.chip .pt{
  display:inline-block; width:25px; text-align:center; margin-left:2px;
  opacity:.6; font-weight:400; font-size:11px;
}
.chip[aria-pressed="true"] .pt{opacity:.85}
input[type=search],select{
  font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px;
}
/* la flecha nativa se pega al borde y en una píldora queda fuera de sitio:
   se dibuja una propia y se le deja aire */
select{
  appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A97A3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:13px;
}
input[type=search]{width:280px; max-width:100%}
select{cursor:pointer; font-size:14px; font-weight:500}
input[type=search]:focus,select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
input[type=search]::placeholder{color:var(--muted)}
.resultado{margin-left:auto; font-size:13.5px; color:var(--muted); font-weight:500}

/* ================= tabla + columna lateral ================= */
/* La tabla manda; el rail solo se lleva el ancho que sobra, y por debajo de
   1440px se va debajo para no estrangular las columnas de datos.
   El 1440 sale de una cuenta, no del gusto: la tabla necesita 1.048 px —260 el
   nombre + 692 las seis columnas fijas + 96 de huecos— y el carril reserva
   322; con los márgenes, 1.410. Estaba en 1300 y en la franja 1301-1420 la
   tabla desbordaba: la insignia de la nota se salía de su fila hasta 110 px.
   Se veía al hacer un zoom pequeño, que es exactamente lo que estrecha la
   ventana medida en píxeles CSS. Si algún día cambian los anchos de columna,
   este número cambia con ellos. */
/* la segunda pista va en auto y el ancho lo pone el propio carril: si
   patrocinios.json se queda vacío no se dibuja, y así no deja un hueco de
   268px muerto a la derecha */
.conmarco{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px;
  align-items:stretch}
.col-izq{min-width:0}
.tabla{margin-top:4px; min-width:0}

/* La franja derecha es solo del anuncio: se queda pegada, mide lo que la
   ventana y no tiene scroll propio. Por eso los bloques se reparten el alto
   con flex:1 en vez de apilarse arriba. */
/* El carril queda clavado: arranca a la altura de la primera fila de chips —de ahí
   `--rail-y`, que mide el JS al cargar y al redimensionar— y el scroll no lo
   mueve. El <aside> sigue en la rejilla solo para reservarle la columna; lo
   que se ve es el hijo, que va `fixed`. */
.rail{width:300px; flex-shrink:0; position:relative}
/* El 47 de reserva no es un gusto: es donde acaba el selector de idioma —10 del
   relleno de `<header>` + 29 de alto del selector + 8 de aire—, que es lo que
   deja al carril justo debajo. Lo usan las páginas de directorio, que no traen
   el JS de la portada y por tanto no miden `--rail-y`. */
.rail-fijo{
  position:fixed; top:var(--rail-y,47px); left:var(--rail-x,auto);
  width:var(--rail-w,300px); bottom:16px; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
/* Al final de la página el carril deja de ir pegado a la ventana y se ancla al
   final de su propia columna: así el pie se lee entero en vez de pasar por
   debajo de los anuncios. Conserva el alto que tenía —en `auto`, las tarjetas
   de `flex:1` se aplastarían al mínimo—. */
.rail-fijo.abajo{
  position:absolute; top:auto; bottom:0; left:0; width:100%;
  /* nunca más alto que su propia columna: al filtrar a tres resultados la
     página se queda corta y, con el alto de la ventana, el carril se salía
     medio metro por encima del borde superior */
  height:min(var(--rail-h, 78vh), 100%);
}
/* El bloque entero —rótulo incluido— va dentro de un marco de línea fina: es
   un espacio aparte del ranking y tiene que verse como tal. */
.rail-anuncios{flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-radius:16px; padding:9px 9px 10px;
  /* si el carril se queda corto —tres resultados filtrados, ventana baja— las
     tarjetas no se aplastan cortando el texto: se desliza el bloque */
  overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain}
/* Solo «Publicidad»: es lo que exige el art. 20 de la LSSI —que se vea que es
   comunicación comercial—. La comisión de afiliado la cuenta el pie común de
   todas las páginas y afiliados.html. */
.rail-cab{
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 -3px; text-align:center;
}
/* Sin barco, sin etiqueta y sin pie, el carril es de los anuncios: las tres
   tarjetas se reparten el alto a partes iguales y cada una centra lo suyo.
   Con un solo anuncio esto volvería a ser un cuadro blanco enorme —si algún
   día queda uno, poner `flex:0 0 auto`—. */
.patro{
  display:flex; flex-direction:column; justify-content:center; flex:1 0 auto;
  text-decoration:none; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 15px;
  transition:border-color .13s, transform .13s;
}
/* Formato de ficha de producto: marca arriba con su logo y su nombre grande,
   debajo una frase y un botón. Un anuncio que no deja leer de quién es no lo
   va a pulsar nadie. */
.patro-cab{display:flex; gap:11px; align-items:center; margin-bottom:10px}
.patro-logo{
  width:66px; height:66px; border-radius:13px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line); background:var(--sunk);
}
.patro-nom{display:block; min-width:0}
/* que rompa en dos líneas antes que cortar: la cifra recortada («$35/m…»)
   era justo el dato que sostiene el anuncio */
.patro-meta{
  display:block; font-size:12.5px; color:var(--muted); margin-top:3px;
  line-height:1.35;
}
.patro-img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:9px; margin-bottom:11px; background:var(--sunk);
}
.patro:hover{border-color:var(--accent); transform:translateY(-1px)}
.patro:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.patro-t{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:17.5px;
  font-weight:700; color:var(--ink); line-height:1.2; letter-spacing:-.02em}
.patro-p{display:block; font-size:13.5px; color:var(--ink-2); margin-top:6px; line-height:1.5}
.patro-cta{display:block; font-size:13px; font-weight:600; color:var(--accent); margin-top:9px}

@media (min-width:1441px){
  .portada{padding-right:calc(var(--rail-w,300px) + 22px)}
  /* fuera del flujo, sobre el hueco que la portada le reserva al carril: así
     el selector acaba en el mismo borde derecho que los anuncios */
  .cab-der{position:absolute; top:0; right:0; padding-top:0}
}
@media (max-width:1440px){
  .conmarco{grid-template-columns:1fr}
  /* El carril deja de ser columna. Ya no sube por encima de la tabla: subía
     porque llevaba dentro la entrada a la guía, y esa se mudó al menú. */
  .rail{width:auto}
  /* `.rail-fijo.abajo` (dos clases) vive fuera de toda media query y GANABA a
     esta regla (una clase): las media queries no suman especificidad. El JS
     ponía `.abajo` al llegar al pie, el carril se quedaba en `absolute` con
     altura 0, y sus tarjetas —de 215 a 580 px de alto— se pintaban encima de
     los chips y de la tabla a cualquier ancho por debajo de 1301 px. Arreglado
     en los dos sitios: el JS ya no pone la clase aquí, y esta regla la
     neutraliza por si vuelve a colarse. */
  .rail-fijo, .rail-fijo.abajo{position:static; width:auto; overflow:visible;
    height:auto; max-height:none; inset:auto;
    flex-direction:row; flex-wrap:wrap; align-items:flex-start; margin:0 0 6px}
  .rail-anuncios{flex:1 1 100%; flex-direction:row; flex-wrap:wrap; margin-top:14px}
  .patro{flex:1 1 260px}
  .rail-cab{flex-basis:100%}
}
.cab, .fila-c{
  display:grid;
  /* la primera columna era 2.3fr y se tragaba todo el ancho sobrante, dejando
     un hueco enorme antes de los datos. Ahora las de datos mandan y el nombre
     se queda con el resto. */
  /* 200 y no 260 de mínimo: con 260 la tabla pedía 1.048 px y entre 1081 y
     1200 se pasaba unos píxeles, con la insignia de la nota asomando fuera de
     su fila. El nombre se trunca de todas formas (`nombreCorto`), así que lo
     que se pierde es holgura, no información. Mínimo real: 988 px. */
  grid-template-columns:minmax(200px,1fr) 76px 122px 158px 132px 126px 78px;
  gap:16px; align-items:center;
}
.cab{
  padding:3px 15px 3px; font-size:11.5px; font-weight:600; color:var(--muted);
  letter-spacing:.045em; text-transform:uppercase; position:sticky;
  top:0; background:var(--paper); z-index:15;
  align-items:end; line-height:1.25; border-bottom:1px solid var(--line);
}
/* todos los rótulos van centrados sobre su columna, y las celdas de datos
   también: con el rótulo centrado y el dato a la derecha no se sabe a qué
   columna pertenece cada cifra. El nombre es lo único que sigue a la izquierda. */
.cab span{cursor:pointer; user-select:none; text-align:center; white-space:nowrap}
.cab span:hover{color:var(--ink)}
.cab span.act{color:var(--accent)}
/* El sentido tiene que verse: si no, el segundo clic parece que no hace nada.
   Con `nowrap` arriba y la columna ancha para el rótulo más largo, la flecha
   cabe en la misma línea y la cabecera no cambia de alto al ordenar. */
.cab span.act::after{content:" ▾"; font-size:9px; vertical-align:1px}
.cab span.act.asc::after{content:" ▴"}
.fila-c > span{text-align:center; min-width:0}
.fila-c > .c-nombre{text-align:left}
.c-redes{justify-content:center}
.lista{list-style:none; margin:0; padding:0}
.fila-c{
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:11px 13px; margin-bottom:6px; cursor:pointer; width:100%;
  text-align:left; font-family:inherit; font-size:inherit; color:inherit;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.fila-c:hover{border-color:var(--accent); box-shadow:var(--sombra); transform:translateY(-1px)}
.fila-c:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.c-nombre{min-width:0; display:flex; gap:10px; align-items:center}
.c-nombre .txt{min-width:0; flex:1}
/* inicial sobre color estable: ancla visual para reencontrar una campaña */
.ico{
  flex-shrink:0; width:32px; height:32px; border-radius:8px;
  object-fit:cover; background:var(--sunk); border:1px solid var(--line);
}
/* el banner manda el alto de la fila: se ve el arte de la campaña, que es
   como la reconoce quien ya la ha visto en la plataforma */
.ban{
  flex-shrink:0; width:128px; height:72px; border-radius:9px; object-fit:cover;
  background:var(--sunk); border:1px solid var(--line);
}
.ico-letra{
  display:flex; align-items:center; justify-content:center; border:none;
  font-family:"Bricolage Grotesque",sans-serif; font-size:14px; font-weight:700;
  color:hsl(var(--t) 62% 32%); background:hsl(var(--t) 62% 93%);
}
.c-nombre .n{
  font-weight:600; font-size:15px; letter-spacing:-.01em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
/* Quién publica la campaña, al estilo de la línea de canal de YouTube:
   minilogo de la plataforma y detrás la marca que la lleva.
   display:flex/block es obligatorio: en línea, overflow y text-overflow no
   hacen nada y el nombre largo desborda la fila. */
.fuente{display:flex; align-items:center; gap:5px; margin-top:4px; min-width:0}
.fuente-ico{
  flex-shrink:0; width:16px; height:16px; border-radius:4px; color:#fff;
  background:var(--marca); font-family:"Bricolage Grotesque",sans-serif;
  font-size:8.5px; font-weight:700; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:center;
}
.fuente b{
  display:block; min-width:0; font-size:12px; font-weight:500; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pill{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3.5px 9px; border-radius:999px; white-space:nowrap;
  font-family:"Bricolage Grotesque",sans-serif;
}
.pill.facil{color:var(--facil); background:var(--facil-bg)}
.pill.normal{color:var(--normal); background:var(--normal-bg)}
.pill.dificil{color:var(--dificil); background:var(--dificil-bg)}
.pill.nuevo{color:var(--nuevo); background:var(--nuevo-bg)}
/* muestra pequeña: el veredicto es provisional y debe notarse de un vistazo,
   no solo al abrir la ficha y leer el aviso */
.pill.tenue{background:transparent; border:1px dashed currentColor; opacity:.85}
/* nota de 0 a 10: un solo número, coloreado por tramo. Es lo que resume la
   fila entera, así que pesa más que cualquier otra cifra de la tabla. */
.nota{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:51px; padding:6px 9px; border-radius:10px;
  font-family:"Bricolage Grotesque",sans-serif; font-size:19.5px; font-weight:700;
  letter-spacing:-.03em; cursor:help;
}
.n-alta{color:var(--facil); background:var(--facil-bg)}
.n-buena{color:var(--normal); background:var(--normal-bg)}
.n-med{color:var(--dificil); background:var(--dificil-bg)}
.n-baja{color:var(--alerta); background:var(--alerta-bg)}
.nota.tenue{background:transparent; border:1px dashed currentColor}

.dato{font-size:15px; font-weight:600; line-height:1.25}
.dato small{display:block; font-size:11px; color:var(--muted); font-weight:400;
  margin-top:2px; line-height:1.32}
.dato.gris{color:var(--muted); font-weight:500; font-size:13.5px}
.provisional{color:var(--dificil)!important}
.flecha{color:var(--muted); margin:0 5px; font-weight:400}
.redes{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.red{
  width:22px; height:22px; border-radius:6px; display:flex;
  align-items:center; justify-content:center;
  background:var(--sunk); color:var(--ink-2);
}
.red-txt{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase}
/* dos cifras con su rótulo, lado a lado, para que no se confundan entre sí */
.par{display:flex; gap:14px; align-items:flex-start}
.mini{display:flex; flex-direction:column; min-width:0}
.mini b{font-size:15px; font-weight:600; line-height:1.2; letter-spacing:-.01em}
.mini i{font-style:normal; font-size:10.5px; color:var(--muted); line-height:1.3; margin-top:1px}
.pie2{display:block; font-size:11px; color:var(--muted); margin-top:5px; line-height:1.35}
.sep-v{color:var(--line); margin:0 3px}
.dato.urge{color:var(--dificil)}
/* 700 explícito: la fuente solo trae hasta ese peso y con <b> el navegador
   pedía 900 y lo engordaba a mano */
.c-edad b{font-weight:700}
.der{text-align:right}

/* la barra de presupuesto: proporción restante de un vistazo */
/* display:block es obligatorio: es un <span>, y en línea ignora height —
   sin esto la barra se renderiza como un bloque morado enorme */
/* Verde lo que queda por repartir, gris lo ya gastado: se ve de un vistazo
   cuánto le resta a la campaña sin leer las cifras. */
.barrita{display:flex; justify-content:flex-end; height:9px;
  background:var(--gastado); border-radius:5px; margin-top:7px; overflow:hidden}
/* el verde se ancla a la derecha: la barra se vacía hacia ese lado a medida
   que la campaña gasta, y lo gris que crece por la izquierda es lo consumido */
.barrita i{display:block; height:100%; background:var(--facil); border-radius:5px}
.queda{color:var(--facil); font-weight:600}

.avisos{display:flex; gap:4px; margin-top:4px}
.punto{
  width:15px; height:15px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-size:10px; font-weight:700;
}
.punto.rojo{background:var(--alerta-bg); color:var(--alerta)}
.punto.gris{background:var(--sunk); color:var(--muted)}

.vacio{padding:56px 20px; text-align:center; color:var(--muted)}
.vacio b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:18px;
  color:var(--ink); margin-bottom:5px}
.mas{
  display:block; width:100%; margin:14px auto 0; padding:11px; font-family:inherit;
  font-size:14.5px; font-weight:600; color:var(--accent); background:var(--panel);
  border:1px solid var(--line); border-radius:11px; cursor:pointer;
}
.mas:hover{border-color:var(--accent)}
/* display:block gana al atributo [hidden]: sin esta línea el botón seguía
   visible al filtrar y enseñaba el contador en negativo */
.mas[hidden]{display:none}

/* ================= drawer ================= */
.velo{
  position:fixed; inset:0; background:rgba(8,12,16,.66); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.velo.on{opacity:1; pointer-events:auto}
/* Tres columnas que se leen a la vez: quién es y cuánto paga · qué hay que
   hacer · qué está prohibido. Cada una con su propio scroll, porque en un solo
   panel largo la normativa quedaba a tres pantallas de los números.
   El `.drawer` no pinta nada: es solo el marco de referencia para colgar los
   dos botones por fuera del cuadro, arriba y abajo. */
.drawer{
  position:fixed; top:50%; left:50%; width:90vw; height:80vh; z-index:50;
  transform:translate(-50%,-50%) scale(.99); opacity:0;
  transition:opacity .16s ease, transform .2s cubic-bezier(.32,.72,.28,1);
  overflow:visible;
}
.d-cols{
  height:100%; display:grid; grid-template-columns:1.35fr 2fr 2fr;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sombra-alta); overflow:hidden;
}
.drawer.on{transform:translate(-50%,-50%) scale(1); opacity:1}
/* sin esto, el display:grid de arriba gana al atributo [hidden] */
.drawer[hidden]{display:none}
.d-col{
  overflow-y:auto; overscroll-behavior:contain; min-width:0;
  padding:0 22px 26px; display:flex; flex-direction:column; gap:16px;
  scrollbar-width:thin;
}
/* Nada se encoge dentro de una columna con scroll: la tabla de números es un
   `grid` y, como el contenido pasa del alto de la columna, el flex la aplastaba
   a 2 px. Con texto normal no pasa; con un grid dentro, sí. */
.d-col > *{flex-shrink:0}
.d-col::-webkit-scrollbar{width:8px}
.d-col::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.d-col + .d-col{border-left:1px solid var(--line)}
.d-ficha{background:var(--panel)}
/* La cabecera de cada columna se queda clavada arriba del todo. El relleno
   superior lo pone ella y no la columna: con `padding-top` en la columna, el
   `top:0` del sticky se resuelve por debajo de ese relleno y quedaba una
   franja por la que se veía pasar el contenido. */
.d-col > h4, .d-cabecera{
  position:sticky; top:0; z-index:3; margin:0 -22px;
  padding:16px 22px 12px; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.d-col > h4{
  font-family:"Bricolage Grotesque",sans-serif; font-size:15px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
}
/* La ficha va centrada de arriba abajo: es una columna estrecha de datos
   sueltos, y alineados a la izquierda quedaban descolgados del rótulo. */
.d-ficha{text-align:center}
.d-cabecera{
  background:var(--panel); display:flex; flex-direction:column; gap:9px;
  align-items:center;
}
.d-mini{
  width:100%; max-width:190px; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; border:1px solid var(--line); background:var(--sunk);
}
.d-ficha h2{font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.25;
  margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.d-ficha .m{font-size:13px; color:var(--muted); margin:4px 0 0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.d-notaza{display:flex; flex-direction:column; align-items:center; gap:8px}
.d-notaza .nota{font-size:30px; min-width:78px; padding:10px 12px}
.d-notaza span.t{font-size:13.5px; color:var(--muted); line-height:1.4}
.d-ficha .d-sec h3{text-align:center}
.d-ficha .porques li{justify-content:center; font-size:13.5px}
.d-ficha .porques li b{width:auto}
/* Los dos botones van por fuera del cuadro y centrados: cerrar encima, abrir
   la campaña debajo. Sobre el velo oscuro, así que no compiten con nada. */
.cerrar{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  margin-bottom:11px; z-index:6;
  width:62px; height:44px; border-radius:13px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  cursor:pointer; font-size:26px; line-height:1; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra);
}
.cerrar:hover{border-color:var(--accent); color:var(--accent)}
.cerrar:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.exige{display:flex; flex-wrap:wrap; gap:6px}
/* los mismos chips que los filtros de la portada: misma letra, mismo borde */
.exige span{
  font-size:11.5px; font-weight:500; padding:5px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  white-space:nowrap; line-height:1;
}
.exige span.mal{background:var(--alerta-bg); color:var(--alerta); border-color:transparent; font-weight:600}
.exige span.bien{background:var(--facil-bg); color:var(--facil); border-color:transparent; font-weight:600}
.vacio-col{font-size:13.5px; color:var(--muted); line-height:1.5}
/* mismo rótulo que la cabecera de la tabla y el «Publicidad» del carril:
   Figtree en versalitas, no la tipografía de titulares */
.d-sec h3{
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin:0 0 9px;
}
.d-dinero{
  background:var(--sunk); border-radius:12px; padding:16px 18px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.d-dinero .g{font-family:"Bricolage Grotesque",sans-serif; font-size:31px;
  font-weight:700; letter-spacing:-.03em; line-height:1}
.d-dinero .p{font-size:13.5px; color:var(--ink-2); flex:1 1 100%}
.porques{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.porques li{display:flex; gap:9px; font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.porques li b{flex-shrink:0; font-weight:700; width:14px}
.porques li.si b{color:var(--facil)}
.ndl{display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 0; border-bottom:1px solid var(--line2)}
.ndl:last-of-type{border-bottom:none}
.ndl-p{
  font-family:"Bricolage Grotesque",sans-serif; font-size:17px; font-weight:700;
  color:var(--facil); line-height:1.1;
}
.ndl-p.neg{color:var(--alerta)}
.ndl-t{font-size:13px; color:var(--muted); line-height:1.4}
.ndl-t b{display:block; color:var(--ink); font-weight:600; font-size:14.5px}
.porques li.no b{color:var(--dificil)}
/* Dos columnas de cifras, y el umbral —la cifra que decide si un clip cobra—
   a lo ancho arriba. Rótulo en versalitas como la cabecera de la tabla y la
   cifra con el mismo peso que las celdas de la portada. */
.datos{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:11px; overflow:hidden}
.datos > div{background:var(--panel); padding:11px 12px 12px; min-width:0}
.datos > div:first-child{grid-column:1 / -1}
.datos dt{font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px}
.datos dd{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  overflow-wrap:anywhere}
.datos > div:first-child dd{font-size:22px; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700; letter-spacing:-.02em}
.datos dd small{font-weight:400; font-size:11.5px; color:var(--muted); display:block;
  margin-top:3px; line-height:1.35}
/* pies de la ficha. No pueden llamarse `.nota`: esa clase es la insignia de
   la tabla y, al ir esta regla después, le pisaba tamaño y color. */
.apunte{font-size:13px; color:var(--muted); line-height:1.45; margin:8px 0 0}
.parrafo{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}
/* el aviso va arriba y visible: un clip rechazado por un matiz que el resumen
   se dejó fuera cuesta dinero real */
.aviso-resumen{
  font-size:13px; line-height:1.5; color:var(--ink-2); background:var(--dificil-bg);
  border-left:3px solid var(--dificil); border-radius:8px; padding:11px 14px;
}
.aviso-resumen b{color:var(--ink)}
/* pregunta → respuesta → cita literal. La cita es lo que hace verificable el
   dato: sin ella habría que fiarse a ciegas de un modelo local. */
.qa{padding:10px 0; border-bottom:1px solid var(--line2)}
.qa:last-child{border-bottom:none}
/* pregunta en negrita, respuesta en la tipografía de titulares y cita en
   cursiva clara: tres pesos distintos para tres cosas distintas */
/* Tres pesos para tres cosas: la pregunta manda (negrita, tinta), la
   respuesta va debajo en gris al mismo tamaño, y la cita del documento en
   gris más claro, más pequeña y en cursiva. Así se distingue de un vistazo
   lo que preguntamos, lo que contesta el modelo y lo que dice el papel. */
.qa-p{font-size:14.5px; color:var(--ink); font-weight:700; margin-bottom:3px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; line-height:1.4}
.qa-r{font-size:14.5px; color:var(--muted); font-weight:400; line-height:1.5}
/* una respuesta que es una lista («❌ esto ❌ aquello ❌ …») se enseña como
   lista: cada prohibición en su línea, que es como se lee de un vistazo */
.qa-l{margin:2px 0 0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:4px}
.qa-l li{font-size:14.5px; color:var(--muted); font-weight:400; line-height:1.45}
.qa-l li::marker{color:var(--muted)}
.qa.mal .qa-l{list-style:none; padding-left:0}
.qa.mal .qa-l li{display:flex; gap:7px}
.qa.mal .qa-l li::before{content:"✕"; color:var(--alerta); font-weight:700; flex-shrink:0}
.qa-c{font-size:12px; color:var(--muted); opacity:.85; line-height:1.5; margin-top:6px;
  padding-left:10px; border-left:2px solid var(--line); font-style:italic}
.tipo{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:1.5px 6px; border-radius:999px; white-space:nowrap}
.t-obligatorio{background:var(--alerta-bg); color:var(--alerta)}
.t-recomendado{background:var(--normal-bg); color:var(--normal)}
.t-informativo{background:var(--sunk); color:var(--muted)}
.porques li.si b{color:var(--facil)}
.conf{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 7px; border-radius:999px; margin-left:6px;
}
.conf.alta{background:var(--facil-bg); color:var(--facil)}
.conf.media{background:var(--normal-bg); color:var(--normal)}
.conf.baja{background:var(--dificil-bg); color:var(--dificil)}
.d-cta{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:11px; z-index:6;
  padding:12px 30px; border-radius:13px;
  background:var(--cta); color:var(--cta-tx); text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif; font-size:15px; font-weight:700;
  letter-spacing:-.01em; white-space:nowrap; box-shadow:var(--sombra);
}
.d-cta:hover{filter:brightness(1.08)}
.d-cta:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.enlaces{display:flex; flex-direction:column; gap:5px}
.enlaces a{font-size:14px; color:var(--accent); overflow-wrap:anywhere}

/* ================= ayuda emergente ================= */
/* Cada columna y cada filtro se explica solo, donde está. El segundo de
   espera es deliberado: el globo no debe saltar al pasar el ratón de camino
   a otra cosa. */
#globo{
  position:fixed; z-index:60; max-width:340px; padding:11px 13px;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--sombra-alta); font-size:13px;
  line-height:1.45; pointer-events:none; opacity:0; transition:opacity .12s;
  text-align:left; text-transform:none; letter-spacing:normal; font-weight:400;
}
#globo.on{opacity:1}
#globo b{
  display:block; color:var(--ink); font-size:13.5px; font-weight:700;
  margin-bottom:4px; font-family:"Bricolage Grotesque",sans-serif;
  letter-spacing:-.01em;
}
#globo em{font-style:normal; color:var(--ink); font-weight:600}
[data-ayuda]{cursor:help}
.chip[data-ayuda], .cab span[data-ayuda]{cursor:pointer}

/* ================= móvil ================= */
@media (max-width:1080px){
  .cab{display:none}
  /* Cuatro carriles: nombre y nota arriba, el resto de dos en dos. Las celdas
     necesitan sitio propio —metidas todas en la misma área se superponían—,
     pero una por línea deja la fila larguísima en un móvil. */
  .fila-c{
    grid-template-columns:repeat(4,1fr); gap:10px 12px; padding:14px 15px;
    grid-template-areas:none;
  }
  .fila-c > .c-nombre{grid-row:1; grid-column:1 / 4; min-width:0}
  .fila-c > .c-nota{grid-row:1; grid-column:4; text-align:right}
  .fila-c > .c-redes{grid-column:1 / -1; text-align:left}
  .fila-c > .c-comp, .fila-c > .c-payout,
  .fila-c > .c-queda, .fila-c > .c-edad{grid-column:span 2; text-align:left}
  .c-redes{justify-content:flex-start}
  .movil-et{display:inline; font-size:11px; color:var(--muted); font-weight:500}
}
@media (min-width:1081px){ .movil-et{display:none} }
@media (max-width:1080px){
  .portada{flex-wrap:wrap; align-items:flex-start; gap:14px}
  .marca{gap:10px; padding:0; align-items:center}
  .marca-barco{height:60px}
  .marca-n{font-size:20px}
  .marca-sub{font-size:8.5px}
  .titulo{flex-basis:100%; order:3; align-items:flex-start; text-align:left}
  /* la marca mide 60px y el selector 29: centrado contra ella se lee como la
     otra punta de la misma línea, y no como algo colgado del techo */
  .cab-der{align-self:center; padding-top:0}
}
@media (max-width:1080px){
  .drawer{width:94vw; height:78vh}
  .d-cols{display:block; overflow-y:auto; grid-template-columns:1fr}
  .d-col{overflow:visible; padding:16px 18px}
  .d-col + .d-col{border-left:none; border-top:1px solid var(--line)}
  .d-col > h4{position:static}
}
/* ---------------------------------------------------------------------------
   Móvil (<=860px). Antes había que bajar 1.054 px para ver la primera campaña,
   y 637 de ellos eran el bloque de anuncios: una pantalla entera de publicidad
   antes que un solo dato. Aquí el carril desaparece y los patrocinios se
   intercalan en la lista cada cinco campañas (ver `intercala` en el JS).
   --------------------------------------------------------------------------- */
@media (max-width:1440px){
  /* Fuera la banda de anuncios: por debajo de 1301 px el carril no es columna,
     es una franja de 215-235 px por delante de la tabla. Los patrocinios pasan
     a intercalarse en la lista (ver `intercala` en el JS).
     Se esconde la banda y no el carril entero por si algún día vuelve a
     llevar algo que no sea publicidad. */
  .rail-anuncios{display:none}

  /* Patrocinio intercalado. CLAUDE.md dice que los patrocinios no se mezclan
     con las filas, y aquí se mezclan por necesidad: sin columna, la alternativa
     es el muro. Se honra el porqué de la regla —que la tabla no se pueda
     comprar— haciéndolo inconfundible: fondo distinto, borde discontinuo,
     rótulo "Publicidad", y NI NOTA NI PUESTO NI CPM. Nada del vocabulario del
     ranking. */
  .patro-inline{
    list-style:none; margin:10px 0; padding:12px 14px;
    background:var(--sunk); border:1px dashed var(--line); border-radius:14px;
    display:grid; grid-template-columns:44px 1fr; gap:4px 12px; align-items:start;
  }
  .patro-inline .pi-et{
    grid-column:1 / -1; font-size:10.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);
  }
  .patro-inline img{grid-row:2 / span 2; width:44px; height:44px; border-radius:11px;
    object-fit:cover; border:1px solid var(--line)}
  .patro-inline b{font-size:15px; font-weight:700; line-height:1.25}
  .patro-inline .pi-meta{font-size:12.5px; color:var(--muted)}
  .patro-inline p{grid-column:2; margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
  .patro-inline a{text-decoration:none; color:inherit; display:contents}
}

/* Móvil de verdad: además de lo anterior, los filtros se pliegan y la fila se
   convierte en tarjeta. */
@media (max-width:860px){
  /* La marca en UNA línea: `.marca-n b` y `.marca-n i` son `display:block`, que
     es lo que partía CLIPPER / HUB en dos. En un teléfono la cabecera es sitio
     que le quitas a las campañas, y en una línea el nombre se centra de verdad
     contra el barco en vez de quedar un bloque de dos pisos al lado. */
  .marca-n b, .marca-n i{display:inline}
  .marca-n i{margin-left:.28em; padding-left:0}
  .marca-n{font-size:22px}

  /* Fuera el sello de frescura en móvil (decisión del titular, 3 sep 2026).
     Queda el recuento, que es la cifra que se venía a ver. En pantalla ancha
     sigue entero: ahí no estorba y es el dato que hace verificable el sitio. */
  .frescura .fr-larga, .frescura .fr-corta, .frescura .sep{display:none}
  .frescura b{display:inline}
  .frescura .var{color:var(--muted); font-weight:500}

  /* La guía pegada a los filtros: 42 px de aire entre dos cosas que se usan
     seguidas es una pantalla que no se ve. El hueco venía de tres sitios a la
     vez —el margen del carril, el del bloque de filtros y el de la portada—,
     así que se recortan los tres. */
  .rail{margin-bottom:0}
  .rail-fijo, .rail-fijo.abajo{margin:0}
  .portada{margin-bottom:0; padding-bottom:0}
  /* Los 22 px que faltaban no eran un margen: son el `gap` de la rejilla
     `.conmarco`, que en ancho separa la tabla del carril y en móvil solo
     separa la guía de los filtros. */
  .conmarco{gap:6px}
  .filtros{margin-top:4px}

  /* Buscador y orden en la misma línea. `flex:1 1 auto` no bastaba: con
     `basis:auto` el input reclama su ancho natural —296 px, la fila entera— y
     empuja al selector abajo. Con `basis:0` solo se queda el sitio que sobra. */
  .filtros .fila:has(#buscar){flex-wrap:nowrap}
  #buscar{min-width:0; flex:1 1 0}
  #orden{flex:0 0 auto; max-width:44%; min-width:0}
  #buscar, #orden{margin:0}

  /* El barco medía 60 px y el bloque de texto ~52, así que el barco mandaba en
     la altura de la marca y el nombre quedaba descolgado hacia arriba. A 48 el
     texto define la fila y el barco se centra dentro de ella con el
     `align-items:center` que ya tenía. Además ocupa menos, que en un teléfono
     la cabecera es sitio que le quitas a las campañas. */
  .marca-barco{height:48px}

  .barra-movil{display:flex; gap:8px; align-items:center; margin:0 0 8px}
  .abrefiltros{display:inline-flex; align-items:center; gap:8px; font-weight:600}
  .abrefiltros[aria-expanded="true"]{border-color:var(--accent); color:var(--accent)}
  /* El panel se pliega. `[hidden]` no basta: `.fila-chips` trae `display:flex`
     propio y cualquier `display` explícito gana al atributo (ya pasó con el
     drawer y con "Ver más campañas"). Se controla con una clase. */
  #panel-chips{display:none}
  #panel-chips.abierto{display:block; margin-bottom:8px}
  .fila-chips{flex-wrap:wrap; overflow-x:visible}
  .fila-chips .chip{flex:0 0 auto}

  /* La tarjeta: nombre y nota arriba, y debajo lo que decide de un vistazo —el
     CPM y el umbral—. El resto, en gris y más pequeño. */
  .fila-c{grid-template-columns:1fr auto; gap:8px 12px; padding:13px 14px}
  .fila-c > .c-nombre{grid-row:1; grid-column:1; min-width:0}
  .fila-c > .c-nota{grid-row:1; grid-column:2; text-align:right; align-self:start}
  .fila-c > .c-redes{grid-row:2; grid-column:1 / -1; justify-content:flex-start}
  .fila-c > .c-payout{grid-row:3; grid-column:1 / -1; text-align:left;
    font-size:15px; font-weight:600}
  .fila-c > .c-queda{grid-row:4; grid-column:1; text-align:left}
  .fila-c > .c-comp{grid-row:4; grid-column:2; text-align:right}
  .fila-c > .c-edad{grid-row:5; grid-column:1 / -1; text-align:left}

}
@media (max-width:640px){
  .cab{position:static}
  .datos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.ficha{max-width:860px;margin:0 auto;padding:26px 22px 60px}
.migas{font-size:13px;color:var(--muted);margin:0 0 14px}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{color:var(--accent)}
.migas span{margin:0 6px}
.ficha h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:31px;line-height:1.18;letter-spacing:-.02em;margin:0 0 6px;
}
.operada{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.operada b{color:var(--ink-2);font-weight:600}
.estado{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px;margin-left:8px;
  vertical-align:3px;
}
.estado.viva{background:var(--accent-soft);color:var(--accent)}
.estado.muerta{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.cerrada-aviso{
  background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:8px;padding:12px 15px;margin:0 0 22px;font-size:14.5px;color:var(--ink-2);
}
.banner{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);margin:0 0 22px;display:block;
}
.ficha h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin:34px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
/* nota y su desglose */
.nota-caja{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;box-shadow:var(--sombra);
}
.nota-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.nota-num{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:40px;
  line-height:1;letter-spacing:-.03em;color:var(--accent);
}
.nota-de{color:var(--muted);font-size:14px}
.nota-pie{color:var(--muted);font-size:13px;margin:8px 0 16px}
.desglose{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.desglose li{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.desglose b{font-weight:600}
.desglose .pts{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.desglose .pts.mas{color:var(--accent)}
.desglose .pts.menos{color:var(--alerta)}
.desglose .porque{grid-column:1/-1;color:var(--muted);font-size:13.5px}
/* cifras */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.cifras div{background:var(--panel);padding:13px 16px}
.cifras dt{color:var(--muted);font-size:12.5px;margin-bottom:3px}
.cifras dd{
  margin:0;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;
}
.cifras dd small{font-weight:400;color:var(--muted);font-size:13px}
/* normativa: pregunta -> respuesta -> cita literal */
.qa{margin:0}
.qa-i{padding:13px 0;border-bottom:1px solid var(--line)}
.qa-p{font-weight:600;font-size:14.5px;margin:0 0 3px}
.qa-r{color:var(--ink-2);font-size:14.5px;margin:0}
.qa-r ul{margin:4px 0 0;padding-left:20px}
.qa-c{
  color:var(--muted);font-size:13px;font-style:italic;margin:6px 0 0;
  padding-left:11px;border-left:2px solid var(--line);
}
.qa-t{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-left:7px;
}
.original{margin:30px 0 0}
.original a{
  display:inline-block;font-weight:600;font-size:14.5px;color:var(--accent);
  text-decoration:none;border:1px solid var(--line);border-radius:99px;
  padding:9px 18px;background:var(--panel);
}
.original a:hover{border-color:var(--accent)}
.leida{color:var(--muted);font-size:13px;margin:14px 0 0}
@media(max-width:560px){
  .ficha{padding:18px 16px 46px}
  .ficha h1{font-size:25px}
  .nota-num{font-size:34px}
}

/* ================= menú de secciones ================= */
/* Solo palabras. Ni bandeja, ni recuadro, ni fondo: lo único que marca dónde
   estás es un subrayado bajo el rótulo. Lo que separa este menú de la fila de
   chips que viene justo debajo ya no es un marco, es la letra —Bricolage, la
   de los titulares, contra la Figtree del resto— y el aire de alrededor. */
.menu{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:4px 26px; margin:12px 0 20px;
}
/* 17px: un punto por encima del texto corrido (16) y bien por debajo del
   titular. El relleno de abajo no es decoración: reserva el sitio del
   subrayado, que al ir en un elemento en línea no ocupa alto propio y si no
   se metería en la fila de filtros. */
.menu-b{
  display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.25;
  color:var(--muted); white-space:nowrap; padding-bottom:7px;
}
.menu-b:hover{color:var(--ink)}
.menu-b:focus-visible{outline:2px solid var(--accent); outline-offset:3px;
  border-radius:5px}
/* El subrayado va bajo la palabra, no bajo el conjunto: el recuento no es
   parte del nombre de la sección. De ahí que el rótulo viaje en su propio
   `<span class="w">`. En hover se insinúa en gris, para que se vea que la
   palabra es un enlace sin tener que subrayarlas todas. */
.menu-b .w{border-bottom:2.5px solid transparent; padding-bottom:4px}
.menu-b:hover .w{border-bottom-color:var(--line)}
.menu-b.aqui{color:var(--ink); cursor:default}
.menu-b.aqui .w{border-bottom-color:var(--accent)}
/* El recuento, en la letra del texto y en gris: es un dato de apoyo, y en la
   letra del titular competía con el nombre de la sección. */
.menu-b .n{
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--muted); letter-spacing:0;
}
@media (max-width:620px){
  .menu{gap:4px 18px; margin:10px 0 16px}
  .menu-b{font-size:15.5px; gap:6px; padding-bottom:6px}
  .menu-b .n{font-size:11.5px}
}

.dir-entrada{font-size:16.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:72ch}
.dir-nota{font-size:13.5px;color:var(--muted);line-height:1.5;margin:14px 0 0;max-width:78ch}
.dir-nota b{color:var(--ink-2)}
.dir-h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin:34px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.dir-tabla-env{overflow-x:auto;margin:18px 0 0;border:1px solid var(--line);
  border-radius:13px;background:var(--panel)}
.dir-tabla{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.dir-tabla th,.dir-tabla td{
  text-align:right;padding:11px 14px;border-bottom:1px solid var(--line2,var(--line));
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dir-tabla th:first-child,.dir-tabla td:first-child{text-align:left;white-space:normal}
.dir-tabla tbody tr:last-child td{border-bottom:none}
.dir-tabla thead th{
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;
  background:var(--sunk);
}
.dir-tabla thead th:first-child{border-top-left-radius:12px}
.dir-tabla thead th:last-child{border-top-right-radius:12px}
.dir-tabla thead th:hover{color:var(--ink)}
.dir-tabla thead th[aria-sort]{color:var(--accent)}
.dir-tabla tbody tr:hover{background:var(--sunk)}
.dir-tabla .op{font-weight:600;color:var(--accent);text-decoration:none}
.dir-tabla .op:hover{text-decoration:underline}
.dir-tabla .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.dir-tabla .flojo{color:var(--muted)}
/* La nota, con el mismo código de color que la portada. Con respaldo por si
   se pinta en un contexto que no defina esas variables (la ficha de
   operador, que no carga la paleta de `ranking.CSS`). */
.dir-tabla .nota{font-weight:700}
.dir-tabla .nota.alta{color:var(--facil,#0F7A5A)}
.dir-tabla .nota.baja{color:var(--muted)}

/* ---------- el listado de operadores, con el formato de la portada ----------
   No es una tabla parecida a la de campañas: es la misma. Las clases (`.cab`,
   `.fila-c`, `.c-nombre`, `.ico`, `.dato`, `.nota`) salen de `ranking.CSS`,
   que este bundle ya carga, así que lo único que hay aquí es el ancho de las
   siete columnas —las cifras son otras— y cómo se pliega en estrecho. Si algún
   día cambia el aspecto de una fila de campaña, cambia también el de esta sin
   que nadie tenga que acordarse.
   Un préstamo que NO se hace: `.barrita`. En la portada el verde es lo que
   queda por repartir de una campaña; en un operador la cifra es lo ya
   repartido, y pintar de verde el otro lado de la misma proporción sería usar
   el mismo color para decir lo contrario. */
.dir-lista{margin-top:16px}
/* Mínimo real 998px, como la de campañas (988): por debajo la fila se pliega
   sola con las medias de abajo, no hay scroll horizontal. */
.dir-lista .cab, .dir-lista .fila-c{
  grid-template-columns:minmax(230px,1fr) 132px 128px 122px 118px 92px;
}
/* El hueco de identidad es el mismo `.ban` de 128x72 de la portada, pero lo
   llena un logo cuadrado: `contain` para que no se recorte —un logotipo
   recortado deja de ser el logotipo— sobre el fondo hundido, que es lo que
   convierte el sobrante de los lados en marco y no en agujero. */
.dir-lista .ban-logo{object-fit:contain; padding:7px; background:var(--sunk)}
.dir-lista .ban-logo.ico-letra{font-size:30px; padding:0}
/* la fila es un enlace, no un botón como en la portada */
.dir-lista .fila-c{text-decoration:none; display:grid}
.dir-lista .dato{min-width:0}
@media (max-width:1080px){
  .dir-lista .fila-c{grid-template-columns:repeat(4,1fr); gap:10px 12px; padding:14px 15px}
  .dir-lista .fila-c > .c-nombre{grid-row:1; grid-column:1 / 4}
  .dir-lista .fila-c > .c-nota{grid-row:1; grid-column:4; text-align:right}
  .dir-lista .fila-c > .c-camps, .dir-lista .fila-c > .c-bolsa,
  .dir-lista .fila-c > .c-pagado,
  .dir-lista .fila-c > .c-legibles{grid-column:span 2; text-align:left}
}
/* Teléfono: dos columnas y cada dato con su rótulo (`.movil-et`), que sin
   cabecera un número suelto no dice de qué es. */
@media (max-width:620px){
  .dir-lista .fila-c{grid-template-columns:1fr auto; gap:9px 12px}
  .dir-lista .fila-c > .c-nombre{grid-row:1; grid-column:1}
  .dir-lista .fila-c > .c-nota{grid-row:1; grid-column:2; text-align:right; align-self:start}
  .dir-lista .fila-c > .c-camps{grid-row:2; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-bolsa{grid-row:2; grid-column:2; text-align:right}
  .dir-lista .fila-c > .c-pagado{grid-row:3; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-legibles{grid-row:3; grid-column:2; text-align:right}
}