/* ═══════════════════════════════════════════════════════════════════════ CERESAT — hoja de estilos del sitio público ═══════════════════════════════════════════════════════════════════════ El orden de las CAPAS de abajo decide quién gana, por encima de la especificidad y del orden en el fichero. Una regla de `componentes` gana siempre a una de `layout` aunque esté escrita antes y aunque tenga menos especificidad. Eso es justo lo que aquí hacía falta: - `.hero` (componentes) tiene que ganar a `.sec` (layout) porque el elemento lleva las dos clases. Antes dependía del orden del fichero, `.sec` iba después y el padding del hero estaba muerto. - Lo mismo dentro de una media query: `@media{.hero{padding}}` tiene que ganar a `@media{.sec{padding}}`. Una media query NO añade especificidad, así que arreglar lo anterior subiendo la especificidad (`.sec.hero`) mataba de paso la regla móvil. Con capas los selectores se quedan simples y no hay que escalar nada. NO hay una capa "responsive". La dimensión que decide la capa es a QUÉ apunta la regla, no CUÁNDO aplica: una capa aparte para las media queries volvía a meter `.sec` y `.hero` en el mismo saco, con el mismo choque por orden. Por eso el `@media` de `.sec` vive en `layout` y el de `.hero` en `componentes`, aunque sean el mismo breakpoint. REGLA AL AÑADIR CSS: elige la capa por lo que la regla ES, no por dónde quieres que gane. `scripts/check_css.py` comprueba que no queden declaraciones muertas. ═══════════════════════════════════════════════════════════════════════ */ @layer base, layout, componentes; @layer base { *{margin:0;padding:0;box-sizing:border-box;} :root{ --g3:#4A1020;--g2:#7B1E2A;--g1:#A0293A; /* --g3:#4A1020;--g2:#7B1E2A;--g1:#A0293A;*/ --gold:#C4A265;--gold2:#E8C98A; --cream:#FAF6EF;--cream2:#F0E9DA;--cream3:#E2D5C0; --earth:#6B4F35; --text:#2A1A10;--textm:#5C3D28;--texts:#8B6F4E; /* Rojo del logotipo. Es OTRO rojo que el de la paleta de secciones (--g1/--g2/--g3) y por eso tiene nombre propio: el botón APP lo usa para destacarse justo por no ser del mismo tono que el resto. */ --marca:#990000;--marca-oscuro:#700000; /* Marco del teléfono del hero: opaco y más oscuro que .hero-bg a propósito, para que se lea como objeto sólido delante del fondo. */ --tel-1:#5A1526;--tel-2:#7B1E2A;--tel-3:#3B0B18; /* Estados de error del formulario. */ --error:#E8A3AD;--error-fuerte:#ff8a80; /* Ancho máximo de la línea de contenido. Ver la regla `.w` en `layout`. */ --ancho-max:1280px; --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; } body{font-family:var(--font);background:var(--cream);color:var(--text);line-height:1.6;font-size:16px;} } @layer componentes { /* ── NAV ── nav{background:rgba(74,16,32,.97) navl rgba(250,246,239,.62) */ /* `.w > nav` y no `nav` a secas. La regla genérica pintaba CUALQUIER