@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasmontgat.es
   Arquetipo T02 Papel · semilla sal=0
   Prefijo de clases: pmg-
   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: 179;
  --c-brand:  #0B6E5F;
  --c-accent: #D9B26F;

  /* Derivados de marca (esquema: triada) */
  --c-brand-hi:   oklch(from var(--c-brand) calc(l + .10) c h);
  --c-brand-lo:   oklch(from var(--c-brand) calc(l - .12) c h);
  --c-brand-lo-ink: oklch(1 0 0);   /* texto del botón principal en :hover */
  --c-brand-soft: oklch(from var(--c-brand) calc(l + .34) calc(c * .30) h);
  --c-brand-ink:  oklch(1 0 0);   /* calculada con WCAG: contrast-color() de Chrome elegía blanco a 4,42:1 sobre naranjas medios */
  --c-accent-ink: oklch(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 179);                /* 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 5.92:1 con la superficie y 6.16: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.423 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.423 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.72 c h);   /* sobre banda y heroes oscuros: L=.72 da 5,6:1 sobre --c-band (antes .623 = 3,86:1) */
  --c-accent-text: oklch(from var(--c-accent) 0.524 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.784 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 editorial ×1.55) ───────── */
  --w-container:1260px;
  --sp-1:6px; --sp-2:12px; --sp-3:19px; --sp-4:31px;
  --sp-5:50px; --sp-6:81px;
  --sp-section:clamp(56px, 7.0vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:19px;
  --card-pad:25px;

  /* ── TIPOGRAFÍA (escala modular ×1.25) ────────────────────────── */
  --ff-head:'Instrument Serif', Georgia, serif;
  --ff-body:'Work Sans', system-ui, sans-serif;
  --fw-head:400; --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.01em;
  --lh-head:1.10; --lh-body:1.75;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:12px 25px;
  --btn-fw:600;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:2.5;
  --h-img-service:186px;
  --h-img-hero:322px;

  /* ── 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: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H4 servicios:S3 ventajas:V2
   proceso:P2 resenas:R1 faq:F2
   zonas:Z1 contacto:CT3 footer:FO3
   etiqueta:texto numeracion:paso iconos:Tabler */

/* 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 */
.pmg-eyebrow{color:var(--c-brand-text);font-weight:var(--fw-strong);font-size:var(--fs-small)}

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

/* ═══════════════════════════════════════════════════════════════
   BRIEF A · editorial-calido «Cartas desde la orilla» · persianasmontgat.es
   Lora (titular, 600 + cursiva 400) / Hanken Grotesk (texto, 400 y 600)
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Lora';src:url('/fonts/lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('/fonts/lora-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Crítica visual v3 (22-10-2026) · la cursiva de marca y Hanken 600 pasan a swap: se ven desde la primera visita.
   Para que el cambio de fuente no mueva nada (CLS), las fuentes de reserva llevan las métricas de Lora y Hanken
   (anchos medidos en Chromium sobre la misma frase: Lora cursiva/Times cursiva 1,120; Lora 600/Times negrita 1,104;
   Hanken 400/Arial 1,003; Hanken 600/Arial negrita 0,944; ascendente 1,01 y 1,00, descendente 0,27 y 0,30). */
@font-face{font-family:'Lora Fallback';src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Liberation Serif Italic'),local('LiberationSerif-Italic');font-weight:400;font-style:italic;size-adjust:112%;ascent-override:90.2%;descent-override:24.1%;line-gap-override:0%}
@font-face{font-family:'Lora Fallback';src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold'),local('LiberationSerif-Bold');font-weight:600;font-style:normal;size-adjust:110.4%;ascent-override:91.5%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Hanken Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');font-weight:400;font-style:normal;size-adjust:100.3%;ascent-override:99.7%;descent-override:29.9%;line-gap-override:0%}
@font-face{font-family:'Hanken Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');font-weight:600;font-style:normal;size-adjust:94.4%;ascent-override:105.9%;descent-override:31.8%;line-gap-override:0%}
:root{
  --ff-head:'Lora','Lora Fallback',Georgia,serif; --ff-body:'Hanken Grotesk','Hanken Fallback',system-ui,sans-serif;
  --fw-head:600; --fw-strong:600;
  /* Papel de arena: el acento del cliente (#D9B26F) aclarado como fondo; tinta verde mar; banda de mar profundo */
  --c-surface:oklch(.977 .014 85); --c-surface-2:oklch(.948 .026 83);
  --c-ink:oklch(.24 .03 185); --c-band:oklch(.30 .05 184); --c-band-ink:oklch(.985 .01 85);
  --c-line:color-mix(in oklch,var(--c-ink) 16%,transparent);
  --fs-hero:clamp(2.75rem,1.5rem + 4.2vw,4.5rem); --fs-h1:clamp(2.6rem,1.6rem + 3.4vw,4rem);
  --fs-h2:clamp(1.85rem,1.2rem + 2vw,2.7rem); --fs-h3:1.3rem; --fs-body:17.5px; --fs-small:14px;
  --lh-head:1.08; --lh-body:1.7; --ls-head:-.012em;
  --r-btn:4px; --r-card:4px; --r-input:2px; --r-img:2px;
  --w-container:1200px;
}
@layer skin{
  .pmg-hv h1,.pmg-v h2{letter-spacing:var(--ls-head)}
  /* Recurso: la cursiva de color (Lora 400 cursiva en verde mar) en titular, citas y pies de foto */
  .pmg-v-cursiva{font-style:italic;font-weight:400;color:var(--c-brand-text)}
  .pmg-v--oscura .pmg-v-cursiva{color:var(--c-accent-text-oscuro)}
  .pmg-eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c-brand-text)}
  .pmg-eyebrow::before{content:"";width:2.2rem;height:2px;background:var(--c-accent)}
  .pmg-btn{border-radius:var(--r-btn);font-weight:600}
  /* Hero revista: filete vertical de arena y pie de foto en cursiva */
  .pmg-hv--revista .pmg-hv-media{border-right:6px solid var(--c-accent);padding-right:var(--sp-3)}
  .pmg-hv-media figcaption,.pmg-pie{font-family:var(--ff-head);font-style:italic;font-weight:400;font-size:1rem;line-height:1.45;color:var(--c-ink-soft);margin-top:.6rem;padding-left:.8rem;border-left:2px solid var(--c-accent)}
  .pmg-hv--revista .pmg-hv-media{display:flex;flex-direction:column}
  .pmg-hv--revista .pmg-hv-media img{flex:1;min-height:0}
  /* Carta «ficha»: los servicios como partes de taller (n.º de orden, etiqueta y borde grueso) */
  .pmg-v-numeradas>li{border:2px solid var(--c-ink);border-radius:var(--r-card);background:var(--c-surface);position:relative;padding-top:calc(var(--card-pad) + .4rem)}
  .pmg-v-numeradas>li::before{content:"Parte n.º 0" counter(v-num);width:auto;height:auto;display:block;border:0;border-bottom:1px dashed var(--c-line);padding-bottom:.55rem;
    font-family:var(--ff-body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c-brand-text)}
  .pmg-v-numeradas>li a{margin-top:auto;font-weight:600;color:var(--c-brand-text)}
  .pmg-v-numeradas h3{font-size:1.45rem}
  /* Cita del técnico sobre mar profundo */
  .pmg-v-cita blockquote{font-style:italic;font-weight:400;font-size:clamp(1.6rem,1rem + 2.4vw,2.6rem)}
  .pmg-v-cita{border-left:6px solid var(--c-accent);padding-left:clamp(1rem,3vw,2.5rem)}
  /* Galería y foto de criterio con pie */
  .pmg-v-galeria figcaption{font-family:var(--ff-head);font-style:italic;font-size:.98rem}
  .pmg-v-check img{border-radius:var(--r-img);box-shadow:14px 14px 0 var(--c-surface-2)}
  .pmg-v-check li::before{border-color:var(--c-brand)}
  .pmg-v-pasos>li::before{background:transparent;color:var(--c-brand-text);border:2px solid var(--c-brand);font-family:var(--ff-head)}
  .pmg-v-zonas li span{border-color:var(--c-ink);border-radius:var(--r-btn);background:var(--c-surface)}
  .pmg-v--marca .pmg-btn--secondary{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-surface)}
  .pmg-v--marca .pmg-btn--secondary:hover{background:var(--c-surface);text-decoration:underline}
}

/* ── Elemento original · pmg-f-marea «La marea del año» ─────────────
   Gráfica de marea (SVG en línea) con la carga de salitre y humedad mes a mes y
   cuatro hitos numerados en HTML: qué le hace la costa a la persiana y qué revisamos. */
@layer skin{
  .pmg-f-marea{background:var(--c-surface);color:var(--c-ink)}
  .pmg-f-marea-graf{margin:0 0 var(--sp-5);color:var(--c-brand)}
  .pmg-f-marea-graf svg{display:block;width:100%;height:auto}
  .pmg-f-marea-graf .mar-area{fill:color-mix(in oklch,var(--c-brand) 14%,transparent)}
  .pmg-f-marea-graf .mar-linea{fill:none;stroke:var(--c-brand);stroke-width:3}
  .pmg-f-marea-graf .mar-base{stroke:var(--c-ink-soft);stroke-width:1.5}
  .pmg-f-marea-graf .mar-mes{font:600 13px var(--ff-body);fill:var(--c-ink-soft);letter-spacing:.1em}
  .pmg-f-marea-graf .mar-hito circle{fill:var(--c-surface);stroke:var(--c-ink);stroke-width:2}
  .pmg-f-marea-graf .mar-hito text{font:600 15px var(--ff-body);fill:var(--c-ink)}
  .pmg-f-marea-graf .mar-pleamar{stroke:var(--c-accent-text);stroke-width:2;stroke-dasharray:4 5}
  .pmg-f-marea-hitos{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4);counter-reset:hito;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
  .pmg-f-marea-hitos>li{counter-increment:hito;border-top:2px solid var(--c-ink);padding-top:var(--sp-3);position:relative}
  .pmg-f-marea-hitos>li::before{content:counter(hito);position:absolute;top:-1rem;left:0;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
    background:var(--c-surface);border:2px solid var(--c-ink);font-weight:600;font-size:.9rem}
  .pmg-f-marea-cuando{display:block;margin-top:.8rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c-brand-text)}
  .pmg-f-marea-hitos h3{margin:.3rem 0 .4rem;font-size:1.3rem}
  .pmg-f-marea-hitos p{margin:0;color:var(--c-ink-soft)}
  .pmg-f-marea-cta{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
  .pmg-f-marea-cta p{margin:0 var(--sp-3) 0 0;font-family:var(--ff-head);font-style:italic;font-size:1.2rem}
}
@layer skin{
  /* Pie de foto de la galería: nunca tapado por la imagen, aunque el texto crezca (R37) */
  .pmg-v-galeria figure{display:flex;flex-direction:column}
  .pmg-v-galeria img{height:auto;flex:1 1 auto;min-height:0}
  .pmg-v-galeria figcaption{flex:none}
}
@layer skin{
  /* Móvil: primero el titular y la llamada; la foto, después y más baja (conversión) */
  @media (max-width:899px){
    .pmg-hv--revista .pmg-hv-media{order:2;aspect-ratio:4/3;max-height:none}
    .pmg-hv--revista{padding-top:var(--sp-4)}
  }
}
@layer skin{
  /* Crítica visual v1 (22-10-2026) · el aviso de cookies no tapa la llamada del hero:
     aviso más compacto (sin tocar su marcado) y menos aire sobre el titular */
  .pmg-hv--revista{padding-top:clamp(1.25rem,3vw,2.5rem)}
  .pmg-hv--revista .pmg-hv-acciones{margin-top:var(--sp-3)}
  @media (min-width:900px){ .pmg-hv--revista .pmg-hv-grid{grid-template-columns:.78fr 1.22fr} }
  /* El titular no parte palabras (con la columna más ancha partía «Mont-gat») */
  .pmg-hv--revista h1{hyphens:manual}
  @media (max-width:899px){
    .pmg-hv--revista{padding-top:var(--sp-3)}
    .pmg-hv--revista .pmg-eyebrow{letter-spacing:.06em;gap:.45rem;font-size:.75rem}
    .pmg-hv--revista .pmg-eyebrow::before{width:1.2rem}
    /* La llamada sube justo bajo el titular (el párrafo no tiene enlaces: el orden del foco no cambia),
       así queda por encima del aviso de cookies en la primera pantalla */
    .pmg-hv--revista .pmg-hv-texto{display:flex;flex-direction:column}
    .pmg-hv--revista .pmg-hv-texto > p:not(.pmg-eyebrow){order:2;margin-top:var(--sp-4)}
    .pmg-hv--revista h1{margin-bottom:0}
    .pmg-hv--revista .pmg-hv-acciones{order:1;margin-top:var(--sp-3)}
  }
  /* :hover del botón secundario sobre fondo claro: se llena de verde mar (5,9:1 con el papel y 6,2:1 con su texto blanco) */
  .pmg-btn--secondary:not(:is(.pmg-v--oscura,.pmg-v--marca,.pmg-hv--sangre,.pmg-section--band,.pmg-footer) *):hover{
    background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
  /* Aire entre el H2 y su párrafo de entrada, y antes del párrafo de cierre de la lista */
  :is(.pmg-v-cab,.pmg-v-check) h2 + p{margin-top:var(--sp-3)}
  .pmg-v-check ul{margin-top:var(--sp-3)}
  .pmg-v-check ul + p{margin-top:var(--sp-4)}
  .pmg-v-aviso h2 + p{margin-top:var(--sp-2)}
  /* Medida del párrafo del aviso */
  .pmg-v-aviso p{max-width:66ch}
}
/* Aviso de cookies más compacto (crítica visual v1): base.css lo declara en @layer state,
   así que su piel va en la misma capa. Solo tamaños y aire; marcado, posición y JS intactos */
@layer state{
  .pmg-cookies{padding-block:var(--sp-2)}
  .pmg-cookies p{line-height:1.45;max-width:none;flex:1 1 30rem}
  .pmg-cookies .pmg-btn{flex:none;min-height:44px;padding-block:0}
  @media (max-width:899px){
    .pmg-cookies{padding-block:var(--sp-1)}
    .pmg-cookies .pmg-container{gap:var(--sp-1) var(--sp-2)}
    .pmg-cookies p{font-size:13px;line-height:1.38;flex-basis:100%}
    .pmg-cookies .pmg-btn{font-size:14px;padding-inline:1rem}
  }
}
@layer skin{
  /* Crítica visual v1, cambio 1 (22-10-2026) · «La orilla» en tinta y la carta en papel:
     banda de tinta (--c-band, oklch(.30 .05 184)) solo detrás de la columna de la foto del hero.
     Baja el parecido con persianassantantoni.es; el texto del hero sigue sobre papel. */
  .pmg-hv--revista .pmg-hv-media .pmg-pie{color:var(--c-band-ink);border-left-color:var(--c-accent);
    background-color:var(--c-band)} /* el mismo tono de la banda: declara el fondo real del pie para el contraste */
  @media (min-width:900px){
    /* La banda acaba en mitad del hueco entre columnas: contenedor centrado + columna .78fr de (.78+1.22) */
    .pmg-hv--revista{
      --hv-cw:min(100% - 2 * var(--sp-3), var(--w-container));
      --hv-banda:calc((100% - var(--hv-cw)) / 2 + (var(--hv-cw) - var(--sp-5)) * .39 + var(--sp-5) / 2);
      background:linear-gradient(90deg,var(--c-band) 0 var(--hv-banda),transparent var(--hv-banda))}
  }
  @media (max-width:899px){
    /* Móvil: la foto va debajo del texto; la banda sale de mitad del hueco y llega al final del hero, a sangre */
    /* La proporción va en la foto y no en su bloque: el pie crece entero con su texto (R37) */
    .pmg-hv--revista .pmg-hv-media{aspect-ratio:auto}
    .pmg-hv--revista .pmg-hv-media img{flex:none;aspect-ratio:4/3;height:auto}
    .pmg-hv--revista .pmg-hv-media::before{content:"";position:absolute;z-index:-1;
      top:calc(var(--sp-5) / -2);bottom:calc(-1 * clamp(2.5rem, 6vw, 5.5rem));
      /* a sangre sin desbordar: del borde de su caja (sin el filete de 6 px) a los bordes del viewport */
      left:calc((100% + 6px - 100vw) / 2);right:calc((100% + 6px - 100vw) / 2 - 6px);background:var(--c-band)}
  }
}
@layer skin{
  /* Crítica visual v2 (22-10-2026) */
  /* Los títulos no parten palabras con guion (partía «ba-rrios», «con-testamos») */
  :is(h2,h3){hyphens:manual}
  /* El teléfono no se parte dentro de los botones: el corte cae antes del número */
  .pmg-tel-num{white-space:nowrap}
  /* Contacto ct4: aire entre bloques de datos y entre la columna de datos y el formulario */
  .pmg-contacto--ct4 .pmg-contact-data > div + div{margin-top:var(--sp-4)}
  .pmg-contacto--ct4 .pmg-contact-data h3{margin-bottom:.35rem}
  @media (max-width:899px){
    .pmg-contacto--ct4 .pmg-contact-data{margin-bottom:var(--sp-5)}
  }
  /* Nota bajo los chips de zonas */
  .pmg-v-zonas + p{margin-top:var(--sp-4)}
  /* Servicios 3+2 sin hueco: rejilla de 6 pistas, las dos últimas tarjetas a media fila */
  @media (min-width:1100px){
    .pmg-v-numeradas:has(> li:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
    .pmg-v-numeradas:has(> li:nth-child(5):last-child) > li{grid-column:span 2}
    .pmg-v-numeradas:has(> li:nth-child(5):last-child) > li:nth-child(n+4){grid-column:span 3}
  }
  /* Marea legible en móvil: la gráfica conserva su forma y crecen los rótulos y los hitos
     (el SVG mide 1200 de ancho; a 360 px se dibuja a ~0,27). Meses alternos para que quepan. */
  @media (max-width:599px){
    .pmg-f-marea-graf svg{overflow:visible;margin-bottom:.4rem}
    .pmg-f-marea-graf .mar-mes{font-size:48px;letter-spacing:0;transform:translateY(20px)}
    .pmg-f-marea-graf .mar-mes:nth-of-type(even){display:none}
    .pmg-f-marea-graf .mar-hito{transform-box:fill-box;transform-origin:center;transform:scale(3)}
    .pmg-f-marea-graf .mar-linea{stroke-width:7}
    .pmg-f-marea-graf .mar-base{stroke-width:4}
    .pmg-f-marea-graf .mar-pleamar{stroke-width:5;stroke-dasharray:12 14}
  }
  @media (min-width:600px) and (max-width:899px){
    .pmg-f-marea-graf .mar-mes{font-size:26px;letter-spacing:0;transform:translateY(8px)}
    .pmg-f-marea-graf svg{overflow:visible}
    .pmg-f-marea-graf .mar-hito{transform-box:fill-box;transform-origin:center;transform:scale(1.7)}
    .pmg-f-marea-graf .mar-linea{stroke-width:5}
  }
}
@layer skin{
  /* Crítica visual v3 (22-10-2026) */
  /* Botones con teléfono: el número baja entero y centrado bajo la frase, nunca en una segunda columna */
  .pmg-btn:has(.pmg-tel-num){flex-wrap:wrap;column-gap:.3em;row-gap:0;text-align:center}
  /* Servicios a 2 columnas (600-1099 px): la 5.ª tarjeta ocupa la fila entera, sin «Mosquiteras» sola a media fila */
  @media (min-width:600px) and (max-width:1099px){
    .pmg-v-numeradas:has(> li:nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}
    .pmg-v-numeradas:has(> li:nth-child(5):last-child) > li:nth-child(5){grid-column:1 / -1}
  }
  /* Marea en móvil: los meses bajan para que el hito 4 no toque «JUL» */
  @media (max-width:599px){
    .pmg-f-marea-graf svg{margin-bottom:1.5rem}
    .pmg-f-marea-graf .mar-mes{transform:translateY(58px)}
  }
}
@layer skin{
  /* Corrección subpáginas (22-10-2026): encargo de web-constructor-pagina sobre
     /reparacion, /instalacion y /motorizacion. Solo CSS; marcado y textos intactos. */

  /* 1) Miga de pan: cubre las dos variantes de marcado que trae el constructor
     (nav.pmg-breadcrumb>ol>li en /reparacion; nav[aria-label] con enlace+span en
     /instalacion, dentro de .pmg-hv-texto). Sin marcado propio en /motorizacion. */
  .pmg-breadcrumb,
  [aria-label="Migas de pan"]{
    display:flex;flex-wrap:wrap;align-items:center;gap:.4em;
    font-family:var(--ff-body);font-size:var(--fs-small);line-height:1.3;
    color:var(--c-ink-soft);min-height:1.5em;margin-bottom:var(--sp-3);
  }
  .pmg-breadcrumb{padding-top:var(--sp-2)}
  .pmg-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;list-style:none;padding:0;margin:0}
  .pmg-breadcrumb li{display:flex;align-items:center;gap:.4em}
  .pmg-breadcrumb li:not(:first-child)::before{content:"›";color:var(--c-line)}
  [aria-label="Migas de pan"] span[aria-hidden]{color:var(--c-line)}
  :is(.pmg-breadcrumb,[aria-label="Migas de pan"]) a{color:var(--c-brand-text);text-decoration:none}
  :is(.pmg-breadcrumb,[aria-label="Migas de pan"]) a:hover{text-decoration:underline}
  :is(.pmg-breadcrumb,[aria-label="Migas de pan"]) [aria-current]{font-weight:600;color:var(--c-ink)}

  /* 2) /reparacion: párrafos seguidos dentro de v-check y v-aviso, igual que ya
     hace .pmg-prose (base.css, --sp-2) para que no lean como un bloque continuo */
  .pmg-v-check p + p,
  .pmg-v-aviso p + p{margin-top:var(--sp-2)}
  /* .pmg-prose pegado detrás de la cita y de los niveles de coste (/reparacion;
     también cierra el párrafo final de /motorizacion, que no va en .pmg-prose) */
  .pmg-v-cita + .pmg-prose{margin-top:var(--sp-4)}
  .pmg-v-niveles + .pmg-prose,
  .pmg-v-niveles + p{margin-top:var(--sp-4)}

  /* 3) /motorizacion: 4 fichas de ventajas en v-numeradas quedaban 3+1 a 1280px
     (auto-fit con minmax(280px) no llega a 4 columnas enteras en 1200px de ancho) */
  @media (min-width:1100px){
    .pmg-v-numeradas:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  }
}