/* ═══════════════════════════════════════════════════════════════════════════
   base.css · Capa invariable del sistema
   Proyecto: Webs SEO locales · Regla R22.1

   REGLA DURA: este archivo NO contiene ningún color hexadecimal, radio,
   sombra, tamaño tipográfico ni font-family literal. Todo se consume desde
   las variables que define css/tema.css. Es auditable con grep.

   PREFIJO: prs- es un marcador que el generador sustituye por el prefijo
   del proyecto (pt-, cs-, prs-…). No editar a mano: regenerar.

   VARIANTES: cada sección admite modificadores --h1…--h6, --s1…--s5, etc.
   El agente elige cuál escribir en el HTML según estado-proyecto.md sección 0.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components, sections, variants, skin, state;

/* ═══ RESET ════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr-h, 96px) + 8px);  /* alto real del header (JS del menú) */
  }

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    color: var(--c-ink);
    background: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;        /* clip, NO hidden: hidden crea un contenedor de scroll y rompe
                                la cabecera sticky al bloquear la página con el menú abierto (R28) */
  }

  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; border: 0; background: none; }
  a { color: inherit; }
  ul, ol { list-style: none; padding: 0; }

  h1, h2, h3, h4 {
    font-family: var(--ff-head);
    font-weight: var(--fw-head);
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    text-transform: var(--tt-head);
    text-wrap: balance;                /* evita titulares con una palabra huérfana */
  }
  p, li { text-wrap: pretty; }

  h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }   /* R25: palabras largas */
  p, li, dd, dt, td, th, figcaption, label, blockquote { overflow-wrap: anywhere; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  /* Fallback métrico: elimina el salto al cargar la fuente real */
  @font-face {
    font-family: 'fallback-metrico';
    src: local('Arial');
    size-adjust: 104%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
  }
}

/* ═══ BASE ═════════════════════════════════════════════════════════════════ */
@layer base {
  .prs-container {
    width: min(100% - 2 * var(--sp-3), var(--w-container));
    margin-inline: auto;
  }

  .prs-section {
    padding-block: var(--sp-section);
    counter-increment: sec;
  }
  .prs-section--alt { background: var(--c-surface-2); }
  .prs-section--band { background: var(--c-band); color: var(--c-band-ink); }
  .prs-section--band :is(h2, h3) { color: var(--c-band-ink); }

  .prs-head {
    max-width: 68ch;
    margin-bottom: var(--sp-4);
  }
  .prs-head--center { margin-inline: auto; text-align: center; }
  .prs-head p { color: var(--c-ink-soft); margin-top: var(--sp-2); }
  .prs-section--band .prs-head p { color: var(--c-band-ink); opacity: .82; }

  /* La etiqueta de sección la define tema.css según la variante elegida */
  .prs-eyebrow { margin-bottom: var(--sp-1); }

  /* Foco visible en todos los temas, incluidos los oscuros */
  :focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .prs-skip {
    position: absolute; left: -9999px;
    background: var(--c-brand); color: var(--c-brand-ink);
    padding: var(--sp-2) var(--sp-3); z-index: 9999;
  }
  .prs-skip:focus { left: var(--sp-2); top: var(--sp-2); }

  .prs-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ═══ COMPONENTES ══════════════════════════════════════════════════════════ */
@layer components {

  /* ── Botones ─────────────────────────────────────────────────────────── */
  .prs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-1);
    padding: var(--btn-pad);
    border-radius: var(--r-btn);
    font-weight: var(--btn-fw);
    text-transform: var(--btn-tt);
    letter-spacing: var(--btn-ls);
    text-decoration: none;
    border: var(--bw-btn) solid transparent;
    transition: background var(--tr) var(--ease), color var(--tr) var(--ease),
                box-shadow var(--tr) var(--ease), transform var(--tr) var(--ease),
                border-color var(--tr) var(--ease);
  }
  .prs-btn--primary {
    background: var(--c-brand);
    color: var(--c-brand-ink);
    border-color: var(--c-brand);
    box-shadow: var(--sh-btn);
  }
  .prs-btn--primary:hover {
    background: var(--c-brand-lo);
    border-color: var(--c-brand-lo);
    box-shadow: var(--sh-hover);
  }
  .prs-btn--secondary {
    color: var(--c-brand-text, var(--c-brand));
    border-color: var(--c-line);
  }
  .prs-btn--secondary:hover {
    background: var(--c-brand-soft);
    border-color: var(--c-brand);
  }
  .prs-btn--accent {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-color: var(--c-accent);
  }

  /* ── Respuesta al toque (R28): en móvil no hay hover; sin :active el usuario
     no sabe si ha pulsado y repite (envíos duplicados, llamadas dobles) ──── */
  .prs-btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
  /* Una barra bajo el texto: se ve al tocar y no cambia el fondo (el contraste no depende de ello) */
  :is(.prs-card-link, .prs-faq-q, .prs-mnav-link, .prs-nav-link, .prs-drop-menu a, .prs-bar a):active {
    box-shadow: inset 0 -3px 0 currentColor;
  }
  main a:not([class]):active, .prs-footer a:active { text-decoration-thickness: 3px; }

  /* ── Botón de llamada (R24): header, menú móvil y barra inferior ────
     --c-cta lo elige el generador para contrastar 3:1 con la superficie. */
  .prs-btn--call {
    background: var(--c-cta, var(--c-brand));
    color: var(--c-cta-ink, var(--c-brand-ink));
    border-color: var(--c-cta, var(--c-brand));
    box-shadow: var(--sh-btn);
  }
  .prs-btn--call:hover { box-shadow: var(--sh-hover); transform: translateY(-1px); }
  .prs-mnav-cta {
    width: 100%; min-height: 52px;
    justify-content: center; text-align: center;
    flex-wrap: wrap; column-gap: .45em; row-gap: 0;
    padding-block: var(--sp-1);
    font-size: var(--fs-body);
    line-height: 1.25;
  }
  .prs-mnav-cta svg { width: 1.2em; height: 1.2em; flex: none; }
  .prs-mnav-cta-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* Botón de llamada del header en modo compacto: 44×44, solo icono */
  @media (max-width: 899px) {
    .prs-header-cta { width: 44px; height: 44px; padding: 0; }
    .prs-header-cta-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }
  @media (min-width: 900px) and (max-width: 1099px) {
    .prs-header--late .prs-header-cta { width: 44px; height: 44px; padding: 0; }
    .prs-header--late .prs-header-cta-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }

  /* R10 — botón secundario sobre fondo oscuro, sin excepciones */
  :is(.prs-section--band, .prs-hero--dark, .prs-cta, .prs-footer)
    .prs-btn--secondary {
    color: var(--c-band-ink);
    border-color: color-mix(in oklch, var(--c-band-ink) 50%, transparent);
  }
  :is(.prs-section--band, .prs-hero--dark, .prs-cta, .prs-footer)
    .prs-btn--secondary:hover {
    background: color-mix(in oklch, var(--c-band-ink) 12%, transparent);
    border-color: var(--c-band-ink);
  }

  /* ── Enlaces sueltos: diana táctil mínima (R25, WCAG 2.5.8) ─────────────
     Enlaces que no van dentro de una frase: listas del footer, enlace final
     de tarjeta, datos de contacto. En pantallas táctiles, 44px de alto. */
  :is(.prs-footer li, .prs-contact-data, .prs-zone-list li, .prs-prose li) > a:only-child,
  :is(.prs-footer li, .prs-contact-data, .prs-zone-list li) a,
  .prs-card-link, .prs-card h3 > a {
    display: inline-flex; align-items: center; min-height: 24px;
  }
  @media (pointer: coarse) {
    :is(.prs-footer li, .prs-contact-data, .prs-zone-list li, .prs-prose li) > a:only-child,
    :is(.prs-footer li, .prs-contact-data, .prs-zone-list li) a,
    .prs-card-link, .prs-card h3 > a { min-height: 44px; }
  }
  .prs-card-link { margin-top: var(--sp-2); font-weight: var(--fw-strong); color: var(--c-brand-text, var(--c-ink)); }

  /* Tablas anchas: se desplazan dentro de su caja, nunca la página (R25) */
  .prs-table-wrap { max-width: 100%; overflow-x: auto; }

  /* ── Tarjeta genérica ────────────────────────────────────────────────── */
  .prs-card {
    background: var(--c-surface);
    border: var(--bw-card) solid var(--c-line);
    border-radius: var(--r-card);
    padding: var(--card-pad);
    box-shadow: var(--sh-card);
    transition: box-shadow var(--tr) var(--ease), transform var(--tr) var(--ease);
    container-type: inline-size;
  }
  .prs-card:hover { box-shadow: var(--sh-hover); }
  .prs-card h3 { margin-bottom: var(--sp-1); }
  .prs-card p { color: var(--c-ink-soft); }

  /* Tarjeta con imagen: altura FIJA para no generar CLS */
  .prs-card-img {
    height: var(--h-img-service);
    overflow: hidden;
    border-radius: var(--r-img);
    margin-bottom: var(--sp-2);
    background: var(--c-surface-2);
  }
  .prs-card-img img { width: 100%; height: 100%; object-fit: cover; }

  /* La tarjeta se adapta a su contenedor, no al viewport */
  @container (max-width: 320px) {
    .prs-card { padding: var(--sp-3); }
    .prs-card-img { height: calc(var(--h-img-service) * .72); }
  }

  /* ── Rejillas ────────────────────────────────────────────────────────── */
  .prs-grid { display: grid; gap: var(--sp-gap); }
  .prs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .prs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .prs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

  /* ── Iconos ──────────────────────────────────────────────────────────── */
  .prs-icon {
    width: 1.5em; height: 1.5em;
    stroke: currentColor;
    stroke-width: var(--icon-sw);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* ── Chips / etiquetas ───────────────────────────────────────────────── */
  .prs-chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: calc(var(--sp-1) * .6) var(--sp-2);
    border: var(--bw-line) solid var(--c-line);
    border-radius: var(--r-btn);
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
  }
  .prs-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

  /* ══ FORMULARIO (R26) ═══════════════════════════════════════════════════
     Bloque ÚNICO. Marcado canónico: guia-construccion-web.md § contact-section.
     Prueba obligatoria: python3 auditar-formularios.py carpeta/
     ═════════════════════════════════════════════════════════════════════ */
  .prs-form { display: grid; gap: var(--sp-3); }
  .prs-field { display: grid; gap: calc(var(--sp-1) * .6); min-width: 0; }
  .prs-field label { font-size: var(--fs-small); font-weight: var(--fw-strong); }
  /* Solo campos de texto: el checkbox NUNCA recibe estas reglas (si no, deja de ser un cuadrado) */
  .prs-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%; min-height: 48px;
    padding: .6em .8em;
    font-size: max(1rem, var(--fs-body));          /* ≥16px: el iPhone no hace zoom */
    color: var(--c-ink);
    border: var(--bw-line) solid var(--c-ink-soft);
    border-radius: var(--r-input);
    background: var(--c-surface);
    transition: border-color var(--tr) var(--ease), box-shadow var(--tr) var(--ease);
  }
  .prs-field :is(input, select, textarea):focus-visible {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-brand) 25%, transparent);
    outline: 3px solid var(--c-focus); outline-offset: 1px;
  }
  /* Especificidad ≥ (0,4,1) para ganar a la regla de campos de texto de arriba (min-height: 48px) */
  .prs-field textarea:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 7lh; field-sizing: content; resize: vertical; }
  .prs-field.prs-field--mensaje textarea:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 10lh; }   /* mensaje más grande que el resto (R26) */
  .prs-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
  .prs-captcha input { max-width: 9em; }

  /* Honeypot: fuera de pantalla, sin foco y fuera del árbol de accesibilidad */
  .prs-hp {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; pointer-events: none;
  }

  /* ── Casilla de consentimiento ───────────────────────────────────────
     Es el propio <input> dibujado con appearance:none: siempre se puede
     marcar (no hay input oculto ni span falso), siempre es un cuadrado
     (tamaño fijo, aspect-ratio y radio limitado aunque el tema use
     botones redondos) y el tick sale del mismo color que el CTA. */
  .prs-check {
    display: flex; align-items: flex-start; gap: .75em;
    min-height: 44px; padding-block: .3em;
    font-size: var(--fs-small); line-height: 1.5;
    cursor: pointer;
  }
  .prs-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: none; box-sizing: border-box;
    width: 22px; height: 22px; aspect-ratio: 1 / 1;
    margin: max(0px, calc((1.5em - 22px) / 2)) 0 0;   /* centrada en la primera línea */
    display: grid; place-content: center;
    border: 2px solid var(--c-ink-soft);
    border-radius: min(var(--r-input), 5px);
    background: var(--c-surface);
    color: var(--c-cta-ink, var(--c-brand-ink));
    cursor: pointer;
    transition: background-color var(--tr) var(--ease), border-color var(--tr) var(--ease);
  }
  .prs-check input[type="checkbox"]::before {
    content: ""; width: 12px; height: 12px;
    background: currentColor;
    clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 22%, 84% 6%, 41% 68%);
    transform: scale(0);
    transition: transform var(--tr) var(--ease);
  }
  .prs-check input[type="checkbox"]:checked {
    background: var(--c-cta, var(--c-brand));
    border-color: var(--c-cta, var(--c-brand));
  }
  .prs-check input[type="checkbox"]:checked::before { transform: scale(1); }
  .prs-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
  .prs-check input[type="checkbox"][aria-invalid="true"] { border-color: var(--c-error); }
  .prs-check > span { min-width: 0; }
  .prs-check a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  @media (forced-colors: active) {
    .prs-check input[type="checkbox"] { border-color: CanvasText; }
    .prs-check input[type="checkbox"]:checked { background: Highlight; }
  }

  .prs-form-submit { justify-self: start; min-height: 48px; }
  @media (max-width: 599px) { .prs-form-submit { justify-self: stretch; } }
  .prs-form-submit[disabled] { opacity: .6; cursor: progress; }

  .prs-form-msg {
    padding: var(--sp-2);
    border-radius: var(--r-input);
    border: var(--bw-line) solid var(--c-line);
    background: var(--c-surface-2);
    color: var(--c-ink);
  }
  .prs-form-msg[data-estado="error"] { border-color: var(--c-error); border-left-width: 4px; }
  .prs-form-msg[data-estado="ok"] { border-left: 4px solid var(--c-cta, var(--c-brand)); }
  .prs-form-msg[hidden] { display: none; }
  /* Entrada del mensaje de confirmación sin JS de temporización */
  @starting-style { .prs-form-msg { opacity: 0; transform: translateY(6px); } }
  .prs-form-msg {
    transition: opacity var(--tr) var(--ease), transform var(--tr) var(--ease);
  }

  /* ── Acordeón FAQ ────────────────────────────────────────────────────── */
  .prs-faq-item {
    border-bottom: var(--bw-line) solid var(--c-line);
  }
  .prs-faq-q {
    width: 100%; min-height: 44px; text-align: left;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    font-family: var(--ff-head);
    font-size: var(--fs-h3);
    font-weight: var(--fw-head);
  }
  .prs-faq-q .prs-faq-mark { transition: transform var(--tr) var(--ease); flex: none; }
  .prs-faq-q[aria-expanded="true"] .prs-faq-mark { transform: rotate(180deg); }
  .prs-faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--tr) var(--ease);
  }
  .prs-faq-a > div { overflow: hidden; visibility: hidden; transition: visibility var(--tr) var(--ease); }
  .prs-faq-a.is-open > div { visibility: visible; }
  .prs-faq-a.is-open { grid-template-rows: 1fr; }
  .prs-faq-a > div > * { padding-bottom: var(--sp-3); color: var(--c-ink-soft); }
}

/* ═══ LAYOUT — HEADER, FOOTER, HERO ════════════════════════════════════════ */
@layer layout {

  /* Marca de estado (subrayado activo, barra lateral): usa --c-cta porque el
     generador garantiza que contrasta 3:1 con la superficie; una marca clara
     (amarillo, beige) no se vería. */
  :root { --c-menu-mark: var(--c-cta, var(--c-brand)); }

  /* ══ MENÚ Y CABECERA (R24) ═══════════════════════════════════════════════
     Bloque ÚNICO del menú. tema.css, <style> de página y estilos inline no lo
     redefinen: si algo no encaja, se corrige aquí y se regenera base.css.
     Marcado canónico: guia-construccion-web.md § includes/header.php.
     Prueba obligatoria: python3 auditar-menu.py carpeta/
     ═════════════════════════════════════════════════════════════════════ */

  /* ── Barra superior: una sola línea en cualquier ancho ─────────────── */
  .prs-topbar {
    background: var(--c-band);
    color: var(--c-band-ink);
    font-size: var(--fs-small);
    line-height: 1.3;
    padding-block: calc(var(--sp-1) * .8);
  }
  .prs-topbar .prs-container {
    display: flex; flex-wrap: nowrap; gap: var(--sp-2);
    align-items: center; justify-content: space-between;
  }
  .prs-topbar-msg {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .prs-topbar a { color: inherit; font-weight: var(--fw-strong); white-space: nowrap; }
  .prs-topbar-tel { flex: none; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
  @media (max-width: 599px) { .prs-topbar-extra { display: none; } }

  /* ── Cabecera sticky ──────────────────────────────────────────────────
     z-index 960: por encima de la barra inferior (940) y del cookie banner
     (950), para que el menú móvil abierto los cubra y nada tape su CTA.
     Prohibido transform / filter / backdrop-filter en .header: rompen el
     posicionamiento del menú y el sticky en Safari. */
  .prs-header {
    position: sticky; top: 0; z-index: 960;
    background: var(--c-surface);
    border-bottom: var(--bw-line) solid var(--c-line);
  }
  .prs-header-main {
    display: flex; align-items: center;
    gap: var(--sp-2);
    min-height: 64px;
    padding-block: var(--sp-1);
  }
  .prs-logo {
    display: inline-flex; align-items: center;
    flex: 0 1 auto; min-width: 0;
    margin-right: auto;
    text-decoration: none; color: var(--c-ink);
  }
  .prs-logo img, .prs-logo svg {
    height: 40px; width: auto;
    max-width: min(180px, 44vw);
    object-fit: contain;
  }
  .prs-logo-text {
    font-family: var(--ff-head); font-weight: var(--fw-head);
    font-size: var(--fs-h3); line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Navegación de escritorio ─────────────────────────────────────── */
  .prs-nav { display: none; }
  .prs-nav-list { display: flex; align-items: center; gap: var(--sp-2); }
  .prs-nav-link {
    display: inline-flex; align-items: center; gap: .35em;
    min-height: 44px;
    padding-inline: var(--sp-1);
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: var(--fw-strong);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    text-underline-offset: .45em;
    text-decoration-thickness: 2px;
    border-radius: var(--r-input);
  }
  /* El estado se marca con subrayado de marca, no cambiando el color del texto:
     así el contraste del enlace nunca depende del color de marca. */
  .prs-nav-link:hover,
  .prs-nav-link[aria-current="page"],
  .prs-nav-link.is-current,
  .prs-drop.is-open > .prs-nav-link {
    text-decoration-line: underline;
    text-decoration-color: var(--c-menu-mark);
  }
  .prs-chev {
    width: .75em; height: .75em; flex: none;
    transition: transform var(--tr) var(--ease);
  }
  [aria-expanded="true"] > .prs-chev { transform: rotate(180deg); }

  /* ── Submenú de escritorio ───────────────────────────────────────────
     Se abre con la clase .is-open (JS: hover con retardo, clic/toque y
     teclado). Sin JS, :hover y :focus-within como red de seguridad. */
  .prs-drop { position: relative; }
  .prs-drop-menu {
    position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: 10;
    width: max-content;
    min-width: 240px;
    max-width: min(360px, calc(100vw - 2 * var(--sp-3)));
    padding: var(--sp-1);
    background: var(--c-surface);
    border: var(--bw-line) solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-hover);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--tr) var(--ease), transform var(--tr) var(--ease),
                visibility var(--tr) var(--ease);
  }
  /* Puente invisible: el ratón cruza el hueco sin que el submenú se cierre */
  .prs-drop-menu::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
    height: calc(var(--sp-1) + 4px);
  }
  .prs-drop--end > .prs-drop-menu { left: auto; right: 0; }
  .prs-drop.is-open > .prs-drop-menu,
  html:not(.prs-js) .prs-drop:is(:hover, :focus-within) > .prs-drop-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .prs-drop-menu a {
    display: flex; align-items: center;
    min-height: 44px;
    padding: .55em var(--sp-2);           /* em: no depende de la densidad */
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: 1.3;
    text-decoration: none;
    border-radius: var(--r-input);
  }
  .prs-drop-menu a:hover { background: var(--c-surface-2); }
  .prs-drop-menu a[aria-current="page"] {
    font-weight: var(--fw-strong);
    box-shadow: inset 3px 0 0 var(--c-menu-mark);
  }

  /* ── Botón de llamada del header ─────────────────────────────────────
     Escritorio: icono + texto. Móvil: solo icono de 44×44 (el texto sigue
     accesible para lectores de pantalla). */
  .prs-header-cta { flex: none; min-height: 44px; white-space: nowrap; }
  .prs-header-cta svg { width: 1.15em; height: 1.15em; flex: none; }

  /* ── Hamburguesa: tres líneas que se convierten en X ────────────────── */
  .prs-burger {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px;              /* diana táctil mínima */
    color: var(--c-ink);
    border-radius: var(--r-input);
  }
  .prs-burger-box { position: relative; display: block; width: 22px; height: 16px; }
  .prs-burger-line,
  .prs-burger-line::before,
  .prs-burger-line::after {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor;
    transition: transform var(--tr) var(--ease), top var(--tr) var(--ease),
                background-color var(--tr) var(--ease);
  }
  .prs-burger-line { top: 7px; }
  .prs-burger-line::before { content: ""; top: -7px; }
  .prs-burger-line::after  { content: ""; top: 7px; }
  .prs-burger[aria-expanded="true"] .prs-burger-line { background-color: transparent; }
  .prs-burger[aria-expanded="true"] .prs-burger-line::before { top: 0; transform: rotate(45deg); }
  .prs-burger[aria-expanded="true"] .prs-burger-line::after  { top: 0; transform: rotate(-45deg); }

  /* ── Menú móvil ──────────────────────────────────────────────────────
     visibility, NUNCA display:none (no es animable y deja enlaces vivos).
     Ocupa todo el alto restante (viewport − alto real del header): así la
     página, la barra inferior y el cookie banner quedan tapados y nada se
     cuela por debajo. --hdr-h lo escribe el JS del menú; 120px es reserva. */
  .prs-mnav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    display: flex; flex-direction: column;
    height: calc(100vh - var(--hdr-h, 120px));
    height: calc(100dvh - var(--hdr-h, 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-surface);
    border-top: var(--bw-line) solid var(--c-line);
    box-shadow: var(--sh-hover);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--tr) var(--ease), opacity var(--tr) var(--ease),
                visibility var(--tr) var(--ease);
  }
  .prs-mnav.is-open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .prs-mnav-list > li { border-bottom: var(--bw-line) solid var(--c-line); }
  .prs-mnav-link {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
    width: 100%; min-height: 48px;
    padding: .6em var(--sp-3);
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: var(--fw-strong);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    overflow-wrap: break-word;
  }
  .prs-mnav-link:hover { background: var(--c-surface-2); }
  .prs-mnav-link[aria-current="page"],
  .prs-mnav-link.is-current { box-shadow: inset 4px 0 0 var(--c-menu-mark); }

  /* Submenú móvil: acordeón con grid-template-rows (sin alturas máximas
     fijas: cabe cualquier número de servicios). visibility para que los
     enlaces plegados no reciban foco. */
  .prs-mdrop-menu {
    display: grid; grid-template-rows: 0fr;
    visibility: hidden;
    background: var(--c-surface-2);
    transition: grid-template-rows var(--tr) var(--ease), visibility var(--tr) var(--ease);
  }
  .prs-mdrop-menu > ul { min-height: 0; overflow: hidden; }
  .prs-mdrop-menu.is-open { grid-template-rows: 1fr; visibility: visible; }
  .prs-mdrop-menu .prs-mnav-link {
    min-height: 44px;
    padding-left: calc(var(--sp-3) * 2);
    font-weight: var(--fw-body);
  }
  .prs-mnav .prs-chev { width: 1em; height: 1em; }
  .prs-mnav-foot { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) 0; }

  /* Página bloqueada mientras el menú móvil está abierto */
  html.prs-lock { overflow: hidden; }   /* solo html: si se bloquea también body, la cabecera sticky se va con el scroll */

  /* ── Puntos de corte ─────────────────────────────────────────────────
     Normal: menú de escritorio desde 900px.
     .prs-header--late: desde 1100px (más de 5 enlaces o nombres largos).
     El JS no usa estos números: detecta si la hamburguesa está visible.
     El botón de llamada compacto (solo icono) está en @layer components,
     junto a .prs-btn, porque si no el padding del botón lo pisaría. */
  @media (min-width: 900px) {
    .prs-header:not(.prs-header--late) .prs-nav { display: block; }
    .prs-header:not(.prs-header--late) :is(.prs-burger, .prs-mnav) { display: none; }
  }
  @media (min-width: 900px) and (max-width: 1099px) {
    .prs-header:not(.prs-header--late) .prs-nav-list { gap: var(--sp-1); }
  }
  @media (min-width: 1100px) {
    .prs-header--late .prs-nav { display: block; }
    .prs-header--late :is(.prs-burger, .prs-mnav) { display: none; }
  }

  /* ── Disposición de la cabecera (R31): 4 variantes ───────────────────
     Mismo marcado, mismo JS y mismas pruebas de auditar-menu.py: solo cambia
     dónde se colocan logo, menú y botón a partir de 1100px (entre 900 y 1099
     todas usan la fila simple, que es la que cabe).
       hd1  logo · · · menú · botón        (por defecto)
       hd2  logo centrado arriba, menú centrado debajo, botón a la derecha
       hd3  menú · logo centrado · botón  (partida)
       hd4  logo · menú centrado · botón */
  .prs-header--hd1 .prs-logo { margin-right: auto; }   /* hd1: la fila clásica (declarada para que la variante exista en el CSS) */
  @media (min-width: 1100px) {
    :is(.prs-header--hd2, .prs-header--hd3, .prs-header--hd4) .prs-header-main {
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-3);
    }
    :is(.prs-header--hd2, .prs-header--hd3, .prs-header--hd4) .prs-logo { margin: 0; }
    :is(.prs-header--hd2, .prs-header--hd3, .prs-header--hd4) .prs-header-cta { justify-self: end; }
    .prs-header--hd2 .prs-header-main {
      grid-template-areas: ". logo cta" "nav nav nav"; row-gap: 2px; padding-block: var(--sp-2) 0;
    }
    .prs-header--hd2 .prs-logo { grid-area: logo; justify-self: center; }
    .prs-header--hd2 .prs-nav { grid-area: nav; justify-self: center; }
    .prs-header--hd2 .prs-header-cta { grid-area: cta; }
    .prs-header--hd3 .prs-header-main { grid-template-areas: "nav logo cta"; }
    .prs-header--hd3 .prs-nav { grid-area: nav; justify-self: start; }
    .prs-header--hd3 .prs-logo { grid-area: logo; justify-self: center; }
    .prs-header--hd3 .prs-header-cta { grid-area: cta; }
    .prs-header--hd4 .prs-header-main { grid-template-areas: "logo nav cta"; }
    .prs-header--hd4 .prs-logo { grid-area: logo; justify-self: start; }
    .prs-header--hd4 .prs-nav { grid-area: nav; justify-self: center; }
    .prs-header--hd4 .prs-header-cta { grid-area: cta; }
    :is(.prs-header--hd2, .prs-header--hd3, .prs-header--hd4) .prs-burger { grid-area: cta; justify-self: end; }
  }

  /* ── Hero: 6 variantes ───────────────────────────────────────────────── */
  .prs-hero { padding-block: var(--sp-section); position: relative; }
  .prs-hero-media {
    height: var(--h-img-hero);
    border-radius: var(--r-img);
    overflow: hidden;
    background: var(--c-surface-2);
  }
  .prs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
  .prs-hero-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
  }
  .prs-hero p { color: var(--c-ink-soft); max-width: 60ch; margin-top: var(--sp-2); }
  .prs-badges {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
  }
}

/* ═══ VARIANTES ════════════════════════════════════════════════════════════
   Un modificador por sección: .prs-CLAVE--variante, con la MISMA clave que la
   composición (hero, servicios, ventajas, proceso, resenas, faq, zonas,
   contacto, footer). El agente escribe el que indique estado-proyecto.md §0,
   con el marcado de marcado-secciones.md. Probado en banco-pruebas.py (R25).
   ═══════════════════════════════════════════════════════════════════════════ */
@layer variants {

  /* ── HERO ────────────────────────────────────────────────────────────── */
  /* H1 · texto izquierda + imagen derecha 50/50 */
  .prs-hero--h1 .prs-container {
    display: grid; gap: var(--sp-4); align-items: center;
  }
  @media (min-width: 900px) {
    .prs-hero--h1 .prs-container { grid-template-columns: 1fr 1fr; }
  }

  /* H2 · imagen a sangre de fondo, texto centrado encima */
  .prs-hero--h2 { color: var(--c-band-ink); display: grid; }
  .prs-hero--h2 > * { grid-area: 1 / 1; }
  .prs-hero--h2 .prs-hero-media {
    height: 100%; border-radius: 0; min-height: var(--h-img-hero);
  }
  .prs-hero--h2 .prs-hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: color-mix(in oklch, var(--c-band) 74%, transparent);   /* R28: medido sobre foto, 62 % no llegaba a 4,5:1 */
  }
  .prs-hero--h2 .prs-container {
    position: relative; text-align: center; align-self: center;
    display: grid; justify-items: center;
    padding-block: var(--sp-5);
  }
  .prs-hero--h2 p { color: var(--c-band-ink); opacity: .9; }
  .prs-hero--h2 .prs-hero-actions { justify-content: center; }

  /* H3 · bloque de color con el texto, imagen full-width debajo */
  .prs-hero--h3 { padding-bottom: 0; background: var(--c-band); color: var(--c-band-ink); }
  .prs-hero--h3 p { color: var(--c-band-ink); opacity: .88; }
  .prs-hero--h3 .prs-hero-media {
    margin-top: var(--sp-4); border-radius: 0;
    width: 100vw; margin-inline: calc(50% - 50vw);
  }

  /* H4 · split asimétrico 60/40, imagen vertical recortada */
  @media (min-width: 900px) {
    .prs-hero--h4 .prs-container {
      display: grid; grid-template-columns: 1.5fr 1fr;
      gap: var(--sp-5); align-items: center;
    }
    .prs-hero--h4 .prs-hero-media { height: calc(var(--h-img-hero) * 1.25); }
  }

  /* H5 · sin fotografía: tipografía + badges en retícula */
  .prs-hero--h5 .prs-hero-media { display: none; }
  .prs-hero--h5 { background: var(--c-band); color: var(--c-band-ink); }
  .prs-hero--h5 p { color: var(--c-band-ink); opacity: .88; }
  .prs-hero--h5 .prs-badges {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: var(--sp-2); margin-top: var(--sp-4);
  }
  .prs-hero--h5 .prs-chip {
    justify-content: center; padding-block: var(--sp-2);
    border-color: color-mix(in oklch, var(--c-band-ink) 34%, transparent);
    color: var(--c-band-ink);
  }

  /* H6 · texto centrado, imagen panorámica recortada bajo los CTA */
  .prs-hero--h6 .prs-container { text-align: center; display: grid; justify-items: center; }
  .prs-hero--h6 p { margin-inline: auto; }
  .prs-hero--h6 .prs-hero-actions { justify-content: center; }
  .prs-hero--h6 .prs-hero-media {
    margin-top: var(--sp-4); height: calc(var(--h-img-hero) * .62); width: 100%;
  }

  /* ── SERVICIOS ───────────────────────────────────────────────────────── */
  .prs-servicios--s1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .prs-servicios--s2 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
  .prs-servicios--s2 .prs-card-img { height: calc(var(--h-img-service) * 1.2); }

  /* S3 · lista alterna izquierda/derecha */
  .prs-servicios--s3 .prs-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  @media (min-width: 900px) {
    .prs-servicios--s3 .prs-card {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: var(--sp-4); align-items: center;
      border: 0; box-shadow: none; padding: 0; background: none;
    }
    .prs-servicios--s3 .prs-card:nth-child(even) > :first-child { order: 2; }
    .prs-servicios--s3 .prs-card-img { height: calc(var(--h-img-service) * 1.35); margin: 0; }
  }

  /* S4 · bandas de ancho completo con fondo alterno */
  .prs-servicios--s4 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-servicios--s4 .prs-card {
    border: 0; border-radius: 0; box-shadow: none;
    padding-block: var(--sp-4);
    border-bottom: var(--bw-line) solid var(--c-line);
  }
  .prs-servicios--s4 .prs-card:nth-child(odd) { background: var(--c-surface-2); }

  /* S5 · rejilla compacta de 4 sin imagen */
  .prs-servicios--s5 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .prs-servicios--s5 .prs-card-img { display: none; }

  /* ── VENTAJAS ────────────────────────────────────────────────────────── */
  .prs-ventajas--v1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  @media (min-width: 900px) {
    .prs-ventajas--v2 .prs-container {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-5); align-items: start;
    }
    .prs-ventajas--v2 .prs-head { position: sticky; top: calc(var(--hdr-h, 96px) + var(--sp-3)); margin: 0; }
    .prs-ventajas--v2 .prs-grid { grid-template-columns: 1fr; }
  }
  .prs-ventajas--v3 .prs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    text-align: center;
  }
  .prs-ventajas--v3 .prs-card { border: 0; box-shadow: none; background: none; }
  .prs-ventajas--v4 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-ventajas--v4 .prs-card {
    border: 0; border-radius: 0; box-shadow: none; background: none;
    border-top: var(--bw-line) solid var(--c-line);
    padding-block: var(--sp-3);
    counter-increment: ben;
  }
  .prs-ventajas--v4 .prs-card h3::before {
    content: counter(ben) '. '; color: var(--c-accent-text, var(--c-accent));
  }

  /* ── PROCESO ─────────────────────────────────────────────────────────── */
  .prs-proceso--p1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
  .prs-proceso--p2 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-proceso--p2 .prs-step {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
    padding-bottom: var(--sp-4); position: relative;
  }
  .prs-proceso--p2 .prs-step:not(:last-child)::before {
    content: ''; position: absolute; left: 22px; top: 44px; bottom: 0;
    width: 2px; background: var(--c-line);
  }
  .prs-proceso--p3 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  .prs-proceso--p3 .prs-step-num { background: none; color: var(--c-brand-soft); }

  /* ── RESEÑAS ─────────────────────────────────────────────────────────── */
  .prs-resenas--r1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

  .prs-resenas--r2 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
  .prs-resenas--r2 .prs-review-text {
    font-family: var(--ff-head); font-size: var(--fs-h3);
    line-height: var(--lh-head); margin-bottom: var(--sp-3);
  }
  .prs-resenas--r2 .prs-review-text::before { content: '«'; color: var(--c-accent); }
  .prs-resenas--r2 .prs-review-text::after  { content: '»'; color: var(--c-accent); }

  .prs-resenas--r3 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-resenas--r3 .prs-card {
    border: 0; border-radius: 0; box-shadow: none; background: none;
    border-bottom: var(--bw-line) solid var(--c-line);
    padding-block: var(--sp-3);
  }

  @media (min-width: 900px) {
    .prs-resenas--r4 .prs-container {
      display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: var(--sp-4); align-items: start;
    }
    .prs-resenas--r4 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  }
  .prs-resenas--r4 .prs-score {
    font-family: var(--ff-head); font-size: var(--fs-h1);
    color: var(--c-brand-text, var(--c-brand)); line-height: 1;
  }

  .prs-stars { color: var(--c-accent-text, var(--c-accent)); letter-spacing: .06em; }
  .prs-review-meta {
    display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
    font-size: var(--fs-small); color: var(--c-ink-soft);
  }
  .prs-avatar {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-brand-soft); color: var(--c-brand-text, var(--c-brand));
    font-family: var(--ff-head); font-weight: var(--fw-head);
  }

  /* ── FAQ ─────────────────────────────────────────────────────────────── */
  .prs-faq--f1 .prs-faq-list { max-width: 80ch; }
  @media (min-width: 900px) {
    .prs-faq--f2 .prs-faq-list {
      columns: 2; column-gap: var(--sp-5);
    }
    .prs-faq--f2 .prs-faq-item { break-inside: avoid; }
  }
  /* F3 · lista abierta, sin acordeón */
  .prs-faq--f3 .prs-faq-a { grid-template-rows: 1fr; }
  .prs-faq--f3 .prs-faq-mark { display: none; }
  .prs-faq--f3 .prs-faq-q { cursor: default; padding-bottom: var(--sp-1); }

  /* ── ZONAS ───────────────────────────────────────────────────────────── */
  .prs-zonas--z1 .prs-zone-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .prs-zonas--z2 .prs-zone-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--sp-2) var(--sp-4);
  }
  .prs-zonas--z2 .prs-chip { border: 0; padding: 0; }
  .prs-zonas--z3 .prs-zone-list { display: block; max-width: 72ch; line-height: var(--lh-body); }
  .prs-zonas--z3 .prs-chip {
    display: inline; border: 0; padding: 0; font-weight: var(--fw-strong); color: var(--c-ink);
  }
  .prs-zonas--z3 .prs-chip:not(:last-child)::after { content: ', '; font-weight: var(--fw-body); }

  /* ── CONTACTO ────────────────────────────────────────────────────────── */
  .prs-contacto--ct1 .prs-contact-grid { display: grid; gap: var(--sp-4); }
  .prs-contacto--ct1 .prs-contact-data {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--sp-2);
  }
  @media (min-width: 900px) {
    .prs-contacto--ct2 .prs-contact-grid { grid-template-columns: 1fr 1.15fr; gap: var(--sp-5); }
    .prs-contacto--ct4 .prs-contact-grid { grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); }
  }
  .prs-contacto--ct3 { background: var(--c-band); color: var(--c-band-ink); }
  .prs-contacto--ct3 .prs-contact-data {
    display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4);
  }
  .prs-contacto--ct3 .prs-form {
    background: var(--c-surface); color: var(--c-ink);
    padding: var(--card-pad); border-radius: var(--r-card);
  }

  /* ── FOOTER ──────────────────────────────────────────────────────────── */
  .prs-footer { background: var(--c-band); color: var(--c-band-ink); }
  .prs-footer a { color: inherit; text-decoration: none; }
  .prs-footer a:hover { text-decoration: underline; }
  .prs-footer h3, .prs-footer-title { font-size: var(--fs-small); font-weight: var(--fw-strong); margin-bottom: var(--sp-2); }
  .prs-footer address { font-style: normal; }
  .prs-footer-link {
    font: inherit; color: inherit; background: none; border: 0; padding: 0;
    cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: .2em;
    display: inline-flex; align-items: center; min-height: 24px;
  }
  @media (pointer: coarse) { .prs-footer-link { min-height: 44px; } }
  .prs-footer-grid { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); }
  .prs-footer-bottom {
    border-top: var(--bw-line) solid color-mix(in oklch, var(--c-band-ink) 20%, transparent);
    padding-block: var(--sp-3);
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    justify-content: space-between;
    font-size: var(--fs-small);
  }
  @media (min-width: 900px) {
    .prs-footer--fo1 .prs-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .prs-footer--fo2 .prs-footer-grid { grid-template-columns: repeat(4, 1fr); }
    .prs-footer--fo3 .prs-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  }
  .prs-footer--fo2 .prs-footer-brand { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
  /* fo4 (R31): pie centrado en bandas, con los enlaces en línea */
  .prs-footer--fo4 .prs-footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .prs-footer--fo4 .prs-footer-grid ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--sp-3); }
  .prs-footer--fo4 .prs-footer-bottom { justify-content: center; text-align: center; flex-wrap: wrap; gap: var(--sp-2); }

  /* ── CTA final ───────────────────────────────────────────────────────── */
  .prs-cta {
    background: var(--c-brand); color: var(--c-brand-ink);
    padding-block: var(--sp-section); text-align: center;
  }
  .prs-cta h2 { color: var(--c-brand-ink); }
  .prs-cta p { color: var(--c-brand-ink); opacity: .9; max-width: 60ch; margin-inline: auto; }
  .prs-cta .prs-hero-actions { justify-content: center; }
  .prs-cta .prs-btn--secondary {
    color: var(--c-brand-ink);
    border-color: color-mix(in oklch, var(--c-brand-ink) 55%, transparent);
  }
  .prs-cta .prs-btn--secondary:hover {
    background: color-mix(in oklch, var(--c-brand-ink) 12%, transparent);
    border-color: var(--c-brand-ink);
  }
}

/* ═══ ESTADO — banner, barra móvil, movimiento ═════════════════════════════ */
@layer state {

  /* ── Contenido sobre fondos de banda (R25) ─────────────────────────────
     En @layer state para ganar a las etiquetas y numeraciones del tema.
     Todo lo que usa color de marca/acento/tinta suave pasa a --c-band-ink,
     salvo lo que va dentro de una tarjeta o formulario con fondo propio. */
  :is(.prs-section--band, .prs-hero--h2, .prs-hero--h3, .prs-hero--h5, .prs-contacto--ct3, .prs-footer)
    :is(.prs-eyebrow, .prs-chip, .prs-card-link, .prs-tl-when, .prs-stat-l, .prs-signal-mark, .prs-stars, .prs-case-meta):not(:is(.prs-card, .prs-form) *) {
    color: var(--c-band-ink);
  }
  :is(.prs-section--band, .prs-hero--h2, .prs-hero--h3, .prs-hero--h5, .prs-contacto--ct3)
    .prs-chip:not(:is(.prs-card, .prs-form) *) {
    border-color: color-mix(in oklch, var(--c-band-ink) 34%, transparent);
  }
  .prs-cta :is(.prs-eyebrow, .prs-chip) { color: var(--c-brand-ink); }

  /* Cookie banner: transform, nunca display. Cero CLS. */
  .prs-cookies {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 950;
    background: var(--c-surface);
    border-top: var(--bw-line) solid var(--c-line);
    box-shadow: var(--sh-hover);
    padding: var(--sp-3);
    transform: translateY(100%);
    visibility: hidden;                  /* oculto también para el teclado (R28) */
    transition: transform .25s var(--ease), visibility .25s var(--ease);
  }
  .prs-cookies.is-visible { transform: translateY(0); visibility: visible; }
  .prs-cookies .prs-container {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-items: center; justify-content: space-between;
  }
  .prs-cookies p { font-size: var(--fs-small); max-width: 62ch; }

  /* Barra fija inferior en móvil */
  .prs-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 940;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--c-surface);
    border-top: var(--bw-line) solid var(--c-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .prs-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
    height: 52px; padding: 0 var(--sp-1);     /* alto FIJO: el body y el aviso de cookies reservan 52px */
    text-align: center; text-decoration: none; font-weight: var(--fw-strong);
    font-size: var(--fs-small); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .prs-bar a:first-child { background: var(--c-cta, var(--c-brand)); color: var(--c-cta-ink, var(--c-brand-ink)); }
  @media (min-width: 900px) { .prs-bar { display: none; } }
  /* Con barra de llamada (móvil), el banner de cookies se apoya ENCIMA de ella:
     las dos capas se ven y el botón de llamar sigue pulsable (R28) */
  /* Mientras el aviso está abierto, el foco y las anclas no quedan debajo de él */
  html:has(.prs-cookies.is-visible) { scroll-padding-bottom: calc(var(--cookies-h, 120px) + 16px); }

  /* Móvil en horizontal: poca altura. Barra superior fuera, cabecera y aviso compactos
     para que quede ≥65 % de pantalla útil (R28) */
  @media (max-height: 500px) and (orientation: landscape) {
    .prs-topbar { display: none; }
    .prs-header-main { min-height: 52px; padding-block: 2px; }
    .prs-cookies { padding-block: var(--sp-1); }
    .prs-cookies p { font-size: var(--fs-small); line-height: 1.35; }
    .prs-cookies .prs-container { display: flex; align-items: center; gap: var(--sp-2); }
    .prs-cookies .prs-btn { flex: none; min-height: 40px; padding-block: 0; }
    .prs-bar a { height: 44px; }
    body { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (max-width: 899px) {
    .prs-cookies { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
    body:not(:has(.prs-bar)) .prs-cookies { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  }
  @media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    .prs-cookies { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (max-width: 899px) { body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } }

  /* content-visibility:auto retirado (R25): con una altura intrínseca estimada,
     cada sección cambia de alto al pintarse y provoca CLS al hacer scroll.
     En páginas de este tamaño no aporta rendimiento medible. */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media print {
    .prs-header, .prs-mnav, .prs-drop-menu, .prs-cookies, .prs-bar, .prs-cta { display: none; }
    body { color: CanvasText; background: Canvas; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKIN — los tres ejes de piel: patrón, divisor y tratamiento de imagen.
   Todo procedural: cero imágenes, cero peticiones, cero licencias.
   El generador escribe UNA clase de cada familia en el HTML.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer skin {

  :root {
    --pat-size: 18px;
    --pat-ink: color-mix(in oklch, var(--c-ink) 7%, transparent);
    --pat-brand: color-mix(in oklch, var(--c-brand) 10%, transparent);
    --div-h: 56px;
  }
  .prs-section--band, .prs-hero--dark, .prs-cta, .prs-footer {
    --pat-ink: color-mix(in oklch, var(--c-band-ink) 9%, transparent);
    --pat-brand: color-mix(in oklch, var(--c-band-ink) 12%, transparent);
  }

  /* ── PATRÓN DE FONDO · 12 variantes ──────────────────────────────────── */
  .prs-pat-2  { background-image: repeating-linear-gradient(45deg,
                   var(--pat-ink) 0 1.5px, transparent 1.5px var(--pat-size)); }
  .prs-pat-3  { background-image:
                   linear-gradient(var(--pat-ink) 1px, transparent 1px),
                   linear-gradient(90deg, var(--pat-ink) 1px, transparent 1px);
                 background-size: var(--pat-size) var(--pat-size); }
  .prs-pat-4  { background-image: radial-gradient(var(--pat-ink) 1.4px, transparent 1.4px);
                 background-size: var(--pat-size) var(--pat-size); }
  .prs-pat-5  { background-image: conic-gradient(var(--pat-ink) 25%, transparent 0 50%,
                   var(--pat-ink) 0 75%, transparent 0);
                 background-size: calc(var(--pat-size) * 2) calc(var(--pat-size) * 2); }
  /* Lamas horizontales — lee como persiana, cierre o celosía */
  .prs-pat-6  { background-image: repeating-linear-gradient(180deg,
                   var(--pat-ink) 0 2px, transparent 2px calc(var(--pat-size) * .8)); }
  .prs-pat-7  { background-image:
                   repeating-linear-gradient(60deg, var(--pat-ink) 0 1.5px, transparent 1.5px var(--pat-size)),
                   repeating-linear-gradient(-60deg, var(--pat-ink) 0 1.5px, transparent 1.5px var(--pat-size)); }
  .prs-pat-8  { background-image: repeating-radial-gradient(circle at 50% 100%,
                   transparent 0 calc(var(--pat-size) - 1.5px), var(--pat-ink) calc(var(--pat-size) - 1.5px) var(--pat-size));
                 background-size: calc(var(--pat-size) * 3) calc(var(--pat-size) * 1.6); }
  .prs-pat-9  { background-image:
                   linear-gradient(90deg, var(--pat-ink) 1px, transparent 1px),
                   linear-gradient(var(--pat-ink) 1px, transparent 1px);
                 background-size: calc(var(--pat-size) * 2.4) var(--pat-size);
                 background-position: 0 0, calc(var(--pat-size) * 1.2) calc(var(--pat-size) / 2); }
  .prs-pat-10 { background-image: repeating-linear-gradient(-45deg,
                   var(--pat-ink) 0 1px, transparent 1px calc(var(--pat-size) * .45)); }
  .prs-pat-11 { background-image: repeating-radial-gradient(circle at 0 0,
                   transparent 0 calc(var(--pat-size) * 1.4), var(--pat-ink) calc(var(--pat-size) * 1.4) calc(var(--pat-size) * 1.5)); }
  .prs-pat-12 { background-image:
                   radial-gradient(at 18% 12%, var(--pat-brand) 0, transparent 52%),
                   radial-gradient(at 82% 78%, var(--pat-brand) 0, transparent 48%); }

  /* ── DIVISOR DE SECCIÓN · 10 variantes ───────────────────────────────── */
  /* Se aplica a la sección que "entra"; recorta su borde superior. */
  .prs-div-2  { clip-path: polygon(0 var(--div-h), 100% 0, 100% 100%, 0 100%);
                 margin-top: calc(var(--div-h) * -1); padding-top: calc(var(--sp-section) + var(--div-h)); }
  .prs-div-3  { clip-path: polygon(0 0, 100% var(--div-h), 100% 100%, 0 100%);
                 margin-top: calc(var(--div-h) * -1); padding-top: calc(var(--sp-section) + var(--div-h)); }
  .prs-div-4  { clip-path: ellipse(120% 100% at 50% 100%); }
  .prs-div-5  { border-start-start-radius: 50% var(--div-h);
                 border-start-end-radius: 50% var(--div-h); overflow: hidden; }
  .prs-div-6  { clip-path: polygon(0 0, 25% var(--div-h), 50% 0, 75% var(--div-h), 100% 0,
                   100% 100%, 0 100%);
                 margin-top: calc(var(--div-h) * -1); padding-top: calc(var(--sp-section) + var(--div-h)); }
  .prs-div-7  { clip-path: polygon(0 0, 50% 0, 50% var(--div-h), 100% var(--div-h),
                   100% 100%, 0 100%);
                 margin-top: calc(var(--div-h) * -1); padding-top: calc(var(--sp-section) + var(--div-h)); }
  .prs-div-8  { border-start-start-radius: var(--div-h); border-start-end-radius: var(--div-h); }
  .prs-div-9  { clip-path: polygon(0 var(--div-h), 62% 0, 100% calc(var(--div-h) * .5),
                   100% 100%, 0 100%);
                 margin-top: calc(var(--div-h) * -1); padding-top: calc(var(--sp-section) + var(--div-h)); }
  .prs-div-10 { margin-top: calc(var(--div-h) * -1); border-radius: var(--r-card);
                 position: relative; z-index: 1; }

  /* ── TRATAMIENTO DE IMAGEN · 8 variantes ─────────────────────────────── */
  .prs-img { position: relative; }
  /* Los tratamientos con capas (::before/::after) se posicionan SOBRE su propia caja.
     Sin esto, en .hero-media o .card-img la capa se colocaba respecto a la página:
     velos que tapaban secciones enteras y un marco de 1280px que creaba scroll lateral (R31) */
  :is(.prs-img-2, .prs-img-4, .prs-img-6) { position: relative; isolation: isolate; }
  /* El marco desplazado sale 14px por fuera: en las imágenes a sangre (hero H2 y H3) se saldría de la
     pantalla y el móvil mostraría la página alejada. Ahí no se usa. */
  :is(.prs-hero--h2, .prs-hero--h3) .prs-img-4::before { content: none; }
  /* En el hero H2 el texto va SOBRE la foto: su velo de banda (74 %) manda sobre el velo o el
     duotono del tratamiento, que es más claro y dejaba el texto sin contraste */
  /* Etiquetas y botón secundario sobre la foto: con fondo propio, el contraste no depende de la foto */
  .prs-hero--h2 :is(.prs-chip, .prs-btn--secondary) { background: color-mix(in oklch, var(--c-band) 88%, transparent); }
  .prs-hero--h2 :is(.prs-img-2, .prs-img-6)::after {
    background: color-mix(in oklch, var(--c-band) 74%, transparent); mix-blend-mode: normal;
  }
  /* 2 · duotono de marca */
  .prs-img-2 img { filter: grayscale(1) contrast(1.1); }
  .prs-img-2::after { content: ''; position: absolute; inset: 0;
    background: var(--c-brand); mix-blend-mode: color; pointer-events: none; }
  /* 3 · recorte asimétrico */
  .prs-img-3 { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); }
  /* 4 · marco desplazado */
  .prs-img-4 { overflow: visible; }
  .prs-img-4::before { content: ''; position: absolute; inset: 0;
    translate: 14px 14px; border: var(--bw-btn) solid var(--c-accent);
    border-radius: var(--r-img); z-index: -1; }
  /* 5 · borde grueso */
  .prs-img-5 { border: 4px solid var(--c-ink); }
  /* 6 · velo de color */
  .prs-img-6::after { content: ''; position: absolute; inset: 0;
    background: color-mix(in oklch, var(--c-brand) 26%, transparent); pointer-events: none; }
  /* 7 · arco superior */
  .prs-img-7 { border-start-start-radius: 50% 22%; border-start-end-radius: 50% 22%; }
  /* 8 · esquina cortada */
  .prs-img-8 { clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }

  @media (prefers-reduced-motion: no-preference) {
    .prs-img img { transition: scale var(--tr) var(--ease); }
    .prs-card:hover .prs-img img { scale: 1.03; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES DEL BANCO — R23
   Las 6 obligatorias reutilizan los primitivos de @layer components.
   Aquí solo van las que necesitan un esqueleto propio.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer sections {

  /* S07 · Intro local — prosa ancha con lista de señales */
  .prs-intro-grid { display: grid; gap: var(--sp-4); }
  @media (min-width: 900px) { .prs-intro-grid { grid-template-columns: 1.6fr 1fr; } }
  .prs-prose { max-width: 68ch; }
  .prs-prose p + p { margin-top: var(--sp-2); }
  .prs-prose :is(strong, b) { font-weight: var(--fw-strong); }

  /* S14 · Banda de cifras */
  .prs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--sp-3); text-align: center; }
  .prs-stat-n { font-family: var(--ff-head); font-size: var(--fs-h2);
    font-weight: var(--fw-head); color: var(--c-brand-text, var(--c-brand)); line-height: 1; display: block; }
  .prs-section--band .prs-stat-n { color: var(--c-band-ink); }
  .prs-stat-l { font-size: var(--fs-small); color: var(--c-ink-soft); }
  .prs-section--band .prs-stat-l { color: var(--c-band-ink); opacity: .8; }

  /* S15 · Antes / después — sin JS, dos imágenes con etiqueta */
  .prs-ba { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; }
  .prs-ba figure { margin: 0; }
  .prs-ba figcaption { font-size: var(--fs-small); color: var(--c-ink-soft);
    margin-top: var(--sp-1); font-weight: var(--fw-strong); }
  .prs-ba .prs-img { height: var(--h-img-service); border-radius: var(--r-img); overflow: hidden; }
  .prs-ba img { width: 100%; height: 100%; object-fit: cover; }

  /* S16 · Casos resueltos */
  .prs-case { display: grid; gap: var(--sp-3); align-items: center; }
  @media (min-width: 900px) { .prs-case { grid-template-columns: 1fr 1.2fr; } }
  .prs-case-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2);
    font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--sp-2); }

  /* S17 · Garantías */
  .prs-guarantees { display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .prs-guarantee { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); }

  /* S18 · Equipo */
  .prs-team { display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
  .prs-team .prs-img { height: 220px; border-radius: var(--r-img); overflow: hidden; }
  .prs-team img { width: 100%; height: 100%; object-fit: cover; }

  /* S19 · Marcas y certificaciones */
  .prs-brands { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
    align-items: center; justify-content: center; }
  .prs-brands img, .prs-brands svg { height: 34px; width: auto; opacity: .72; }

  /* S20 · Glosario — lista de definición real, buena para entidades */
  .prs-glossary { display: grid; gap: var(--sp-3); }
  @media (min-width: 900px) { .prs-glossary { grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5); } }
  .prs-glossary dt { font-family: var(--ff-head); font-weight: var(--fw-head);
    font-size: var(--fs-h3); }
  .prs-glossary dd { margin: 0 0 var(--sp-2); color: var(--c-ink-soft); }

  /* S21-S22 · Errores comunes / señales de alarma */
  .prs-signals { display: grid; gap: var(--sp-2); }
  .prs-signal { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
    padding: var(--sp-2) 0; border-bottom: var(--bw-line) solid var(--c-line); }
  .prs-signal-mark { color: var(--c-accent-text, var(--c-accent)); }

  /* S24 · Calendario de mantenimiento */
  .prs-timeline { display: grid; gap: 0; }
  .prs-tl-item { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3);
    padding-block: var(--sp-3); border-top: var(--bw-line) solid var(--c-line); }
  .prs-tl-when { font-family: var(--ff-head); font-weight: var(--fw-head);
    color: var(--c-brand-text, var(--c-brand)); }

  /* S27 · Comparativa — tabla real, responsive sin scroll horizontal */
  .prs-table { width: 100%; border-collapse: collapse; }
  .prs-table :is(th, td) { padding: var(--sp-2); text-align: left;
    border-bottom: var(--bw-line) solid var(--c-line); }
  .prs-table th { font-family: var(--ff-head); font-weight: var(--fw-head);
    font-size: var(--fs-small); }
  .prs-table tbody tr:nth-child(odd) { background: var(--c-surface-2); }
  @media (max-width: 720px) {
    .prs-table, .prs-table tbody, .prs-table tr, .prs-table td { display: block; }
    .prs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .prs-table tr { border: var(--bw-card) solid var(--c-line);
      border-radius: var(--r-card); padding: var(--sp-2); margin-bottom: var(--sp-2); }
    .prs-table td { border: 0; display: grid; grid-template-columns: 1fr 1fr;
      gap: var(--sp-2); }
    .prs-table td::before { content: attr(data-th);
      font-weight: var(--fw-strong); font-size: var(--fs-small); }
  }

  /* S29 · Cobertura y horarios */
  .prs-hours { display: grid; gap: var(--sp-1); }
  .prs-hour-row { display: flex; justify-content: space-between; gap: var(--sp-3);
    padding-block: calc(var(--sp-1) * .8);
    border-bottom: var(--bw-line) solid var(--c-line); }

  /* S11 · Coste por niveles — R9: nunca cifras */
  .prs-tiers { display: grid; gap: var(--sp-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
  .prs-tier-badge { display: inline-block; margin-bottom: var(--sp-1);
    padding: calc(var(--sp-1) * .5) var(--sp-2);
    border-radius: var(--r-btn); background: var(--c-brand-soft);
    color: var(--c-brand-text, var(--c-brand)); font-size: var(--fs-small); font-weight: var(--fw-strong); }

  /* S13 · Urgencias */
  .prs-urgent { display: grid; gap: var(--sp-3); }
  @media (min-width: 900px) { .prs-urgent { grid-template-columns: 1.3fr 1fr; } }
}