@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasmolletdelvalles.com
   Arquetipo T08 Linea · semilla sal=0
   Prefijo de clases: pmv-
   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: 285;
  --c-brand:  #5D3FD3;
  --c-accent: #F2D129;

  /* Derivados de marca (esquema: split) */
  --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 285);                /* 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 6.74:1 con la superficie y 6.74: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.455 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.455 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.615 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.503 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.863 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 (ninguna) ─────────────────────────────────── */
  --sh-card:none;
  --sh-btn:none;
  --sh-hover:none;

  /* ── RITMO (base 6px · densidad editorial ×1.55) ───────── */
  --w-container:1080px;
  --sp-1:9px; --sp-2:19px; --sp-3:28px; --sp-4:46px;
  --sp-5:74px; --sp-6:121px;
  --sp-section:clamp(84px, 7.0vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:28px;
  --card-pad:37px;

  /* ── TIPOGRAFÍA (escala modular ×1.25) ────────────────────────── */
  --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(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.025em;
  --lh-head:1.12; --lh-body:1.69;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:19px 37px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.25;
  --h-img-service:279px;
  --h-img-hero:484px;

  /* ── 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(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:H6 servicios:S1 ventajas:V3
   proceso:P1 resenas:R3 faq:F1
   zonas:Z3 contacto:CT4 footer:FO4
   etiqueta:punto-texto numeracion:paso 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 punto-texto */
.pmv-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--c-ink-soft);font-size:var(--fs-small)}
.pmv-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-accent)}

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

/* ══════════════════════════════════════════════════════════════════
   BRIEF A · «El parte del técnico» · dirección tecnico-sobrio
   (+ carta «subrayado» y carta «sello» convertida en etiqueta de taller)
   Elemento original: pmv-f-etiqueta (etiqueta de revisión colgante)
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Red Hat Display';src:url('/fonts/titular-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Work 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:'Work Sans',system-ui,sans-serif;
  --fw-head:800; --fw-strong:600; --btn-fw:600;
  --fs-hero:clamp(2.35rem,1.2rem + 3.9vw,4.1rem);
  --fs-h2:clamp(1.7rem,1.1rem + 1.9vw,2.6rem);
  --fs-h3:1.25rem; --fs-body:17px; --fs-small:14px;
  --ls-head:-0.028em; --lh-head:1.06; --lh-body:1.65;
  /* tinta y banda: violeta muy profundo derivado de la marca (no negro) */
  --c-ink:oklch(0.2 0.045 285);
  --c-band:oklch(0.22 0.07 285);
  --c-surface:oklch(0.995 0.002 285);
  --c-surface-2:oklch(0.965 0.012 285);
  --c-line:oklch(0.2 0.045 285 / .14);
  /* forma: un único radio de 4 px, filete de 1 px, sin sombras */
  --r-btn:4px; --r-card:4px; --r-input:4px; --r-img:4px;
  --bw-card:1px; --bw-btn:1.5px;
  --btn-pad:15px 26px;
  --w-container:1200px;
  --card-pad:30px;
  --tr:.2s; --ease:cubic-bezier(.2,.7,.3,1);
  --marcador:oklch(from var(--c-accent) l c h / .85);
}
@layer skin{
  body{letter-spacing:-.003em}
  h1,h2,h3{letter-spacing:var(--ls-head)}
  /* etiqueta de sección: referencia de parte (filete fino + texto en mayúsculas espaciadas) */
  .pmv-eyebrow{display:inline-flex;align-items:center;gap:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:.74rem;color:var(--c-brand-text)}
  .pmv-eyebrow::before{content:"";width:2rem;height:1px;border-radius:0;background:currentColor}
  .pmv-v--oscura .pmv-eyebrow,.pmv-v--marca .pmv-eyebrow{color:inherit}

  /* RECURSO: el rotulador amarillo del técnico (subrayado dibujado, SVG propio) */
  .pmv-v-subrayado,.pmv-hv-datos strong{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-6 92-9 194-5l-2 9c-70-3-130-1-190 4z' fill='%23F2D129' fill-opacity='.9'/%3E%3C/svg%3E") no-repeat 0 92%/100% .5em;padding-inline:.06em}
  .pmv-hv-datos{border-top:1px solid var(--c-line);gap:var(--sp-2) var(--sp-4)}
  .pmv-hv-datos strong{font-size:1.45rem;display:inline-block}

  /* HERO A: texto + foto vertical con la etiqueta colgante */
  .pmv-hv--tarjeta{padding-block:clamp(2rem,5vw,4.5rem) clamp(2.5rem,6vw,5rem);border-bottom:1px solid var(--c-line)}
  .pmv-hv--tarjeta h1{max-width:15ch;hyphens:manual}
  .pmv-hv--tarjeta .pmv-hv-media{aspect-ratio:4/5;max-height:600px}
  @media (min-width:900px){.pmv-hv--tarjeta .pmv-hv-grid{grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,6rem)}}

  /* ELEMENTO ORIGINAL · pmv-f-etiqueta: etiqueta de revisión de taller, de cartulina amarilla,
     colgada con su cordel del borde de la foto. En el constructor: class="pmv-hv-flotante pmv-f-etiqueta". */
  :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta){background:none;border:0;box-shadow:none;border-radius:0;color:var(--c-ink);
    isolation:isolate;padding:58px 24px 24px;max-width:15.5rem}
  :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta)::after{content:"";position:absolute;inset:0;z-index:-1;
    background:radial-gradient(circle at 50% 27px,transparent 0 7px,var(--c-ink) 7.5px 10px,var(--c-accent) 10.5px);
    clip-path:polygon(22% 0,78% 0,100% 14%,100% 100%,0 100%,0 14%)}
  :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) :is(h2,h3){font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-family:var(--ff-body);font-weight:600;margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:1px dashed oklch(0.2 0.045 285 / .45)}
  :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) p{margin:0;font-size:1rem;line-height:1.45}
  :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) strong{display:block;font-family:var(--ff-head);font-size:1.7rem;line-height:1.05;letter-spacing:-.02em}
  .pmv-hv--tarjeta .pmv-hv-media .pmv-hv-flotante{position:absolute;top:-10px;bottom:auto;left:auto;right:.8rem;max-width:12.5rem;margin:0;transform:rotate(-4deg);transform-origin:50% 0}
  @media (min-width:900px){
    .pmv-hv--tarjeta .pmv-hv-media .pmv-hv-flotante{top:-14px;bottom:auto;right:auto;left:-3.2rem;max-width:15.5rem;transform:rotate(-5deg);transform-origin:50% 0}
    /* el cordel, del ojal al borde superior de la foto */
    .pmv-hv--tarjeta .pmv-hv-media .pmv-hv-flotante::before{content:"";position:absolute;left:50%;top:-34px;width:2px;height:62px;background:var(--c-ink);transform:rotate(14deg);transform-origin:50% 100%}
  }
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .pmv-hv--tarjeta .pmv-hv-media .pmv-hv-flotante{animation:pmv-balanceo 3.2s var(--ease) 1 both}
    @keyframes pmv-balanceo{0%{transform:rotate(-11deg)}45%{transform:rotate(-2deg)}75%{transform:rotate(-6deg)}100%{transform:rotate(-5deg)}}
  }

  /* Síntomas: fichas del parte, con su número de línea y la etiqueta como segunda aparición */
  .pmv-v-sintomas{counter-reset:sintoma;border-color:var(--c-line);border-radius:var(--r-card)}
  .pmv-v-sintomas>*{counter-increment:sintoma;position:relative;padding-top:3.4rem}
  .pmv-v-sintomas>*::before{content:"Síntoma " counter(sintoma,decimal-leading-zero);position:absolute;top:1.25rem;left:var(--card-pad);
    font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .7rem .2rem 1.3rem;
    background:radial-gradient(circle at .55rem 50%,var(--c-surface) 0 .2rem,transparent .22rem),var(--c-accent);color:var(--c-accent-ink);
    clip-path:polygon(.6rem 0,100% 0,100% 100%,.6rem 100%,0 50%)}
  .pmv-v-sintomas a{color:var(--c-brand-text);text-underline-offset:.25em}

  /* Lista de servicios sobre la banda violeta profunda: números con el amarillo del rotulador */
  .pmv-v--oscura .pmv-v-lista>li::before{color:var(--c-accent);font-size:1.05rem}
  .pmv-v-lista h3{font-size:clamp(1.25rem,1rem + 1vw,1.7rem)}
  .pmv-v-lista a.pmv-v-flecha{border:1px solid currentColor;border-radius:var(--r-btn);width:48px;height:48px}
  .pmv-v-lista>li:hover a.pmv-v-flecha{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}

  /* Check y pasos: líneas finas, numeración discreta */
  .pmv-v-check img,.pmv-hv-media img{border-radius:var(--r-img)}
  .pmv-v-check ul{list-style:none;padding:0;border-top:1px solid var(--c-line)}
  .pmv-v-check li{padding:.8rem 0 .8rem 2rem;border-bottom:1px solid var(--c-line);position:relative}
  .pmv-v-check li::before{content:"";position:absolute;left:.2rem;top:1.15rem;width:.9rem;height:.45rem;border-left:2px solid var(--c-brand);border-bottom:2px solid var(--c-brand);transform:rotate(-45deg)}
  .pmv-v-pasos>li::before{background:var(--c-surface);color:var(--c-brand-text);border:1.5px solid var(--c-brand);border-radius:var(--r-btn);font-family:var(--ff-head)}
  .pmv-v-pasos>li::after{height:1px}

  /* Aviso de urgencia en la marca */
  .pmv-v--marca .pmv-v-aviso h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.3rem)}
  .pmv-v--marca .pmv-btn--secondary{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .pmv-v--marca .pmv-btn--secondary:hover{background:var(--c-accent);color:var(--c-accent-ink)}

  /* Niveles: el destacado lleva la etiqueta amarilla en la esquina */
  .pmv-v-nivel{box-shadow:none}
  .pmv-v-nivel--destacado{position:relative;border-width:1.5px}
  .pmv-v-nivel--destacado::before{content:"El más habitual";position:absolute;top:-.85rem;right:1.2rem;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    padding:.25rem .8rem .25rem 1.3rem;background:var(--c-accent);color:var(--c-accent-ink);clip-path:polygon(.6rem 0,100% 0,100% 100%,.6rem 100%,0 50%)}

  /* Zonas como filas de un listado técnico, no como píldoras */
  .pmv-v-zonas li span,.pmv-v-zonas li a{border-radius:var(--r-btn);background:var(--c-surface)}
  .pmv-faq-item{border-color:var(--c-line)}
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN 1 (crítica visual home v1, 2026-10-15) · web-diseno modo corregir
   Mismo brief A: tipografía, colores, radio de 4 px y etiqueta intactos.
   Cambian fondos, bandas y márgenes para separar la huella visual del registro.
   ══════════════════════════════════════════════════════════════════ */
@layer skin{
  /* Hero: bloque violeta de taller detrás de la foto, hasta el borde derecho de la pantalla */
  .pmv-hv--tarjeta::before{content:"";position:absolute;z-index:-1;inset:auto 0 0 0;height:34%;background:var(--c-brand)}
  @media (min-width:900px){.pmv-hv--tarjeta::before{inset:0 0 0 auto;width:42%;height:auto}}
  /* Foco del brief (45 % 35 % en el hero; 50 % 45 % en las fotos de servicio) */
  .pmv-hv-media img{--foco:45% 35%}
  img[src*="servicio-"]{--foco:50% 45%}

  /* Ritmo: margen de flujo donde el marcado apila elementos sin aire */
  .pmv-v-cab>*+*{margin-top:.9rem}
  .pmv-v-check>div>*+*{margin-top:var(--sp-2)}
  .pmv-v-check>div>ul{margin-top:var(--sp-3)}
  .pmv-v-check>div>.pmv-eyebrow+h2{margin-top:.9rem}
  .pmv-container>h3{margin-bottom:var(--sp-2);font-size:.82rem;font-family:var(--ff-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-brand-text);display:flex;align-items:center;gap:.8rem}
  .pmv-container>h3::after{content:"";flex:1;height:1px;background:var(--c-line)}
  .pmv-v-zonas+h3{margin-top:var(--sp-4)}
  .pmv-v-zonas+p{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--c-line)}
  .pmv-v-niveles+p{margin-top:var(--sp-4);text-align:center}

  /* Criterio de taller (v-check de la home) sobre el papel suave del parte: rompe el blanco seguido.
     Solo en la home: en las subpáginas manda el fondo que fija §0 (clase v--suave o claro). */
  .pmv-v[aria-labelledby="criterio-t"]:has(>.pmv-v-check){background:var(--c-surface-2)}


  /* Opiniones: la banda oscura que el brief preveía para v-cita (sin cambiar el marcado), con dos partes
     firmados en papel claro y su pinza de rotulador amarilla */
  .pmv-v:has(.pmv-v-cita){background:var(--c-band);color:var(--c-band-ink);--c-ink-soft:var(--c-band-ink-soft);--c-brand-text:var(--c-brand-text-oscuro)}
  .pmv-v:has(.pmv-v-cita) .pmv-v-cab h2{color:var(--c-band-ink)}
  .pmv-v:has(.pmv-v-cita) .pmv-v-cab a{color:var(--c-band-ink)}
  .pmv-v:has(.pmv-v-cita) .pmv-eyebrow{color:var(--c-accent-text-oscuro)}
  .pmv-v-cita{color:var(--c-ink);--c-ink-soft:var(--c-ink-soft-claro);--c-brand-text:var(--c-brand-text-claro)}
  .pmv-container:has(>.pmv-v-cita){display:grid;gap:var(--sp-4);align-items:stretch}
  .pmv-container:has(>.pmv-v-cita)>.pmv-v-cab{margin-bottom:var(--sp-2)}
  @media (min-width:900px){
    .pmv-container:has(>.pmv-v-cita){grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
    .pmv-container:has(>.pmv-v-cita)>.pmv-v-cab{grid-column:1/-1}
  }
  .pmv-v-cita{max-width:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-card);padding:3.2rem var(--card-pad) var(--card-pad);position:relative}
  .pmv-v-cita::before{content:"";position:absolute;top:-.6rem;left:var(--card-pad);width:4.5rem;height:1.2rem;background:var(--c-accent);clip-path:polygon(.6rem 0,100% 0,100% 100%,.6rem 100%,0 50%)}
  .pmv-v-cita blockquote{font-size:clamp(1.15rem,.95rem + .7vw,1.45rem);line-height:1.35}
  .pmv-v-cita figcaption{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px dashed var(--c-line)}

  /* Medida de lectura a 1280 */
  .pmv-v-aviso p{max-width:62ch;margin-top:.9rem}
  /* Servicios a 1280: el nombre a la izquierda y la explicación a la derecha, como las líneas de un parte */
  @media (min-width:900px){
    .pmv-v-lista>li>div{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:var(--sp-1) var(--sp-4);align-items:baseline}
    .pmv-v-lista>li>div>p{margin:0;max-width:62ch}
  }
  /* Servicios por debajo de 360: número y flecha arriba, el texto a todo el ancho (la columna de 140 px no da para el texto) */
  @media (max-width:359px){
    .pmv-v-lista>li{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-1)}
    .pmv-v-lista>li::before{grid-column:1;grid-row:1;align-self:center}
    .pmv-v-lista>li>a.pmv-v-flecha{grid-column:2;grid-row:1}
    .pmv-v-lista>li>div{grid-column:1/-1;grid-row:2}
  }

  /* Etiqueta colgante en móvil: más pequeña, arriba a la derecha (≈140 px de ancho) */
  @media (max-width:899px){
    .pmv-hv--tarjeta .pmv-hv-media .pmv-hv-flotante{position:absolute;top:-8px;right:.6rem;left:auto;bottom:auto;margin:0;max-width:8.9rem;padding:40px 12px 12px;transform:rotate(-4deg);transform-origin:50% 0}
    :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta)::after{background:radial-gradient(circle at 50% 19px,transparent 0 5px,var(--c-ink) 5.5px 7.5px,var(--c-accent) 8px)}
    :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) :is(h2,h3){font-size:.64rem;letter-spacing:.1em;margin-bottom:.3rem;padding-bottom:.3rem}
    :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) p{font-size:.8rem;line-height:1.3}
    :is(.pmv-hv--tarjeta .pmv-hv-flotante,.pmv-f-etiqueta) strong{font-size:1.05rem}
  }

  /* Botón secundario en fondo claro: al pasar, se rellena de violeta (antes 1,65:1 con el fondo) */
  .pmv-btn--secondary:hover{background:var(--c-brand-text);color:var(--c-brand-ink);border-color:var(--c-brand-text)}
  .pmv-v--oscura .pmv-btn--secondary:hover{background:transparent;color:inherit;border-color:currentColor}
  .pmv-v--marca .pmv-btn--secondary:hover{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}

  /* Respuesta al toque (:active) en enlaces de texto, flecha, logo y teléfono del pie */
  main a:not([class]):active{background:var(--c-brand-text);color:var(--c-brand-ink);text-decoration-thickness:3px}
  :is(.pmv-v--oscura,.pmv-v--marca) a:not([class]):active{background:var(--c-accent);color:var(--c-accent-ink)}
  .pmv-v-lista a.pmv-v-flecha:active{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}
  .pmv-logo:active{opacity:.7}
  .pmv-footer a:active{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}

  /* Móvil: aviso de cookies compacto, para no tapar «Llamar» en la primera pantalla */
  @media (max-width:899px){
    .pmv-cookies{padding:.6rem 0}
    .pmv-cookies .pmv-container{gap:.5rem var(--sp-2)}
    .pmv-cookies p{line-height:1.35}
    .pmv-cookies .pmv-btn{min-height:44px;padding-block:.4rem}
    .pmv-hv--tarjeta{padding-top:1.25rem}
    .pmv-hv--tarjeta .pmv-hv-acciones .pmv-btn{width:100%;justify-content:center}
  }

  /* El hueco que base.css reserva bajo el pie mientras el aviso está abierto, en el color del pie */
  html:has(.pmv-cookies.is-visible) body{background:linear-gradient(var(--c-band) 0 0) left bottom/100% calc(var(--cookies-h,120px) + 16px) no-repeat var(--c-surface)}
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN 2 (crítica visual home v2, 2026-10-15) · web-diseno modo corregir
   Solo tipografía de los H3 de tarjeta y datos del hero en móvil. Marcado y textos intactos (R37).
   ══════════════════════════════════════════════════════════════════ */
@layer skin{
  /* H3 de 20-27 px: sin el interletraje negativo del titular, interlineado abierto y 9 px hasta su párrafo */
  :is(.pmv-v-sintomas,.pmv-v-lista,.pmv-v-pasos,.pmv-v-niveles) h3{letter-spacing:0;line-height:1.18}
  :is(.pmv-v-sintomas,.pmv-v-lista,.pmv-v-pasos) h3+p{margin-top:.56rem}
  .pmv-v-pasos h3{margin-bottom:0}
  .pmv-v-nivel>h3+p{margin-top:calc(.56rem - var(--sp-2))}

  /* Datos del hero en móvil: un bloque pegado a los botones; cada dato con su cifra arriba y la explicación entera debajo */
  @media (max-width:899px){
    .pmv-hv-datos{margin-top:var(--sp-3);padding-top:var(--sp-2);display:grid;gap:var(--sp-2)}
    .pmv-hv-datos strong{display:block;width:fit-content}
    .pmv-hv-datos span{display:block;margin-top:.15rem}
  }
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN 3 (subpáginas, 2026-10-15) · web-diseno modo corregir
   v-check sin foto, rejilla de 6 síntomas, rótulo de /motorizacion y aire tras listas,
   pasos y niveles. Marcado y textos intactos (R37); la home no cambia.
   ══════════════════════════════════════════════════════════════════ */
@layer skin{
  /* v-check SIN foto: como una hoja del parte. Titular a la izquierda y el texto con su lista
     a la derecha, a medida de lectura. Sirve con la lista dentro del texto o como segundo hijo. */
  .pmv-v-check:not(:has(>img,>picture)){row-gap:var(--sp-3)}
  @media (min-width:900px){
    .pmv-v-check:not(:has(>img,>picture)){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 var(--sp-5);align-items:start}
    .pmv-v-check:not(:has(>img,>picture))>div{display:contents}
    .pmv-v-check:not(:has(>img,>picture))>div>*,.pmv-v-check:not(:has(>img,>picture))>ul{grid-column:2;max-width:66ch}
    /* etiqueta y titular comparten la columna izquierda (misma área), el titular bajo la etiqueta */
    .pmv-v-check:not(:has(>img,>picture))>div>.pmv-eyebrow{grid-column:1;grid-row:1/span 40;align-self:start}
    .pmv-v-check:not(:has(>img,>picture))>div>:is(h2,.pmv-eyebrow+h2){grid-column:1;grid-row:1/span 40;align-self:start;margin-top:2.6rem;padding-top:var(--sp-2);border-top:1px solid var(--c-line)}
    .pmv-v-check:not(:has(>img,>picture))>div>h2+*{margin-top:0}
    .pmv-v-check:not(:has(>img,>picture))>ul{margin-top:var(--sp-3)}
  }

  /* v-sintomas con 3, 6 o 9 tarjetas: tres columnas, sin celdas vacías (la home, con 3, queda igual) */
  @media (min-width:900px){
    .pmv-v-sintomas:has(>:nth-child(3n):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  /* /motorizacion: las fichas de «Antes de elegir» son comprobaciones, no síntomas */
  #eleccion .pmv-v-sintomas>*::before{content:"Comprobación " counter(sintoma,decimal-leading-zero)}

  /* Aire y medida de lectura en los párrafos que siguen a listas, pasos y niveles */
  :is(.pmv-v-lista,.pmv-v-pasos,.pmv-v-niveles,.pmv-v-sintomas)+p{margin-top:var(--sp-4)}
  :is(.pmv-v-lista,.pmv-v-pasos,.pmv-v-niveles,.pmv-v-sintomas)~p{max-width:68ch}
  :is(.pmv-v-lista,.pmv-v-pasos,.pmv-v-niveles,.pmv-v-sintomas)~p+p{margin-top:var(--sp-2)}
  .pmv-v-niveles~p{margin-inline:auto}
}

/* ══════════════════════════════════════════════════════════════════
   CORRECCIÓN 4 (retoques de la crítica final, 2026-10-15) · web-diseno modo corregir
   Solo espaciado, guionado y rejilla. Marcado, textos, menú y formulario intactos (R26, R37).
   ══════════════════════════════════════════════════════════════════ */
@layer skin{
  /* 1 · Títulos sin guion automático, como el H1 (base.css mantiene overflow-wrap para palabras imposibles) */
  h2,h3{hyphens:manual}

  /* 2 · Contacto ct2: aire entre el bloque del teléfono y el formulario en móvil */
  @media (max-width:899px){
    .pmv-contacto--ct2 .pmv-contact-grid{display:grid;gap:var(--sp-3)}
  }
  /* 2b · Contacto ct2 a 1280: el teléfono acompaña al formulario mientras se rellena (sin hueco vacío) */
  @media (min-width:900px){
    .pmv-contacto--ct2 .pmv-contact-grid{align-items:start}
    .pmv-contacto--ct2 .pmv-contact-data{position:sticky;top:calc(var(--hdr-h,96px) + var(--sp-3));padding-top:var(--sp-2);border-top:1px solid var(--c-line)}
  }

  /* 3 · «Así trabajamos» con un paso final más largo (/instalacion y /mosquiteras): 2 × 2 en escritorio */
  @media (min-width:900px){
    :is(#montaje,main:has(#malla) #proceso) .pmv-v-pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5)}
    :is(#montaje,main:has(#malla) #proceso) .pmv-v-pasos>li:nth-child(2n)::after{display:none}
    :is(#montaje,main:has(#malla) #proceso) .pmv-v-pasos>li>p{max-width:62ch}
  }
}