/* ============================================================================ KALLPA AI — Chrome compartido de las páginas públicas ---------------------------------------------------------------------------- index.html · plataforma.html · como-trabajamos.html · planes.html (login.html y el panel usan css/kallpa-shared.css, que es otra hoja.) Existe porque el nav, el mega-menú y el footer dejaron de vivir en una sola página: al pasar la landing de cuatro pestañas a scroll, cada pestaña se convirtió en su propia página y las tres comparten el mismo encabezado. Duplicarlo cuatro veces era garantizar que se desincronizaran. PALETA — tomada de la cabecera de referencia-landing-v11.html, con los nombres que ya usa el proyecto (--bg/--ink/--mint) en vez de los del export (--bg2/--acc/--accText), para no tener dos vocabularios de color en el mismo repositorio. TEMA — el mecanismo NO cambia: atributo data-theme en y la clave localStorage kallpa_theme, igual que js/kallpa-theme.js y las 13 páginas del panel. Lo que cambia es el DEFECTO: ahora es CLARO. Por eso el de cada página trae data-theme="light" escrito en el marcado y el script inline de la cabecera lo QUITA cuando hay 'dark' guardado — al revés que antes. Escribirlo en el marcado (en vez de que lo ponga el script) hace que el defecto claro valga también sin JavaScript y sin destello al cargar. :root sigue siendo el tema oscuro para que alternar() de kallpa-theme.js —que lee "sin atributo = oscuro"— siga funcionando sin tocarlo. ========================================================================== */ :root{ /* Oscuro (columna derecha de la cabecera de la referencia) */ --bg:#080C14; --bg-2:#0E1622; --panel:#0E1622; /* DOS bordes con papeles distintos, y mezclarlos es el error a evitar (misma distinción que --color-border / --color-border-strong en DESIGN.md §1.1): - --line y --line-2 son DECORATIVOS: separadores, contorno de tarjeta, la guía vertical de la línea de tiempo. WCAG 1.4.11 no les exige contraste y subirlos emborrona el aspecto de la página. - --line-control es para controles cuyo límite es el único indicio de que son interactivos: el campo de RUC, el botón fantasma, el botón de tema, las flechas del carrusel. Cumple 3:1 sobre las tres superficies, como pide WCAG 1.4.11. */ --line:#1B2735; --line-2:#26374A; --line-control:#5C6A7E; --ink:#EAF0F6; --ink-2:#9FB0C2; --ink-3:#748197; --mint:#3DBF8C; --mint-text:#5FD4A5; --mint-soft:rgba(61,191,140,.12); --mint-line:rgba(61,191,140,.28); --on-mint:#04150E; --mint-hover:#35A87C; /* El anillo de foco es un token propio y no --mint: en tema claro el verde de marca no llega al 3:1 que pide WCAG 2.4.11 y hay que oscurecerlo. En oscuro coinciden, pero el token existe en ambos para que el CSS nunca tenga que ramificar por tema. */ --focus-ring:#3DBF8C; --warn:#E0A93B; --navbg:rgba(8,12,20,.85); --shadow:0 12px 32px rgba(0,0,0,.45); --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif; --disp:'Space Grotesk',sans-serif; /* 1320 en vez de los 1220 del export: es el ancho que quedó aprobado. El padding lateral (32px), la altura del nav (74px) y el ritmo vertical (112/104/96) NO se escalan — son medidas ergonómicas, no proporcionales al ancho. Lo que sí sube en proporción son los huecos internos de las rejillas de dos columnas, que sí dependen del ancho disponible. */ --max:1320px; --pad:32px; } :root[data-theme="light"]{ /* Claro (columna izquierda de la cabecera de la referencia) — el DEFECTO */ --bg:#FFFFFF; --bg-2:#F5F8F6; --panel:#FFFFFF; /* --line-control NO es el #D9E0DC del export: ese valor da 1.34:1 sobre --bg y 1.26:1 sobre --bg-2, contra el 3:1 que pide WCAG 1.4.11 para el límite de un control. #848E87 conserva el matiz verdoso del export y da 3.39 / 3.17:1. --line-2 se queda con el valor original porque su papel sí es decorativo. */ --line:#EAEFEC; --line-2:#D9E0DC; --line-control:#848E87; /* --ink-3 NO es el #8A949E del export de referencia. Ese valor da 3.08:1 sobre --bg y 2.88:1 sobre --bg-2, muy por debajo del mínimo AA de 4.5:1, y acá no es decoración: lo llevan la línea "Sin tarjeta. Sin instalar nada." del hero, la etiqueta y la nota de RIMPE del verificador, el estado vacío, la meta de cada módulo y la línea legal del pie. Todo eso se lee. #69727C mantiene el tono y da 4.89:1 sobre --bg y 4.57:1 sobre --bg-2. Es la tercera vez que este repositorio sube este mismo token por esta misma razón — ver los comentarios de --ink-3 en kallpa-shared.css y de --color-text-subtle en tokens.css. */ --ink:#080C14; --ink-2:#5A6672; --ink-3:#69727C; --mint:#3DBF8C; --mint-text:#0E7A56; --mint-soft:rgba(61,191,140,.10); --mint-line:rgba(61,191,140,.30); --on-mint:#04150E; --mint-hover:#35A87C; /* El mismo verde de marca, un peldaño más oscuro: #3DBF8C como anillo de foco da 2.33 / 2.18:1 sobre las superficies claras, bajo el 3:1 de WCAG 2.4.11. #17976A da 3.70 / 3.46:1. Es el valor que el panel ya usa para --color-focus-ring en claro; no se inventa uno nuevo. */ --focus-ring:#17976A; /* #C08A17 (el del export) da 3.05 / 2.85:1, bajo el 4.5:1 de AA, y acá es texto que informa: el rótulo "ALERTA DE FLUJO" de la tarjeta del hero y la píldora de estado "AMARILLO" del semáforo. #946A11 mantiene el ámbar y da 4.85 / 4.54:1. */ --warn:#946A11; --navbg:rgba(255,255,255,.85); --shadow:0 1px 2px rgba(8,12,20,.05),0 10px 28px rgba(8,12,20,.07); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* scroll-padding: el nav es sticky y mide 74px; sin esto un #ancla deja el título del bloque escondido debajo de la barra. */ html{scroll-padding-top:96px} body{ background:var(--bg);color:var(--ink); font-family:var(--sans);font-weight:400;line-height:1.6; /* Este overflow-x:hidden NO recorta, y conviene saberlo antes de confiar en él: el valor del solo se propaga al viewport cuando el está en visible, y en cuanto un eje queda en visible y el otro no, el visible pasa a auto. El acaba siendo su propio contenedor de scroll y lo que se salga por el costado abre barra igual. Se queda como resguardo para navegadores sin overflow:clip; quien recorta de verdad es .pagina. */ max-width:100%;overflow-x:hidden;min-height:100vh; -webkit-font-smoothing:antialiased; transition:background-color .25s ease,color .25s ease; } /* ── Red contra desbordes horizontales ────────────────────────────────── Envuelve todo el contenido de las cuatro páginas públicas. Existe porque nada más recortaba: el overflow-x del no llega a hacerlo (ver arriba) y ponerlo en el tampoco — medido, solo recorta si el TAMBIÉN tiene overflow no-visible, y esa combinación rompe el sticky. CLIP y no HIDDEN, y la diferencia no es cosmética. Medido en esta misma página con un elemento que se sale 500px: sin envoltorio → 500px de scroll lateral · nav sticky OK overflow-x:hidden → recorta · NAV ROTO (deja de pegarse) overflow-x:clip → recorta · nav sticky OK hidden crea un contenedor de scroll y position:sticky pasa a pegarse a ESE contenedor en vez de a la ventana. clip recorta sin crear contenedor, así que el encabezado sigue intacto. Hace falta antes de meter nada que se salga por el costado: modales, paneles desplegables y capas decorativas. El resplandor del hero fue lo primero en destaparlo (428px de scroll lateral). login.html queda fuera: usa kallpa-shared.css y no lleva ni mega-menú ni modal. */ .pagina{overflow-x:clip} h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:600;line-height:1.1} a{color:inherit;text-decoration:none} button{font-family:inherit} ::selection{background:var(--mint);color:var(--on-mint)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px} /* ── Rótulo de sección (eyebrow) ───────────────────────────────────────── */ .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--mint-text);margin:0 0 20px} /* Rótulo numerado, estilo casillero del Formulario 104: el número va en una cajita con borde, correlativo y con cero a la izquierda. Lo usan las páginas migradas desde las pestañas (plataforma / como-trabajamos / planes). El contador se reinicia en
, así cada página numera desde 01. Son correlativos propios, NO códigos reales del 104. */ main{counter-reset:casillero} .eyebrow.num{display:flex;align-items:center;gap:12px} .eyebrow.num::before{counter-increment:casillero; content:counter(casillero,decimal-leading-zero); background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:4px; padding:3px 8px;font-size:11px;line-height:1;letter-spacing:.12em;color:var(--mint-text)} /* Encabezado de bloque con bajada — el patrón de las páginas migradas. */ .sec-head{max-width:47rem;margin-bottom:56px} .sec-head h2{font-size:clamp(30px,3.4vw,44px);font-weight:600; letter-spacing:-.03em;line-height:1.1;margin:0 0 16px} .sec-head h2 em{font-style:normal;color:var(--mint-text)} .sec-head p{color:var(--ink-2);font-size:17px;line-height:1.6;margin:0} /* ── Botones ───────────────────────────────────────────────────────────── */ .btn{display:inline-block;font:inherit;font-size:15px;font-weight:600; border:0;cursor:pointer;border-radius:10px;padding:11px 20px; transition:background .15s,border-color .15s,color .15s,transform .1s} .btn:active{transform:scale(.98)} .btn-mint{color:var(--on-mint);background:var(--mint)} .btn-mint:hover{background:var(--mint-hover)} .btn-ghost{color:var(--ink);background:none;border:1px solid var(--line-control)} .btn-ghost:hover{border-color:var(--mint);color:var(--mint-text)} .btn-plano{color:var(--ink);background:none;padding:10px 16px;font-weight:500} .btn-plano:hover{color:var(--mint-text)} /* Los CTA del hero y del cierre son más grandes que los del nav. */ .btn-lg{font-size:16px;padding:16px 28px;border-radius:12px} /* ── Toggle de tema ────────────────────────────────────────────────────── */ .theme-toggle{width:38px;height:38px;flex:none;border-radius:50%; border:1px solid var(--line-control);background:none;color:var(--ink-2); cursor:pointer;display:grid;place-items:center; transition:color .15s,border-color .15s,transform .1s} .theme-toggle:hover{color:var(--mint-text);border-color:var(--mint)} .theme-toggle:active{transform:scale(.9)} .theme-toggle svg{width:17px;height:17px} /* El icono visible es el del tema al que se va a CAMBIAR, no el actual. En claro (defecto) se ofrece la luna; en oscuro, el sol. */ .theme-toggle .icon-sun{display:block} .theme-toggle .icon-moon{display:none} :root[data-theme="light"] .theme-toggle .icon-sun{display:none} :root[data-theme="light"] .theme-toggle .icon-moon{display:block} /* ── Encabezado + navegación ───────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:50;background:var(--navbg); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:background-color .25s ease,border-color .25s ease} .nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:74px; display:flex;align-items:center;gap:40px} .logo{display:flex;align-items:center;gap:11px;color:var(--ink); background:none;border:0;cursor:pointer;padding:0;font-family:inherit;flex:none} .logo svg{flex:none} .logo-txt{font-family:var(--disp);font-weight:700;font-size:19px; letter-spacing:-.03em;line-height:1;white-space:nowrap} .logo-txt b{color:var(--mint-text);font-weight:700} .nav-links{display:flex;gap:4px;margin-left:auto} .nav-links > a,.mega-btn{font:inherit;font-size:15px;font-weight:500; border:0;cursor:pointer;background:none;color:var(--ink-2); padding:9px 14px;border-radius:8px;white-space:nowrap; display:flex;align-items:center;gap:7px; transition:background .15s,color .15s} .nav-links > a:hover,.mega-btn:hover{background:var(--bg-2);color:var(--ink)} .nav-links > a[aria-current="page"]{background:var(--mint-soft);color:var(--mint-text)} .mega-btn[aria-expanded="true"]{background:var(--mint-soft);color:var(--mint-text)} .mega-btn .chev{transition:transform .2s} .mega-btn[aria-expanded="true"] .chev{transform:rotate(180deg)} .nav-cta{display:flex;align-items:center;gap:10px;flex:none} /* ── Mega-menú ─────────────────────────────────────────────────────────── */ /* El panel cuelga del