@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianassagradafamilia.es
   Tema aprobado: propuesta A «Todo cuadra» (corporativo-confianza),
   aplicado con aplicar-propuesta.py sobre los tokens base del generador.
   Prefijo de clases: psf-
   Ajustes de web-diseno (2026-10-14): colores de la piel como tokens.
   ═══════════════════════════════════════════════════════════════ */

/* 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: 10;
  --c-brand:  #762839;
  --c-accent: #D9A441;

  /* Derivados de marca (esquema: mono) */
  --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 (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.863 .02 10);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.24 0.015 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 9.37:1 con la superficie y 9.85: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.358 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.358 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.638 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.531 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.751 c h);

  /* ── GEOMETRÍA (suave) ───────────────────────────── */
  --r-btn:8px; --r-card:12px; --r-input:8px; --r-img:10px;
  --bw-card:1px; --bw-btn:1px; --bw-line:1px;

  /* ── SOMBRAS (capas) ─────────────────────────────────── */
  --sh-card:0 1px 1px oklch(from var(--c-ink) l c h / .05), 0 4px 8px oklch(from var(--c-ink) l c h / .05), 0 12px 24px oklch(from var(--c-ink) l c h / .05);
  --sh-btn:none;
  --sh-hover:0 2px 4px oklch(from var(--c-ink) l c h / .08), 0 10px 20px oklch(from var(--c-ink) l c h / .08);

  /* ── RITMO (base 6px · densidad aireada ×1.28) ───────── */
  --w-container:1140px;
  --sp-1:8px; --sp-2:15px; --sp-3:23px; --sp-4:38px;
  --sp-5:61px; --sp-6:100px;
  --sp-section:clamp(69px, 5.8vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:23px;
  --card-pad:31px;

  /* ── TIPOGRAFÍA (escala modular ×1.2) ────────────────────────── */
  --ff-head:'Crimson Pro', Georgia, serif;
  --ff-body:'Inter', system-ui, sans-serif;
  --fw-head:600; --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.005em;
  --lh-head:1.20; --lh-body:1.71;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:15px 31px;
  --btn-fw:700;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.25;
  --h-img-service:230px;
  --h-img-hero:399px;

  /* ── 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(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:H6 servicios:S3 ventajas:V3
   proceso:P3 resenas:R3 faq:F1
   zonas:Z1 contacto:CT3 footer:FO4
   etiqueta:texto numeracion:01 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 texto */
.psf-eyebrow{color:var(--c-brand-text);font-weight:var(--fw-strong);font-size:var(--fs-small)}

/* Numeración del proceso — variante 01 */
.psf-step{counter-increment:paso}
.psf-step-num::before{content:counter(paso,decimal-leading-zero);font-family:var(--ff-head);font-size:var(--fs-h2);color:var(--c-brand-soft)}
}

/* ═══════════════════════════════════════════════════════════════
   Propuesta A · corporativo-confianza · «Todo cuadra»
   Brief: agentes/propuestas/A/BRIEF.md · prefijo psf-
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Libre Franklin';src:url('/fonts/titular-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/texto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --ff-head:'Libre Franklin', sans-serif;
  --ff-body:'DM Sans', sans-serif;
  --fw-head:800; --fw-strong:700; --btn-fw:700;
  --fs-hero:clamp(2.5rem, 1.35rem + 3.3vw, 3.6rem);
  --fs-h1:clamp(2.5rem, 1.35rem + 3.3vw, 3.6rem);
  --fs-h2:clamp(1.85rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-h3:1.25rem; --fs-body:17px; --fs-small:.875rem;
  --ls-head:-.022em; --lh-head:1.08; --lh-body:1.65;
  /* papeles del color: granate = marca principal (botones, enlaces, barra de urgencias, banda de aviso);
     ciruela = banda oscura y pie; oro = solo dato de la tarjeta flotante, cifras del cuadrado y filete de rótulos */
  --c-surface:#FFFFFF;
  --c-surface-2:#FAF4F4;
  --c-ink:#22171A;
  --c-ink-soft:#5B4B50; --c-ink-soft-claro:#5B4B50;
  --c-band:#2B1B21; --c-band-ink:#FFFFFF; --c-band-ink-soft:#E6D6DB;
  --c-line:#E8DCDE;
  --c-brand-text:#762839; --c-brand-text-claro:#762839; --c-brand-text-oscuro:#F0C4CD;
  --c-accent-text:#8A5F12; --c-accent-text-oscuro:#D9A441;
  --r-btn:6px; --r-card:10px; --r-input:6px; --r-img:10px;
  --bw-card:1px; --bw-btn:1px;
  --sh-card:0 1px 2px rgb(43 27 33 / .06), 0 8px 24px rgb(43 27 33 / .07);
  --w-container:1200px;
  --card-pad:28px;
  --sp-section:clamp(64px, 7vw, 100px);
  --btn-pad:14px 24px;
  /* tokens de la piel de A (sin colores a mano en las reglas) */
  --c-blanco:#FFFFFF;
  --c-accent-ink:#22171A;
  --c-accent-hi:#E8BC63;
  --c-on-brand-soft:#F3DFE3;
  --c-band-2:#3A262D;
  --c-line-hero:rgb(255 255 255 / .22);
  --c-line-oscura:rgb(255 255 255 / .18);
  --c-accent-line:rgb(217 164 65 / .45);
  --c-accent-line-2:rgb(217 164 65 / .3);
  --sh-barra:0 -6px 18px rgb(43 27 33 / .22);
  --tr:.2s; --ease:ease-out;
}
@layer skin{
  body{font-size:var(--fs-body)}
  h1,h2,h3{font-family:var(--ff-head);font-weight:800;letter-spacing:var(--ls-head);hyphens:manual;overflow-wrap:normal}
  h3{letter-spacing:-.01em}
  h2{margin-bottom:var(--sp-2)}
  .psf-v-check h2+p{margin-bottom:var(--sp-3)}
  .psf-eyebrow{font-family:var(--ff-body);font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand-text);display:flex;align-items:center;gap:.6rem}
  .psf-eyebrow::before{content:"";counter-increment:none;width:22px;height:3px;flex:none;background:var(--c-accent);border-radius:2px}
  :is(.psf-v--oscura,.psf-v--marca) .psf-eyebrow{color:inherit}
  .psf-btn{border-radius:var(--r-btn);font-weight:700}
  .psf-btn--secondary{background:transparent;color:var(--c-ink);border:1px solid var(--c-ink)}
  /* hero con tarjeta flotante: la fachada de la finca y el aviso 24 h */
  .psf-hv--tarjeta{background:var(--c-brand);color:var(--c-blanco);--c-ink-soft:var(--c-on-brand-soft);--c-brand-text:var(--c-blanco);--c-line:var(--c-line-hero)}
  .psf-hv--tarjeta :is(h1,.psf-eyebrow){color:var(--c-blanco)}
  .psf-hv--tarjeta .psf-hv-texto>p{color:var(--c-on-brand-soft)}
  .psf-hv--tarjeta .psf-btn--primary{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .psf-hv--tarjeta .psf-btn--primary:hover{background:var(--c-accent-hi);color:var(--c-accent-ink)}
  .psf-hv--tarjeta .psf-btn--secondary{color:var(--c-blanco);border-color:var(--c-blanco)}
  .psf-hv--tarjeta .psf-btn--secondary:hover{background:transparent;color:var(--c-blanco);text-decoration:underline;text-underline-offset:.2em}
  .psf-hv--tarjeta .psf-hv-datos span{color:var(--c-on-brand-soft)}
  .psf-hv--tarjeta .psf-hv-datos strong{color:var(--c-blanco)}
  .psf-hv--tarjeta .psf-ico{color:var(--c-accent)}
  .psf-hv--tarjeta .psf-hv-flotante{--c-brand-text:var(--c-brand-text-claro);--c-ink-soft:var(--c-ink-soft-claro)}
  .psf-hv--tarjeta .psf-hv-media img{aspect-ratio:4/5;max-height:600px;box-shadow:var(--sh-card)}
  .psf-hv--tarjeta .psf-hv-media .psf-hv-flotante{border-left:5px solid var(--c-accent);left:calc(var(--sp-5) * -1)}
  .psf-hv-flotante h2{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-soft);font-family:var(--ff-body);font-weight:700;margin-bottom:.35rem}
  .psf-hv-flotante p{margin:0}
  .psf-hv-flotante strong{display:block;font-family:var(--ff-head);font-size:2.4rem;line-height:1;color:var(--c-brand-text);margin-bottom:.3rem}
  .psf-hv-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-2) var(--sp-3)}
  .psf-hv-datos li{display:flex;gap:.6rem;align-items:flex-start}
  .psf-hv-datos strong{font-size:1.15rem;color:var(--c-brand-text)}
  /* selector de síntoma (carta «selector», laboratorio psf-x-selector) */
  .psf-x-selector{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 var(--sp-4);padding:0;list-style:none}
  .psf-x-selector button{font:inherit;font-weight:700;font-size:.95rem;min-height:44px;padding:.55rem 1rem;border:1px solid var(--c-line);border-radius:var(--r-btn);background:var(--c-surface);color:var(--c-ink);cursor:pointer}
  .psf-x-selector button[aria-pressed="true"]{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-blanco)}
  .psf-v-sintomas{border:0;gap:var(--sp-3)}
  @media (min-width:900px){.psf-v-sintomas{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .psf-v-sintomas>*{margin:0;border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--sh-card);border-top:4px solid var(--c-line)}
  .psf-v-sintomas>.psf-x-activo{border-color:var(--c-brand);border-top-color:var(--c-brand);outline:2px solid var(--c-brand);outline-offset:-1px}
  .psf-v-sintomas a{color:var(--c-brand-text)}
  @media (prefers-reduced-motion:no-preference){.psf-v-sintomas>*{transition:border-color var(--tr) var(--ease),outline-color var(--tr) var(--ease)}}
  /* servicios numerados */
  .psf-v-numeradas>li{border-radius:var(--r-card);box-shadow:var(--sh-card)}
  .psf-v-numeradas a{color:var(--c-brand-text);font-weight:700}
  /* comunidades y administradores */
  .psf-v-check img{box-shadow:var(--sh-card)}
  .psf-v-check li::before{border-color:var(--c-brand)}
  /* banda de urgencias en granate */
  .psf-v--marca .psf-btn--secondary{background:var(--c-blanco);color:var(--c-brand);border-color:var(--c-blanco)}
  .psf-v--marca .psf-btn--secondary:hover{background:var(--c-blanco);color:var(--c-brand)}
  .psf-v-aviso h2{font-size:clamp(1.7rem,1.1rem + 1.6vw,2.4rem)}
  /* pasos y zonas */
  .psf-v-pasos>li::before{border-radius:var(--r-btn);font-family:var(--ff-head)}
  .psf-v-zonas li span{border-radius:var(--r-btn);border:1px solid var(--c-line);background:var(--c-surface)}
  .psf-faq-q{font-family:var(--ff-head);font-weight:800}

  /* ── Ajustes de web-diseno (modo corregir, 2026-10-14) ─────────────────── */
  /* datos del hero: cifra y complemento en la misma línea; la coma del texto (R37) queda unida a su frase */
  .psf-hv-datos li>div{line-height:1.3}
  .psf-hv-datos strong{display:inline;line-height:1.3}
  .psf-hv-datos span{display:inline}
  /* aire entre bloques: cierre de diagnóstico, cierre de comunidades y grupos de zonas */
  .psf-v-sintomas+p{margin-top:var(--sp-4);max-width:60ch}
  .psf-v-check ul{margin:var(--sp-3) 0}
  .psf-v-check ul+p{margin-top:var(--sp-4)}
  .psf-v-zonas+h3{margin-top:var(--sp-5)}
  .psf-v-cab+h3{margin-top:var(--sp-4)}
  #barrios-que-cubrimos h3{margin-bottom:var(--sp-2)}
  /* encuadre de las fotos de la home (plan fotográfico del brief A) */
  .psf-hv--tarjeta .psf-hv-media img{--foco:55% 40%}
  .psf-v-check img{--foco:50% 45%;aspect-ratio:3/2}
  /* respuesta al pasar y al tocar */
  .psf-x-selector button:is(:hover,:active){background:var(--c-brand-lo);border-color:var(--c-brand-lo);color:var(--c-blanco)}
  .psf-x-selector button[aria-pressed="true"]:is(:hover,:active){background:var(--c-brand-lo)}
  .psf-f-cuadrado .psf-btn{margin-top:var(--sp-2)}
  .psf-v-numeradas a:active{color:var(--c-ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}


  /* ── Ajustes de web-diseno (modo corregir, vuelta 1 de la crítica, 2026-10-14) ── */
  /* hero en móvil: la fachada arriba, a sangre, con la tarjeta oro montada sobre su borde;
     el granate queda detrás del titular y la llamada sube junto al H1 (conversión) */
  @media (max-width:899px){
    .psf-hv.psf-hv--tarjeta{padding-top:0}
    .psf-hv--tarjeta .psf-hv-grid{gap:var(--sp-5)}
    .psf-hv--tarjeta .psf-hv-media{order:-1;margin-inline:calc(var(--sp-3) * -1)}
    .psf-hv--tarjeta .psf-hv-media img{aspect-ratio:16/9;max-height:none;border-radius:0;box-shadow:none;background:var(--c-surface-2);color:var(--c-ink)}
    .psf-hv--tarjeta .psf-hv-media .psf-hv-flotante{position:absolute;left:auto;right:var(--sp-3);bottom:calc(var(--sp-4) * -1);max-width:16rem;margin:0;padding:.75rem 1rem}
    .psf-hv-flotante strong{display:inline;font-size:1.7rem;margin:0 .35rem 0 0}
    .psf-hv-flotante p{font-size:.9375rem;line-height:1.35}
    .psf-hv--tarjeta .psf-hv-texto{display:flex;flex-direction:column}
    .psf-hv--tarjeta .psf-hv-texto>.psf-hv-acciones{order:1;margin:0 0 var(--sp-3)}
    .psf-hv--tarjeta .psf-hv-texto>p:not(.psf-eyebrow){order:2;font-size:1rem;line-height:1.55}
    .psf-hv--tarjeta .psf-hv-texto>.psf-hv-datos{order:3}
    .psf-hv--tarjeta .psf-hv-texto>nav{order:-1}
  }
  /* migas de las subpáginas (sin marcado canónico: se les da tamaño y área táctil) */
  .psf-hv nav[aria-label="Migas de pan"]{font-size:var(--fs-small);margin-bottom:var(--sp-2);color:var(--c-on-brand-soft)}
  .psf-hv nav[aria-label="Migas de pan"] a{color:var(--c-blanco);display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2em}
  @media (max-width:899px){.psf-hv--tarjeta nav[aria-label="Migas de pan"]{margin-top:var(--sp-3)}}
  /* títulos del pie: sin tracking negativo a tamaño pequeño */
  .psf-footer-title{letter-spacing:.02em}
  /* contacto ct1: el formulario como tarjeta con filete oro, y los datos con el mismo filete */
  .psf-contacto--ct1 .psf-form{background:var(--c-surface);border:1px solid var(--c-line);border-top:4px solid var(--c-accent);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--card-pad)}
  .psf-contacto--ct1 .psf-contact-data>div{border-left:3px solid var(--c-accent);padding-left:var(--sp-2)}
  .psf-field.psf-field--mensaje textarea:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){min-height:5lh;max-height:12lh}
  /* cuadrado: la figura arriba, junto al rótulo, y el pie en dos renglones anchos */
  .psf-v.psf-f-cuadrado .psf-container{align-items:start}
  .psf-f-cuadrado-fig figcaption{flex-direction:column;gap:.2rem}
  @media (min-width:900px){.psf-f-cuadrado-fig{margin-top:var(--sp-1)}}
  /* selector sin JS: los botones no harían nada, se ocultan (las tarjetas siguen visibles) */
  @media (scripting:none){.psf-x-selector{display:none}}
  /* aire entre párrafos de cabecera y tras rejillas (subpáginas y home) */
  .psf-v-cab p+p{margin-top:var(--sp-2)}
  .psf-v .psf-container>:is(ul,ol,div,figure):not(.psf-v-cab)+p{margin-top:var(--sp-4)}
  .psf-v .psf-container>p{max-width:60ch}
  .psf-v .psf-container>p+p{margin-top:var(--sp-2)}
  .psf-v-cab--centro~p{margin-inline:auto}
  .psf-v-aviso :is(p,ul){max-width:58ch}
  .psf-v-aviso p{margin-top:var(--sp-2)}
  .psf-v-aviso ul{margin:var(--sp-1) 0 0;padding-left:1.25rem;list-style:disc}
  .psf-v-aviso li+li{margin-top:.3rem}
  .psf-v-aviso li::marker{color:var(--c-accent)}
  /* el botón de la banda de aviso arriba, a la altura del H2 (en /metalicas la columna de texto mide ~700 px) */
  .psf-v-aviso{align-items:start}
  /* botón secundario en bandas oscuras: el contorno claro de base.css (el secundario del tema es tinta sobre claro) */
  :is(.psf-v--oscura,.psf-hv--sangre) .psf-btn--secondary:not(:is(.psf-card,.psf-form,.psf-v-nivel,.psf-hv-flotante) *){background:transparent;color:var(--c-band-ink);border-color:var(--c-band-ink)}
  :is(.psf-v--oscura,.psf-hv--sangre) .psf-btn--secondary:not(:is(.psf-card,.psf-form,.psf-v-nivel,.psf-hv-flotante) *):is(:hover,:active){background:var(--c-band-ink);color:var(--c-band);border-color:var(--c-band-ink)}
  /* enlaces de texto: respuesta visible al tocar */
  main a:not([class]):active{background-color:color-mix(in oklch,currentColor 14%,transparent)}
  /* tarjetas sin H3 (/mosquiteras: etiqueta en negrita, R37): la negrita hace de rótulo */
  .psf-v-nivel>p:first-child>strong:first-child,.psf-v-lista li>div>p:first-child>strong:first-child{display:block;font-family:var(--ff-head);font-weight:800;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;margin-bottom:.35rem}
  .psf-v-lista li>div>p:first-child>strong:first-child{color:var(--c-ink)}
  .psf-v-lista li>div>p:first-child{margin-top:0}
  /* /reparacion y /metalicas: los H3 de los pasos ya traen su número en el texto (R37); el marcador queda sin cifra */
  :is(#como-la-reparamos,#mantenimiento-del-cierre) .psf-v-pasos>li::before{content:"";width:2.6rem;height:4px;border-radius:2px;top:1.15rem;background:var(--c-accent)}

  /* ── Ajustes de web-diseno (modo corregir, vuelta 2 de la crítica, 2026-10-14) ── */
  /* primario en bandas ciruela (v-aviso de /metalicas): oro como en el cuadrado de la home; el granate no se distinguía del fondo */
  .psf-v--oscura .psf-btn--primary:not(:is(.psf-card,.psf-form,.psf-v-nivel) *){background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .psf-v--oscura .psf-btn--primary:not(:is(.psf-card,.psf-form,.psf-v-nivel) *):is(:hover,:active){background:var(--c-accent-hi);color:var(--c-accent-ink);border-color:var(--c-accent-hi)}
  /* aire entre el H3 y su párrafo en las tarjetas */
  :is(.psf-v-sintomas,.psf-v-fila,.psf-v-pasos) h3{margin-bottom:var(--sp-2)}
  /* H2 en móvil: el tracking negativo juntaba las letras a ~30-40 px */
  @media (max-width:899px){h2{letter-spacing:-.008em}}
  /* FAQ: sin el doble hueco cabecera + fila de la rejilla en una columna */
  .psf-v-dudas>.psf-v-cab{margin-bottom:0}
  .psf-v-dudas{row-gap:var(--sp-3)}
  /* FAQ y contacto sobre el mismo fondo: una sola separación de sección, no dos */
  .psf-v:not(.psf-v--suave,.psf-v--oscura,.psf-v--marca):has(.psf-v-dudas)+.psf-contacto{padding-top:var(--sp-3)}

  /* ── Ajustes de web-diseno (modo corregir, mejoras de la crítica final, 2026-10-15) ── */
  /* 1 · v-check: aire entre párrafos y antes del botón (antes solo h2+p tenía margen) */
  .psf-v-check>div>p+p{margin-top:var(--sp-2)}
  .psf-v-check>div>:is(p,ul)+.psf-btn{margin-top:var(--sp-3)}
  /* 2 · v-check en escritorio: la foto arriba, junto al titular, y acompaña al texto largo al bajar */
  @media (min-width:900px){
    .psf-v-check{align-items:start}
    .psf-v-check>img{margin-top:var(--sp-1)}
  }
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .psf-v-check>img{position:sticky;top:calc(var(--hdr-h, 96px) + var(--sp-3))}
  }
  /* 3 · hero móvil: tarjeta más compacta y montada sobre el borde con menos solape; encuadre por foto */
  @media (max-width:899px){
    .psf-hv--tarjeta .psf-hv-grid{gap:calc(var(--sp-5) + var(--sp-2))}
    .psf-hv--tarjeta .psf-hv-media .psf-hv-flotante{bottom:calc(var(--sp-5) * -1);padding:.55rem .9rem;max-width:15rem}
    .psf-hv-flotante h2{margin-bottom:.15rem}
    .psf-hv-flotante strong{font-size:1.45rem}
    .psf-hv-flotante p{font-size:.875rem;line-height:1.3}
    /* home: el técnico está a la derecha y abajo; la tarjeta pasa a la izquierda */
    .psf-hv--tarjeta .psf-hv-media img[src$="balcon-modernista.jpg"]{--foco:50% 74%}
    .psf-hv--tarjeta .psf-hv-media:has(img[src$="balcon-modernista.jpg"]) .psf-hv-flotante{right:auto;left:var(--sp-3)}
    /* /instalacion: cabeza y manos del técnico por encima de la tarjeta */
    .psf-hv--tarjeta .psf-hv-media img[src$="alicantina-balcon.jpg"]{--foco:50% 42%}
    /* /mosquiteras: la mosquitera y la barandilla; la tarjeta a la izquierda, sobre la pared lisa */
    .psf-hv--tarjeta .psf-hv-media img[src$="balconera-sagrada-familia.jpg"]{--foco:50% 55%}
    .psf-hv--tarjeta .psf-hv-media:has(img[src$="balconera-sagrada-familia.jpg"]) .psf-hv-flotante{right:auto;left:var(--sp-3)}
  }
  /* 5 · /instalacion: H3 de las filas a escala de subtítulo, con aire respecto al párrafo anterior */
  .psf-v-fila h3{font-size:clamp(1.3rem,1.12rem + .55vw,1.55rem);line-height:1.2}
  .psf-v-fila :is(p,ul)+h3{margin-top:var(--sp-4)}

  /* ── Elemento original · psf-f-cuadrado «Todo cuadra» ─────────────────────
     El criptograma de Subirachs de la fachada de la Pasión (filas, columnas y diagonales suman 33)
     como imagen del presupuesto desglosado: cada línea suma y no queda nada fuera. */
  .psf-f-cuadrado .psf-container{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  @media (min-width:900px){.psf-f-cuadrado .psf-container{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
  .psf-f-cuadrado-fig{margin:0;max-width:440px;width:100%}
  .psf-f-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:14px;background:var(--c-band-2);border:1px solid var(--c-accent-line);border-radius:var(--r-card)}
  .psf-f-rejilla span{display:grid;place-items:center;aspect-ratio:1;font-family:var(--ff-head);font-weight:800;font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);color:var(--c-accent);background:var(--c-band);border:1px solid var(--c-accent-line-2);border-radius:4px;font-variant-numeric:tabular-nums}
  .psf-f-rejilla .psf-f-suma{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .psf-f-cuadrado-fig figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:var(--fs-small);color:var(--c-band-ink-soft)}
  .psf-f-cuadrado-fig figcaption b{font-family:var(--ff-head);font-weight:800;color:var(--c-accent);font-size:1.1rem;white-space:nowrap}
  .psf-f-lineas{list-style:none;margin:var(--sp-4) 0;padding:0;border-top:1px solid var(--c-line-oscura)}
  .psf-f-lineas li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--c-line-oscura)}
  .psf-f-lineas li::before{content:"+";font-family:var(--ff-head);font-weight:800;color:var(--c-accent);font-size:1.3rem;line-height:1.2}
  .psf-f-lineas li:last-child::before{content:"=";}
  .psf-f-lineas strong{display:block;color:var(--c-blanco)}
  .psf-f-lineas span{color:var(--c-band-ink-soft)}
  .psf-f-cuadrado .psf-btn--primary{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .psf-f-cuadrado .psf-btn--primary:hover{background:var(--c-accent-hi);color:var(--c-accent-ink)}
  @media (prefers-reduced-motion:no-preference){.psf-f-rejilla span{transition:background-color var(--tr) var(--ease),color var(--tr) var(--ease)}.psf-f-rejilla:hover .psf-f-suma{background:var(--c-accent-hi)}}
}