/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasvallhebron.es
   Arquetipo T01 Taller · semilla sal=1
   Generado por generador-temas.py — NO editar a mano.
   Para cambiar el diseño, regenerar con otra sal y actualizar el registro.
   ═══════════════════════════════════════════════════════════════ */

/* @font-face del pairing (Barlow Condensed + Barlow). Corrección de matriz: el generador no los escribió
   y guia-construccion-web.md dice que viven aquí. Anotado en estado-proyecto.md §7. */
@font-face{font-family:'Barlow Condensed';src:url('/fonts/titular-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/fonts/texto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Tipos registrados: permiten animar e interpolar tokens sin JS */
@property --h { syntax:'<number>'; 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: 340;
  --c-brand:  #A4133C;
  --c-accent: #F1C27D;

  /* Derivados de marca (esquema: mono) */
  --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 (alto-contraste) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.945 0.030 var(--h));
  --c-ink:       oklch(0.145 0.012 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.485 calc(c * .8) h);
  --c-band:      oklch(0.145 0.012 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);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 7.67:1 con la superficie y 7.46:1 con su texto.
     Candidato: brand. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-brand);
  --c-cta-ink:   contrast-color(var(--c-cta));

  /* ── MARCA Y ACENTO COMO TEXTO (R25) ──────────────────────────
     Cuando el color de marca o de acento se usa para LETRA (cifras, etiquetas,
     fechas, marcas), se usa esta versión: misma tonalidad, claridad ajustada
     para 4.6:1 contra --c-surface, --c-surface-2 y --c-brand-soft. */
  --c-brand-text:  oklch(from var(--c-brand) 0.425 c h);
  --c-accent-text: oklch(from var(--c-accent) 0.521 c h);

  /* ── GEOMETRÍA (micro) ───────────────────────────── */
  --r-btn:3px; --r-card:4px; --r-input:3px; --r-img:3px;
  --bw-card:1px; --bw-btn:1px; --bw-line:1px;

  /* ── SOMBRAS (dura-color) ─────────────────────────────────── */
  --sh-card:6px 6px 0 var(--c-accent);
  --sh-btn:4px 4px 0 var(--c-accent);
  --sh-hover:2px 2px 0 var(--c-accent);

  /* ── RITMO (base 4px · densidad compacta ×0.82) ───────── */
  --w-container:1140px;
  --sp-1:3px; --sp-2:7px; --sp-3:10px; --sp-4:16px;
  --sp-5:26px; --sp-6:43px;
  --sp-section:clamp(30px, 4.9vw, 66px);
  --sp-block:var(--sp-4);
  --sp-gap:10px;
  --card-pad:13px;

  /* ── TIPOGRAFÍA (escala modular ×1.125) ────────────────────────── */
  --ff-head:'Barlow Condensed', system-ui, sans-serif;
  --ff-body:'Barlow', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(21.7px, 4.5vw, 26.9px);
  --fs-h2:clamp(19.5px, 2.9vw, 22.8px);
  --fs-h3:18.2px;
  --fs-body:16.2px;
  --fs-small:14.2px;
  --tt-head:uppercase; --ls-head:0.01em;
  --lh-head:1.05; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:7px 13px;
  --btn-fw:800;
  --btn-tt:uppercase; --btn-ls:0.04em;
  --eyebrow:block;
  --icon-sw:2;
  --h-img-service:98px;
  --h-img-hero:171px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.12s;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Fallback para navegadores sin contrast-color(): tinta calculada con luminancia WCAG real */
@supports not (color: contrast-color(red)){
  :root{
    --c-brand-ink:oklch(0.99 0 0);
    --c-accent-ink:oklch(0.15 0 0);
    --c-band-ink:oklch(0.99 0 0);
    --c-cta-ink:oklch(0.99 0 0);
  }
}

/* ── VARIANTES ACTIVAS ─────────────────────────────────────────────
   base.css define todos los layouts. Estas clases en <body> activan
   los de esta web. Vocabulario de clases: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H5 servicios:S2 ventajas:V1
   proceso:P1 resenas:R3 faq:F2
   zonas:Z3 contacto:CT4 footer:FO1
   etiqueta:barra-texto numeracion:1 iconos:Lucide */

/* Etiqueta y numeración en @layer variants: así las reglas de contraste de
   base.css (fondos de banda, @layer state) pueden ajustarlas. */
@layer variants {
/* Etiqueta de sección — variante barra-texto */
.prs-eyebrow{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-ink-soft);font-size:var(--fs-small)}
.prs-eyebrow::before{content:'';width:28px;height:2px;background:var(--c-accent)}

/* Numeración del proceso — variante 1 */
.prs-step{counter-increment:paso}
.prs-step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);background:var(--c-brand);color:var(--c-brand-ink);font-family:var(--ff-head);font-weight:var(--fw-head)}
.prs-step-num::before{content:counter(paso)}
}

/* Corrección de matriz: base.css no separa los h3 dentro de .prs-prose (quedan pegados al párrafo anterior).
   Anotado en estado-proyecto.md §7 para llevarlo a base.css. */
.prs-prose h3{margin-top:var(--sp-4);margin-bottom:var(--sp-1)}