/* ══════════════════════════════════════════════
   THEME-TYPOCOLOR.CSS — Piel turquesa "Typo & Color"
   SOHO.lat Design System
   ══════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────── */
:root{
  --color-parchment:#45CDB5;
  --color-bone-paper:#ffffff;
  --color-ash-rule:#278877;
  --color-soft-carbon:#1b1b1c;
  --color-ink:#000000;
  --color-slate:#717476;
  --color-graphite:#4d5153;
  --color-smoke:#6b6b6b;
  --color-pewter:#666666;
  --color-fog-border:#c8cacd;
  --color-on-accent-muted:#333333;
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  /* Bridge variables for base.css compatibility */
  --bg:var(--color-parchment);
  --bg2:#ffffff;
  --bg3:#f0f0ee;
  --ink:#000000;
  --text:#000000;
  --muted:#717476;
  --muted2:rgba(0,0,0,.38);
  --line:#278877;
  --line-strong:#000000;
  --accent:#45CDB5;
  --accent-rgb:69,205,181;
  --g:#45CDB5;
  --g2:#5fe0c7;
  --g3:rgba(69,205,181,.22);
  /* Sistema de hover estándar (ver nota en base.css). */
  --hover-fill:var(--g2);
  --hover-tint:var(--g3);
  --hover-ring:var(--color-ink);
  --hover-text:var(--g);
  --hover-line:var(--color-parchment);
  /* Familia Superficie: bloques informativos NO clickeables (.case-detail,
     .vc-stack, .vc). Antes era var(--g3) (rgba con alpha .22) — se veía
     bien en .case-detail/.vc porque están directo sobre el fondo blanco
     de la página, pero .vc-stack vive dentro de .mdrow-cards, que tiene
     fondo NEGRO (var(--color-ink)) detrás. Un rgba con transparencia se
     mezcla con lo que hay detrás de la caja, no con el blanco de la
     página — ahí el mismo tinte se veía como un verde musgo oscuro en
     vez de un verde claro. Se deja un valor OPACO y equivalente (el
     resultado de mezclar ese mismo rgba sobre blanco), para que se vea
     igual sobre blanco Y no dependa de qué haya detrás.
     2026-08: a pedido, 50% más transparente que antes — se recalculó
     mezclando rgba(69,205,181,.11) (mitad del alpha .22 original) sobre
     blanco → #EBFAF7. Mismo método opaco-equivalente, solo con menos
     intensidad. */
  --hover-surface:#EBFAF7;
  --font:var(--font-sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --cont:1280px;
  --nav-height:72px;
  --radius:0px;
  --r-pill:9999px;
  --r-flat:0px;
  --text-caption:14px;
  --text-body-lg:18px;
  --text-subheading:20px;
  --text-heading-sm:25px;
  --text-heading:34px;
  --text-heading-lg:48px;
  --text-display-sm:61px;
  --text-display:99px;
  --card-padding:29px;
}

/* ── BODY ──────────────────────────────────────── */
body{font-family:var(--font-sans);font-weight:500;background:var(--color-bone-paper);color:var(--color-ink);-webkit-font-smoothing:antialiased}
body::before,body::after{content:none}

/* ── GRAIN & CURSOR (disabled for typocolor) ──── */
.grain{display:none}
#CUR{display:none}

/* ── NAV ───────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;background:rgba(69,205,181,.85);backdrop-filter:blur(6px);border-bottom:1px solid #0d8f7a}
.brand{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.02em;cursor:pointer;display:flex;align-items:center;text-decoration:none}
.brand-svg{height:26px;width:auto;display:block}
.brand-svg path{fill:var(--color-ink)}
.brand-logo{height:26px;width:auto;cursor:pointer}
.footer-logo{height:24px;width:auto}
.footer-logo path{fill:#ffffff !important}
.nlogo{display:flex;align-items:center;gap:14px}
.nl-word{font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--color-ink)}
.nl-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:28px;background:var(--color-ink);border:1px solid var(--color-ink);font-family:var(--mono);font-weight:700;line-height:1;color:#fff}
.nl-badge b{font-size:12px}.nl-badge i{font-size:12px;font-style:normal;letter-spacing:.1em}
.nl-tag{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--color-on-accent-muted)}
.nl-tag-wrap{display:flex;align-items:center;gap:14px}
.nlinks{display:flex;align-items:center;gap:24px}
.nlinks a{position:relative;font-size:13px;color:var(--color-on-accent-muted);cursor:pointer;text-decoration:none;padding:4px 0;transition:color .25s var(--ease)}
.nlinks a::after{content:none}
.nlinks a:hover{color:var(--color-ink)}
.nlinks a.act{color:#000;font-weight:700}
.nbtn{font-size:13px;color:var(--color-ink);border:1px solid var(--color-ink);border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;background:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
/* No tenía ningún :hover — familia Relleno, igual que en A-Lima. */
.nbtn:hover{background:var(--hover-fill);box-shadow:0 0 0 1px var(--hover-ring)}

/* ── NAV MÓVIL — hamburguesa + panel ── */
.nav-burger{color:var(--color-ink);border-radius:var(--r-pill);-webkit-tap-highlight-color:transparent}
@media(hover:hover){.nav-burger:hover{background:var(--hover-tint)}}
@media(max-width:768px){
  .nlinks{background:var(--color-parchment);border-bottom:1px solid #0d8f7a}
}

/* ── FILTER SHEET MÓVIL — /eventos/ y /blog/ ── */
.filter-trigger-btn{background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--color-smoke);-webkit-tap-highlight-color:transparent}
@media(hover:hover){.filter-trigger-btn:hover{border-color:var(--color-ink);color:var(--color-ink)}}
@media(max-width:768px){
  /* Blanco a propósito, NO var(--color-parchment): en este skin
     --color-parchment y --g (fondo del chip "act") son el mismo teal —
     un sheet teal dejaría el chip activo invisible contra el fondo. */
  .filter-sheet{background:#fff;border-top:1px solid var(--line)}
  .filter-sheet-handle{background:var(--line)}
  .filter-sheet-title{color:var(--color-ink)}
  .filter-sheet-close{color:var(--color-ink);-webkit-tap-highlight-color:transparent}
}

/* ── PAGES ─────────────────────────────────────── */
.pg{padding-top:72px}
.pgbody{padding-top:72px}

/* ── TIPOGRAFÍA ────────────────────────────────── */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.icon-lime{color:var(--color-parchment)}
h1.disp{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.06;font-size:clamp(30px,5vw,54px);max-width:720px}
h2.disp{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.1;font-size:clamp(24px,3.4vw,36px)}
p.lead{font-size:15px;line-height:1.6;color:var(--color-slate);margin-top:16px;max-width:560px}
.sh1{font-family:var(--font-display);font-size:clamp(42px,6vw,84px);font-weight:900;letter-spacing:-.04em;line-height:.98}
.sh2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,52px);font-weight:900;letter-spacing:-.035em;line-height:1.02}
.sh1 em,.sh2 em{font-style:normal;font-weight:500;color:var(--color-ink)}
.sh1 em::before,.sh2 em::before{content:"/";color:#0d8f7a;margin-right:.15em;font-weight:900}
.sp{font-size:16px;font-weight:500;line-height:1.55;color:var(--color-slate);max-width:880px}
.sep{width:100%;height:1px;background:var(--color-ash-rule)}
.slabel{font-size:12px;letter-spacing:.04em;color:var(--color-ink);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.slabel::before{content:none}
.eyebrow{font-size:12px;letter-spacing:.04em;color:var(--color-ink);margin-bottom:16px}
.eyebrow::before{content:none}.eyebrow::after{content:none}
.lead{font-size:15px;line-height:1.6;color:var(--color-slate);max-width:560px;margin-top:16px}
.section-heading{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.4vw,36px);line-height:1.1;letter-spacing:-.02em;max-width:720px;margin-bottom:16px}
.section-body{font-size:15px;line-height:1.6;color:var(--color-slate);max-width:560px}

/* ── SECCIONES ─────────────────────────────────── */
.sec{background:var(--color-bone-paper);padding:56px 0}
/* 2026-09-02 — a pedido explícito: se quitó la línea verde/teal
   (var(--color-ash-rule)) que .sec+.sec dibujaba en el borde superior de
   CADA sección, cortando la página completa de lado a lado. La
   separación entre secciones se resuelve con el contraste de fondo
   (.sec--alt, gris #f7f7f5) donde haga falta, no con una línea de color
   — ver .sec--alt más abajo y su uso explícito en los bloques de Blog
   (home) y Casos de éxito (/sobre/). No confundir con los bordes de
   contorno de contenedores (.card, .hero-stats, .grid2/3/4, .row-item,
   etc.), que siguen usando var(--color-ash-rule) sin cambios — esos NO
   son los que se pidió quitar. .hairline-top también quedó neutralizado
   por el mismo motivo (no tiene uso actual en el sitio). */
.sec-sm{padding:32px 0}
.sec--alt{background:#f7f7f5}
.sec-tight{background:var(--color-bone-paper);padding:32px 0}
.hairline-top{border-top:none}
.divider{height:4px;background:var(--color-parchment)}

/* ── HERO ──────────────────────────────────────── */
.hero{min-height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;border-bottom:1px solid var(--color-ash-rule);background:var(--color-bone-paper);margin-bottom:28px}
.hero-main{display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.hero-main h1{font-family:var(--font-display);font-size:clamp(36px,5.6vw,64px);font-weight:900;letter-spacing:-.04em;line-height:.94;max-width:900px}
.hero-main h1 em{font-style:normal;font-weight:500}
.hero-main h1 em::before{content:"/";color:#0d8f7a;margin-right:.12em;font-weight:900}
.hero p{font-size:15px;line-height:1.6;color:var(--color-slate);max-width:520px;margin:20px 0 28px}
.hero-lead{margin-top:16px;max-width:560px;font-size:16px;font-weight:500;line-height:1.55;color:var(--color-slate)}
.hero-slides{position:relative;min-height:320px}
.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-ink);background:#fff;color:var(--color-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s var(--ease),color .2s var(--ease)}
.hero-arrow-prev{left:0}
.hero-arrow-next{right:0}
.hero-arrow:hover{background:var(--color-ink);color:#fff}
.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-ink);background:#fff;cursor:pointer;transition:background .2s var(--ease)}
.hero-dot.is-active{background:var(--color-ink)}
@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:#0d8f7a;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:18px;display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-ash-rule);margin-top:32px}
.hstat{padding:24px 32px;border-right:1px solid var(--color-ash-rule);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-size:clamp(32px,4vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#000}
.hstat-l{font-size:12px;color:var(--color-smoke);margin-top:6px}
.h1sm{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.5vw,48px);line-height:1.06;letter-spacing:-.02em;max-width:720px}

/* ── BOTONES ───────────────────────────────────── */
.btn{font-size:13px;border-radius:var(--r-pill);padding:10px 20px;cursor:pointer;border:1px solid var(--color-ink);display:inline-block;text-decoration:none}
.btn-fill{background:#45CDB5;color:#000;font-size:13px;border-radius:var(--r-pill);padding:10px 20px;border:1px solid var(--color-ink);display:inline-flex;text-decoration:none;cursor:pointer}
.btn-line{background:none;color:var(--color-ink);font-size:13px;border-radius:var(--r-pill);padding:10px 20px;border:1px solid var(--color-ink);display:inline-flex;text-decoration:none;cursor:pointer}
.btn-line:hover{background:var(--color-parchment)}
.btn-g{font-size:13px;font-weight:500;color:var(--color-ink);background:var(--color-parchment);border:1px solid var(--color-ink);border-radius:var(--r-pill);padding:10px 20px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:background .25s var(--ease)}
.btn-g:hover{background:var(--hover-fill)}
.btn-o{font-size:13px;font-weight:500;color:var(--color-ink);background:#fff;border:1px solid var(--color-ink);border-radius:var(--r-pill);padding:10px 20px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:background .25s var(--ease)}
.btn-o:hover{background:var(--color-parchment)}
.btn-outline{background:transparent;border:1px solid var(--color-ink);color:var(--color-ink);padding:9px 18px;border-radius:var(--r-pill);font-size:12px;font-weight:500;text-decoration:none;cursor:pointer}

/* ── STATS ─────────────────────────────────────── */
.stats-demo{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-ash-rule)}
.stat{padding:24px;text-align:center}
.stat .n,.stat-n{font-family:var(--font-display);font-size:54px;font-weight:900;color:#000}
.stat .l,.stat-l{font-size:12px;color:var(--color-smoke);margin-top:4px}

/* ── CARDS ─────────────────────────────────────── */
.card{background:var(--color-bone-paper);border:1px solid var(--color-ash-rule);padding:28px 32px}
.card .material-symbols-outlined{font-size:24px;color:#0d8f7a;margin-bottom:14px;display:block}
.card-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-smoke)}
.card h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-sm)}
.card h3.sm{font-size:19px}
.card p{font-size:13px;color:var(--color-slate);line-height:1.5;margin-top:8px}
.card .tags{font-size:12px;color:var(--color-ink);margin-top:14px;letter-spacing:.02em;text-transform:uppercase}
.card.clickable:hover{background:var(--g3)}
.card .go-arr{color:#0d8f7a}

/* ── GRIDS ─────────────────────────────────────── */
.grid2{border:1px solid var(--color-ash-rule)}
.grid3{border:1px solid var(--color-ash-rule)}
.grid4{border:1px solid var(--color-ash-rule)}
.cell{padding:28px 32px}
.rule-r{border-right:1px solid var(--color-ash-rule)}
.rule-b{border-bottom:1px solid var(--color-ash-rule)}

/* ── CHIPS ─────────────────────────────────────── */
/* Redondeo de chips en B-Teal, a pedido puntual: 4px en vez del --r-pill
   (9999px) que comparten con botones/badges. #pg-blog .cat-chip vive en
   base.css (con la misma especificidad ID+clase) — se repite acá para
   ganarle por orden de cascada, sin tocar el token --r-pill en sí (lo
   siguen usando .btn*, .nbtn, .fsub, .skin-tab, .success-badge, .avatar
   — botones y círculos, no chips).
   2026-08-31: ronda 2, a pedido explícito de que TODOS los chips de la
   skin queden en 4px. Se cerraron los que faltaban, mismo patrón:
   .stag (tags de evento en /eventos/ — AGOSTO/PRESENCIAL/país—, y tags
   de servicio en /ia/ — AI Squads/MVP/Legacy—), .ctag (chip de sector en
   /casos-de-exito/ y donde se repitan esas cards), .tag (skills de los
   perfiles del quiz en /servicios/talent-as-a-service/ — React/Node.js/
   AWS/etc.) y .jbadge (Ciudad/Modalidad en /sobre/carreras/). .tag-pill
   y .success-badge quedan sin tocar por no tener ningún uso real en el
   HTML/JS del sitio (CSS muerto, ver grep). */
.chip{font-size:12px;border:1px solid var(--color-ink);border-radius:4px;padding:8px 16px;cursor:pointer;background:none;transition:background .2s}
#pg-blog .cat-chip{border-radius:4px}
.chip:hover{background:#45CDB5}
.tag-chips{margin-top:24px}
.tag-pill{border:1px solid #0d8f7a;color:#0d8f7a;border-radius:var(--r-pill)}
/* .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:20px;align-items:center;margin-top:24px}
.logo-item{display:flex;align-items:center;justify-content:center;color:var(--color-ink)}
.logo-item svg{height:26px;width:auto;max-width:100%}

/* ── ROW ITEMS ─────────────────────────────────── */
/* .row (sección de 2 columnas, sin click) ya no comparte look con .row-item
   (lista clickeable, sin uso hoy en el sitio) — ver base.css. Solo el color
   de texto se mantiene acá; cursor, borde inferior y gap quedan en base.css. */
.row{color:var(--color-ink)}
.row-item .num{font-size:12px;color:var(--color-smoke);margin-right:16px}
.row-item h3{font-family:var(--font-display);font-weight:500;font-size:19px;display:inline}
.row-item .arr{color:#0d8f7a}
.row-list{border-top:1px solid var(--color-ash-rule)}
.row-item{border-bottom:1px solid var(--color-ash-rule);color:var(--color-ink)}
.row-item:hover{color:#0d8f7a}
.row-item .num{font-size:12px;color:var(--color-smoke);margin-right:16px}
.row-item h3{font-family:var(--font-display);font-weight:500;font-size:19px;display:inline;color:inherit}
.row-item .arr{color:#0d8f7a}

/* ── BACK LINK ─────────────────────────────────── */
.back-link{font-size:12px;color:var(--color-smoke);margin-bottom:18px}
.back-link:hover{color:var(--color-ink)}

/* ── SVC QUOTE ─────────────────────────────────── */
.svc-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(19px,2.2vw,25px);line-height:1.35;color:var(--color-ink);max-width:900px;margin:16px 0}
.svc-quote::before,.svc-quote::after{content:'"';color:#0d8f7a}

/* ── CASE BLOCKS ───────────────────────────────── */
.case-block{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--color-ash-rule)}
.case-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.case-block b{font-family:var(--font-display);font-size:17px;display:block;margin-bottom:10px}
.case-block .tag-uy{font-size:12px;color:var(--color-smoke);border-left:1px solid var(--color-ash-rule);padding-left:10px;margin-left:8px}
.cd-row{display:grid;grid-template-columns:110px 1fr;gap:8px;font-size:13px;margin-bottom:6px}
.cd-row .k,.cd .k{color:var(--color-smoke)}
.cd-row .v,.cd .v{color:var(--color-slate)}
.cd-row .v.res,.cd .v.res{color:var(--color-ink);font-weight:500}
.results{display:flex;gap:32px;margin-top:14px}
.results .n{font-family:var(--font-display);font-size:var(--text-heading);color:#0d8f7a}
.results .l{font-size:12px;color:var(--color-smoke)}
.results-blk{display:flex;gap:28px;margin-top:14px}
.results-blk .n{font-family:var(--font-display);font-size:28px;font-weight:900;color:#0d8f7a}
.results-blk .l{font-size:12px;color:var(--color-smoke)}

/* ── 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);border:1px solid var(--color-ash-rule)}
.vc{position:relative;padding:32px 28px;border-right:1px solid var(--color-ash-rule);transition:background .3s var(--ease);overflow:hidden}
.vc:nth-child(3n){border-right:none}
.vc:hover{background:var(--hover-surface)}
.vc-ico{width:40px;height:40px;border:1px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.vc h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.vc p{font-size:13px;font-weight:500;line-height:1.5;color:var(--color-slate)}
/* .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 gris para ambas cajas (antes .is-guarantee tenía un tinte
   teal propio vía var(--g3) en el <style> de ia-squad/index.html; se
   quitó de ahí para unificar con .is-risk). Viven dentro de .sec--alt
   (fondo gris #f7f7f5) — mismo mecanismo que .ia-svc: fondo gris
   explícito propio (mismo valor que .sec--alt) y hover al blanco de base
   (--color-bone-paper), nunca --hover-surface tal cual (sería gris sobre
   gris, invisible).
   El cuadrado del ícono lleva fill blanco fijo (--color-bone-paper, no
   transparente) porque el contenedor es gris, 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)}` (acá --bg2:#fff, o
   sea blanco puro, no el gris de .sec--alt) — mismo empate de
   especificidad que las reglas de abajo, así que sin el ancestro extra
   (.valor-grid) el fondo en reposo de .is-risk quedaba en blanco puro en
   vez del gris, y su :hover en blanco sobre blanco (invisible). */
.vc.is-risk,.vc.is-guarantee{display:flex;align-items:center;gap:20px}
.valor-grid .vc.is-risk,.valor-grid .vc.is-guarantee{background:#f7f7f5}
.valor-grid .vc.is-risk:hover,.valor-grid .vc.is-guarantee:hover{background:var(--color-bone-paper)}
.vc.is-risk .vc-ico,.vc.is-guarantee .vc-ico{flex-shrink:0;margin-bottom:0;background:var(--color-bone-paper)}
.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:14px}.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);border:1px solid var(--color-ash-rule)}
.svc-card{position:relative;padding:36px 32px;border-right:1px solid var(--color-ash-rule);border-bottom:1px solid var(--color-ash-rule);transition:background .3s var(--ease);overflow:hidden;text-decoration:none;color:var(--color-ink);display:block}
.svc-card:nth-child(2n){border-right:none}
.svc-card:last-child{border-right:none}
/* Línea de acento arriba (top:0) + ::before, igual que .svc-card en
   A-Lima — 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:3px;background:var(--hover-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
/* :not(.svc-card--soon) — "Soho Academy" no es clickeable, no debe tener
   hover (ver nota igual en theme-a-lima.css). */
.svc-card:not(.svc-card--soon):hover::before{transform:scaleX(1)}
.svc-card:not(.svc-card--soon):hover{background:var(--hover-tint)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.svc-ico{font-size:40px;line-height:1}
.svc-n{display:none}
.svc-card h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.svc-card p{font-size:13px;font-weight:500;line-height:1.5;color:var(--color-slate);margin-bottom:14px}
.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á negro, en .tag es --color-smoke). */
.stag{font-size:12px;color:var(--color-ink);background:#fff;border:1px solid var(--color-ash-rule);padding:3px 8px;border-radius:4px}
.stag-cta{background:var(--g);border-color:var(--g);color:var(--color-ink);font-weight:700;text-decoration:none;transition:opacity .2s var(--ease)}
.stag-cta:hover{opacity:.8;color:var(--color-ink)}
.svc-meta{border-top:1px solid var(--color-ash-rule)}
.svc-meta div{font-size:13px;color:var(--color-slate)}
.svc-meta span{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-smoke);margin-bottom:6px}

/* ── INDUSTRIES ────────────────────────────────── */
.ind-rows{border-top:1px solid var(--color-ash-rule)}
.ind-row{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--color-ash-rule);text-decoration:none;color:var(--color-ink);transition:padding-left .35s var(--ease),background .3s var(--ease)}
.ind-row:hover{padding-left:20px;background:var(--g3)}
.ind-row-l{display:flex;align-items:baseline;gap:16px;min-width:0;flex-shrink:1}
.ind-row-n{display:none}
.ind-row h3{font-family:var(--font-display);font-size:clamp(20px,2.6vw,34px);font-weight:500;letter-spacing:-.02em}
.ind-row-meta{font-size:12px;color:var(--color-smoke);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:20px;transition:transform .35s var(--ease);color:#0d8f7a;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(--ink);background:#fff;text-decoration:none;color:var(--color-ink);transition:background .25s var(--ease)}
.cfc-img{height:180px;background:var(--bg3);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:24px 28px;display:flex;flex-direction:column;flex:1}
.cfc-meta{display:flex;gap:12px;font-size:12px;color:var(--color-smoke);margin-bottom:12px}
.cfc-meta span{position:relative;padding-right:12px}
.cfc-meta span::after{content:'·';position:absolute;right:3px}
.cfc-meta span:last-child::after{content:''}
.cfc h3{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.cfc-desc{font-size:13px;font-weight:500;line-height:1.5;color:var(--color-slate);margin-bottom:16px}
.cfc-results{display:flex;gap:24px;margin-bottom:14px;margin-top:auto}
.cfc-r-n{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1}
.cfc-r-l{font-size:12px;color:var(--color-smoke);margin-top:4px;max-width:110px}
.ctag{display:inline-block;align-self:flex-start;font-size:12px;color:var(--color-ink);background:#fff;border:1px solid var(--color-ash-rule);padding:3px 8px;border-radius:4px}

/* ── 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;font-weight:500;color:var(--color-slate);max-width:640px;margin-top:14px;line-height:1.5}
.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-ink);margin-bottom:16px}
.sdlc-stage h6{font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:-.01em;margin-bottom:5px}
.sdlc-stage>span{font-size:13px;font-weight:500;color:var(--color-slate)}
.sdlc-stats-row{display:flex;flex-wrap:wrap;gap:48px 64px;margin-top:52px}
.sdlc-stat-n{font-family:var(--font-display);font-size:clamp(32px,3.4vw,46px);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.sdlc-stat-l{font-size:13px;font-weight:500;color:var(--color-slate);margin-top:8px;max-width:230px;line-height:1.5}
.sdlc-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:52px}
.sdlc-cta-row p{font-size:13px;font-weight:500;color:var(--color-slate);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}}

/* ── CASE DETAIL ───────────────────────────────── */
/* No es clickeable: familia Superficie, no Contorno/Tinte — ver base.css */
.case-detail{border:1px solid var(--color-ash-rule);padding:32px 34px;margin-bottom:16px;background:#fff;transition:background .25s var(--ease)}
.case-detail:hover{background:var(--hover-surface)}
.case-detail h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:16px}
.cd-k{font-size:12px;letter-spacing:.04em;color:var(--color-smoke);text-transform:uppercase}
.cd-v{font-size:14px;font-weight:500;line-height:1.5}
.cd-v.res{font-weight:700;color:var(--color-ink)}

/* ── IA / SOLUCIONES ───────────────────────────── */
/* No son clickeables (son <div>, sin href): familia Superficie, no Tinte.
   Ojo: estas grids viven dentro de secciones .sec--alt (fondo gris
   #f7f7f5) — por eso NO usan --hover-surface (que acá es un tinte de
   acento, pensado para cuando el reposo es blanco). Van con fondo gris
   explícito propio (mismo valor que .sec--alt) y hover hacia el blanco
   de base, igual que .vc-stack en Inicio. */
.ia-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-ash-rule)}
.ia-svc-grid-4{grid-template-columns:repeat(4,1fr)}
.ia-svc{padding:28px 24px;background:#f7f7f5;border-right:1px solid var(--color-ash-rule);border-bottom:1px solid var(--color-ash-rule);transition:background .3s var(--ease)}
.ia-svc:nth-child(3n){border-right:none}
/* .ia-svc-grid-4: la regla nth-child(3n) de arriba asume 3 columnas — en
   4 columnas hay que anularla (el ítem 3 no es el último de su fila) y
   sacar el borde derecho del ítem 4 en su lugar. */
.ia-svc-grid-4 .ia-svc:nth-child(3n){border-right:1px solid var(--color-ash-rule)}
.ia-svc-grid-4 .ia-svc:nth-child(4n){border-right:none}
.ia-svc:hover{background:var(--color-bone-paper)}
.ia-svc-ico{font-size:36px;margin-bottom:14px}
.ia-svc h4{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.ia-svc p{font-size:12px;font-weight:500;line-height:1.5;color:var(--color-slate)}
.ia-use{border:1px solid var(--color-ash-rule);margin-top:20px}
.ia-use-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
/* No son clickeables (son <div>, sin href): familia Superficie. Viven
   sobre .sec blanca, así que usan --hover-surface tal cual, mismo
   mecanismo que .case-detail/.cpl-card. */
.iuc{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;border-right:1px solid var(--color-ash-rule);border-bottom:1px solid var(--color-ash-rule);background:#fff;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-size:15px;font-weight:500;margin-bottom:4px}
.iuc p{font-size:12px;font-weight:500;line-height:1.5;color:var(--color-slate)}
.iuc .iuc-metric{font-size:12px;color:var(--color-ink);margin-top:6px;display:block}
.iuc-ico{flex-shrink:0;width:46px;height:46px;border:1px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--color-bone-paper)}
@media(max-width:600px){.iuc{flex-direction:column;align-items:flex-start;gap:14px}}

/* ── INSIGHTS ──────────────────────────────────── */
.ins-feat{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--color-ash-rule);margin-bottom:20px}
.ins-feat-img{min-height:280px;background:var(--bg3)}
.ins-feat-body{padding:36px;display:flex;flex-direction:column;justify-content:center}
.ins-tags{font-size:12px;color:var(--color-smoke);margin-bottom:12px}
.ins-feat-body h3{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:12px}
.ins-date{font-size:12px;color:var(--color-smoke);margin-bottom:12px}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.igc{display:block;text-decoration:none;color:var(--color-ink);border:1px solid var(--color-ash-rule);background:#fff;padding:14px}
.igc-img{aspect-ratio:16/9;margin-bottom:14px;background:var(--bg3);border:1px solid var(--color-ash-rule)}
.igc h4{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.igc p{font-size:12px;font-weight:500;line-height:1.5;color:var(--color-slate);margin-top:6px}

/* ── ABOUT / VALUES ────────────────────────────── */
/* .vcard ("Tres leyes inquebrantables") NO es clickeable — familia
   Superficie, nunca Tinte/Tarjeta. Vive dentro de .sec--alt (fondo gris):
   igual que .ia-svc, --hover-surface tal cual sería gris-sobre-gris, así
   que lleva su propio fondo gris explícito y el hover va al blanco base. */
.about-split{gap:48px}
.about-img{aspect-ratio:3/4;background:var(--bg3);border:1px solid var(--color-ash-rule)}
.values-grid{border:1px solid var(--color-ash-rule);margin-top:32px}
.vcard{position:relative;padding:32px 28px;border-right:1px solid var(--color-ash-rule);background:#f7f7f5;transition:background .3s var(--ease);overflow:hidden}
.vcard:last-child{border-right:none}
.vcard:hover{background:var(--color-bone-paper)}
.vcard .vn{font-size:12px;color:var(--color-smoke);margin-bottom:12px}
.vcard h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.vcard p{font-size:13px;font-weight:500;line-height:1.5;color:var(--color-slate)}

/* ── 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-ash-rule);background:#fff;transition:background .25s var(--ease)}
.cpl-card:hover{background:var(--hover-surface)}
.cpl-ico{flex-shrink:0;font-size:40px;line-height:1}
.cpl-body{flex:1;min-width:0}
.cpl-body h3{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.cpl-body p{font-size:13px;font-weight:500;line-height:1.5;color:var(--color-slate);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:12px;padding:22px;border:1px solid var(--color-ash-rule);text-decoration:none;color:var(--color-ink);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)}
.job-row:hover{background:var(--hover-tint)}
.job-row:hover::before{transform:scaleX(1)}
.job-l{display:flex;align-items:center;gap:14px}
.jbadges{display:flex;flex-wrap:wrap;gap:6px}
.jbadge{font-size:12px;border:1px solid var(--color-ink);padding:4px 9px;border-radius:4px}
.job-row h3{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.02em;padding-right:24px}
.jarr{position:absolute;top:20px;right:20px;font-size:18px;transition:transform .35s var(--ease);color:#0d8f7a}
.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-ash-rule)`, 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:121px}
.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(--ink)}
.job-row--banner .jb-content{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:22px 22px 22px 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:22px;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 ───────────────────────────────────────── */
.faq-list{margin-top:32px;border-top:1px solid var(--color-ash-rule)}
.faq-item{border-bottom:1px solid var(--color-ash-rule)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--color-ash-rule);font-family:var(--font-sans);font-size:17px;cursor:pointer}
.faq-q .ico{transition:transform .25s var(--ease)}
.faq-q.open .ico{transform:rotate(45deg)}
.faq-ico{font-size:26px;color:var(--color-ink);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:#0d8f7a;-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:14px;color:var(--color-slate);line-height:1.6}

/* ── CTA ───────────────────────────────────────── */
.cta{padding:64px 0}
.cta.inverted{background:var(--color-soft-carbon);color:var(--color-bone-paper)}
.cta.inverted h2{color:var(--color-bone-paper)}
.cta-s{background:var(--color-soft-carbon);border-top:none;padding:64px 0;text-align:center;color:var(--color-bone-paper)}
.cta-s h2{font-family:var(--font-display);font-size:clamp(36px,6vw,72px);font-weight:900;letter-spacing:-.04em;line-height:.96;max-width:900px;margin:0 auto 28px}
.cta-s h2 em{font-style:normal;font-weight:500}
.cta-s h2 em::before{content:"/";color:#0d8f7a;margin-right:.1em;font-weight:900}
.cta-s .btns{justify-content:center}
/* 2026-09-02 — a pedido explícito: en /ia/agentes-sdlc/, el CTA final
   (#contacto.cta-s) usa .slabel + .sh1 (en vez del h2 bare que usan los
   demás .cta-s del sitio — ver nota de .sh1 más abajo y la de #contacto
   en base.css). .slabel y .sh1 em heredan color:var(--color-ink) (negro)
   de sus reglas genéricas, que sobre el fondo oscuro de .cta-s
   (var(--color-soft-carbon)) quedaban casi invisibles. Se fuerza el
   mismo blanco que ya usa .cta-s por defecto. */
.cta-s .slabel,.cta-s .sh1 em,.cta-s .sh2 em{color:var(--color-bone-paper)}

/* ── FORM ──────────────────────────────────────── */
.contact-split{gap:48px;align-items:start}
.cform{background:#fff;border:1px solid var(--color-ash-rule);padding:32px}
.fg label{font-size:12px;color:var(--color-smoke);display:block;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;font-family:var(--font-sans);font-size:14px;border:1px solid var(--color-fog-border);border-radius:0;padding:10px 12px;outline:none;background:#fff}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--color-parchment);box-shadow:0 0 0 1px var(--color-parchment)}
.fsub{width:100%;font-size:13px;font-weight:500;color:var(--color-ink);background:var(--color-parchment);border:1px solid var(--color-ink);padding:12px;cursor:pointer;border-radius:var(--r-pill);transition:background .25s}
.fsub:hover{background:var(--g2)}
.cdet{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.cdet-ico{width:34px;height:34px;background:var(--color-parchment);border:1px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border-radius:50%}
.cdet-k{font-size:12px;color:var(--color-smoke)}
.cdet-v{font-size:15px;font-weight:500;margin-top:2px}
.avatar{width:36px;height:36px;border-radius:var(--r-pill);background:var(--color-ash-rule);display:flex;align-items:center;justify-content:center;font-size:13px}

/* ── FOOTER ────────────────────────────────────── */
footer{background:var(--color-soft-carbon);color:var(--color-bone-paper);padding:56px 0 24px;border-top:none}
.fg-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer h5,.fcol h5{font-size:12px;letter-spacing:.04em;color:#8a8a8a;margin-bottom:14px;text-transform:uppercase}
footer a,.fcol a{display:block;font-size:13px;color:#e5e5e5;text-decoration:none;margin-bottom:8px}
.fcol a:hover{color:var(--hover-text)}
.fbl{font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:-.03em;line-height:.85;margin-bottom:14px;color:#fff}
.fbl-svg{height:26px;width:auto;display:block}
.fbl-svg path{fill:var(--color-bone-paper)}
.f-claim{font-size:12px;color:#8a8a8a;max-width:260px;line-height:1.5}
.f-iso{border-top:1px solid var(--color-ash-rule);padding:24px 0}
.f-iso-label{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--color-slate);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-ink)}
.f-iso-code{font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap;color:var(--color-ink)}
.f-iso-desc{font-size:12px;color:var(--color-slate);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-ash-rule);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:500;letter-spacing:-.01em;font-size:17px}
.f-iso-lg .f-iso-desc{font-family:var(--font-sans);font-weight:500;font-size:13px}
footer .f-iso{border-top-color:#333}
footer .f-iso-label,footer .f-iso-desc{color:#8a8a8a}
footer .f-iso-top .material-symbols-outlined,footer .f-iso-code{color:#fff}
.fbot{display:flex;justify-content:space-between;padding-top:24px;margin-top:32px;border-top:1px solid #333;font-size:12px;color:#8a8a8a}

/* ── VOICE ENTRY ───────────────────────────────── */
#pg-voice{padding-top:0;display:none;align-items:center;justify-content:center;min-height:100vh;text-align:center;background:var(--color-parchment)}
#pg-voice.on{display:flex}
.voice-wrap{text-align:center;padding:40px}
.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}
.voice-logo{width:clamp(180px,26vw,320px);height:auto}
.voice-orbit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
#particleSphere{width:min(52.5vw,330px);height:min(52.5vw,330px)}
.voice-word{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,5vw,48px);color:var(--color-ink);letter-spacing:-.02em}
.voice-tag{font-size:13px;color:var(--color-on-accent-muted);margin-top:10px}
.vsub{font-size:13px;letter-spacing:.04em;color:var(--color-on-accent-muted);margin-top:8px}
.vorb-zone{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:16px}
.vorb{width:64px;height:64px;background:transparent;border:1px solid var(--color-ink);gap:3px}
.vorb-zone .vorb,.vwrap .vorb{margin-top:40px}
.vorb .bar{width:2px;background:var(--color-ink);border-radius:0}
.vorb.listening{background:var(--color-ink)}
.vorb.listening .bar{background:var(--color-parchment);animation-duration:.5s}
.vorb.speaking .bar{animation-duration:.45s}
.vorb.thinking .bar{animation-duration:1.5s}
.vorb-ring{border:1px solid var(--color-ink)}
.vorb-label{font-size:12px;color:var(--color-ink)}
.vorb-status{font-size:16px;color:var(--color-ink);margin-top:10px}
.vorb-hint{font-size:12px;color:var(--color-slate);margin-top:2px}
.voice-enter{font-size:12px;color:var(--color-on-accent-muted);margin-top:12px}
.voice-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* ── AGENTE SOHO — widget ──────────────────────── */
.ag-dot{background:var(--color-parchment);border:1.5px solid var(--color-ink);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.ag-tag{font-family:var(--mono);background:var(--color-ink);color:var(--color-parchment)}
.ag-ripple{border:1.5px solid var(--color-ink)}
.agent-target{outline-color:var(--color-ink)!important;background:var(--g3)!important}
#aCap{background:var(--color-ink);color:#fff;border:1px solid var(--color-ink);font-family:var(--font-sans);font-weight:500}
#aCap b{color:var(--color-parchment);font-weight:700}
#aOrb{background:var(--color-parchment);border:1px solid var(--color-ink)}
#aOrbCanvas{border-radius:50%}
.aorb-label{font-size:12px;color:var(--color-slate)}
.aorb-wrap .chips-row{flex-direction:column;max-width:200px;margin-top:0}
.aorb-wrap .chip{width:100%;text-align:center;background:#fff}

/* ── SELECTOR DE TEMPLATE ──────────────────────── */
/* #tplBtn repite el mismo :hover que .ds-gadget (misma familia Relleno,
   mismo token --hover-fill) — antes tenía #333 (gris) propio, el mismo
   bug ya corregido en A-Lima. 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:var(--color-ink);color:var(--color-parchment)}
#tplBtn:hover{background:var(--hover-fill);color:var(--color-ink)}
#tplMenu{background:var(--color-ink);border-top:1px solid rgba(255,255,255,.15)}
#tplMenu a{color:#fff}
#tplMenu a:hover{background:var(--hover-fill);color:var(--color-ink)}
#tplMenu a.cur{color:var(--color-parchment)}
#tplMenu .tplhdr{color:rgba(255,255,255,.5)}

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

/* ── ELEMENTOS PIEL-ESPECÍFICOS ────────────────── */
.voice-hero--black{display:none}
.voice-hero--corporativa{display:none}
.voice-hero--typocolor{display:block}

/* ── MEDIA PLACEHOLDERS (sin efectos: imágenes a color pleno) ── */
.media{position:relative;display:block;overflow:hidden;border:1px solid var(--color-ash-rule);background:var(--bg3)}
.media-fill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg3)}
.media-fill .material-symbols-outlined{font-size:36px;color:var(--color-smoke)}
.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-parchment);z-index:3}
.media-label{position:absolute;left:0;bottom:0;max-width:100%;box-sizing:border-box;z-index:3;font-size:12px;letter-spacing:.04em;line-height:1.5;color:#fff;background:var(--color-ink);padding:3px 7px}

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

/* ── SKIN SWITCH ───────────────────────────────── */
.mdrow{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;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-ink);background:var(--color-ink);border-radius:16px;overflow:hidden}
.vc-stack{flex:1;background:var(--color-bone-paper);padding:14px 16px;display:flex;flex-direction:row;align-items:center;gap:12px;border-bottom:1px solid var(--color-ash-rule);transition:background .3s var(--ease)}
.vc-stack:last-child{border-bottom:none}
.vc-stack:hover{background:var(--hover-surface)}
.vc-stack .vc-ico{width:28px;height:28px;flex-shrink:0;border:1px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-size:15px;background:#fff}
.vc-stack .vc-text{min-width:0}
.vc-stack h3{font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:3px}
.vc-stack p{font-size:12px;font-weight:500;line-height:1.4;color:var(--color-slate)}
.mdmod{padding:48px 0}
.skin-switch{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.skin-tab{font-size:12px;font-weight:500;color:var(--color-ink);background:#fff;border:1px solid var(--color-ink);border-radius:var(--r-pill);padding:9px 16px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;transition:background .25s var(--ease)}
.skin-tab .skin-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.skin-tab:hover{background:var(--g3)}
.skin-tab.active{background:var(--color-ink);color:#fff;cursor:default}
.skin-card-box{background:#fff;border:1px solid var(--color-fog-border);border-radius:20px;padding:16px}
.skin-card:hover .skin-card-box{background:var(--g3)}
.skin-card-frame{border:1px solid var(--color-ink);border-radius:14px}
.skin-card-name{color:var(--color-ink)}
.skin-card-desc{color:var(--color-slate)}
@media(max-width:900px){.mdrow{grid-template-columns:1fr}}

/* ── VERTICALES SLIDER ─────────────────────────── */
.vert-wrap{border:1px solid var(--color-ash-rule)}
.vert-tabs{display:grid;grid-template-columns:repeat(3,1fr);align-items:end}
.vert-tab{position:relative;text-align:left;font-family:var(--font-sans);background:transparent;border:none;appearance:none;-webkit-appearance:none;border-radius:0;box-sizing:border-box;padding:18px 22px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:background .25s var(--ease)}
.vert-tab:hover{background:var(--g3)}
.vert-tab.active{z-index:3;background:#fff;border:1px solid var(--color-ash-rule);border-bottom:1px solid #fff;margin-top:-1px;margin-bottom:-1px;padding:26px 22px 20px}
.vert-tab.active:first-child{margin-left:-1px}
.vert-tab.active:last-child{margin-right:-1px}
.vert-tab-ico{width:44px;height:44px;flex-shrink:0;border:1px solid var(--color-ink);background:var(--color-parchment);display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease)}
.vert-tab-ico .material-symbols-outlined{font-size:24px;color:var(--color-ink)}
.vert-tab-n{display:none}
.vert-tab-txt{display:flex;flex-direction:column;gap:3px}
.vert-tab-ttl{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.vert-tab-sub{font-size:12px;color:var(--color-smoke)}
.vert-panels{position:relative;min-height:360px;border-top:1px solid var(--color-ash-rule)}
.vert-panel{display:none;padding:48px 44px;background:#fff;animation:vertIn .5s var(--ease)}
.vert-panel.active{display:grid;grid-template-columns:1.15fr .85fr;gap:48px}
@keyframes vertIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vert-eyebrow{font-size:12px;letter-spacing:.04em;color:var(--color-ink);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.vert-eyebrow::before{content:none}
.vert-panel h3{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.vert-panel h3 em{font-style:normal;font-weight:500}
.vert-panel h3 em::before{content:"/";color:#0d8f7a;margin-right:.12em;font-weight:900}
.vert-lead{font-size:14px;font-weight:500;line-height:1.6;color:var(--color-slate);max-width:480px}
/* .vert-ai: ver nota completa en theme-a-lima.css — familia Superficie,
   no el tinte teal (--g3) que tenía antes. Fondo gris fijo igual al de
   .sec--alt (#f7f7f5), sin hover, ícono con fill blanco fijo. */
.vert-ai{margin-top:22px;background:#f7f7f5;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;max-width:480px}
.vert-ai-ico{width:30px;height:30px;background:var(--color-bone-paper);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.vert-ai-txt{font-size:12px;line-height:1.5;color:var(--color-ink)}
.vert-ai-txt strong{font-weight:700}
.vert-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.vert-side{border-left:1px solid var(--color-ash-rule);padding-left:32px;display:flex;flex-direction:column;gap:0}
/* .vert-pt: ver nota completa en theme-a-lima.css — filas sin hover, solo
   informativas, con el mismo acento "/" que h1/h2/h3 em en este skin
   (#0d8f7a). */
.vert-pt{padding:14px 0;border-bottom:1px solid var(--color-ash-rule)}
.vert-pt:first-child{padding-top:0}
.vert-pt:last-child{border-bottom:none}
.vert-pt-k{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-smoke);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.vert-pt-k::before{content:"/";color:#0d8f7a;font-weight:900}
.vert-pt-v{font-size:13px;font-weight:600;line-height:1.55;color:var(--color-ink)}

/* ── STAFFING QUIZ ─────────────────────────────── */
.quiz-box{border:1px solid var(--color-ash-rule);background:#fff;position:relative;overflow:hidden}
.quiz-progress-track{height:3px;background:var(--bg3);width:100%}
.quiz-progress-fill{height:100%;background:var(--color-parchment);width:12.5%;transition:width .45s var(--ease)}
.quiz-header{padding:28px 36px 0;border-bottom:none}
.quiz-back-row{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.quiz-back{width:30px;height:30px;border:1px solid var(--color-ash-rule);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:#fff;transition:border-color .2s,background .2s}
.quiz-back:hover{border-color:var(--color-ink);background:var(--g3)}
.quiz-back.hide{visibility:hidden}
.quiz-back .material-symbols-outlined{font-size:15px}
.quiz-stepnum{font-size:12px;letter-spacing:.08em;color:var(--color-smoke);font-weight:500}
.quiz-panels{position:relative;min-height:320px}
.quiz-panel{display:none;padding:0 36px 36px;animation:panelIn .4s var(--ease)}
.quiz-panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.quiz-q{font-family:var(--font-display);font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.12;margin-bottom:28px;max-width:600px}
.opt-list{display:flex;flex-direction:column;border:1px solid var(--color-ash-rule)}
/* .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.
   2026-08-27: .opt-list usaba gap:1px + background:var(--color-ash-rule)
   para la línea divisoria entre filas. Aunque ese color es opaco, el
   PROBLEMA es que .opt-row:hover pinta un fondo translúcido
   (--hover-tint), que compone con lo que haya detrás de la fila entera
   (no solo en el hueco de 1px) — es decir, con el teal de .opt-list en vez
   del blanco puro que ve .role-card (su contenedor, .role-grid, no tiene
   fondo propio). Resultado: un verde más apagado que el de paso 1. Se
   cambia a border-bottom por fila, igual que en A-Lima — mismo divisor
   visual en reposo, sin ningún fondo de contenedor detrás que se filtre. */
.opt-row{position:relative;background:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .25s var(--ease);border:none;border-bottom:1px solid var(--line);text-align:left;width:100%;font-family:var(--font-sans)}
.opt-row:last-child{border-bottom:none}
.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:15px;font-weight:500;color:var(--color-ink)}
.opt-hint{font-size:12px;color:var(--color-smoke);margin-top:3px;display:block}

/* ── ROLE GRID ─────────────────────────────────── */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-ash-rule)}
.role-card{background:#fff;border:none;border-right:1px solid var(--color-ash-rule);border-bottom:1px solid var(--color-ash-rule);padding:22px 20px;cursor:pointer;text-align:left;position:relative;transition:background .25s var(--ease)}
.role-card:hover{background:var(--g3)}
.role-card.selected{background:var(--g3)}
.role-card.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-parchment)}
.role-icon{font-size:22px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-ink)}
.role-card h4{font-family:var(--font-display);font-size:15px;font-weight:500;margin-bottom:4px}
.role-card p{font-size:12px;font-weight:500;color:var(--color-slate);line-height:1.4}
.role-agent{margin-top:10px;padding-top:8px;border-top:1px solid var(--color-ash-rule);display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-ink)}
.role-agent .dot{width:5px;height:5px;background:var(--color-parchment);border:1px solid var(--color-ink);flex-shrink:0}

/* ── SKILL SEARCH ──────────────────────────────── */
.skill-search{border:1px solid var(--color-ash-rule);display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:16px}
.skill-search input{flex:1;border:none;outline:none;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:transparent}
.skill-search input::placeholder{color:var(--color-smoke)}
.skill-search .material-symbols-outlined{color:var(--color-smoke);font-size:17px}
.chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip-opt{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--color-ash-rule);border-radius:4px;padding:7px 14px;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--color-smoke);cursor:pointer;transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease),transform .18s var(--ease),opacity .2s var(--ease)}
.chip-opt:hover{border-color:var(--color-ink);color:var(--color-ink)}
.chip-opt.is-chosen{background:var(--g);border-color:var(--g);color:var(--color-ink)}
/* Un chip ya elegido (verde) 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}
.chip-opt--custom{border-style:dashed}
.chip-opt--custom-input{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--color-ink);padding:5px 6px 5px 12px;border-radius:4px}
.chip-opt--custom-input input{border:none;outline:none;background:transparent;font-size:13px;color:var(--color-ink);width:140px}
.chip-opt--custom-input input::placeholder{color:var(--color-smoke)}
.chip-opt--custom-input button{border:none;background:var(--color-ink);color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;line-height:1;padding:0;flex:none}
.quiz-actions{display:flex;align-items:center;gap:18px}
.quiz-skip{font-size:12px;color:var(--color-smoke);text-decoration:underline;cursor:pointer}
.quiz-skip:hover{color:var(--color-ink)}

/* ── QFORM (quiz final step) ───────────────────── */
.qform-grid{display:flex;flex-direction:column;gap:16px;max-width:420px}
.qform-field{position:relative}
.qform-field label{position:absolute;top:7px;left:13px;font-size:12px;color:var(--color-smoke);letter-spacing:.03em;pointer-events:none}
.qform-field .req{color:#0d8f7a;position:absolute;left:-14px;top:20px;font-weight:700}
.qform-field input{width:100%;border:1px solid var(--color-ash-rule);border-radius:0;padding:24px 13px 9px;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:#fff;transition:background .2s,box-shadow .2s}
.qform-field input:focus{outline:none;background:var(--g3);box-shadow:0 0 0 1px var(--color-ink)}
.qform-legal{font-size:12px;font-weight:500;color:var(--color-smoke);max-width:420px;margin-top:16px;line-height:1.5}
.qform-legal a{text-decoration:underline}
.qform-legal a:hover{color:var(--color-ink)}

/* ── QUIZ SUCCESS ──────────────────────────────── */
.quiz-success{display:none;padding:0 36px 40px}
.quiz-success.active{display:block;animation:panelIn .4s var(--ease)}
.success-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:var(--color-parchment);border:1px solid var(--color-ink);padding:5px 12px;margin-bottom:18px;border-radius:var(--r-pill)}
.success-title{font-family:var(--font-display);font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:-.02em;margin-bottom:12px;max-width:560px}
.success-copy{font-size:14px;font-weight:500;color:var(--color-ink);max-width:580px;margin-bottom:24px;line-height:1.55}
.success-agent{padding:14px 16px;background:var(--bg3);border-left:3px solid var(--color-parchment);margin-bottom:24px;font-size:12px;font-weight:500;color:var(--color-ink);line-height:1.5;max-width:580px}
.success-agent b{font-weight:700}

/* ── STEPS ─────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-ash-rule)}
.step{padding:36px 30px;border-right:1px solid var(--color-ash-rule);position:relative}
.step:last-child{border-right:none}
.step .num{font-size:12px;color:var(--color-smoke);margin-bottom:16px;letter-spacing:.04em}
.step h3{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.step p{font-size:13px;font-weight:500;color:var(--color-ink);line-height:1.5}

/* ── PROFILES ──────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-ash-rule)}
.profile-card{padding:24px;border-right:1px solid var(--color-ash-rule);border-bottom:1px solid var(--color-ash-rule);transition:background .25s var(--ease);position:relative}
.profile-card:nth-child(3n){border-right:none}
.profile-card:hover{background:var(--g3)}
.profile-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.profile-name{font-family:var(--font-display);font-size:15px;font-weight:500}
.profile-role{font-size:12px;font-weight:500;color:var(--color-smoke);margin-top:2px}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:12px;margin-top:5px;color:var(--color-ink)}
.verified .material-symbols-outlined{font-size:12px;color:#0d8f7a}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.tag{font-size:12px;background:#fff;border:1px solid var(--color-ash-rule);color:var(--color-smoke);padding:3px 8px;border-radius:4px}
.profile-dc{font-size:12px;font-weight:500;color:var(--color-smoke);margin-bottom:12px}
.profile-dc b{font-weight:700;color:var(--color-ink)}
.profile-agent{padding:10px 11px;background:var(--bg3);border-left:3px solid var(--color-parchment);font-size:12px;font-weight:500;color:var(--color-ink);line-height:1.4}
.profile-agent b{font-weight:700}
.hitl{margin-top:10px;font-size:12px;color:var(--color-smoke);display:flex;align-items:center;gap:5px;letter-spacing:.03em}
.hitl .dot{width:5px;height:5px;background:var(--color-parchment);border:1px solid var(--color-ink)}
.profile-cta{margin-top:14px;width:100%;font-size:12px;font-weight:600;color:var(--color-ink);background:#fff;border:1px solid var(--color-ink);border-radius:var(--r-pill);padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .22s var(--ease),box-shadow .22s var(--ease)}
.profile-cta .material-symbols-outlined{font-size:15px;transition:transform .22s var(--ease)}
.profile-cta:hover{background:var(--color-parchment);box-shadow:0 0 0 1px var(--color-ink)}
.profile-cta:hover .material-symbols-outlined{transform:translateX(2px)}
.profile-cta:active{transform:scale(.97)}

/* ── TRUST STRIP ───────────────────────────────── */
.trust-strip{border:1px solid var(--color-ash-rule);padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff}
.trust-src{font-size:12px;color:var(--color-smoke);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:80px;z-index:150;background:#E0E0E0;border-bottom:1px solid #0d8f7a;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:12px 0;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{font-size:12px;letter-spacing:.02em;color:#000;font-weight:500;padding:7px 14px;white-space:nowrap;text-decoration:none;transition:color .2s,font-weight .2s;display:flex;align-items:center;gap:6px}
.subnav a .subnav-n{font-size:12px;color:#000}
.subnav a:hover{color:#000;font-weight:700}
.subnav a.active{color:#000;font-weight:700}
.subnav a.active .subnav-n{color:#000}

/* ── HELPERS ───────────────────────────────────── */
.mt0{margin-top:0}.mt16{margin-top:16px}.mb24{margin-bottom:24px}.mb40{margin-bottom:40px}
.lead-wrap{max-width:1040px}
.col{flex:1}
.hide{display:none!important}
.num{font-size:12px;color:var(--color-smoke)}
.active{}

/* ── SCROLL TOP ────────────────────────────────── */
#stBtn{position:fixed;bottom:36px;right:36px;width:38px;height:38px;background:var(--color-parchment);border:1px solid var(--color-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
#stBtn.vis{opacity:1;pointer-events:auto}

/* ── 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:0;border:1px solid var(--color-ash-rule)}
.mc{position:relative;display:flex;flex-direction:column;height:100%;border-right:1px solid var(--color-ash-rule);background:#fff;padding:24px 22px;transition:background .25s var(--ease);text-decoration:none;color:var(--color-ink)}
.mc:last-child{border-right:none}
a.mc:hover{background:var(--hover-tint)}
/* .mc como <div> (no <a>): familia Superficie — ver nota en theme-a-lima.css. */
.mc:hover{background:var(--hover-surface)}
.mc::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)}
a.mc:hover::before{transform:scaleX(1)}
.mc-meta{display:flex;gap:8px;font-size:12px;color:var(--color-smoke);margin-bottom:12px}
.mc-meta span{position:relative;padding-right:8px}
.mc-meta span::after{content:'·';position:absolute;right:1px}
.mc-meta span:last-child::after{content:''}
.mc h4{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.mc p{font-size:12px;font-weight:500;line-height:1.5;color:var(--color-slate);margin-bottom:14px}
.mc-results{display:flex;gap:16px;margin-top:auto}
.mc-r-n{font-family:var(--font-display);font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1}
.mc-r-l{font-size:12px;color:var(--color-smoke);margin-top:3px;max-width:90px}
/* .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). Fondo gris explícito
   (mismo valor que .sec--alt, #f7f7f5) y hover al blanco de base
   (--color-bone-paper), nunca --hover-surface tal cual (sería gris sobre
   gris, invisible) — mismo mecanismo que .vc.is-risk/.is-guarantee. */
.mc.is-surface{background:#f7f7f5}
.mc.is-surface:hover{background:var(--color-bone-paper)}

/* .mc-grid--sdlc: ver nota completa en theme-a-lima.css — mismas .mc/
   .cd-row de Paradigmas, 4 columnas en vez de 3 (2×2 en tablet, 1 en
   mobile) para la tabla de impacto por agente de "Los 4 agentes". */
.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)}
  .mc-grid--sdlc .mc{border-right:1px solid var(--color-ash-rule)}
  .mc-grid--sdlc .mc:nth-child(2n){border-right:none}
  .mc-grid--sdlc .mc:nth-child(-n+2){border-bottom:1px solid var(--color-ash-rule)}
}
@media(max-width:640px){
  .mc-grid.mc-grid--sdlc{grid-template-columns:1fr}
  .mc-grid--sdlc .mc{border-right:none;border-bottom:1px solid var(--color-ash-rule)}
  .mc-grid--sdlc .mc:last-child{border-bottom:none}
}

/* ── INSIGHT CALLOUT (ícono + texto, familia Superficie) ─────────
   Reemplaza el antiguo .quote-block ad-hoc de /ia/agentes-sdlc/. Mismo
   criterio que .mc.is-surface: gris explícito y fijo (mismo valor que
   .sec--alt), sin hover. */
.insight-card{display:flex;align-items:flex-start;gap:20px;background:#f7f7f5;padding:32px 36px}
.insight-ico{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--color-bone-paper);color:var(--color-ink)}
.insight-body p{font-size:16px;font-weight:500;line-height:1.5;color:var(--color-ink);margin-bottom:12px}
.insight-stat{font-size:13px;color:var(--color-slate)}
.insight-stat-n{font-weight:900;color:var(--color-ink);font-size:15px}
@media(max-width:600px){.insight-card{flex-direction:column;gap:14px;padding:24px 22px}}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:1024px){
  .svc-grid,.ia-svc-grid,.ins-grid,.about-split,.contact-split,.ia-use-cols,.mc-grid{grid-template-columns:1fr}
  .svc-card,.ia-svc,.mc{border-right:none}
  /* .ia-svc-grid-4: 4→2 (no directo a 1 col como el resto de .ia-svc-grid) —
     reinstala el borde derecho de a pares, ya que la regla de arriba se
     lo saca a todos */
  .ia-svc-grid-4{grid-template-columns:repeat(2,1fr)}
  .ia-svc-grid-4 .ia-svc{border-right:1px solid var(--color-ash-rule)}
  .ia-svc-grid-4 .ia-svc:nth-child(2n){border-right:none}
  .iuc{border-right:none}
  .iuc:nth-child(n+3){border-bottom:1px solid var(--color-ash-rule)}
  .iuc:last-child{border-bottom:none}
  .valor-grid,.values-grid{grid-template-columns:1fr}
  .vc,.vcard{border-right:none;border-bottom:1px solid var(--color-ash-rule)}
  .hero-stats,.stats-demo{grid-template-columns:repeat(2,1fr)}
  .hstat:nth-child(2){border-right:none}
  .fg-grid,.fgrid{grid-template-columns:1fr 1fr;gap:24px}
  .ins-feat{grid-template-columns:1fr}
  .ins-feat-img{min-height:200px}
  .steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--color-ash-rule)}
  .step:last-child{border-bottom:none}
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .vert-tab{padding:14px 18px}
  .vert-tab.active{padding:20px 18px 16px}
  .vert-panel{padding:36px 28px}
  .vert-panel.active{grid-template-columns:1fr;padding:32px 24px;gap:28px}
  .vert-side{border-left:none;border-top:1px solid var(--color-ash-rule);padding-left:0;padding-top:20px}
}
@media(max-width:640px){
  .ia-svc-grid-4{grid-template-columns:1fr}
  .ia-svc-grid-4 .ia-svc{border-right:none}
  /* Tabs se mantienen en fila horizontal (igual que desktop) para que el
     tab activo siga fundiéndose visualmente con el panel blanco de abajo. */
  .vert-tab{flex-direction:column;text-align:center;gap:6px;padding:14px 6px}
  .vert-tab.active{padding:18px 6px 14px}
  .vert-tab-txt{align-items:center}
  .vert-tab-ico{width:34px;height:34px}
  .vert-tab-ico .material-symbols-outlined{font-size:18px}
  .vert-tab-ttl{font-size:14px}
  .vert-tab-sub{display:none}
  .vert-panel.active{padding:26px 16px;gap:22px}
}
@media(max-width:900px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .rule-r{border-right:none;border-bottom:1px solid var(--color-ash-rule)}
  .fgrid,.fg-grid{grid-template-columns:1fr 1fr;gap:24px}
  .role-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  #nav{padding:0 24px}
  .container,.wrap{padding:0 24px}
  .fgrid,.fg-grid{grid-template-columns:1fr}
  .frow2{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .profile-card{border-right:none!important}
  .role-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .role-grid{grid-template-columns:1fr}
}

/* ── CURSOR (disabled for typocolor) ───────────── */
.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-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-ink)}

.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(--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 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:#fff;border:1px solid var(--line);border-radius:4px;padding:7px 14px;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--color-smoke);cursor:pointer;transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.evtab:hover,.evchip:hover{border-color:var(--color-ink);color:var(--color-ink)}
.evtab.act,.evchip.act{background:var(--g);border-color:var(--g);color:var(--color-ink)}
/* 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}

.evc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.evc{position:relative;border:1px solid var(--line);background:#fff;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) + 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:3px;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(--ink);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(--mono);font-size:12px;letter-spacing:.06em;color:var(--g);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);font-weight:800;text-transform:none;letter-spacing:-.02em}
.evc-cover h4{position:relative;z-index:3;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.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(13,13,13,.1) 0%,rgba(13,13,13,.15) 45%,rgba(13,13,13,.85) 100%)}
.evc-cover.has-photo .evc-cover-top{color:var(--g)}
.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(--mono);font-size:12px;color:var(--muted);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(13,13,13,.7)}
.ev-modal-box{position:relative;background:#fff;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:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.ev-modal-close:hover{background:var(--g)}
.ev-modal-box .evc-tags{margin-bottom:16px}
.ev-modal-box h3{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px;padding-right:40px}
.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(--mono);font-size:12px;color:var(--muted);width:110px;flex-shrink:0;padding-top:2px}
.ev-dv{font-size:15px;font-weight:500}
#evmLumaLink.is-disabled{background:#fff;color:var(--muted);border:1px solid var(--line);pointer-events:none;box-shadow:none}

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