@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianassantacoloma.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: 28;
  --c-brand:  #D8000B;
  --c-accent: #1F2933;

  /* Derivados de marca (esquema: triada) */
  --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(1 0 0);

  /* Superficies (tintada) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.960 0.026 var(--h));
  --c-ink:       oklch(0.21 0.024 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.867 .02 28);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.26 0.030 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.35:1 con la superficie y 5.35: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.474 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.474 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.674 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.276 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.636 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 (suave) ─────────────────────────────────── */
  --sh-card:0 8px 26px oklch(from var(--c-ink) l c h / .10);
  --sh-btn:none;
  --sh-hover:0 14px 34px oklch(from var(--c-ink) l c h / .16);

  /* ── 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, 4.5vw, 80px);
  --sp-block:var(--sp-4);
  --sp-gap:12px;
  --card-pad:16px;

  /* ── TIPOGRAFÍA (escala modular ×1.2) ────────────────────────── */
  --ff-head:'Nunito Sans', system-ui, sans-serif;
  --ff-body:'Nunito Sans', system-ui, sans-serif;
  --fw-head:800; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(25.7px, 4.6vw, 35.7px);
  --fs-h2:clamp(21.8px, 3.0vw, 27.6px);
  --fs-h3:19.6px;
  --fs-body:16.4px;
  --fs-small:13.3px;
  --tt-head:none; --ls-head:-0.02em;
  --lh-head:1.16; --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:.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(1 0 0);
    --c-accent-ink:oklch(1 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: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H5 servicios:S4 ventajas:V3
   proceso:P3 resenas:R1 faq:F2
   zonas:Z1 contacto:CT4 footer:FO2
   etiqueta:numero-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 numero-texto */
.psc-eyebrow{counter-increment:sec;color:var(--c-ink-soft);font-size:var(--fs-small)}
.psc-eyebrow::before{content:counter(sec,decimal-leading-zero) ' — ';color:var(--c-accent)}

/* Numeración del proceso — variante 1 */
.psc-step{counter-increment:paso}
.psc-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)}
.psc-step-num::before{content:counter(paso)}
}

/* ═══ Propuesta A · «El cierre rotulado» · rotunda-mayusculas · piel del brief (web-direccion-arte) ═══ */
@font-face{font-family:'Anton';src:url('/fonts/titular-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chivo';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chivo';src:url('/fonts/texto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ff-head:'Anton', 'fallback-metrico', sans-serif;
  --ff-body:'Chivo', 'fallback-metrico', sans-serif;
  --fw-head:400; --fw-body:400; --fw-strong:700;
  --tt-head:uppercase; --ls-head:.004em; --lh-head:1.18; --lh-body:1.62;
  --foco:50% 50%; /* punto focal por defecto de base.css (mismo valor que su reserva); cada imagen lo cambia en su style */
  --fs-hero:clamp(2.6rem, 1.1rem + 4.4vw, 5.1rem);
  --fs-h1:var(--fs-hero);
  --fs-h2:clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem);
  --fs-h3:1.25rem; --fs-body:17.5px; --fs-small:14px;
  --c-ink:oklch(0.2 0.014 250); --c-ink-soft:oklch(0.43 0.014 250); --c-ink-soft-claro:oklch(0.43 0.014 250);
  --c-surface:oklch(1 0 0); --c-surface-2:oklch(0.955 0.004 250);
  --c-band:#1F2933; --c-band-ink:oklch(1 0 0); --c-band-ink-soft:oklch(0.86 0.01 250);
  --c-line:oklch(0.2 0.014 250 / .16);
  --c-focus:oklch(0.6 0.19 260);               /* web-diseno: 3,63:1 sobre la banda antracita, 4,06:1 sobre blanco */
  --c-brand-text-oscuro:oklch(from var(--c-brand) 0.72 c h); /* web-diseno: 4,74:1 sobre la banda (antes 4,37:1) */
  --r-btn:0; --r-card:0; --r-input:0; --r-img:0;
  --bw-card:3px; --bw-btn:3px;
  --sh-card:none; --sh-hover:none; --sh-btn:none;
  --btn-pad:14px 24px; --btn-fw:700; --btn-tt:uppercase; --btn-ls:.07em;
  --w-container:1200px;
  --sp-section:clamp(56px, 7vw, 112px);
  --card-pad:26px; --sp-gap:20px;
  --lamas:repeating-linear-gradient(180deg, transparent 0 44px, oklch(0 0 0 / .16) 44px 46px, oklch(1 0 0 / .07) 46px 48px);
}

@layer skin{
  body{font-size:var(--fs-body)}
  h3,h4,.psc-faq-q,.psc-footer-title{font-family:var(--ff-body);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.25}
  .psc-footer-title{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
  .psc-v h3,.psc-faq-q{font-family:var(--ff-body);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.25}
  .psc-eyebrow{font-family:var(--ff-body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--c-ink)}
  .psc-eyebrow::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.6em;background:var(--c-brand);vertical-align:.02em}
  .psc-v--oscura .psc-eyebrow,.psc-v--marca .psc-eyebrow{color:inherit}
  .psc-v--oscura .psc-eyebrow::before{background:var(--c-brand-text-oscuro)}
  .psc-btn--secondary{border-color:currentColor}
  .psc-btn--secondary:hover{background:var(--c-ink);color:var(--c-surface);border-color:var(--c-ink)}

  /* foco visible sobre el rojo de marca (hero, banda de urgencias): blanco, 5,35:1 */
  :is(.psc-f-cierre-pano,.psc-f-lamas,.psc-v--marca,.psc-cta){--c-focus:var(--c-brand-ink)}
  :is(.psc-f-cierre-pano,.psc-f-lamas,.psc-v--marca,.psc-cta) :is(.psc-card,.psc-form,.psc-cookies){--c-focus:oklch(0.6 0.19 260)}

  /* ── Elemento original · psc-f-cierre: el hero como un cierre de local rotulado, a medio subir ── */
  .psc-f-cierre{padding:0;background:var(--c-band)}
  .psc-f-cierre-pano{position:relative;background:var(--lamas),var(--c-brand);color:var(--c-brand-ink);padding-top:clamp(1rem,3.4vw,3rem)} /* web-diseno: H1 y botones en la primera pantalla (antes clamp(2.2rem,5vw,4.5rem)) */
  .psc-f-cierre-grid{display:grid;gap:var(--sp-5);align-items:end}
  .psc-f-cierre h1{color:inherit;max-width:26ch;margin-bottom:var(--sp-3)} /* web-diseno: 3 líneas en escritorio con el H1 aprobado (antes 17ch, 4 líneas) */
  .psc-f-cierre .psc-eyebrow{color:inherit}
  .psc-f-cierre .psc-eyebrow::before{background:var(--c-band)}
  .psc-f-cierre-cinta{display:block;width:fit-content;max-width:100%;margin-top:.12em;background:var(--c-band);color:var(--c-band-ink);padding:.04em .16em .02em}
  .psc-f-cierre .psc-hv-texto>p{color:inherit;font-size:1.15rem;max-width:44rem} /* web-diseno: ≈80 caracteres por línea; una línea menos con la entradilla aprobada */
  .psc-f-cierre .psc-btn--primary{background:var(--c-surface);color:var(--c-brand-text);border-color:var(--c-surface)}
  /* web-diseno: en :hover los botones del paño se distinguen del rojo ≥3:1 (antes antracita, 2,76:1) */
  .psc-f-cierre .psc-btn--primary:hover{background:var(--c-ink);color:var(--c-surface);border-color:var(--c-ink)}
  .psc-f-cierre .psc-btn--secondary{color:inherit;border-color:currentColor;background:transparent}
  .psc-f-cierre .psc-btn--secondary:hover{background:var(--c-surface);border-color:var(--c-surface);color:var(--c-brand-text)}
  .psc-f-cierre-rotulo{display:grid;justify-items:center;gap:.35rem;padding:1.1rem 1.4rem;border:3px solid currentColor;outline:1px solid currentColor;outline-offset:5px;
    color:inherit;text-decoration:none;text-align:center;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.82rem;justify-self:start}
  .psc-f-cierre-rotulo strong{font-family:var(--ff-head);font-weight:400;font-size:clamp(2rem,1rem + 3vw,3.3rem);letter-spacing:.02em;line-height:1}
  .psc-f-cierre-rotulo:focus-visible{outline:3px solid var(--c-focus);outline-offset:5px} /* web-diseno: el doble marco no tapa el foco */
  .psc-f-cierre-rotulo:is(:hover,:active) strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
  .psc-f-cierre-rotulo:active{background:oklch(0 0 0 / .18)}
  .psc-f-cierre-datos{display:flex;flex-wrap:wrap;gap:var(--sp-3) clamp(1.4rem,4vw,3.25rem);margin-top:clamp(2rem,4vw,3.4rem);padding-block:var(--sp-4);border-top:2px solid oklch(1 0 0 / .45)}
  .psc-f-cierre-datos strong{display:block;font-family:var(--ff-head);font-weight:400;font-size:1.9rem;text-transform:uppercase;line-height:1.05}
  .psc-f-cierre-datos span{font-size:.9rem}
  .psc-f-cierre-pletina{height:20px;background:var(--c-band);position:relative;border-top:3px solid oklch(0.82 0 0)}
  .psc-f-cierre-pletina i{position:absolute;top:4px;width:9px;height:9px;border-radius:50%;background:oklch(0.82 0 0)}
  .psc-f-cierre-pletina i:first-child{left:18%} .psc-f-cierre-pletina i:last-child{right:18%}
  .psc-f-cierre-calle img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 58%} /* foco del brief */
  @media (min-width:900px){
    .psc-f-cierre-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr)}
    .psc-f-cierre-rotulo{justify-self:end;margin-bottom:var(--sp-4)}
    .psc-f-cierre-calle img{aspect-ratio:32/9;max-height:380px}
  }

  /* recurso: las lamas también en la banda de urgencias */
  .psc-f-lamas{background:var(--lamas),var(--c-brand)}
  .psc-f-lamas .psc-btn--secondary{background:var(--c-surface);color:var(--c-brand);border-color:var(--c-surface)}
  .psc-f-lamas .psc-btn--secondary:hover{background:var(--c-ink);color:var(--c-surface);border-color:var(--c-ink);text-decoration:none} /* ≥3:1 con el rojo */

  /* síntomas: rejilla de borde grueso */
  .psc-v-sintomas{border:3px solid var(--c-ink);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
  .psc-v-sintomas>*{border:1.5px solid var(--c-ink)}
  .psc-v-sintomas .psc-ico{color:var(--c-brand-text)}
  .psc-v-sintomas a{color:var(--c-ink);text-decoration-color:var(--c-brand);text-decoration-thickness:2px;text-underline-offset:.2em}
  .psc-v-sintomas a:is(:hover,:active){color:var(--c-brand-text);text-decoration-thickness:4px}

  /* ── Laboratorio · psc-x-escaparates: los servicios como escaparates con el cierre a medio subir ── */
  .psc-x-escaparates{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));margin:0;padding:0;list-style:none}
  .psc-x-escaparates>li{display:flex;flex-direction:column;gap:var(--sp-2);border-top:3px solid var(--c-band-ink);padding-top:var(--sp-3)}
  .psc-x-escaparate-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:oklch(0.3 0.01 250)}
  .psc-x-escaparate-media img{width:100%;height:100%;object-fit:cover;display:block}
  .psc-x-escaparate-cierre{position:absolute;inset:0 0 auto 0;height:44%;background:repeating-linear-gradient(180deg,transparent 0 13px,oklch(0 0 0 / .2) 13px 14px,oklch(1 0 0 / .08) 14px 15px),var(--c-brand);border-bottom:7px solid oklch(0.82 0 0);
    transform:translateY(0)}
  .psc-x-escaparates h3{margin:var(--sp-1) 0 0;font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.6rem;letter-spacing:.01em}
  .psc-x-escaparates h3 a{color:inherit;text-decoration:none}
  .psc-x-escaparates h3 a::after{content:" →";color:var(--c-brand-text-oscuro)}
  .psc-x-escaparates h3 a:is(:hover,:active){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
  .psc-x-escaparates h3 a:active{color:var(--c-brand-text-oscuro)} /* respuesta al toque: 4,74:1 sobre la banda */
  .psc-x-escaparates p{margin:0;color:var(--c-band-ink-soft);font-size:.98rem}
  @media (prefers-reduced-motion:no-preference){
    .psc-x-escaparate-cierre{transition:transform .5s var(--ease)}
    .psc-x-escaparates>li:is(:hover,:focus-within) .psc-x-escaparate-cierre{transform:translateY(-82%)}
  }

  /* zonas: barrios en caja alta y borde grueso */
  .psc-v-zonas li span{border:2px solid var(--c-ink);border-radius:0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;background:var(--c-surface)}
  .psc-f-alrededores{margin-top:var(--sp-4);max-width:68ch;color:var(--c-ink-soft)} /* web-diseno: ≈80 caracteres por línea (antes 62rem, ≈113) */

  /* pasos: números cuadrados en Anton */
  .psc-v-pasos>li::before{border-radius:0;font-family:var(--ff-head);font-weight:400;font-size:1.3rem;background:var(--c-ink);color:var(--c-surface)}
  .psc-v-pasos>li::after{height:3px;background:var(--c-ink)}
  .psc-v-check h2{margin-top:0}
  .psc-v-check .psc-btn{margin-top:var(--sp-3)}

  /* reseñas (r2, testimonios reales por email): texto en Chivo como los H3, comillas en rojo, marco de tinta */
  .psc-resenas .psc-card{border-color:var(--c-ink)}
  .psc-resenas--r2 .psc-review-text{font-family:var(--ff-body);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.45;font-size:1.12rem}
  .psc-resenas--r2 .psc-review-text::before,.psc-resenas--r2 .psc-review-text::after{color:var(--c-brand-text)}
  .psc-resenas .psc-stars{color:var(--c-brand-text)}
  .psc-resenas .psc-avatar{border-radius:0;background:var(--c-ink);color:var(--c-surface)}

  /* preguntas: filete grueso */
  .psc-faq-item{border-bottom:2px solid var(--c-ink)}

  /* ── web-diseno (corregir, 2026-10-07): primera pantalla, respuesta al toque y medida de línea ── */
  .psc-v-aviso p{max-width:68ch}   /* #urgencias: ≈80 caracteres por línea (antes ≈102) */
  .psc-logo:active{opacity:.72}    /* respuesta al toque del logo (solo color; la cabecera no cambia) */
  .psc-footer a:not([class]):active{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em} /* pie: el subrayado de la base solo se ve si hay subrayado */
  @media (max-width:599px){
    /* móvil: H1, los dos botones y la barra fija en la primera pantalla (brief A, «Conversión»), sin recortar el texto */
    .psc-f-cierre h1{margin-bottom:var(--sp-2)}
    /* a 360×740 la entradilla aprobada (≈290 caracteres) empujaba los botones bajo el aviso de cookies y la barra:
       los botones se pintan justo tras el H1 y la entradilla entera debajo. Orden del DOM intacto (lectores y tabulador:
       la entradilla no tiene enlaces, así que el orden de foco no cambia) */
    .psc-f-cierre .psc-hv-texto{display:flex;flex-direction:column}
    .psc-f-cierre .psc-hv-texto>p:not(.psc-eyebrow){order:2;margin:var(--sp-4) 0 0;font-size:1rem;line-height:1.5}
    .psc-f-cierre .psc-hv-acciones{order:1;margin-top:var(--sp-2)}
    .psc-f-cierre .psc-hv-acciones .psc-btn{padding-block:10px}
  }
}

/* ═══ web-diseno (corregir, 2026-10-07 · subpáginas): ritmo de párrafos, titulares sin guion, rejillas equilibradas,
   piel de coste y ventajas, pasos ya numerados en el texto, contraste sobre el rojo y migas de pan ═══ */
@layer skin{
  /* 1 · párrafos seguidos y párrafo → H3 con aire (el reset deja margin:0 en todo) */
  .psc-v :is(p,ul,ol,.psc-prose) + :is(p,ul,ol,.psc-prose){margin-top:.85em}
  .psc-v :is(p,ul,ol,.psc-prose,.psc-btn) + :is(h3,h4){margin-top:1.6em}
  .psc-v :is(.psc-v-niveles,.psc-tiers,.psc-v-sintomas,.psc-v-numeradas,.psc-v-pasos,.psc-v-check) + :is(p,.psc-prose,.psc-v-cab){margin-top:var(--sp-5)}
  .psc-v-cab p + p,.psc-head p + p{margin-top:.85em}
  :is(.psc-v,.psc-cta) h2 + :is(p,h3,ul,ol,.psc-prose){margin-top:var(--sp-3)}
  .psc-v :is(h3,h4) + :is(p,ul,ol){margin-top:.35em}

  /* 2 · titulares sin partir palabras con guion: la palabra entera baja de línea; overflow-wrap:break-word
     de la base sigue protegiendo el desbordamiento (solo parte lo que no cabe en la línea entera) */
  h1,h2,h3{hyphens:manual}   /* medido a 320 y 360 px: con el tamaño actual ninguna palabra se parte ni desborda */

  /* 3 · rejillas equilibradas según el número de elementos */
  @media (min-width:600px){
    .psc-v-sintomas:has(> :nth-child(4):last-child),
    .psc-ventajas--v1 .psc-grid:has(> :nth-child(4):last-child),
    .psc-v-pasos:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
    .psc-v-sintomas:has(> :nth-child(3):last-child){grid-template-columns:1fr}
  }
  @media (min-width:600px) and (max-width:1099px){
    /* dos columnas de pasos: la línea de unión del paso 2 se saldría por la derecha (scroll lateral a 928 px) */
    .psc-v-pasos:has(> li:nth-child(4):last-child) > li::after{content:none;display:none}
  }
  @media (min-width:600px) and (max-width:899px){
    .psc-v-niveles:has(> :nth-child(3):last-child){grid-template-columns:1fr}
    .psc-v-numeradas:has(> li:nth-child(5):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
    .psc-v-numeradas:has(> li:nth-child(5):last-child) > li:last-child{grid-column:1 / -1}
  }
  @media (min-width:900px){
    .psc-v-sintomas:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
    .psc-v-numeradas:has(> li:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
    .psc-v-numeradas:has(> li:nth-child(5):last-child) > li{grid-column:span 2}
    .psc-v-numeradas:has(> li:nth-child(5):last-child) > li:nth-child(n+4){grid-column:span 3}
  }
  @media (min-width:1100px){
    .psc-ventajas--v1 .psc-grid:has(> :nth-child(4):last-child),
    .psc-v-pasos:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  .psc-tiers{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}   /* 6 niveles: 3+3 a 1280, 2+2+2 a 768 */

  /* 4 · piel del tema en coste y ventajas: borde de 3 px en tinta, radio 0, etiqueta como rótulo */
  :is(.psc-tiers,.psc-ventajas) .psc-card{border:var(--bw-card) solid var(--c-ink);border-radius:0;box-shadow:none}
  :is(.psc-tiers,.psc-ventajas) .psc-card:hover{box-shadow:none}
  .psc-tiers .psc-card{display:flex;flex-direction:column;gap:var(--sp-2);border-top-width:8px}
  .psc-tiers .psc-card p{margin:0}
  .psc-tier-badge{align-self:flex-start;margin:0;border-radius:0;background:var(--c-ink);color:var(--c-surface);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;padding:.3em .7em}
  .psc-ventajas .psc-icon{color:var(--c-brand-text);width:2.2rem;height:2.2rem;margin-bottom:var(--sp-2)}
  .psc-v-nivel{border-color:var(--c-ink);border-radius:0;border-top-width:8px}
  .psc-v-nivel--destacado{border-color:var(--c-ink);border-top-color:var(--c-brand)}
  .psc-v-nivel p > strong:first-child{display:block;margin-bottom:var(--sp-1);font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.7rem;letter-spacing:.01em;line-height:1.05}
  .psc-v-numeradas > li{border-color:var(--c-ink);border-radius:0}
  .psc-v-numeradas > li::before{border-radius:0;border-width:3px;font-family:var(--ff-head);font-weight:400;font-size:1.2rem}

  /* 5 · pasos cuyo texto aprobado ya trae «1.», «2.»…: sin el contador del tema (no se repite el número).
     Clase para el marcado: psc-v-pasos--texto (la añade web-corrector); mientras tanto, /instalacion por su estructura */
  :is(.psc-v-pasos--texto,#incluye ~ #proceso .psc-v-pasos) > li{padding-top:var(--sp-3);border-top:3px solid var(--c-ink)}
  :is(.psc-v-pasos--texto,#incluye ~ #proceso .psc-v-pasos) > li::before,
  :is(.psc-v-pasos--texto,#incluye ~ #proceso .psc-v-pasos) > li::after{content:none;display:none}

  /* 6 · contraste sobre el rojo: el botón de acento en tinta (3,37:1 frente al rojo; letra blanca 18,05:1)
     y en :hover/:active blanco con letra roja (5,35:1 frente al rojo; 6,75:1 la letra) */
  :is(.psc-cta,.psc-f-lamas,.psc-v--marca) .psc-btn--accent{background:var(--c-ink);color:var(--c-surface);border-color:var(--c-ink)}
  :is(.psc-cta,.psc-f-lamas,.psc-v--marca) .psc-btn--accent:is(:hover,:active){background:var(--c-surface);color:var(--c-brand-text-claro);border-color:var(--c-surface)}
  /* enlaces en línea: respuesta al toque visible (color y subrayado; sobre el rojo, velo oscuro) */
  main a:not([class]):active{color:var(--c-brand-text);text-decoration-thickness:3px}
  :is(.psc-cta,.psc-f-lamas,.psc-v--marca,.psc-f-cierre-pano) a:not([class]):active{color:inherit;background:oklch(0 0 0 / .28);text-decoration-thickness:3px}
  .psc-cta p a:not([class]){color:inherit}

  /* 7 · migas de pan visibles (subpáginas, dentro del paño del cierre, antes de la etiqueta) */
  .psc-migas{margin-bottom:var(--sp-3);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:inherit}
  .psc-migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55em;margin:0;padding:0;list-style:none}
  .psc-migas li{display:inline-flex;align-items:center}
  .psc-migas li + li::before{content:"›" / "";margin-right:.55em;font-size:1.1em}
  .psc-migas a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-block:-10px;padding-inline:.15em;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
  .psc-migas a:hover{text-decoration-thickness:3px}
  .psc-migas a:active{background:oklch(0 0 0 / .28);text-decoration-thickness:3px}
  .psc-migas a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
  .psc-migas [aria-current="page"]{font-weight:400}
}

/* ═══ web-corrector (2026-10-07 · páginas legales): titulares dentro de .psc-prose con aire.
   Anton tiene la caja de la fuente más alta que su line-height (57px a 56px): sin margen, la caja del H2
   invade el párrafo anterior y tapa sus enlaces al recibir el foco (medido en /politica-privacidad a 1280). ═══ */
@layer skin{
  .psc-prose :is(p,ul,ol) + :is(h2,h3){margin-top:var(--sp-5)}
  .psc-prose :is(h2,h3) + :is(p,ul,ol){margin-top:var(--sp-3)}
}

/* ═══ web-diseno (corregir, crítica visual vuelta 1 · 2026-10-07): pie fo2, escaparates en móvil, ritmo de /instalacion
   y /mosquiteras, select del formulario, etiqueta del hero y barra superior. Solo piel y disposición; el texto no cambia (R37) ═══ */
@layer skin{
  /* 1 · pie fo2: footer.php ordena los bloques según el dominio (aquí la marca sale 2.ª). La marca va siempre primero
     y los demás bloques se reparten en columnas explícitas según cuántos haya (3 a 6 bloques, R31) */
  .psc-footer--fo2 .psc-footer-brand{order:-1}
  .psc-footer--fo2 .psc-footer-brand p{max-width:34ch}
  @media (min-width:900px){
    .psc-footer--fo2 .psc-footer-grid{column-gap:clamp(1.5rem,3vw,3rem);row-gap:var(--sp-5)}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-brand{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);
      margin-bottom:0;padding-bottom:var(--sp-4);border-bottom:3px solid var(--c-brand)}
  }
  @media (min-width:600px) and (max-width:899px){
    .psc-footer--fo2 .psc-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (min-width:1100px){
    /* a todo el ancho: la marca es la primera columna, algo más ancha, y los demás bloques a su derecha en una fila */
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(5):last-child){grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-grid:has(> :nth-child(6):last-child){grid-template-columns:minmax(0,1fr) repeat(5,minmax(0,1fr))}
    .psc-footer--fo2 .psc-footer-brand{grid-column:auto;display:block;padding:var(--sp-3) 0 0;border-bottom:0;border-top:6px solid var(--c-brand)}
    .psc-footer--fo2 .psc-footer-brand p{margin-top:var(--sp-3)}
    .psc-footer--fo2 .psc-footer-grid > :not(.psc-footer-brand){padding-top:var(--sp-3);border-top:2px solid oklch(1 0 0 / .28)}
  }

  /* 3 · escaparates: una columna por debajo de 600 px (H3 y texto con aire), escaparate apaisado para no alargar la home */
  @media (max-width:599px){
    .psc-x-escaparates{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
    .psc-x-escaparate-media{aspect-ratio:3/2}
    .psc-x-escaparate-cierre{height:38%}
  }

  /* 4a · secciones de solo texto (titular + prosa). Cada una con su forma según su sitio en la secuencia:
     la primera, titular a la izquierda y texto a la derecha; la segunda seguida, a dos columnas; la tercera seguida,
     entradilla destacada y el resto a tres columnas. Afecta a /instalacion (#cajon, #alicantinas, #aislamiento)
     y a /metalicas (#mantenimiento, primera forma) */
  @media (min-width:900px){
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) > .psc-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-v-cab{position:sticky;top:6rem;margin-bottom:0;padding-top:var(--sp-4);border-top:8px solid var(--c-brand)}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose{max-width:none}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p:first-child{font-size:1.18rem;line-height:1.55}

    /* segunda seguida: titular a todo el ancho y el texto a dos columnas con filete */
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) > .psc-container{display:block}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-v-cab{position:static;max-width:52rem;margin-bottom:var(--sp-5);padding-top:0;border-top:0}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose{columns:2;column-gap:clamp(2.5rem,5vw,4.5rem);column-rule:2px solid currentColor}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p{break-inside:avoid}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p:first-child{font-size:inherit;line-height:inherit}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p{margin:0;padding-bottom:.85em}

    /* tercera seguida: entradilla a lo ancho con barra roja y el resto a tres columnas (dos hasta 1099 px) */
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose{column-rule:2px solid var(--c-ink)}
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p{break-inside:avoid} /* web-diseno: ningún párrafo partido entre columnas (estrés R37) */
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose > p:first-child{
      column-span:all;max-width:62ch;margin-bottom:var(--sp-5);padding:0 0 0 var(--sp-4);border-left:8px solid var(--c-brand);font-family:var(--ff-body);font-weight:700;font-size:1.3rem;line-height:1.5}
  }
  @media (min-width:1100px){
    .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) + .psc-v:has(> .psc-container > .psc-v-cab + .psc-prose:last-child) .psc-prose{columns:3}
  }

  /* 4b · dos bloques de texto a dos columnas seguidos (/mosquiteras #mallas y #medicion): el primero con los tipos
     como fichas de borde grueso; el segundo como hoja de medición con la regla en el canto */
  .psc-v:has(> .psc-v-check > div:first-child):has(+ .psc-v > .psc-v-check > div:first-child) .psc-v-check ul{gap:var(--sp-3)}
  .psc-v:has(> .psc-v-check > div:first-child):has(+ .psc-v > .psc-v-check > div:first-child) .psc-v-check li{padding:var(--sp-3) var(--sp-4);border:3px solid var(--c-ink);border-left-width:10px;border-left-color:var(--c-brand);background:var(--c-surface)}
  .psc-v:has(> .psc-v-check > div:first-child):has(+ .psc-v > .psc-v-check > div:first-child) .psc-v-check li::before{content:none;display:none}
  .psc-v:has(> .psc-v-check > div:first-child):has(+ .psc-v > .psc-v-check > div:first-child) .psc-v-check li > strong:first-child{display:block;margin-bottom:var(--sp-1);font-family:var(--ff-head);font-weight:400;text-transform:uppercase;font-size:1.45rem;letter-spacing:.01em;line-height:1.1}
  .psc-v:has(> .psc-v-check > div:first-child):has(+ .psc-v > .psc-v-check > div:first-child) .psc-v-check ul + p{margin-top:var(--sp-4)}

  .psc-v:has(> .psc-v-check > div:first-child) + .psc-v:has(> .psc-v-check > div:first-child) > .psc-v-check > :last-child{
    position:relative;padding:calc(var(--sp-5) + 14px) var(--card-pad) var(--card-pad);border:3px solid var(--c-ink);background:var(--c-surface);
    background-image:repeating-linear-gradient(90deg,var(--c-ink) 0 2px,transparent 2px 12px),repeating-linear-gradient(90deg,var(--c-ink) 0 2px,transparent 2px 60px);
    background-size:100% 12px,100% 24px;background-repeat:no-repeat;background-position:0 0,0 0}
  .psc-v:has(> .psc-v-check > div:first-child) + .psc-v:has(> .psc-v-check > div:first-child) > .psc-v-check h2{padding-bottom:var(--sp-3);border-bottom:8px solid var(--c-brand)}
  @media (min-width:900px){
    .psc-v:has(> .psc-v-check > div:first-child) + .psc-v:has(> .psc-v-check > div:first-child) > .psc-v-check{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
  }

  /* 5a · desplegable del formulario a la misma altura que los campos de texto (Chrome no aplica el interlineado al select):
     interlineado del cuerpo (1,62) + relleno (2 × .6em) + borde c4 (2 × 2px) = 53 px, como los inputs */
  .psc-field select{min-height:calc(2.82em + 4px)}
  /* 5b · etiquetas en dos líneas equilibradas: en el hero a 360 el «·» ya no queda suelto al final de la línea */
  .psc-eyebrow{text-wrap:balance}
  /* 5d · web-diseno (crítica vuelta 2): con --lh-head 1,18 las tildes de Anton (É, Ó, Ñ) ya no tocan la línea de arriba (medido: a 1,12 la Ó de «COLOCACIÓN» aún tocaba la línea de arriba, 0 px);
     la etiqueta deja medio cuerpo de aire sobre el titular */
  .psc-eyebrow{margin-bottom:.6em}
  .psc-eyebrow:has(+ :is(h1,h2)){display:block} /* en contacto y reseñas la etiqueta es inline y no aplicaba el margen */
  /* 5e · listas de la prosa (/metalicas #mantenimiento) con el cuadrado rojo de la etiqueta como viñeta */
  .psc-v .psc-prose > ul{display:grid;gap:.45em;padding:0}
  .psc-v .psc-prose > ul > li{position:relative;padding-left:1.5em}
  .psc-v .psc-prose > ul > li::before{content:"";position:absolute;left:0;top:.5em;width:.6em;height:.6em;background:var(--c-brand)}
  .psc-v--oscura .psc-prose > ul > li::before{background:var(--c-brand-text-oscuro)}
}