/* ========================================================= ECO LÓGICA García — base de estilos globales ========================================================= */ /* ---------- Tokens ---------- */ :root { --font-display: "Archivo", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "Consolas", monospace; --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; /* Marca oficial (Manual de identidad 03 . PALETA) */ --brand-deep: #0B3B22; /* Verde profundo: fondos, base de marca */ --brand-garcia: #1B7F3A; /* Verde García: color institucional, una tinta */ --brand-signal: #3FD86A; /* Verde señal: acento, precios, botones */ --brand-carbon: #0B1F13; /* Carbón: titulares y panel oscuro */ --brand-bone: #F4F6F4; /* Hueso: papel y fondo claro */ /* Compatibilidad con variables del sistema */ --brand-forest: var(--brand-deep); --brand-forest-dark: #072516; --brand-green: var(--brand-signal); --brand-green-strong: var(--brand-garcia); --brand-mid: var(--brand-garcia); --brand-white: var(--brand-bone); /* Tema claro (por defecto) */ --bg: #ffffff; --bg-alt: #f1f8f3; --surface: #ffffff; --surface-alt: #eef6f0; --surface-strong: #e5f2e8; --ink: var(--brand-carbon); --ink-muted: #3d5647; /* Oscurecido de #668270 (antes fallaba AA 4.5:1 en texto normal sobre blanco y sobre --surface-alt); ahora pasa en ambos fondos. */ --ink-soft: #527060; --border: #dbe8de; --border-strong: #c2d8c7; --accent: var(--brand-signal); --accent-ink: var(--brand-carbon); /* Relleno de los controles "encendidos" (botón principal, chip activo, píldora activa) y el texto que va encima. Un solo par por tema para que ningún componente vuelva a inventar su combinación: el texto casi negro (#06210f) sobre Verde García daba 3.36:1 y no pasaba AA. Blanco sobre Verde García da 5.07:1. */ --accent-fill: var(--brand-garcia); --on-accent-fill: #ffffff; /* Anillo de foco: el Verde señal sobre blanco daba 1.87:1 (WCAG 1.4.11 pide 3:1). Verde García sobre blanco da 5.07:1. */ --focus-ring: var(--brand-garcia); --shadow-sm: 0 2px 10px rgba(11, 59, 34, 0.06); --shadow-md: 0 12px 32px rgba(11, 59, 34, 0.1); --shadow-lg: 0 24px 64px rgba(11, 59, 34, 0.16); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --header-h: 68px; --topbar-h: 34px; color-scheme: light; } body.dark-mode { --bg: var(--brand-carbon); --bg-alt: #07150c; --surface: var(--brand-deep); --surface-alt: #0e4428; --surface-strong: #125532; --ink: var(--brand-bone); --ink-muted: #b8ccbf; /* Era #85a390: pasaba sobre --surface pero fallaba sobre --surface-alt (4.07:1) y --surface-strong (3.22:1), donde viven las descripciones de garantías, los chips de la calculadora y las unidades kg/g. */ --ink-soft: #a8c4b2; --border: rgba(244, 246, 244, 0.12); --border-strong: rgba(63, 216, 106, 0.28); --accent: var(--brand-signal); --accent-ink: var(--brand-carbon); --accent-fill: var(--brand-signal); --on-accent-fill: var(--brand-carbon); --focus-ring: var(--brand-signal); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; /* "clip" y no "hidden": overflow-x:hidden obliga al navegador a calcular overflow-y:auto, con lo que se vuelve un contenedor de scroll y deja de servir como referencia del viewport — eso rompe position:sticky en los descendientes y el "pinning" de ScrollTrigger. "clip" recorta igual el desbordamiento horizontal sin crear ese contenedor. La línea "hidden" queda primero como respaldo para navegadores viejos que no conocen "clip" y se saltan la segunda declaración. */ overflow-x: hidden; overflow-x: clip; transition: background-color 0.35s ease, color 0.35s ease; } /* [hidden] siempre gana: sin esto, cualquier clase con display (flex, grid…) le ganaba al atributo y el elemento "oculto" seguía viéndose. */ [hidden] { display: none !important; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } ::selection { background: var(--brand-green); color: var(--brand-forest); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Animaciones ---------- Se quitaron fadeInUp, floatSoft y dot: ninguna regla del proyecto las nombraba en una declaración "animation" (verificado con un parser de CSS, no con grep, para no confundir menciones dentro de comentarios). */ @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(43, 213, 103, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(43, 213, 103, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 213, 103, 0); } } @keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } } @keyframes spin { to { transform: rotate(360deg); } } /* El contenido solo nace oculto cuando hay JS vivo para volver a mostrarlo: la clase js-motion la pone un script en línea del de index.html. Si el JS no carga, falla a medias o el visitante pidió menos movimiento, estas reglas nunca aplican y la página se ve completa de inmediato — antes dependía de un temporizador de respaldo de 1800 ms que, de paso, revelaba toda la página de golpe y anulaba el efecto al hacer scroll. */ .js-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); } /* transform:none y no translateY(0): son idénticos en pantalla, pero un transform activo deja al elemento como bloque contenedor y contexto de apilamiento permanente, y son ~48 contenedores en la página. */ .js-motion .reveal.show { opacity: 1; transform: none; } .js-motion .reveal.delay-1.show { transition-delay: .08s; } .js-motion .reveal.delay-2.show { transition-delay: .16s; } .js-motion .reveal.delay-3.show { transition-delay: .24s; } .js-motion .reveal.delay-4.show { transition-delay: .32s; } .skeleton { background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-strong) 37%, var(--surface-alt) 63%); background-size: 400px 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }