/* ═══════════════════════════════════════════════════════════════
   tema.css · persianashospitalet.cat
   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: 114;
  --c-brand:  #4A5A23;
  --c-accent: #B45309;

  /* 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 7.56:1 con la superficie y 7.35: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.381 c h);
  --c-accent-text: oklch(from var(--c-accent) 0.535 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 (borde-base) ─────────────────────────────────── */
  --sh-card:0 2px 0 var(--c-line);
  --sh-btn:none;
  --sh-hover:0 4px 0 var(--c-brand);

  /* ── RITMO (base 4px · densidad compacta ×0.82) ───────── */
  --w-container:1080px;
  --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.5) ────────────────────────── */
  --ff-head:'Archivo Black', system-ui, sans-serif;
  --ff-body:'Archivo', system-ui, sans-serif;
  --fw-head:400; --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.035em;
  --lh-head:1.00; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:7px 13px;
  --btn-fw:600;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.25;
  --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.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: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H2 servicios:S5 ventajas:V2
   proceso:P3 resenas:R2 faq:F2
   zonas:Z2 contacto:CT1 footer:FO1
   etiqueta:slash-texto numeracion:sin 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 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 sin */
.prs-step-num{display:none}
}

/* Fuentes autoalojadas (R15, R22) — Archivo Black (titulares) y Archivo (texto) */
@font-face { font-family: 'Archivo Black'; src: url('/fonts/archivo-black-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Hero H2: el botón secundario va sobre fondo de banda oscuro → texto claro en todos los estados (R28: medido 1,9:1 con el color de marca) */
.prs-hero--h2 .prs-btn--secondary,
.prs-hero--h2 .prs-btn--secondary:is(:hover, :focus-visible, :active) {
  color: var(--c-band-ink);
  border-color: color-mix(in oklch, var(--c-band-ink) 55%, transparent);
}
.prs-hero--h2 .prs-btn--secondary:is(:hover, :focus-visible, :active) { background: var(--c-band); }

/* Hero H2: la foto llega hasta el borde superior (sin franja de banda encima) */
.prs-hero--h2 { padding-block: 0; }

/* Objetivo táctil ≥44 px y respuesta visible al tocar enlaces de texto (avisos de auditar-responsive) */
.prs-btn { min-height: 44px; }
:is(.prs-prose, .prs-faq-a) a:active { text-decoration-thickness: 3px; opacity: .75; }
.prs-cta .prs-btn--accent:is(:hover, :active) { box-shadow: 0 0 0 3px currentColor; }

/* Migas de pan de las subpáginas (guía de verificación: entre header y hero) */
.prs-migas { background: var(--c-surface-2); font-size: .875rem; }
.prs-migas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: .625rem 0; }
.prs-migas li + li::before { content: '›'; margin-right: .5rem; color: var(--c-ink-soft); }
.prs-migas a { color: var(--c-brand-text, var(--c-ink)); text-underline-offset: .2em; display: inline-block; min-height: 24px; }
.prs-migas a:active { opacity: .75; }
.prs-migas [aria-current] { color: var(--c-ink); }