/* ═══════════════════════════════════════════════════════════════ tema.css · persianascastellardelvalles.es Arquetipo T06 Oficio · semilla sal=0 Generado por generador-temas.py — NO editar a mano. Para cambiar el diseño, regenerar con otra sal y actualizar el registro. ═══════════════════════════════════════════════════════════════ */ /* Tipos registrados: permiten animar e interpolar tokens sin JS */ @property --h { syntax:''; inherits:true; initial-value:0; } :root{ /* ── SEMILLA CROMÁTICA ───────────────────────────────────────── Solo se declaran dos colores reales. Todo lo demás se deriva en el navegador con oklch() relativo, color-mix() y contrast-color(). Cambiar --c-brand recalcula la web entera manteniendo contrastes. */ --h: 157; --c-brand: #2A2521; --c-accent: #D93A2B; /* Derivados de marca (esquema: complementario) */ --c-brand-hi: oklch(from var(--c-brand) calc(l + .10) c h); --c-brand-lo: oklch(from var(--c-brand) calc(l - .12) c h); --c-brand-soft: oklch(from var(--c-brand) calc(l + .34) calc(c * .30) h); --c-brand-ink: contrast-color(var(--c-brand)); --c-accent-ink: contrast-color(var(--c-accent)); /* Superficies (crema) */ --c-surface: oklch(0.985 0.010 var(--h)); --c-surface-2: oklch(0.955 0.021 var(--h)); --c-ink: oklch(0.20 0.018 var(--h)); --c-ink-soft: oklch(from var(--c-ink) calc(l + .34) calc(c * .8) h); --c-band: oklch(0.24 0.015 var(--h)); --c-band-ink: contrast-color(var(--c-band)); --c-line: color-mix(in oklch, var(--c-ink) 12%, transparent); --c-focus: oklch(from var(--c-accent) .62 .19 h); --c-error: oklch(0.55 .19 27); /* ── GEOMETRÍA (suave) ───────────────────────────── */ --r-btn:8px; --r-card:12px; --r-input:8px; --r-img:10px; --bw-card:1px; --bw-btn:1px; --bw-line:1px; /* ── SOMBRAS (capas) ─────────────────────────────────── */ --sh-card:0 1px 1px oklch(from var(--c-ink) l c h / .05), 0 4px 8px oklch(from var(--c-ink) l c h / .05), 0 12px 24px oklch(from var(--c-ink) l c h / .05); --sh-btn:none; --sh-hover:0 2px 4px oklch(from var(--c-ink) l c h / .08), 0 10px 20px oklch(from var(--c-ink) l c h / .08); /* ── RITMO (base 4px · densidad aireada ×1.28) ───────── */ --w-container:1140px; --sp-1:5px; --sp-2:10px; --sp-3:15px; --sp-4:26px; --sp-5:41px; --sp-6:67px; --sp-section:clamp(46px, 7.7vw, 102px); --sp-block:var(--sp-4); --sp-gap:15px; --card-pad:20px; /* ── TIPOGRAFÍA (escala modular ×1.5) ────────────────────────── */ --ff-head:'Lora', Georgia, serif; --ff-body:'Source Sans 3', system-ui, sans-serif; --fw-head:600; --fw-body:400; --fw-strong:700; --fs-h1:clamp(45.9px, 4.9vw, 95.3px); --fs-h2:clamp(31.9px, 3.2vw, 54.0px); --fs-h3:25.0px; --fs-body:16.8px; --fs-small:10.7px; --tt-head:none; --ls-head:-0.005em; --lh-head:1.20; --lh-body:1.71; /* ── COMPONENTES ─────────────────────────────────────────────── */ --btn-pad:10px 20px; --btn-fw:700; --btn-tt:none; --btn-ls:0; --eyebrow:block; --icon-sw:1.75; --h-img-service:154px; --h-img-hero:266px; /* ── MOVIMIENTO ──────────────────────────────────────────────── */ --tr:.24s; --ease:cubic-bezier(.2,.7,.3,1); } /* Fallback para navegadores sin contrast-color() — se ignora donde sí existe */ @supports not (color: contrast-color(red)){ :root{ --c-brand-ink:oklch(0.99 0 0); --c-accent-ink:oklch(0.99 0 0); --c-band-ink:oklch(0.99 0 0); } } /* ── VARIANTES ACTIVAS ───────────────────────────────────────────── base.css define todos los layouts. Estas clases en activan los de esta web. Vocabulario de clases: tile / shell / action ────────────────────────────────────────────────────────────────── */ /* hero:H4 servicios:S5 ventajas:V3 proceso:P3 resenas:R2 faq:F1 zonas:Z2 contacto:CT4 footer:FO2 etiqueta:punto-texto numeracion:sin iconos:Lucide */ /* Etiqueta de sección — variante punto-texto */ .prs-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--c-ink-soft);font-size:var(--fs-small)} .prs-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-accent)} /* Numeración del proceso — variante sin */ .prs-step-num{display:none} /* ═══════════════════════════════════════════════════════════════════════════ @FONT-FACE — fuentes autoalojadas (R22: prohibido Google Fonts por CDN) El generador no las emite: sin este bloque los woff2 no se cargan nunca y la web caería silenciosamente a Georgia y system-ui. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Lora'; src:url('../fonts/lora-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0192,U+2010-2015,U+2018-201F,U+2022,U+2026,U+20AC,U+2122; } @font-face{ font-family:'Source Sans 3'; src:url('../fonts/ss3-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0192,U+2010-2015,U+2018-201F,U+2022,U+2026,U+20AC,U+2122; } @font-face{ font-family:'Source Sans 3'; src:url('../fonts/ss3-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0192,U+2010-2015,U+2018-201F,U+2022,U+2026,U+20AC,U+2122; } /* ═══════════════════════════════════════════════════════════════════════════ CORRECCIONES VERIFICADAS SOBRE LA SALIDA DEL GENERADOR · 2026-09-24 Cuatro valores generados no superaban una comprobación objetiva. Se corrigen aquí, no en el bloque de arriba, para que quede trazable qué generó el script y qué se cambió después y por qué. Anotado en estado-proyecto.md §0 y en registro-disenos.md. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* 1 · CONTRASTE — el valor generado (l+.34) daba 4.44:1 sobre --c-surface-2, por debajo de la barrera de 4.5:1. Afecta a todo el texto secundario de las secciones alternas. Con l+.30: 5.72:1 sobre surface y 5.26:1 sobre surface-2. Ambos pasan. */ --c-ink-soft: oklch(from var(--c-ink) calc(l + .30) calc(c * .8) h); /* 2 · LEGIBILIDAD — la escala modular ×1.5 dejaba --fs-small en 10.7px. Se usa en etiquetas de formulario, chips, pie y barra superior: demasiado pequeño para texto real. 14.2px mantiene la jerarquía. */ --fs-small: 14.2px; /* 3 · ENCUADRE DEL HERO — con 266px la caja de la variante H4 quedaba 440x332 (apaisada, ratio 1.32) y las fotos del hero son verticales (ratio 0.79): object-fit:cover se comía la mitad de la imagen. Con 480px la caja es 440x600 (ratio 0.73) y el recorte es mínimo. */ --h-img-hero: 480px; /* 4 · IMÁGENES DE DETALLE — 154px recortaba en exceso las fotos de 1000px de ancho de las subpáginas. */ --h-img-service: 210px; }