/* ============================================================
   CORO — sistema de diseño de El Interno (v1, sept. 2026)
   Fuente de verdad del diseño: Claude Design, dirección "Coro".
   Regla: usar SIEMPRE estas variables. No escribir colores sueltos.
   Archivo único para todas las páginas (home + ficha de empresa),
   como pide el README del design system — antes existía un
   assets/coro-empresa.css separado, consolidado acá el 25-09-2026
   para evitar que los tokens se desincronicen entre los dos.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,300..900;1,62..125,300..900&display=swap');

/* ---------- 1. TOKENS ---------- */
:root{
/* Marca */
--ink:oklch(0.26 0.055 262);          /* azul marino: texto principal, header, hero, footer */
--ink-2:oklch(0.44 0.03 262);         /* texto secundario */
--ink-3:oklch(0.53 0.02 262);         /* texto terciario, etiquetas, placeholders (0.53, no el 0.58 original: a 0.58 el contraste sobre blanco quedaba en 4.28:1, bajo el mínimo AA de 4.5:1 para texto normal) */
--vest:oklch(0.9 0.17 102);           /* amarillo chaleco: SOLO acción principal */
--vest-hover:oklch(0.93 0.17 102);
/* Superficies */
--ground:oklch(0.962 0.006 250);      /* fondo de página */
--card:#fff;
--line:oklch(0.9 0.01 255);           /* bordes de card */
--line-2:oklch(0.84 0.012 255);       /* bordes de inputs, chips */
/* Sobre fondo azul marino */
--on-ink:#fff;
--on-ink-2:oklch(0.88 0.02 262);
--on-ink-3:oklch(0.8 0.02 262);
--on-ink-line:oklch(1 0 0 / .14);
--on-ink-fill:oklch(1 0 0 / .06);
/* Semánticos: sí / depende / no / sin dato */
--si:oklch(0.56 0.12 158);
--dep:oklch(0.72 0.13 62);
--no:oklch(0.55 0.19 27);
--nd:oklch(0.78 0.012 255);
--si-soft:oklch(0.95 0.035 158);
--dep-soft:oklch(0.95 0.04 70);
--no-soft:oklch(0.95 0.035 27);
--si-text:oklch(0.42 0.1 158);        /* texto verde legible sobre blanco */
--dep-text:oklch(0.45 0.1 62);
--no-text:oklch(0.47 0.17 27);
/* Tipografía */
--font:'Archivo',system-ui,sans-serif;
--wide:118%;                          /* números grandes (notas, stats) */
--display:108%;                       /* titulares */
--narrow:88%;                         /* nombres de empresa en card */
/* Radios */
--r:12px;                             /* cards, bloques */
--r-s:7px;                            /* botones, inputs, chips */
--r-xs:5px;                           /* tags */
/* Espaciado */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-14:56px;
--wrap:1240px;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--ground);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--no)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- 3. BOTONES ---------- */
.btn-vest{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vest);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;padding:10px 16px;border-radius:var(--r-s);white-space:nowrap;border:0;cursor:pointer}
.btn-vest:hover{color:var(--ink);background:var(--vest-hover)}
.btn-vest.lg{font-size:16px;padding:14px 20px}
.btn-line{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:10px 16px;border-radius:var(--r-s);white-space:nowrap;cursor:pointer}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-more{height:46px;padding:0 22px;border:1.5px solid var(--ink);background:var(--card);border-radius:var(--r-s);font-weight:700;cursor:pointer}
.btn-more:hover{background:var(--ink);color:#fff}
.link-more{font-weight:600;font-size:14px;white-space:nowrap}

/* ---------- 4. HEADER / FOOTER ---------- */
header{background:var(--ink);color:#fff}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-stretch:112%;font-size:19px;letter-spacing:-.01em}
.logo:hover{color:#fff}
/* Logo "tachón": barra amarilla = nombre tachado. Sobre fondo claro usar .logo.light */
.mark{display:block;width:22px;height:11px;border-radius:3px;background:var(--vest);flex:none}
.logo.light{color:var(--ink)}.logo.light:hover{color:var(--ink)}.logo.light .mark{background:var(--ink)}
.hd-actions{display:flex;align-items:center;gap:8px}
.hd-link{color:#fff;opacity:.82;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r-s)}
.hd-link:hover{opacity:1;color:#fff;background:oklch(1 0 0 / .08)}
footer{margin-top:64px;background:var(--ink);color:var(--on-ink-3);font-size:14px}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:28px 24px}
.ft nav{display:flex;flex-wrap:wrap;gap:18px}
.ft a{color:#fff;text-decoration:none;opacity:.85}
.ft a:hover{opacity:1;color:#fff}

/* ---------- 5. HERO ---------- */
.hero{background:var(--ink);color:#fff;padding:56px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:end;overflow:hidden}
.hero-grid>div{min-width:0}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:.98;font-weight:800;font-stretch:var(--display);letter-spacing:-.025em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--vest)}
.hero-sub{margin-top:20px;font-size:18px;line-height:1.5;color:var(--on-ink-2);max-width:34ch;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.hero-promise{font-size:13px;color:var(--on-ink-3);display:flex;flex-wrap:wrap;gap:4px 14px}
.hero-promise span{display:inline-flex;align-items:center;gap:6px}
.hero-promise span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--vest)}
.hf-cap{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-3);margin-bottom:10px}
.h-feed{display:flex;flex-direction:column;gap:10px;padding-bottom:40px}
.hf{display:block;background:var(--on-ink-fill);border:1px solid oklch(1 0 0 / .13);border-radius:var(--r);padding:14px 18px;color:#fff;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.hf:hover{color:#fff;border-color:oklch(1 0 0 / .35);background:oklch(1 0 0 / .08)}
.hf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hf-top b{font-weight:700;font-size:15px}
.hf-top .sc{gap:2px}
.hf-top .sc b{font-size:16px;font-stretch:var(--wide);letter-spacing:-.02em}
.hf-top .stars{font-size:10px}
/* --dep-text está pensado para texto sobre blanco (cards, aside); sobre el
   fondo oscuro del feed casi no se ve, así que aquí se usa el --dep crudo */
.hf-top .stars .on{color:var(--dep)}
.hf-top .sc.lo b{color:var(--on-ink-2)}
.hf-top .sc.hi b{color:var(--on-ink-2)}
.hf q{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:#fff;quotes:"“" "”";text-wrap:pretty}
.hf-meta{margin-top:8px;font-size:12.5px;color:var(--on-ink-3)}
.stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--on-ink-line);margin-top:48px}
.stat{flex:1 1 180px;padding:18px 0 20px;display:flex;align-items:baseline;gap:10px;font-size:14px;color:oklch(0.82 0.02 262)}
.stat+.stat{padding-left:24px;border-left:1px solid var(--on-ink-line)}
.stat b{font-size:28px;font-weight:800;font-stretch:115%;color:#fff;letter-spacing:-.02em}

/* ---------- 6b. FRANJA RANKING DT (home, debajo del hero) — opción B "panel oficial"
   Tarjeta blanca montada sobre el borde inferior del hero. Franja roja arriba. Ranking
   1°·2°·3° en cuadrado rojo (mismo símbolo que el chip "Con multas DT"). SIN barras de
   progreso (más multas no es "avanzar"). Datos en vivo desde multas_dt.json/multas-ranking.json. ---------- */
.dtx-band{background:linear-gradient(var(--ink) 0 50%,var(--ground) 50% 100%);padding:12px 0 0}
.dtx{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dtx::before{content:"";display:block;height:6px;background:var(--no)}
.dtx-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.9fr) auto;gap:24px;align-items:center;padding:26px 28px}
.dtx-in>*{min-width:0}
.dtx-kick{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--no-text)}
.dtx-kick::before{content:"";width:9px;height:9px;border-radius:2px;background:currentColor;flex:none}
.dtx-h{font-size:clamp(24px,2.6vw,32px);line-height:1.08;font-weight:800;font-stretch:var(--display);letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
.dtx-src{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.dtx-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none}
.dtx-it{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rk nm" "rk num";column-gap:12px;align-items:baseline;padding:0 14px;min-width:0;overflow:hidden;color:var(--ink);text-decoration:none}
.dtx-it+.dtx-it{border-left:1px solid var(--line)}
.dtx-rk{grid-area:rk;align-self:start;display:grid;place-items:center;width:26px;height:26px;border-radius:5px;background:var(--no);color:#fff;font-size:13px;font-weight:800;font-stretch:var(--wide)}
.dtx-nm{grid-area:nm;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtx-num{grid-area:num;display:flex;align-items:baseline;gap:6px;margin-top:4px;min-width:0}
.dtx-num b{font-size:clamp(20px,2vw,32px);line-height:.9;font-weight:850;font-stretch:125%;letter-spacing:-.035em;white-space:nowrap}
.dtx-num span{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;flex:none}
.dtx-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
@media (max-width:1000px){.dtx-in{grid-template-columns:1fr;gap:22px}}

/* ---------- 7. SECCIONES ---------- */
.sec{padding-top:48px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.sec-head h2{font-size:30px;line-height:1.1;font-weight:800;font-stretch:105%;letter-spacing:-.02em;text-wrap:balance}
.sec-head p{color:var(--ink-2);font-size:15px;margin-top:6px;max-width:78ch;text-wrap:pretty}
.kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 8. EXPERIENCIAS DE SELECCIÓN ---------- */
.exps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.exp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.tag{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 9px;border-radius:var(--r-xs)}
.tag.bad{background:var(--no-soft);color:var(--no-text)}
.tag.neutral{background:var(--dep-soft);color:var(--dep-text)}
.tag.good{background:var(--si-soft);color:var(--si-text)}
.exp q{font-size:17px;line-height:1.45;font-weight:450;quotes:"“" "”" "‘" "’";text-wrap:pretty;flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);padding-top:12px;border-top:1px solid var(--line)}
.who::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--ink);flex:none}
.who b{color:var(--ink);font-weight:600}

/* ---------- 9. FILTROS ---------- */
.filters{position:sticky;top:0;z-index:5;background:oklch(0.962 0.006 250 / .92);backdrop-filter:blur(8px);padding:14px 0;margin-top:8px}
.f-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.f-bar+.f-bar{margin-top:10px}
.search{flex:1 1 280px;display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:0 14px;height:46px}
.search:focus-within{border-color:var(--ink)}
.search svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.search input{border:0;outline:0;background:none;width:100%;font-size:16px;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.sel{height:46px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--card);padding:0 12px;font-size:14px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:1.5px solid var(--line-2);background:var(--card);border-radius:var(--r-s);font-size:14px;font-weight:500;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--nd)}
.chip .dot.si{background:var(--si)}.chip .dot.dep{background:var(--dep)}.chip .dot.no{background:var(--no)}
.chip .dot.div{background:linear-gradient(90deg,var(--si) 50%,var(--no) 50%)}
.chip .dot.dt{border-radius:2px;background:var(--no)}
.f-sep{width:1px;height:24px;background:var(--line-2);margin:0 4px}
.count{font-size:14px;color:var(--ink-2);margin-left:auto}
.count b{color:var(--ink)}

/* ---------- 10. CARD DE EMPRESA (home) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:8px 0 0}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo name score" "voices voices voices" "rec rec rec" "facts facts facts" "dt dt dt";column-gap:12px;row-gap:14px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.card:hover{color:var(--ink);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.logo-sq{grid-area:logo;width:40px;height:40px;border-radius:9px;background:var(--ground);display:grid;place-items:center;font-weight:800;font-stretch:112%;font-size:15px;color:var(--ink-2);border:1px solid var(--line);overflow:hidden}
.logo-sq img{width:100%;height:100%;object-fit:contain;padding:4px}
.logo-sq.dark{background:var(--ink)}
.nm{grid-area:name;min-width:0;align-self:center}
.nm b{display:block;font-size:17px;line-height:1.2;font-weight:700;font-stretch:var(--narrow);letter-spacing:-.005em;text-wrap:balance}
.nm span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voices{grid-area:voices;font-size:13px;color:var(--ink-2)}
.voices b{color:var(--ink);font-weight:650}

/* Nota + estrellas. Color: .lo (<2,5) rojo · sin clase (2,5–3,9) azul · .hi (≥4) verde */
.sc{grid-area:score;display:flex;flex-direction:column;align-items:flex-end;gap:5px;line-height:1}
.sc b{font-size:28px;font-weight:800;font-stretch:var(--wide);letter-spacing:-.03em}
.sc.lo b{color:var(--no)}.sc.hi b{color:var(--si)}
.stars{display:flex;gap:1px;line-height:1;color:var(--line-2)}
.stars .star,.stars>span{color:var(--line-2)}
.stars .on,.stars .star.on{color:var(--dep-text)}

/* Recomendación: frase + punto (se reusa igual en el aside de empresa y en cada reseña) */
.rec{grid-area:rec;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.rec i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--nd)}
.rec span{color:var(--ink-2);font-weight:500}
.rec.si{color:var(--si-text)}.rec.si i{background:var(--si)}
.rec.dep{color:var(--dep-text)}.rec.dep i{background:var(--dep)}
.rec.no{color:var(--no-text)}.rec.no i{background:var(--no)}
.rec.div{color:var(--ink-2)}.rec.div i{background:linear-gradient(90deg,var(--si) 50%,var(--no) 50%)}
.rec.nd{color:var(--ink-3);font-weight:500}
.card .rec{margin-top:-6px}

/* Mini tabla Liderazgo / Cultura / Sueldo (card del home y aside de empresa) */
.facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fact{background:#fff;padding:7px 8px;min-width:0}
.fact-k{font-size:11px;font-weight:600;color:var(--ink-3)}
.fact-v{display:flex;gap:3px;font-size:12.5px;font-weight:500;line-height:1.25;margin-top:1px}
.fact-v::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--nd);margin:.38em 3px 0 0}
.fact-v.good{color:var(--si-text)}.fact-v.good::before{background:var(--si)}
.fact-v.bad{color:var(--no-text)}.fact-v.bad::before{background:var(--no)}
.fact-v.strong{font-weight:750}

/* Línea DT en card */
.dtl{grid-area:dt;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13px}
.dtl-k{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-3)}
.dtl-v{display:flex;align-items:center;gap:8px;min-width:0}
.dtl-v .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.dtl-v.pend .dot{background:var(--no)}
.dtl-v .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.dtl-v .t b{color:var(--ink);font-weight:650}
.dtl-v.pend .t b{color:var(--no)}
.dtl-v.none .t{color:var(--ink-3)}

.more{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 0 8px}
.more p{font-size:13px;color:var(--ink-2)}

/* ---------- 11. BLOQUE PROMESA ANONIMATO (home) ---------- */
.promise{margin:56px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center}
.promise h3{font-size:28px;line-height:1.1;font-weight:800;font-stretch:105%;letter-spacing:-.02em;text-wrap:balance}
.promise-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pd{border:1px solid var(--line);border-radius:var(--r-s);padding:14px}
.pd-k{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.pd-v{margin-top:8px;font-size:15px;font-weight:600}
.pd.no .pd-v{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--no);text-decoration-thickness:2px}
.pd-note{font-size:12px;color:var(--ink-2);margin-top:4px}

/* ---------- 12. BOTÓN FLOTANTE del home (no forma parte del sistema Coro
   original; se mantiene el mismo comportamiento que ya existía en el
   sitio, distinto de la barra fija .m-bar de la ficha de empresa) ---------- */
.btn-flotante{position:fixed;bottom:20px;right:20px;z-index:20;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 6px 20px oklch(0.26 0.055 262 / .25)}
.btn-flotante.visible{opacity:1;transform:none;pointer-events:auto}

/* ============================================================
   FICHA DE EMPRESA — estructura intocable:
   .eb-layout-wrap > .eb-aside#empresa-header + main#main (CLAUDE.md)
   ============================================================ */

/* ---------- 13. ASIDE ---------- */
.eb-layout-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start;padding-top:24px}
.eb-aside{position:sticky;top:16px}
.eb-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.aside-back{font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none}
.aside-back:hover{color:var(--ink)}
.eb-id{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.empresa-logo{width:56px;height:56px;border-radius:10px;border:1px solid var(--line);background:var(--ground);display:grid;place-items:center;overflow:hidden;font-weight:800;font-stretch:112%;font-size:18px;color:var(--ink-2)}
.empresa-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.empresa-logo.logo-dark{background:var(--ink)}
.empresa-nombre{font-size:22px;line-height:1.1;font-weight:800;font-stretch:var(--narrow);letter-spacing:-.01em;text-wrap:balance}
.empresa-rubro{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.empresa-website{display:block;font-size:12.5px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);margin-top:2px}
.empresa-website:hover{color:var(--ink)}
.eb-head .rec{margin:0}
.eb-head .btn-vest{justify-content:center}
.eb-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:12.5px;color:var(--ink-2);margin-top:-6px}
.eb-promise span{display:inline-flex;align-items:center;gap:6px}
.eb-promise span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink)}
/* Barra fija "Suma tu voz" — solo en celular/tablet, aparece cuando el botón del aside sale de pantalla (.show via JS) */
.m-bar{display:none}

/* ---------- 14. INTRO / TÍTULOS DE SECCIÓN (main de la ficha) ---------- */
.empresa-intro{font-size:14px;color:var(--ink-2);line-height:1.65;margin:20px 0}
.section-title{font-size:19px;font-weight:800;font-stretch:105%;letter-spacing:-.01em}
.resenas-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}

/* ---------- 15. RESUMEN (Sueldo/Crecimiento/Flexibilidad/Liderazgo/Cultura) ---------- */
.resumen{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:20px}
.resumen-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.resumen-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-bottom:18px}
.resumen-item{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.resumen-label{font-size:12.5px;color:var(--ink-3);font-weight:600}
.badge-cualitativo{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650}
.badge-cualitativo::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--nd)}
.badge-cualitativo.badge-tone-good{color:var(--si-text)}.badge-cualitativo.badge-tone-good::before{background:var(--si)}
.badge-cualitativo.badge-tone-bad{color:var(--no-text)}.badge-cualitativo.badge-tone-bad::before{background:var(--no)}
.badge-cualitativo.badge-tone-neutral{color:var(--ink-2)}
.badge-cualitativo-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.badge-cualitativo-sub:hover{color:var(--ink)}
.dist-wrap{display:none;margin-top:8px;width:100%}
.dist-wrap.open{display:block}
.dist-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px}
.dist-row-label{width:150px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist-bar-bg{flex:1;height:5px;background:var(--ground);border-radius:3px;overflow:hidden}
.dist-bar-fill{height:100%;background:var(--ink-3);border-radius:3px}
.dist-count{color:var(--ink-3);min-width:16px;text-align:right}
.resumen-stats{display:flex;gap:10px 24px;padding-top:16px;border-top:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.resumen-stat-item{font-size:13px;color:var(--ink-2)}
.resumen-stat-item strong{color:var(--ink);font-weight:800}
.highlights{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.highlight-card{border-radius:var(--r-s);padding:13px 15px;font-size:13.5px;line-height:1.5}
.highlight-card-bien{background:var(--si-soft)}
.highlight-card-mal{background:var(--no-soft)}
.highlight-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.highlight-card-bien .highlight-label{color:var(--si-text)}
.highlight-card-mal .highlight-label{color:var(--no-text)}
.highlight-text{color:var(--ink-2)}
.resumen-ia-note{font-size:11px;color:var(--ink-3);margin-top:8px;font-style:italic}

/* ---------- 16. CTA TRABAJASTE / COMPARTIR ---------- */
.cta-trabajaste{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-trabajaste-texto{display:flex;flex-direction:column;gap:6px;flex:1 1 260px}
.cta-trabajaste-texto strong{font-size:15px;color:var(--ink)}
.cta-visitas-espera{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.cta-visitas-espera .visitas-num{font-weight:800;color:var(--ink);font-size:14px}
.pulse{width:7px;height:7px;background:var(--dep);border-radius:50%;display:inline-block;flex-shrink:0;animation:pulseAnim 1.5s infinite}
@keyframes pulseAnim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.btn-cta-trabajaste{flex-shrink:0}
.cta-compartir{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-top:24px}
.cta-compartir-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;flex-wrap:wrap}
.cta-compartir-texto{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.cta-compartir-texto strong{font-size:15px;color:var(--ink)}
.cta-compartir-texto span{font-size:13px;color:var(--ink-2)}
.cta-compartir-botones{display:flex;gap:8px;flex-shrink:0}
.btn-compartir{padding:10px 16px;border-radius:var(--r-s);font-size:13.5px;font-weight:700;cursor:pointer;border:1.5px solid var(--line-2);text-decoration:none;display:inline-flex;align-items:center;background:var(--card);color:var(--ink)}
.btn-compartir:hover{border-color:var(--ink)}
.btn-whatsapp{border-color:var(--si);color:var(--si-text)}
.btn-copiar{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 17. RESEÑAS ---------- */
.resena{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px;transition:border-color .15s}
.resena-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.resena-rating{font-weight:800;font-size:14px}
.badge-sigue{font-size:12px;border-radius:var(--r-xs);padding:3px 9px;font-weight:650;background:var(--ground);color:var(--ink-2)}
.badge-sigue-si{background:var(--si-soft);color:var(--si-text)}
.badge-sigue-no{background:var(--ground);color:var(--ink-3)}
.resena-subcats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.resena-subcat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.resena-subcat b{font-weight:700;color:var(--ink)}
.resena-subcat i{width:6px;height:6px;border-radius:50%;background:var(--nd);flex-shrink:0;display:inline-block}
.resena-subcat.tone-good i{background:var(--si)}
.resena-subcat.tone-bad i{background:var(--no)}
.resena-subcat.tone-neutral i{background:var(--dep)}
.resena-publicado{font-size:12px;color:var(--ink-3);margin:-4px 0 10px}
.resena-meta{font-size:12.5px;color:var(--ink-2);margin:2px 0 10px}
.bloque{border-radius:var(--r-s);padding:12px 14px;margin-bottom:8px;font-size:14px;line-height:1.55}
.bloque-bien{background:var(--si-soft)}
.bloque-mal{background:var(--no-soft)}
.bloque-desearias{background:var(--dep-soft)}
.bloque-gerencia{background:var(--ground);border:1px solid var(--line)}
.bloque-label{font-size:11px;font-weight:800;margin-bottom:5px;display:block}
.bloque-bien .bloque-label{color:var(--si-text)}
.bloque-mal .bloque-label{color:var(--no-text)}
.bloque-desearias .bloque-label{color:var(--dep-text)}
.bloque-gerencia .bloque-label{color:var(--ink-3)}
.bloque-text{color:var(--ink-2);line-height:1.6}
.resena-masked-note{font-size:11px;color:var(--ink-3);margin-top:5px;font-style:italic}

.resena-cuerpo-colapsado{max-height:130px;overflow:hidden;position:relative}
.resena-cuerpo-colapsado::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(to bottom,transparent,var(--card))}
.resena-cuerpo-abierta{max-height:none;overflow:visible}
.resena-cuerpo-abierta::after{display:none}
.btn-leer-mas{display:block;width:fit-content;margin:8px auto 0;padding:7px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--card);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.btn-leer-mas:hover{border-color:var(--ink);color:var(--ink)}

.resena-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap}
.btn-voto{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:7px 13px;font-size:12.5px;cursor:pointer;color:var(--ink-2);font-weight:600}
.btn-voto:hover:not(.voted){border-color:var(--ink)}
.btn-voto.voted{border-color:var(--si);color:var(--si-text);background:var(--si-soft);cursor:default}
.btn-voto .voto-ico{flex-shrink:0}
.btn-voto.voted .voto-ico{fill:currentColor}
.btn-voto .voto-count{font-weight:800;color:var(--ink)}
.btn-voto.voted .voto-count{color:var(--si-text)}
.btn-denunciar{background:none;border:none;font-size:12px;color:var(--ink-3);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.btn-denunciar:hover{color:var(--no)}

.not-found{text-align:center;padding:80px 24px;color:var(--ink-2)}
.not-found h2{font-size:22px;margin:12px 0 8px;color:var(--ink);font-weight:800}

/* ---------- 18. MULTAS DT (ficha de empresa) ---------- */
.bloque-dt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:20px}
.bloque-dt.dt-coral{border-color:color-mix(in srgb,var(--no) 35%,var(--line))}
.bloque-dt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.bloque-dt-titulo-wrap{display:flex;flex-direction:column;gap:3px}
.bloque-dt-titulo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--no)}
.bloque-dt-empresa{font-size:11.5px;color:var(--ink-3)}
.bloque-dt-stat{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bloque-dt-num{font-size:26px;font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em;line-height:1}
.bloque-dt-sublabel{font-size:14px;color:var(--ink-2);font-weight:600}
.bloque-dt-pendiente-pill{display:inline-flex;align-items:center;gap:5px;background:var(--no-soft);color:var(--no-text);border-radius:var(--r-xs);font-size:12px;font-weight:700;padding:3px 9px;margin-left:4px}
.bloque-dt-ejemplos{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.bloque-dt-ejemplos li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2);line-height:1.4;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 11px}
.bloque-dt-ejemplos li>span:not(.dot-status):not(.badge-dt-pendiente){flex:1}
.dot-status{width:7px;min-width:7px;height:7px;min-height:7px;border-radius:50%;flex:0 0 7px;margin-top:5px;background:var(--nd)}
.dot-pagada{background:var(--ink-3)}
.dot-pendiente{background:var(--no)}
.badge-dt-pendiente{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--no-soft);color:var(--no-text);white-space:nowrap;flex-shrink:0}
.bloque-dt-expandir{background:none;border:none;color:var(--ink-2);font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0 6px;display:block;text-decoration:underline;text-decoration-color:var(--line-2)}
.bloque-dt-expandir:hover{color:var(--ink)}
.bloque-dt-fuente{font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.bloque-dt-fuente a{color:var(--ink-3);text-decoration:underline}
.dt-item-sub{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.dt-rut-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dt-rut-label{font-size:11px;color:var(--ink-3)}
.dt-rut-val{font-size:11px;font-family:ui-monospace,monospace;color:var(--ink);font-weight:600;letter-spacing:.03em}
.dt-rut-btn{background:none;border:none;color:var(--ink-2);cursor:pointer;font-size:11px;padding:0;text-decoration:underline}
.dt-rut-form{display:none;align-items:center;gap:6px;width:100%;margin-top:6px;flex-wrap:wrap}
.dt-rut-input{border:1px solid var(--line-2);border-radius:6px;padding:5px 9px;font-size:12px;flex:1;min-width:140px;max-width:220px;background:var(--card);color:var(--ink);outline:none}
.dt-rut-input:focus{border-color:var(--ink)}
.dt-rut-submit{background:var(--vest);color:var(--ink);border:none;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;font-weight:700}
.dt-rut-submit:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}
.dt-rut-gracias{font-size:11px;color:var(--ink-3);font-style:italic}
.bloque-dt-clean{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;display:flex;align-items:flex-start;gap:12px}
.bloque-dt-clean-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px}
.bloque-dt-clean-sub{font-size:12px;color:var(--ink-2);line-height:1.55}
.bloque-dt-clean-dot{width:8px;height:8px;border-radius:50%;background:var(--nd);flex:none;margin-top:5px}

/* ---------- 19. MODAL DENUNCIA (única excepción con sombra: flota sobre
   un fondo oscurecido, no comparte el problema del grid denso de cards) ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:oklch(0.26 0.055 262 / .45);z-index:1000;align-items:center;justify-content:center;padding:24px}
.modal-overlay.active{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;width:100%;max-width:520px;box-shadow:0 20px 50px oklch(0.26 0.055 262 / .18);max-height:calc(100vh - 40px);overflow-y:auto}
.modal h3{font-size:17px;font-weight:800;margin-bottom:4px}
.modal-empresa{font-size:13px;color:var(--ink-2);margin-bottom:18px}
.modal label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;margin-top:16px}
.modal label:first-of-type{margin-top:0}
.modal label small{font-weight:500;color:var(--ink-3);font-size:12px}
.modal label .req{color:var(--no-text)}
.modal textarea,.modal input[type=email]{width:100%;border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:10px 12px;font-size:14px;color:var(--ink);background:var(--card);resize:none;outline:none}
.modal textarea:focus,.modal input[type=email]:focus{border-color:var(--ink)}
.modal textarea{height:84px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.btn-cancelar{background:none;border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:9px 16px;font-size:14px;cursor:pointer;color:var(--ink-2)}
.btn-cancelar:hover{border-color:var(--ink);color:var(--ink)}
.btn-enviar{background:var(--vest);border:none;border-radius:var(--r-s);padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;color:var(--ink)}
.btn-enviar:hover{background:var(--vest-hover)}
.btn-enviar:disabled{opacity:.5;cursor:default}
.modal-msg{font-size:13px;margin-top:12px;text-align:center}
.modal-msg.ok{color:var(--si-text)}
.modal-msg.err{color:var(--no-text)}

.step-track{display:flex;gap:6px;margin-bottom:16px}
.step-track span{flex:1;height:3px;border-radius:3px;background:var(--line)}
.step-track span.done{background:var(--ink-3)}
.step-track span.current{background:var(--ink)}
.modal .stance{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.option-list{display:flex;flex-direction:column;gap:8px}
.option-card{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:13px 15px;cursor:pointer;width:100%}
.option-card:hover{border-color:var(--ink)}
.option-card .txt strong{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.option-card .txt span{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.option-card.strong-action{border-color:color-mix(in srgb,var(--no) 30%,var(--line-2))}
.option-card.strong-action:hover{border-color:var(--no)}
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-option{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:11px 14px;cursor:pointer;font-size:13.5px}
.cat-option:hover{border-color:var(--ink)}
.cat-option input{accent-color:var(--ink);flex-shrink:0}
.cat-option.soft{border-style:dashed}
.field-hint{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.email-notice{background:var(--dep-soft);border:1px solid color-mix(in srgb,var(--dep) 30%,var(--line));border-radius:var(--r-s);padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:16px}
.repeat-notice{background:var(--no-soft);border:1px solid color-mix(in srgb,var(--no) 25%,var(--line));border-radius:var(--r-s);padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.repeat-notice strong{color:var(--no-text)}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:900px){
/* display:grid en una sola columna seguía dejando que el h1 (texto largo, sin
   wrap garantizado) empujara el ancho intrínseco del grid item más allá del
   viewport en Safari real (min-width:0 + overflow:hidden no bastaron -- ver
   nota de arquitectura). Sacar el grid del camino en mobile evita esa clase
   de bug por completo: bloques normales nunca se agrandan por su contenido. */
.hero-grid{display:block}
.hero-grid>div+div{margin-top:32px}
.dtx-in{grid-template-columns:minmax(0,1fr);gap:22px}
.exps{grid-template-columns:1fr}
.promise{grid-template-columns:1fr;gap:24px}
.hd-link{display:none}
/* Ficha: el aside se apila arriba y deja de ser sticky */
.eb-layout-wrap{grid-template-columns:1fr;gap:16px;padding-top:12px}
.eb-aside{position:static}
.m-bar{display:flex;flex-direction:column;align-items:center;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s ease}
.m-bar.show{transform:none}
.m-bar .btn-vest{width:100%;max-width:480px;justify-content:center;height:48px;font-size:16px}
.m-bar small{font-size:12px;color:var(--on-ink-3)}
body:has(.m-bar){padding-bottom:92px}
.resumen-grid,.highlights{grid-template-columns:1fr}
.cta-compartir-inner,.cta-trabajaste{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.cta-trabajaste-texto,.cta-compartir-texto{flex:none}
}

/* Celular (diseñado a 375px) */
@media (max-width:600px){
.wrap{padding:0 16px}
.hd{height:56px}
.logo{font-size:17px}
.hd .btn-vest{padding:9px 12px;font-size:13px}
.hd .btn-vest .l{display:none}

/* Hero: texto + botón primero; el feed pasa a carrusel horizontal (asoma la siguiente) */
.hero{padding:28px 0 0}
.hero-grid>div+div{margin-top:26px}
/* text-wrap:balance + el <br> forzado del h1 no hacen wrap bien en anchos muy angostos: se corta en vez de bajar de línea */
.hero h1{font-size:clamp(30px,9vw,40px);text-wrap:wrap;overflow-wrap:break-word}
.hero-sub{font-size:16px;margin-top:14px}
.hero-cta{margin-top:22px;gap:12px}
.hero-cta .btn-vest{width:100%;justify-content:center;height:52px}
.hero-promise{gap:4px 12px}
.h-feed{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px 24px;scrollbar-width:none}
.h-feed::-webkit-scrollbar{display:none}
.hf{flex:0 0 86%;scroll-snap-align:start}
.hf q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:4px}
.stat{flex-direction:column;gap:0;padding:12px 0 14px;font-size:13px}
.stat:nth-child(even){padding-left:16px;border-left:1px solid var(--on-ink-line)}
.stat:nth-child(n+3){border-top:1px solid var(--on-ink-line)}
.stat b{font-size:24px}

/* Franja ranking DT (home): rango+nombre+número en una fila por empresa */
.dtx-band{background:linear-gradient(var(--ink) 0 40px,var(--ground) 40px 100%);padding-top:4px}
.dtx-in{padding:20px 16px;gap:18px}
.dtx-h{font-size:23px}
.dtx-list{grid-template-columns:1fr}
.dtx-it{grid-template-columns:auto minmax(0,1fr) minmax(0,auto);grid-template-areas:"rk nm num";align-items:center;padding:12px 0}
.dtx-it+.dtx-it{border-left:0;border-top:1px solid var(--line)}
.dtx-it:first-child{padding-top:0}.dtx-it:last-child{padding-bottom:0}
.dtx-nm{font-size:15px}
.dtx-num{margin:0}.dtx-num b{font-size:clamp(20px,7vw,30px)}
.dtx-cta{align-items:stretch}.dtx-cta .btn-line{justify-content:center;height:48px}

/* Secciones + experiencias en carrusel (3 apiladas = demasiado alto) */
.sec{padding-top:36px}
.sec-head{margin-bottom:14px;gap:8px}
.sec-head h2{font-size:24px}
.exps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px 4px;gap:10px;scrollbar-width:none}
.exps::-webkit-scrollbar{display:none}
.exp{flex:0 0 86%;scroll-snap-align:start;padding:18px}
.exp q{font-size:16px}

/* Filtros: todo visible, sin "más filtros". Buscador · rubro+orden lado a lado · chips en una fila deslizable */
.filters{position:static;background:none;backdrop-filter:none;padding:4px 0 6px;margin-top:0}
.f-bar{gap:8px}
.f-bar+.f-bar{margin-top:8px}
.search{flex:1 1 100%}
.sel{flex:1 1 0;min-width:0;font-size:16px}
.chips{flex:0 0 calc(100% + 32px);flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px}
.count{margin-left:0;width:100%;font-size:13px}

/* Card: misma pieza; "N reseñas" sube bajo el nombre (card más baja). Mini tabla se queda. */
.grid{grid-template-columns:1fr;gap:10px}
.card{padding:14px;row-gap:12px;grid-template-areas:"logo name score" "logo voices score" "rec rec rec" "facts facts facts" "dt dt dt"}
.logo-sq,.sc{grid-row:span 2;align-self:start}
.nm{align-self:end}
.voices{margin-top:-10px;font-size:12.5px;align-self:start}
.card .rec{margin-top:-2px}
.fact{padding:6px 7px}
.fact-v{font-size:12px}

.more{padding:24px 0 4px}
.btn-more{width:100%}
.promise{padding:20px;margin-top:40px}
.promise h3{font-size:24px}
.promise-demo{grid-template-columns:1fr 1fr;gap:8px}
.pd{padding:12px}
.pd-note{display:none}
.btn-flotante{bottom:16px;right:16px}

/* Ficha */
.eb-head{padding:16px;gap:12px}
.empresa-logo{width:48px;height:48px}
.empresa-nombre{font-size:20px}
.eb-head .btn-vest{height:50px;font-size:16px}
.resumen{padding:18px}
.bloque-dt{padding:16px}

/* Modal denuncia = hoja desde abajo */
.modal-overlay{align-items:flex-end;padding:0}
.modal{max-width:none;border-radius:var(--r) var(--r) 0 0;padding:22px 16px calc(16px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto}
.modal textarea,.modal input[type=email]{font-size:16px}
.modal-actions{flex-direction:column-reverse;gap:8px}
.modal-actions button{width:100%;height:48px;font-size:16px}
.option-card,.cat-option{padding:14px}
footer{margin-top:48px}
.ft{padding:24px 16px}
}

/* ---------- 21. PÁGINAS INTERIORES: /ranking-multas/ · /buscar-multas/ · /experiencias/ ---------- */
.hd-link.on{opacity:1;box-shadow:inset 0 -2px 0 var(--vest);border-radius:var(--r-s) var(--r-s) 0 0}
.m-only{display:none}

/* Hero de página = versión corta del hero de la home (mismo fondo, sin feed) */
.page-hero{background:var(--ink);color:#fff;padding:44px 0}
/* .aside-back es --ink-2 por defecto (pensado para fondo blanco); acá el fondo es
   oscuro, así que necesita su propio color como el resto del texto secundario del hero */
.page-hero .aside-back{display:inline-block;margin-bottom:14px;color:var(--on-ink-3)}
.page-hero .aside-back:hover{color:#fff}
.page-hero .kicker{display:flex;align-items:center;gap:8px;color:var(--on-ink-2)}
.page-hero .kicker::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--no);flex:none}
.page-hero .kicker.vest::before{border-radius:50%;background:var(--vest)}
.page-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1;font-weight:800;font-stretch:var(--display);letter-spacing:-.025em;margin-top:12px;max-width:20ch;text-wrap:balance}
.page-hero .sub{margin-top:14px;font-size:18px;line-height:1.5;color:var(--on-ink-2);max-width:58ch;text-wrap:pretty}
.page-hero .meta{margin-top:10px;font-size:13px;color:var(--on-ink-3)}
.search-row{display:flex;gap:10px}
.search-row .search{flex:1;min-width:0}
.page-hero .search-row{margin-top:26px;max-width:720px}
.page-hero .search{height:56px;border-color:var(--card)}
.page-hero .search:focus-within{box-shadow:0 0 0 3px var(--vest)}
.page-hero .search input{font-size:17px}
.page-hero .search-row .btn-vest{height:56px;flex:none}

/* Tabla de ranking DT (100 filas, ordenable). Top 3 usa .dtx-rk (cuadrado rojo, igual que la franja de la home) */
.rk-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:clip}
.rk-table{width:100%;border-collapse:collapse;font-size:14px}
.rk-table th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 16px;border-bottom:1.5px solid var(--line-2);white-space:nowrap}
.rk-table th[aria-sort]{color:var(--ink)}
.rk-table td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:middle}
.rk-table tbody tr:first-child td{border-top:0}
.rk-table tbody tr.rk-clickable{cursor:pointer}
.rk-table tbody tr.rk-clickable:hover td{background:oklch(0.985 0.004 250)}
.rk-table .n{text-align:right}
.rk-sort{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rk-sort:hover{color:var(--ink)}
.rk-sort::after{content:"↕";opacity:.45;font-size:12px}
th[aria-sort=descending] .rk-sort::after{content:"↓";opacity:1}
th[aria-sort=ascending] .rk-sort::after{content:"↑";opacity:1}
.c-pos{width:52px}
.rk-n{display:inline-block;min-width:26px;text-align:center;font-size:13px;font-weight:800;font-stretch:var(--wide);color:var(--ink-3)}
.c-emp b{display:block;font-size:15.5px;line-height:1.25;font-weight:700;font-stretch:var(--narrow)}
.c-emp a{text-decoration:none}.c-emp a:hover b{text-decoration:underline;text-underline-offset:3px}
.c-emp>span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.rk-link{font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--vest);text-decoration-thickness:2px}
.c-mot{font-size:13px;color:var(--ink-2);max-width:230px}
.rk-tot{font-size:22px;font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em;line-height:1}
.rk-pend{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--no-text);white-space:nowrap}
.rk-pend::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--no)}
.rk-pend.zero{color:var(--ink-3);font-weight:500}.rk-pend.zero::before{background:var(--ink-3)}
.c-amt{font-weight:600;white-space:nowrap}
.rk-table em{display:none;font-style:normal;font-weight:500;font-size:12px;color:var(--ink-2)}
.rk-note{font-size:12.5px;color:var(--ink-3);margin-top:10px;text-wrap:pretty}

/* Datos nacionales: 1 tarjeta grande (tipos) + 3 chicas apiladas */
.kpis{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start}
.kpi-side{display:grid;gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.kpi h3{font-size:17px;line-height:1.25;font-weight:750;text-wrap:balance}
.kpi-sub{font-size:13px;color:var(--ink-2);margin-top:2px}
.kpi-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:baseline;margin-top:16px}
.kpi-lead b{grid-row:span 2;font-size:44px;line-height:.95;font-weight:850;font-stretch:125%;letter-spacing:-.035em}
.kpi-lead b.no{color:var(--no-text)}
.kpi-lead strong{font-size:15px;font-weight:700}
.kpi-lead p{font-size:13.5px;color:var(--ink-2);text-wrap:pretty}
/* barras de reparto: aquí SÍ corresponden (parte de un total, no "progreso") */
.kbars{list-style:none;margin-top:16px}
.kb{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.kb-n{font-size:14px;font-weight:650}
.kb-p{font-size:14px;font-weight:750;font-stretch:var(--wide)}
.kb-d{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);margin-top:1px;text-wrap:pretty}
.kb-bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--ground);margin-top:8px;overflow:hidden}
.kb-bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.kcols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:150px;margin-top:18px}
.kc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.kc b{font-size:11.5px;font-weight:700;white-space:nowrap}
.kc i{display:block;width:100%;max-width:40px;background:var(--ink);border-radius:4px 4px 0 0}
.kc span{font-size:12px;color:var(--ink-2);font-weight:600}
.kc.part i{background:var(--ink-3);opacity:.5}
.ksplit{display:flex;gap:3px;height:14px;margin-top:16px}
.ksplit i{display:block;height:100%;border-radius:3px;background:var(--c)}
.klegend{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.klegend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center}
.klegend li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c)}
.klegend b{font-weight:750}
.kpi-foot{font-size:12.5px;color:var(--ink-3);margin-top:12px}

/* Estado vacío del buscador */
.empty{background:var(--card);border:1.5px dashed var(--line-2);border-radius:var(--r);padding:32px 24px;text-align:center;color:var(--ink-2);text-wrap:pretty}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* Experiencias: muro en columnas (los relatos tienen largos muy distintos) */
.exps.wall{display:block;columns:3 300px;column-gap:16px}
.exps.wall .exp{break-inside:avoid;margin-bottom:16px}
.who small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.who a{color:var(--ink);font-weight:600}

/* Franja de datos nacionales bajo el hero del ranking (mismo patrón que la franja DT B de la home) */
.kstrip-wrap{background:linear-gradient(var(--ink) 0 44px,var(--ground) 44px 100%)}
.kstrip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kstrip::before{content:"";display:block;height:6px;background:var(--no)}
.kstrip ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ks .kicker{margin-bottom:-2px}
.ks{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px;min-width:0}
.ks+.ks{border-left:1px solid var(--line)}
.ks b{font-size:44px;line-height:.95;font-weight:850;font-stretch:125%;letter-spacing:-.035em}
.ks b.no{color:var(--no-text)}
.ks p{font-size:14.5px;line-height:1.35;font-weight:600;text-wrap:pretty}
.ks a{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:auto;text-decoration:none}
.ks a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Cuadrícula 10×10 = "de cada 100 multas" (para partes de un total; reemplaza barras partidas y donas) */
.kwaf-row{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px;align-items:center;margin-top:16px}
.kwaf{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.kwaf i{display:block;aspect-ratio:1;border-radius:2px;background:var(--off,var(--line-2))}
.kwaf i.on{background:var(--c)}
.kwaf-row .klegend{margin-top:0}
.kwaf-row .klegend li{grid-template-columns:10px minmax(0,1fr);row-gap:0}
.kwaf-row .klegend b{grid-column:2;font-size:20px;font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em}

/* Link "Ver detalle ↓" de la franja → baja suave a su gráfico y lo marca un momento */
html{scroll-behavior:smooth}
.kpi{scroll-margin-top:24px}
.kpi:target{animation:kpi-hit 1.6s ease-out}
@keyframes kpi-hit{0%,40%{border-color:var(--no);box-shadow:0 0 0 3px var(--no-soft)}100%{border-color:var(--line);box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.kpi:target{animation:none;border-color:var(--no)}}

@media (max-width:900px){.kpis{grid-template-columns:1fr}}
/* .ks en mobile era una grilla de 2 columnas (número a la derecha, texto a la
   izquierda) -- el número (34px, texto sin oportunidad de wrap) no se achicaba
   con el ancho de columna angosto y se desbordaba fuera de la card (mismo
   patrón de bug de hoy con el hero y el panel DT). Se saca el grid: stack
   simple en columna, como ya era la versión desktop -- un número que no cabe
   nunca puede desbordarse si no está compitiendo por espacio con nada al lado. */
@media (max-width:800px){.kstrip ul{grid-template-columns:1fr}.ks+.ks{border-left:0;border-top:1px solid var(--line)}.ks{padding:16px}.ks b{font-size:32px}.kstrip-wrap{background:linear-gradient(var(--ink) 0 28px,var(--ground) 28px 100%)}}
@media (max-width:700px){
.m-only{display:block}
.rk-table thead{display:none}
.rk-table,.rk-table tbody{display:block}
.rk-table tbody tr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"pos emp tot" "pos pend amt" "pos mot mot";column-gap:10px;row-gap:5px;padding:13px 16px;border-top:1px solid var(--line)}
.rk-table tbody tr:first-child{border-top:0}
.rk-table td,.rk-table tbody tr:hover td{padding:0;border:0;background:none}
.c-pos{grid-area:pos;width:auto;padding-top:1px!important}
.c-emp{grid-area:emp;min-width:0}.c-tot{grid-area:tot}.c-amt{grid-area:amt;font-size:13px}
.rk-table .c-pend{grid-area:pend;text-align:left;font-size:13px}
.c-mot{grid-area:mot;max-width:none;font-size:12.5px}
.rk-table em{display:inline}
.rk-tot{font-size:20px}
.rk-table.simple tbody tr{grid-template-areas:"pos emp tot" "pos emp pend"}
.rk-table.simple .c-pend{text-align:right}
}
@media (max-width:600px){
.page-hero{padding:28px 0 30px}
.page-hero .sub{font-size:16px}
.page-hero .search{height:52px}
.page-hero .search-row{margin-top:20px}
.page-hero .search-row .btn-vest{height:52px}
.page-hero .search input{font-size:16px}
.rk-wrap{margin:0 -16px;border-radius:0;border-left:0;border-right:0}
.kpi{padding:18px 16px}
.kpi-lead b{font-size:36px}
.exps.wall{display:block;overflow:visible;margin:0;padding:0;columns:1}
.exps.wall .exp{flex:none;margin-bottom:10px}
}