/* ============================================================================ DRIMERS — Sistema de diseño compartido (funnel público: página madre, Motor, Canal, onboarding). NO se carga desde ningún archivo del OS interno/admin — ver public/legacy/*.html, esas páginas tienen su propio sistema y quedan completamente aparte a propósito. Principios (misión de rediseño 2026-07-29, reskin 2026-08-02 sobre la misma base): una idea dominante por sección, dos familias tipográficas + mono solo para precios/datos/pasos, contenedores 1120-1240px, menos cards/chips/pills, más espacio y jerarquía editorial, timelines en vez de grids de cards idénticas, prueba real sin recortar. Reskin 2026-08-02 (referencia: docs/design-reference/drimers-acquisition- frontend-reference.png): mismos componentes/estructura de siempre (.btn, .card, .fc-*, .timeline...), solo cambian los VALORES de los tokens de color y tipografía display + se suma --blue como segundo acento ("el canal, el movimiento") y una utilidad de borde rasgado. Cero red (regla dura del board). --gold sigue siendo el nombre de la variable para no tocar cientos de usos ya correctos en cada página — el VALOR ahora es el amarillo señal del board, no dorado. ============================================================================ */ :root{ /* ---- color: paleta del board (reskin 2026-08-02) ---- */ --ink:#0D0D0F; /* texto principal, fondo de secciones oscuras */ --ink-soft:#3d3f42; /* cuerpo de texto sobre fondo claro */ --carbon:#0D0D0F; /* fondo de secciones oscuras (near-black del board) */ --carbon-line:#2a2a2d; /* bordes sobre fondo oscuro */ --on-carbon:#d5d5d3; /* texto de cuerpo sobre fondo oscuro */ --on-carbon-dim:#8f8f8c; /* texto secundario sobre fondo oscuro */ --paper:#F6F3EC; /* marfil — superficie editorial principal del board */ --paper-alt:#EFEAE0; /* marfil alterno, para dar ritmo entre secciones */ --card:#ffffff; /* fondo de tarjetas sobre paper */ --line:rgba(13,13,15,.16); /* bordes sobre fondo claro */ --gray:#6b6b67; /* gris neutro unico (reemplaza --slate/--muted/--slate2) */ --blue:#0A41FF; /* electrico — el canal, el movimiento, la transformacion */ --blue-ink:#ffffff; /* texto sobre fondo azul */ --blue-soft:#e8edff; /* azul muy claro, para fondos sutiles sobre paper */ --gold:#FFC400; /* amarillo señal del board (nombre de variable sin cambiar) */ --gold-deep:#7d5a00; /* amarillo con contraste AA real (5.25:1 sobre --paper-alt, Lighthouse-verificado) */ --gold-ink:#241a00; /* texto sobre fondo amarillo */ --gold-soft:#fff3c4; --green:#1a8f4c; /* unico uso semantico permitido (exito/activo), nunca decorativo */ --green-soft:#e3f3e9; /* ---- tipografia: display condensado (referencia: Druk Condensed — no disponible con licencia en el repo, se documenta Barlow Condensed 900 como alternativa deliberada), Inter para cuerpo/UI, mono acotado ---- */ --font-display:'Barlow Condensed', 'Archivo', system-ui, sans-serif; --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; /* SOLO precios/datos/numeros de paso */ /* ---- espaciado (8pt) ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* ---- contenedor y medida ---- */ --maxw:1180px; --measure:66ch; --pad:20px; --sec:clamp(64px, 11vw, 128px); --radius:10px; --radius-sm:6px; /* ---- movimiento (respeta prefers-reduced-motion global mas abajo) ---- */ --ease:cubic-bezier(.2,.8,.2,1); /* ---- alias literal de los tokens del JSON contract (mismos valores que los de arriba, nombres exactos del contrato para que "grep --dr-" encuentre coincidencias reales en vez de solo un renombre en la documentacion) ---- */ --dr-paper:#F6F3EC; --dr-ink:#0D0D0F; --dr-blue:#0A41FF; --dr-yellow:#FFC400; --dr-white:#FFFFFF; --dr-muted:#686864; --dr-hairline:rgba(13,13,15,.22); --dr-ease:cubic-bezier(.2,.8,.2,1); } /* ============================================================================ RESET Y BASE ============================================================================ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html,body{overflow-x:hidden;max-width:100%} body{ margin:0; font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--ink-soft); background:var(--paper); -webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} b,strong{color:var(--ink);font-weight:700} /* BUG REAL (rediseño visual profundo 2026-08-02, pase 2): --ink es casi el mismo hex que el fondo de section.ink (#0D0D0F ambos) — cualquier / dentro de una seccion oscura quedaba invisible. Encontrado al convertir "Que es un Estimado Calificado" (canal) a .ink; el Estimado Calificado desaparecia por completo. Corregido de forma centralizada, no parcheado en cada instancia. */ section.ink b,section.ink strong,section.carbon b,section.carbon strong{color:#fff} a{color:var(--gold-deep);text-decoration:none} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}} /* ---- tipografia ---- */ h1,h2,h3{ font-family:var(--font-display); color:var(--ink); margin:0; letter-spacing:-.02em; text-wrap:balance; font-weight:800; } h1{font-size:clamp(44px, 11vw, 92px);line-height:.94;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;max-width:20ch} h2{font-size:clamp(26px, 4.6vw, 42px);line-height:1.1;max-width:22ch} h3{font-size:clamp(19px, 3vw, 23px);line-height:1.25} p{margin:0;color:var(--gray)} .lead{font-size:clamp(17.5px, 2.2vw, 20px);line-height:1.6;color:var(--ink-soft);max-width:var(--measure)} .muted{color:var(--gray);font-size:14.5px;line-height:1.55} /* --gray sobre --ink da 3.63:1 (falla AA en texto normal) — variante oscura real, no solo un mismo tono mas claro por estetica. */ section.ink .muted,section.carbon .muted{color:var(--on-carbon-dim)} /* Label editorial: reemplaza el eyebrow monoespaciado por defecto — mayuscula, tracking, peso, SIN fuente mono. Mono queda reservado para datos/precios. */ .label{ font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; color:var(--gold-deep); display:inline-flex; align-items:center; gap:10px; } .label::before{content:'';width:26px;height:2px;background:var(--gold);flex:0 0 auto} section.ink .label{color:var(--gold)} /* Uso de mono: SOLO estas clases lo usan. */ .num{font-family:var(--font-mono)} /* precios, cifras, pasos */ /* Declaracion grande — cierre de bloque en display font, no un parrafo mas. BUG REAL encontrado en el rediseño visual profundo 2026-08-02 (pase 2): esta clase solo estaba definida en el