@charset "UTF-8"; /* ============================================================================ 01-declaraciones.css — sysnetia.com ---------------------------------------------------------------------------- CONTRATO DEL PROYECTO. Fase 0. Este archivo NO contiene componentes. Solo declara valores. REGLAS QUE ESTE ARCHIVO IMPONE AL RESTO DEL PROYECTO: 1. Ningún componente escribe un color literal. Siempre var(--…) 2. Ningún componente escribe un font-size literal. Siempre var(--t-…) 3. Ningún componente escribe un margen literal. Siempre var(--e-…) 4. Ningún componente elige entre tema claro y oscuro. Usa var(--acento). 5. Ningún componente escribe el nombre de una fuente. Usa var(--fuente-…) Si algo falta aquí, se añade aquí. Nunca se improvisa en un componente. ========================================================================== */ /* ============================================================================ 1. TOKENS PRIMITIVOS ---------------------------------------------------------------------------- Nombres por lo que SON (azul, naranja, tinta), no por para qué se usan. Los componentes NUNCA leen esta sección. Solo lee la sección 2. ========================================================================== */ :root { /* --- Familia azul (marca) --- */ --azul-500: #1E6FEB; --azul-400: #3D8AF5; /* hover sobre fondo oscuro */ --azul-600: #1558C4; /* hover/pressed sobre fondo claro */ --azul-700: #0F3F8F; /* texto azul sobre fondo claro (AA) */ --azul-rgb: 30, 111, 235; /* --- Familia naranja (acento) --- */ --naranja-500: #FF9900; /* el de la marca — SOLO sobre fondo oscuro */ --naranja-400: #FFB03D; /* hover sobre fondo oscuro */ --naranja-700: #A65C00; /* variante para fondo claro — AA 4.71:1 sobre #F5F7FA */ --naranja-rgb: 255, 153, 0; /* --- Neutros oscuros --- */ --tinta-950: #0A0E14; /* fondo base oscuro */ --tinta-900: #14161A; /* fondo alterno oscuro */ --tinta-800: #1C2027; /* superficie elevada oscura */ /* --- Neutros claros --- */ --hueso-50: #FFFFFF; --hueso-100: #F5F7FA; /* fondo base claro */ --hueso-200: #E8ECF1; /* superficie alterna clara */ /* --- Texto y estructura --- */ /* --- Colores del WORDMARK (marca) --------------------------------------- El logo NO permuta como el resto: un logotipo no cambia de color al cambiar de tema. Por eso sus dos colores son tokens propios y NO se derivan de --acento. Contrato §3.0. El azul del logo en oscuro es azul-400 y no azul-500: #1E6FEB sobre #0A0E14 da 4.17:1 y falla AA; #3D8AF5 da 5.67:1. */ --naranja-marca: #FF9900; --azul-marca: #3D8AF5; --gris-400: #8A94A6; /* texto tenue sobre oscuro */ --gris-600: #5A6472; /* texto tenue sobre claro (AA 5.2:1 sobre #F5F7FA) */ --blanco: #F5F7FA; --negro: #0A0E14; } /* ============================================================================ 2. TOKENS SEMÁNTICOS — TEMA OSCURO (por defecto) ---------------------------------------------------------------------------- Los componentes SOLO leen esta sección. El tema oscuro es el estado por defecto: o sin atributo. ========================================================================== */ :root, [data-tema="oscuro"] { color-scheme: dark; /* --- Superficie --- */ --fondo: var(--tinta-950); --superficie: var(--tinta-900); --superficie-2: var(--tinta-800); --borde: rgba(245, 247, 250, 0.10); --borde-fuerte: rgba(245, 247, 250, 0.22); /* --- Texto --- */ --fg: var(--blanco); --mut: var(--gris-400); /* --- Acción --- */ --acento: var(--naranja-500); --acento-hover: var(--naranja-400); --acento-rgb: var(--naranja-rgb); /* azul-500 sobre tinta-950 da 4.17:1 (falla AA texto, pasa AA grande). Para texto de acento secundario se usa azul-400: 5.6:1 */ --secundario: var(--azul-500); --secundario-hover: var(--azul-400); --secundario-texto: var(--azul-400); --secundario-rgb: var(--azul-rgb); /* --- Botón --- CORRECCIÓN DE OZ (Fase 1, 2026-10-21): el botón primario es NARANJA en el tema oscuro y AZUL en el claro. Estaba en azul en los dos, y estaba mal. EL TEXTO VA OSCURO, NO BLANCO — y no es un gusto, es medida: blanco #FFFFFF sobre naranja #FF9900 → 2.14:1 ✗ FALLA tinta #0A0E14 sobre naranja #FF9900 → 9.03:1 ✅ AA Un texto blanco sobre este naranja es ilegible. Por eso --boton-fg NO es un blanco fijo: cambia con el tema, igual que --acento. */ --boton: var(--naranja-500); --boton-fg: var(--tinta-950); --boton-hover: var(--naranja-400); /* --boton-rgb NO es decoración: lo exige el glow del hover del botón (box-shadow 0 12px 34px rgba(var(--boton-rgb), .32)), copiado de ds-v2. Sin él el botón no se puede reconstruir y habría que volver a inventarlo. */ --boton-rgb: var(--naranja-rgb); /* Glow del hover del PRIMARIO. Se deriva del naranja + sombra dura para que el botón parezca despegarse del fondo oscuro. */ --boton-glow: 0 10px 30px rgba(var(--naranja-rgb), 0.35), var(--sombra-2); /* Texto del FANTASMA cuando el hover revela el relleno. Sobre el naranja, el texto tiene que ser oscuro (blanco daría 2.14:1). Permuta con el tema: ver contrato §5bis.2bis. */ --boton-hover-fg: var(--tinta-950); /* --- Sombra (en oscuro las sombras se leen peor: se usa glow) --- */ --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40); --sombra-2: 0 4px 16px rgba(0, 0, 0, 0.45); --sombra-3: 0 12px 40px rgba(0, 0, 0, 0.55); --glow-acento: 0 0 24px rgba(var(--acento-rgb), 0.28); } /* ============================================================================ 3. TOKENS SEMÁNTICOS — TEMA CLARO ---------------------------------------------------------------------------- Solo se reasignan los semánticos. Los primitivos no cambian. El acento usa naranja-700: sobre #F5F7FA da 4.71:1 → cumple AA. naranja-500 sobre el mismo fondo da 1.99:1 → NO cumple. No usar aquí. ========================================================================== */ [data-tema="claro"] { color-scheme: light; --fondo: var(--hueso-100); --superficie: var(--hueso-50); --superficie-2: var(--hueso-200); --borde: rgba(10, 14, 20, 0.12); --borde-fuerte: rgba(10, 14, 20, 0.26); --fg: var(--tinta-900); --mut: var(--gris-600); /* CORRECCIÓN DE OZ (2026-10-21): en claro el acento NO se oscurece a marrón, SE CAMBIA A AZUL DE MARCA. El naranja #A65C00 hacía desaparecer la marca; el azul #1558C4 da 6.07:1 sobre #F5F7FA (mejor que los 4.71 anteriores). Todos los detalles del sitio leen --acento, así que esto los permuta a la vez: rótulos, del titular, bordes, subrayados, glows. */ --acento: var(--azul-600); --acento-hover: var(--azul-500); --acento-rgb: var(--azul-rgb); --secundario: var(--azul-600); --secundario-hover: var(--azul-500); --secundario-texto: var(--azul-600); /* 6.07:1 sobre hueso-100 */ --secundario-rgb: var(--azul-rgb); /* En claro el botón es AZUL con texto blanco: 6.51:1 ✅ */ --boton: var(--azul-600); --boton-fg: var(--hueso-50); --boton-hover: var(--azul-500); /* En claro el botón es azul: el glow también, así que cambia el rgb. Si se dejara el naranja, el botón azul tendría halo naranja. */ --boton-rgb: 21, 88, 196; /* Azul sobre fondo claro: el glow tiene que ser azul, no naranja. */ --boton-glow: 0 10px 30px rgba(21, 88, 196, 0.28), var(--sombra-2); /* Sobre el relleno azul, el texto del hover es BLANCO (6.51:1 en el centro). Con negro fallaría en el 58% del degradado: ver §5bis.2bis. */ --boton-hover-fg: var(--hueso-50); --sombra-1: 0 1px 2px rgba(10, 14, 20, 0.08); --sombra-2: 0 4px 16px rgba(10, 14, 20, 0.10); --sombra-3: 0 12px 40px rgba(10, 14, 20, 0.14); --glow-acento: 0 0 24px rgba(var(--acento-rgb), 0.16); } /* ============================================================================ 4. TIPOGRAFÍA ---------------------------------------------------------------------------- DOS fuentes en todo el proyecto. Ninguna más. --fuente-logo Audiowide → SOLO la palabra "Sysnetia". Nunca en texto. --fuente-titular Outfit → titulares de sección, rótulos, botones. --fuente-texto Outfit → párrafos y UI. Ambas OFL-1.1. No requieren atribución. Se sirven como .woff2 locales desde fonts/ (HTTP/2 las multiplexa; NO se embeben en base64). NOTA: Audiowide tiene UN solo peso (400). NUNCA pedirle font-weight distinto: el navegador lo sintetizaría y se vería sucio. El logo va en 400 siempre. NOTA: Outfit no tiene itálica. El del titular se resuelve con color (--acento) y peso, NUNCA con font-style: italic. ========================================================================== */ :root { --fuente-logo: "Audiowide", system-ui, sans-serif; --fuente-titular: "Outfit", system-ui, -apple-system, sans-serif; --fuente-texto: "Outfit", system-ui, -apple-system, sans-serif; /* Pesos disponibles en Outfit (variable, 100–900). Nombrados por uso. */ --peso-ligero: 300; --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --peso-titular: 600; /* --- Escala tipográfica: 6 pasos. Prohibido font-size literal. --- */ --t-xxs: 0.625rem; /* 10px · firma del pie en teléfono. El mínimo legible para un texto que no se lee, se reconoce. */ --t-xs: 0.75rem; /* 12px · rótulos mínimos */ --t-s: 0.875rem; /* 14px · notas, pie */ --t-m: 1rem; /* 16px · texto base */ --t-l: clamp(1.125rem, 1.6vw, 1.375rem); /* subtítulos */ --t-xl: clamp(1.75rem, 4.2vw, 3rem); /* titular de sección */ --t-xxl: clamp(2.5rem, 8vw, 6rem); /* titular de portada */ /* Wordmark de portada (§3.0c). Acoplado a --isotipo-alto-portada por la proporción 0.72 medida para Audiowide (ver §3.0b): así símbolo y nombre crecen juntos y el logo no se ve cojo en pantallas pequeñas. */ --portada-logo: clamp(32px, 5.4vw, 58px); /* en desuso: el nombre es partículas */ /* Alto de la franja donde se dibuja el nombre en partículas (§3.0d). El canvas ES el techo del tamaño de la marca, así que si esta franja es baja, el nombre no puede crecer. El slogan se coloca debajo usando --logo-abajo, que publica el motor con la tinta real. */ --portada-canvas-alto: clamp(90px, 26vw, 300px); /* --- Interlineado --- */ --inter-titulo: 1.05; --inter-texto: 1.65; --inter-rotulo: 1.2; /* --- Tracking --- */ --track-titulo: -0.02em; /* geométricas abren mucho: se cierran */ --track-rotulo: 0.14em; /* mayúsculas pequeñas: se abren */ --track-normal: 0; } /* ============================================================================ 5. ESPACIADO — escala de 6 pasos ---------------------------------------------------------------------------- Prohibido margin-top: 130px. Si una medida no está aquí, no existe. Base 4px. Los pasos saltan porque son roles, no aritmética. ========================================================================== */ :root { --e-1: 0.25rem; /* 4px · separación interna mínima */ --e-2: 0.5rem; /* 8px */ --e-3: 1rem; /* 16px · separación normal entre elementos */ --e-4: 1.75rem; /* 28px · EL HUECO TEXTO→TARJETAS de ds-v2 (validado) */ --e-5: 2.75rem; /* 44px */ --e-6: 4.5rem; /* 72px · aire entre bloques grandes */ /* Márgenes de sección (los manda el PADRE, nunca el hijo) */ --margen-seccion: clamp(3rem, 8vw, 7rem); --margen-borde: clamp(1.25rem, 5vw, 5rem); } /* ============================================================================ 6. TIEMPOS Y MOVIMIENTO ---------------------------------------------------------------------------- Un solo lugar manda el ritmo del sitio entero. ========================================================================== */ :root { --dur-rapida: 140ms; --dur-media: 280ms; --dur-lenta: 600ms; --curva: cubic-bezier(0.22, 1, 0.36, 1); --curva-suave: cubic-bezier(0.4, 0, 0.2, 1); --z-fondo: 0; --z-contenido: 10; --z-cabecera: 100; --z-overlay: 500; --z-aviso: 900; } /* ============================================================================ 7. RADIOS Y SITIO ========================================================================== */ :root { --radio-1: 4px; --radio-2: 8px; --radio-3: 16px; --radio-4: 28px; --radio-redondo: 999px; --ancho-texto: 68ch; /* longitud de línea legible */ --ancho-sitio: 1360px; /* techo de contenido */ } /* ============================================================================ 8. ISOTIPO ---------------------------------------------------------------------------- Variables, no archivos sueltos. Mientras no exista el SVG definitivo, las medidas están reservadas con sus proporciones finales. Formato exigido: SVG. Si solo hay versión oscura, la clara se deriva cambiando color (fill), NO se redibuja. ========================================================================== */ :root { /* El isotipo real (contrato §3.0b). Es PNG con fondo TRANSPARENTE y naranja #FF9900 exacto: no se le pone fondo, marco ni placa. Se recortó a su bounding box en el archivo, no con object-fit: el símbolo tiene que estar centrado en una caja 1:1 y eso se corrige en el archivo. */ --isotipo-url: url("../assets/img/isotipo.png"); --isotipo-alto: 40px; /* cabecera */ /* Alto real de la cabecera fija + aire. 57px es lo que mide el header en telefono; 48px de padding dejaba la ceja 9px POR DEBAJO de la cabecera. Todo contenido que empiece tras la cabecera usa este token. */ --alto-cabecera: 57px; /* Aire bajo la cabecera: alto de la cabecera + margen de respiro. En telefono clamp(66,6vw,100) daba 66px = 9px de holgura: demasiado justo. 57 + 28 de respiro, con el minimo subido. */ --aire-cabecera: clamp(85px, 8vw, 120px); /* Portada (§3.0c). Escala con --portada-logo para no romper la proporción símbolo/nombre: si el nombre crece y el símbolo no, el logo se ve cojo. */ /* ===== ISOTIPO DE FONDO (§3.0d.7, rediseño de Oz) ===== Ya no va encima del nombre: va DETRÁS, centrado y como marca de agua. Orden de Oz: "coloca el isotipo centrado, bájale la opacidad a 0.3 y que sea 50% de la altura de la pantalla". `50vh` es la MITAD DE LA ALTURA DE LA VENTANA, no un % del contenedor: por eso se usa vh y no %. Con % se mediría contra la caja y en una portada centrada daría un tamaño distinto según lo que hubiera dentro. */ --isotipo-alto-portada: 50vh; /* Opacidad de marca de agua. Subida de 0.1 a 0.3 por orden de Oz (2026-10-23): «en el fondo de pantalla del inicio tiene opacidad de 0.1 colócalo en 0.3». Con 0.1 apenas se insinuaba; a 0.3 la marca de agua se lee sin competir con el nombre en partículas, que sigue mandando. Se sube por aquí y no en la regla para que quede en un solo sitio. */ --isotipo-opacidad: 0.3; /* ===== ESGOLAN DE PORTADA (§3.0d.8) ===== Escala fluida con el ancho de ventana: pequeño en móvil, cómodo en PC. `clamp` evita que en pantallas muy anchas crezca sin freno. */ --lema-texto: clamp(0.9rem, 1.6vw, 1.35rem); --lema-tracking: 0.03em; /* --- Tokens que publica el SCRIPT en tiempo real (§3.0d.8) --- No son tokens de diseño: son MEDIDAS de la tinta del nombre que escribe `portada.js` en :root para que el CSS pueda colocar el eslogan. Se declaran aquí con valor 0 para que existan antes de la primera medida: si el CSS usara `var()` sin respaldo, el navegador descartaría toda la declaración. El verificador (check 16) exige que todo token usado esté declarado. */ --lema-izq: 0px; /* dónde empieza la parte azul del nombre */ /* NO se declara con 0px: `var(--lema-texto-final, respaldo)` toma el 0px como valor válido y el respaldo no se usa nunca. El tamaño lo escribe el script; hasta entonces el eslogan usa --lema-texto (el fluido). */ --lema-texto-final: initial; --lema-tracking-final: initial; /* tracking recalculado en px por el script */ --lema-ancho: 0px; /* der − azulIzq: el ancho de "netia" */ --logo-tinta-abajo: 0px; /* borde inferior de la tinta, relativo a la caja */ /* Ajuste fino de la altura del eslogan respecto al borde inferior de "netia" (§3.0d.8). 0 = pegado, sin solape y sin hueco: la línea base del eslogan arranca donde termina la tinta azul. Positivo lo baja, negativo lo sube (y lo monta sobre las letras). */ --lema-separacion: 0px; --isotipo-alto-menu: 28px; /* dentro de overlays */ --isotipo-alto-favicon: 32px; /* apple-touch-icon */ } /* ============================================================================ 9. SECCIONES — LISTA CERRADA ---------------------------------------------------------------------------- Un id nuevo exige pasar por este documento. No se inventa una sección escribiendo un id en el HTML. ========================================================================== */ :root { --seccion-portada: "portada"; --seccion-rueda: "rueda"; --seccion-servicios: "servicios"; --seccion-clientes: "clientes"; --seccion-quienes: "quienes-somos"; --seccion-contacto: "contacto"; } /* ============================================================================ 10. ACCESIBILIDAD Y PREFERENCIAS ========================================================================== */ /* prefers-reduced-motion: reduce ---------------------------------------------------------------------------- Los tres tiempos se anulan AQUÍ y en un solo sitio. POR QUÉ NO ES UN DUPLICADO: el bloque anterior es `:root` (alcance global); este es `:root` DENTRO de un @media, así que solo se aplica cuando el sistema pide menos movimiento. Son dos declaraciones del mismo token en dos contextos distintos — el patrón correcto, no una repetición. Además 02-base.css corta la animación y el scroll suave: los tiempos a 0.01ms solos no bastan porque una transición de 0.01ms sigue disparando el paint. */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0.01ms; --dur-media: 0.01ms; --dur-lenta: 0.01ms; } } /* Foco visible en todo el sitio, con un solo estilo. Nunca outline: none. OJO: --foco-halo NO es decoración. El anillo de 2px del acento sobre el fondo, en tema claro, no alcanza 3:1 (es elemento gráfico, no texto). El halo de --fondo detrás del anillo garantiza el contraste en los dos temas. Medido: anillo --acento claro (#1558C4) sobre halo --fondo claro = 6.07:1 ✅ (antes se citaba #A65C00; el acento claro pasó a azul, ver §2.3) */ :root { --foco-ancho: 2px; --foco-offset: 3px; --foco-color: var(--acento); --foco-halo: var(--fondo); } /* --- BOTÓN: los valores de ds-v2, transcritos (contrato §5bis) --- Están aquí y no en 04-componentes.css por la regla 3 del contrato: ningún componente escribe medidas literales. Estos salieron de medir el botón real de ds-v2, no de estimarlos. */ :root { --boton-pad-y: clamp(15px, 2vh, 19px); --boton-pad-x: clamp(34px, 5vw, 52px); --boton-texto: clamp(0.88rem, 1.5vw, 1rem); --boton-radio: 100px; --boton-borde: 1.5px; --boton-tracking: 0.06em; /* Curvas SIN rebote. ds-v2 probó cubic-bezier(.34,1.4,.5,1) y sobre 2px de desplazamiento el overshoot se percibía como salto. NO volver. */ --boton-curva: cubic-bezier(0.4, 0, 0.2, 1); --boton-dur: 300ms; --boton-dur-sombra: 340ms; --boton-dur-click: 80ms; /* Banda de brillo */ --boton-dur-brillo: 3.6s; --boton-dur-brillo-hover: 1.6s; } /* --- Trazo: el único sitio donde se escribe 1px/2px/3px --- */ :root { --trazo-fino: 1px; --trazo-medio: 2px; --trazo-grueso: 3px; }