@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasraval.es
   Arquetipo T06 Oficio · 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: 95;
  --c-brand:  #9D8519;
  --c-accent: #5A3A8A;

  /* 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-lo-ink: contrast-color(var(--c-brand-lo));   /* texto del botón principal en :hover */
  --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) 0.52 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.52 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.855 .02 95);                /* texto secundario sobre fondo oscuro */
  --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);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 3.47:1 con la superficie y 5.44: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.521 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.521 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.641 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.426 c h);

  /* ── GEOMETRÍA (asimetrica) ───────────────────────────── */
  --r-btn:3px; --r-card:16px 3px 16px 3px; --r-input:3px; --r-img:12px 2px 12px 2px;
  --bw-card:1px; --bw-btn:1.5px; --bw-line:1px;

  /* ── SOMBRAS (hundida) ─────────────────────────────────── */
  --sh-card:inset 0 2px 0 oklch(from var(--c-ink) l c h / .06);
  --sh-btn:none;
  --sh-hover:inset 0 3px 0 oklch(from var(--c-ink) l c h / .10);

  /* ── RITMO (base 4px · densidad aireada ×1.28) ───────── */
  --w-container:1320px;
  --sp-1:5px; --sp-2:10px; --sp-3:15px; --sp-4:26px;
  --sp-5:41px; --sp-6:67px;
  --sp-section:clamp(46px, 5.8vw, 88px);
  --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.25;
  --h-img-service:154px;
  --h-img-hero:266px;

  /* ── 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.15 0 0);
    --c-accent-ink:oklch(0.99 0 0);
    --c-band-ink:oklch(0.99 0 0);
    --c-brand-lo-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: panel / inner / cta
   ────────────────────────────────────────────────────────────────── */
/* hero:H6 servicios:S2 ventajas:V3
   proceso:P3 resenas:R3 faq:F2
   zonas:Z1 contacto:CT3 footer:FO2
   etiqueta:numero-texto numeracion:1 iconos:Remix */

/* 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 numero-texto */
.prs-eyebrow{counter-increment:sec;color:var(--c-ink-soft);font-size:var(--fs-small)}
.prs-eyebrow::before{content:counter(sec,decimal-leading-zero) ' — ';color: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)}
}

/* ── FUENTES AUTOALOJADAS (R15/R22) ────────────────────────────────
   Archivos en /fonts/ con estos nombres exactos (ver perfil-diseno.md). */
@font-face {
  font-family: 'Lora';
  src: url('/fonts/titular-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/texto-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/texto-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: optional;
}

/* ── ESTADOS DE BOTÓN (corrección 2026-10-04, web-corrector) ───────────
   Aviso de auditar-responsive: en :hover/:active el botón no se distinguía
   del fondo (secundario 1.07:1 sobre superficie clara; acento 2.41:1 sobre
   la banda .prs-cta). Solo tokens del tema; contextos oscuros excluidos
   (sus reglas de base.css siguen mandando). */
@layer components {
  .prs-btn--secondary:is(:hover, :active):not(:is(.prs-section--band, .prs-hero--dark, .prs-hero--h2, .prs-cta, .prs-footer) *) {
    background: var(--c-brand-lo);
    color: var(--c-brand-lo-ink, var(--c-brand-ink));
    border-color: var(--c-brand-lo);
  }
  .prs-cta .prs-btn--accent:is(:hover, :active) {
    background: var(--c-band);
    color: var(--c-band-ink);
    border-color: var(--c-band);
  }
}

/* ── RENDIMIENTO Y TITULARES (corrección 2026-10-05, web-corrector) ─────
   1. Las fotos van en <picture> con su gemelo .webp (guia-construccion-web.md,
      Fase 3): el contenedor es transparente para el layout, la <img> sigue
      siendo hija efectiva de .prs-hero-media / .prs-card-img como en el marcado.
   2. Titulares h1 sin guionado automático: a 360 px partía «téc-nicos».
      overflow-wrap:break-word de base.css sigue evitando desbordes.
   3. Fuentes con font-display:optional (arriba, guia-sistemas-diseno.md §5):
      sin cambio de fuente tras pintar, sin CLS (aviso-legal medía 0,241). */
@layer components {
  picture { display: contents; }
  h1 { hyphens: manual; }
}