/* ============================================ BASE.CSS — SISTEMA GLOBAL CGE ============================================ */ /* ------------------------------ RESET BÁSICO ------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; scroll-behavior: smooth; font-family: 'Outfit', sans-serif; background: #fafafa; color: #222; } /* ------------------------------ VARIABLES INSTITUCIONALES ------------------------------ */ :root { --cge-rojo: #981c21; --cge-amarillo: #f89737; --cge-negro: #202020; --cge-blanco: #ffffff; --gris-claro: #f2f2f2; --gris-medio: #dcdcdc; --gris-oscuro: #555; --radius: 8px; --shadow-suave: 0 4px 12px rgba(0,0,0,0.08); --shadow-media: 0 6px 20px rgba(0,0,0,0.12); --transition: 0.25s ease; --radius-lg: 20px; --shadow-md: 0 4px 10px rgba(0,0,0,0.1); --shadow-lg: 0 6px 14px rgba(0,0,0,0.15); --gap-lg: 24px; --space-xl: 40px; --space-md: 20px; --space-sm: 10px; --icon-box-size: 140px; --icon-size: 2.5rem; --font-bold: 600; --font-md: 1rem; --transition-fast: 0.3s ease; --pulse-speed: 2s; } /* ------------------------------ TIPOGRAFÍA GLOBAL ------------------------------ */ h1, h2, h3, h4 { font-weight: 600; color: var(--cge-negro); } p { line-height: 1.6; } /* ------------------------------ IMÁGENES ------------------------------ */ img, svg { max-width: 100%; display: block; } /* ------------------------------ CONTENEDORES Y LAYOUT ------------------------------ */ .container { width: min(100%, 1200px); margin: auto; } .text-center { text-align: center; } .mt-20 { margin-top: 20px; } .mt-40 { margin-top: 40px; } /* ------------------------------ GRIDS ------------------------------ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 1rem; justify-items: center; } @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; align: center; } } /* ------------------------------ ANIMACIONES BASE ------------------------------ */ .fade-in { opacity: 0; transform: translateY(10px); animation: fadeIn 0.6s ease forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* ============================================ ACCESIBILIDAD — MODOS GLOBALES SUAVES ============================================ */ /* MODO DISLEXIA */ body.dislexia { font-family: 'OpenDyslexic', sans-serif !important; letter-spacing: 0.5px; word-spacing: 2px; } /* MODO LECTURA FÁCIL */ body.lectura-facil p, body.lectura-facil li { font-size: 1.15rem; line-height: 1.9; } body.lectura-facil h1, body.lectura-facil h2, body.lectura-facil h3 { margin-bottom: 10px; } /* ZOOM — aplicar en para que escale todo con rem */ html.zoom-1 { font-size: 110%; } html.zoom-2 { font-size: 125%; } html.zoom-3 { font-size: 140%; }