/* ============================================================ Tokens: color, tipografía, medidas y radios ============================================================ */ :root{ /* Azul corporativo. El color base de la marca, rgb(0,43,79), es --blue-900. */ --navy:#030c14; /* el color pedido, casi negro: titulares y texto fuerte */ --navy-deep:#001E38; /* superficies oscuras: hero, footer, secciones on-dark */ --navy-ink:#00172B; /* entre los dos anteriores, para degradados y sombras */ --navy-soft:#0A4272; /* un paso más claro: bloques y tiles */ /* Rampa derivada del azul base */ --blue-950:#001E38; --blue-900:#002B4F; --blue-800:#0A4272; --blue-700:#155585; --blue-600:#2570A6; --blue-500:#4A90C0; --blue-100:#E1EAF2; /* Gris acero (frío, afinado al azul) */ --paper:#F1F4F7; --white:#FFFFFF; --graphite:#16232E; /* Grises de texto sobre fondo claro, ajustados para WCAG AA (4,5:1) aun sobre --paper, el fondo claro más oscuro: steel 4,64 y steel-light 4,61 (antes 4,45 y 2,41). Sobre fondo oscuro usar los --on-dark-*. */ --steel:#646F7B; --steel-light:#61707E; --steel-dark:#3A4753; --line:#D4DBE2; --line-on-dark:rgba(255,255,255,0.16); /* Texto sobre fondo oscuro, de más claro a más apagado */ --on-dark-100:#F6F8FA; /* bajadas */ --on-dark-200:#DFE7EF; /* párrafos */ --on-dark-300:#D3DDE7; /* texto base del footer y la credencial del hero */ --on-dark-400:#C6D2DE; /* enlaces */ --on-dark-500:#AFBDCB; /* párrafos secundarios */ --on-dark-600:#8FA0B2; /* etiquetas */ --on-dark-700:#7F8E9E; /* etiquetas y notas más apagadas */ /* Amarillo alta visibilidad / ocre */ --yellow:#FFC400; --yellow-hi:#FFD447; --yellow-ochre:#C8901E; /* sobre fondo oscuro y para trazos; sobre claro no alcanza AA */ --yellow-ochre-deep:#B4811B; /* ocre para cifras grandes sobre fondo claro: 3,1 sobre --paper (AA texto grande) */ --yellow-dim:#936508; /* ocre para texto chico sobre fondo claro: 4,63 sobre --paper (AA; antes 4,21) */ /* Tipografía única del proyecto. Las tres variables se mantienen porque marcan intención (titular / cuerpo / etiqueta), no familias distintas. */ --font-display:'Poppins', sans-serif; --font-body:'Poppins', sans-serif; --font-mono:'Poppins', sans-serif; /* Tinta de los párrafos */ --tinta: #16232e; /* ---------------------------------------------------------- ESCALA TIPOGRÁFICA — única fuente de tamaños del sitio. Ningún elemento define font-size por su cuenta: todos usan uno de estos 14 pasos. Base 16 px. Titulares (Poppins 700/800, tracking negativo) d1 hero de portada d2 h1 de páginas interiores d3 h2 de sección d4 h2 secundario / titular de bloque destacado d5 h3 grande (nombres de certificación, direcciones) d6 h3 de tarjeta Cifras fig-xl el "12 m" de la regla de escala fig contadores y cifras de respaldo Texto lede bajada body cuerpo (16) sm secundario (15) xs auxiliar (14) Nota: 'sm' y 'xs' bajan un paso el ruido visual sin romper legibilidad. Etiquetas (mayúsculas, tracking amplio) lbl-lg 13 · lbl 12 · lbl-sm 11 · lbl-xs 10 ---------------------------------------------------------- */ --fs-d1:clamp(2.2rem, 5.6vw, 4.6rem); --fs-d2:clamp(2rem, 4vw, 3.2rem); --fs-d3:clamp(1.9rem, 3.4vw, 2.9rem); --fs-d4:clamp(1.5rem, 2.4vw, 2rem); --fs-h4:2.25rem; /* 36 px — paso h4 de la marca */ --fs-d5:1.375rem; --fs-d6:1.125rem; --fs-fig-xl:clamp(4.4rem, 11vw, 8.6rem); --fs-fig:clamp(2rem, 3.2vw, 2.8rem); --fs-lede:clamp(0.95rem, 1.5vw, 1.25rem); --fs-body:1rem; /* Letra chica en dos pasos y nada más: 14px para textos secundarios y 12px para rótulos, etiquetas y fechas (12px es el mínimo legible). Reemplazan a --fs-sm (15), --fs-lbl-lg (13), --fs-lbl-sm (11) y --fs-lbl-xs (10), que se retiraron. */ --fs-xs:.875rem; --fs-lbl:.75rem; --container:1400px; --gutter:clamp(20px, 5vw, 64px); --header-h:76px; /* Radios: un solo paso. 8 px en superficies grandes, 6 px en controles. Suficiente para quitar dureza al borde sin ablandar la retícula. */ --radius:8px; /* tarjetas, cajas, imágenes y paneles */ --radius-sm:6px; /* botones, campos, etiquetas y pastillas */ /* Relleno interno único de las tarjetas: 24 px en todos los tamaños. */ /* Escala de espaciado (incrementos de 4/8): margins, paddings y gaps usan sólo estos pasos. El número es el múltiplo de 4 (sp-6 = 24px). Los ajustes ópticos de 2–3 px (subrayados, filetes) quedan fuera a propósito. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --card-pad:24px; /* Ritmo vertical de secciones: tres rellenos y nada más (en móvil se comprimen, ver abajo). Normal: la mayoría; compacta: listados y entradas de página con foto; franja: bandas delgadas como la de certificaciones. */ --section-y:96px; --section-y-tight:64px; --band-y:32px; /* Sombras: las tarjetas en reposo no llevan sombra (solo borde). La sombra es sólo para lo que flota sobre la página, en tres niveles. */ --shadow-float:0 10px 30px rgba(0,15,28,.28); /* sobre foto: sellos del hero, botón de WhatsApp */ --shadow-pop:0 18px 44px rgba(0,15,28,.18); /* desplegables: submenú, panel de WhatsApp */ --shadow-modal:0 30px 80px rgba(0,0,0,.45); /* ventanas: visor de fotos, de video, buscador */ /* ---------------------------------------------------------- PUNTOS DE CORTE — solo referencia: una variable CSS no se puede usar dentro de @media, así que los valores se escriben a mano. Para estilos nuevos, usar uno de estos cinco (max-width): 1180 escritorio angosto: menú compacto, pie en 3 columnas 1000 el menú pasa al botón hamburguesa 900 rejillas de 3–4 columnas a 2; páginas con lateral a 1 columna 720 móvil: cabecera más baja y secciones con menos aire (su complemento es min-width:721px) 560 teléfono: rejillas a 1 columna El resto de los valores en uso (1080, 980, 920, 860, 820, 780, 760, 700, 640, 620, 600, 520, 480 y 400) están ajustados a un bloque concreto. No se unifican porque varios caen entre anchos de tablets reales (744, 768, 810, 820, 834, 1024, 1180) y moverlos cambiaría cómo se ven ahí. ---------------------------------------------------------- */ } *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } /* display:flex de los overlays no debe ganarle al atributo */ html{ scroll-behavior:auto; } body{ margin:0; font-family:var(--font-body); color:var(--graphite); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,p,dl,dd,figure{ margin:0; } /* Paso h4 de la marca: 36 px. */ h4{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); line-height:1.15; letter-spacing:-.02em; color:var(--navy); } button{ font:inherit; cursor:pointer; } input,select,textarea{ font-family:inherit; font-size:var(--fs-body); } :focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; } .container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* En móvil el ritmo de escritorio obliga a demasiado scroll entre bloques. */ @media (max-width:720px){ :root{ --section-y:72px; --section-y-tight:48px; } }