/* ========================================================================== 1 - CONTROL GLOBAL · elcontacto Aquí se controla TODA la web. Cambia una línea y cambia todo el sitio. REGLA: --MAYUSCULAS = global (afecta todo) · --minusculas = local (un bloque). MODO OSCURO: los tokens se redefinen dentro de [data-tema="oscuro"] más abajo. ========================================================================== */ :root{ /* ---- COLORES DE MARCA (si cambias el azul, cambia toda la web) ---- */ --AZUL:#1f9ad6; /* azul del logo (acento principal) */ --AZUL-OSCURO:#127bb0; /* hover de botones/enlaces */ --AZUL-SUAVE:#e7f4fb; /* fondos suaves azulados */ --AZUL-BORDE:#c7e6f5; /* bordes azulados */ --AZUL-BRILLANTE:#38b6ea; /* azul sobre fondos negros */ --NEGRO:#0c1116; /* negro de marca (casi noche) */ --NEGRO-SUAVE:#151c23; --BLANCO:#ffffff; /* ---- TOKENS DE SUPERFICIE (cambian en modo oscuro, no los toques aquí) --- */ --FONDO:#ffffff; /* fondo general de la página */ --FONDO-2:#f5f8fa; /* fondo de secciones alternas */ --TARJETA:#ffffff; /* fondo de tarjetas */ --TEXTO:#0c1116; /* texto principal */ --TEXTO-SUAVE:#5b6b78; /* texto secundario */ --TEXTO-TENUE:#8a99a6; /* texto muy tenue */ --BORDE:#e6ecf1; /* líneas y bordes */ --BORDE-FUERTE:#d3dde4; --HERO-FONDO:#ffffff; /* fondo del hero */ /* ---- TIPOGRAFÍA ---- */ --LETRA-TITULOS:'Space Grotesk',-apple-system,Segoe UI,sans-serif; /* técnica, moderna */ --LETRA-TEXTO:'Inter',-apple-system,Segoe UI,Roboto,sans-serif; /* ---- TAMAÑOS DE TÍTULO ---- */ --TITULO-HERO:56px; --TITULO-SECCION:40px; --TITULO-MEDIO:30px; --TITULO-BANNER:32px; /* ---- REDONDEO ---- */ --REDONDEO-BOTON:100px; --REDONDEO-TARJETA:18px; --REDONDEO-CAJA:14px; --REDONDEO-CHICO:10px; /* ---- MEDIDAS ---- */ --ANCHO-MAXIMO:1240px; --ESPACIO-SECCION:88px 6%; --SUAVE:.25s ease; --SOMBRA:0 10px 40px rgba(12,17,22,.08); --SOMBRA-FUERTE:0 18px 60px rgba(12,17,22,.14); } /* ========================= MODO OSCURO ============================= Se activa poniendo data-tema="oscuro" en (lo hace el botón/JS). Solo redefinimos las superficies; el azul de marca se mantiene. */ :root[data-tema="oscuro"]{ --FONDO:#0c1116; --FONDO-2:#111922; --TARJETA:#141d27; --TEXTO:#eef4f8; --TEXTO-SUAVE:#9fb0bd; --TEXTO-TENUE:#6f8391; --BORDE:#233240; --BORDE-FUERTE:#2e4152; --HERO-FONDO:#0c1116; --AZUL-SUAVE:#12303f; --AZUL-BORDE:#1d4d63; --SOMBRA:0 10px 40px rgba(0,0,0,.4); --SOMBRA-FUERTE:0 18px 60px rgba(0,0,0,.55); } /* ========================= BASE ============================= */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--LETRA-TEXTO); color:var(--TEXTO); background:var(--FONDO); line-height:1.65; -webkit-font-smoothing:antialiased; transition:background var(--SUAVE),color var(--SUAVE); } h1,h2,h3,h4{font-family:var(--LETRA-TITULOS);font-weight:600;line-height:1.12;letter-spacing:-.02em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} section{padding:var(--ESPACIO-SECCION)} .contenedor{max-width:var(--ANCHO-MAXIMO);margin:0 auto} .fondo-2{background:var(--FONDO-2)} /* Utilidad: animación de entrada al hacer scroll (la dispara el JS) */ .aparece{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .aparece.visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .aparece{opacity:1;transform:none;transition:none} *{animation-duration:.001ms!important;scroll-behavior:auto} }