/* ══════════════════════════════════════════════
   THEME-BLACK.CSS — Piel oscura "Black"
   SOHO.lat Design System
   ══════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────── */
:root{
  /* Colores */
  --bg:#060606;
  --accent:#9e78f7;
  --accent-dim:#473670;
  --accent-rgb:158,120,247;
  --ink:#ffffff;
  --text:#e5e5e5;
  --muted:#8a8a8a;
  --line:#7a7a7a;

  --color-void:#000000;
  --color-carbon:#060606;
  --color-onyx:#1f1f1f;
  --color-graphite:#7a7a7a;
  --color-iron:#313131;
  --color-slate:#3d3d3d;
  --color-fog:#525252;
  /* 2026-08-31: --color-ash y --color-smoke eran textos gris medio
     (#7a7a7a/#8a8a8a) — se leían bien sobre el fondo base casi negro
     (--bg/--color-carbon, contraste 4.7/5.9:1) pero fallan el mínimo
     WCAG AA (4.5:1) sobre los fondos de card más claros (--color-onyx
     3.8/4.8:1, --color-iron 3.0/3.8:1) donde también se usan (labels,
     fechas, meta en mono uppercase). A pedido de Alejandro pasan a
     blanco puro: ambos solo se usan como color de texto en este
     archivo (nunca fondo/borde — eso es --color-graphite, que
     coincide en valor con el --color-ash viejo pero es un token
     distinto y no se toca), así que el cambio no tiene efectos
     colaterales. --color-pearl/--color-bone (texto de párrafo) se
     dejan igual: ya tienen contraste alto (6.3–16:1) sobre esos mismos
     fondos y mantienen la jerarquía título/párrafo/label. */
  --color-ash:#ffffff;
  --color-smoke:#ffffff;
  --color-pearl:#c5c5c5;
  --color-bone:#e5e5e5;
  --color-chalk:#ffffff;
  --color-signal:#9e78f7;
  --color-signal-dim:#473670;
  /* 2026-09-02: enlaces "sueltos" (sin clase propia, p.ej. dentro de
     .dr-note) caían al azul por defecto del navegador, que no forma
     parte de esta paleta y no tiene contraste suficiente sobre el fondo
     casi negro. --color-link es ese mismo tono de azul pero mucho más
     claro/blanco, a pedido de Alejandro. */
  --color-link:#bcd4ff;

  /* Sistema de hover estándar (ver nota en base.css). Este skin nunca
     tuvo un "acento claro de hover" tokenizado — usaba #d4ff5a suelto
     en 3 lugares (.btn-g:hover, .btn-fill:hover, .fsub:hover). Se
     nombra acá como --g2 para que quede a la par de A-Lima/B-Teal.
     --g3 es un valor nuevo: antes eran rgba(197,255,74) con 3 alphas
     distintas sin relación (.05, .14) según el lugar; se deja un único
     valor intermedio. Las reglas de :hover que ya se tocaron (por pedido
     puntual, o de forma proactiva junto con esas) consumen estos
     tokens; el resto queda pendiente de ir cerrando — ver el conteo por
     página en estandar-hover.md del proyecto. */
  --g2:#a987f8;
  --g3:rgba(158,120,247,.10);
  --hover-fill:var(--g2);
  --hover-tint:var(--color-iron);
  --hover-ring:var(--color-signal);
  --hover-text:var(--color-signal);
  --hover-line:var(--color-signal);
  /* Familia Superficie: bloques informativos NO clickeables (.case-detail,
     .vc-stack). En este skin coincide en valor con --hover-tint, pero es
     un token aparte a propósito (ver nota en base.css). */
  --hover-surface:var(--color-iron);

  /* Fuentes */
  --font-display:'PT Serif',serif;
  --font-body:'Inter Tight',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Geometría */
  --nav-height:52px; /* antes 56px, no coincidía con #nav{height:52px} real —
    dejaba 4px de hueco entre el nav y el panel del menú hamburguesa */
  --radius:4px;
  --r-button:4px;
  --cont:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-signal:rgba(158,120,247,.45) 0 0 8px 0;
}

/* ── BODY ──────────────────────────────────────── */
body{
  background:var(--color-carbon);
  color:var(--color-bone);
  font-family:var(--font-body);
  font-weight:400}
body::before,body::after{content:none}

/* Fallback de color para enlaces sin clase propia (ver nota de
   --color-link en :root). Especificidad baja a propósito: cualquier
   regla más específica (.btn-g, .cta-social-ic, nav a, etc.) sigue
   ganando normalmente. */
a{color:var(--color-link)}

em{font-style:italic;font-weight:300;color:var(--color-signal)}

/* ── NAV ───────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:52px;display:flex;align-items:center;
  justify-content:space-between;padding:0 48px;
  background:var(--color-void);
  border-bottom:1px solid var(--color-graphite)}
.nav-in{
  max-width:var(--cont);margin:0 auto;padding:0 48px;width:100%;
  display:flex;align-items:center;justify-content:space-between}
.nav-links,.nlinks{display:flex;align-items:center;gap:20px}
.nav-links a,.nlinks a{
  position:relative;color:var(--color-chalk);text-decoration:none;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:4px 0}
.nav-links a:hover,.nav-links a.act,.nlinks a:hover,.nlinks a.act{color:var(--color-signal)}
.nlinks a::after{content:none}
.brand-lk,.brand{cursor:pointer;display:flex;align-items:center;text-decoration:none}

/* ── TIPOGRAFÍA ────────────────────────────────── */
.hero h1{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(44px,7vw,89px);line-height:.94;letter-spacing:-.035em;max-width:900px}
.h1sm{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(36px,5.5vw,64px);line-height:1;letter-spacing:-.03em;max-width:820px}
.hero p{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-bone);max-width:520px;margin:24px 0 32px}
.lead{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--color-bone);max-width:560px;margin-top:20px}
.section-heading{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(30px,4vw,49px);line-height:1.05;letter-spacing:-.02em;max-width:760px;margin-bottom:20px}
.section-body{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-bone);max-width:600px}
.eyebrow{
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--color-ash);margin-bottom:20px}
.eyebrow::before{content:none}
.eyebrow::after{content:none}

/* ── SECCIONES ─────────────────────────────────── */
.sec{padding:100px 0}
.sec+.sec{border-top:1px solid var(--color-graphite)}
.sec-sm{padding:64px 0}
.divider{height:6px;background:var(--color-signal)}

/* ── BOTONES ───────────────────────────────────── */
.btn-outline{
  background:transparent;border:1px solid var(--color-signal);color:var(--color-signal);
  padding:9px 18px;border-radius:var(--r-button);
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--shadow-signal);text-decoration:none;white-space:nowrap;cursor:pointer}
/* 2026-08-31 (ronda 2) — a pedido explícito: el difuminado (box-shadow:
   var(--shadow-signal), el halo morado difuso) estaba siempre visible en
   reposo, así que al hacer hover no se notaba nada "aparecer". Pasa a
   vivir solo en :hover — en reposo el botón queda plano, y al pasar el
   mouse aparece tanto el difuminado como el aclarado de fondo
   (var(--hover-fill)). Aplica a los 4 CTA principales de fill de color
   de esta skin: .btn-fill, .nbtn, .btn-g, .fsub.
   2026-09-02 — a pedido explícito: estos mismos 4 CTA pasan de letras
   negras a letras blancas y en negrita (antes, el 2026-08-31, se habían
   dejado con letras negras a pedido explícito de ese momento — esta
   nueva instrucción lo reemplaza). */
.btn-fill{
  background:var(--color-signal);color:#fff;
  padding:13px 24px;border-radius:var(--r-button);
  font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;display:inline-block;border:none;cursor:pointer;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.btn-fill:hover{background:var(--hover-fill);color:#fff;box-shadow:var(--shadow-signal)}
.btn-line{
  background:transparent;border:1px solid var(--color-fog);color:var(--color-chalk);
  padding:13px 24px;border-radius:var(--r-button);
  font-family:var(--font-body);font-size:14px;font-weight:500;
  text-decoration:none;display:inline-block;cursor:pointer}
.btn-line:hover{border-color:var(--color-signal);color:var(--color-signal)}
/* 2026-08-31 — a pedido explícito: .nbtn (CTA "Contáctanos" del navbar) era el
   único CTA de esta skin en familia Relleno que seguía con look de outline
   (fondo transparente, borde y texto morado) y sin text-decoration:none, por
   lo que el navegador mostraba el subrayado por defecto del <a>. Pasa a
   relleno morado — mismo tratamiento que .btn-fill/.btn-g/.fsub, los otros
   CTA principales de fill de color en C-Carbón. El difuminado (box-shadow)
   se movió a :hover junto con el resto de la familia — ver nota en
   .btn-fill más arriba.
   2026-09-02 — a pedido explícito: letras blancas y en negrita (antes,
   letras negras — ver nota en .btn-fill). */
.nbtn{
  background:var(--color-signal);border:1px solid var(--color-signal);color:#fff;
  padding:9px 18px;border-radius:var(--r-button);
  font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;
  text-decoration:none;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.nbtn:hover{background:var(--hover-fill);color:#fff;box-shadow:var(--shadow-signal)}

/* ── STATS ─────────────────────────────────────── */
.stat{padding:32px 24px;border-right:1px solid var(--color-graphite);text-align:left}
.stat:last-child{border-right:none}
.stat-n,.stat .n{font-family:var(--font-display);font-weight:300;font-size:40px;color:var(--color-chalk)}
.stat-l,.stat .l{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash)}

/* ── CARDS ─────────────────────────────────────── */
.card{background:var(--color-onyx);border:1px solid var(--color-graphite)}
.card .material-symbols-outlined{font-size:26px;color:var(--color-signal);margin-bottom:18px;display:block}
.card-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-smoke)}
.card h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--color-chalk);margin:10px 0}
.card h3.sm{font-size:19px}
.card p{font-size:13px;color:var(--color-pearl);line-height:1.5}
.card .tags{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-signal);margin-top:14px}
.card.clickable:hover{background:var(--color-iron)}
.card .go-arr{color:var(--color-signal)}

/* ── GRIDS (gap con borde visual) ──────────────── */
.grid2,.grid3,.grid4{gap:1px;background:var(--color-graphite)}

/* ── CHIPS ─────────────────────────────────────── */
.chip{
  font-family:var(--font-body);border:1px solid var(--color-iron);
  color:var(--color-bone);background:var(--color-onyx)}
.chip:hover{border-color:var(--color-signal);color:var(--color-signal)}
.tag-pill{border:1px solid var(--color-signal);color:var(--color-signal)}

/* ── RESULTS ───────────────────────────────────── */
.results-blk .n{font-family:var(--font-display);font-weight:300;font-size:30px;color:var(--color-signal)}
.results-blk .l{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-smoke)}

/* ── ROW ITEMS ─────────────────────────────────── */
.row-list{border-top:1px solid var(--color-graphite)}
.row-item{border-bottom:1px solid var(--color-graphite);color:var(--color-chalk)}
.row-item:hover{color:var(--color-signal)}
.row-item .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--color-ash);margin-right:18px;text-transform:uppercase}
.row-item h3{font-family:var(--font-display);font-weight:300;font-size:22px;display:inline;color:inherit}
.row-item .arr{color:var(--color-signal)}

/* ── CASE PANELS ───────────────────────────────── */
.case-panel{border-bottom:1px solid var(--color-graphite)}
.case-panel b{font-family:var(--font-display);font-weight:300;font-size:19px;color:var(--color-chalk);display:inline-block;margin-right:10px}
.case-panel .loc{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);border-left:1px solid var(--color-fog);padding-left:10px}
.cd .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash)}
.cd .v{color:var(--color-bone);line-height:1.5}
.cd .v.res{color:var(--color-chalk)}

/* ── SERVICE QUOTE & META ──────────────────────── */
.svc-quote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:19px;color:var(--color-signal);margin:16px 0;max-width:680px}
.svc-meta{border-top:1px solid var(--color-graphite)}
.svc-meta div{font-size:13px;color:var(--color-bone)}
.svc-meta span{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash);margin-bottom:6px}

/* ── INSIGHTS FEATURED ─────────────────────────── */
.ins-feat{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px;background:var(--color-onyx);border:1px solid var(--color-graphite)}
.ins-feat .stamp{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal)}
.ins-feat h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,34px);color:var(--color-chalk);margin:12px 0}
.ins-feat .date{font-family:var(--font-mono);font-size:12px;color:var(--color-smoke);margin-bottom:10px}

/* ── ABOUT / VALUES ────────────────────────────── */
/* .vcard ("Tres leyes inquebrantables") NO es clickeable — familia
   Superficie (--hover-surface), nunca Tinte/Tarjeta. */
.values-grid{gap:1px;background:var(--color-graphite)}
.vcard{position:relative;background:var(--color-onyx);padding:36px;transition:background .25s var(--ease)}
.vcard .vn{font-family:var(--font-mono);font-size:12px;color:var(--color-smoke);margin-bottom:14px}
.vcard h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--color-chalk);margin-bottom:10px}
.vcard p{font-size:13px;color:var(--color-pearl);line-height:1.5}

/* ── FAQ ───────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--color-graphite)}
.faq-q{font-family:var(--font-display);font-weight:300;font-size:18px;color:var(--color-chalk)}
.faq-ico{font-size:26px;color:var(--color-chalk);font-variation-settings:'FILL' 0,'wght' 650,'GRAD' 0,'opsz' 24;-webkit-text-stroke:1px currentColor;text-stroke:1px currentColor;transition:transform .3s var(--ease),color .3s var(--ease)}
.faq-item.open .faq-ico{transform:rotate(45deg);color:var(--color-signal);-webkit-text-stroke:0;text-stroke:0;text-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink),1px 1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),-1px -1px 0 var(--ink)}
.faq-a{font-size:13px;color:var(--color-ash);line-height:1.6}

/* ── CONTACT / FORM ────────────────────────────── */
.cdet{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.cdet .material-symbols-outlined{color:var(--color-signal);font-size:20px}
.cdet-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ash)}
.cdet-v{font-size:14px;color:var(--color-chalk);margin-top:4px}
.field label{font-family:var(--font-mono);color:var(--color-smoke)}
.field input,.field select,.field textarea{
  background:var(--color-carbon);border:1px solid var(--color-graphite);border-radius:var(--r-button);
  color:var(--color-chalk);font-family:var(--font-body)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-signal);box-shadow:var(--shadow-signal)}
.form-panel{background:var(--color-onyx);border:1px solid var(--color-graphite)}

/* ── BACK LINK ─────────────────────────────────── */
.back-link{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash)}
.back-link:hover{color:var(--color-signal)}

/* ── FOOTER ────────────────────────────────────── */
footer{border-top:1px solid var(--color-graphite);background:var(--color-void)}
.f-col h5,.fcol h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);margin-bottom:12px}
.f-col a,.fcol a{color:var(--color-bone);font-size:13px}
.f-col a:hover,.fcol a:hover{color:var(--hover-text)}
.f-iso{border-top:1px solid var(--color-graphite);padding:28px 0;margin-bottom:24px}
.f-iso-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--color-ash);text-align:center;margin-bottom:20px}
.f-iso-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.f-iso-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.f-iso-top{display:flex;align-items:center;gap:8px}
.f-iso-top .material-symbols-outlined{font-size:18px;color:var(--color-chalk)}
.f-iso-code{font-family:var(--font-mono);font-size:12px;font-weight:500;white-space:nowrap;color:var(--color-chalk)}
.f-iso-desc{font-size:12px;color:var(--color-ash);white-space:nowrap}
@media(max-width:640px){.f-iso-grid{grid-template-columns:1fr;gap:18px}.f-iso-desc,.f-iso-code{white-space:normal}}
.f-iso-lg{border-top:none;padding-top:0}
.f-iso-lg .f-iso-grid{border-bottom:1px solid var(--color-graphite);padding-bottom:32px}
.f-iso-lg .f-iso-label{font-size:12px;margin-bottom:26px}
.f-iso-lg .f-iso-top{gap:10px}
.f-iso-lg .f-iso-top .material-symbols-outlined{font-size:26px}
.f-iso-lg .f-iso-code{font-family:var(--font-display);font-weight:300;font-size:18px}
.f-iso-lg .f-iso-desc{font-family:var(--font-body);font-size:13px}
.fbot{border-top:1px solid var(--color-graphite);color:var(--color-ash);font-family:var(--font-mono)}

/* ── VOICE ENTRY ───────────────────────────────── */
.voice-wrap{text-align:center;padding:40px}
.voice-word{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,6vw,64px);color:var(--color-chalk);letter-spacing:-.02em}
.voice-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ash);margin-top:14px}
.vorb{
  border:1px solid var(--color-signal);box-shadow:var(--shadow-signal);
  background:transparent}
.vorb-zone .vorb,.voice-wrap .vorb{margin:48px auto 0}
.vorb .material-symbols-outlined{color:var(--color-signal);font-size:24px}
.vorb .bar{background:var(--color-signal)}
.vorb.listening{background:var(--color-signal)}
.vorb.listening .bar{background:#000;animation-duration:.5s}
.vorb.speaking .bar{animation-duration:.45s}
.vorb.thinking .bar{animation-duration:1.5s}
.voice-enter{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ash);margin-top:16px}
.vorb-status{color:var(--color-bone)}
.vorb-hint{color:var(--color-ash)}
.vorb-label{font-family:var(--font-mono);color:var(--color-ash)}

/* ── AGENTE WIDGET (colores) ───────────────────── */
.ag-dot{background:var(--color-signal);border-color:#000;box-shadow:var(--shadow-signal)}
.ag-tag{font-family:var(--font-mono);background:var(--color-signal);color:#000}
.ag-ripple{border-color:var(--color-signal)}
.agent-target{outline-color:var(--color-signal)!important}
#aCap{background:#000;color:var(--color-chalk);border:1px solid var(--color-graphite);font-family:var(--font-body)}
#aCap b{color:var(--color-signal);font-weight:600}
#aOrb{background:var(--color-signal);border:none;box-shadow:var(--shadow-signal)}
.vorb-ring{border-color:var(--color-signal-dim)}
.aorb-label{font-family:var(--font-mono);color:var(--color-ash)}
.aorb-wrap .achip,.aorb-wrap .chip{
  font-family:var(--font-mono);font-size:12px;color:var(--color-bone);
  background:var(--color-onyx);border:1px solid var(--color-graphite);border-radius:var(--r-button)}
.aorb-wrap .achip:hover,.aorb-wrap .chip:hover{background:var(--color-signal);color:#000}

/* ── SELECTOR DE TEMPLATE ──────────────────────── */
/* #tplBtn repite el mismo :hover que .ds-gadget (misma familia Relleno,
   mismo token --hover-fill) — antes tenía var(--color-onyx) propio, el
   mismo bug ya corregido en A-Lima/B-Teal. No basta con borrar y
   "heredar" de la clase: #tplBtn{background:...} es una regla de ID sin
   :hover que le gana por especificidad a .ds-gadget:hover aunque el
   mouse esté encima, así que hace falta repetirlo explícito acá. */
#tplBtn{background:#000;color:var(--color-signal)}
#tplBtn:hover{background:var(--hover-fill);color:#000}
#tplMenu{background:var(--color-onyx);border:1px solid var(--color-graphite);box-shadow:0 12px 28px rgba(0,0,0,.55)}
#tplMenu a{color:var(--color-chalk)}
#tplMenu a:hover{background:var(--hover-fill);color:#000}
#tplMenu a.cur{color:var(--color-signal)}
#tplMenu .tplhdr{color:var(--color-ash)}

/* ── GADGET DESIGN.SYS ─────────────────────────── */
.ds-gadget{background:#000;color:var(--color-signal)}
.ds-gadget:hover{background:var(--hover-fill);color:#000}
.ds-gadget::after{background:#000;color:var(--color-signal)}

/* ── ELEMENTOS PIEL-ESPECÍFICOS ────────────────── */
.grain{display:none}
#CUR{display:none}

/* Voice heros: solo black visible */
.voice-hero--black{display:block}
.voice-hero--corporativa{display:none}
.voice-hero--typocolor{display:none}

/* ── LINKS ─────────────────────────────────────── */
a:hover{color:var(--color-signal)}

/* ── RESPONSIVE (tema) ─────────────────────────── */
@media(max-width:768px){
  #nav,.wrap,.container{padding-left:24px;padding-right:24px}
}

/* ── NAV MÓVIL — hamburguesa + panel ──
   Antes .nlinks se ocultaba sin más (display:none) bajo 768px, dejando
   el nav sin ninguna forma de navegar en móvil. Reemplazado por el panel
   de hamburguesa compartido (ver base.css §9c) — acá solo los colores. */
.nav-burger{color:var(--color-chalk);-webkit-tap-highlight-color:transparent}
@media(hover:hover){.nav-burger:hover{background:var(--hover-tint)}}
@media(max-width:768px){
  .nlinks{background:var(--color-void);border-bottom:1px solid var(--color-graphite)}
  .nlinks a{border-bottom-color:var(--color-graphite)!important}
}

/* ── FILTER SHEET MÓVIL — /eventos/ y /blog/ ── */
.filter-trigger-btn{font-family:var(--font-mono);background:var(--color-carbon);border:1px solid var(--color-graphite);color:var(--color-ash);-webkit-tap-highlight-color:transparent}
@media(hover:hover){.filter-trigger-btn:hover{border-color:var(--color-signal);color:var(--color-chalk)}}
@media(max-width:768px){
  .filter-sheet{background:var(--color-void);border-top:1px solid var(--color-graphite)}
  .filter-sheet-handle{background:var(--color-graphite)}
  .filter-sheet-title{font-family:var(--font-mono);color:var(--color-chalk)}
  .filter-sheet-close{color:var(--color-chalk);-webkit-tap-highlight-color:transparent}
}

/* #pg-blog .cat-chip trae background:#fff fijo en base.css (§34, sin
   variable) y su estado activo usa var(--g)/var(--ink), ninguna de las
   dos definida en este skin — plancha blanco fijo en vez del negro/
   morado de /eventos/. Mismo tratamiento que .evchip acá. */
#pg-blog .cat-chip{background:var(--color-carbon);border-color:var(--color-graphite);color:var(--color-ash)}
#pg-blog .cat-chip:hover{border-color:var(--color-signal);color:var(--color-chalk)}
#pg-blog .cat-chip.is-active{background:var(--color-signal);border-color:var(--color-signal);color:#000}
#pg-blog .cat-chip.is-active:hover{background:var(--hover-fill);border-color:var(--hover-fill);box-shadow:none;color:#000}

/* ══════════════════════════════════════════════
   ADDITIONS — Complete missing selectors
   ══════════════════════════════════════════════ */

/* ── HERO (corporativa-style used in index.html) ── */
.pg{padding-top:52px}
.pgbody{padding-top:52px}

.hero{min-height:calc(100vh - 52px - 160px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;border-bottom:1px solid var(--color-graphite);margin-bottom:28px}
.hero-main{display:flex;flex-direction:column;justify-content:center;padding:26px 0;min-height:320px}
.hero-main h1{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,5.8vw,70px);line-height:.94;letter-spacing:-.035em;max-width:900px;color:var(--color-chalk)}
.hero-main h1 em{font-style:italic;font-weight:300;color:var(--color-signal)}
.hero-main h1 em::before{content:none}
.hero-lead{margin-top:16px;max-width:520px;font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-bone)}
.hero-slides{position:relative;min-height:340px}
.hero-slide{position:absolute;inset:0;padding:0 56px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid var(--color-graphite);background:var(--color-onyx);color:var(--color-chalk);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.hero-arrow-prev{left:0}
.hero-arrow-next{right:0}
.hero-arrow:hover{background:var(--color-signal);border-color:var(--color-signal);color:#000}
.hero-arrow .material-symbols-outlined{font-size:18px}
.hero-dots{margin-top:24px;display:flex;justify-content:center;gap:8px}
.hero-dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--color-graphite);background:transparent;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.hero-dot.is-active{background:var(--color-signal);border-color:var(--color-signal)}
@media(max-width:768px){
  .hero-slide{padding:0 40px}
  .hero-arrow{width:28px;height:28px}
  .hero-arrow .material-symbols-outlined{font-size:16px}
}
@keyframes heroGlitchTitle{
  0%,100%{transform:translateX(0);filter:hue-rotate(0) contrast(1)}
  5%{transform:translateX(-14px);filter:hue-rotate(25deg) contrast(1.4)}
  11%{transform:translateX(10px)}
  17%{transform:translateX(-18px);filter:invert(1)}
  23%{transform:translateX(12px);filter:hue-rotate(-30deg) contrast(1.6)}
  30%{transform:translateX(-8px);filter:none}
  40%{transform:translateX(6px);filter:hue-rotate(15deg)}
  50%{transform:translateX(-4px);filter:none}
  62%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0);filter:none}
}
@keyframes heroGlitchLead{
  0%,100%{transform:translateX(0)}
  8%{transform:translateX(22px)}
  16%{transform:translateX(-16px)}
  26%{transform:translateX(20px)}
  36%{transform:translateX(-10px)}
  48%{transform:translateX(6px)}
  60%{transform:translateX(-3px)}
  100%{transform:translateX(0)}
}
@keyframes heroGlitchBtns{
  0%,100%{transform:translateX(0)}
  6%{transform:translateX(-20px)}
  14%{transform:translateX(18px)}
  22%{transform:translateX(-24px)}
  32%{transform:translateX(9px)}
  44%{transform:translateX(-5px)}
  58%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}
@keyframes heroGlitchNoise{
  0%,100%{opacity:0}
  4%{opacity:.85}
  9%{opacity:.15}
  14%{opacity:.9}
  20%{opacity:.2}
  28%{opacity:.7}
  38%{opacity:.1}
  50%{opacity:.4}
  65%{opacity:.05}
  100%{opacity:0}
}
@keyframes heroGlitchNoise2{
  0%,100%{opacity:0;transform:scale(1.4) translateX(0)}
  7%{opacity:.5;transform:scale(1.4) translateX(-30px)}
  15%{opacity:0}
  25%{opacity:.55;transform:scale(1.4) translateX(20px)}
  40%{opacity:0}
  100%{opacity:0}
}
@keyframes heroGlitchBlock{
  0%,100%{opacity:0}
  12%{opacity:.9}
  13%{opacity:0}
  27%{opacity:.8}
  28%{opacity:0}
  100%{opacity:0}
}
.hero-slides.is-glitching .hero-slide.is-active .slabel,
.hero-slides.is-glitching .hero-slide.is-active h1{animation:heroGlitchTitle .32s steps(1,end)}
.hero-slides.is-glitching .hero-slide.is-active .hero-lead{animation:heroGlitchLead .32s steps(1,end)}
.hero-slides.is-glitching .hero-slide.is-active .hero-btns{animation:heroGlitchBtns .32s steps(1,end)}
.hero-glitch-noise{display:none;position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-glitch-block{display:none;position:absolute;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:difference;background:var(--color-signal);left:8%;top:22%;width:38%;height:10%}
.hero-slides.is-glitching .hero-glitch-noise{display:block;animation:heroGlitchNoise .32s steps(1,end)}
.hero-slides.is-glitching .hero-glitch-noise2{animation:heroGlitchNoise2 .32s steps(1,end)}
.hero-slides.is-glitching .hero-glitch-block{display:block;animation:heroGlitchBlock .32s steps(1,end)}
.hero-btns{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-graphite);margin-top:32px}
.hstat{padding:32px 24px;border-right:1px solid var(--color-graphite);text-align:left;min-height:100px;transition:background .25s var(--ease)}
/* 2026-09-02 — :nth-child(3n) en vez de :last-child: con 6 .hstat en una
   grilla de 3 columnas, :last-child solo le quitaba el borde derecho al
   #6 (esquina inferior derecha), dejando el #3 (esquina superior
   derecha) con un borde-derecho que se sumaba al borde derecho de
   .hero-stats y se veía más grueso que el resto. :nth-child(3n) le quita
   el borde a AMBOS (#3 y #6), así todos los bordes quedan del mismo
   grosor (1px). */
.hstat:nth-child(3n){border-right:none}
.hstat:hover{background:var(--hover-surface)}
.hstat-n{font-family:var(--font-display);font-weight:300;font-size:40px;color:var(--color-chalk);letter-spacing:-.02em;line-height:1}
.hstat-l{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash);margin-top:8px}

/* ── TIPOGRAFÍA ADICIONAL ──────────────────────── */
.sh1{font-family:var(--font-display);font-size:clamp(36px,5.5vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--color-chalk)}
.sh2{font-family:var(--font-display);font-size:clamp(30px,4vw,49px);font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--color-chalk)}
.sh1 em,.sh2 em{font-style:italic;font-weight:300;color:var(--color-signal)}
.sh1 em::before,.sh2 em::before{content:none}
.sp{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-bone);max-width:880px}
.slabel{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.slabel::before{content:none}
.sep{width:100%;height:1px;background:var(--color-graphite)}
.sec--alt{background:var(--color-onyx)}

/* ── VALOR CARDS ───────────────────────────────── */
/* No son clickeables (son <div>, sin href): familia Superficie, no
   Tarjeta — sin línea de acento. */
.valor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.vc{position:relative;padding:36px;background:var(--color-onyx);transition:background .3s var(--ease);overflow:hidden}
.vc:hover{background:var(--hover-surface)}
.vc-ico{width:44px;height:44px;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:24px;color:var(--color-signal)}
.vc h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--color-chalk);margin-bottom:12px}
.vc p{font-size:13px;line-height:1.5;color:var(--color-pearl)}
/* .vc.is-risk/.is-guarantee (ia-squad, "El problema"): ícono a la izquierda +
   texto a la derecha, distinto del resto de .valor-grid (ícono arriba).
   Mismo fondo para ambas cajas (antes .is-guarantee tenía un tinte lima
   propio vía var(--g3) en el <style> de ia-squad/index.html; se quitó de
   ahí para unificar con .is-risk).
   El cuadrado del ícono lleva fill blanco fijo (var(--color-chalk), no
   transparente) porque el contenedor es oscuro (onyx) — mismo criterio
   que .iuc-ico.
   Ojo: ia-squad/index.html trae un <style> propio de página (más abajo en
   el cascade) con `.vc.is-risk{background:var(--bg2)}`. En este skin
   --bg2 no existe (background inválido → transparente), así que .is-risk
   dejaba ver el gris de las líneas del grid (var(--color-graphite)) en
   vez de la superficie onyx. Se pisa con más especificidad (.valor-grid
   como ancestro) para devolver el fondo onyx correcto, igual para
   .is-guarantee. El :hover también necesita ese ancestro extra para
   ganar el mismo empate de especificidad y no quedar invisible. */
.vc.is-risk,.vc.is-guarantee{display:flex;align-items:center;gap:24px}
.valor-grid .vc.is-risk,.valor-grid .vc.is-guarantee{background:var(--color-onyx)}
.valor-grid .vc.is-risk:hover,.valor-grid .vc.is-guarantee:hover{background:var(--hover-surface)}
.vc.is-risk .vc-ico,.vc.is-guarantee .vc-ico{flex-shrink:0;margin-bottom:0;background:var(--color-chalk)}
.vc.is-risk .vc-text,.vc.is-guarantee .vc-text{min-width:0}
@media(max-width:600px){.vc.is-risk,.vc.is-guarantee{flex-direction:column;align-items:flex-start;gap:16px}.vc.is-risk .vc-ico,.vc.is-guarantee .vc-ico{margin-bottom:4px}}

/* ── SERVICE CARDS ─────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.svc-card{position:relative;padding:36px;background:var(--color-onyx);transition:background .3s var(--ease);overflow:hidden;text-decoration:none;color:var(--color-bone);display:block}
/* :not(.svc-card--soon) — "Soho Academy" no es clickeable, no debe tener
   hover. Acá importaba más que en los otros skins: el reposo de
   .svc-card es var(--color-onyx) (no transparente), así que cancelar
   el hover con background:transparent (como se hacía antes desde
   base.css) SÍ se notaba — la card se "apagaba" al pasar el mouse. */
.svc-card:not(.svc-card--soon):hover{background:var(--hover-tint)}
/* Línea de acento arriba (top:0) + ::before, igual que .svc-card en
   A-Lima/B-Teal — antes estaba abajo (::after, bottom:0). Exclusiva de
   la familia Tarjeta (cards clickeables); .vc de Inicio no la lleva. */
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--hover-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc-card:not(.svc-card--soon):hover::before{transform:scaleX(1)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
/* .svc-soon-tag (base.css) usa color:var(--ink) + border:1px solid var(--ink)
   como texto/contorno "sobre el acento" — funciona en A-Lima/B-Teal porque
   ahí --ink es negro, pero en C-Carbón --ink es blanco (es el color de
   texto normal sobre fondo oscuro), así que quedaba texto y borde blancos
   sobre el verde-lima claro del chip: casi ilegible. Se sobreescribe acá
   con el mismo negro que usa el texto de .btn-g sobre ese mismo acento. */
.svc-soon-tag{border:none;color:#000}
.svc-ico{font-size:48px;line-height:1;color:var(--color-signal)}
.svc-n{display:none}
.svc-card h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--color-chalk);margin-bottom:10px}
.svc-card p{font-size:13px;line-height:1.5;color:var(--color-pearl);margin-bottom:18px}
.svc-tags{display:flex;gap:6px;flex-wrap:wrap}
/* Mismo contenedor que .tag (chip de "Perfiles disponibles" en Talent as
   a Service): fondo, padding y tipografía iguales — el color de texto
   queda aparte a propósito (acá el acento --color-signal, en .tag es
   --color-ash; sin fondo se perdía contra lo que hubiera detrás). */
.stag{font-family:var(--font-mono);font-size:12px;color:var(--color-signal);background:var(--color-carbon);border:1px solid var(--color-graphite);padding:4px 9px;border-radius:20px}
.stag-cta{background:var(--color-signal);color:#000;border-color:var(--color-signal);font-weight:600;text-decoration:none;transition:opacity .2s var(--ease)}
.stag-cta:hover{opacity:.8;color:#000}

/* ── INDUSTRIES ────────────────────────────────── */
.ind-rows{border-top:1px solid var(--color-graphite)}
.ind-row{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--color-graphite);text-decoration:none;color:var(--color-chalk);transition:padding-left .35s var(--ease),background .3s}
.ind-row:hover{padding-left:24px;background:rgba(158,120,247,.05)}
.ind-row-l{display:flex;align-items:baseline;gap:18px;min-width:0;flex-shrink:1}
.ind-row-n{display:none}
.ind-row h3{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3vw,36px);letter-spacing:-.02em;color:inherit}
.ind-row-meta{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);flex:1 1 auto;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:28px}
.ind-arr{font-size:22px;transition:transform .35s var(--ease);color:var(--color-signal);flex:0 0 auto}
.ind-row:hover .ind-arr{transform:translate(6px,-6px)}

/* ── CASES ─────────────────────────────────────── */
/* Card con borde 1px, sin decoración extra. TODAS las .cfc (con o sin
   href, <a> o <div>) se ven y se comportan igual — familia Superficie de
   hover, cursor normal (ver base.css) — incluida la variante que navega
   (/sobre/): que el clic funcione está bien, pero la card no debe avisar
   que es clickeable. Flex column + cfc-body flex + margin-top:auto en
   cfc-results para que toda la fila quede a la misma altura y los
   resultados/chip siempre peguen abajo, sin importar cuánto ocupe la
   descripción. .ctag con align-self:flex-start para que el chip mida lo
   que ocupa su texto y no se estire al ancho completo de la card (efecto
   lateral de que .cfc-body es flex column). */
.cfc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.cfc{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--color-graphite);background:var(--color-onyx);text-decoration:none;color:var(--color-bone);transition:background .25s var(--ease)}
.cfc-img{height:200px;background:var(--color-iron);flex-shrink:0}
@media(max-width:1024px){.cfc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cfc-grid{grid-template-columns:1fr}}
.cfc-body{padding:28px 30px;display:flex;flex-direction:column;flex:1}
.cfc-meta{display:flex;gap:14px;font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-bottom:14px}
.cfc-meta span{position:relative;padding-right:14px}
.cfc-meta span::after{content:'·';position:absolute;right:4px}
.cfc-meta span:last-child::after{content:''}
.cfc h3{font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--color-chalk);margin-bottom:8px}
.cfc-desc{font-size:13px;line-height:1.5;color:var(--color-pearl);margin-bottom:20px}
.cfc-results{display:flex;gap:28px;margin-bottom:16px;margin-top:auto}
.cfc-r-n{font-family:var(--font-display);font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--color-signal)}
.cfc-r-l{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-top:6px;max-width:120px}
.ctag{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:12px;color:var(--color-signal);background:var(--color-carbon);border:1px solid var(--color-graphite);padding:4px 9px;border-radius:20px}

/* ── CASE DETAIL ───────────────────────────────── */
/* No es clickeable: familia Superficie, no Tinte — ver base.css */
.case-detail{border:1px solid var(--color-graphite);padding:36px 38px;margin-bottom:18px;background:var(--color-onyx);transition:background .25s var(--ease)}
.case-detail:hover{background:var(--hover-surface)}
.case-detail h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--color-chalk);margin-bottom:18px}
.cd-row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--color-graphite)}
.cd-row:first-of-type{border-top:none}
.cd-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--color-ash);text-transform:uppercase}
.cd-v{font-size:14px;line-height:1.55;color:var(--color-bone)}
.cd-v.res{color:var(--color-chalk);font-weight:500}

/* ── IA / SOLUCIONES ───────────────────────────── */
/* No son clickeables (son <div>, sin href): familia Superficie, no Tinte.
   Estas grids viven dentro de secciones .sec--alt (fondo var(--color-onyx),
   igual que el reposo de .ia-svc) — acá --hover-surface (var(--color-iron))
   SÍ es el destino correcto porque coincide con el mecanismo de
   .vc-stack en Inicio en este skin (onyx → iron), a diferencia de
   A-Lima/B-Teal donde hubo que sacarlo de --hover-surface (ver esos
   archivos). No se toca. */
.ia-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.ia-svc-grid-4{grid-template-columns:repeat(4,1fr)}
.ia-svc{padding:32px 28px;background:var(--color-onyx);transition:background .3s var(--ease)}
.ia-svc:hover{background:var(--hover-surface)}
.ia-svc-ico{font-size:40px;margin-bottom:18px;color:var(--color-signal)}
.ia-svc h4{font-family:var(--font-display);font-weight:300;font-size:19px;color:var(--color-chalk);margin-bottom:8px}
.ia-svc p{font-size:13px;line-height:1.5;color:var(--color-pearl)}
.ia-use{border:1px solid var(--color-graphite);margin-top:24px}
.ia-use-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
/* No son clickeables (son <div>, sin href): familia Superficie. Mismo
   mecanismo que .case-detail/.cpl-card en este skin (onyx → iron). */
.iuc{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 36px;border-right:1px solid var(--color-graphite);border-bottom:1px solid var(--color-graphite);background:var(--color-onyx);transition:background .3s var(--ease)}
.iuc:nth-child(2n){border-right:none}
.iuc:nth-child(n+3){border-bottom:none}
.iuc:hover{background:var(--hover-surface)}
.iuc-body{min-width:0}
.iuc h5{font-family:var(--font-display);font-weight:300;font-size:16px;color:var(--color-chalk);margin-bottom:6px}
.iuc p{font-size:13px;line-height:1.5;color:var(--color-pearl)}
.iuc .iuc-metric{font-family:var(--font-mono);font-size:12px;color:var(--color-signal);margin-top:8px;display:block}
.iuc-ico{flex-shrink:0;width:50px;height:50px;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--color-carbon);color:var(--color-signal)}
@media(max-width:600px){.iuc{flex-direction:column;align-items:flex-start;gap:16px}}

/* ── INSIGHTS ──────────────────────────────────── */
.ins-feat{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px;background:var(--color-onyx);border:1px solid var(--color-graphite);margin-bottom:24px}
.ins-feat-img{min-height:280px;background:var(--color-iron);border:1px solid var(--color-graphite)}
.ins-feat-body{padding:0;display:flex;flex-direction:column;justify-content:center}
.ins-tags{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-bottom:14px}
.ins-feat-body h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,34px);color:var(--color-chalk);margin:12px 0 16px}
.ins-date{font-family:var(--font-mono);font-size:12px;color:var(--color-smoke);margin-bottom:14px}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.igc{display:block;text-decoration:none;color:var(--color-bone);border:1px solid var(--color-graphite);background:var(--color-onyx);padding:14px}
.igc-img{aspect-ratio:16/9;margin-bottom:16px;background:var(--color-iron);border:1px solid var(--color-graphite)}
.igc h4{font-family:var(--font-display);font-weight:300;font-size:19px;color:var(--color-chalk);line-height:1.2}
.igc p{font-size:13px;line-height:1.5;color:var(--color-pearl);margin-top:8px}

/* ── ABOUT / VALUES ────────────────────────────── */
.about-img{aspect-ratio:3/4;background:var(--color-iron);border:1px solid var(--color-graphite)}
.values-grid{gap:1px;background:var(--color-graphite);margin-top:32px;border:1px solid var(--color-graphite)}
.vcard:hover{background:var(--hover-surface)}

/* ── COMPLIANCE HIGHLIGHT (/sobre/) ───────────────── */
/* Bloque destacado con ícono, texto y botón "Ver más" explícito — el
   card en sí no navega (familia Superficie), solo el botón .btn-o lo
   hace, mismo criterio ya usado en .cfc/.case-detail. */
.cpl-card{position:relative;display:flex;align-items:center;gap:32px;padding:36px;border:1px solid var(--color-graphite);background:var(--color-onyx);transition:background .25s var(--ease)}
.cpl-card:hover{background:var(--hover-surface)}
.cpl-ico{flex-shrink:0;font-size:48px;line-height:1;color:var(--color-signal)}
.cpl-body{flex:1;min-width:0}
.cpl-body h3{font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--color-chalk);margin-bottom:8px}
.cpl-body p{font-size:13px;line-height:1.5;color:var(--color-pearl);max-width:640px}
.cpl-cta{flex-shrink:0}
@media(max-width:768px){.cpl-card{flex-direction:column;align-items:flex-start;gap:20px}}

/* ── CARRERAS ──────────────────────────────────── */
.job-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.job-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px;border:1px solid var(--color-graphite);text-decoration:none;color:var(--color-chalk);transition:background .3s var(--ease);overflow:hidden}
.job-row::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--hover-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
/* antes: background:rgba(197,255,74,.05) hardcodeado, no coincidía con
   --hover-tint (mismo bug que .role-card.selected / .opt-row.chosen,
   corregido acá también). */
.job-row:hover{background:var(--hover-tint)}
.job-row:hover::before{transform:scaleX(1)}
.job-l{display:flex;align-items:center;gap:18px}
.jbadges{display:flex;flex-wrap:wrap;gap:6px}
.jbadge{font-family:var(--font-mono);font-size:12px;border:1px solid var(--color-signal);color:var(--color-signal);padding:4px 9px;border-radius:20px}
.job-row h3{font-family:var(--font-display);font-weight:300;font-size:20px;color:inherit;padding-right:26px}
.jarr{position:absolute;top:22px;right:22px;font-size:20px;transition:transform .35s var(--ease);color:var(--color-signal)}
.job-row:hover .jarr{transform:translate(5px,-5px)}
/* .job-row--banner (Banco de Talento SOHO): 2026-08-27, segunda ronda —
   ancho completo del contenedor (grid-column:1/-1) en vez de una celda
   normal, foto en panel propio en vez de fondo de toda la card, sin
   overlay ni :hover propio (elimina el salto brusco de background-image,
   que no es transicionable). Tercera ronda: min-height para que no se vea
   más baja que las demás cards (al estar sola en su fila de grid, no hay
   ninguna vecina de la que heredar el alto), y la foto pasa a llegar al
   borde de la card (sin el padding que heredaba de .job-row) con un inner
   shadow leve para suavizar el corte a sangre — el padding se le pasa solo
   a .jb-content. En mobile se restaura el padding parejo de siempre. Ver
   nota completa en theme-a-lima.css. */
/* Cuarta ronda — el inner shadow no convenció; se reemplaza por un borde
   pequeño (`var(--color-graphite)`, mismo color del borde de la card) SOLO
   en escritorio/tablet. En mobile se deja intacto. */
.job-row--banner{grid-column:1/-1;flex-direction:row;align-items:stretch;gap:22px;padding:0;min-height:131px}
.job-row--banner .jb-photo{width:180px;flex-shrink:0;background-image:url(/images/sobre/banco-talento.png);background-size:cover;background-position:center;border:1px solid var(--color-void)}
.job-row--banner .jb-content{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:24px 24px 24px 0}
@media(max-width:980px){.job-rows{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .job-rows{grid-template-columns:1fr}
  .job-row--banner{flex-direction:column;align-items:stretch;gap:16px;padding:24px;min-height:0}
  .job-row--banner .jb-photo{width:100%;height:140px;border-radius:8px;border:none}
  .job-row--banner .jb-content{padding:0}
}

/* ── FAQ (extended) ────────────────────────────── */
.faq-list{margin-top:40px;border-top:1px solid var(--color-graphite)}

/* ── CTA ───────────────────────────────────────── */
.cta-s{background:rgba(158,120,247,.06);border-top:1px solid var(--color-graphite);padding:100px 0;text-align:center}
.cta-s h2{font-family:var(--font-display);font-weight:300;font-size:clamp(36px,6vw,72px);letter-spacing:-.03em;line-height:.96;max-width:900px;margin:0 auto 32px;color:var(--color-chalk)}
.cta-s h2 em{font-style:italic;font-weight:300;color:var(--color-signal)}
.cta-s h2 em::before{content:none}
.cta-s .btns{justify-content:center}

/* ── MEDIA PLACEHOLDERS (sin efectos: imágenes a color pleno) ── */
.media{position:relative;display:block;overflow:hidden;border:1px solid var(--color-graphite);background:var(--color-iron)}
.media-fill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-iron)}
.media-fill .material-symbols-outlined{font-size:40px;color:var(--color-fog)}
.media-photo{width:100%;height:100%;object-fit:cover;display:block}
.cfc-img.cfc-logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:24px}
.media-logo{max-width:200px;max-height:34px;width:auto;height:auto;object-fit:contain;display:block;margin:auto}
.media-rule{position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-signal);z-index:3}
.media-label{position:absolute;left:0;bottom:0;max-width:100%;box-sizing:border-box;z-index:3;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:#000;background:var(--color-signal);padding:3px 7px}

/* ── SDLC FLOW (paquete completo, ia-squad) ───────── */
/* Sin grid de celdas/tablero ni líneas separadoras entre bloques (se
   quitaron los border-top, solo queda el espaciado) + íconos sueltos sin
   caja, igual criterio que .ia-svc-ico. */
.sdlc-flow>p{font-size:13px;line-height:1.5;color:var(--color-pearl);max-width:640px;margin-top:14px}
.sdlc-pipeline{display:flex;align-items:flex-start;gap:18px;margin-top:48px}
.sdlc-stage{flex:1;min-width:0}
.sdlc-stage-ico{font-size:34px;color:var(--color-signal);margin-bottom:16px}
.sdlc-stage h6{font-family:var(--font-display);font-weight:300;font-size:15px;color:var(--color-chalk);margin-bottom:5px}
.sdlc-stage>span{font-size:13px;line-height:1.5;color:var(--color-pearl)}
.sdlc-stats-row{display:flex;flex-wrap:wrap;gap:48px 64px;margin-top:52px}
.sdlc-stat-n{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,3.6vw,50px);color:var(--color-chalk)}
.sdlc-stat-l{font-size:13px;line-height:1.5;color:var(--color-pearl);margin-top:8px;max-width:230px}
.sdlc-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:52px}
.sdlc-cta-row p{font-size:13px;line-height:1.5;color:var(--color-pearl);max-width:400px;margin:0}
@media(max-width:900px){.sdlc-pipeline{flex-wrap:wrap;row-gap:32px}.sdlc-stage{flex:1 1 40%;min-width:160px}}
@media(max-width:600px){.sdlc-pipeline{flex-direction:column}.sdlc-stage{flex:1 1 auto}}

/* ── SKIN SWITCH ───────────────────────────────── */
.mdrow{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:stretch}
.mdrow-text{display:flex;flex-direction:column;justify-content:center}
.mdrow-cards{display:flex;flex-direction:column;border:1px solid var(--color-graphite);background:var(--color-graphite)}
.vc-stack{flex:1;background:var(--color-onyx);padding:14px 18px;display:flex;flex-direction:row;align-items:center;gap:14px;border-bottom:1px solid var(--color-graphite);transition:background .3s var(--ease)}
.vc-stack:last-child{border-bottom:none}
.vc-stack:hover{background:var(--hover-surface)}
.vc-stack .vc-ico{width:30px;height:30px;flex-shrink:0;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--color-carbon);color:var(--color-signal)}
.vc-stack .vc-text{min-width:0}
.vc-stack h3{font-family:var(--font-display);font-weight:300;font-size:15px;color:var(--color-chalk);line-height:1.15;margin-bottom:4px}
.vc-stack p{font-size:12px;line-height:1.42;color:var(--color-pearl)}
.mdmod{padding:56px 0}
.skin-switch{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.skin-tab{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-chalk);background:var(--color-onyx);border:1px solid var(--color-graphite);padding:9px 16px;border-radius:var(--r-button);display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:background .25s,border-color .25s}
.skin-tab .skin-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.skin-tab:hover{border-color:var(--color-signal)}
.skin-tab.active{background:var(--color-signal);color:#000;cursor:default;border-color:var(--color-signal)}
.skin-card-box{background:var(--color-onyx);border:1px solid var(--color-graphite);border-radius:6px;padding:16px}
.skin-card:hover .skin-card-box{background:var(--color-iron)}
.skin-card-frame{border:1px solid var(--color-graphite);border-radius:4px}
.skin-card-name{color:var(--color-chalk)}
.skin-card-desc{color:var(--color-pearl)}
@media(max-width:900px){.mdrow{grid-template-columns:1fr}}

/* ── LOGOS ──────────────────────────────────────── */
/* .logos-band: íconos reales en vez de chips de texto — ver nota completa
   en theme-a-lima.css (mismo mecanismo de grid en los 3 skins). */
.logos-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));column-gap:28px;row-gap:24px;align-items:center;margin-top:32px}
.logo-item{display:flex;align-items:center;justify-content:center;color:var(--color-pearl)}
.logo-item svg{height:28px;width:auto;max-width:100%}

/* ── FORM (extended) ───────────────────────────── */
.cform{background:var(--color-onyx);border:1px solid var(--color-graphite);padding:32px}
.fg label{font-family:var(--font-mono);font-size:12px;color:var(--color-smoke)}
.fg input,.fg select,.fg textarea{background:var(--color-carbon);border:1px solid var(--color-graphite);border-radius:var(--r-button);color:var(--color-chalk);font-family:var(--font-body);font-size:14px;padding:12px 14px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--color-signal);box-shadow:var(--shadow-signal)}
.fsub{width:100%;font-family:var(--font-mono);font-size:14px;font-weight:700;color:#fff;background:var(--color-signal);border:none;border-radius:var(--r-button);padding:14px;cursor:pointer;transition:background .25s,box-shadow .25s}
.fsub:hover{background:var(--hover-fill);box-shadow:var(--shadow-signal)}
.fg-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.fbl{font-family:var(--font-display);font-weight:300;font-size:30px;letter-spacing:-.03em;line-height:.85;margin-bottom:16px;color:var(--color-chalk)}
.fbl-svg{height:30px;width:auto;display:block}
.fbl-svg path{fill:var(--color-chalk)}
.f-claim{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);max-width:280px;line-height:1.5}
.fcol h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);margin-bottom:12px}
.fcol a{display:block;color:var(--color-bone);font-size:13px;text-decoration:none;margin-bottom:10px}
.fcol a:hover{color:var(--hover-text)}

/* ── NAV BRAND ─────────────────────────────────── */
.brand-svg{height:19px;width:auto;display:block}
.brand-svg path{fill:var(--color-chalk)}
.nlogo{display:flex;align-items:center;gap:14px}
.nl-word{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--color-chalk);line-height:1}
.nl-badge{display:none}
.nl-tag{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-ash)}
.nl-tag-wrap{display:flex;align-items:center;gap:14px}

/* ── VOICE (corporativa-style refs) ────────────── */
.vwrap{position:relative;z-index:10;width:100%;display:flex;flex-direction:column;align-items:center;padding:40px}
.vtitle{display:flex;align-items:center;justify-content:center}
#brandGlitch{width:min(78vw,760px);height:auto;aspect-ratio:1000/260}
.vsub{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--color-ash);margin-top:8px}
.vorb-zone{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:18px}
.voice-logo{width:clamp(180px,26vw,320px);height:auto}
.voice-orbit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}

/* ── REVEAL ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.vis{opacity:1;transform:none}

/* ── HELPERS ───────────────────────────────────── */
.mt16{margin-top:16px}.mb40{margin-bottom:40px}.mb24{margin-bottom:24px}
.lead-wrap{max-width:880px}
.col{flex:1}
.hide{display:none!important}
.active{}

/* ── VERTICALES SLIDER ─────────────────────────── */
.vert-wrap{border:1px solid var(--color-graphite)}
.vert-tabs{display:grid;grid-template-columns:repeat(3,1fr);align-items:end}
.vert-tab{position:relative;text-align:left;font-family:var(--font-body);background:transparent;border:none;appearance:none;-webkit-appearance:none;border-radius:0;box-sizing:border-box;padding:22px 24px;cursor:pointer;display:flex;align-items:center;gap:18px;transition:background .25s var(--ease)}
.vert-tab:hover{background:var(--color-iron)}
.vert-tab.active{z-index:3;background:var(--color-iron);border:1px solid var(--color-graphite);border-bottom:1px solid var(--color-iron);margin-top:-1px;margin-bottom:-1px;padding:32px 24px 24px}
.vert-tab.active:first-child{margin-left:-1px}
.vert-tab.active:last-child{margin-right:-1px}
.vert-tab-ico{width:52px;height:52px;flex-shrink:0;border:1px solid var(--color-graphite);background:var(--color-signal);display:flex;align-items:center;justify-content:center;transition:background .25s}
.vert-tab-ico .material-symbols-outlined{font-size:28px;color:#000}
.vert-tab-n{display:none}
.vert-tab-txt{display:flex;flex-direction:column;gap:4px}
.vert-tab-ttl{font-family:var(--font-display);font-size:24px;font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--color-chalk)}
.vert-tab-sub{font-family:var(--font-mono);font-size:12px;color:var(--color-ash)}
.vert-panels{position:relative;min-height:420px;border-top:1px solid var(--color-graphite)}
.vert-panel{display:none;padding:56px 52px;background:var(--color-iron);animation:vertIn .5s var(--ease)}
.vert-panel.active{display:grid;grid-template-columns:1.15fr .85fr;gap:56px}
@keyframes vertIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vert-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.vert-eyebrow::before{content:none}
.vert-panel h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;line-height:1.06;color:var(--color-chalk);margin-bottom:18px}
.vert-panel h3 em{font-style:italic;font-weight:300;color:var(--color-signal)}
.vert-panel h3 em::before{content:none}
.vert-lead{font-size:14px;line-height:1.6;color:var(--color-pearl);max-width:520px}
/* .vert-ai: ver nota completa en theme-a-lima.css — familia Superficie, no
   el tinte lima (rgba signal) que tenía antes. Fondo fijo igual a
   .sec--alt (--color-onyx), sin hover. El cuadrado del ícono usa el
   equivalente oscuro de "fill blanco": carbon+signal+borde graphite,
   mismo criterio que .iuc-ico/.insight-ico. */
.vert-ai{margin-top:26px;background:var(--color-onyx);padding:18px 22px;display:flex;gap:14px;align-items:flex-start;max-width:520px}
.vert-ai-ico{width:34px;height:34px;border:1px solid var(--color-graphite);background:var(--color-carbon);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--color-signal)}
.vert-ai-txt{font-size:13px;line-height:1.55;color:var(--color-bone)}
.vert-ai-txt strong{font-weight:600;color:var(--color-chalk)}
.vert-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.vert-side{border-left:1px solid var(--color-graphite);padding-left:40px;display:flex;flex-direction:column;gap:0}
/* .vert-pt: ver nota completa en theme-a-lima.css — filas sin hover, solo
   informativas. Este skin no usa el acento "/" (h3 em lo desactiva acá,
   ver .vert-panel h3 em::before), así que el label lleva en su lugar un
   punto var(--color-signal), mismo lenguaje de acento que el resto del
   sitio en su versión oscura. */
.vert-pt{padding:16px 0;border-bottom:1px solid var(--color-graphite)}
.vert-pt:first-child{padding-top:0}
.vert-pt:last-child{border-bottom:none}
.vert-pt-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.vert-pt-k::before{content:'';width:5px;height:5px;background:var(--color-signal);flex-shrink:0}
.vert-pt-v{font-size:14px;font-weight:400;line-height:1.55;color:var(--color-bone)}

/* ── STAFFING QUIZ ─────────────────────────────── */
.quiz-box{border:1px solid var(--color-graphite);background:var(--color-onyx);position:relative;overflow:hidden}
.quiz-progress-track{height:3px;background:var(--color-iron);width:100%}
.quiz-progress-fill{height:100%;background:var(--color-signal);width:12.5%;transition:width .45s var(--ease)}
.quiz-header{padding:32px 40px 0;border-bottom:none}
.quiz-back-row{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.quiz-back{width:34px;height:34px;border:1px solid var(--color-graphite);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:var(--color-onyx);transition:border-color .2s,background .2s}
.quiz-back:hover{border-color:var(--color-signal);background:var(--color-iron)}
.quiz-back.hide{visibility:hidden}
.quiz-back .material-symbols-outlined{font-size:17px;color:var(--color-chalk)}
.quiz-stepnum{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--color-ash);font-weight:500}
.quiz-panels{position:relative;min-height:360px}
.quiz-panel{display:none;padding:0 40px 40px;animation:panelIn .4s var(--ease)}
.quiz-panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.quiz-q{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1.12;margin-bottom:32px;max-width:680px;color:var(--color-chalk)}
.opt-list{display:flex;flex-direction:column;gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
/* .opt-row (pasos 3/5/6 del quiz) debe tener el hover EXACTAMENTE igual al
   de .role-card (paso 1): fondo --hover-tint al hover, y la barra de
   acento (--hover-line) solo aparece en .chosen (igual que
   .role-card.selected), sin animación de barrido — nunca al pasar el
   mouse sin elegir. */
.opt-row{position:relative;background:var(--color-onyx);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .25s var(--ease);border:none;text-align:left;width:100%;font-family:var(--font-body)}
.opt-row:hover{background:var(--hover-tint)}
.opt-row.chosen{background:var(--hover-tint)}
.opt-row.chosen::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--hover-line)}
.opt-row span.opt-label{font-size:16px;color:var(--color-chalk)}
.opt-hint{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-top:4px;display:block}

/* ── ROLE GRID ─────────────────────────────────── */
/* .role-card.selected traía un verde traslúcido a mano (rgba(197,255,74,.08))
   distinto del fondo de :hover (--color-iron) — mismo bug de "chosen ≠
   hover" ya corregido en .opt-row/.opt-list (ver historial). Se corrige
   acá también para que .opt-row pueda copiar este mecanismo tal cual. */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.role-card{background:var(--color-onyx);border:none;padding:26px 24px;cursor:pointer;text-align:left;position:relative;transition:background .25s var(--ease)}
.role-card:hover{background:var(--hover-tint)}
.role-card.selected{background:var(--hover-tint)}
.role-card.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-signal)}
.role-icon{font-size:24px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--color-graphite);color:var(--color-signal)}
.role-card h4{font-family:var(--font-display);font-weight:300;font-size:17px;color:var(--color-chalk);margin-bottom:5px}
.role-card p{font-size:12px;color:var(--color-pearl);line-height:1.4}
.role-agent{margin-top:12px;padding-top:10px;border-top:1px solid var(--color-graphite);display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;color:var(--color-bone)}
.role-agent .dot{width:5px;height:5px;background:var(--color-signal);border:1px solid var(--color-signal-dim);flex-shrink:0}

/* ── SKILL SEARCH ──────────────────────────────── */
.skill-search{border:1px solid var(--color-graphite);display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:20px;background:var(--color-carbon)}
.skill-search input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:15px;color:var(--color-chalk);background:transparent}
.skill-search input::placeholder{color:var(--color-ash)}
.skill-search .material-symbols-outlined{color:var(--color-ash);font-size:19px}
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.chip-opt{display:inline-flex;align-items:center;background:var(--color-carbon);border:1px solid var(--color-graphite);border-radius:20px;padding:8px 16px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em;color:var(--color-ash);cursor:pointer;transition:background-color .22s,border-color .22s,color .22s,box-shadow .22s,transform .18s,opacity .2s}
.chip-opt:hover{border-color:var(--color-signal);color:var(--color-chalk)}
.chip-opt.is-chosen{background:var(--color-signal);border-color:var(--color-signal);color:#000}
/* Un chip ya elegido no necesita el gesto de "esto se puede elegir"
   (levantarse + halo difuminado) — ya está elegido. Al hover ahora solo
   cambia de tono, tomando el mismo verde que usa el CTA "Agendar
   reunión" al pasar el mouse (--hover-fill) — sin transform, sin sombra.
   transform:none cancela el translateY(-1px) que .chip-opt:hover trae
   por defecto (ver base.css). */
.chip-opt.is-chosen:hover{background:var(--hover-fill);border-color:var(--hover-fill);box-shadow:none;transform:none;color:#000}
.chip-opt--custom{border-style:dashed}
.chip-opt--custom-input{display:inline-flex;align-items:center;gap:8px;background:var(--color-onyx);border:1px solid var(--color-graphite);border-radius:20px;padding:6px 8px 6px 14px}
.chip-opt--custom-input input{border:none;outline:none;background:transparent;font-size:14px;color:var(--color-bone);width:150px}
.chip-opt--custom-input input::placeholder{color:var(--color-ash)}
.chip-opt--custom-input button{border:none;background:var(--color-signal);color:#000;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;padding:0;flex:none}
.quiz-actions{display:flex;align-items:center;gap:20px}
.quiz-skip{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);text-decoration:underline;cursor:pointer}
.quiz-skip:hover{color:var(--color-signal)}

/* ── QFORM ─────────────────────────────────────── */
.qform-grid{display:flex;flex-direction:column;gap:18px;max-width:460px}
.qform-field{position:relative}
.qform-field label{position:absolute;top:8px;left:15px;font-family:var(--font-mono);font-size:12px;color:var(--color-ash);letter-spacing:.04em;pointer-events:none}
.qform-field .req{color:var(--color-signal);position:absolute;left:-16px;top:22px;font-weight:700}
.qform-field input{width:100%;border:1px solid var(--color-graphite);border-radius:var(--r-button);padding:26px 15px 10px;font-family:var(--font-body);font-size:15px;color:var(--color-chalk);background:var(--color-carbon);transition:background .2s,box-shadow .2s}
.qform-field input:focus{outline:none;background:var(--color-onyx);box-shadow:0 0 0 1px var(--color-signal)}
.qform-legal{font-size:12px;color:var(--color-ash);max-width:460px;margin-top:20px;line-height:1.5}
.qform-legal a{color:var(--color-signal);text-decoration:underline}

/* ── QUIZ SUCCESS ──────────────────────────────── */
.quiz-success{display:none;padding:0 40px 44px}
.quiz-success.active{display:block;animation:panelIn .4s var(--ease)}
.success-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;background:var(--color-signal);color:#000;border:none;padding:6px 14px;margin-bottom:22px;border-radius:20px}
.success-title{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3vw,30px);color:var(--color-chalk);margin-bottom:14px;max-width:600px}
.success-copy{font-size:14px;color:var(--color-bone);max-width:640px;margin-bottom:28px;line-height:1.55}
.success-agent{padding:16px 18px;background:var(--color-iron);border-left:3px solid var(--color-signal);margin-bottom:28px;font-size:13px;color:var(--color-bone);line-height:1.5;max-width:640px}
.success-agent b{font-weight:600;color:var(--color-chalk)}

/* ── STEPS ─────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.step{padding:40px 34px;background:var(--color-onyx);position:relative}
.step .num{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-bottom:20px;letter-spacing:.04em}
.step h3{font-family:var(--font-display);font-weight:300;font-size:20px;color:var(--color-chalk);margin-bottom:12px}
.step p{font-size:14px;color:var(--color-bone);line-height:1.5}

/* ── PROFILES ──────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.profile-card{padding:28px;background:var(--color-onyx);transition:background .25s var(--ease);position:relative}
.profile-card:hover{background:var(--color-iron)}
.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{width:50px;height:50px;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--color-chalk);background:var(--color-iron);flex-shrink:0}
.profile-name{font-family:var(--font-display);font-weight:300;font-size:17px;color:var(--color-chalk)}
.profile-role{font-size:12px;color:var(--color-ash);margin-top:2px}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:var(--font-mono);margin-top:6px;color:var(--color-bone)}
.verified .material-symbols-outlined{font-size:12px;color:var(--color-signal)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.tag{font-size:12px;font-family:var(--font-mono);background:var(--color-carbon);border:1px solid var(--color-graphite);color:var(--color-ash);padding:4px 9px;border-radius:20px}
.profile-dc{font-size:12px;color:var(--color-ash);margin-bottom:14px}
.profile-dc b{font-weight:600;color:var(--color-chalk)}
.profile-agent{padding:11px 12px;background:var(--color-iron);border-left:3px solid var(--color-signal);font-size:12px;color:var(--color-bone);line-height:1.4}
.profile-agent b{font-weight:600;color:var(--color-chalk)}
.hitl{margin-top:12px;font-size:12px;font-family:var(--font-mono);color:var(--color-ash);display:flex;align-items:center;gap:6px;letter-spacing:.03em}
.hitl .dot{width:5px;height:5px;background:var(--color-signal);border:1px solid var(--color-signal-dim)}
.profile-cta{margin-top:16px;width:100%;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-chalk);background:transparent;border:1px solid var(--color-fog);border-radius:20px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.profile-cta .material-symbols-outlined{font-size:15px;transition:transform .22s var(--ease)}
.profile-cta:hover{background:var(--color-signal);border-color:var(--color-signal);color:#000}
.profile-cta:hover .material-symbols-outlined{transform:translateX(2px)}
.profile-cta:active{transform:scale(.97)}

/* ── TRUST STRIP ───────────────────────────────── */
.trust-strip{border:1px solid var(--color-graphite);padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--color-onyx)}
.trust-src{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);white-space:nowrap}

/* ── SUBNAV ────────────────────────────────────── */
/* Oculto por defecto; aparece pegado bajo el menú principal al hacer scroll (ver js/main.js) */
.subnav-wrap{position:fixed;left:0;right:0;top:56px;z-index:150;background:#80A112;border-bottom:1px solid var(--color-graphite);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .3s var(--ease)}
.subnav-wrap.show{transform:translateY(0);opacity:1;pointer-events:auto}
.subnav-title{font-weight:700!important;color:#000!important;padding-right:4px!important}
.subnav-sep{width:1px;height:16px;background:#000;opacity:.2;flex-shrink:0;align-self:center;margin:0 6px}
.subnav{display:flex;align-items:center;gap:4px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:#000;font-weight:400;padding:8px 16px;white-space:nowrap;text-decoration:none;transition:color .2s,font-weight .2s;display:flex;align-items:center;gap:7px}
.subnav a .subnav-n{font-size:12px;color:#000}
.subnav a:hover{color:#000;font-weight:600}
.subnav a.active{color:#000;font-weight:600}
.subnav a.active .subnav-n{color:#000}

/* ── MINI CASES ─────────────────────────────────
   .mc puede ser <a> (ia/, industrias/*, aún enlazan a /casos-de-exito/)
   o <div> (servicios/*, sin link a propósito). El hover (familia Tarjeta:
   --hover-tint + --hover-line, igual que .svc-card) solo se activa sobre
   <a class="mc"> para no insinuar que la versión <div> es clicable cuando
   no lo es. Flex column + margin-top:auto en mc-results para que, igual
   que en .cfc, los resultados queden al ras del borde inferior sin
   importar cuánto ocupe la descripción. */
.mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-graphite);border:1px solid var(--color-graphite)}
.mc{position:relative;display:flex;flex-direction:column;height:100%;background:var(--color-onyx);padding:28px 26px;transition:background .25s var(--ease);text-decoration:none;color:var(--color-bone)}
a.mc:hover{background:var(--hover-tint)}
/* .mc como <div> (no <a>): familia Superficie — ver nota en theme-a-lima.css.
   El fondo de reposo de .mc ya es var(--color-onyx) en este skin (igual
   regardless de si vive en .sec o .sec--alt), así que el hover a
   --hover-surface (var(--color-iron)) es un salto real, no gris sobre gris. */
.mc:hover{background:var(--hover-surface)}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--hover-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
a.mc:hover::before{transform:scaleX(1)}
.mc-meta{display:flex;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-bottom:14px}
.mc-meta span{position:relative;padding-right:10px}
.mc-meta span::after{content:'·';position:absolute;right:2px}
.mc-meta span:last-child::after{content:''}
.mc h4{font-family:var(--font-display);font-weight:300;font-size:19px;color:var(--color-chalk);line-height:1.2;margin-bottom:10px}
.mc p{font-size:13px;line-height:1.5;color:var(--color-pearl);margin-bottom:18px}
.mc-results{display:flex;gap:20px;margin-top:auto}
.mc-r-n{font-family:var(--font-display);font-weight:300;font-size:22px;line-height:1;color:var(--color-signal)}
.mc-r-l{font-family:var(--font-mono);font-size:12px;color:var(--color-ash);margin-top:4px;max-width:100px}
/* .mc.is-surface (ciberseguridad, "Modelo de servicio" y "Las tres capas"):
   tarjetas <div> sin href dentro de .sec--alt — familia Superficie, no
   Tarjeta/Tinte (esa es la de a.mc:hover de arriba). El fondo de .mc ya es
   var(--color-onyx), igual que .sec--alt en este skin, así que no hace
   falta redeclararlo — solo agregar el hover, que aquí sí puede leer
   --hover-surface (var(--color-iron)) directo porque onyx→iron es un
   salto real, no gris sobre gris (a diferencia de A-Lima/B-Teal). */
.mc.is-surface:hover{background:var(--hover-surface)}

/* .mc-grid--sdlc: ver nota completa en theme-a-lima.css. Acá .mc-grid usa
   gap:1px + background del propio grid para dibujar las líneas (en vez de
   border-right por ítem), así que las costuras entre filas al pasar a
   2×2/1 columna salen solas — no hace falta pisar bordes por nth-child. */
.mc-grid.mc-grid--sdlc{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.mc-grid.mc-grid--sdlc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mc-grid.mc-grid--sdlc{grid-template-columns:1fr}}

/* ── INSIGHT CALLOUT (ícono + texto, familia Superficie) ─────────
   Reemplaza el antiguo .quote-block ad-hoc de /ia/agentes-sdlc/. Ícono en
   cuadrado carbon+signal con borde graphite, mismo criterio que .iuc-ico. */
.insight-card{display:flex;align-items:flex-start;gap:24px;background:var(--color-onyx);padding:32px 36px}
.insight-ico{flex-shrink:0;width:48px;height:48px;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--color-carbon);color:var(--color-signal)}
.insight-body p{font-size:16px;font-weight:300;line-height:1.5;color:var(--color-bone);margin-bottom:14px}
.insight-stat{font-size:13px;color:var(--color-ash)}
.insight-stat-n{font-family:var(--font-display);font-weight:500;color:var(--color-chalk);font-size:16px}
@media(max-width:600px){.insight-card{flex-direction:column;gap:16px;padding:24px 22px}}

/* ── ADDITIONAL RESPONSIVE (theme) ─────────────── */
@media(max-width:1024px){
  .grid2,.grid3,.grid4,.svc-grid,.ia-svc-grid,.ins-grid,.mc-grid{grid-template-columns:1fr}
  /* .ia-svc-grid-4: 4→2 (no directo a 1 col como el resto de .ia-svc-grid) */
  .ia-svc-grid-4{grid-template-columns:repeat(2,1fr)}
  .valor-grid,.values-grid{grid-template-columns:1fr}
  .hero-stats,.stats-demo{grid-template-columns:1fr 1fr}
  .hstat:nth-child(2){border-right:none}
  .fg-grid{grid-template-columns:1fr 1fr}
  .ins-feat{grid-template-columns:1fr}
  .ins-feat-img{min-height:200px}
  .about-split,.contact-split,.ia-use-cols{grid-template-columns:1fr}
  .iuc{border-right:none}
  .iuc:nth-child(n+3){border-bottom:1px solid var(--color-graphite)}
  .iuc:last-child{border-bottom:none}
  .steps,.profile-grid{grid-template-columns:1fr}
  .vert-tab{padding:18px 20px}
  .vert-tab.active{padding:26px 20px 20px}
  .vert-panel{padding:44px 32px}
  .vert-panel.active{grid-template-columns:1fr;padding:36px 26px;gap:32px}
  .vert-side{border-left:none;border-top:1px solid var(--color-graphite);padding-left:0;padding-top:24px}
}
@media(max-width:640px){
  .ia-svc-grid-4{grid-template-columns:1fr}
  /* Tabs se mantienen en fila horizontal (igual que desktop) para que el
     tab activo siga fundiéndose visualmente con el panel de abajo. */
  .vert-tab{flex-direction:column;text-align:center;gap:8px;padding:16px 6px}
  .vert-tab.active{padding:18px 6px 14px}
  .vert-tab-txt{align-items:center}
  .vert-tab-ico{width:36px;height:36px}
  .vert-tab-ico .material-symbols-outlined{font-size:20px}
  .vert-tab-ttl{font-size:15px}
  .vert-tab-sub{display:none}
  .vert-panel.active{padding:28px 18px;gap:24px}
}
@media(max-width:900px){
  .role-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .role-grid,.profile-grid{grid-template-columns:1fr}
  .frow2{grid-template-columns:1fr}
  .fg-grid{grid-template-columns:1fr}
  #brandGlitch{width:min(90vw,420px)}
}
@media(max-width:600px){
  .role-grid{grid-template-columns:1fr}
}

/* ── #pg-voice override for black ──────────────── */
#pg-voice{padding-top:0}
#pg-voice.pg.on{display:flex;align-items:center;justify-content:center;min-height:100vh}

/* ── MISSING BUTTONS & DETAILS ─────────────────── */
.btn-g{font-family:var(--font-mono);font-size:13px;font-weight:700;color:#fff;background:var(--color-signal);border:1px solid var(--color-signal);border-radius:var(--r-button);padding:12px 20px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.btn-g:hover{background:var(--hover-fill);color:#fff;box-shadow:var(--shadow-signal)}
.btn-o{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--color-chalk);background:transparent;border:1px solid var(--color-fog);border-radius:var(--r-button);padding:12px 20px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:border-color .25s,color .25s}
.btn-o:hover{border-color:var(--color-signal);color:var(--color-signal)}
.cdet-ico{width:38px;height:38px;background:transparent;border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:var(--color-signal)}
.cdot{display:none}
.cring{display:none}

/* ── EVENTOS · Soho Talks ───────────────────────── */
.ev-home-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:40px}
.ev-home-more{display:flex;justify-content:center;margin-top:36px}
/* Próximos/Pasados (.evtab) y los chips de Tema/Formato (.evchip) ahora
   viven en una sola fila (.ev-filterbar) con un título que agrupa a los
   dos conjuntos de filtros. */
.ev-filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;margin-bottom:40px}
.ev-filterbar-title{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-chalk)}

.evtabs{display:inline-flex;align-items:center;gap:8px}
.evfilter-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.evfilter-label{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-right:2px}
/* .evtab y .evchip comparten exactamente el mismo formato que .chip-opt
   (los chips del Quiz en /servicios/talent-as-a-service/): mismo pill,
   padding, tipografía, fondo (--color-carbon, más oscuro que el
   --color-onyx de la sección, igual que el contraste de .chip-opt dentro
   de .quiz-box) y estado activo — para que los 11 elementos de este
   filtro (Próximos, Pasados, Tema + sus 4 valores, Formato + sus 3
   valores) se vean del mismo tamaño en vez de que Próximos/Pasados salgan
   más grandes que el resto. */
.evtab,.evchip{display:inline-flex;align-items:center;background:var(--color-carbon);border:1px solid var(--color-graphite);border-radius:20px;padding:8px 16px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em;color:var(--color-ash);cursor:pointer;transition:background-color .22s,border-color .22s,color .22s,box-shadow .22s}
.evtab:hover,.evchip:hover{border-color:var(--color-signal);color:var(--color-chalk)}
.evtab.act,.evchip.act{background:var(--color-signal);border-color:var(--color-signal);color:#000}
/* Mismo criterio que .chip-opt.is-chosen:hover: un chip ya activo solo
   cambia de tono al hover (verde del CTA "Agendar reunión"), sin sombra. */
.evtab.act:hover,.evchip.act:hover{background:var(--hover-fill);border-color:var(--hover-fill);box-shadow:none;color:#000}

.evc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.evc{position:relative;border:1px solid var(--line);background:var(--color-onyx);transition:background .3s var(--ease);overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
/* Card completa clickeable (abre el modal del evento, ver JS): misma
   familia Tarjeta que .svc-card en /servicios/ — tinte de fondo
   (--hover-tint, coincide con el valor que ya tenía --color-iron) + línea
   de acento arriba (--hover-line). El ::before necesita z-index explícito
   porque .evc-cover va pegado al borde superior sin padding que le deje
   espacio (a diferencia de .svc-card). */
.evc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--hover-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:6}
.evc:hover::before{transform:scaleX(1)}
.evc:hover{background:var(--hover-tint)}
.evc-cover{position:relative;aspect-ratio:16/10;background:var(--color-void);overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.evc-cover-top{display:flex;align-items:center;gap:6px;position:relative;z-index:3;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.evc-cover-top .material-symbols-outlined{font-size:15px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20}
.evc-cover-top b{color:#fff;font-family:var(--font-mono);font-weight:700;text-transform:none;letter-spacing:-.02em}
.evc-cover h4{position:relative;z-index:3;color:#fff;font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:-.01em;line-height:1.2}
.evc-cover.has-photo{justify-content:flex-end}
.evc-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;object-position:center}
.evc.is-pasado .evc-photo{filter:grayscale(1)}
.evc-cover-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.9) 100%)}
.evc-cover.has-photo .evc-cover-top{color:var(--accent)}
.evc-body{padding:24px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.evc-tags{display:flex;gap:6px;flex-wrap:wrap}
.evc-meta{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;display:flex;flex-direction:column;gap:6px}
.evc-meta span{display:flex;align-items:center;gap:6px}
.evc-meta .material-symbols-outlined{font-size:15px}
/* .evc-more (botón "Ver más") se quitó: la card completa ya es clickeable
   (ver .evc:hover más arriba), tener además un botón adentro era
   redundante — mismo criterio que .svc-card, que tampoco lleva ningún
   botón ni ícono de texto: el estado hover lo resuelve solo el token
   de la card. */
.evc-empty{grid-column:1/-1;padding:60px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.evc-empty-txt{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px}

.ev-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.ev-modal.on{display:flex}
.ev-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.ev-modal-box{position:relative;background:var(--color-onyx);border:1px solid var(--line);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:40px}
.ev-modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border:1px solid var(--line);background:var(--color-onyx);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.ev-modal-close:hover{background:var(--accent);color:#fff}
.ev-modal-box .evc-tags{margin-bottom:16px}
.ev-modal-box h3{font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:-.01em;margin-bottom:16px;padding-right:40px;color:var(--color-chalk)}
.ev-modal-box p.ev-desc{font-size:15px;font-weight:300;line-height:1.6;color:var(--text);margin-bottom:8px}
.ev-drow{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ev-drow:first-of-type{border-top:none}
.ev-dk{font-family:var(--font-mono);font-size:12px;color:var(--muted);width:110px;flex-shrink:0;padding-top:2px}
.ev-dv{font-size:15px;font-weight:500;color:var(--color-chalk)}
#evmLumaLink.is-disabled{background:var(--color-onyx);color:var(--muted);border:1px solid var(--line);pointer-events:none;box-shadow:none}

@media(max-width:1024px){
  .evc-grid{grid-template-columns:1fr}
}