/* ============================================================================= SpainEase — TOKENS ----------------------------------------------------------------------------- Este archivo es el panel de control visual de toda la web. Cambiar un valor aquí lo cambia en todas las páginas. Para pulir el diseño se empieza SIEMPRE por aquí, antes de tocar ningún componente. ============================================================================= */ :root { /* --- Color de marca ------------------------------------------------------- Los cuatro de la identidad corporativa, más los tonos derivados que hacen falta para textos secundarios, filetes y estados. No añadir colores nuevos sin motivo: la disciplina cromática es parte del posicionamiento premium. */ --ink: #0D1B2A; /* azul marino profundo — color principal */ --ink-raised: #16293B; /* superficie elevada sobre marino */ --ink-line: #26405A; /* filete sobre marino */ --sand: #C9A47A; /* arena — color de acento */ --sand-soft: #E3D3BC; /* arena clara, para fondos y filetes */ --sand-text: #8A6743; /* arena legible sobre papel (contraste AA) */ --paper: #F4F1EC; /* neutro cálido — fondo principal */ --paper-hi: #FCFAF7; /* tarjeta / superficie elevada sobre papel */ --paper-deep: #EBE6DE; /* banda alterna sobre papel */ --rule: #DFD9CF; /* filete estándar */ --rule-strong: #C4BBAB; /* filete de énfasis */ /* --- Capa semántica ------------------------------------------------------- Los tokens de arriba son CONSTANTES de marca (nunca cambian). Los de abajo son SEMÁNTICOS: se reasignan solos cuando una sección va sobre fondo marino, así ningún componente necesita saber sobre qué fondo está pintado. Un botón, una tabla o un filete funcionan igual en banda clara y en banda oscura. */ --surface: var(--paper); --surface-hi: var(--paper-hi); --text: var(--ink); --text-muted: #55616E; /* secundario sobre papel — contraste AA */ --text-faint: #7B8590; /* metadatos */ --accent: var(--sand); --accent-text: var(--sand-text); /* Estados */ --focus: #8A6743; --error: #A33A2A; --ok: #3F6B4F; /* --- Tipografía ----------------------------------------------------------- Playfair Display para titulares (personalidad, herencia editorial). Montserrat para texto e interfaz (claridad, neutralidad amable). Monoespaciada del sistema para los datos de la burocracia española: códigos de formulario (EX-15), tasas (modelo 790), plazos y expedientes. Ese detalle es del mundo del cliente, no decoración. */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Escala tipográfica fluida (de móvil a escritorio sin saltos) */ --fs-display: clamp(2.6rem, 1.35rem + 5.0vw, 5.1rem); --fs-h1: clamp(2.15rem, 1.35rem + 3.2vw, 3.75rem); --fs-h2: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); --fs-h3: clamp(1.22rem, 1.10rem + 0.5vw, 1.45rem); --fs-h4: 1.0625rem; --fs-lede: clamp(1.09rem, 1.02rem + 0.35vw, 1.3rem); --fs-body: 1.0313rem; --fs-small: 0.9063rem; --fs-micro: 0.8125rem; --fs-eyebrow: 0.7188rem; --fs-data: 0.8125rem; --fs-ref: 0.6875rem; /* referencias de expediente, sellos, estados */ --lh-display: 0.96; --lh-title: 1.08; --lh-body: 1.68; --lh-tight: 1.35; --tr-display: -0.022em; /* Playfair grande necesita apretarse */ --tr-eyebrow: 0.16em; /* versalitas de sección */ --tr-data: 0.02em; /* --- Espacio -------------------------------------------------------------- Escala de 4 px. --band-y es el aire vertical entre secciones: subirlo o bajarlo cambia el ritmo de toda la web de golpe. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --s9: 4rem; --s10: 5rem; --s11: 6.5rem; --s12: 8rem; --band-y: clamp(2.75rem, 1.75rem + 4vw, 4.75rem); --rail-w: 190px; /* lomo del expediente en escritorio */ --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem); --measure: 63ch; /* ancho de lectura cómodo */ /* --- Estructura ----------------------------------------------------------- */ --w-page: 1240px; --w-narrow: 760px; --radius: 0; /* un expediente no tiene esquinas */ --radius-lg: 0; /* redondeadas. Cero, a propósito. */ --radius-pill: 100px; /* sólo controles interactivos */ --border: 1px solid var(--rule); --header-h: 76px; /* --- Sombras (muy contenidas: la marca es plana y calmada) --------------- */ --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05); --shadow-md: 0 12px 32px -18px rgba(13, 27, 42, 0.35); --shadow-lg: 0 28px 64px -32px rgba(13, 27, 42, 0.45); /* --- Movimiento ---------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 340ms; --dur-fast: 180ms; } /* ----------------------------------------------------------------------------- Bandas de sección. El ritmo de la web es una alternancia de papel y marino: arena y mar. Cada bloque declara su tono en el archivo de contenido ('tone' => 'paper' | 'deep' | 'ink' | 'plain') y aquí se resuelve el color. Al invertir el fondo se reasignan los tokens de texto, así los componentes de dentro no necesitan saber sobre qué fondo están. -------------------------------------------------------------------------- */ .band { padding-block: var(--band-y); position: relative; background: var(--surface); color: var(--text); } .band--plain { --surface: var(--paper); } .band--paper { --surface: var(--paper-hi); } .band--deep { --surface: var(--paper-deep); } .band--ink { --surface: var(--ink); --surface-hi: var(--ink-raised); --text: #F4F1EC; --text-muted: #A4B4C3; --text-faint: #7F91A3; --rule: var(--ink-line); --rule-strong: #35506D; --accent-text: var(--sand); --focus: var(--sand); } .band--sand { --surface: var(--sand-soft); --surface-hi: #F6EFE4; --rule: #CDB89A; --rule-strong: #B79E7C; --text-muted: #6B5940; } /* Dos bandas del MISMO tono seguidas no deben duplicar el aire entre ellas. */ .band--plain + .band--plain, .band--paper + .band--paper, .band--deep + .band--deep, .band--ink + .band--ink { padding-block-start: 0; } /* ============================================================================= GRAMÁTICA DE EXPEDIENTE ----------------------------------------------------------------------------- La administración española funciona por expedientes: una carpeta numerada con portada, índice, artículos, sellos y notas al margen. La promesa de SpainEase es convertir ese caos en un expediente ordenado — así que la web ES ese expediente, no un folleto que habla de él. Reglas que sostienen el sistema: · Cero radios. Un documento no tiene esquinas redondeadas. · El filete horizontal es el separador, no el cambio de color de fondo. · El marino aparece DOS veces por página como máximo, como puntuación. · La monoespaciada es una capa de información, no un adorno. ============================================================================= */ :root { --hair: 1px solid var(--rule); --hair-ink: 1px solid var(--rule-strong); } /* El marino deja de ser "la mitad de la página" y pasa a ser un acento. */ .band--ink { padding-block: clamp(3.25rem, 2rem + 5vw, 6rem); } .band--paper { --surface: var(--paper); } /* casi todo el sitio va sobre papel */