@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasterrassa.cat
   Arquetipo T08 Linea · semilla sal=0
   Prefijo de clases: prs-
   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: 29;
  --c-brand:  #B23A2E;
  --c-accent: #E0A526;

  /* 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-lo-ink: oklch(1 0 0);   /* 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:  oklch(1 0 0);   /* calculada con WCAG: contrast-color() de Chrome elegía blanco a 4,42:1 sobre naranjas medios */
  --c-accent-ink: oklch(0.15 0 0);

  /* 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-ink-soft-claro: oklch(from var(--c-ink) 0.485 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.846 .02 29);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.145 0.012 var(--h));
  --c-band-ink:  oklch(1 0 0);
  --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 5.94:1 con la superficie y 5.94:1 con su texto.
     Candidato: brand. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-brand);
  --c-cta-ink:   oklch(1 0 0);

  /* ── 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.461 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.461 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.601 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.518 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.758 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 (ninguna) ─────────────────────────────────── */
  --sh-card:none;
  --sh-btn:none;
  --sh-hover:none;

  /* ── RITMO (base 5px · densidad aireada ×1.28) ───────── */
  --w-container:1140px;
  --sp-1:6px; --sp-2:13px; --sp-3:19px; --sp-4:32px;
  --sp-5:51px; --sp-6:83px;
  --sp-section:clamp(58px, 5.8vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:19px;
  --card-pad:26px;

  /* ── TIPOGRAFÍA (escala modular ×1.25) ────────────────────────── */
  --ff-head:'Epilogue', system-ui, sans-serif;
  --ff-body:'Epilogue', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(28.6px, 4.7vw, 42.7px);
  --fs-h2:clamp(23.4px, 3.0vw, 31.2px);
  --fs-h3:20.5px;
  --fs-body:16.4px;
  --fs-small:12.8px;
  --tt-head:none; --ls-head:-0.02em;
  --lh-head:1.12; --lh-body:1.65;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:13px 26px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:none;
  --icon-sw:2.5;
  --h-img-service:192px;
  --h-img-hero:333px;

  /* ── 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(1 0 0);
    --c-accent-ink:oklch(0.15 0 0);
    --c-band-ink:oklch(1 0 0);
    --c-brand-lo-ink:oklch(1 0 0);
    --c-cta-ink:oklch(1 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:H2 servicios:S4 ventajas:V2
   proceso:P2 resenas:R4 faq:F2
   zonas:Z1 contacto:CT2 footer:FO3
   etiqueta:ninguna numeracion:sin 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 ninguna */
.prs-eyebrow{display:none}

/* Numeración del proceso — variante sin */
.prs-step-num{display:none}
}

/* ═══ Propuesta B · «Rètol de vapor» (rotunda-mayusculas + taller-obra) ═══
   Brief: agentes/propuestas/B/BRIEF.md. Tokens de color calculados por generador-temas.py (marca #B23A2E, acento #E0A526). */
@font-face{font-family:'Anton';src:url('/fonts/anton-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chivo';src:url('/fonts/chivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chivo';src:url('/fonts/chivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --ff-head:'Anton', Impact, sans-serif;
  --ff-body:'Chivo', system-ui, sans-serif;
  --fw-head:400; --fw-body:400; --fw-strong:700; --btn-fw:700;
  --tt-head:uppercase; --ls-head:0.005em; --lh-head:1; --lh-body:1.62;
  --fs-hero:clamp(3rem, 1rem + 7.4vw, 6.6rem);
  --fs-h1:clamp(3rem, 1rem + 7.4vw, 6.6rem);
  --fs-h2:clamp(1.9rem, 1.2rem + 3vw, 3.7rem);
  --fs-h3:1.12rem; --fs-body:16.5px;
  --c-surface:   oklch(0.99 0.004 80);
  --c-surface-2: oklch(0.94 0.008 70);
  --c-ink:       oklch(0.17 0.012 40);
  --c-ink-soft:  oklch(0.40 0.012 40);
  --c-ink-soft-claro: oklch(0.40 0.012 40);
  --c-band:      oklch(0.17 0.012 40);
  --c-band-ink:  oklch(0.99 0.004 80);
  --c-band-ink-soft: oklch(0.84 0.01 70);
  --c-line:      color-mix(in oklch, var(--c-ink) 16%, transparent);
  --r-btn:0; --r-card:0; --r-input:0; --r-img:0;
  --bw-card:3px; --bw-btn:3px;
  --w-container:1200px;
  --btn-pad:15px 26px; --btn-tt:uppercase; --btn-ls:.06em;
}
@layer skin{
  :is(h1,h2){font-family:var(--ff-head);font-weight:400;text-transform:uppercase;letter-spacing:var(--ls-head);line-height:1}
  h3{font-family:var(--ff-body);font-weight:700;letter-spacing:0}
  .prs-btn{text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-radius:0}
  .prs-v-destacada{color:var(--c-brand-text)}
  /* Hero gigante: titular a dos colores, foto panorámica con bloque ámbar desplazado (carta bloque) */
  .prs-hv--gigante{padding-block:clamp(2rem,4.5vw,4rem) clamp(2.5rem,5vw,4.5rem)}
  .prs-hv--gigante h1{max-width:15ch;letter-spacing:.005em;line-height:.95;margin-bottom:0}
  .prs-hv--gigante .prs-hv-pie{margin-top:var(--sp-4)}
  .prs-hv--gigante .prs-hv-texto>p{color:var(--c-ink-soft);font-size:1.12rem}
  .prs-hv--gigante .prs-hv-media{margin:0 var(--sp-3) var(--sp-3) 0}
  .prs-hv--gigante .prs-hv-media::before{content:"";position:absolute;inset:var(--sp-3) calc(var(--sp-3)*-1) calc(var(--sp-3)*-1) var(--sp-3);background:var(--c-accent);z-index:-1}
  .prs-hv--gigante .prs-hv-media img{object-position:var(--foco,50% 50%)}
  /* Rótulo de señalética bajo el hero (carta mayúsculas) */
  .prs-f-rotulo{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:var(--sp-5) 0 0;border-block:3px solid var(--c-ink)}
  .prs-f-rotulo li{font:700 .82rem/1 var(--ff-body);text-transform:uppercase;letter-spacing:.18em;padding:1rem 1.4rem 1rem 0;margin-right:1.4rem}
  .prs-f-rotulo li+li{border-left:3px solid var(--c-ink);padding-left:1.4rem}
  @media (max-width:639px){.prs-f-rotulo li{flex:1 1 50%;margin:0;padding:.9rem .6rem}.prs-f-rotulo li+li{border-left:0}.prs-f-rotulo li:nth-child(even){border-left:3px solid var(--c-ink)}.prs-f-rotulo li:nth-child(n+3){border-top:3px solid var(--c-ink)}}
  /* Cifras en la banda de marca */
  .prs-f-cifras{padding-block:var(--sp-5)}
  .prs-f-cifras .prs-stats>div{display:grid;gap:.4rem;text-align:left;border-left:3px solid color-mix(in oklch,var(--c-brand-ink) 55%,transparent);padding-left:var(--sp-3)}
  .prs-f-cifras .prs-stat-n{font-family:var(--ff-head);font-weight:400;font-size:clamp(3rem,2rem + 3.4vw,5rem);line-height:.9;color:var(--c-brand-ink)}
  .prs-f-cifras .prs-stat-l{color:var(--c-brand-ink);opacity:1;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.78rem}
  /* Intro con caja negra desplazada */
  .prs-f-intro .prs-head h2{max-width:18ch}
  .prs-f-intro .prs-prose{font-size:1.06rem}
  .prs-f-bloque{background:var(--c-ink);color:var(--c-band-ink);border:0;align-self:start;box-shadow:12px 12px 0 var(--c-brand);margin:0 12px 12px 0}
  .prs-f-bloque h3{color:var(--c-band-ink);font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.6rem}
  .prs-f-bloque ul{list-style:none;padding:0;margin:var(--sp-2) 0 0;display:grid;gap:.55rem}
  .prs-f-bloque li{padding-left:1.3rem;position:relative}
  .prs-f-bloque li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;background:var(--c-accent)}
  /* Señales: rejilla con borde grueso y número en Anton */
  @media (min-width:900px){.prs-v-sintomas{grid-template-columns:repeat(3,1fr)}}
  .prs-v-sintomas{border:3px solid var(--c-ink)}
  .prs-v-sintomas>*{border:3px solid var(--c-ink);margin:-3px 0 0 -3px}
  .prs-f-num{display:block;font-family:var(--ff-head);font-size:2.4rem;line-height:1;color:var(--c-brand-text);margin-bottom:var(--sp-2)}
  .prs-v-sintomas p{color:var(--c-ink-soft)}
  /* Elemento original: «Dents de serra», la cubierta de una nau de vapor que abre la banda negra */
  .prs-f-serra{display:block;line-height:0;margin-top:var(--sp-4);color:var(--c-band)}
  .prs-f-serra svg{display:block;width:100%;height:clamp(64px,8.4vw,120px)}
  .prs-f-serra-nau{fill:var(--c-band)}
  .prs-f-serra-anell{fill:var(--c-brand)}
  .prs-f-serra-llum{stroke:var(--c-accent);stroke-width:3;fill:none}
  /* Errores en negro, con sello NO en ámbar */
  .prs-f-errores{padding-top:var(--sp-4)}
  .prs-f-errores .prs-signals{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:var(--sp-4)}
  .prs-f-errores .prs-signal{grid-template-columns:auto 1fr;gap:var(--sp-3);border-top:3px solid oklch(1 0 0 / .18);padding:var(--sp-3) var(--sp-3) var(--sp-4) 0}
  .prs-f-errores .prs-signal-mark{font:400 1.05rem/1 var(--ff-head);letter-spacing:.06em;color:var(--c-ink);background:var(--c-accent);padding:.45rem .5rem .35rem}
  .prs-f-errores h2,.prs-f-errores h3{color:var(--c-band-ink)}
  .prs-f-errores h3{margin:0 0 .35rem}
  .prs-f-errores p{color:var(--c-band-ink-soft)}
  /* Servicios: lista numerada con foto fija a la izquierda */
  @media (min-width:900px){.prs-f-serv-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-5);align-items:start}.prs-f-serv-grid .prs-v-cab{position:sticky;top:6rem}}
  .prs-f-serv-foto{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;margin-top:var(--sp-4);box-shadow:12px 12px 0 var(--c-accent);object-position:var(--foco,50% 50%)}
  @media (max-width:899px){.prs-f-serv-foto{aspect-ratio:3/2;max-width:calc(100% - 12px)}}
  .prs-f-servicios .prs-v-lista{border-top:3px solid var(--c-ink)}
  .prs-f-servicios .prs-v-lista>li{border-bottom:3px solid var(--c-ink);padding-block:var(--sp-4)}
  .prs-f-servicios .prs-v-lista>li::before{font-family:var(--ff-head);font-weight:400;font-size:2rem;line-height:1;color:var(--c-brand-text)}
  .prs-f-servicios .prs-v-lista h3{font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.05}
  .prs-f-servicios .prs-v-flecha{font-size:1.6rem;color:var(--c-brand-text)}
  .prs-f-enlace{display:inline-block;margin-top:var(--sp-2);font-weight:700;color:var(--c-ink);text-decoration-color:var(--c-brand);text-decoration-thickness:3px;text-underline-offset:.3em}
  /* Garantías: cuatro columnas con filete de marca */
  .prs-f-garantias .prs-guarantees{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--sp-4)}
  .prs-f-garantias .prs-guarantee{display:block;border-top:6px solid var(--c-brand);padding-top:var(--sp-3)}
  .prs-f-garantias .prs-f-num{font-size:1.4rem;color:var(--c-ink)}
  .prs-f-garantias p{color:var(--c-ink-soft)}
  /* Glosario: dos columnas, término en Anton */
  .prs-f-glosario .prs-glossary{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0 var(--sp-5)}
  .prs-f-glosario .prs-glossary>div{display:grid;grid-template-columns:minmax(7.5rem,.42fr) 1fr;gap:var(--sp-3);border-bottom:1px solid var(--c-line);padding-block:var(--sp-3)}
  @media (max-width:480px){.prs-f-glosario .prs-glossary>div{grid-template-columns:1fr;gap:.3rem}}
  .prs-f-glosario dt{font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.25rem;line-height:1.1;color:var(--c-ink)}
  .prs-f-glosario dd{margin:0;color:var(--c-ink-soft)}
  /* Preguntas sobre la banda de marca */
  .prs-f-faq .prs-faq-item{border-bottom:2px solid color-mix(in oklch,var(--c-brand-ink) 40%,transparent)}
  .prs-f-faq .prs-faq-q{color:var(--c-brand-ink);font-weight:700}
  .prs-f-faq .prs-faq-a p{color:var(--c-brand-ink)}
  .prs-f-faq .prs-faq-a a{color:var(--c-brand-ink)}
  /* Zonas en negro con chips de borde */
  .prs-f-zonas .prs-v-cab{max-width:56rem}
  .prs-f-zonas .prs-v-cab p{color:var(--c-band-ink-soft)}
  .prs-f-zonas .prs-v-zonas li{border:2px solid oklch(1 0 0 / .4);border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:700}
  /* Por dónde empezar: tres bloques con borde grueso */
  .prs-f-rel .prs-card{border:3px solid var(--c-ink);border-radius:0;box-shadow:none}
  .prs-f-rel .prs-card h3{font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1.05}
  .prs-f-rel .prs-card h3 a{color:var(--c-ink);text-decoration-color:var(--c-brand);text-decoration-thickness:3px;text-underline-offset:.2em}
  .prs-f-rel .prs-card p{color:var(--c-ink-soft)}
}
@layer skin{
  h2{hyphens:manual;overflow-wrap:normal}
  h3{text-transform:none}
  .prs-faq-q{font-family:var(--ff-body);font-weight:700;text-transform:none}
  @media (min-width:900px){.prs-hv--gigante .prs-hv-pie{grid-template-columns:1fr 1.15fr}}
  .prs-f-errores .prs-signal-mark{align-self:start}
  .prs-f-glosario .prs-glossary{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
  .prs-f-glosario .prs-glossary>div{grid-template-columns:minmax(10rem,.4fr) 1fr}
  .prs-f-glosario dt{hyphens:manual;overflow-wrap:normal}
  .prs-f-zonas .prs-v-cab h2{margin-bottom:var(--sp-3)}
  .prs-footer :is(h2,h3,h4){font-family:var(--ff-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
}
@layer skin{
  .prs-f-errores .prs-signal{display:block;position:relative;padding-left:3.6rem}
  .prs-f-errores .prs-signal-mark{position:absolute;left:0;top:var(--sp-3)}
}
@layer skin{
  /* R37: número y flecha colgados; el texto ocupa todo el ancho aunque crezca */
  .prs-f-servicios .prs-v-lista>li{display:block;position:relative;padding-left:3.6rem;padding-right:2.6rem}
  .prs-f-servicios .prs-v-lista>li::before{position:absolute;left:0;top:var(--sp-4)}
  .prs-f-servicios .prs-v-flecha{position:absolute;right:0;top:var(--sp-4)}
}
@layer skin{.prs-hv--gigante h1{max-width:19ch}}
@layer skin{.prs-f-serra{margin-bottom:-1px;position:relative;z-index:1}}
/* Aplicación en la web real (web-diseno): la foto fija de servicios va dentro de su caja (srcset propio) */
@layer skin{
  div.prs-f-serv-foto{overflow:hidden}
  div.prs-f-serv-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%)}
  div.prs-f-serv-foto{box-shadow:12px 12px 0 var(--c-accent)}
}
/* Subpáginas (marcado 5.0 de servicio): la misma piel de B. Cajas negras con sombra teja, bordes de 3 px en negro,
   etiquetas en mayúsculas. Solo aspecto: no cambia el orden ni el marcado (contrato). */
@layer skin{
  .prs-intro-grid>aside.prs-card:not(.prs-f-bloque),
  .prs-urgent>.prs-card{background:var(--c-ink);color:var(--c-band-ink);border:0;align-self:start;box-shadow:12px 12px 0 var(--c-brand);margin:0 12px 12px 0}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) h3{color:var(--c-band-ink);font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.6rem;line-height:1.05}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) :is(p,li){color:var(--c-band-ink)}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) a:not(.prs-btn){color:var(--c-band-ink)}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) ul{list-style:none;padding:0;margin:var(--sp-2) 0 0;display:grid;gap:.55rem}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) li{padding-left:1.3rem;position:relative}
  :is(.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;background:var(--c-accent)}
  .prs-prose h3{margin-top:var(--sp-4)}
  :is(.prs-ventajas,.prs-coste) .prs-card{border:3px solid var(--c-ink);border-radius:0;box-shadow:none}
  .prs-tier-badge{background:var(--c-accent);color:var(--c-accent-ink);border-radius:0;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
  .prs-badges .prs-chip{border-radius:0;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.74rem}
  .prs-step h3{font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.35rem;line-height:1.05}
}
/* Corrección de la crítica visual final, vuelta 1 (web-diseno, modo corregir). Solo piel: sin marcado nuevo. */
@layer skin{
  /* 1 · Proceso p2: número de paso en Anton teja (contador CSS) y filete bajo el número, no sobre el texto */
  .prs-proceso--p2 .prs-grid{counter-reset:paso}
  .prs-proceso--p2 .prs-step{counter-increment:paso;grid-template-columns:44px 1fr}
  .prs-proceso--p2 .prs-step-num{display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--c-ink);background:var(--c-surface);font:400 1.5rem/1 var(--ff-head);color:var(--c-brand-text)}
  .prs-proceso--p2 .prs-step-num::before{content:counter(paso)}
  .prs-proceso--p2 .prs-step:not(:last-child)::before{left:21px;width:3px;background:var(--c-ink);top:44px}
  .prs-proceso--p2 .prs-step h3{margin-top:.6rem}
  /* 2 · Páginas de texto (legales y 404): escala propia y aire antes de cada H2 */
  :is(.prs-legal,.prs-error404) h1{font-size:clamp(2.6rem,1.9rem + 2.4vw,4rem);line-height:1;margin-bottom:var(--sp-3)}
  :is(.prs-legal,.prs-error404) h2{font-size:clamp(1.6rem,1.35rem + .9vw,2.15rem);line-height:1.05;margin-top:2.6rem;margin-bottom:.8rem}
  :is(.prs-legal,.prs-error404) h3{margin-top:1.8rem;margin-bottom:.5rem}
  :is(.prs-legal,.prs-error404) :is(p,ul,ol,table)+:is(p,ul,ol,table){margin-top:var(--sp-2)}
  :is(.prs-legal,.prs-error404) ul{list-style:square;padding-left:1.3rem}
  :is(.prs-legal,.prs-error404) li+li{margin-top:.35rem}
  /* 3 · 404: botones separados y el segundo de contorno (jerarquía) */
  .prs-error404 p:has(>.prs-btn){display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
  .prs-error404 .prs-btn--call{background:transparent;color:var(--c-ink);border-color:var(--c-ink);box-shadow:none}
  .prs-error404 .prs-btn--call:is(:hover,:focus-visible){background:var(--c-ink);color:var(--c-band-ink);border-color:var(--c-ink)}
  @media (max-width:599px){.prs-error404 p:has(>.prs-btn)>.prs-btn{flex:1 1 100%}}
  /* 4 · Urgencias: párrafos con el ritmo de la prosa y foto con aire y bloque ámbar desplazado */
  .prs-urgent>div>p+p{margin-top:var(--sp-2)}
  .prs-urgent>div>figure{margin:var(--sp-4) 12px 12px 0;box-shadow:12px 12px 0 var(--c-accent)}
  .prs-urgent>div>figure img{display:block;width:100%;height:auto}
  @media (min-width:900px){.prs-urgent{column-gap:var(--sp-5)}}
  /* 5 · Hero de las subpáginas: titular a la izquierda, bloque ámbar desplazado tras la foto y sellos como rótulo */
  .prs-hero--h2{background:var(--c-accent)}
  .prs-hero--h2 .prs-hero-media{inset:0 var(--sp-3) var(--sp-3) 0}
  .prs-hero--h2 .prs-container{text-align:left;justify-items:start;padding-block:var(--sp-5) calc(var(--sp-5) + var(--sp-3))}
  .prs-hero--h2 h1{max-width:21ch;line-height:.95;hyphens:manual;overflow-wrap:normal}
  .prs-hero--h2 p{font-size:1.1rem;max-width:56ch}
  .prs-hero--h2 .prs-hero-actions{justify-content:flex-start;margin-top:var(--sp-4)}
  .prs-hero--h2 .prs-badges{gap:0;margin-top:var(--sp-4);border-block:3px solid var(--c-band-ink);background:color-mix(in oklch,var(--c-band) 88%,transparent)}
  .prs-hero--h2 .prs-badges .prs-chip{background:transparent;border:0;padding:.85rem 1.2rem;margin:0;letter-spacing:.16em;font-size:.78rem}
  .prs-hero--h2 .prs-badges .prs-chip+.prs-chip{box-shadow:inset 3px 0 0 var(--c-band-ink)}
  @media (max-width:639px){
    .prs-hero--h2 .prs-badges{display:grid;grid-template-columns:1fr;width:100%}
    .prs-hero--h2 .prs-badges .prs-chip,.prs-hero--h2 .prs-badges .prs-chip+.prs-chip{margin:0;padding:.7rem 1rem;border-left:0}
    .prs-hero--h2 .prs-badges .prs-chip+.prs-chip{box-shadow:inset 0 3px 0 var(--c-band-ink)}
  }
  /* 6 · Pie fo2: una pista por bloque (todo el ancho) y teléfono sin partir */
  @media (min-width:900px){
    /* data-bloques no coincide con las columnas reales (legales: 6 y solo 4 columnas): rejilla por columnas implícitas */
    .prs-footer--fo2 .prs-footer-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
    .prs-footer--fo2 .prs-footer-brand{grid-column:1 / span 2;grid-row:1}
    .prs-footer--fo2 .prs-footer-grid>:not(.prs-footer-brand){grid-row:2}
  }
  .prs-footer a[href^="tel:"]{white-space:nowrap}
  /* 7 · Móvil: rótulo 2×2 con la misma sangría, CTA del hero a todo el ancho, glosario a una columna */
  @media (max-width:639px){
    .prs-f-rotulo li,.prs-f-rotulo li+li{padding:.9rem .8rem .9rem 0;letter-spacing:.12em;text-wrap:balance}
    .prs-f-rotulo li:nth-child(even){padding-left:.8rem}
    :is(.prs-hv-acciones,.prs-hero-actions){display:grid;grid-template-columns:1fr;width:100%}
    :is(.prs-hv-acciones,.prs-hero-actions)>.prs-btn{width:100%}
  }
  @media (max-width:480px){.prs-f-glosario .prs-glossary>div{grid-template-columns:1fr;gap:.3rem}}
  /* 8 · Ventajas de las subpáginas: número en Anton teja en lugar del check genérico */
  .prs-ventajas .prs-grid{counter-reset:ventaja}
  .prs-ventajas .prs-card{counter-increment:ventaja}
  .prs-ventajas .prs-card>.prs-icon{display:none}
  .prs-ventajas .prs-card::before{content:counter(ventaja,decimal-leading-zero);display:block;font:400 2.2rem/1 var(--ff-head);color:var(--c-brand-text);margin-bottom:var(--sp-2)}
}
/* Corrección de la crítica visual final, vuelta 2 (web-diseno, modo corregir). Solo piel: sin marcado nuevo. */
@layer skin{
  /* 1 · «Terrassa» en el hero de las subpáginas: sobre el velo oscuro va en ámbar (luz de lucernario); la home sigue en teja */
  .prs-hero--h2 .prs-v-destacada{color:var(--c-accent)}
  .prs-hero--h2 .prs-hero-media::after{background:color-mix(in oklch,var(--c-band) 80%,transparent)}
  /* 2 · Titulares Anton: la tilde de una mayúscula sube 1,11 em sobre la línea base; con 1,15 (H1) y 1,18 (H2) no toca la línea de encima */
  h1{line-height:1.15}
  h2{line-height:1.18}
  .prs-hv--gigante h1,.prs-hero--h2 h1{line-height:1.15}
  :is(.prs-legal,.prs-error404) h1{line-height:1.15}
  :is(.prs-legal,.prs-error404) h2{line-height:1.18}
  :is(.prs-f-bloque,.prs-intro-grid>aside.prs-card:not(.prs-f-bloque),.prs-urgent>.prs-card) h3,
  .prs-f-servicios .prs-v-lista h3,.prs-step h3,.prs-f-glosario dt{line-height:1.15}
  .prs-f-rel .prs-card h3{line-height:1.3}
  .prs-f-rel .prs-card h3 a{text-underline-offset:.12em}
  /* Primera pantalla: el texto del hero gigante arranca con la foto y el hero gana aire arriba */
  .prs-hv--gigante{padding-top:2rem}
  @media (min-width:900px){.prs-hv--gigante .prs-hv-pie{align-items:start}}
  @media (max-width:639px){
    .prs-hv--gigante .prs-hv-pie{margin-top:var(--sp-3);gap:var(--sp-3)}
    .prs-hv--gigante .prs-hv-texto>p{font-size:1rem}
    .prs-hv-acciones{margin-top:var(--sp-3)}
    .prs-hero--h2 .prs-container{padding-block:var(--sp-4) calc(var(--sp-4) + var(--sp-3))}
    .prs-hero--h2 p{font-size:1rem}
    .prs-hero--h2 .prs-hero-actions{margin-top:var(--sp-3)}
  }
  /* 4 · Banda CTA final de las subpáginas: aire entre el titular y el párrafo */
  .prs-cta h2{margin-bottom:.9rem}
  /* 5 · H3 de la prosa: interlineado de texto y aire antes del párrafo */
  .prs-prose h3{line-height:1.22;margin-bottom:.45rem}
  /* 6 · Caja negra lateral de las subpáginas: acompaña a la prosa larga en escritorio */
  @media (min-width:900px) and (min-height:640px){.prs-intro-grid>aside.prs-card{position:sticky;top:7rem}}
  /* 7 · H3 en Chivo negrita: interlineado de lectura (el reset los deja a 1). Los H3 en Anton y los de la prosa conservan el suyo */
  h3{line-height:1.25}
  /* 8 · Móviles bajos (≤700 px de alto): el hero se compacta para que la primera llamada quede por encima del aviso de cookies y la barra fija */
  @media (max-width:899px) and (max-height:700px){
    .prs-hv--gigante{padding-top:1rem}
    .prs-hero--h2 .prs-container{padding-top:var(--sp-3)}
    :is(.prs-hv--gigante,.prs-hero--h2) h1{font-size:clamp(2.1rem,1.2rem + 4.4vw,2.6rem)}
    .prs-hv--gigante .prs-hv-pie{margin-top:var(--sp-2);gap:var(--sp-2)}
    :is(.prs-hv--gigante .prs-hv-texto,.prs-hero--h2)>p,.prs-hero--h2 p{font-size:.94rem;line-height:1.5}
    :is(.prs-hv-acciones,.prs-hero--h2 .prs-hero-actions){margin-top:var(--sp-2);gap:var(--sp-2)}
    :is(.prs-hv-acciones,.prs-hero--h2 .prs-hero-actions) .prs-btn{padding-block:9px}
  }
  /* …y en los de 701-820 px de alto (360×740, 390×800) solo se recortan márgenes y el relleno vertical de los botones */
  @media (max-width:899px) and (min-height:701px) and (max-height:820px){
    .prs-hv--gigante{padding-top:1.25rem}
    .prs-hero--h2 .prs-container{padding-top:var(--sp-3)}
    :is(.prs-hv-acciones,.prs-hero--h2 .prs-hero-actions){margin-top:var(--sp-2)}
    :is(.prs-hv-acciones,.prs-hero--h2 .prs-hero-actions) .prs-btn{padding-block:11px}
  }
}
/* 3 · Aviso de cookies compacto. Sus reglas de base viven en @layer state y solo se visten desde esa capa.
   No cambia el texto, la visibilidad, la posición ni el comportamiento: solo tamaño y disposición, para que no tape
   el H1 ni la llamada principal de la primera pantalla. En escritorio, una fila; en móvil, el texto y debajo el botón, a la derecha. */
@layer state{
  .prs-cookies{padding:10px 0;border-top:3px solid var(--c-ink);box-shadow:none}
  .prs-cookies .prs-btn{flex:none;min-height:44px;padding:0 1.1rem;font-size:.8rem;white-space:nowrap}
  @media (min-width:900px){
    .prs-cookies .prs-container{flex-wrap:nowrap;gap:var(--sp-4)}
    .prs-cookies p{max-width:none;line-height:1.4}
  }
  /* En móvil el botón va siempre en su propia línea, alineado a la derecha: el alto del aviso ya no depende de dónde
     acabe la última línea del texto ni de la fuente (antes, con 5 px de holgura a 360, una fuente de sustitución lo hacía saltar) */
  @media (max-width:899px){
    .prs-cookies{padding-block:6px}
    .prs-cookies .prs-container{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;font-size:.75rem;line-height:1.35}
    .prs-cookies p{flex:1 1 100%;max-width:none;font-size:inherit;line-height:inherit}
    .prs-cookies .prs-btn{min-height:38px;padding:0 .9rem;font-size:.72rem;letter-spacing:.02em}
  }
  /* Móviles bajos: aviso más compacto (mismo texto y botón, letra y márgenes menores) */
  @media (max-width:899px) and (max-height:700px){
    .prs-cookies{padding-block:5px}
    .prs-cookies .prs-container{font-size:.7rem;line-height:1.3}
    .prs-cookies .prs-btn{min-height:36px;font-size:.68rem}
  }
}

/* Corrector 2026-10-08 (reauditoría final, auditar-responsive). Solo piel y aviso; sin marcado ni textos.
   1 · --fs-h2 baja su mínimo a 1.9rem (30.4 px): a 320 px el H1 compacto (33.6 px) vuelve a ser mayor que los H2.
   2 · Botón secundario sobre la foto del hero de subpáginas: fondo de banda opaco (antes 88 %, la foto asomaba) y
       borde opaco más oscuro (el blanco al 60 % del borde bajaba el texto a 4.05:1 en el 10 % más claro);
       hover visible en todas las páginas (antes, en la home, 1.51:1 contra el fondo). */
@layer skin{
  .prs-hero--h2 .prs-btn--secondary{background:var(--c-band);border-color:color-mix(in oklch,var(--c-band-ink) 35%,var(--c-band))}
  .prs-hero--h2 .prs-btn--secondary:hover{background:var(--c-band-ink);color:var(--c-ink);border-color:var(--c-band-ink)}
  .prs-hv--gigante .prs-btn--secondary:hover{background:var(--c-ink);color:var(--c-band-ink);border-color:var(--c-ink)}
}
/* 3 · Móvil en horizontal (≤500 px de alto): no cabe la primera llamada sobre un aviso a todo el ancho; el aviso
   pasa a una caja a la derecha (desde 640 px, donde las llamadas no ocupan todo el ancho), encima de la barra fija (mismo texto, misma posición fija y la misma transición). */
@layer state{
  @media (min-width:640px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
    .prs-cookies{inset-inline:auto 0;width:min(46%,340px);border-left:3px solid var(--c-ink)}
    .prs-cookies .prs-container{flex-wrap:wrap}
  }
}
/* Corrector 2026-10-08 · banda CTA final de las subpáginas (fondo --c-brand). El acento sobre la marca da 2.71:1
   (botón contra banda) y el foco ámbar 1.62:1: en :hover, :active y :focus-visible el botón de acento pasa a la
   tinta de banda con texto --c-ink, y el contorno de foco de los botones de la banda usa --c-band-ink.
   El reposo no cambia. */
@layer skin{
  .prs-cta .prs-btn--accent:is(:hover,:active,:focus-visible){background:var(--c-band-ink);color:var(--c-ink);border-color:var(--c-band-ink)}
  .prs-cta .prs-btn:focus-visible{outline-color:var(--c-band-ink)}
}
/* web-diseno 2026-10-08 · pulido final (mejoras opcionales 1-3 de la crítica de confirmación). Solo piel y composición
   dentro de cada bloque: mismo marcado, mismos textos (R37), mismo orden de foco.
   1 · Errores de la home en escritorio: tres columnas fijas y la tarjeta larga («Echar aceite») a dos filas; las otras
       cuatro llenan las columnas 1 y 3 sin huecos (antes la fila 1 dejaba ~190 px vacíos y la fila 2 una columna vacía).
   2 · Pasos del proceso p2: el párrafo a 68ch (antes 1137 px, ~120 caracteres por línea).
   3 · Móviles de ≤820 px de alto: las llamadas del hero suben justo bajo el H1 (el párrafo pasa detrás, con el mismo
       texto), para que las dos queden por encima del aviso de cookies y de la barra fija. Los enlaces conservan su orden
       en el DOM, así que el orden de tabulación no cambia. */
@layer skin{
  @media (min-width:900px){
    .prs-f-errores .prs-signals{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-4)}
    .prs-f-errores .prs-signal:nth-child(2){grid-row:span 2}
  }
  .prs-proceso--p2 .prs-step p{max-width:68ch}
  @media (max-width:899px) and (max-height:820px){
    .prs-hv--gigante .prs-hv-texto{display:flex;flex-direction:column}
    .prs-hv--gigante .prs-hv-texto>.prs-hv-acciones{order:-1;margin-top:0}
    .prs-hv--gigante .prs-hv-texto>p{margin-top:var(--sp-3)}
    .prs-hero--h2 .prs-container>.prs-hero-actions{order:1}
    .prs-hero--h2 .prs-container>p{order:2;margin-top:var(--sp-3)}
    .prs-hero--h2 .prs-container>.prs-badges{order:3}
  }
}

/* web-diseno 2026-10-09 · logo B «PERTASSA» (elegido por el usuario: «B nuevo logo»). Solo el tamaño del <img> del logo. La cabecera se distingue por el elemento <header>, no por su clase (R24). */
@layer skin{
  header .prs-logo img{height:56px;max-width:min(160px,44vw)}
  .prs-footer .prs-logo img{height:64px;max-width:none}
  @media (min-width:900px){header .prs-logo img{height:64px;max-width:none}}
}
@layer state{
  @media (min-width:900px){html.prs-hdr-compacta .prs-hdr--compacta .prs-logo img{height:48px}}
}