@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasvic.cat
   Arquetipo T05 Guardia · 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: 261;
  --c-brand:  #101F3A;
  --c-accent: #E7C27D;

  /* Derivados de marca (esquema: analogo) */
  --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 261);                /* 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 16.42:1 con la superficie y 16.42: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.142 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.142 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.582 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.511 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.831 c h);

  /* ── GEOMETRÍA (micro) ───────────────────────────── */
  --r-btn:3px; --r-card:4px; --r-input:3px; --r-img:3px;
  --bw-card:1px; --bw-btn:1px; --bw-line:1px;

  /* ── SOMBRAS (aro) ─────────────────────────────────── */
  --sh-card:0 0 0 1px var(--c-line);
  --sh-btn:none;
  --sh-hover:0 0 0 3px oklch(from var(--c-brand) l c h / .28);

  /* ── RITMO (base 4px · densidad compacta ×0.82) ───────── */
  --w-container:1260px;
  --sp-1:3px; --sp-2:7px; --sp-3:10px; --sp-4:16px;
  --sp-5:26px; --sp-6:43px;
  --sp-section:clamp(30px, 3.7vw, 66px);
  --sp-block:var(--sp-4);
  --sp-gap:10px;
  --card-pad:13px;

  /* ── TIPOGRAFÍA (escala modular ×1.414) ────────────────────────── */
  --ff-head:'Barlow Condensed', system-ui, sans-serif;
  --ff-body:'Barlow', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(39.4px, 4.8vw, 73.5px);
  --fs-h2:clamp(28.8px, 3.1vw, 45.2px);
  --fs-h3:23.4px;
  --fs-body:16.7px;
  --fs-small:11.3px;
  --tt-head:uppercase; --ls-head:0.01em;
  --lh-head:1.05; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:7px 13px;
  --btn-fw:800;
  --btn-tt:uppercase; --btn-ls:0.04em;
  --eyebrow:block;
  --icon-sw:1.75;
  --h-img-service:98px;
  --h-img-hero:171px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.12s;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Fallback para navegadores sin contrast-color(): tinta calculada con luminancia WCAG real */
@supports not (color: contrast-color(red)){
  :root{
    --c-brand-ink:oklch(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: tile / shell / action
   ────────────────────────────────────────────────────────────────── */
/* hero:H6 servicios:S2 ventajas:V3
   proceso:P3 resenas:R4 faq:F2
   zonas:Z3 contacto:CT2 footer:FO1
   etiqueta:texto numeracion:1 iconos:Lucide */

/* Etiqueta y numeración en @layer variants: así las reglas de contraste de
   base.css (fondos de banda, @layer state) pueden ajustarlas. */
@layer variants {
/* Etiqueta de sección — variante texto */
.pvi-eyebrow{color:var(--c-brand-text);font-weight:var(--fw-strong);font-size:var(--fs-small)}

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

/* ═══════════════════════════════════════════════════════════════
   Propuesta B · «Sota els porxos» · comercial-atrevido con la paleta de clasico-premium
   (web-direccion-arte). Fuentes del brief, papeles del color, forma rotunda (radio 0),
   recurso «bloque dorado», carta «duotono» y elemento original pvi-f-porxos.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Red Hat Display';src:url('/fonts/titular-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --ff-head:'Red Hat Display',system-ui,sans-serif; --ff-body:'Public Sans',system-ui,sans-serif;
  --fw-head:900; --fw-body:400; --fw-strong:600; --btn-fw:600;
  --foco:50% 50%;   /* encuadre por defecto de las fotos (base.css lo consume; cada <img> puede fijar el suyo con style="--foco:…") */
  /* Papeles: marfil de fondo, marino de marca protagonista, dorado arena para cifras y bloques */
  --c-surface:#FAF6EE; --c-surface-2:#F1E9D8; --c-ink:#0F1B2E; --c-ink-soft:#4B5468; --c-ink-soft-claro:#4B5468;
  --c-band:#0B1628; --c-band-ink:#FAF6EE; --c-band-ink-soft:#C9CFDB;
  --c-line:color-mix(in oklch,#0F1B2E 16%,transparent);
  --c-brand-text:#101F3A; --c-brand-text-claro:#101F3A; --c-brand-text-oscuro:#E7C27D;
  --c-accent-text:#6E5220; --c-accent-text-oscuro:#E7C27D;
  --c-cta:#101F3A; --c-cta-ink:#FFFFFF;
  /* Forma rotunda: radio 0 en todo, bordes de 2 px, sin sombras */
  --r-btn:0px; --r-card:0px; --r-input:0px; --r-img:0px;
  --bw-card:2px; --bw-btn:2px; --sh-card:none; --sh-hover:none; --sh-btn:none;
  --w-container:1200px; --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px; --sp-5:40px; --sp-6:64px;
  --sp-section:clamp(64px,8vw,120px); --card-pad:clamp(20px,2.2vw,30px); --sp-gap:18px;
  /* Tipografía: titular enorme, compacto */
  --fs-hero:clamp(3rem,1.1rem + 6.2vw,6rem); --fs-h1:var(--fs-hero); --fs-h2:clamp(2rem,1.2rem + 2.6vw,3.4rem); --fs-h3:1.3rem;
  --fs-body:17.5px; --fs-small:.86rem; --tt-head:none; --ls-head:-.035em; --lh-head:.98; --lh-body:1.62;
  --btn-pad:16px 26px; --btn-tt:uppercase; --btn-ls:.07em;
  --icon-sw:2.5;
  --oro:#E7C27D; --c-blanco:#FFFFFF; --c-cifras-linea:color-mix(in oklch,#FFFFFF 18%,transparent);
}
@layer skin{
  body{background:var(--c-surface)}
  :is(h1,h2){letter-spacing:var(--ls-head);line-height:var(--lh-head)}
  h3{font-family:var(--ff-head);letter-spacing:-.015em;font-weight:900}
  .pvi-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:.76rem;color:var(--c-accent-text)}
  .pvi-v--oscura .pvi-eyebrow,.pvi-v--marca .pvi-eyebrow{color:var(--oro)}
  /* Tarjetas marfil de «niveles» dentro de la banda marino: su texto heredaba el blanco de la banda (1.08:1) */
  :is(.pvi-v--oscura,.pvi-v--marca) .pvi-v-nivel{color:var(--c-ink)}
  /* Recurso: el bloque dorado detrás de la palabra clave */
  .pvi-v-destacada{background:linear-gradient(var(--oro),var(--oro)) 0 72%/100% .9em no-repeat;color:var(--c-brand);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  /* Botones rectos en mayúsculas */
  .pvi-btn{border-width:2px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.9rem}
  .pvi-btn--primary{background:var(--c-brand);color:var(--c-cta-ink);border-color:var(--c-brand)}
  .pvi-btn--primary:hover{background:var(--c-band);border-color:var(--c-band)}
  .pvi-btn--secondary{background:transparent;color:var(--c-brand);border-color:var(--c-brand)}
  .pvi-btn--secondary:hover{background:var(--c-brand);color:var(--c-cta-ink)}
  /* Hero gigante: titular a todo el ancho y la plaza porticada en panorámica */
  .pvi-hv--gigante{padding-block:clamp(2.2rem,4.5vw,4rem) clamp(2.5rem,5vw,4.5rem)}
  .pvi-hv--gigante h1{font-weight:900;max-width:15ch;color:var(--c-brand)}
  .pvi-hv--gigante .pvi-hv-media{aspect-ratio:2.6/1;border-bottom:8px solid var(--oro)}
  .pvi-hv--gigante .pvi-hv-pie{margin-top:var(--sp-5)}
  .pvi-hv--gigante .pvi-eyebrow{margin-bottom:var(--sp-3)}
  /* Cifras sobre marino: números dorados */
  .pvi-v-cifras strong{font-weight:900;color:var(--oro);letter-spacing:-.03em;font-size:clamp(2.6rem,1.4rem + 3.6vw,4.4rem)}
  .pvi-v-cifras span{font-size:.92rem;opacity:1;color:var(--c-band-ink-soft)}
  .pvi-v-cifras>li{border-left:2px solid var(--c-cifras-linea);text-align:left;padding-left:var(--sp-4)}
  /* Pasos: cuadrados marinos con número dorado */
  .pvi-v-pasos>li::before{border-radius:0;background:var(--c-brand);color:var(--oro);font-family:var(--ff-head);font-weight:900;font-size:1.3rem;width:3rem;height:3rem}
  .pvi-v-pasos>li::after{height:2px;background:var(--c-brand);top:1.5rem;left:3.6rem}
  /* Galería «en imágenes» en duotono (carta duotono); la primera, en color */
  .pvi-v-galeria{gap:6px}
  .pvi-v-galeria figcaption{font-weight:600;color:var(--c-ink)}
  /* Banda dorada de urgencias */
  .pvi-v--oro{background:var(--oro);color:var(--c-brand)}
  .pvi-v--oro :is(h2,p){color:var(--c-brand)}
  .pvi-v--oro .pvi-btn--secondary{background:var(--c-brand);color:var(--c-cta-ink);border-color:var(--c-brand)}
  .pvi-v--oro .pvi-btn--secondary:hover{background:var(--c-band)}
  .pvi-v-aviso h2{font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem)}
  /* Lista de verificación: cuadrado dorado con borde marino */
  .pvi-v-check li::before{transform:none;border:2px solid var(--c-brand);background:var(--oro);width:.8rem;height:.8rem;top:.45em}
  .pvi-v-check img{border-left:8px solid var(--oro)}
  /* Zonas como rótulos de comercio */
  .pvi-v-zonas li a,.pvi-v-zonas li span{border-radius:0;border:2px solid var(--c-brand);background:var(--c-surface);font-weight:600}
  .pvi-faq-item{border-bottom:2px solid var(--c-brand)}
  .pvi-v-dudas .pvi-v-cab h2{color:var(--c-brand)}
}

/* Elemento original · pvi-f-porxos «Sota els porxos»: los cinco servicios bajo los arcos de la Plaça Major de Vic */
@layer skin{
  .pvi-f-porxos{background:var(--c-surface)}
  .pvi-f-porxos-fila{list-style:none;margin:0;padding:0 10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    background:var(--c-brand);border-top:22px solid var(--c-brand);border-bottom:8px solid var(--oro);box-shadow:inset 0 3px 0 var(--oro)}
  .pvi-f-porxo{padding:0 10px;display:flex}
  .pvi-f-porxo-boca{position:relative;flex:1;background:var(--c-surface);padding:5.6rem var(--sp-4) var(--sp-5);
    border-top-left-radius:50% 7rem;border-top-right-radius:50% 7rem;display:flex;flex-direction:column;gap:.55rem}
  /* clave del arco */
  .pvi-f-porxo-boca::before{content:"";position:absolute;top:-2px;left:50%;width:22px;height:16px;transform:translateX(-50%);
    background:var(--oro);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}
  .pvi-f-porxo-num{position:absolute;top:2.6rem;left:0;right:0;text-align:center;font-family:var(--ff-head);font-weight:900;font-size:1.05rem;
    color:var(--c-accent-text);letter-spacing:.06em}
  .pvi-f-porxo h3{margin:0;font-size:1.3rem;line-height:1.1}
  .pvi-f-porxo h3 a{color:var(--c-brand);text-decoration:none}
  .pvi-f-porxo h3 a::after{content:"";position:absolute;inset:0}
  .pvi-f-porxo-boca:focus-within{outline:3px solid var(--c-focus);outline-offset:-6px}
  .pvi-f-porxo p{margin:0;font-size:.95rem;color:var(--c-ink-soft)}
  .pvi-f-porxo-ir{margin-top:auto;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-brand);
    border-top:2px solid var(--c-brand);padding-top:.6rem}
  .pvi-f-porxo-boca:hover{background:var(--c-blanco)}
  .pvi-f-porxo-boca:hover .pvi-f-porxo-ir{color:var(--c-accent-text)}
  .pvi-f-porxos-pie{margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--c-ink-soft)}
  @media (max-width:1023px){.pvi-f-porxos-fila{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;padding-top:0}.pvi-f-porxo:last-child{grid-column:1/-1}}
  @media (max-width:599px){.pvi-f-porxos-fila{grid-template-columns:1fr}
    .pvi-f-porxo-boca{border-top-left-radius:50% 5rem;border-top-right-radius:50% 5rem;padding-top:4.2rem}
    .pvi-f-porxo-num{top:1.8rem}}
}

/* web-diseno · aplicación de la propuesta B (2026-10-07)
   1) El titular no parte palabras a partir de 600 px y el bloque dorado no pisa la línea de arriba.
   2) Subpáginas: hero gigante con el H1 de servicio, más largo (pvi-hv--sub).
   3) Subpáginas: arquería «Otros servicios» con 4 arcos (pvi-f-porxos--otros), sin el servicio actual. */
@layer skin{
  .pvi-hv h1{line-height:1.02}
  .pvi-hv--sub{--fs-hero:clamp(2.4rem,1.1rem + 4.6vw,4.75rem)}
  .pvi-hv--sub h1{max-width:19ch;hyphens:manual}
  .pvi-hv--sub .pvi-hv-media{aspect-ratio:3/1}
  .pvi-f-porxos--otros .pvi-f-porxos-fila{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:1023px){
    .pvi-f-porxos--otros .pvi-f-porxos-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pvi-f-porxos--otros .pvi-f-porxo:last-child{grid-column:auto}}
  @media (max-width:599px){.pvi-f-porxos--otros .pvi-f-porxos-fila{grid-template-columns:1fr}}
}

/* web-diseno · modo corregir, crítica visual vuelta 1 (2026-10-07). Solo tema; texto intacto (R37).
   1) Galería: cada figura contiene su pie (rejilla propia, la grande ocupa la altura de las pequeñas).
   2) Cifras: fila de «libro de cuentas» que se reparte por contenido, sin partir palabras.
   3) Hero: llamadas justo bajo el H1 y menos aire arriba (CTA en la primera pantalla y sobre la banda de cookies).
   4) Contacto ct4: la columna de datos es un pilar marino con la arquería de los porches al pie.
   5) Pie fo2: las columnas se reparten todo el ancho.
   6) Aire entre el H2 y su entradilla. 7) Arcos a 16 px, aviso a 68ch y :active visible. 8) H1 sin cortes. */
@layer skin{
  /* 1 · Galería */
  .pvi-v-galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-3)}
  .pvi-v-galeria figure{display:grid;grid-template-rows:minmax(0,1fr) auto;align-content:start;min-width:0}
  .pvi-v-galeria img{height:auto;aspect-ratio:4/3}
  .pvi-v-galeria > :first-child{grid-column:1/-1}
  .pvi-v-galeria > :first-child img{aspect-ratio:16/9}
  .pvi-v-galeria figure > img{grid-row:1;grid-column:1}
  .pvi-v-galeria figcaption{grid-row:2;grid-column:1}
  /* el velo del duotono solo sobre la foto, nunca sobre el pie (contraste) */
  .pvi-v-galeria .pvi-foto--duotono::after{position:static;grid-row:1;grid-column:1;pointer-events:none}
  .pvi-v-galeria figcaption{margin-top:var(--sp-2);padding-left:var(--sp-2);border-left:3px solid var(--oro);font-size:.9rem;line-height:1.35}
  @media (min-width:900px){
    .pvi-v-galeria{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}
    .pvi-v-galeria > :first-child{grid-column:1;grid-row:1/span 2}
    .pvi-v-galeria > :first-child img{aspect-ratio:auto;height:0;min-height:100%}
  }

  /* 2 · Cifras */
  .pvi-v-cifras{display:flex;flex-wrap:wrap;gap:var(--sp-4) 0;text-align:left}
  .pvi-v-cifras>li{flex:1 1 auto;padding-inline:var(--sp-4);min-width:0}
  .pvi-v-cifras strong{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.6rem);line-height:1;hyphens:none;overflow-wrap:break-word;white-space:normal}
  .pvi-v-cifras span{width:0;min-width:100%}
  @media (max-width:599px){
    .pvi-v-cifras{flex-direction:column;gap:var(--sp-3)}
    .pvi-v-cifras>li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);align-items:baseline;column-gap:var(--sp-3);padding:var(--sp-2) 0 var(--sp-2) var(--sp-3)}
    .pvi-v-cifras strong{font-size:1.9rem}
    .pvi-v-cifras span{width:auto;min-width:0;margin-top:0}
  }

  /* 3 · Hero */
  .pvi-hv--gigante{padding-block:clamp(1.25rem,2.6vw,2.4rem) clamp(2.5rem,5vw,4.5rem)}
  .pvi-hv--gigante .pvi-hv-pie{margin-top:clamp(1.1rem,2vw,1.75rem);align-items:start}
  .pvi-hv--gigante .pvi-hv-texto{display:flex;flex-direction:column}
  .pvi-hv--gigante .pvi-hv-acciones{order:-1;margin-top:0;margin-bottom:var(--sp-4)}

  /* 4 · Contacto ct4: pilar marino con arquería */
  .pvi-contacto--ct4 .pvi-contact-data{position:relative;background:var(--c-brand);color:var(--c-band-ink);padding:var(--card-pad);padding-bottom:calc(var(--card-pad) + 8.5rem);
    border-bottom:8px solid var(--oro);display:grid;align-content:start;gap:var(--sp-4);margin-bottom:var(--sp-4)}
  .pvi-contacto--ct4 .pvi-contact-data h3{color:var(--oro);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--ff-body);font-weight:600;margin:0 0 var(--sp-1)}
  .pvi-contacto--ct4 .pvi-contact-data p{margin:0;color:var(--c-band-ink)}
  .pvi-contacto--ct4 .pvi-contact-data a{color:var(--c-band-ink);font-family:var(--ff-head);font-weight:900;font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);letter-spacing:-.02em;line-height:1.05;text-decoration-color:var(--oro);text-underline-offset:.15em}
  .pvi-contacto--ct4 .pvi-contact-data a:hover{color:var(--oro)}
  .pvi-contacto--ct4 .pvi-contact-data::after{content:"";position:absolute;left:var(--card-pad);right:var(--card-pad);bottom:0;height:7rem;
    border-top:3px solid var(--oro);
    background:radial-gradient(circle at 48px 54px,var(--c-surface) 0 36px,transparent 36.5px) 0 0/96px 96px space no-repeat,
      linear-gradient(90deg,transparent 12px,var(--c-surface) 12px 84px,transparent 84px) 0 52px/96px calc(100% - 52px) space no-repeat}
  @media (min-width:900px){
    .pvi-contacto--ct4 .pvi-contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
    .pvi-contacto--ct4 .pvi-contact-data{margin-bottom:0;padding-bottom:calc(var(--card-pad) + 14rem)}
    .pvi-contacto--ct4 .pvi-contact-data::after{height:min(52%,22rem)}
  }

  /* 5 · Pie fo2 a todo el ancho */
  @media (min-width:900px){
    .pvi-footer--fo2 .pvi-footer-grid{display:flex;flex-wrap:wrap;column-gap:var(--sp-6)}
    .pvi-footer--fo2 .pvi-footer-grid > *{flex:1 1 160px}
    .pvi-footer--fo2 .pvi-footer-brand{flex-basis:100%;padding-bottom:var(--sp-4);border-bottom:2px solid var(--oro)}
  }

  /* 6 · Aire entre el H2 y su entradilla */
  :is(.pvi-v-cab,.pvi-head) h2{margin-block-end:var(--sp-4)}
  :is(.pvi-v-cab,.pvi-head) h2 + p{margin-top:0}
  .pvi-v-aviso h2 + p{margin-top:var(--sp-3)}
  .pvi-v-check h2{margin-block-end:var(--sp-4)}
  .pvi-v-check > div > :is(p,ul) + :is(p,ul){margin-top:var(--sp-3)}

  /* 7 · Legibilidad y respuesta al tocar */
  .pvi-f-porxo p{font-size:1rem}
  .pvi-v-aviso p{max-width:68ch}
  .pvi-f-porxo-boca:active{background:var(--c-surface-2)}
  .pvi-f-porxo-boca:active .pvi-f-porxo-ir{color:var(--c-accent-text)}
  .pvi-f-porxo h3 a:active{color:var(--c-accent-text)}
  .pvi-logo:active{opacity:.8}
  .pvi-footer a:not([class]):active{text-decoration-line:underline}

  /* 8 · H1 sin partir palabras en ningún ancho */
  .pvi-hv h1{hyphens:manual}
  :is(h2,h3){hyphens:manual}
}

/* web-diseno · vuelta 1 (2026-10-07): las dudas con su cabecera en pilar marino, como el contacto
   (el «porche» enmarca las preguntas); el pilar se queda fijo al bajar en escritorio. */
@layer skin{
  .pvi-v-dudas > .pvi-v-cab{background:var(--c-brand);color:var(--c-band-ink);padding:var(--card-pad);border-bottom:8px solid var(--oro);margin-bottom:0}
  .pvi-v-dudas .pvi-v-cab h2{color:var(--c-band-ink)}
  .pvi-v-dudas .pvi-v-cab p{color:var(--c-band-ink-soft)}
  .pvi-v-dudas .pvi-v-cab .pvi-eyebrow{color:var(--oro)}
}

/* web-diseno · ajustes tras la crítica visual vuelta 2 (2026-10-07). Solo tema; texto y zonas intactos (R37, R38).
   1) Zonas en móvil: rótulos compactos (los 61 nombres siguen visibles; son <span>, no enlaces).
   2) Galería: las figuras pequeñas no se estiran a la altura de la fila; los pies empiezan a la misma altura. */
@layer skin{
  @media (max-width:599px){
    .pvi-v-zonas{gap:4px}
    .pvi-v-zonas li span{min-height:0;padding:.2rem .4rem;font-size:.9rem;line-height:1.2}
  }
  .pvi-v-galeria > figure:not(:first-child){align-self:start}
}

/* web-diseno · modo corregir, subpáginas (2026-10-07). Solo tema; textos intactos (R37).
   1) Miga de pan visible (pvi-migas): primera línea del <main>, sobre el hero de servicio; letra pequeña sobre
      el marfil, separador «/» dorado oscuro hecho con CSS, página actual en marino sin enlace; altura fija (anti-CLS).
   2) Intro sin aside (pvi-intro sin <aside>): desde 900 px, cabecera a la izquierda como un pilar con la clave dorada
      y la prosa a la derecha a ancho de lectura; ya no queda una columna vacía. Con aside, nada cambia. */
@layer skin{
  /* 1 · Miga de pan */
  .pvi-migas{background:var(--c-surface);border-bottom:2px solid var(--c-line)}
  .pvi-migas ol{list-style:none;margin-block:0;margin-inline:auto;padding:.55rem 0;display:flex;flex-wrap:wrap;align-items:center;
    gap:0 .5rem;min-height:2.6rem;font-size:var(--fs-small);line-height:1.4;color:var(--c-ink-soft)}
  .pvi-migas li{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
  .pvi-migas li + li::before{content:"/" / "";color:var(--c-accent-text);font-weight:600}
  .pvi-migas a{color:var(--c-brand);font-weight:600;text-decoration:underline;text-decoration-color:var(--oro);text-decoration-thickness:2px;text-underline-offset:.2em;
    display:inline-block;padding-block:.35rem}
  .pvi-migas a:hover{color:var(--c-accent-text);text-decoration-color:currentColor}
  .pvi-migas a:active{color:var(--c-accent-text)}
  .pvi-migas a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
  .pvi-migas [aria-current="page"]{color:var(--c-brand);font-weight:600}
  .pvi-migas + .pvi-hv--gigante{padding-top:clamp(1rem,2.2vw,2rem)}

  /* 2 · Intro sin aside: cabecera-pilar + prosa a ancho de lectura */
  @media (min-width:900px){
    .pvi-intro:not(:has(aside)) > .pvi-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
    .pvi-intro:not(:has(aside)) .pvi-head{margin:0;padding-top:var(--sp-4);border-top:8px solid var(--oro);
      position:sticky;top:calc(var(--hdr-h, 96px) + var(--sp-4))}
    .pvi-intro:not(:has(aside)) .pvi-head h2{font-size:clamp(2rem,1.1rem + 1.9vw,2.9rem)}
    .pvi-intro:not(:has(aside)) .pvi-intro-grid{display:block}
    .pvi-intro:not(:has(aside)) .pvi-prose{max-width:66ch;padding-left:clamp(1.25rem,2.4vw,2.25rem);border-left:2px solid var(--c-brand)}
  }
}

/* web-diseno · modo corregir, auditorías finales (2026-10-08). Solo tema; texto intacto (R37), aviso y barra sin tocar en el marcado.
   El aviso de cookies no puede tapar el H1 ni la llamada principal en la primera pantalla.
   1) Móvil vertical: aviso compacto (menos aire, botón de 44 px, interlineado corto); mismo texto.
   2) Móvil en horizontal (≤500 px de alto): aviso en una sola fila (texto + botón al lado) y hero de poca altura
      (titular a ancho completo y a menor cuerpo, menos aire, botones de 44 px), para que H1 + CTA queden por encima. */
/* Token sin capa, como el resto de :root: en móvil horizontal la escala de H2 baja con el hero,
   para que el H2 siga por debajo del H1 (jerarquía visual) */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  :root{--fs-h2:clamp(1.45rem,1rem + 1.4vw,1.7rem)}
}
@layer state{
  /* El aviso vive en @layer state (base.css): su piel compacta va en la misma capa; solo aire, interlineado
     y disposición. No cambia su texto, su posición, su JS ni cómo se muestra u oculta. */
  @media (max-width:899px){
    .pvi-cookies{padding-block:var(--sp-2)}
    .pvi-cookies .pvi-container{gap:var(--sp-2) var(--sp-3)}
    .pvi-cookies p{margin:0;line-height:1.35}
    .pvi-cookies .pvi-btn{min-height:44px;padding-block:0}
  }
  @media (max-width:899px) and (max-height:500px) and (orientation:landscape){
    .pvi-cookies .pvi-container{flex-wrap:nowrap}
    .pvi-cookies p{flex:1 1 auto;max-width:none}
    .pvi-cookies .pvi-btn{flex:none;min-height:44px}
  }
}
@layer skin{
  @media (max-width:899px) and (max-height:500px) and (orientation:landscape){
    .pvi-v-aviso h2{font-size:var(--fs-h2)}
    .pvi-hv--gigante, .pvi-hv--gigante.pvi-hv--sub{--fs-hero:clamp(1.6rem,1rem + 2.2vw,2.1rem);padding-top:var(--sp-3)}
    .pvi-hv--gigante h1, .pvi-hv--sub h1{max-width:none}
    .pvi-hv--gigante .pvi-eyebrow{margin-bottom:var(--sp-2)}
    .pvi-hv--gigante .pvi-hv-pie{margin-top:var(--sp-3)}
    .pvi-hv--gigante .pvi-hv-acciones{margin-bottom:var(--sp-3)}
    .pvi-hv--gigante .pvi-hv-acciones .pvi-btn{min-height:44px;padding-block:0}
    .pvi-migas ol{padding-block:.2rem;min-height:2.2rem}
    .pvi-migas + .pvi-hv--gigante{padding-top:var(--sp-3)}
  }
}

/* web-diseno · modo corregir, crítica visual final vuelta 1 (2026-10-08). Solo piel; texto y marcado intactos.
   1) H3 de la prosa separadas del párrafo anterior. 2) H3 de las filas imagen/texto en escala de H3 (por debajo del H2).
   3) Tarjeta lateral de la intro a su altura, sin estirarse con la prosa. 4) Nota final de «niveles» separada de las tarjetas. */
@layer skin{
  .pvi-prose > * + h3{margin-top:var(--sp-4)}
  .pvi-v-fila h3{font-size:clamp(1.4rem,1rem + 1.2vw,2rem);line-height:1.15;margin-bottom:var(--sp-2)}
  @media (min-width:900px){
    .pvi-intro-grid > aside{align-self:start;position:sticky;top:calc(var(--hdr-h, 96px) + var(--sp-4))}
  }
  .pvi-v-niveles + p{margin-top:var(--sp-4)}
}

/* web-diseno · modo corregir, crítica final v3 (2026-10-08). Solo tema; texto intacto (R37).
   Palabras partidas sin guion en los arcos de «Sota els porxos»: base.css pone overflow-wrap:anywhere en p y li,
   que deja encoger las columnas estrechas hasta cortar palabras normales («comandament», «comunidades»).
   En los porxos solo se parte lo que de verdad no cabe, y nunca con guion automático. */
@layer skin{
  .pvi-f-porxo,.pvi-f-porxo p{overflow-wrap:break-word;hyphens:manual}
  /* El arco es una rejilla de una columna, no un flex en fila: cualquier texto que sobre baja debajo del arco
     en vez de quitarle ancho (con flex, el texto añadido estrechaba la boca hasta partir cada palabra) */
  .pvi-f-porxo{display:grid;grid-template-columns:minmax(0,1fr)}
  .pvi-f-porxo-boca{min-width:0}
}