/* ═══════════════════════════════════════════════════════════════════════════
   base.css · Capa invariable del sistema
   Proyecto: persianascastellardelvalles.es · Regla R22.1
   Prefijo: prs-

   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.

   VARIANTES: cada sección admite modificadores --h1…--h6, --s1…--s5, etc.
   Esta web usa: H4 · S5 · V3 · P3 · R2 · F1 · Z2 · CT4 · FO2
   ═══════════════════════════════════════════════════════════════════════════ */

@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: 96px;          /* compensa el header sticky en anclas */
  }

  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: hidden;
  }

  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 { 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 {
    background: transparent;
    color: 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);
  }

  /* 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);
  }

  /* ── 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(320px, 1fr)); }
  .prs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .prs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 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 ──────────────────────────────────────────────────────── */
  .prs-form { display: grid; gap: var(--sp-2); }
  .prs-field { display: grid; gap: calc(var(--sp-1) * .5); }
  .prs-field label { font-size: var(--fs-small); font-weight: var(--fw-strong); }
  .prs-field :is(input, select, textarea) {
    width: 100%;
    padding: var(--sp-2);
    border: var(--bw-line) solid var(--c-line);
    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 {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-brand) 22%, transparent);
    outline: none;
  }
  /* El textarea crece con el contenido, sin JS */
  .prs-field textarea { min-height: 7lh; field-sizing: content; resize: vertical; }
  .prs-field--invalid :is(input, textarea) {
    border-color: var(--c-error);
  }

  /* Honeypot: fuera del flujo y fuera del árbol de accesibilidad */
  .prs-hp {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; opacity: 0;
    pointer-events: none;
  }

  .prs-check {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--sp-2); align-items: start;
    font-size: var(--fs-small); cursor: pointer;
  }
  .prs-check input { width: 1.2em; height: 1.2em; accent-color: var(--c-brand); margin-top: .15em; }

  .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);
  }
  /* 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%; 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; }
  .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 {

  /* ── Header ──────────────────────────────────────────────────────────── */
  .prs-topbar {
    background: var(--c-band);
    color: var(--c-band-ink);
    font-size: var(--fs-small);
    padding-block: calc(var(--sp-1) * .8);
  }
  .prs-topbar .prs-container {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-items: center; justify-content: space-between;
  }
  .prs-topbar a { color: inherit; text-decoration: none; font-weight: var(--fw-strong); }

  .prs-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--c-surface);
    border-bottom: var(--bw-line) solid var(--c-line);
  }
  .prs-header-main {
    position: relative;                 /* ancla del menú móvil absoluto */
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
  }
  .prs-logo img, .prs-logo svg { height: 42px; width: auto; }

  .prs-nav { display: none; gap: var(--sp-3); align-items: center; }
  .prs-nav a { text-decoration: none; font-weight: var(--fw-strong); font-size: var(--fs-small); }
  .prs-nav a[aria-current="page"] { color: var(--c-brand); }

  .prs-drop { position: relative; }
  .prs-drop-menu {
    position: absolute; top: 100%; left: 0; min-width: 260px;
    background: var(--c-surface);
    border: var(--bw-line) solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-hover);
    padding: var(--sp-1);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--tr) var(--ease), transform var(--tr) var(--ease),
                visibility var(--tr) var(--ease);
  }
  .prs-drop:is(:hover, :focus-within) .prs-drop-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .prs-drop-menu a { display: block; padding: var(--sp-2); border-radius: var(--r-input); }
  .prs-drop-menu a:hover { background: var(--c-surface-2); }

  .prs-burger {
    display: grid; place-items: center;
    width: 44px; height: 44px;            /* diana táctil mínima */
    border-radius: var(--r-input);
  }

  /* Menú móvil: visibility, NUNCA display:none (no es animable) */
  .prs-mnav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 800;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border-top: var(--bw-line) solid var(--c-line);
    box-shadow: var(--sh-hover);
    padding-block: var(--sp-1);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    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: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
  }
  .prs-mnav :is(a, button) {
    display: block; width: 100%; text-align: left;
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none; font-weight: var(--fw-strong);
  }
  .prs-mnav :is(a, button):hover { background: var(--c-surface-2); }

  /* Submenú móvil: max-height, no visibility (anidado dentro de uno que ya lo usa) */
  .prs-mdrop-menu {
    max-height: 0; overflow: hidden;
    background: var(--c-surface-2);
    transition: max-height .25s var(--ease);
  }
  .prs-mdrop-menu.is-open { max-height: 520px; }
  .prs-mdrop-menu a { padding-left: calc(var(--sp-3) * 1.8); font-weight: var(--fw-body); }
  .prs-mdrop-toggle { display: flex; align-items: center; justify-content: space-between; }
  .prs-mdrop-toggle[aria-expanded="true"] .prs-chev { transform: rotate(180deg); }
  .prs-chev { transition: transform var(--tr) var(--ease); }

  @media (min-width: 900px) {
    .prs-nav { display: flex; }
    .prs-burger, .prs-mnav { display: none; }
  }

  /* ── 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. Esta web usa H4 · S5 · V3 · P3 · R2 · F1 · Z2 · CT4
   ═══════════════════════════════════════════════════════════════════════════ */
@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) 62%, transparent);
  }
  .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 ← ESTA WEB */
  @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(160px, 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-services--s1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .prs-services--s2 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .prs-services--s2 .prs-card-img { height: calc(var(--h-img-service) * 1.2); }

  /* S3 · lista alterna izquierda/derecha */
  .prs-services--s3 .prs-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  @media (min-width: 900px) {
    .prs-services--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-services--s3 .prs-card:nth-child(even) > :first-child { order: 2; }
    .prs-services--s3 .prs-card-img { height: calc(var(--h-img-service) * 1.35); margin: 0; }
  }

  /* S4 · bandas de ancho completo con fondo alterno */
  .prs-services--s4 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-services--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-services--s4 .prs-card:nth-child(odd) { background: var(--c-surface-2); }

  /* S5 · rejilla compacta sin imagen ← ESTA WEB */
  .prs-services--s5 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .prs-services--s5 .prs-card-img { display: none; }

  /* ── VENTAJAS ────────────────────────────────────────────────────────── */
  .prs-benefits--v1 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  @media (min-width: 900px) {
    .prs-benefits--v2 .prs-container {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-5); align-items: start;
    }
    .prs-benefits--v2 .prs-head { position: sticky; top: 120px; margin: 0; }
    .prs-benefits--v2 .prs-grid { grid-template-columns: 1fr; }
  }
  /* V3 ← ESTA WEB */
  .prs-benefits--v3 .prs-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    text-align: center;
  }
  .prs-benefits--v3 .prs-card { border: 0; box-shadow: none; background: none; }
  .prs-benefits--v4 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-benefits--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-benefits--v4 .prs-card h3::before {
    content: counter(ben) '. '; color: var(--c-accent);
  }

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

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

  /* R2 ← ESTA WEB */
  .prs-reviews--r2 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
  .prs-reviews--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-reviews--r2 .prs-review-text::before { content: '«'; color: var(--c-accent); }
  .prs-reviews--r2 .prs-review-text::after  { content: '»'; color: var(--c-accent); }

  .prs-reviews--r3 .prs-grid { grid-template-columns: 1fr; gap: 0; }
  .prs-reviews--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-reviews--r4 .prs-container {
      display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-4); align-items: start;
    }
    .prs-reviews--r4 .prs-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  }
  .prs-reviews--r4 .prs-score {
    font-family: var(--ff-head); font-size: var(--fs-h1);
    color: var(--c-brand); line-height: 1;
  }

  .prs-stars { color: 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);
    font-family: var(--ff-head); font-weight: var(--fw-head);
  }

  /* ── FAQ ─────────────────────────────────────────────────────────────── */
  /* F1 ← ESTA WEB */
  .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-zones--z1 .prs-zone-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  /* Z2 ← ESTA WEB */
  .prs-zones--z2 .prs-zone-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-2) var(--sp-4);
  }
  .prs-zones--z2 .prs-chip { border: 0; padding: 0; }
  .prs-zones--z3 .prs-zone-list { display: block; max-width: 72ch; line-height: var(--lh-body); }
  .prs-zones--z3 .prs-chip {
    display: inline; border: 0; padding: 0; font-weight: var(--fw-strong); color: var(--c-ink);
  }
  .prs-zones--z3 .prs-chip:not(:last-child)::after { content: ', '; font-weight: var(--fw-body); }

  /* ── CONTACTO ────────────────────────────────────────────────────────── */
  .prs-contact--ct1 .prs-contact-grid { display: grid; gap: var(--sp-4); }
  .prs-contact--ct1 .prs-contact-data {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-2);
  }
  @media (min-width: 900px) {
    .prs-contact--ct2 .prs-contact-grid { grid-template-columns: 1fr 1.15fr; gap: var(--sp-5); }
    /* CT4 ← ESTA WEB */
    .prs-contact--ct4 .prs-contact-grid { grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); }
  }
  .prs-contact--ct3 { background: var(--c-band); color: var(--c-band-ink); }
  .prs-contact--ct3 .prs-contact-data {
    display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4);
  }
  .prs-contact--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 { font-size: var(--fs-small); margin-bottom: var(--sp-2); }
  .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; }
    /* FO2 ← ESTA WEB */
    .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); }

  /* ── 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; }
}

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

  /* 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%);
    transition: transform .25s var(--ease);
  }
  .prs-cookies.is-visible { transform: translateY(0); }
  .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);
  }
  .prs-bar a { padding: var(--sp-2); text-align: center; text-decoration: none; font-weight: var(--fw-strong); }
  .prs-bar a:first-child { background: var(--c-brand); color: var(--c-brand-ink); }
  @media (min-width: 900px) { .prs-bar { display: none; } }
  @media (max-width: 899px) { body { padding-bottom: 60px; } }

  /* Contenido fuera de pantalla: el navegador no lo pinta hasta que hace falta */
  .prs-section { content-visibility: auto; contain-intrinsic-size: auto 600px; }
  .prs-hero, .prs-header { content-visibility: visible; }

  @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-cookies, .prs-bar, .prs-cta { display: none; }
    body { color: CanvasText; background: Canvas; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKIN — patrón, divisor y tratamiento de imagen.
   Esta web usa: patrón 5 · divisor 5 · imagen 8
   Todo procedural: cero imágenes, cero peticiones, cero licencias.
   ═══════════════════════════════════════════════════════════════════════════ */
@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); }
  /* ← ESTA WEB */
  .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 ───────────────────────────────── */
  .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%); }
  /* ← ESTA WEB */
  .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; }
  /* 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 ← ESTA WEB */
  .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(140px, 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); 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(240px, 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(190px, 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); }

  /* 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); }

  /* 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; left: -9999px; }
    .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(250px, 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); 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; } }
}