@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}
/* El buscador, a la mitad (280 -> 140): con la botonera de plataformas al
   lado ya no sobra sitio, y a más plataformas que se añadan menos quedará.
   Va con `:has(#orden)` para que solo encoja en la fila de la portada —
   Operadores y Plataformas cargan este mismo CSS pero no llevan `#orden`, y
   su buscador se queda en su ancho de siempre. */
.filtros .fila:has(#orden) input[type=search]{width:140px}
/* El selector de orden, reducido a un botón con solo el icono, y el icono en
   sí pequeño (11 px en una caja de 32). `text-indent` empuja el texto
   elegido fuera de la caja CERRADA nada más: la lista abierta es una
   superficie nativa aparte, y se le fija su propio tamaño de letra —más
   grande que antes de encoger el botón— para que abrir el desplegable no
   herede el aspecto miniatura del icono que lo dispara. */
#orden{
  width:32px; height:32px; padding:0; text-indent:-999px; overflow:hidden;
  border-radius:999px; flex:0 0 auto;
  background-position:center; background-size:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13' fill='none' stroke='%238A97A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V1M0.8 3.3 3 1l2.2 2.3'/%3E%3Cpath d='M9 1v11m2.2-2.3L9 12l-2.2-2.3'/%3E%3C/svg%3E");
}
#orden option{font-size:15.5px; padding:7px 10px}

/* ================= 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)}
  /* La esquina derecha entera se queda quieta: el selector de idioma va
     `fixed`, como el carril de anuncios que tiene debajo, y el scroll deja de
     llevárselo. `--rail-der` lo mide el mismo JS que ancla el carril
     (`anclarRail`), así que los dos comparten borde derecho exacto sin
     calcularlo dos veces ni fiarlo a `100vw`, que incluye la barra de
     desplazamiento y dejaría el idioma unos píxeles más a la derecha que los
     anuncios. Por debajo de la nota (40) y del globo de ayuda (60): un aviso
     legal o una ficha abierta tienen que tapar esto, no al revés. */
  .cab-der{position:fixed; top:10px; right:var(--rail-der,20px); padding-top:0;
    z-index:20}
}
@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.
     La segunda columna es el botón de la web. Su sitio salió **del hueco entre
     columnas**, que baja de 16 a 12: ninguna columna encoge y ningún texto de
     dentro se toca. Mínimo real: 1.016 px, contra los 988 de antes y los 1.041
     que hay a 1.081, el ancho más justo donde la tabla ocupa toda la columna. */
  grid-template-columns:minmax(200px,1fr) 40px 96px 76px 158px 132px 126px 78px;
  gap:12px; 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;
}
/* Los interruptores de plataforma, junto al buscador: un `.chip` más —mismo
   verde de "encendido" que cualquier filtro puesto (`.chip[aria-pressed=
   true]`)—, solo que un poco más grandes, para que se noten como la primera
   decisión de la fila y no como uno más del montón. Al revés que el resto:
   el verde es aquí el REPOSO (se ve la plataforma) y el clic la apaga sin
   aislarla; se avisa con el nombre tachado, no con un signo nuevo. */
.fuente-toggle{font-size:13px; padding:7px 12px; font-weight:600}
.fuente-toggle[aria-pressed="false"]{color:var(--muted)}
.fuente-toggle[aria-pressed="false"] .nombre{text-decoration:line-through}
.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}

/* El botón que sale del sitio, a la web de la compañía. Vive aquí y no en el
   directorio porque lo usan las dos tablas: la portada y el listado de
   operadores, que carga este mismo CSS. Fondo a media tinta —el gris de la
   paleta con la mitad de opacidad— para que se vea que es un botón sin pesar
   como la nota; la primera declaración es el respaldo sin `color-mix`. */
.ir{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; border:0;
  color:var(--ink-2); background:var(--sunk);
  background:color-mix(in srgb, var(--muted) 50%, transparent);
  text-decoration:none; transition:background-color .12s, color .12s;
}
.ir:hover{background:var(--accent); color:var(--paper)}
.ir:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.c-web{display:flex; justify-content:flex-start}

.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. */
/* El alto NO puede ser 92vh a secas. Los dos botones —cerrar arriba, abrir la
   ficha abajo— van por fuera del cuadro, y con 92vh solo quedan 4vh a cada
   lado: en una pantalla de 850 px son 34, y los botones piden 55. En un portátil
   normal la X se salía de la ventana y no había forma de cerrar más que con
   Escape o pinchando el velo. Con el `min` el cuadro cede altura antes que
   tragarse sus propios botones: 132 px repartidos entre arriba y abajo son 66
   por lado, que es lo que ocupa el más alto de los dos con su margen. */
.drawer{
  position:fixed; top:50%; left:50%; width:94vw; z-index:50;
  height:min(92vh, calc(100vh - 132px));
  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.15fr 2.05fr 2.05fr;
  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{
  /* El scroll se queda como válvula, no como diseño: a partir de aquí las
     tres columnas caben enteras en una pantalla normal (se recortó lo que no
     cabía y se movió a la ficha completa), pero en una ventana muy baja vale
     más una barra que contenido inalcanzable. */
  overflow-y:auto; overscroll-behavior:contain; min-width:0;
  padding:0 20px 16px; display:flex; flex-direction:column; gap:12px;
  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. */
/* El sangrado NEGATIVO tiene que ser exactamente el relleno de `.d-col`, o el
   rótulo se sale por los lados y saca barra horizontal en las tres columnas
   (pasó: 20 de relleno contra -22 de margen, 2 px por lado). */
.d-col > h4, .d-cabecera{
  position:sticky; top:0; z-index:3; margin:0 -20px;
  padding:15px 20px 11px; background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* Centrado y a 18 px: la columna 1 ya tenía su cabecera centrada (el nombre de
   la campaña, `.d-ficha{text-align:center}`), así que a ras del borde izquierdo
   los otros dos rótulos se leían como un pie de la anterior y no como el
   título de su columna. Al mismo cuerpo que ese nombre, las tres cabeceras se
   leen como una sola fila. */
.d-col > h4{
  font-family:"Bricolage Grotesque",sans-serif; font-size:18px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); text-align:center;
}
/* 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;
}
/* A todo el ancho de la columna (4 sep 2026), no a 190 px: es la imagen que
   identifica la campaña de un vistazo y estaba pidiendo lupa. Puede permitírselo
   porque ya no vive dentro de la cabecera clavada: al hacer scroll se va, y lo
   que se queda arriba es el nombre y el botón. */
.d-mini{
  width:100%; aspect-ratio:16/9; object-fit:cover; margin:15px 0 11px;
  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}
/* El botón que sale del sitio, dentro de la columna: lleva el color fuerte
   —el mismo verbo de acción que usaba el botón de fuera del cuadro hasta el
   4 sep 2026—, porque salir a clipear es la acción que de verdad importa.
   El botón de fuera (`.d-cta`, más abajo) se quedó con el tono discreto: ya
   no sale del sitio, así que no necesita el color fuerte. */
.d-ir{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  margin-top:2px; padding:9px 22px; border-radius:11px; border:0;
  background:var(--cta); color:var(--cta-tx); text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif; font-size:14px; font-weight:700;
  letter-spacing:-.01em; white-space:nowrap;
}
.d-ir:hover{filter:brightness(1.08)}
.d-ir:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* 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}
/* Instrucciones en denso: rótulo corto en versalitas y la respuesta debajo.
   Es la forma más compacta que se leyó bien de las probadas —en dos columnas
   (rótulo | respuesta) el rótulo se comía un tercio del ancho y las respuestas
   largas quedaban en un canalón de cuatro palabras—. La respuesta va recortada
   con el texto entero en el `title`; la versión íntegra, con su cita literal,
   está en la ficha completa. */
.insl{display:flex; flex-direction:column; gap:0}
.insl h5{
  font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
/* Los rótulos de esta columna van todos del mismo gris (4 sep 2026): antes
   «A favor» iba en verde y «En contra» en rojo, y con tres rótulos seguidos
   de tres colores la columna parecía un semáforo. Lo que distingue una lista
   de otra sigue estando donde hace falta: en el ✓ y el ✕ de cada línea. */
.porques li.si b{color:var(--facil)}
.porques li.no b{color:var(--alerta)}
.ins{padding:5px 0; border-bottom:1px solid var(--line2, var(--line))}
.ins:last-child{border-bottom:none}
.ins b{display:block; font-size:11px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:2px}
.ins span{display:block; font-size:13.5px; color:var(--muted); line-height:1.4}
.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:6px}
.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}
/* 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. */
/* Tres columnas desde el 4 sep 2026, no dos: al entrar la nota como una celda
   más eran ocho celdas, y en dos columnas la tabla pedía una fila extra que
   sacaba la columna 63 px por debajo del alto del cuadro. En tres caben en
   tres filas y la ficha entera se lee sin scroll, que es de lo que se
   trataba. El umbral sigue a lo ancho arriba: es la cifra que decide. */
.datos{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:11px; overflow:hidden}
.datos > div{background:var(--panel); padding:10px 10px 11px; min-width:0}
.datos > div:first-child{grid-column:1 / -1}
/* La insignia de la nota, dentro de su celda: más pequeña que la de la tabla
   —ahí es el veredicto de la fila; aquí es una cifra más de ocho—. */
.datos .nota{font-size:17px; min-width:0; padding:2px 7px; margin-top:1px}
.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. */
/* Pantallas bajas: la ficha se aprieta antes que sacar barra de scroll. Lo
   que se recorta primero es lo accesorio —el banner y los pies de cada cifra,
   que matizan pero no son el dato—; la cifra en sí no se toca nunca, y lo
   recortado sigue entero en la ficha completa. Medido en 1366x768 y 1280x720,
   que son las dos alturas donde antes se iba de 129 y 202 px. */
@media (max-height:900px){
  .datos > div{padding:8px 9px 9px}
  .d-col{gap:12px}
}
@media (max-height:820px){
  .datos > div{padding:7px 9px 8px}
  .d-ficha h2{font-size:16px}
  /* Las listas densas se aprietan antes que recortarse: en una pantalla baja
     vale más leer las nueve cosas apretadas que cinco cómodas. */
  .ins{padding:4px 0}
  .ins span{font-size:13px; line-height:1.35}
  .porques{gap:5px}
  .porques li{font-size:13.5px; line-height:1.35}
  .insl h5{margin:0 0 5px}
}
.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}
.parrafo + .parrafo{margin-top:9px}
/* 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)}
.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)}
/* Ya no sale del sitio (desde el 4 sep 2026): va a la ficha propia de la
   campaña. Tono discreto a propósito, para no competir con `.d-ir` —el que
   de verdad saca a clipear, dentro de la columna 1— por la misma llamada a
   la atención: solo hay una acción "fuerte" en este cuadro y es esa. */
.d-cta{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:11px; z-index:6;
  padding:11px 26px; border-radius:13px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif; font-size:14px; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap; box-shadow:var(--sombra);
}
.d-cta:hover{border-color:var(--accent); color:var(--accent)}
.d-cta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ================= 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 / 3; min-width:0}
  .fila-c > .c-web{grid-row:1; grid-column:3; justify-content:flex-end;
    align-self:center}
  .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}

  /* Esto llevaba una regla especial para que buscador y orden no se
     empujaran a líneas distintas: el buscador reclamaba su ancho natural
     —296 px, la fila entera de un móvil— y tumbaba al selector debajo. Ya no
     hace falta: los dos tienen ahora ancho fijo (140 y 36 px) en vez de
     crecer con `flex`, así que caben solos y lo que no quepa —las
     plataformas, si son muchas— se pliega a la fila de abajo con el
     `flex-wrap:wrap` de siempre. */
  #buscar{min-width: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{grid-template-columns:1fr auto auto}
  .fila-c > .c-nombre{grid-row:1; grid-column:1; min-width:0}
  .fila-c > .c-web{grid-row:1; grid-column:2; align-self:center}
  .fila-c > .c-nota{grid-row:1; grid-column:3; 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}
  /* hasta la última columna: la segunda es la del botón de la web, de 30 px,
     y ahí un número de cuatro cifras no cabe */
  .fila-c > .c-comp{grid-row:4; grid-column:2 / -1; 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(148px,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}
/* --- la ficha a lo ancho (4 sep 2026) -------------------------------------
   Hasta ahora una ficha era un documento estrecho de 860 px centrado, con el
   resto de la pantalla en blanco a los lados. Ahora es la misma página que el
   resto del sitio: dos columnas de contenido y el carril de publicidad a la
   derecha, dentro del `.conmarco` de `ranking.CSS`.

   La izquierda mide lo que mide la cuadrícula de cifras (dos columnas de dato
   caben en 340 px) y no crece: es la columna de datos, y una línea de dato de
   700 px no se lee. Todo lo que es prosa —el resumen, la normativa, las
   citas— va en la derecha, que es la que se lleva el ancho sobrante. */
.ficha-cols{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:24px; align-items:start; margin-top:16px;
}
.ficha-cols > *{min-width:0}
/* Dentro de la ficha ancha, el primer rótulo de cada columna no lleva el aire
   de arriba que llevaría en un documento: ya lo pone la rejilla. */
.ficha-cols h2:first-child{margin-top:0}
/* La columna de datos NO va pegada (`sticky`) aunque apeteciera: mide 2.071 px
   en una campaña con dossier —doce cifras y la nota factor a factor— y un
   elemento más alto que la ventana, pegado, deja su parte de abajo
   inalcanzable mientras la otra columna sigue bajando. Se queda quieta. */
@media (max-width:1080px){
  .ficha-cols{grid-template-columns:1fr}
}
/* La ficha ancha hereda de `ranking.CSS`, donde `.ficha` no existe: estas dos
   reglas la desatan del ancho de documento que tenía cuando era una página
   estrecha, sin tocar el resto. */
.ficha.ancha{max-width:none; margin:0; padding: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)}
@media (max-width:620px){
  .menu{gap:4px 18px; margin:10px 0 16px}
  .menu-b{font-size:15.5px; gap:6px; padding-bottom:6px}
}

.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);
}
/* --- la ficha emergente del operador -------------------------------------
   Solo lo que no está ya en `ranking.CSS`: el cuadro, las columnas, la
   cuadrícula de cifras y las listas de a favor y en contra son literalmente
   las de la ficha de campaña, porque este bundle ya las trae. */
/* El logo de una compañía no es un banner: es cuadrado o muy apaisado, y con
   `cover` —lo que hace `.d-mini`— se recorta justo por donde está el nombre.
   `contain` sobre su bandeja, que además es como se ve en su propia fila. */
.d-mini.logo{object-fit:contain;background:var(--panel);padding:14px}
span.d-mini.logo{display:flex;align-items:center;justify-content:center;
  font-family:"Bricolage Grotesque",sans-serif;font-size:40px;font-weight:700}
/* Su cartera: para quién ha trabajado ya, que es lo que una marca mira antes
   de escribirle. Nombre y presupuesto a la izquierda, nota de la campaña a la
   derecha —la nota es de la campaña, no del operador—. */
.op-cart{list-style:none;margin:0;padding:0}
.op-cart li{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line2,var(--line))}
.op-cart li:last-child{border-bottom:none}
.op-c-n{flex:1;min-width:0;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.op-c-n a{color:var(--ink-2);text-decoration:none}
.op-c-n a:hover{color:var(--accent)}
.op-c-n small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.op-c-mas{color:var(--muted);font-size:12.5px}
.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)}

/* ---------- qué publica cada plataforma ----------
   Tres estados y no dos, y por eso tres clases: lo publica, no lo publica, y
   NO HAY (el umbral de promote.fun). Meter «no hay» en el mismo gris que «no
   lo dice» borraría justo la diferencia que sube la nota de esas campañas.
   El color no va solo: cada casilla lleva su palabra, que es lo que se lee en
   voz alta y lo que sobrevive a un daltonismo. */
/* Tres columnas cortas caben en un móvil; lo que no cabe es el ancho mínimo de
   `.dir-tabla` (640px, pensado para sus siete columnas de cifras). La gracia de
   esta tabla es comparar dos columnas de un vistazo, y no se comparan si hay
   que arrastrar para ver la otra, así que aquí NO se hereda ese mínimo.
   Quitarlo no bastaba: con 14px de acolchado a cada lado las tres columnas
   seguían pidiendo 398px en una caja de 296. En estrecho se aprieta el
   acolchado y el rótulo parte en dos líneas, que es lo que hace que quepa. */
.tabla-publica{min-width:min(420px,100%)}
@media (max-width:520px){
  .tabla-publica th,.tabla-publica td{padding:9px 7px;font-size:13.5px}
  .tabla-publica th:first-child,.tabla-publica td:first-child{
    white-space:normal;word-break:break-word}
}
.tabla-publica td{font-weight:600}
.tabla-publica .pub-si{color:var(--facil,#0F7A5A)}
.tabla-publica .pub-no{color:var(--muted);font-weight:400}
.tabla-publica .pub-nada{color:var(--accent)}

/* ---------- las gráficas del mercado ----------
   Dos tarjetas pequeñas, una al lado de otra, entre el menú y el buscador.
   Ocupan lo que ocupaban los dos párrafos que había ahí: ni una pantalla de
   gráfica antes de la tabla, que es lo que se venía a ver. */
.grafs{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin:2px 0 16px}
/* Las tres se reparten el ancho a partes iguales; con `basis` de 240px, en
   cuanto la fila no da para tres se caen a dos y luego a una. */
.graf{
  flex:1 1 240px; min-width:0;
  padding:8px 11px 7px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px;
}
.graf-cab{display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap}
/* La letra de la tarjeta es la de la tabla, no una propia: el título con la
   misma pinta que un rótulo de columna (`.cab`), las cifras como una celda
   `.dato` y los pies como sus `<small>`. Así el bloque se lee como parte de la
   página y no como un widget pegado. */
/* La familia, explícita: es un `<h2>` y `ranking.CSS` le pone Bricolage a
   todos los encabezados. Aquí manda el rótulo de columna, que es Figtree. */
.graf-t{font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:11.5px; font-weight:600; color:var(--muted);
  letter-spacing:.045em; text-transform:uppercase; line-height:1.25}
/* Los tres periodos, en una bandeja hundida: el que está puesto va en blanco
   sobre el fondo, como una pestaña, no como un botón encendido. */
.graf-rangos{display:flex; gap:2px; padding:2px; background:var(--sunk);
  border-radius:999px}
.graf-r{
  border:0; background:transparent; cursor:pointer; border-radius:999px;
  padding:2px 8px; font-family:inherit; font-size:11px; font-weight:600;
  color:var(--muted); line-height:1.3;
}
.graf-r:hover{color:var(--ink)}
.graf-r.act{background:var(--panel); color:var(--ink); box-shadow:var(--sombra)}
.graf-r:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.graf-cifras{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin:5px 0 0}
.graf-fila{display:flex; align-items:baseline; gap:6px}
/* «solo 32 h»: el aviso de que el periodo pedido no cabe en la historia que
   hay. Va en gris y con la explicación entera en el `title`. */
.graf-real{font-size:10px; color:var(--muted); font-weight:500;
  align-self:center; cursor:help}
.graf-cifra{display:flex; flex-direction:column; gap:1px}
.graf-et{display:flex; align-items:center; gap:5px; font-size:11px;
  color:var(--muted); font-weight:400; line-height:1.32}
.graf-pt{width:8px; height:8px; border-radius:50%; flex-shrink:0}
.graf-pt.pt-total{background:var(--facil)}
.graf-pt.pt-libre{background:var(--normal)}
.graf-cifra b{font-size:15px; font-weight:600; line-height:1.25;
  color:var(--ink); font-variant-numeric:tabular-nums}
.graf-var{font-size:11px; font-weight:600}
.graf-var.sube{color:var(--facil)}
.graf-var.baja{color:var(--alerta)}
/* El lienzo se estira a lo ancho (`preserveAspectRatio="none"`) y las cifras
   del eje se colocan en porcentaje, así que el alto lo manda el CSS y se puede
   cambiar aquí sin tocar el SVG. */
.graf-lienzo{position:relative; height:32px; margin-top:3px}
.graf-svg{display:block; width:100%; height:100%}
.graf-rejilla line{stroke:var(--line2,var(--line)); stroke-width:1;
  vector-effect:non-scaling-stroke}
.graf-area{fill:var(--facil); opacity:.10; stroke:none}
.graf-l{fill:none; stroke-linejoin:round; stroke-linecap:round}
/* La primera serie manda: es la de la tarjeta. La segunda va fina y en el azul
   de la paleta, sobre la MISMA escala —son dólares las dos, y el hueco entre
   las líneas es dinero de verdad; darle a la segunda un eje propio se ve mejor
   y dice menos—. */
.graf-l0{stroke:var(--facil); stroke-width:2}
.graf-l1{stroke:var(--normal); stroke-width:1.5; opacity:.85}
/* pegadas al borde derecho y justo encima de su línea de rejilla */
.graf-y{
  position:absolute; right:0; transform:translateY(-50%);
  padding:0 0 0 5px; background:var(--panel);
  font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.graf-x{display:flex; justify-content:space-between; margin-top:3px;
  font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
.graf-vacio{margin:14px 0; font-size:12.5px; color:var(--muted); text-align:center}
@media (max-width:860px){
  .grafs{gap:10px}
  .graf{flex:1 1 100%}
  .graf-lienzo{height:64px}
}

/* ---------- 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. */
/* Ocho columnas —la segunda es el botón, sin rótulo— y el hueco en 14 px. Los
   anchos están medidos contra el caso peor: a 1441 px el carril de anuncios
   todavía es columna y a la tabla le quedan 1.079; esto pide 1.038.
   Y los rótulos de la cabecera envuelven (`normal`): con `nowrap`, «Campañas
   activas» pedía 124 px en una columna de 104 y se salía de su casilla. */
.dir-lista .cab, .dir-lista .fila-c{
  grid-template-columns:minmax(150px,1fr) 40px 132px 286px 96px 84px 104px 84px;
  gap:12px;
}
/* Los rótulos envuelven si lo necesitan, pero «Campañas activas» tiene columna
   de sobra (132 px para 124 de texto) y cabe en una línea, que es como se pidió. */
.dir-lista .cab span{white-space:normal; line-height:1.2}
/* El botón `.ir` se define en `ranking.CSS`, que este bundle ya carga: lo usan
   las dos tablas. Aquí solo su sitio en la fila — pegado al nombre y no
   centrado en su columna, que a media columna de distancia parecía de la
   siguiente. */
.dir-lista .c-ir{justify-self:start}
/* El icono de la plataforma, en la misma caja que el banner de la campaña, y
   el nombre debajo. */
.dir-lista .plataforma{display:flex; flex-direction:column; align-items:center;
  gap:4px; min-width:0}
/* Igual que el del operador: el logotipo y nada detrás. Cuadrado de 25 px,
   que es el alto que tenía dentro de la caja apaisada —lo que se ve no cambia
   de tamaño, desaparece el rectángulo—. El monograma de respaldo conserva su
   fondo, que sin él no se leería. */
.dir-lista img.pl-ico{
  width:25px; height:25px; object-fit:contain; border-radius:5px;
  background:none; border:0; flex-shrink:0;
}
.dir-lista .pl-ico.ico-letra{width:44px; height:25px; font-size:11px;
  border-radius:5px; flex-shrink:0}
.dir-lista .pl-n{font-size:11.5px; font-weight:600; color:var(--ink-2);
  line-height:1.25; overflow-wrap:anywhere}
/* La mejor campaña activa: banner y nombre, la misma pareja con la que se
   reconoce una campaña en la portada. El banner va más pequeño que el de allí
   —88x50 y no 128x72— porque aquí no es el sujeto de la fila, es la pista de
   qué ofrece hoy este operador; el sujeto es el logo de la izquierda. */
.dir-lista .mejor{display:flex; align-items:center; gap:9px; min-width:0;
  text-align:left}
.dir-lista .mejor-ban{
  flex-shrink:0; width:70px; height:40px; border-radius:6px; object-fit:cover;
  background:var(--sunk); border:1px solid var(--line);
}
.dir-lista .mejor-ban.ico-letra{font-size:17px}
/* La nota de esa campaña, pegada al borde derecho de la celda y centrada
   contra el nombre. Es la insignia de la portada en pequeño: mismos cuatro
   tramos de color (`n-alta`…`n-baja`), que es lo que la hace legible sin
   leerla. */
.dir-lista .mejor .nota{
  flex-shrink:0; margin-left:auto; min-width:36px; padding:3px 6px;
  border-radius:8px; font-size:14px; letter-spacing:-.02em; cursor:default;
}
/* Envuelve las líneas que necesite y no se corta nada. Lo que sí es igual en
   todas las filas es la caja: `flex:1` la estira hasta la nota, así que el
   nombre siempre dispone del mismo ancho y el borde derecho de la columna cae
   en el mismo píxel. Se parte por palabras; solo una palabra más larga que la
   caja se rompe por dentro, y eso es preferible a que se salga. */
.dir-lista .mejor-n{
  flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600;
  line-height:1.3; overflow-wrap:break-word;
}
/* El logo del operador, a pelo: sin bandeja ni borde detrás, solo el cuadrado
   —de ahí que la caja sea 72x72 y no el 128x72 del banner de campaña: con la
   caja apaisada quedaban 28 px de aire muerto a cada lado—. El selector va con
   `img` a propósito: el respaldo de la inicial (`.ico-letra`) SÍ necesita su
   fondo de color, y es un `span`. */
.dir-lista img.ban-logo{
  width:72px; height:72px; padding:0; object-fit:contain;
  background:none; border:0; border-radius:8px;
}
.dir-lista .ban-logo.ico-letra{width:72px; height:72px; font-size:30px; padding:0}
/* la fila es un enlace, no un botón como en la portada */
.dir-lista .fila-c{display:grid}
/* El nombre del operador es el enlace a su ficha (la fila entera ya no puede
   serlo: lleva dentro el botón de salir, y un `<a>` dentro de otro no es HTML
   válido). Se pinta como el nombre de una campaña en la portada, no como un
   enlace azul: subraya al pasar por encima y ya. */
.dir-lista .c-nombre .n{text-decoration:none; color:inherit}
.dir-lista .c-nombre .n:hover{text-decoration:underline; text-underline-offset:2px}
.dir-lista .c-nombre .n:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px; border-radius:3px}
.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-ir{grid-row:1; grid-column:4; justify-self:end;
    align-self:center}
  .dir-lista .cab span{white-space:normal}
  .dir-lista .fila-c > .c-camps, .dir-lista .fila-c > .c-bolsa,
  .dir-lista .fila-c > .c-pagado, .dir-lista .fila-c > .c-plataforma,
  .dir-lista .fila-c > .c-clippers{grid-column:span 2; text-align:left}
  /* en fila, que apilado dentro de una celda de media anchura sobra sitio */
  .dir-lista .plataforma{flex-direction:row; align-items:center; gap:7px}
  /* la mejor campaña, de ancho entero: con media fila el nombre se quedaba en
     una columna de 120px y cortaba a la segunda palabra */
  .dir-lista .fila-c > .c-mejor{grid-column:1 / -1; 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-ir{grid-row:1; grid-column:2; justify-self:end;
    align-self:center}
  .dir-lista .fila-c > .c-mejor{grid-row:2; grid-column:1 / -1; text-align:left}
  .dir-lista .fila-c > .c-camps{grid-row:3; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-bolsa{grid-row:3; grid-column:2; text-align:right}
  .dir-lista .fila-c > .c-pagado{grid-row:4; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-clippers{grid-row:4; grid-column:2; text-align:right}
  .dir-lista .fila-c > .c-plataforma{grid-row:5; grid-column:1 / -1; text-align:left}
  .dir-lista .plataforma{justify-content:flex-start}
}

/* La lista de Plataformas: misma fila que Operadores (icono cuadrado, nombre,
   cifras), pero con otras columnas — aquí no hay botón de salir (el nombre ya
   enlaza a la portada de la plataforma) y en su lugar van dos cifras que solo
   tienen sentido de plataforma a plataforma: el umbral y la nota medianas.
   Ancho aparte porque siete columnas de dato caben más apretadas que las seis
   de Operadores: sin encoger, a 1441 px —donde el carril de anuncios todavía
   es columna y a la tabla le quedan ~1079 px, medido igual que la de
   Operadores— se salía. */
.dl-plataformas .cab, .dl-plataformas .fila-c{
  grid-template-columns:minmax(150px,1fr) 118px 260px 88px 78px 88px 74px 100px;
  gap:10px;
}
@media (max-width:1080px){
  .dl-plataformas .fila-c{grid-template-columns:repeat(4,1fr); gap:10px 12px; padding:14px 15px}
  .dl-plataformas .fila-c > .c-nombre, .dl-plataformas .fila-c > .c-mejor{
    grid-column:1 / -1; text-align:left}
  .dl-plataformas .fila-c > .c-camps, .dl-plataformas .fila-c > .c-bolsa,
  .dl-plataformas .fila-c > .c-pagado, .dl-plataformas .fila-c > .c-umbral,
  .dl-plataformas .fila-c > .c-nota, .dl-plataformas .fila-c > .c-operadores{
    grid-column:span 2; text-align:left}
}
@media (max-width:620px){
  .dl-plataformas .fila-c{grid-template-columns:1fr auto; gap:9px 12px}
  .dl-plataformas .fila-c > .c-nombre{grid-row:1; grid-column:1 / -1}
  .dl-plataformas .fila-c > .c-mejor{grid-row:2; grid-column:1 / -1; text-align:left}
  .dl-plataformas .fila-c > .c-camps{grid-row:3; grid-column:1; text-align:left}
  .dl-plataformas .fila-c > .c-bolsa{grid-row:3; grid-column:2; text-align:right}
  .dl-plataformas .fila-c > .c-pagado{grid-row:4; grid-column:1; text-align:left}
  .dl-plataformas .fila-c > .c-umbral{grid-row:4; grid-column:2; text-align:right}
  .dl-plataformas .fila-c > .c-nota{grid-row:5; grid-column:1; text-align:left}
  .dl-plataformas .fila-c > .c-operadores{grid-row:5; grid-column:2; text-align:right}
}