/* ========================================================================== TOKENS — Consultora Parrilla Sistema "Plano y Acero", sobre la paleta oficial de la marca: Naranja PARRILLA, Gris Corporativo y Gris Secundario. Todos los pares de color de esta hoja fueron medidos; el ratio va anotado. ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOR Paleta oficial de Consultora Parrilla. Los tres colores de marca van marcados con ★ y se usan con su valor exacto; el resto de cada rampa son pasos derivados para cubrir estados, bordes y los casos en que el color de marca no alcanza el contraste necesario. Nota sobre la ficha de marca: el Gris Corporativo aparece como «#4A4AAA», pero su RGB (74 74 74) y su CMYK (67 57 56 41) describen un gris neutro, que en hexadecimal es #4A4A4A. Es el valor que se usa aquí. -------------------------------------------------------------------- */ /* Naranja — rampa derivada del naranja de marca. */ --naranja-300: #FFB05C; /* 10.19:1 sobre oscuro — hover en superficies oscuras */ --naranja-400: #FF9633; /* 8.48:1 sobre oscuro */ --naranja-500: #F57C00; /* ★ NARANJA PARRILLA · 6.81:1 sobre oscuro */ --naranja-600: #D26A00; /* 3.38:1 sobre claro — rellenos y estados */ --naranja-700: #A85400; /* 4.98:1 sobre claro — naranja como TEXTO en claro */ --naranja-800: #7D3F00; /* 7.59:1 sobre claro */ /* Gris — una sola rampa neutra que va del lienzo claro al negro de obra. El Gris Corporativo es el paso 500 y el Gris Secundario el paso 100. */ --blanco: #FFFFFF; --gris-50: #F7F7F7; /* lienzo claro */ --gris-100: #E5E5E5; /* ★ GRIS SECUNDARIO · superficie hundida */ --gris-200: #D2D2D2; /* bordes sobre claro */ --gris-400: #767676; --gris-500: #4A4A4A; /* ★ GRIS CORPORATIVO · 8.27:1 — texto secundario en claro */ --gris-300: #A8A8A8; /* 7.75:1 sobre oscuro — texto secundario en oscuro */ --gris-600: #3A3A3A; /* bordes fuertes sobre oscuro */ --gris-700: #2A2A2A; /* superficie elevada oscura */ --gris-800: #1E1E1E; /* superficie oscura */ --gris-900: #141414; /* lienzo oscuro */ --gris-950: #0E0E0E; /* pie, lo más profundo */ /* Tinta sobre el naranja de marca. Negro de obra sobre naranja mide 6.81:1 y es la convención de la señalética industrial; el blanco sobre el mismo tono se queda en 2.70:1 y no se usa nunca. */ --sobre-naranja: var(--gris-900); /* Roles semánticos — tema oscuro por defecto */ --lienzo: var(--gris-900); --superficie: var(--gris-800); --superficie-up: var(--gris-700); --texto: #EDEDED; /* 15.74:1 */ --texto-suave: var(--gris-300); /* 7.75:1 */ --borde: rgba(255 255 255 / 0.11); --borde-fuerte: rgba(255 255 255 / 0.22); --acento: var(--naranja-500); --acento-hover: var(--naranja-400); --acento-texto: var(--naranja-500); /* ----------------------------------------------------------- TIPOGRAFÍA */ --fuente-display: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --fuente-texto: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --fuente-cota: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Escala tipográfica. El cuerpo no escala: 16 px es 16 px en cualquier pantalla, y lo que cambia con el ancho es sólo el display. La portada es el único sitio donde el tamaño es el argumento; de ahí hacia abajo la jerarquía la llevan el peso, la caja alta y el color, no los píxeles. */ --t-cota: 0.6875rem; /* 11 px — cotas, códigos y cifras medidas */ --t-micro: 0.75rem; /* 12 px — etiquetas */ --t-pie: 0.8125rem; /* 13 px — notas y texto de apoyo */ --t-base: 1rem; /* 16 px — cuerpo, fijo */ --t-guia: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17 → 19 */ --t-h4: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17 → 19 */ --t-h3: clamp(1.1875rem, 1.1rem + 0.37vw, 1.5rem); /* 19 → 24 */ --t-h2: clamp(1.5rem, 1.29rem + 0.94vw, 2.25rem); /* 24 → 36 */ --t-h1: clamp(1.875rem, 1.57rem + 1.37vw, 2.875rem); /* 30 → 46 */ --t-portada: clamp(2.125rem, 1.4rem + 3.25vw, 4.75rem); /* 34 → 76 */ /* Tracking: a más tamaño, más cerrado. Nunca por debajo de -0.04em. */ --track-portada: -0.036em; --track-display: -0.026em; --track-titulo: -0.016em; --track-sub: -0.008em; --track-cota: 0.15em; --track-etiqueta: 0.075em; /* Extensión del eje de ancho de Archivo. Por encima del 106 % el titular gana cuerpo sin ganar tamaño, y es lo que lo hacía sentir enorme. */ --ancho-portada: 106%; --ancho-display: 103%; --ancho-titulo: 101%; --leading-portada: 0.96; --leading-display: 1.05; --leading-titulo: 1.18; --leading-texto: 1.58; --medida: 66ch; /* medida de lectura del cuerpo */ --medida-guia: 52ch; /* la guía es más grande: menos caracteres */ --medida-corta: 44ch; /* ------------------------------------------------------------- ESPACIO */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.75rem; --e-8: 3.5rem; --e-9: 5rem; --e-10: 7rem; --e-11: 9.5rem; /* Aire vertical de sección: más arriba que abajo de un encabezado */ --seccion-y: clamp(4.5rem, 3rem + 7vw, 8.5rem); --seccion-y-ancha: clamp(6rem, 3.5rem + 10vw, 11rem); /* -------------------------------------------------------------- LAYOUT */ --ancho-max: 1340px; --ancho-texto: 760px; --margen: clamp(1.25rem, 0.6rem + 3.1vw, 4rem); --barra-h: 76px; --barra-h-compacta: 62px; /* Chaflán — el corte a 45° del anillo del logotipo, como motivo estructural */ --chaflan: 20px; --chaflan-sm: 12px; /* ------------------------------------------------------------ PROFUNDIDAD Sombras con desplazamiento y difuminado suave; tintadas del fondo, nunca un halo de color centrado. */ --sombra-1: 0 1px 2px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.16); --sombra-2: 0 2px 4px rgb(0 0 0 / 0.22), 0 8px 22px -6px rgb(0 0 0 / 0.26); --sombra-3: 0 4px 10px rgb(0 0 0 / 0.20), 0 22px 48px -14px rgb(0 0 0 / 0.42); --sombra-clara-1: 0 1px 2px rgb(0 0 0 / 0.09), 0 3px 10px -2px rgb(0 0 0 / 0.08); --sombra-clara-2: 0 2px 4px rgb(0 0 0 / 0.08), 0 14px 32px -10px rgb(0 0 0 / 0.16); /* --------------------------------------------------------------- MOTION Curvas fuertes. Las de CSS por defecto no tienen empuje suficiente. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-cortina: cubic-bezier(0.32, 0.72, 0, 1); --d-pulso: 140ms; /* respuesta al presionar */ --d-rapido: 190ms; /* hover, foco, subrayados */ --d-medio: 260ms; /* desplegables, tarjetas */ --d-lento: 460ms; /* revelados de sección */ --d-portada: 1150ms; /* el momento de la portada */ --anillo-foco: 2px; --anillo-sep: 3px; color-scheme: dark; } /* ===================================================================== TEMA Oscuro donde se mira, claro donde se lee. Las portadas, los clientes y el pie son atmósfera: van en gris oscuro. Servicios, nosotros, proyectos y contacto son lectura: van en cal. ===================================================================== */ .tema-claro { --lienzo: var(--gris-50); --superficie: var(--gris-100); --superficie-up: var(--blanco); --texto: var(--gris-900); /* 17.20:1 */ --texto-suave: var(--gris-500); /* 8.27:1 — Gris Corporativo */ --borde: rgba(74 74 74 / 0.18); --borde-fuerte: rgba(74 74 74 / 0.34); --acento: var(--naranja-500); /* el naranja de marca, en relleno */ --acento-hover: var(--naranja-600); --acento-texto: var(--naranja-700); /* 4.98:1 — el de marca sólo llega a 2.52 */ --sombra-1: var(--sombra-clara-1); --sombra-2: var(--sombra-clara-2); --sombra-3: var(--sombra-clara-2); color-scheme: light; } .tema-oscuro { --lienzo: var(--gris-900); --superficie: var(--gris-800); --superficie-up: var(--gris-700); --texto: #EDEDED; --texto-suave: var(--gris-300); --borde: rgba(255 255 255 / 0.11); --borde-fuerte: rgba(255 255 255 / 0.22); --acento: var(--naranja-500); --acento-hover: var(--naranja-400); --acento-texto: var(--naranja-500); color-scheme: dark; }