@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianaspoblenou.es
   Arquetipo T01 Taller · semilla sal=0
   Prefijo de clases: pbn-
   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: 113;
  --c-brand:  #D8E100;
  --c-accent: #0A3320;

  /* 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(0.15 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(0.15 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 (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 113);                /* 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 13.37:1 con la superficie y 13.93:1 con su texto.
     Candidato: accent. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-accent);
  --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.513 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.513 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.873 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.287 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.627 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 (dura) ─────────────────────────────────── */
  --sh-card:5px 5px 0 var(--c-ink);
  --sh-btn:4px 4px 0 var(--c-ink);
  --sh-hover:2px 2px 0 var(--c-ink);

  /* ── RITMO (base 4px · densidad compacta ×0.82) ───────── */
  --w-container:1140px;
  --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.25) ────────────────────────── */
  --ff-head:'Archivo Narrow', system-ui, sans-serif;
  --ff-body:'Source Sans 3', 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;
  --lh-head:1.08; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:7px 13px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:2;
  --h-img-service:98px;
  --h-img-hero:171px;

  /* ── 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(0.15 0 0);
    --c-accent-ink:oklch(1 0 0);
    --c-band-ink:oklch(1 0 0);
    --c-brand-lo-ink:oklch(0.15 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:H2 servicios:S4 ventajas:V3
   proceso:P3 resenas:R2 faq:F3
   zonas:Z2 contacto:CT1 footer:FO1
   etiqueta:numero-texto numeracion:paso 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 */
.pbn-eyebrow{counter-increment:sec;color:var(--c-ink-soft);font-size:var(--fs-small)}
.pbn-eyebrow::before{content:counter(sec,decimal-leading-zero) ' — ';color:var(--c-accent)}

/* Numeración del proceso — variante paso */
.pbn-step{counter-increment:paso}
.pbn-step-num::before{content:'Paso ' counter(paso);font-weight:var(--fw-strong);color:var(--c-brand-text);font-size:var(--fs-small)}
}

/* ══════════════════════════════════════════════════════════════════
   BRIEF B · «Plano del 22@» · tecnico-sobrio + industrial-contemporaneo
   (web-direccion-arte). Tokens de color del generador arriba
   (marca #D8E100 lima · acento #0A3320 verde selva); aquí: fuentes,
   escala, forma, recurso «línea de cota», laboratorio pbn-x-marcador
   (rotulador fluorescente) y elemento original pbn-f-chimeneas.
   El lima solo como rotulador detrás de texto en tinta o como trazo
   sobre el verde; nunca como letra sobre claro.
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Unbounded';src:url('/fonts/titular-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ff-head:'Unbounded', sans-serif;
  --ff-body:'Onest', sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:600;
  --c-surface:   oklch(0.995 0.002 113);
  --c-surface-2: oklch(0.966 0.010 150);
  --c-ink:       oklch(0.225 0.035 155);
  --c-ink-soft:  oklch(0.44 0.03 155);
  --c-band:      var(--c-accent);
  --c-band-ink:  oklch(1 0 0);
  --c-cta:       var(--c-accent);
  --c-cta-ink:   oklch(1 0 0);
  --c-line:      color-mix(in oklch, var(--c-ink) 16%, transparent);
  --fs-hero:clamp(2.2rem, 1.1rem + 3.3vw, 3.7rem);
  --fs-h1:var(--fs-hero);
  --fs-h2:clamp(1.65rem, 1.15rem + 1.45vw, 2.45rem);
  --fs-h3:1.16rem;
  --fs-body:17px; --lh-body:1.65; --fs-small:14.5px;
  --lh-head:1.12; --ls-head:-.025em; --tt-head:none;
  --r-btn:4px; --r-card:4px; --r-img:4px; --r-input:4px;
  --bw-card:1px; --bw-btn:1.5px;
  --sh-card:none; --sh-btn:none; --sh-hover:none;
  --btn-pad:14px 22px; --btn-fw:600; --btn-tt:none; --btn-ls:0;
  --w-container:1200px;
  --sp-section:clamp(64px, 7vw, 116px);
  --card-pad:26px;
}

@layer skin{
  /* ── Tipografía: Unbounded solo en H1, H2 y números; H3 en Onest ── */
  :is(.pbn-hv h1,.pbn-v h2,.pbn-contacto h2){font-family:var(--ff-head);font-weight:700;letter-spacing:-.025em;line-height:1.12}
  /* Corrección (web-diseno, crítica visual final, vuelta 1): base.css pone hyphens:auto en todos los
     h1-h4, y aquí solo se anulaba en el H1 del hero (.pbn-hv--plano h1, más abajo). Los H2 se quedaban
     con el guion automático del navegador y partían palabras largas sin necesidad: «per-sianista»
     (home, #faq-t) y «ho-ras» en «Guardia de urgencias 24 horas» (/reparacion, #urgencias-t). Sin
     partición silábica en H2; overflow-wrap:break-word de base sigue de red para la palabra imposible.
     Corrección (web-diseno, crítica visual final, vuelta 2): se amplía a H1 también. La vuelta 1 solo
     cubrió el H2 y el H1 de .pbn-hv--plano (línea ~291); el H1 del hero .pbn-hv--partido:not(.pbn-hv--plano)
     (instalación, mosquiteras) se quedó con hyphens:auto de base.css. No se manifestaba antes porque
     ningún H1 de esa variante llevaba un <span> con fondo propio; al añadir el marcador pbn-x-marcador
     (hallazgo 1 de la vuelta 1), el guion automático partió «Poblenou» en dos líneas con el marcador lima
     partido en dos cajas (/mosquiteras, 1280 y 390px) — y en /instalacion queda el mismo riesgo latente
     sin manifestarse hoy. Se cierra con una sola regla para H1 y H2 en todas las variantes de hero, en
     vez de ir añadiendo el selector de cada combinación de clases cada vez que aparece el síntoma. */
  :is(h1,h2){hyphens:manual}
  .pbn-v h3,.pbn-contacto h3,.pbn-faq-q{font-family:var(--ff-body);font-weight:600;letter-spacing:0}
  .pbn-v-fila h3{font-family:var(--ff-head);font-size:clamp(1.3rem,1rem + .9vw,1.75rem);letter-spacing:-.02em}

  /* ── RECURSO · línea de cota: etiqueta numerada con una cota de plano (filete con topes) ── */
  .pbn-eyebrow{font-family:var(--ff-body);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-soft);display:flex;align-items:center;gap:.7rem}
  .pbn-eyebrow::before{content:none}
  .pbn-eyebrow::after{content:"";flex:0 0 78px;height:11px;border-inline:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
  .pbn-v-cab--centro .pbn-eyebrow{justify-content:center}
  .pbn-v--oscura .pbn-eyebrow{color:var(--c-brand)}

  /* ── LABORATORIO · pbn-x-marcador (carta «subrayado»): rotulador fluorescente detrás de la palabra clave ── */
  .pbn-x-marcador{background:linear-gradient(100deg,transparent 0 .5%,var(--c-brand) 2% 97%,transparent 99.5%) 0 58%/100% 74% no-repeat;padding:0 .14em;margin:0 -.04em;border-radius:.35em .2em .4em .25em;box-decoration-break:clone;-webkit-box-decoration-break:clone;color:var(--c-ink)}
  .pbn-v--oscura .pbn-x-marcador{color:var(--c-accent)}

  /* ── Botones (b4, con flecha): verde selva sólido; lima sobre el verde ── */
  .pbn-btn--primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
  .pbn-btn--primary:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
  .pbn-btn--secondary{background:transparent;border-color:var(--c-ink);color:var(--c-ink)}
  .pbn-btn--secondary:hover{background:var(--c-brand);border-color:var(--c-ink);color:var(--c-ink)}
  .pbn-v--oscura .pbn-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-accent)}
  .pbn-v--oscura .pbn-btn--primary:hover{background:#fff;border-color:#fff;color:var(--c-accent)}
  /* El botón secundario (b4, color:var(--c-ink) por defecto) quedaba con el texto casi del mismo
     tono que el fondo oscuro de las secciones oscuras/de marca (CTA final de las 5 subpáginas de
     servicio) y del hero --partido sin --plano (instalación, mosquiteras): 1,21:1. base.css ya
     resuelve esto en @layer sections con color:inherit (toma el --c-band-ink/--c-brand-ink de la
     banda), pero @layer skin tiene más prioridad que @layer sections aunque sea menos específico,
     así que la regla general de abajo lo tapaba. Se repite aquí, en skin, para que gane. Va antes
     del bloque --plano de abajo: en las páginas que combinan --partido y --plano (home,
     motorización, persianas-metálicas, reparación) gana el blanco ya fijado allí, sin tocarlo. */
  :is(.pbn-v--oscura,.pbn-v--marca,.pbn-hv--sangre,.pbn-hv--partido) .pbn-btn--secondary{color:inherit;border-color:color-mix(in oklch,currentColor 60%,transparent)}
  :is(.pbn-v--oscura,.pbn-v--marca,.pbn-hv--sangre,.pbn-hv--partido) .pbn-btn--secondary:hover{background:transparent;border-color:currentColor;color:inherit;text-decoration:underline;text-underline-offset:.2em}
  /* Mismo problema, botón primario: en el hero --partido sin --plano (instalación, mosquiteras)
     la section pinta --c-band (base.css @layer sections), un verde muy oscuro casi idéntico a
     --c-accent; la regla general de arriba pone ahí un .pbn-btn--primary con background:
     var(--c-accent) (reposo) o var(--c-ink) (hover): el botón se funde con el fondo de su propia
     sección (1:1 / 1,21:1 medido con Playwright, auditar-responsive.py «estados»), aunque el
     texto en sí siempre sea blanco sobre ese fondo oscuro (nunca bajaba de texto). Se usa el
     mismo token ya probado en --plano (línea de abajo): --c-brand sobre el verde, blanco al pasar
     el ratón. :not(.pbn-hv--plano) para no tocar las páginas que combinan --partido y --plano
     (home, motorización, persianas-metálicas, reparación), que ya resuelven esto por sí solas. */
  .pbn-hv--partido:not(.pbn-hv--plano) .pbn-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-accent)}
  .pbn-hv--partido:not(.pbn-hv--plano) .pbn-btn--primary:hover{background:#fff;border-color:#fff;color:var(--c-accent)}
  /* Mismo problema, el marcador «rotulador» (pbn-x-marcador, línea 197 de arriba): en el hero
     --partido sin --plano (instalación, mosquiteras) la section pinta --c-band, igual que
     --c-accent; la regla general de línea 197 solo cambia el color de texto a --c-ink y deja el
     fondo como gradiente (cubre el 74% central de la línea), así que fuera de esa banda el texto
     queda sobre background-color --c-accent: 1,21:1 medido con Playwright (mínimo 3:1, mismo
     umbral que los botones de arriba). Se reutiliza aquí el mismo token y el mismo fondo sólido
     ya probado en --plano (línea 250 de abajo) en vez de inventar un color nuevo. */
  .pbn-hv--partido:not(.pbn-hv--plano) .pbn-x-marcador{color:var(--c-accent);background:var(--c-brand)}
  /* Un .pbn-btn--call que lleva icono como hijo directo (base.css línea 180: variante de botón,
     no una clase del menú) se centra en varias líneas con icono + etiqueta + teléfono: la flecha
     del estilo b4 (base.css .pbn-b-b4 .pbn-btn::after) añade una caja extra a la derecha que
     descentra ese contenido real 17px. Criterio estructural y general -no de menú-: cualquier
     .pbn-btn--call con icono no necesita la flecha (el icono ya marca la acción); un .pbn-btn--call
     sin icono (texto suelto, p. ej. 404.php) la conserva. No toca la regla general de los demás
     .pbn-btn ni el include. */
  .pbn-btn--call:has(> svg)::after{content:none}

  /* ── HERO partido, sin bloque: foto acotada como un plano ── */
  /* hero como un plano: fondo verde selva con retícula fina, cotas en lima */
  .pbn-hv--plano{width:auto;margin:0;border-radius:0;overflow:visible;display:block;color:#fff;padding-block:clamp(2rem,4.5vw,4rem) clamp(2.5rem,5vw,4.5rem);
    background:linear-gradient(color-mix(in oklch,#fff 6%,transparent) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,color-mix(in oklch,#fff 6%,transparent) 1px,transparent 1px) 0 0/48px 48px,var(--c-accent)}
  .pbn-hv--plano :is(h1,p,li){color:#fff}
  /* La etiqueta numerada (color:var(--c-ink-soft) por defecto) y los datos del hero (span,
     color:var(--c-ink-soft) en base.css) quedaban con texto oscuro sobre el fondo verde selva
     del hero --partido sin --plano (instalación, mosquiteras): 1,83:1. Mismo fondo que --plano
     (ambos pintan --c-band/--c-accent), así que se reutiliza aquí la misma solución, ya probada,
     en vez de un color nuevo. */
  :is(.pbn-hv--plano,.pbn-hv--partido) .pbn-eyebrow{color:var(--c-brand)}
  /* El hero (pbn-hv--plano) pinta su fondo con --c-accent (línea de arriba): la banda del
     rotulador de la regla general es un background-image (gradiente) que solo cubre el 74%
     central de la línea, así que fuera de esa banda el texto (--c-accent) quedaba sobre
     background-color --c-accent, 1.00:1 (un fondo por imagen no cuenta como background-color).
     Aquí se sustituye por un background-color sólido en --c-brand que cubre todo el texto. */
  .pbn-hv--plano .pbn-x-marcador{color:var(--c-accent);background:var(--c-brand)}
  .pbn-hv--plano .pbn-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-accent)}
  .pbn-hv--plano .pbn-btn--primary:hover{background:#fff;border-color:#fff;color:var(--c-accent)}
  .pbn-hv--plano .pbn-btn--secondary{border-color:#fff;color:#fff}
  .pbn-hv--plano .pbn-btn--secondary:hover{background:#fff;color:var(--c-accent)}
  .pbn-hv--plano .pbn-x-cota{color:var(--c-brand)}
  .pbn-hv--plano .pbn-x-cota i{background:var(--c-accent)}
  .pbn-hv--plano .pbn-hv-datos{border-top-color:color-mix(in oklch,#fff 25%,transparent)}
  .pbn-hv--plano .pbn-hv-texto{padding:0}
  /* Sin grid-template-columns explícito aquí, por debajo de 900px el grid usa una sola columna
     «auto» (grid-auto-columns, el valor inicial): auto se mide por el max-content del contenido,
     no por el ancho disponible, así que .pbn-hv-texto y .pbn-hv-media (con aspect-ratio y sin
     ancho propio) podían pedir más sitio del que cabía y desbordar 37px a 320-352px (persianas
     metálicas, reparación). minmax(0,1fr) explícito deja que esa columna se encoja al ancho real. */
  .pbn-hv--plano .pbn-hv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
  @media (min-width:900px){.pbn-hv--plano .pbn-hv-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
  /* base.css hace que .pbn-hv--partido (la section) sea TAMBIÉN un grid de 2 columnas desde
     1000px (.85fr .15fr… en realidad .85fr/1.15fr), pensado para cuando hay un segundo hijo con
     grid-column:1/-1 (la franja de confianza). En instalación y mosquiteras (--partido sin
     --plano) la franja de confianza no está dentro de la section, sino como hermano después de
     </section>: la section solo tiene un hijo (.container.hv-grid), que no ocupa más que la
     primera columna (≈42% del ancho) y deja la segunda vacía. El verdadero reparto texto/foto
     vive en .pbn-hv-grid (de dentro), que así queda apretado en esa franja y revienta (H1 de
     255px de ancho con 1325px de alto, imagen estirada a su proporción: de ahí el «560px/2471px»
     de bloques llenos). --plano ya evita esto poniendo display:block en la section; aquí se hace
     lo mismo solo para --partido sin --plano, sin tocar la variante combinada ni el marcado. */
  .pbn-hv--partido:not(.pbn-hv--plano){display:block}
  /* Una vez la section ya no reparte en 2 columnas (arriba), el reparto real vuelve a estar solo
     en .pbn-hv-grid (base.css, min-width:900px: «1.1fr .9fr» sin minmax(0,…)). Se envuelve aquí
     en minmax(0,…), como ya hace --plano justo arriba, para que una imagen rota o con sus
     atributos width/height no empuje la pista por encima del contenedor. */
  .pbn-hv--partido:not(.pbn-hv--plano) .pbn-hv-grid{grid-template-columns:minmax(0,1fr)}
  @media (min-width:900px){.pbn-hv--partido:not(.pbn-hv--plano) .pbn-hv-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
  .pbn-hv--plano h1{max-width:15ch;hyphens:manual;overflow-wrap:normal}
  .pbn-hv--plano .pbn-hv-texto > p{font-size:1.1rem;max-width:48ch;color:var(--c-band-ink-soft)}
  :is(.pbn-hv--plano,.pbn-hv--partido) .pbn-hv-datos span{color:var(--c-band-ink-soft)}
  .pbn-hv--plano .pbn-hv-media{position:relative;margin:0 46px 46px 0;aspect-ratio:4/5;max-height:560px;height:auto;align-self:center}
  .pbn-hv--plano .pbn-hv-media img{width:100%;height:100%;object-fit:cover;display:block}
  .pbn-hv--plano .pbn-hv-media img{border-radius:var(--r-img);object-position:var(--foco,50% 50%)}
  .pbn-x-cota{position:absolute;color:var(--c-ink-soft);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .pbn-x-cota i{font-style:normal;background:var(--c-surface);padding:0 .5rem;position:relative}
  .pbn-x-cota--v{top:0;bottom:0;right:-34px;width:11px;border-block:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
  .pbn-x-cota--v i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap}
  .pbn-x-cota--h{left:0;right:0;bottom:-34px;height:11px;border-inline:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat;text-align:center;line-height:11px}

  @media (max-width:899px){
    .pbn-hv--plano .pbn-hv-media{margin:0 0 46px 0;max-height:none;aspect-ratio:4/4.4}
    .pbn-x-cota--v{right:10px;top:10px;bottom:10px}
    .pbn-x-cota--v i{background:var(--c-accent);border-radius:2px}
    /* repeat(3,1fr) a secas también reventaba aquí (mismo motivo que arriba): a 320-352px el
       mínimo automático de cada pista (max-content de «cerrando locales del barrio», etc.) no
       cabía en 3 columnas y el hero (.pbn-hv-texto, .pbn-hv-media) se salía de la pantalla 37px
       en persianas-metalicas y reparación. minmax(0,1fr) deja que la pista se encoja. */
    .pbn-hv--plano .pbn-hv-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
    .pbn-hv--plano .pbn-hv-datos strong{font-size:.98rem}
    .pbn-v-nivel .pbn-btn{align-self:stretch}
  }
  .pbn-hv-datos strong{font-family:var(--ff-head);font-size:1.15rem;letter-spacing:-.02em}
  .pbn-hv-datos{border-top:1px solid var(--c-line)}
  .pbn-hv-confianza--oscura{background:var(--c-surface-2);color:var(--c-ink);border-radius:0;box-shadow:none;border-bottom:1px solid var(--c-line)}
  .pbn-hv-confianza--oscura li{color:var(--c-ink)}
  .pbn-hv-confianza--oscura li::before{color:var(--c-ink)}
  /* base.css reparte esta franja con flex-wrap + justify-content:space-between: con 4 módulos,
     si el texto del más largo («Visita para el presupuesto sin coste de desplazamiento» en
     motorización) no deja caber los 4 en una fila a 1280px, caen 3+1 y el cuarto, solo en su
     fila, queda empujado a la izquierda con un hueco del 71% (R40). Con «Pagas al terminar…»
     (home) los 4 sí caben y no se ve el fallo, pero es el mismo componente: se fija en rejilla de
     4 columnas iguales siempre que hay sitio de escritorio, así la fila queda completa entren
     los textos que entren, sin tocar el contenido ni su orden. */
  @media (min-width:900px){.pbn-hv-confianza--oscura{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:normal}}

  /* ── Causas: fichas con filete fino y rótulos de plano ── */
  .pbn-v-causas--rejilla{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--c-line)}
  @media (max-width:899px){.pbn-v-causas--rejilla{grid-template-columns:1fr 1fr}}
  @media (max-width:599px){.pbn-v-causas--rejilla{grid-template-columns:1fr}}
  .pbn-v-causa{border:1px solid var(--c-line);border-top:1px solid var(--c-line);margin:-1px 0 0 -1px;padding:var(--card-pad)}
  .pbn-v-causa dt{color:var(--c-ink-soft);font-size:.74rem;letter-spacing:.12em}
  .pbn-v-causa dd{margin-bottom:.5rem}
  .pbn-v-causa a{color:var(--c-ink);font-weight:600;text-decoration-color:var(--c-brand);text-decoration-thickness:3px;text-underline-offset:.18em}

  /* ── Filas de servicios ── */
  .pbn-v-fila{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,3.5rem)}
  .pbn-v-fila:nth-child(even){grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  @media (max-width:899px){.pbn-v-fila,.pbn-v-fila:nth-child(even){grid-template-columns:1fr}.pbn-v-fila:nth-child(even) > :first-child{order:0}}
  .pbn-v-fila img{border:1px solid var(--c-line);aspect-ratio:3/2}
  .pbn-v-fila p{font-size:1.06rem}
  .pbn-v-fila a{color:var(--c-ink);font-weight:600;text-decoration-color:var(--c-brand);text-decoration-thickness:3px;text-underline-offset:.18em}

  /* ── Locales (cruzada sobre verde) ── */
  .pbn-v--oscura .pbn-v-cruzada{background:transparent;border:1px solid color-mix(in oklch,#fff 22%,transparent);border-radius:var(--r-card)}
  /* base.css pone height:100% en la foto de .pbn-v-cruzada: la fila de la rejilla intenta
     calcular su alto a partir de esa foto (sobre todo mientras la foto real aún no existe,
     Fase 3), y el texto real (más alto que la foto) queda recortado por el overflow:hidden del
     contenedor. Al fijar un alto propio por proporción (igual que .pbn-v-fila), la foto deja de
     intervenir en el cálculo de la fila: la fila crece con el texto real y el CTA queda visible. */
  .pbn-v--oscura .pbn-v-cruzada img{height:auto;aspect-ratio:4/3;align-self:start;min-height:0}

  /* ── Criterio: guiones en lima sobre tinta ── */
  .pbn-v-check li::before{content:"";position:absolute;left:0;top:.72em;width:1.1rem;height:.5rem;background:var(--c-brand);border:1.5px solid var(--c-ink)}

  /* ── Niveles: el central con el rotulador arriba ── */
  .pbn-v-nivel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-card)}
  .pbn-v-nivel--destacado{border:1.5px solid var(--c-ink);box-shadow:inset 0 10px 0 var(--c-brand)}

  /* ── Pasos con número grande ── */
  .pbn-v-pasos--numeros li::before{font-family:var(--ff-head);color:var(--c-ink)}

  /* ── ELEMENTO ORIGINAL · pbn-f-chimeneas: diez chimeneas, diez barrios ── */
  .pbn-f-skyline{display:block;width:100%;height:auto;margin:var(--sp-4) 0 var(--sp-3)}
  .pbn-f-chim path,.pbn-f-chim rect{fill:color-mix(in oklch,var(--c-brand) 16%,transparent);stroke:var(--c-brand);stroke-width:2.5;stroke-linejoin:round}
  .pbn-f-chim--uno path:not(.pbn-f-chim-banda),.pbn-f-chim--uno rect{fill:var(--c-brand)}
  .pbn-f-chim .pbn-f-chim-banda{fill:none;stroke:var(--c-brand);stroke-width:1.5;opacity:.55}
  .pbn-f-chim--uno .pbn-f-chim-banda{stroke:var(--c-accent);opacity:1}
  .pbn-f-chim text,.pbn-f-torre-g text{font-family:var(--ff-head);font-size:20px;font-weight:700;fill:#fff}
  .pbn-f-torre-g path{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5;opacity:.8}
  .pbn-f-suelo{stroke:var(--c-brand);stroke-width:2}
  .pbn-f-chim-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid color-mix(in oklch,#fff 22%,transparent)}
  @media (max-width:899px){.pbn-f-chim-lista{grid-template-columns:1fr 1fr}}
  .pbn-f-chim-lista li{display:flex;gap:.6rem;align-items:baseline;padding:.85rem .8rem .85rem 0;border-bottom:1px solid color-mix(in oklch,#fff 22%,transparent);font-weight:600}
  .pbn-f-chim-lista span{flex:0 0 auto;min-width:2.1em;white-space:nowrap;font-family:var(--ff-head);font-size:.85rem;color:var(--c-brand)}
  .pbn-f-chim-lista li.pbn-f-chim-uno{color:var(--c-accent);background:var(--c-brand);padding-left:.6rem}
  .pbn-f-chim-uno span{color:var(--c-accent)}
  .pbn-f-chim-mas{margin-top:var(--sp-3);color:var(--c-band-ink-soft)}

  /* ── Contacto y pie claro (el lema del logo en verde: el lima no se lee sobre claro) ── */
  .pbn-footer--claro .pbn-logo-texto em{color:var(--c-accent);opacity:1}
  .pbn-contacto{background:var(--c-surface-2)}
  .pbn-contacto .pbn-form{background:var(--c-surface);border:1px solid var(--c-line);border-top:10px solid var(--c-brand);border-radius:var(--r-card);padding:clamp(1.25rem,3vw,2.5rem)}
  .pbn-contacto .pbn-form-submit{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
  .pbn-contacto .pbn-contact-data a{font-family:var(--ff-head);font-size:1.6rem;letter-spacing:-.02em;text-decoration:none}
}

/* ── R25 · móvil horizontal, pantalla baja (max-width:899, max-height:500, landscape):
   el aviso de cookies se apoya sobre la barra fija de contacto. En ese modo, base.css
   compacta la barra genérica a 44px y, con ese mismo supuesto, calcula dónde se apoya
   el aviso (.pbn-cookies{bottom:calc(44px+...)}, @layer state de base.css). Pero el
   sitio usa la variante «píldoras» de esa barra (@layer variants de base.css, el
   modificador doble guion pildoras sobre la clase genérica de esa barra), que mantiene
   sus 52px de alto fijos también en ese modo (esa regla no está dentro de esa media
   query). Resultado: el aviso quedaba 8px dentro de la barra. Se corrige aquí la
   posición del aviso a los 52px reales de la barra —no la altura de la barra, y sin
   tocar base.css—: mayor especificidad (.pbn-cookies.is-visible, dos clases) sobre el
   .pbn-cookies de base.css (una clase), sin !important. ── */
@layer state {
  @media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    .pbn-cookies.is-visible { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  }
}