@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasesparreguera.es
   Arquetipo T08 Linea · semilla sal=0
   Prefijo de clases: esg-
   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: 38;
  --c-brand:  #C2410C;
  --c-accent: #1E3A8A;

  /* Derivados de marca (esquema: complementario) */
  --c-brand-hi:   oklch(from var(--c-brand) calc(l + .10) c h);
  --c-brand-lo:   oklch(from var(--c-brand) calc(l - .12) c h);
  --c-brand-lo-ink: oklch(1 0 0);   /* texto del botón principal en :hover */
  --c-brand-soft: oklch(from var(--c-brand) calc(l + .34) calc(c * .30) h);
  --c-brand-ink:  oklch(1 0 0);   /* calculada con WCAG: contrast-color() de Chrome elegía blanco a 4,42:1 sobre naranjas medios */
  --c-accent-ink: oklch(1 0 0);

  /* Superficies (clara) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.968 0.004 var(--h));
  --c-ink:       oklch(0.19 0.02 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.86 .02 38);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.22 0.012 var(--h));
  --c-band-ink:  oklch(1 0 0);
  --c-line:      color-mix(in oklch, var(--c-ink) 12%, transparent);
  --c-focus:     oklch(from var(--c-accent) .62 .19 h);
  --c-error:     oklch(0.55 .19 27);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 5.18:1 con la superficie y 5.18: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.493 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.493 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.633 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.379 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.619 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 (ninguna) ─────────────────────────────────── */
  --sh-card:none;
  --sh-btn:none;
  --sh-hover:none;

  /* ── RITMO (base 4px · densidad aireada ×1.28) ───────── */
  --w-container:1140px;
  --sp-1:5px; --sp-2:10px; --sp-3:15px; --sp-4:26px;
  --sp-5:41px; --sp-6:67px;
  --sp-section:clamp(46px, 5.8vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:15px;
  --card-pad:20px;

  /* ── TIPOGRAFÍA (escala modular ×1.5) ────────────────────────── */
  --ff-head:'Geist', system-ui, sans-serif;
  --ff-body:'Geist', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(45.9px, 4.9vw, 95.3px);
  --fs-h2:clamp(31.9px, 3.2vw, 54.0px);
  --fs-h3:25.0px;
  --fs-body:16.8px;
  --fs-small:10.7px;
  --tt-head:none; --ls-head:-0.025em;
  --lh-head:1.12; --lh-body:1.65;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:10px 20px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:2.5;
  --h-img-service:154px;
  --h-img-hero:266px;

  /* ── 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(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:S1 ventajas:V2
   proceso:P3 resenas:R2 faq:F1
   zonas:Z3 contacto:CT1 footer:FO3
   etiqueta:barra-texto numeracion:01 iconos:Phosphor */

/* 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 barra-texto */
.esg-eyebrow{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-ink-soft);font-size:var(--fs-small)}
.esg-eyebrow::before{content:'';width:28px;height:2px;background:var(--c-accent)}

/* Numeración del proceso — variante 01 */
.esg-step{counter-increment:paso}
.esg-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 B · industrial-contemporaneo · «La Colònia» (persianasesparreguera.es)
   Fuentes del brief, tokens de color y forma, piel, laboratorio esg-x-placa
   y elemento original esg-f-teler. Solo tokens del tema; nada del menú ni del formulario.
   Colores del cliente: principal #C2410C (único acento), acento #1E3A8A (azul de fábrica,
   papel del «grafito»), fondo #FBF2EE (bandas suaves), texto #571D05.
   ═══════════════════════════════════════════════════════════════ */
@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:'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{
  --c-surface:#FFFFFF;
  --c-surface-2:#FBF2EE;           /* fondo del cliente en las bandas suaves */
  --c-ink:#571D05;                 /* texto del cliente (13,3:1 sobre blanco) */
  --c-ink-soft:#6E4A3A;            /* 7,8:1 sobre blanco */
  --c-ink-soft-claro:#6E4A3A;
  --c-band:#1E3A8A;                /* azul del cliente como banda oscura (blanco 10,4:1) */
  --c-band-ink:#FFFFFF;
  --c-band-ink-soft:#DCE3F5;
  --c-brand-text:#9A3412;          /* naranja como letra: 7,1:1 blanco · 6,6:1 crema */
  --c-brand-text-claro:#9A3412;
  --c-brand-text-oscuro:#FDBA8C;   /* sobre el azul: 6,2:1 */
  --c-accent-text:#1E3A8A;
  --c-brand-soft:#FBE3D6;
  --c-line:color-mix(in oklch, #1E3A8A 22%, transparent);
  --c-focus:#E6640C;               /* foco único para fondos claros y la barra superior azul (R24: el tema no redefine el menú): 3,39:1 blanco · 3,07:1 #FBF2EE · 3,05:1 #1E3A8A */
  --c-blanco:#FFFFFF;              /* texto y filetes blancos sobre azul o naranja */
  --c-pasos-texto:#E6EAF6;         /* párrafos de pasos sobre azul: 8,61:1 */
  --c-placa:#F1F3F8; --c-placa-perfo:#AEB6CC; --c-placa-filete:#C9CFDF; --c-placa-texto:#3B4A73;
  --c-focus-oscuro:#FDBA8C;        /* foco sobre azul: 6,20:1 */
  --c-accent-text-oscuro:#FDBA8C;  /* enlaces de texto sobre el azul: 6,20:1 (antes oklch .619 del azul, 2,79:1) */
  --c-focus-marca:#FFFFFF;         /* foco sobre naranja: 5,18:1 */

  --ff-head:'Unbounded', 'Public Sans', sans-serif;
  --ff-body:'Public Sans', sans-serif;
  --fw-head:700; --fw-strong:600;
  --fs-hero:clamp(1.8rem, .9rem + 3.6vw, 3.6rem);
  --fs-h1:clamp(2.1rem, 1rem + 3.5vw, 3.7rem);
  --fs-h2:clamp(1.6rem, 1.15rem + 1.6vw, 2.45rem);
  --fs-h3:1.08rem;
  --fs-body:17px; --lh-body:1.62;
  --fs-small:.84rem;
  --ls-head:-0.02em; --lh-head:1.1;
  /* Forma: recta, filetes de 1 px, sin sombras */
  --r-btn:0px; --r-card:0px; --r-input:0px; --r-img:0px;
  --bw-card:1px; --bw-btn:2px;
  --sh-card:none; --sh-btn:none; --sh-hover:none;
  --btn-pad:16px 24px; --btn-fw:600; --btn-tt:none; --btn-ls:.01em;
  --w-container:1200px;
  --sp-section:clamp(60px, 7vw, 112px);
}

@layer skin{
  body{font-family:var(--ff-body);color:var(--c-ink)}
  :is(h1,h2,h3){font-family:var(--ff-head);font-weight:700;letter-spacing:var(--ls-head);text-wrap:balance;hyphens:manual}
  main :is(h1,h2,h3){color:var(--c-ink)}
  h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
  .esg-v--oscura :is(h2,h3){color:var(--c-blanco)}
  main .esg-v a:not(.esg-btn):not(.esg-v-flecha){color:var(--c-accent-text)}
  .esg-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-blanco)}
  .esg-btn--secondary{color:var(--c-accent-text);border-color:var(--c-accent-text);background:transparent}
  .esg-btn--secondary:hover{background:var(--c-accent-text);color:var(--c-blanco)}
  /* Etiqueta: doble raya naranja + mayúsculas espaciadas */
  .esg-eyebrow{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-brand-text)}
  .esg-eyebrow::before{content:"";width:22px;height:7px;background:none;border-block:2px solid currentColor}
  .esg-v--oscura .esg-eyebrow{color:var(--c-brand-text-oscuro)}
  .esg-v-subrayado{background-image:linear-gradient(transparent 70%, var(--c-brand) 70%, var(--c-brand) 92%, transparent 92%);padding-inline:.04em}

  /* ── Hero partido: texto sobre blanco y la foto sobre un panel del azul de fábrica que llega al borde;
        bloque NARANJA desplazado tras la foto (carta «bloque») ── */
  .esg-hv--partido{background:var(--c-surface);padding-block:clamp(2rem,5vw,4.5rem) clamp(2.5rem,5vw,4.5rem)}
  .esg-hv--partido h1{font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.025em;max-width:15ch}
  .esg-hv--partido .esg-hv-media::before{background:var(--c-brand)}
  .esg-hv--partido .esg-hv-media img{object-position:var(--foco,50% 50%)}
  @media (min-width:900px){
    .esg-hv--partido{background:linear-gradient(90deg,var(--c-surface) 0 50%,var(--c-band) 50% 100%)}
    .esg-hv--partido .esg-hv-grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,6rem)}
  }
  /* ── Servicios: lista 01-05 con filete azul y flecha cuadrada ── */
  .esg-v-lista{border-top:2px solid var(--c-accent-text)}
  .esg-v-lista > li{padding-block:var(--sp-4)}
  .esg-v-lista > li::before{font-family:var(--ff-head);font-size:.9rem;color:var(--c-brand-text)}
  .esg-v-lista h3{font-size:clamp(1.1rem,.95rem + .6vw,1.45rem)}
  .esg-v-lista a.esg-v-flecha{width:48px;height:48px;border:2px solid var(--c-accent-text);color:var(--c-accent-text)}
  .esg-v-lista a.esg-v-flecha:hover{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-blanco)}

  /* ── Banda de urgencias en naranja ── */
  .esg-v-aviso h2{color:var(--c-blanco);font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem)}
  .esg-v--marca .esg-btn--secondary{background:var(--c-band);color:var(--c-blanco);border-color:var(--c-band)}
  .esg-v--marca .esg-btn--secondary:hover{background:var(--c-blanco);color:var(--c-band);border-color:var(--c-blanco);text-decoration:none}

  /* ── Foto + lista: el mismo bloque desplazado (recurso), aquí en azul ── */
  .esg-v-check img{box-shadow:16px 16px 0 var(--c-band);object-position:var(--foco,50% 50%)}
  .esg-v-check{padding-right:16px}
  .esg-v-check li::before{border-color:var(--c-brand)}

  /* ── Pasos sobre azul: cuadrados numerados ── */
  .esg-v-pasos > li::before{border-radius:0;background:var(--c-brand);color:var(--c-blanco);font-family:var(--ff-head);font-size:.95rem}
  .esg-v--oscura .esg-v-pasos > li::after{background:oklch(1 0 0 / .3)}
  .esg-v--oscura .esg-v-pasos p{color:var(--c-pasos-texto)}

  /* ── Niveles de inversión (sin euros, R9) ── */
  .esg-v-nivel{border:1px solid var(--c-line)}
  .esg-v-nivel--destacado{border:2px solid var(--c-band);box-shadow:10px 10px 0 var(--c-brand)}

  /* ── Zonas: rejilla de celdas con borde, sin píldoras ── */
  .esg-v-zonas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:0;border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
  .esg-v-zonas li span{display:flex;border:0;border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);border-radius:0;padding:.7rem 1rem;font-weight:600;min-height:52px}

  .esg-v-dudas .esg-faq-item{border-bottom:1px solid var(--c-line)}
  .esg-v-dudas .esg-faq-q span:first-child{font-family:var(--ff-head);font-size:1rem;letter-spacing:-.01em}
}

/* ═══ Laboratorio · esg-x-placa: los datos del hero como placa de máquina con dos filas de perforaciones de arrastre
   (motivo de la tarjeta del telar; sin remaches, para diferenciarse de pol-f-placa de Olesa) ═══ */
@layer skin{
  .esg-hv-datos.esg-x-placa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--sp-5);padding:0;border:0;
    background-color:var(--c-placa);color:var(--c-band);position:relative;max-width:36rem;border-top:3px solid var(--c-band);
    background-image:radial-gradient(circle at 7px 7px,var(--c-placa-perfo) 2.5px,transparent 3px),radial-gradient(circle at 7px 7px,var(--c-placa-perfo) 2.5px,transparent 3px);
    background-size:14px 14px,14px 14px;background-repeat:repeat-x,repeat-x;background-position:0 2px,0 calc(100% - 2px)}
  .esg-x-placa li{padding:1.25rem 1rem 1.2rem 1.4rem}
  .esg-x-placa li + li{border-left:1px solid var(--c-placa-filete)}
  .esg-x-placa strong{font-family:var(--ff-head);font-size:1.05rem;color:var(--c-band);letter-spacing:-.01em}
  .esg-x-placa span{display:block;margin-top:.2rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-placa-texto)}
  @media (max-width:520px){.esg-x-placa li{padding:.8rem .6rem .75rem .9rem}.esg-x-placa strong{font-size:.86rem}.esg-x-placa span{font-size:.68rem;letter-spacing:.03em}}
}

/* ═══ Elemento original · esg-f-teler «La tarjeta del telar» (carta «checklist»):
   las comprobaciones antes de llamar como una tarjeta perforada de telar Jacquard ═══ */
@layer skin{
  /* raíz: filete azul de fábrica arriba, el mismo de la placa del hero */
  .esg-f-teler{border-top:3px solid var(--c-band)}
  .esg-f-teler-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
  @media (min-width:900px){.esg-f-teler-grid{grid-template-columns:.8fr 1.2fr}.esg-f-teler-grid > .esg-v-cab{position:sticky;top:6rem}}
  .esg-f-teler-tarjeta{list-style:none;margin:0;padding:2.6rem 1.4rem 2.6rem 1.4rem;background:var(--c-blanco);border:1px solid var(--c-band);position:relative;
    counter-reset:teler}
  /* filas de perforaciones de arrastre arriba y abajo, como en la tarjeta del telar */
  .esg-f-teler-tarjeta::before,.esg-f-teler-tarjeta::after{content:"";position:absolute;left:1rem;right:1rem;height:10px;
    background:radial-gradient(circle,var(--c-band) 3.2px,transparent 3.8px) 0 0/18px 10px repeat-x}
  .esg-f-teler-tarjeta::before{top:1rem}
  .esg-f-teler-tarjeta::after{bottom:1rem}
  .esg-f-teler-tarjeta > li{counter-increment:teler;display:grid;grid-template-columns:2.6rem 1.8rem minmax(0,1fr);gap:.2rem .9rem;align-items:start;
    padding:1rem 0;border-bottom:1px dashed var(--c-line)}
  .esg-f-teler-tarjeta > li:last-child{border-bottom:0}
  .esg-f-teler-tarjeta > li::before{content:counter(teler,decimal-leading-zero);font-family:var(--ff-head);font-size:.85rem;color:var(--c-brand-text);padding-top:.15rem}
  /* el agujero perforado: lleno si es la pieza que más falla, en anillo si es una comprobación */
  .esg-f-teler-agujero{width:1.15rem;height:1.6rem;border-radius:999px;border:2px solid var(--c-band);margin-top:.1rem}
  .esg-f-teler-agujero--lleno{background:var(--c-brand);border-color:var(--c-brand)}
  .esg-f-teler-tarjeta h3{margin:0;font-size:1rem}
  .esg-f-teler-tarjeta p{grid-column:3;margin:.25rem 0 0;color:var(--c-ink-soft);font-size:.98rem}
  .esg-f-teler-tarjeta p a{font-weight:600}
  .esg-f-teler-cierre{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
  .esg-f-teler-cierre p{margin:0;font-weight:600;max-width:24rem}
}

/* Móvil: la foto del hero arriba, sobre el panel azul a todo el ancho; el H1 y la llamada siguen en la primera pantalla */
@layer skin{
  @media (max-width:899px){
    .esg-hv--partido{padding-top:0}
    .esg-hv--partido .esg-hv-grid{gap:var(--sp-4)}
    .esg-hv--partido .esg-hv-media{order:-1;aspect-ratio:4/3;max-height:none;margin:0 calc(var(--sp-3) * -1);padding:1.1rem 2rem 1.6rem 1.1rem;
      background:var(--c-band);width:auto}
    .esg-hv--partido .esg-hv-media::before{inset:2rem 1rem .6rem 2rem}
  }
}

/* Servicios sobre el azul de fábrica */
@layer skin{
  .esg-v--oscura .esg-v-lista{border-top-color:var(--c-brand)}
  .esg-v--oscura .esg-v-lista a.esg-v-flecha{border-color:var(--c-blanco);color:var(--c-blanco)}
  .esg-v--oscura .esg-v-lista a.esg-v-flecha:is(:hover,:active){background:var(--c-blanco);border-color:var(--c-blanco);color:var(--c-band)}   /* 10,4:1 sobre el azul (antes naranja, 2:1) */
}

/* ═══ Foco visible en las bandas de color (contrato 4; WCAG 1.4.11):
   #C2410C daba 2,00:1 sobre el azul #1E3A8A y 1:1 sobre la banda naranja ═══ */
@layer skin{
  .esg-v--oscura,.esg-footer{--c-focus:var(--c-focus-oscuro)}   /* 6,20:1 sobre #1E3A8A (la barra superior usa el --c-focus global, ≥3:1 sobre el azul) */
  .esg-v--marca{--c-focus:var(--c-focus-marca)}                             /* 5,18:1 sobre #C2410C */
}

/* ═══ Crítica visual de la home, vuelta 1 (2026-10-21) · solo tema, mismo contrato ═══ */
@layer skin{
  /* 2 · Cabeceras de sección: aire entre el h2 y su entradilla (antes 8-10 px a ojo, 0 de margen) */
  :is(.esg-v-cab, .esg-v-aviso, .esg-v-check) h2{margin-bottom:.55em}
  .esg-contacto .esg-head h2{margin-bottom:.45em}
  .esg-v-cab{margin-bottom:clamp(2.25rem,4vw,3.25rem)}
  .esg-v-zonas + p{margin-top:var(--sp-4);color:var(--c-ink-soft)}

  /* 1 · Niveles: la nota baja por debajo del bloque naranja desplazado (10 px) con 26 px de aire;
         la nota se centra bajo la rejilla, como la cabecera centrada de la sección */
  .esg-v-niveles + p{margin:calc(10px + var(--sp-4) + .5rem) auto 0;max-width:46rem;text-align:center}

  /* 3 · Servicios a 1280: cada fila como una línea de ficha técnica (nombre | descripción | flecha);
         la descripción a ~66ch y la flecha pegada a ella (antes a ~400-700 px de su texto) */
  @media (min-width:900px){
    .esg-v-lista > li{align-items:start}
    .esg-v-lista > li::before{padding-top:.3rem}
    .esg-v-lista > li > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,62ch);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
    .esg-v-lista > li > div > h3{grid-row:1 / span 3;padding-top:.15rem}
    .esg-v-lista > li > div > p{grid-column:2}
    .esg-v-lista > li > div > p:first-of-type{margin-top:0}
  }

  /* 4 · Telar en móvil: número y agujero en una fila sobre el h3; el texto toma todo el ancho de la tarjeta */
  @media (max-width:599px){
    .esg-f-teler-tarjeta{padding:2.4rem 1rem}
    .esg-f-teler-tarjeta > li{grid-template-columns:auto auto minmax(0,1fr);gap:.35rem .6rem;align-items:center}
    .esg-f-teler-tarjeta > li > h3,.esg-f-teler-tarjeta p{grid-column:1 / -1}
    .esg-f-teler-agujero{width:1.6rem;height:1rem;margin-top:0}
  }

  /* 5 · Contacto ct4: los datos como «ficha» azul perforada (el motivo del telar), fija al bajar junto al formulario;
         columna de datos más estrecha y formulario más ancho. No cambia el formulario (R26) */
  .esg-contacto--ct4 .esg-contact-data{--c-focus:var(--c-focus-oscuro);background:var(--c-band);color:var(--c-blanco);position:relative;
    padding:2.6rem clamp(1.25rem,3vw,2rem) 2.4rem;border-left:6px solid var(--c-brand)}
  .esg-contacto--ct4 .esg-contact-data::before,.esg-contacto--ct4 .esg-contact-data::after{content:"";position:absolute;left:1rem;right:1rem;height:10px;
    background:radial-gradient(circle,var(--c-surface-2) 3.2px,transparent 3.8px) 0 0/18px 10px repeat-x}
  .esg-contacto--ct4 .esg-contact-data::before{top:.9rem}
  .esg-contacto--ct4 .esg-contact-data::after{bottom:.9rem}
  .esg-contacto--ct4 .esg-contact-data h3{color:var(--c-brand-text-oscuro);font-family:var(--ff-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .4rem}
  .esg-contacto--ct4 .esg-contact-data p{margin:0}
  .esg-contacto--ct4 .esg-contact-data a{color:var(--c-blanco);font-family:var(--ff-head);font-weight:700;font-size:clamp(1.45rem,1rem + 1.3vw,2rem);letter-spacing:-.01em;
    text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-color:var(--c-brand)}
  @media (max-width:899px){.esg-contacto--ct4 .esg-contact-data{margin-bottom:var(--sp-5)}}
  @media (min-width:900px){
    .esg-contacto--ct4 .esg-contact-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
    /* la ficha llega hasta el pie del formulario: debajo del teléfono, la trama de perforaciones de la tarjeta del telar */
    .esg-contacto--ct4 .esg-contact-data{align-self:stretch;min-height:100%}
    .esg-contacto--ct4 .esg-contact-data::after{top:10.5rem;bottom:1.2rem;height:auto;
      background:radial-gradient(circle,color-mix(in oklch, var(--c-surface-2) 24%, transparent) 3.2px,transparent 3.8px) 0 0/18px 18px repeat}
  }

  /* 7 · Hero en móvil: foto 16:10 (antes 4:3) y huecos más cortos, para acercar la llamada a la primera pantalla */
  @media (max-width:899px){
    .esg-hv--partido .esg-hv-media{aspect-ratio:16/10;padding:1rem 1.8rem 1.4rem 1rem}
    .esg-hv--partido .esg-hv-grid{gap:var(--sp-3)}
    .esg-hv--partido .esg-hv-texto > p:not(.esg-eyebrow){font-size:1.0625rem;line-height:1.55}
    .esg-hv--partido .esg-hv-acciones{margin-top:var(--sp-3)}
  }
}

/* ═══ Subpáginas (2026-10-22) · lista consolidada de los constructores y retoques de la crítica v2 · solo tema ═══ */
@layer skin{
  /* 1 · Enlaces de texto en la banda naranja: blanco subrayado (5,18:1 sobre #C2410C; antes azul a 2,00:1) */
  main .esg-v--marca a:not(.esg-btn):not(.esg-v-flecha){color:var(--c-blanco);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
  main .esg-v--marca a:not(.esg-btn):not(.esg-v-flecha):hover{text-decoration-thickness:2px}

  /* 2 · Doble numeración: en estas cuatro páginas el H3 del texto ya trae «1.»…«4.» (R37: el texto no se toca),
         así que el paso pierde el cuadrado con el contador y se marca con un filete naranja arriba */
  :root:has(link[rel="canonical"]:is([href$="/instalacion"],[href$="/motorizacion"],[href$="/mosquiteras"],[href$="/persianas-metalicas"])) .esg-v-pasos > li{padding-top:1.4rem}
  :root:has(link[rel="canonical"]:is([href$="/instalacion"],[href$="/motorizacion"],[href$="/mosquiteras"],[href$="/persianas-metalicas"])) .esg-v-pasos > li::before{content:none}
  :root:has(link[rel="canonical"]:is([href$="/instalacion"],[href$="/motorizacion"],[href$="/mosquiteras"],[href$="/persianas-metalicas"])) .esg-v-pasos > li::after{display:block;top:0;left:0;right:0;height:3px;background:var(--c-brand)}
  /*     #piezas (/reparacion): los H3 traen «01 ·»: fuera el contador de la lista y su columna */
  #piezas .esg-v-lista > li{grid-template-columns:minmax(0,1fr) auto}
  #piezas .esg-v-lista > li::before{content:none}

  /* 3 · Prosa de las subpáginas: viñetas cuadradas naranjas y aire entre párrafos, listas y títulos */
  main :is(.esg-prose,.esg-card) ul:not([class]){list-style:square;padding-left:1.2rem;display:grid;gap:.4rem}
  main :is(.esg-prose,.esg-card) ul:not([class]) > li::marker{color:var(--c-brand)}
  main :is(.esg-prose,.esg-card,.esg-v-cab,.esg-v-check > div,.esg-v-sintomas > *) > :is(p,ul,ol) + :is(p,ul,ol){margin-top:.85em}
  main :is(.esg-card,.esg-v-sintomas > *) > h3 + :is(p,ul,ol){margin-top:.5em}
  main .esg-v-check li > h3 + p{margin-top:.3rem}
  /* 11 · v-check: la lista se separa del párrafo de encima y del de debajo (antes ~5 px a 1280) */
  main .esg-v-check > div > :is(p,h2) + ul,main .esg-v-check > div > ul + p{margin-top:var(--sp-4)}

  /* 4 · Migas de pan (van sin clase: se visten por su nav con aria-label); «Inicio» con 44 px de alto pulsable */
  nav[aria-label="Migas de pan"]{font-size:var(--fs-small);color:var(--c-ink-soft)}
  nav[aria-label="Migas de pan"] > p{display:flex;flex-wrap:wrap;align-items:center;column-gap:.55rem;row-gap:0}
  nav[aria-label="Migas de pan"] a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;margin:0 -.2rem;color:var(--c-accent-text);font-weight:600;text-underline-offset:.22em}
  nav[aria-label="Migas de pan"] [aria-hidden="true"]{color:var(--c-brand-text)}
  nav[aria-label="Migas de pan"] [aria-current="page"]{color:var(--c-ink)}
  main > nav[aria-label="Migas de pan"]{padding-block:.7rem .2rem}
  .esg-hv-texto > nav[aria-label="Migas de pan"]{margin:-.4rem 0 .6rem}

  /* 5 · v-sintomas sobre bandas de color: celdas transparentes con filete claro (antes celda blanca con texto blanco) */
  :is(.esg-v--oscura,.esg-v--marca) .esg-v-sintomas,:is(.esg-v--oscura,.esg-v--marca) .esg-v-sintomas > *{border-color:oklch(1 0 0 / .22)}
  :is(.esg-v--oscura,.esg-v--marca) .esg-v-sintomas > *{background:transparent;color:inherit}

  /* 6 · Placa del hero con cuatro distintivos: 2 × 2 con filetes en cruz */
  .esg-hv-datos.esg-x-placa:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .esg-x-placa:has(> li:nth-child(4)) > li:nth-child(odd){border-left:0}
  .esg-x-placa:has(> li:nth-child(4)) > li:nth-child(n+3){border-top:1px solid var(--c-placa-filete)}

  /* 7 · Niveles sin H3 (la etiqueta en <strong>): la etiqueta con la letra de los titulares y la doble raya encima */
  .esg-v-nivel:not(:has(h3))::before{content:"";width:22px;height:7px;border-block:2px solid var(--c-brand)}
  .esg-v-nivel > p:first-child > strong:first-child{font-family:var(--ff-head);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--c-ink)}

  /* 8 · Medida de línea: párrafos de la banda de urgencias y los que siguen a una rejilla o lista a todo el ancho */
  .esg-v-aviso p{max-width:68ch}
  :is(.esg-v-sintomas,.esg-v-lista) ~ p{max-width:68ch}
  .esg-v-sintomas + p,.esg-v-lista + p{margin-top:var(--sp-4)}
  :is(.esg-v-sintomas,.esg-v-lista) ~ p + p{margin-top:.85em}

  /* 9 · Aviso de cookies más bajo (95 → 77 px a 1280): menos relleno y botón de 44 px; el aviso deja libre la llamada del hero */
  .esg-cookies{padding-block:.5rem}
  .esg-cookies p{line-height:1.4}
  .esg-cookies .esg-btn{flex:none;min-height:44px;padding-block:.45rem}

  /* 9-10 · Hero de las subpáginas (con migas): menos aire arriba y H1 algo menor, porque sus H1 son más largos que el de la home;
           la llamada entra en la primera pantalla a 1280×800 y en móvil */
  main:has(nav[aria-label="Migas de pan"]) .esg-hv--partido{padding-top:clamp(1rem,2.4vw,2rem)}
  main:has(nav[aria-label="Migas de pan"]) .esg-hv--partido h1{font-size:clamp(1.8rem,.9rem + 2.9vw,3.1rem);max-width:17ch}
  @media (max-width:899px){
    main:has(nav[aria-label="Migas de pan"]) .esg-hv--partido .esg-hv-media{aspect-ratio:2/1}
  }

  /* 11 · Ficha azul de contacto a 1280: trama a filas enteras (round), más clara, y fila de perforaciones de cierre como en móvil */
  @media (min-width:900px){
    .esg-contacto--ct4 .esg-contact-data::after{top:10.5rem;bottom:.9rem;padding-bottom:30px;
      background:radial-gradient(circle,var(--c-surface-2) 3.2px,transparent 3.8px) 0 100%/18px 10px repeat-x border-box,
                 radial-gradient(circle,color-mix(in oklch, var(--c-surface-2) 18%, transparent) 2.6px,transparent 3.2px) 0 0/22px 22px round content-box;
      background-clip:border-box,content-box}
  }
}

/* R40 · Bloques llenos: sin huecos en la última fila */
@layer skin{
  .esg-v-zonas{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
  @media (min-width:600px){.esg-v-zonas{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:900px){.esg-v-zonas{grid-template-columns:repeat(4,minmax(0,1fr))}
    .esg-v-zonas:has(> :nth-child(15):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}
  .esg-badges > li{flex:1 1 auto;text-align:center}
  @media (min-width:900px){
    /* título y textos apilados en una sola columna: la ficha no queda a medias */
    .esg-v-lista > li > div{display:block}
    .esg-v-lista > li > div > p{max-width:62ch}
    .esg-v-lista > li > div > h3{padding-top:0}
    .esg-v-sintomas:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  }
}