/* Fuentes autoalojadas (R15, R22): Archivo 800 + Inter 400/700 · OFL-1.1 · subconjunto latin (cubre à, ç, ñ, l·l) */
@font-face{font-family:'Archivo';src:url('/fonts/titular-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:'Inter';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:'Inter';src:url('/fonts/texto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}

/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasgava.com
   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.
   ═══════════════════════════════════════════════════════════════ */

/* 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: 230;
  --c-brand:  #E0A526;
  --c-accent: #1B2E4B;

  /* Derivados de marca (esquema: tetrada) */
  --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 3.43:1 con la superficie y 5.73:1 con su texto.
     Candidato: brand-lo. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-brand-lo);
  --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.518 c h);
  --c-accent-text: oklch(from var(--c-accent) 0.3 c h);

  /* ── GEOMETRÍA (recta) ───────────────────────────── */
  --r-btn:0; --r-card:0; --r-input:0; --r-img:0;
  --bw-card:2px; --bw-btn:2px; --bw-line:1px;

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

  /* ── RITMO (base 4px · densidad normal ×1.0) ───────── */
  --w-container:1260px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:20px;
  --sp-5:32px; --sp-6:52px;
  --sp-section:clamp(36px, 6.0vw, 80px);
  --sp-block:var(--sp-4);
  --sp-gap:12px;
  --card-pad:16px;

  /* ── TIPOGRAFÍA (escala modular ×1.414) ────────────────────────── */
  --ff-head:'Archivo', system-ui, sans-serif;
  --ff-body:'Inter', system-ui, sans-serif;
  --fw-head:800; --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.06; --lh-body:1.62;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:8px 16px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.5;
  --h-img-service:120px;
  --h-img-hero:208px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.12s;
  --ease:linear;
}

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

/* ── VARIANTES ACTIVAS ─────────────────────────────────────────────
   base.css define todos los layouts. Estas clases en <body> activan
   los de esta web. Vocabulario de clases: tile / shell / action
   ────────────────────────────────────────────────────────────────── */
/* hero:H4 servicios:S4 ventajas:V2
   proceso:P2 resenas:R4 faq:F2
   zonas:Z1 contacto:CT4 footer:FO2
   etiqueta:barra-texto numeracion:paso iconos:Feather */

/* 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 paso */
.prs-step{counter-increment:paso}
.prs-step-num::before{content:'Paso ' counter(paso);font-weight:var(--fw-strong);color:var(--c-brand-text);font-size:var(--fs-small)}
}