/* ══════════════════════════════════════════════ BASE.CSS — Reglas compartidas (sin tema) Proyecto: SOHO.lat — Design System Transition ══════════════════════════════════════════════ */ /* ── 0. SISTEMA DE HOVER ESTÁNDAR ─────────────── Cada theme-*.css define estos tokens en su :root — son el ÚNICO lugar donde un hover debería tomar su color. Ningún :hover nuevo debería usar --g/--g2/--g3 (u otro token de paleta) directo, y mucho menos un hex o rgba suelto: siempre uno de estos tokens, para que cambiar el acento de un skin actualice todos sus hovers a la vez. --hover-fill familia RELLENO — botones/CTAs sólidos que se aclaran al hover (.btn-g, .nbtn, .ds-gadget, #tplMenu a). Suele ir acompañado de un contorno box-shadow:0 0 0 1px var(--hover-ring) — --hover-ring es siempre un COLOR, nunca un box-shadow completo. Si un skin ya resuelve el "realce" del hover con un glow propio (box-shadow:var(--shadow-signal) puesto en el estado base, no en :hover), no hace falta sumar además el anillo de --hover-ring. --hover-tint familia TINTE — tarjetas/filas CLICKEABLES/ navegables que se iluminan sutilmente al hover (.svc-card, .vc, .ia-svc, .ind-row). En un skin oscuro puede resolver a un panel neutro más claro en vez de un tinte del acento, si eso es lo que ya usa ese skin — no forzar tinte de acento donde no legible. --hover-surface familia SUPERFICIE — bloques informativos NO clickeables (no navegan a ningún lado, no llevan ícono de flecha) que igual quieren un pequeño gesto de "esto reacciona" al pasar el mouse — ej. .case-detail, .vc-stack. Solo cambia el fondo hacia el tono neutro/panel alternativo de ese skin; el stroke/borde NUNCA cambia. Distinta de --hover-tint a propósito: Tinte es la señal de "esto es clickeable", Superficie es solo un realce de lectura — no debe verse como que invita a hacer clic. Por eso no comparten necesariamente el mismo valor aunque en algún skin coincidan numéricamente. Ver Regla de oro 2 más abajo: esta familia es la forma correcta de darle vida a un bloque no interactivo sin caer en ese anti-patrón. --hover-text familia TEXTO — links de solo texto que cambian de color al hover, sin fondo (.fcol a). El anillo de --hover-ring hoy solo aparece acompañando a --hover-fill (ver arriba) — no queda ningún caso de "solo anillo, sin relleno" en el sitio (.case-detail migró a la familia Superficie). El token se deja declarado por si a futuro aparece un caso así. Fuera de estas familias quedan los hovers de puro movimiento (ej. .vorb:hover con transform:scale) y el subrayado animado de .nlinks a (un guiño propio de A-Lima) — no necesitan token de color porque no cambian de color. Regla aparte, no de color: un elemento no debe tener dos reglas de :hover que se contradigan (ej. #tplBtn tenía su propio :hover distinto al de .ds-gadget, la clase que comparte con el resto del gadget —ver fix en theme-a-lima.css). Si dos selectores apuntan al mismo elemento, deben resolver al mismo comportamiento. Rollout: normalizando retroactivamente skin por skin y página por página — el estado y el orden quedan en el doc del proyecto "estandar-hover.md". Empezado 2026-08-25 en /servicios/ · A-Lima. */ /* ── 1. RESET ──────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} /* overflow-x:hidden en AMBOS html y body: el elemento que realmente scrollea el viewport es , no — tenerlo solo en body no bloquea el swipe lateral real en móvil. Técnica estándar (web.dev/MDN) para garantizar 0 scroll horizontal pase lo que pase en el contenido. */ html{scroll-behavior:smooth;overflow-x:hidden;width:100%} body{-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%} @font-face{ font-family:'Material Symbols Outlined'; font-style:normal; font-weight:100 700; font-display:swap; src:url('/fonts/material-symbols-outlined.woff2') format('woff2'); } .material-symbols-outlined{ font-family:'Material Symbols Outlined'; font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; font-size:inherit;line-height:1;display:inline-block;vertical-align:middle;user-select:none; -webkit-font-feature-settings:'liga';font-feature-settings:'liga'; white-space:nowrap;word-wrap:normal;letter-spacing:normal;text-transform:none;direction:ltr;-webkit-font-smoothing:antialiased} /* ── 2. ROUTER SPA ─────────────────────────────── */ .pg{display:none;min-height:100vh;position:relative} .pg.on{display:block} .pgbody{padding-top:var(--nav-height,80px)} /* ── 3. CONTAINER ──────────────────────────────── */ .container, .wrap{max-width:var(--cont,1280px);margin:0 auto;padding:0 48px} @media(max-width:768px){ .container,.wrap{padding:0 24px} } /* ── 4. LAYOUTS & GRIDS ────────────────────────── */ .grid2{display:grid;grid-template-columns:1fr 1fr} .grid3{display:grid;grid-template-columns:repeat(3,1fr)} .grid4{display:grid;grid-template-columns:repeat(4,1fr)} .stats-demo, .hero-stats{display:grid;grid-template-columns:repeat(3,1fr)} .stat{padding:24px;text-align:left} .mt16{margin-top:16px} .mt24{margin-top:24px} .mt32{margin-top:32px} .mt40{margin-top:40px} .btns{display:flex;gap:12px;flex-wrap:wrap} .about-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .contact-split{display:grid;grid-template-columns:1fr 1.3fr;gap:56px} .contact-single{max-width:640px;margin:0 auto} .cdet-strip{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line,#252525)} .cdet-strip .cdet{margin-bottom:0} .values-grid{display:grid;grid-template-columns:repeat(3,1fr)} /* ── 5. COMPONENTES ESTRUCTURALES ──────────────── */ /* — Cards — */ .card{padding:36px;position:relative} .card.clickable{cursor:pointer;transition:background .15s} .card .go-arr{position:absolute;top:32px;right:32px;opacity:0;transition:opacity .2s} .card.clickable:hover .go-arr{opacity:1} /* — FAQ Accordion — */ .faq-item{border-bottom:1px solid var(--line,#252525)} .faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer} .faq-ico,.faq-q .ico{transition:transform .25s var(--ease,cubic-bezier(.16,1,.3,1)),color .25s var(--ease,cubic-bezier(.16,1,.3,1))} .faq-item.open .faq-ico, .faq-q.open .ico{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease,cubic-bezier(.16,1,.3,1))} .faq-item.open .faq-a{max-height:280px} .faq-a div{padding-bottom:20px;max-width:560px} /* — Row List — */ .row-list{border-top:1px solid var(--line,#252525)} .row-item{ display:flex;align-items:center;justify-content:space-between; padding:22px 0;border-bottom:1px solid var(--line,#252525); text-decoration:none;cursor:pointer} .row-item .arr{transition:transform .2s var(--ease,cubic-bezier(.16,1,.3,1))} .row-item:hover .arr{transform:translateX(4px)} /* — Row (sección de 2 columnas: label/título a un lado, contenido al otro) — Antes compartía regla con .row-item (componente de lista clickeable, hoy sin uso en el sitio) y heredaba de ahí el cursor de mano y la línea inferior sin querer, ya que .row no es clickeable. Se separa y se le da su propio gap, que además resuelve que en tablet/mobile el texto y el contenido quedaban pegados (justify-content:space-between no hace nada útil cuando ambas columnas son flex:1). */ .row{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:48px} @media(max-width:900px){.row{flex-direction:column;align-items:stretch;gap:32px}} /* — Chips — */ .chip{ font-size:13px;padding:9px 16px;border-radius:9999px; display:inline-flex;align-items:center; border:1px solid var(--line,#252525); background:transparent;cursor:pointer; transition:border-color .15s,color .15s,background .2s} .tag-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px} /* — Tag Pill — */ .tag-pill{ display:inline-flex;align-items:center;gap:6px; border-radius:9999px;padding:4px 10px; font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px} /* — Forms — */ .field{margin-bottom:16px} .field label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;display:block} .field input,.field select,.field textarea, .fg input,.fg select,.fg textarea{ width:100%;font-size:14px;padding:10px 12px;outline:none; border:1px solid var(--line,#c8cacd);border-radius:var(--radius,0px)} .frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-panel{padding:32px} .fg{margin-bottom:8px} .fg label{font-size:12px;display:block;margin-bottom:6px} /* Estado deshabilitado (p.ej. campos de fecha/lugar cuando se marca "No lo sé" en Canal de Denuncias): opacidad reducida + cursor not-allowed para que quede visualmente claro que el campo no está disponible, sin depender de los estilos nativos del navegador. */ .field input:disabled,.field select:disabled,.field textarea:disabled, .fg input:disabled,.fg select:disabled,.fg textarea:disabled{opacity:.4;cursor:not-allowed} /* — Results Block — */ .results-blk,.results{display:flex;gap:28px;margin-top:14px} /* — Canal de Denuncias: formulario largo por secciones — */ .dr-wrap{max-width:760px} /* 2026-09-02: se quitaron las líneas separadoras horizontales entre secciones (border-bottom) a pedido de Alejandro; la separación visual entre preguntas queda dada solo por el espaciado (padding/margin). 2026-09-02 (2): a pedido de Alejandro, versión más compacta de todo el formulario (menos scroll) — se reduce el espaciado entre secciones/preguntas y la altura de los botones (opt-row, fsub, btn-o) solo dentro de .dr-wrap, para no afectar esos mismos componentes en /agendar/, /eventos/ y el Quiz de talento, que los siguen usando con su tamaño normal. */ .dr-section{padding-bottom:22px;margin-bottom:22px} .dr-section:last-of-type{margin-bottom:0;padding-bottom:0} .dr-section--submit{padding-bottom:0;margin-bottom:0} .dr-q{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:6px 0 10px} .dr-req{color:#c0392b} .dr-note{font-size:13px;color:var(--muted);line-height:1.5;max-width:560px} .dr-cond{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line,#252525)} .dr-people{display:flex;flex-direction:column;gap:10px;margin-top:10px} .dr-person{position:relative;padding:14px;padding-right:44px;border:1px solid var(--line,#252525)} .dr-person-remove{position:absolute;top:11px;right:11px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--muted);transition:color .15s} .dr-person-remove:hover{color:var(--ink)} .dr-person-remove .material-symbols-outlined{font-size:18px} .dr-add{margin-top:10px} .dr-upload{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap} /* 2026-09-02: estaba oculto con left/top:-9999px, que lo saca a un punto lejano del documento (no solo de este bloque) — al hacer click en el label, el navegador enfoca el input y hace scroll-into-view hacia ese punto, tirando toda la página para arriba (reportado por Alejandro). Se reemplaza por el patrón "visually-hidden" estándar (clip, sin mover el elemento de su posición), que oculta igual pero no dispara ningún scroll al hacer foco. */ .dr-upload input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .dr-upload-hint{font-size:12px;color:var(--muted)} .dr-files{display:flex;flex-direction:column;gap:6px;margin-top:10px} .dr-file-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line,#252525);font-size:13px} .dr-file-chip>.material-symbols-outlined:first-child{color:var(--muted);font-size:18px} .dr-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dr-file-chip button{background:transparent;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;transition:color .15s} .dr-file-chip button:hover{color:var(--ink)} .dr-file-chip button .material-symbols-outlined{font-size:16px} /* Botones/inputs compartidos (.opt-row, .fsub, .btn-o, .fg input) más bajos, solo dentro del formulario de denuncias. */ .dr-wrap .opt-row{padding:12px 18px} .dr-wrap .fsub{padding:11px} .dr-wrap .btn-o{padding:9px 16px} .dr-wrap .fg{margin-bottom:6px} .dr-wrap .fg input,.dr-wrap .fg select,.dr-wrap .fg textarea{padding:8px 10px} .dr-review{display:flex;flex-direction:column;gap:14px;margin:20px 0;max-height:40vh;overflow-y:auto} .dr-review-row{padding-bottom:14px;border-bottom:1px solid var(--line,#252525)} .dr-review-row:last-child{border-bottom:none;padding-bottom:0} .dr-review-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .dr-review-value{font-size:14px;white-space:pre-wrap;line-height:1.5} /* — CPL Card CTA Group (varios botones en el slot de .cpl-cta) — */ .cpl-cta-group{display:flex;flex-direction:column;align-items:flex-start;gap:10px} /* — Back Link — */ .back-link{ display:inline-flex;align-items:center;gap:6px; font-size:12px;text-decoration:none;cursor:pointer;margin-bottom:24px; transition:color .25s,gap .25s} /* — Section Base — */ .sec{padding:80px 0;position:relative} .sec-sm{padding:64px 0} /* — Case Panels — */ .case-panel,.case-block{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line,#252525)} .case-panel:last-child,.case-block:last-child{border:none;margin:0;padding:0} /* — CD Row (case detail) — */ .cd-row,.cd{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13px;padding:10px 0} /* — Service Meta — */ .svc-meta{display:flex;gap:40px;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--line,#252525)} /* ── 6. AGENTE SOHO — WIDGET PERSISTENTE ───────── */ /* Ghost Cursor */ #aGhost{ position:fixed;z-index:9500;top:0;left:0; pointer-events:none;opacity:0;transition:opacity .3s; transform:translate(-50%,-50%)} #aGhost.on{opacity:1} .ag-dot{ width:22px;height:22px;border-radius:50%; transition:transform .15s} #aGhost.press .ag-dot{transform:scale(.6)} .ag-tag{ position:absolute;top:24px;left:12px; font-size:12px;letter-spacing:.04em; padding:2px 6px;white-space:nowrap} .ag-ripple{ position:absolute;top:50%;left:50%;width:22px;height:22px;border-radius:50%; transform:translate(-50%,-50%);opacity:0} #aGhost.press .ag-ripple{animation:agRip .5s ease-out} @keyframes agRip{ 0%{opacity:.8;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}} .agent-target{outline:2px solid var(--accent,#c5ff4a)!important;outline-offset:4px} /* Subtítulos del agente */ #aCap{ position:fixed;left:50%;bottom:96px; transform:translateX(-50%) translateY(12px); z-index:9400;max-width:min(720px,86vw); font-size:16px;line-height:1.5;padding:12px 20px;text-align:center; opacity:0;pointer-events:none;transition:opacity .3s,transform .3s} #aCap.on{opacity:1;transform:translateX(-50%) translateY(0)} /* Orbe persistente */ .aorb-wrap{ position:fixed;bottom:28px;right:28px;z-index:9000; display:none;flex-direction:column;align-items:center;gap:10px; max-width:210px;text-align:center} .aorb-wrap.show{display:flex;animation:fabIn .5s var(--ease,cubic-bezier(.16,1,.3,1))} @keyframes fabIn{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}} .aorb-circle{ position:relative;width:70px;height:70px; display:flex;align-items:center;justify-content:center;flex-shrink:0} .aorb-circle .vorb-rings{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .vorb-ring{position:absolute;border-radius:50%;opacity:0} .vr1{width:100px;height:100px;animation:ringPulse 2.1s ease-out infinite} .vr2{width:134px;height:134px;animation:ringPulse 2.1s ease-out .7s infinite} .vr3{width:170px;height:170px;animation:ringPulse 2.1s ease-out 1.4s infinite} @keyframes ringPulse{0%{opacity:.55;transform:scale(.7)}100%{opacity:0;transform:scale(1)}} #aOrbCanvas{width:100%;height:100%;display:block} #aOrb{ position:relative;width:70px;height:70px;border-radius:50%; display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer} #aOrb.idle{animation:orbBreathe 3.2s ease-in-out infinite} @keyframes orbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} #aOrb.listening{animation:orbPulseListen 1s ease-in-out infinite} @keyframes orbPulseListen{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb,197,255,74),.55)}50%{box-shadow:0 0 0 10px rgba(var(--accent-rgb,197,255,74),0)}} #aOrb.speaking{animation:orbPulseSpeak .55s ease-in-out infinite} @keyframes orbPulseSpeak{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} #aOrb.thinking{animation:orbBreathe 1.1s ease-in-out infinite} .aorb-label{font-size:12px;letter-spacing:.05em} .aorb-wrap .chips-row{display:flex;flex-direction:column;gap:8px;max-width:200px;opacity:0;transition:opacity .5s} .aorb-wrap .chips-row.show{opacity:1} .aorb-wrap .achip,.aorb-wrap .chip{width:100%;text-align:center;cursor:pointer;transition:background .2s,color .2s} /* Voice Entry orb */ .vorb{ position:relative;width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;padding:0;transition:transform .3s,background .3s} .vorb:hover{transform:scale(1.06)} .vorb .bar{width:3px;transition:background .2s} .vorb .b1{animation:eq1 .9s ease-in-out infinite} .vorb .b2{animation:eq2 .7s ease-in-out infinite} .vorb .b3{animation:eq1 .6s ease-in-out infinite} .vorb .b4{animation:eq2 .8s ease-in-out infinite} .vorb .b5{animation:eq1 1s ease-in-out infinite} @keyframes eq1{0%,100%{height:5px}50%{height:24px}} @keyframes eq2{0%,100%{height:4px}50%{height:20px}} .vorb-status{font-size:16px;max-width:480px;line-height:1.45;min-height:22px} .vorb-hint{font-size:12px;letter-spacing:.04em} .chips-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;opacity:0;transition:opacity .5s} .chips-row.show{opacity:1} /* Voice page centered layout */ #pg-voice.pg.on{display:flex;align-items:center;justify-content:center;min-height:100vh} /* ── 7. FOOTER ─────────────────────────────────── */ footer{padding:56px 0 24px} .f-grid,.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} footer h5{font-size:12px;letter-spacing:.04em;margin-bottom:14px} footer a{display:block;font-size:13px;text-decoration:none;margin-bottom:8px} .fbot{display:flex;justify-content:space-between;padding-top:24px;margin-top:32px;font-size:12px} /* ── 8. RESPONSIVE BREAKPOINTS ─────────────────── */ @media(max-width:1024px){ .grid2,.grid3,.grid4{grid-template-columns:1fr 1fr} .stats-demo,.hero-stats{grid-template-columns:1fr 1fr} } @media(max-width:900px){ .grid2,.grid3,.grid4{grid-template-columns:1fr} .stats-demo,.hero-stats{grid-template-columns:1fr 1fr} .f-grid,.fgrid{grid-template-columns:1fr 1fr;gap:24px} .about-split,.contact-split,.values-grid{grid-template-columns:1fr} } @media(max-width:768px){ .aorb-wrap{right:16px;bottom:16px} #aCap{bottom:auto;top:96px} } @media(hover:none){html,body,a,button{cursor:auto}} /* ── 9. SELECTOR DE SKIN — "Cambiar diseño" (widget derecho) ── #tplSel es el grupo fijo a la derecha: pestaña vertical con ícono + etiqueta "Cambiar diseño" siempre visible (antes era solo un ícono). Al pasar el mouse sobre .ds-gadget (:hover / :focus-within, o al tocarlo en móvil vía la clase .open que agrega el JS) se despliega #tplMenu a su izquierda, deslizándose + fade — revela las 3 opciones de skin con su color y, en la activa, un check. No navega a ninguna parte: switchTheme() solo cambia data-theme y preserva la página/scroll donde estaba el usuario. */ #tplSel{ position:fixed;top:50%;right:0;z-index:9600; transform:translateY(-50%)} #tplMenu{ display:flex;flex-direction:column;min-width:170px; position:absolute;top:50%;right:100%; transform:translateY(-50%) translateX(8px); opacity:0;visibility:hidden;pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:opacity .22s ease .12s,transform .3s cubic-bezier(.22,.61,.36,1) .12s,visibility 0s linear .34s} #tplSel.open #tplMenu, #tplSel:hover #tplMenu, #tplSel:focus-within #tplMenu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateY(-50%) translateX(0); transition:opacity .3s ease,transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s} #tplMenu a{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.03em;text-decoration:none;transition:background .2s;cursor:pointer} #tplMenu a.cur{pointer-events:none} #tplMenu .tpl-sw{width:9px;height:9px;border-radius:50%;flex-shrink:0} #tplMenu .tpl-name{display:inline-flex;align-items:center;gap:4px} #tplMenu .tpl-check{display:none;font-size:14px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} #tplMenu a.cur .tpl-check{display:inline-flex} #tplMenu .tplhdr{padding:9px 14px 4px;font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.12em;text-transform:uppercase} /* ── 10. SCROLL TO TOP (hidden globally) ────────── */ #stBtn{display:none!important} /* ── 9b. GADGET DESIGN.SYS — botón disparador de #tplSel ── */ .ds-gadget{ display:flex;flex-direction:column;align-items:center;gap:9px; padding:15px 9px;border-radius:8px 0 0 8px;border:none; box-shadow:-2px 0 12px rgba(0,0,0,.15); cursor:pointer;transition:padding .25s,background .25s,color .25s} .ds-gadget svg{width:15px;height:15px;display:block;flex-shrink:0} .ds-gadget .ds-label{ writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap} #tplSel.open .ds-gadget, #tplSel:hover .ds-gadget, #tplSel:focus-within .ds-gadget{padding-right:14px} @media(max-width:768px){ .ds-gadget{padding:11px 6px;gap:7px} .ds-gadget svg{width:13px;height:13px} .ds-gadget .ds-label{font-size:12px} } /* ── 9c. NAV MÓVIL — botón hamburguesa + panel de links ── Bajo el breakpoint de 768px el nav pasa de fila horizontal (links + CTA) a: [hamburguesa][logo compacto] ... [Contáctanos]. Los links de .nlinks dejan de mostrarse inline y se convierten en un panel que cae debajo del nav al abrir la hamburguesa (clase .nav-open en , puesta por main.js). El botón de Contáctanos NUNCA se mueve al panel: siempre visible al extremo derecho del nav, en escritorio y en móvil. Logo: el SVG de marca trae 6 — el primero es el wordmark "Business first, AI Driven.", los otros 5 son "soho 30 años". En escritorio se muestra el SVG completo (.brand-svg-full); en móvil se oculta y se muestra en su lugar un segundo SVG que solo trae esos 5 paths finales (.brand-svg-compact, viewBox recortado a 0 0 650 164) — mismo logo, sin el tagline, para que quepa junto a la hamburguesa. */ svg.brand-svg-compact{display:none} .nav-burger{ display:none;align-items:center;justify-content:center; width:40px;height:40px;padding:0;flex-shrink:0; background:none;border:none;border-radius:8px;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s var(--ease,ease)} .nav-burger .material-symbols-outlined{font-size:24px} @media(max-width:768px){ #nav{justify-content:flex-start;gap:12px} .nav-burger{display:flex} svg.brand-svg-full{display:none} svg.brand-svg-compact{display:block} .nbtn{margin-left:auto} body.nav-open{overflow:hidden} #nav .nlinks{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:fixed;top:var(--nav-height,72px);left:0;right:0;z-index:190; max-height:calc(100vh - var(--nav-height,72px));overflow-y:auto; padding:4px 24px 12px; box-shadow:0 16px 32px rgba(0,0,0,.18); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .22s ease,transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear .28s} body.nav-open #nav .nlinks{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); transition:opacity .25s ease,transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s} #nav .nlinks a{ display:block;width:100%; padding:11px 4px;font-size:15px;border-bottom:1px solid var(--line,rgba(0,0,0,.1))} #nav .nlinks a:last-child{border-bottom:none} } /* ── 9d. FILTER BOTTOM SHEET (mobile) — /eventos/ y /blog/ ── Componente genérico y reutilizable: [data-filter-open="x"] abre [data-filter-sheet="x"], [data-filter-close="x"] y tocar [data-filter-backdrop="x"] lo cierran (misma "x" en los cuatro). Lógica de apertura/cierre en main.js. En escritorio el sheet es invisible como componente: con display:contents se "disuelve" y sus hijos (.evfilter-group en /eventos/, .cat-chip en /blog/) quedan como si fueran hijos directos del contenedor de filtros original — el layout de fila con wrap que ya existía no cambia en nada. Bajo 768px se activa como bottom sheet real: fixed al fondo, translateY(100%) → 0 al abrir, con backdrop y un botón "Filtros" (Material Symbols "tune") como disparador — así los grupos de chips dejan de amontonarse en la pantalla y quedan a un tap de distancia. */ .filter-trigger-btn{display:none} .filter-backdrop{display:none} .filter-sheet{display:contents} .filter-sheet-handle,.filter-sheet-header{display:none} .filter-sheet-body{display:contents} /* /eventos/ y /sobre/carreras/: a diferencia de /blog/ (donde el sheet queda anidado dentro de .cat-bar y display:contents alcanza), acá el sheet vive como hermano de .ev-filterbar/.evfilters (no puede ir adentro: ambos traen la clase .reveal, que anima con transform, y transform en un ancestro rompe el position:fixed del sheet en mobile). En escritorio necesita entonces su propia fila flex para verse pegado al resto, igual que antes de separarlo. */ @media(min-width:769px){ #evFilterSheet{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;margin-bottom:40px} #carrerasFilterSheet,#casosFilterSheet{display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;row-gap:14px;margin-bottom:40px} } @media(max-width:768px){ .ev-filterbar-title{display:none} .filter-trigger-btn{ display:inline-flex;align-items:center;gap:6px; padding:9px 16px;border-radius:999px;cursor:pointer; font-size:13px;font-weight:600;flex-shrink:0} .filter-trigger-btn .material-symbols-outlined{font-size:19px} .filter-backdrop{ display:block;position:fixed;inset:0;z-index:290; background:rgba(0,0,0,.45); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s ease,visibility 0s linear .25s} body.filters-open .filter-backdrop{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity .25s ease,visibility 0s linear 0s} body.filters-open{overflow:hidden} /* El orbe de IA es fixed con z-index:9000 (por encima de todo el resto del sitio a propósito) — sin esto, se filtraría visualmente sobre el sheet de filtros. Se oculta mientras el sheet está abierto. */ body.filters-open .aorb-wrap{display:none} .filter-sheet{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:300; max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch; border-radius:20px 20px 0 0; padding:0 24px 28px; transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); box-shadow:0 -16px 40px rgba(0,0,0,.25)} .filter-sheet.filter-sheet-open{transform:translateY(0)} .filter-sheet-handle{ display:block;width:36px;height:4px;border-radius:2px; margin:14px auto 10px;flex-shrink:0} .filter-sheet-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:16px} .filter-sheet-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .filter-sheet-close{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;border:none;background:none;cursor:pointer; border-radius:50%;flex-shrink:0} .filter-sheet-body{display:flex;flex-direction:column;gap:20px} .filter-sheet-body .evfilter-group{flex-wrap:wrap} #blogFilterSheet .filter-sheet-body{flex-direction:row;flex-wrap:wrap;gap:10px} } /* ── 11. OVERLAY DE TRANSICIÓN ─────────────────── */ #theme-transition-overlay{ position:fixed;inset:0;z-index:10000; pointer-events:none;opacity:0; transform:scaleY(0);transform-origin:bottom; transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .3s} #theme-transition-overlay.entering{ opacity:1;transform:scaleY(1);pointer-events:all} #theme-transition-overlay.exiting{ transform-origin:top;transform:scaleY(0);opacity:1; transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)) .05s,opacity .2s .35s} @media(prefers-reduced-motion:reduce){ #theme-transition-overlay, #theme-transition-overlay.entering, #theme-transition-overlay.exiting{ transition-duration:0ms!important} } /* ── 12. DOCUMENTO LEGAL (Compliance) ──────────── */ .cp-doc{max-width:760px} .cp-doc h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 18px;color:var(--ink)} .cp-doc h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:32px 0 10px;color:var(--ink)} .cp-doc h3:first-of-type{margin-top:0} .cp-doc p{font-size:15px;font-weight:300;line-height:1.7;color:var(--text);margin-bottom:14px} .cp-doc p:last-child{margin-bottom:0} .cp-doc ul,.cp-doc ol{margin:0 0 16px 22px;padding:0} .cp-doc ol ol,.cp-doc ul ul,.cp-doc ol ul,.cp-doc ul ol{margin-top:8px} .cp-doc li{font-size:15px;font-weight:300;line-height:1.65;color:var(--text);margin-bottom:8px} .cp-doc strong{font-weight:700;color:var(--ink)} .cp-doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} /* Link de descarga inline (p.ej. "Descargar política" en /compliance/): texto subrayado. color:inherit a propósito para heredar el tono de texto correcto de cada contexto/skin en vez de fijar uno propio. */ .dl-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600} /* ── 13. ÍCONOS SOCIALES (CTA comunidad) ───────── */ .cta-social{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap} .cta-social-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0} .cta-social-ic svg{width:36px;height:36px} .cta-social-ic:hover{opacity:.65} /* ── 14. ARTÍCULO DE BLOG ───────────────────────── */ .art-back{font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.04em;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s var(--ease)} .art-back:hover{color:var(--ink)} .art-hero{aspect-ratio:21/9;margin-bottom:40px} .article-body{max-width:720px;margin:0 auto} .article-body p{font-size:17px;font-weight:300;line-height:1.75;color:var(--text);margin-bottom:22px} .article-body p:last-child{margin-bottom:0} .article-body h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.3;margin:44px 0 20px;color:var(--ink)} .article-body h2:first-child{margin-top:0} .article-body .art-quote{border-left:3px solid var(--ink);margin:32px 0;padding:4px 0 4px 24px;font-size:20px;font-style:italic;font-weight:300;line-height:1.5;color:var(--ink)} .article-body .art-cite{font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.03em;color:var(--muted);margin:-16px 0 28px;padding-left:24px} .article-body .art-list,.article-body ol.art-list{margin:0 0 22px;padding-left:22px} .article-body .art-list li{font-size:16px;font-weight:300;line-height:1.7;color:var(--text);margin-bottom:10px} .article-body .art-source{font-size:13px;color:var(--muted);margin:-8px 0 22px} .article-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .article-body a:hover{color:var(--muted)} @media(max-width:768px){ .art-hero{aspect-ratio:4/3;margin-bottom:28px} .article-body p{font-size:16px} } /* ── 15. BLOG — PAGINACIÓN "CARGAR MÁS" ────────── */ #insGrid .igc{display:none} #insGrid .igc.igc-visible{display:block} .ins-loadmore-wrap{display:flex;justify-content:center;margin-top:40px} .ins-loadmore-wrap[hidden]{display:none} /* ── 16. TARJETA DESTACADA — ahora es un link completo ─ */ .ins-feat{text-decoration:none;color:var(--text);cursor:pointer} .ins-feat:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} /* ── 17. Sin hover en "Sigue leyendo" (solo /blog/ tiene hover) ─ */ .related-grid .igc:hover h4{text-decoration:none} /* ── 18. Hero de artículo individual: sin efecto grayscale/hover ─ */ .art-hero .media-photo{filter:none!important} /* ── 19. VIDEO EMBEBIDO EN ARTÍCULO ─────────────── */ .art-video{position:relative;width:100%;aspect-ratio:16/9;margin:32px 0;border:1px solid var(--ink);overflow:hidden;background:#000} .art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ── 20. IMAGEN INLINE DENTRO DEL ARTÍCULO ─────── */ .art-inline-img{aspect-ratio:16/10;margin:32px 0} .art-inline-img .media-photo{filter:none} /* ── 21. CRÉDITOS ───────────────────────────────── */ .art-credits{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)} .art-credits h2{margin-top:0!important} .art-credits-grid{display:flex;flex-direction:column;margin-top:20px} .art-credit-card{display:flex;gap:24px;align-items:flex-start;padding:28px 0;border-bottom:1px solid var(--line)} .art-credit-card:first-child{padding-top:0} .art-credit-card:last-child{border-bottom:none} .art-credit-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)} .art-credit-name{font-weight:600;font-size:19px;color:var(--ink)} .art-credit-role{font-size:15px;color:var(--muted);margin:2px 0 12px} .art-credit-bio{font-size:15px;font-weight:300;line-height:1.65;color:var(--text);max-width:760px} /* ── 22. FORMULARIO /agendar/ — validación y honeypot ─── */ .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden} .ferr{display:block;font-family:var(--font-mono,var(--mono));font-size:12px;color:#c0392b;margin-top:4px;min-height:14px} .fg-invalid input,.fg-invalid select,.fg-invalid textarea{border-color:#c0392b!important} .fglobalerr{font-family:var(--font-mono,var(--mono));font-size:12px;color:#c0392b;margin:4px 0 16px;min-height:14px} .fsub:disabled{opacity:.6;cursor:not-allowed} /* ── 23. BLOG — SIN NINGÚN HOVER (a pedido) ───────────────── Anula todos los efectos :hover dentro de /blog/ y cada entrada, sin afectar el resto del sitio (todo queda bajo #pg-blog). */ #pg-blog a:hover{color:inherit!important;text-decoration:inherit!important} #pg-blog .igc:hover{color:var(--text)!important} #pg-blog .igc:hover h4{text-decoration:none!important} #pg-blog .ins-feat:hover{color:var(--text)!important} #pg-blog .ins-feat:hover h3{text-decoration:none!important} #pg-blog .art-back:hover{color:var(--muted)!important} #pg-blog .article-body a:hover{color:var(--ink)!important} #pg-blog .cta-social-ic:hover{opacity:1!important} #pg-blog .media .media-photo, #pg-blog .media .media-fill, #pg-blog .media:hover .media-photo, #pg-blog .media:hover .media-fill{filter:none!important} #pg-blog .media::before, #pg-blog .media:hover::before{opacity:0!important} #pg-sobre .media .media-photo, #pg-sobre .media .media-fill, #pg-sobre .media:hover .media-photo, #pg-sobre .media:hover .media-fill{filter:none!important} #pg-sobre .media::before, #pg-sobre .media:hover::before{opacity:0!important} #pg-casos .media .media-photo, #pg-casos .media .media-fill, #pg-casos .media:hover .media-photo, #pg-casos .media:hover .media-fill{filter:none!important} #pg-casos .media::before, #pg-casos .media:hover::before{opacity:0!important} [data-theme="a-lima"] #pg-blog .btn-g:hover{background:var(--g)!important;box-shadow:none!important} [data-theme="a-lima"] #pg-blog .btn-o:hover{background:#fff!important;box-shadow:none!important} [data-theme="b-teal"] #pg-blog .btn-g:hover{background:var(--color-parchment)!important} [data-theme="b-teal"] #pg-blog .btn-o:hover{background:#fff!important} [data-theme="c-carbon"] #pg-blog .btn-g:hover{background:var(--color-signal)!important} [data-theme="c-carbon"] #pg-blog .btn-o:hover{border-color:var(--color-fog)!important;color:var(--color-chalk)!important} /* ── SKIN PREVIEW CARDS (experimento "design.sys") ── Estructura compartida entre los 3 skins; el color, borde y radio de .skin-card-box/.skin-card-frame se define en cada theme-*.css para que cada card se sienta nativa de su propio lenguaje visual. Los botones llevan también la clase .skin-tab para reusar el switchTheme() y el estado .active ya cableados en js/main.js — no requieren JS nuevo. */ .skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px} button.skin-card{border:none;padding:0;margin:0;background:none;text-align:left;cursor:pointer;font-family:inherit;display:block;width:100%;align-items:stretch;gap:0} .skin-card.active{background:none!important} .skin-card-box{display:block;transition:background .25s var(--ease,ease)} .skin-card-frame{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;transition:transform .35s var(--ease,ease)} .skin-card:hover .skin-card-frame{transform:scale(1.02)} .skin-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000} .skin-card-badge{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;font-family:var(--font-mono,var(--mono));font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:20px;background:#000;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;transition:opacity .25s ease;pointer-events:none} .skin-card.active .skin-card-badge{opacity:1} .skin-card-frame::after{content:'';position:absolute;inset:0;background:var(--g,var(--color-signal,#c5ff4a));opacity:0;transition:opacity .22s ease;pointer-events:none} .skin-card:not(.active):hover .skin-card-frame::after{opacity:.32} .skin-card-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease;pointer-events:none} .skin-card:not(.active):hover .skin-card-hint{opacity:1} .skin-card-hint span{font-family:var(--font-mono,var(--mono));font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#000;color:#fff;padding:8px 16px;border-radius:20px} .skin-card-info{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:0 2px} .skin-card-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px} .skin-card-text{display:flex;flex-direction:column;gap:2px;min-width:0} .skin-card-name{font-weight:700;letter-spacing:-.01em;font-size:15px;display:inline-flex;align-items:center;gap:6px} .skin-card-check{display:none;font-size:16px;color:var(--g,var(--color-signal,#c5ff4a));font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} .skin-card.active .skin-card-check{display:inline-flex} .skin-card-desc{font-size:12.5px;line-height:1.4} @media(max-width:820px){.skin-grid{grid-template-columns:1fr;gap:24px}} /* ── BRANDS DECK (logos de partners, monocromo, loop infinito) ────── Todos los logos (svg o png, horizontales o verticales) se fuerzan al mismo peso visual: altura fija (30px, igual que .svc-logo-slot en ciberseguridad), ancho automático según su proporción real, y color sólido vía filter:brightness(0) — funciona sin importar los colores originales del archivo. Marquee horizontal infinito de derecha a izquierda (mismo patrón que .partner-strip/.ps-track de /ia-squad/): 3 copias idénticas del set en fila, translateX 0 → -33.3333% en loop, así nunca se ve un "borde" del loop. Pausa en hover. */ .sh2.bd-h2{font-size:clamp(18px,2.1vw,26px);text-align:center;max-width:none} .bd-label{justify-content:center} .brands-deck-wrap{overflow:hidden;margin-top:40px} .brands-deck-track{display:flex;width:max-content;will-change:transform;animation:bdScroll 32s linear infinite} /* El pausado real (con aceleración/desaceleración suaves) lo controla initBrandsDeckCarousel() en js/main.js vía requestAnimationFrame — ver nota más abajo. Esta regla queda solo como fallback sin JS: sin ella, si el script no corre, el hover no haría nada (peor que un stop abrupto). */ .brands-deck-wrap:hover .brands-deck-track{animation-play-state:paused} .brands-deck{display:flex;align-items:center;gap:72px;padding-right:72px;flex-shrink:0} .bd-logo{display:flex;align-items:center;justify-content:center;height:22.5px;flex-shrink:0} .bd-logo img{height:100%;width:auto;display:block;filter:brightness(0);opacity:.7;transition:opacity .2s} .bd-logo:hover img{opacity:1} [data-theme="c-carbon"] .bd-logo img{filter:brightness(0) invert(1)} .bd-logo.bd-lg{transform:scale(1.2)} .bd-logo.bd-sm{transform:scale(.9)} @keyframes bdScroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}} /* Ojo: este carrusel NUNCA tuvo un bug de código — bdScroll, el pausado en :hover y el reanudado al sacar el mouse siempre funcionaron (verificado leyendo el historial completo de git: esta regla es idéntica desde el commit baseline). Lo que sí apagaba el movimiento por completo era esta media query: `prefers-reduced-motion: reduce` (activado por accesibilidad en el SO o el navegador de quien mira la página) hacía `animation:none`, dejando el carrusel congelado en el primer frame sin ningún error visual en el resto del sitio — exactamente el síntoma reportado ("está estático"). A pedido explícito de Alejandro (el movimiento continuo es un requisito, no un adorno) se saca esta única excepción; el resto de los `prefers-reduced-motion` del sitio (transiciones de página, hovers, etc., en js/main.js y los theme-*.css) se deja intacto, sin tocar. 2026-08-27: el pausado al hover (`animation-play-state:paused`) se veía "en seco" — un stop y un reanudado instantáneos, porque esa propiedad no es transicionable (no existe "animation-play-state .3s ease"). Se reemplazó el control del movimiento por JS puro (initBrandsDeckCarousel en main.js): en vez de una animación CSS con play/pause binario, ahora la posición se actualiza cuadro a cuadro con requestAnimationFrame y la velocidad converge suavemente hacia 0 al entrar el mouse y de vuelta a la velocidad de crucero al salir (misma velocidad que esta keyframe: 33.3333% cada 32s), dando una desaceleración/aceleración real en vez de un corte. Esta regla CSS y el `@keyframes bdScroll` quedan intactos como fallback si JS no llega a correr. */ @media(max-width:640px){.bd-logo{height:16.5px}.brands-deck{gap:44px;padding-right:44px}} /* ── 33. QUIZ TALENTO (Staffing) — restructuración: paso de contacto, selector de teléfono con país, catálogo de skills por categoría, y CTA final en el propio Quiz (todo scopeado a #pg-servicio-talento salvo los componentes nuevos que no colisionan con nada existente). */ .qform-field .phone-input{display:flex;align-items:stretch;border:1px solid var(--ink);background:#fff} .qform-field .phone-input input{border:none;flex:1;min-width:0;padding:11px 14px 11px 10px;font-family:var(--font);font-size:15px;color:var(--text);background:transparent} .qform-field .phone-input input:focus{outline:none;background:var(--g3,rgba(197,255,74,.18))} .phone-country{display:flex;align-items:center;gap:2px;padding:0 12px;border:none;border-right:1px solid var(--line);background:transparent;cursor:pointer;font-family:var(--mono);color:var(--text);flex-shrink:0;align-self:stretch;transition:background .2s var(--ease)} .phone-country:hover{background:var(--g3,rgba(197,255,74,.18))} .phone-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;display:block;flex-shrink:0} .phone-dropdown{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;max-width:460px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.15)} .phone-dropdown[hidden]{display:none} .phone-country-list{max-height:260px;overflow-y:auto;outline:none} .phone-country-list:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)} .phone-country-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--font);font-size:13px;color:var(--text)} .phone-country-opt:hover{background:var(--g3,rgba(197,255,74,.18))} .phone-country-opt .phone-flag{width:18px;height:13px} .phone-country-name{flex:1} .phone-country-dial{font-family:var(--mono);font-size:12px;color:var(--muted)} [data-theme="a-lima"] .phone-input,[data-theme="a-lima"] .phone-dropdown{background:#fff;border-color:var(--ink)} [data-theme="b-teal"] .phone-input,[data-theme="b-teal"] .phone-dropdown{background:#fff;border-color:var(--color-ash-rule)} [data-theme="c-carbon"] .phone-input,[data-theme="c-carbon"] .phone-dropdown{background:var(--color-carbon);border-color:var(--color-graphite)} [data-theme="c-carbon"] .phone-input input,[data-theme="c-carbon"] .phone-country{color:var(--color-chalk)} [data-theme="c-carbon"] .phone-country-opt{color:var(--color-chalk)} /* Paso de contacto (#pg-servicio-talento): etiqueta estática arriba del campo en vez del estilo "flotante" del resto del sitio — el formulario ahora incluye checkbox y selector de teléfono, que no calzan bien con ese patrón. Scopeado a esta página para no tocar /agendar/. */ #pg-servicio-talento .qform-field{position:relative} #pg-servicio-talento .qform-field label{position:static!important;display:inline-block;margin-bottom:6px;top:auto;left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em} #pg-servicio-talento .qform-field .req{position:static!important;display:inline-block;margin-right:4px;top:auto;left:auto;color:var(--g,var(--color-signal,#c5ff4a))} #pg-servicio-talento .qform-field input{padding:11px 14px!important} .qform-check-label{display:flex;align-items:flex-start;gap:10px;margin-top:10px;max-width:640px;cursor:pointer;font-family:var(--font);font-size:13px;color:var(--muted);line-height:1.4} .qform-check-label input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;margin-top:1px;cursor:pointer;accent-color:var(--ink)} .qform-check-label a{color:var(--text);text-decoration:underline} .quiz-actions--right{justify-content:flex-end!important;margin-top:14px} .chip-opt-name{white-space:nowrap} .chip-opt-add{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:15px;line-height:1;font-weight:700;flex-shrink:0} .chip-opt:hover .chip-opt-add{background:var(--g,var(--color-signal,#c5ff4a));color:var(--ink)} /* ── Chip de skill (Quiz, paso 4): mismo pill/tipografía que los tags de "Perfiles disponibles" (ver .tag-row/.tag), con un check que "se prende" con motion al seleccionar. El check arranca en ancho 0 (no con display:none) para poder animar su entrada; el color/fondo de cada estado vive en cada theme-*.css. ── */ .chip-opt-check{display:inline-flex;align-items:center;justify-content:center;width:0;margin-right:0;font-size:12px;line-height:1;font-weight:700;flex-shrink:0;overflow:hidden;opacity:0;transform:scale(.4) rotate(-20deg);transition:width .22s var(--ease),margin-right .22s var(--ease),opacity .16s var(--ease),transform .3s cubic-bezier(.34,1.56,.64,1)} .chip-opt.is-chosen .chip-opt-check{width:13px;margin-right:7px;opacity:1;transform:scale(1) rotate(0)} .chip-opt:hover{transform:translateY(-1px)} .chip-opt:active{transform:translateY(0) scale(.96)} .chip-opt.is-chosen{animation:chipPop .32s var(--ease)} .chip-opt--leaving{opacity:0;transform:scale(.85);pointer-events:none} @keyframes chipPop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .chip-opt,.chip-opt-check{transition-duration:0ms!important;animation:none!important} .profile-cta,.profile-cta .material-symbols-outlined{transition-duration:0ms!important} } .skill-groups{display:block} .skill-category{display:block;margin-bottom:2px} .skill-category:last-child{margin-bottom:0} .skill-category-name{display:block;font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.05em;color:var(--muted);margin-bottom:8px;text-transform:uppercase} .skill-empty{font-family:var(--font-mono,var(--mono));font-size:13px;color:var(--muted);padding:12px 0} .skill-custom-row{margin-bottom:0} .btn-g:disabled{opacity:.35;cursor:not-allowed;pointer-events:none} .btn-g--pending{opacity:.35} /* ── 34. BLOG — FILTRO DE CATEGORÍAS + ORDEN ────── */ #pg-blog .cat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:36px} #pg-blog .cat-chip{display:inline-flex;align-items:center;font-family:var(--font-mono,var(--mono));font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill,20px);padding:8px 16px;cursor:pointer;transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)} #pg-blog .cat-chip:hover{border-color:var(--ink);color:var(--text)} #pg-blog .cat-chip.is-active{background:var(--g);border-color:var(--g);color:var(--ink)} #pg-blog .cat-chip.is-active:hover{background:var(--hover-fill);border-color:var(--hover-fill);box-shadow:none} #pg-blog .cat-sort{margin-left:auto;display:flex;align-items:center;gap:8px} #pg-blog .cat-sort label{font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap} #pg-blog .cat-sort select{font-family:var(--font-mono,var(--mono));font-size:12px;color:var(--ink);background:transparent;border:1px solid var(--line);padding:8px 26px 8px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center} #pg-blog .cat-empty{font-family:var(--font-mono,var(--mono));font-size:13px;color:var(--muted);padding:32px 0;display:none} #pg-blog .cat-empty.show{display:block} @media(max-width:640px){ #pg-blog .cat-sort{margin-left:0;width:100%} } /* ── 35. SERVICIOS — TARJETA "PRÓXIMAMENTE" (Soho Academy) ────── */ /* No es clickeable (es un
, no un ) — no debe tener NINGÚN hover. La forma correcta es que .svc-card:hover ya excluya :not(.svc-card--soon) en cada theme-*.css (así queda, ver ahí). Antes esto se intentaba "cancelar" acá con background:transparent + display:none en las líneas, pero en C-Carbón el reposo de .svc-card no es transparente (var(--color-onyx)), así que ese cancelado en realidad SÍ producía un cambio visible al hacer hover — se sacó esa versión del fix. Solo queda el cursor, que sigue siendo una señal correcta de "esto no navega". */ #pg-servicios .svc-card.svc-card--soon{cursor:default} .svc-soon-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono,var(--mono));font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--g,var(--color-signal,#c5ff4a));border:1px solid var(--ink);padding:4px 8px;white-space:nowrap;flex-shrink:0;border-radius:20px} /* ── 36. /ia/agentes-sdlc/ — CTA FINAL (#contacto) usa el mismo fondo y formato de .cta-s que el resto del sitio (ver /ia-squad/, etc.), pero conserva slabel + h1 + p + dos botones en vez de un h2 simple, así que estos elementos necesitan su propio centrado porque .slabel y .hero-btns son flex (text-align:center del padre no los alcanza) y .sp/.lead-wrap tienen max-width sin margin auto. */ #contacto.cta-s .slabel{justify-content:center} #contacto.cta-s .sp{margin-left:auto;margin-right:auto} #contacto.cta-s .lead-wrap{margin-left:auto;margin-right:auto} #contacto.cta-s .hero-btns{justify-content:center} /* ── 37. TARJETAS DE BLOG (.igc/.ins-feat): token de hover "Familia Tarjeta" ── Mismo mecanismo de .evc/.svc-card (línea que avanza desde la izquierda + cambio de fondo), aplicado a toda entrada de blog en cualquier página que la muestre: /blog/, cada artículo individual ("Sigue leyendo", comparte #pg-blog) y el bloque de blog del Inicio (mismo componente .igc, sin scope de página — así se propaga solo). El stroke propio de cada card se define en cada theme-*.css (mismo valor que usa .evc ahí). La línea fija que traía la foto (.media-rule) se retira acá: ahora esa línea solo aparece con el hover de la card completa — scopeado al propio componente, no a la página, para no afectar el .media-rule de /eventos/ ni /sobre/. */ .igc .media-rule, .ins-feat .media-rule{display:none} .igc, .ins-feat{position:relative;overflow:hidden;transition:background .3s var(--ease)} .igc::before, .ins-feat::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} .igc:hover::before, .ins-feat:hover::before{transform:scaleX(1)} .igc:hover, .ins-feat:hover{background:var(--hover-tint)} /* ── 38. BARRA DE FILTROS (.evfilters) — separación del contenido de abajo ── .evfilters (usada en /casos-de-exito/ e /ia-squad/) envuelve uno o más .evfilter-group pero no tenía ningún margen propio — a diferencia de .ev-filterbar (/eventos/), que sí trae margin-bottom:40px. Se le da el mismo valor acá para que quede consistente en todo el sitio y no dependa de un margin a mano por página (/ia-squad/ lo compensaba con un style="margin-bottom:24px" inline — se saca esa muleta del HTML). 2026-08-27: hasta ahora .evfilters solo se había usado con UN .evfilter-group adentro (casos-de-exito, ia-squad), así que nunca importó que cada grupo fuera su propio bloque. /sobre/carreras/ sumó un segundo grupo (Modalidad + Ubicación) y, al ser dos
de bloque, cada uno caía en su propia fila — Modalidad arriba, Ubicación abajo, sin ningún espacio entre ambas filas (los chips de una casi tocaban los de la otra). Se vuelve a .evfilters un contenedor flex-row: en escritorio y tablet los grupos quedan uno al lado del otro en una sola fila (con espacio de sobra); en mobile se fuerza a columna con más separación entre grupos que la que había por accidente. El caso de dos grupos (/sobre/carreras/: Modalidad + Ubicación, 7 chips en total) no entra en una sola fila a partir de ~900px de ancho con el tamaño de chip normal — para que "escritorio y tablet" (hasta 768px, el breakpoint de tablet más chico usado en el sitio) se mantengan en una fila, se compacta el chip (padding y letra más chicos) en ese rango. No se toca el tamaño de chip en /casos-de-exito/ ni /ia-squad/ porque esas páginas solo usan un grupo y nunca necesitaron el ancho completo. */ .evfilters{display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;row-gap:14px;margin-bottom:40px} @media(max-width:980px){ #carrerasFilters{column-gap:18px} #carrerasFilters .evfilter-group{gap:6px} #carrerasFilters .evfilter-label{font-size:12px;margin-right:0} #carrerasFilters .evchip{padding:6px 10px;font-size:12px} } @media(max-width:640px){ .evfilters{flex-direction:column;align-items:flex-start;row-gap:22px} .evfilters .evfilter-group{row-gap:10px} #carrerasFilters .evchip{padding:7px 13px;font-size:12px} #carrerasFilters .evfilter-label{font-size:12px} } /* ── 39. .cfc — SIEMPRE hover de contenido no interactivo, nunca cursor de mano (/casos-de-exito/, /servicios/*, /industrias/*, /ia/agentes-sdlc/, /sobre/): a pedido de Alejandro, las cards de casos de éxito deben verse y comportarse EXACTAMENTE igual en todo el sitio, incluida la única variante que además navega ( en /sobre/, hacia /casos-de-exito/) — que el clic siga llevando a otra página está bien, pero la card no debe "avisar" que es clickeable: nada de tinte de acento ni cursor de mano, el único llamado a la acción es el botón "Ver todos nuestros casos de éxito" debajo. Por eso ya no se distingue por [href]: .cfc entero (con o sin href, o
) usa la familia Superficie (--hover-surface, el mismo token de .case-detail/.vc) y cursor normal. La lista global de cursores de A-Lima ya no incluye "a.cfc" (se sacó de ahí directamente, ver ese archivo). El color y el stroke se definen por skin en cada theme-*.css (ver ahí también el fix de altura pareja). */ .cfc{cursor:default;transition:background .2s var(--ease)} .cfc:hover{background:var(--hover-surface)} /* ── 40b. #pg-ia .sp — la bajada del hero de /ia/ ("...con supervisión humana en cada etapa.") quedaba con "etapa." solo en la última línea al ancho general de .sp (880px, ver sección 33/hero). Se angosta solo para esta página (no se toca el valor compartido de .sp) para que la última línea quede acompañada de 2 palabras ("cada etapa.") en vez de 1. Medido con Playwright en los 3 skins — en C-Carbon el párrafo ya cabía en 2 líneas sin viuda a este ancho, así que el cambio no lo afecta. */ #pg-ia .sp{max-width:840px} /* ── 40c. #pg-servicio-talento #top — título del hero "Staffing · Talent as a Service." en 1 sola línea en desktop/tablet. Caso puntual pedido por Alfredo, tratado como excepción explícita ("caso extremo"): el texto necesita ~1184-1282px de ancho según el skin (B-Teal, weight 900, es el más ancho) para no partirse, más de lo que da el .container compartido (var(--cont,1280px) - 96px de padding = 1184px). Se amplía el .container SOLO de la sección #top de esta página (no la clase .container global, que se reusa en todo el sitio) y se libera el max-width del propio h1.lead-wrap para que no sea él el que limite. En viewports <=1280px el .container ya queda acotado por el propio viewport (max-width solo pone un techo, no fuerza ancho) — por eso esta regla no necesita media query y no afecta tablet (768px, ya entraba en 1 línea de todas formas) ni mobile (390px, sigue partiéndose en 2 líneas de forma natural: forzar 1 línea ahí exigiría achicar la tipografía 25-40%, decisión explícita de NO hacerlo). Verificado con Playwright: 1 línea en los 3 skins desde 768px hacia arriba, sin overflow horizontal en ningún viewport. */ #pg-servicio-talento #top .container{max-width:1420px} #pg-servicio-talento #top .lead-wrap{max-width:none} /* ── 40d. #pg-servicios (B-Teal, mobile) — nuevo título "Business first: / tecnología que impacta el negocio." (pedido de Alfredo, reemplaza "La tecnología sin propósito es solo ruido."). Es una cláusula de 5 palabras en el — matemáticamente, a los anchos de A-Lima/C-Carbon entra en líneas de 2+ palabras sin viuda, pero en B-Teal (weight 900, el más ancho) a 390px de viewport ninguna combinación contigua de 2 líneas cabe sin dejar una palabra sola (probado: "tecnología que" + "impacta el negocio." no entran juntas en el ancho de 342px del box). Con 5 palabras repartidas en 3 líneas SIEMPRE queda una línea de 1 sola palabra a este tamaño (2+2+1 es la única partición posible). Se achica la tipografía SOLO para este título, SOLO en B-Teal, SOLO en mobile (≤640px) — de 42px a 36px — lo mínimo necesario para que quepan 2 líneas completas en el ("tecnología que" / "impacta el negocio.") sin ninguna palabra sola. A-Lima y C-Carbon no se tocan: ya quedaban sin viuda a su tamaño normal (42px/36px respectivamente) en mobile. */ @media(max-width:640px){ [data-theme="b-teal"] #pg-servicios .lead-wrap{font-size:36px} } /* ── 40e. #pg-agentes-ia-sdlc #top — título del hero ("Su equipo ya sabe programar bien. / Que lo haga tres veces más rápido.") en exactamente 2 líneas en desktop, una por frase — pedido explícito de Alfredo. El
ya está en el HTML entre ambas frases; el problema era que el .lead-wrap compartido (max-width:880px) partía cada frase en 2 líneas propias (4 líneas en total). Medido: a font-size 84px (tope del clamp, viewport >=1400px) la 1ª frase necesita ~1186px y la 2ª (con el "/" del ) ~1138px — no entran en los 1184px de contenido que da el .container compartido (var(--cont,1280px) - 96px de padding), pero sí en los 1420px ya usados como excepción en #pg-servicio-talento (mismo mecanismo: caso puntual, ver 40c). Mismo criterio que esa excepción: NO se toca mobile/tablet (el max-width solo pone un techo, en viewports angostos el .container queda acotado por el propio viewport; en mobile el título sigue partiéndose en más líneas de forma natural, sin forzar nada ahí). */ #pg-agentes-ia-sdlc #top .container{max-width:1420px} #pg-agentes-ia-sdlc #top .lead-wrap{max-width:none} /* ── 40. .quiz-progress-track — barra verde superior del quiz de /servicios/talent-as-a-service/ removida a pedido: solo se oculta por CSS (display:none), NUNCA se borra del HTML. js/main.js sigue escribiendo su width y el texto de #quizStepnum en cada paso (getElementById('quizProgress').style.width = ...) — si el elemento se elimina del DOM esas líneas fallarían silenciosamente. */ .quiz-progress-track{display:none}