/* ===================================================================== * theme.css — Variables visuales del sitio * --------------------------------------------------------------------- * Aquí viven los COLORES, TIPOGRAFÍAS y MEDIDAS GENERALES del sitio. * * ¿Quieres cambiar el color de la marca? * → Edita los valores hexadecimales (los que empiezan con #) abajo. * * ¿Quieres cambiar la tipografía? * → Cambia el nombre de la fuente en --font-display y --font-body. * Si usas una fuente nueva, también hay que cargarla en el * de index.html (busca el con "fonts.googleapis.com"). * * No es necesario tocar las medidas (espaciados, radios, sombras) salvo * que quieras cambios estructurales en todo el sitio. * ===================================================================== */ :root { /* === Paleta NAVY (el color principal, "Scorpius") ============== */ /* Va de oscuro a claro. Se usa para fondos profundos, texto importante * y partes interactivas. Si quieres cambiar el azul de la marca, * estos son los tres valores a modificar. */ --navy-900: #0A1F4F; /* Más oscuro: fondos hero, footer */ --navy-700: #0B3077; /* Estándar: botones, títulos clave */ --navy-500: #2547A8; /* Más claro: acentos suaves, hovers */ /* === Paleta ÁMBAR (el color de acento, calidez) ================ */ /* Resalta llamadas a la acción y palabras clave. Demasiado ámbar * cansa la vista: se usa con cuidado, en ~10% de la superficie. */ --amber-500: #F59E0B; /* Botones primarios */ --amber-400: #FBBF24; /* Resaltado de texto, chips */ --amber-300: #FFB347; /* Degradados */ /* === Neutros (grises, blancos, fondos suaves) ================== */ --cream-50: #FBF7EF; /* Fondo cálido para alternar con blanco */ --slate-900: #0F172A; /* Texto principal sobre fondos claros */ --slate-600: #475569; /* Texto secundario */ --slate-300: #CBD5E1; /* Líneas divisorias */ --slate-100: #F1F5F9; /* Fondos muy sutiles */ --white: #FFFFFF; /* === Tipografía ================================================ */ /* La fuente es la misma para títulos y cuerpo (Inter). * Si la cambias, recuerda cargarla también en el de * index.html y privacy.html. */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* === Espaciados generales ====================================== */ /* clamp(min, ideal, max) da espaciados que crecen suavemente entre * móvil y escritorio sin saltos bruscos. */ --space-section: clamp(3rem, 8vw, 6rem); /* arriba/abajo de cada sección */ --space-inner: clamp(1rem, 4vw, 2.5rem); /* izquierda/derecha */ /* === Radios (esquinas redondeadas) ============================= */ --radius-card: 14px; /* Cards, modal, boxes */ --radius-pill: 999px; /* Botones tipo pastilla y pills */ /* === Sombras =================================================== */ --shadow-card: 0 10px 30px -12px rgba(11, 48, 119, 0.25); --shadow-cta: 0 8px 20px -8px rgba(245, 158, 11, 0.6); /* === Tiempos de transición ===================================== */ --t-fast: 150ms ease-out; /* Hover sutil */ --t-base: 250ms ease-out; /* Cambios visibles, paneles */ } /* ===================================================================== * RESETEO Y BASE * Pequeños ajustes para que todos los navegadores se comporten igual * y para evitar scroll horizontal accidental en móvil. * ===================================================================== */ *, *::before, *::after { /* box-sizing border-box: el ancho y alto incluyen el borde y padding, * para que sea más fácil hacer cuadrículas sin sorpresas. */ box-sizing: border-box; } html { scroll-behavior: smooth; /* Anclas con scroll suave en vez de salto */ overflow-x: hidden; /* Bloquea scroll horizontal accidental */ } body { font-family: var(--font-body); color: var(--slate-900); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Refuerzo del bloqueo de scroll horizontal */ max-width: 100vw; /* El body nunca es más ancho que la pantalla */ } /* Respeta a las personas con preferencia "reducir movimiento": * apaga animaciones y transiciones para que el sitio no maree. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }