/* ═══════════════════════════════════════════════════════════════
   tema.css · persianas-granollers.es
   Arquetipo T03 Curva · 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:'<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: 178;
  --c-brand:  #9C4A1A;
  --c-accent: #1F5F6B;

  /* 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 (clara) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.968 0.004 var(--h));
  --c-ink:       oklch(0.19 0.02 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-band:      oklch(0.22 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 6.16:1 con la superficie y 5.99: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.445 c h);
  --c-accent-text: oklch(from var(--c-accent) 0.451 c h);

  /* ── GEOMETRÍA (pill) ───────────────────────────── */
  --r-btn:999px; --r-card:20px; --r-input:14px; --r-img:16px;
  --bw-card:0; --bw-btn:0; --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 8px · densidad aireada ×1.28) ───────── */
  --w-container:1200px;
  --sp-1:10px; --sp-2:20px; --sp-3:31px; --sp-4:51px;
  --sp-5:82px; --sp-6:133px;
  --sp-section:clamp(92px, 7.7vw, 205px);
  --sp-block:var(--sp-4);
  --sp-gap:31px;
  --card-pad:41px;

  /* ── TIPOGRAFÍA (escala modular ×1.414) ────────────────────────── */
  --ff-head:'Onest', system-ui, sans-serif;
  --ff-body:'Onest', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(39.4px, 4.8vw, 73.5px);
  --fs-h2:clamp(28.8px, 3.1vw, 45.2px);
  --fs-h3:23.4px;
  --fs-body:16.7px;
  --fs-small:11.3px;
  --tt-head:none; --ls-head:-0.02em;
  --lh-head:1.14; --lh-body:1.65;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:20px 41px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.75;
  --h-img-service:307px;
  --h-img-hero:532px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.24s;
  --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.99 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: item / area / go
   ────────────────────────────────────────────────────────────────── */
/* hero:H6 servicios:S4 ventajas:V4
   proceso:P2 resenas:R4 faq:F1
   zonas:Z2 contacto:CT1 footer:FO4
   etiqueta:slash-texto numeracion:1 iconos:Iconoir */

/* 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 slash-texto */
.prs-eyebrow{color:var(--c-accent-text);font-size:var(--fs-small);font-weight:var(--fw-strong)}
.prs-eyebrow::before{content:'// '}

/* 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)}
}