@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianassantgervasi.es
   Arquetipo T03 Curva · semilla sal=0
   Generado por generador-temas.py — NO editar a mano.
   Para cambiar el diseño, regenerar con otra sal y actualizar el registro.
   ═══════════════════════════════════════════════════════════════ */

/* Tipos registrados: permiten animar e interpolar tokens sin JS */
@property --h { syntax:'<number>'; inherits:true; initial-value:0; }

:root{
  /* ── SEMILLA CROMÁTICA ─────────────────────────────────────────
     Solo se declaran dos colores reales. Todo lo demás se deriva en
     el navegador con oklch() relativo, color-mix() y contrast-color().
     Cambiar --c-brand recalcula la web entera manteniendo contrastes. */
  --h: 11;
  --c-brand:  #5A1D2A;
  --c-accent: #2F5A4E;

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

  /* Superficies (tintada) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.960 0.026 var(--h));
  --c-ink:       oklch(0.21 0.024 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.867 .02 11);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.26 0.030 var(--h));
  --c-band-ink:  oklch(1 0 0);
  --c-line:      color-mix(in oklch, var(--c-ink) 12%, transparent);
  --c-focus:     oklch(from var(--c-accent) .62 .19 h);
  --c-error:     oklch(0.55 .19 27);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 12.77:1 con la superficie y 12.77:1 con su texto.
     Candidato: brand. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-brand);
  --c-cta-ink:   oklch(1 0 0);

  /* ── MARCA Y ACENTO COMO TEXTO (R25) ──────────────────────────
     Cuando el color de marca o de acento se usa para LETRA (cifras, etiquetas,
     fechas, marcas), se usa esta versión: misma tonalidad, claridad ajustada
     para 4.6:1 contra --c-surface, --c-surface-2 y --c-brand-soft. */
  --c-brand-text:  oklch(from var(--c-brand) 0.29 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.29 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.65 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.432 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.632 c h);

  /* ── GEOMETRÍA (pill) ───────────────────────────── */
  --r-btn:999px; --r-card:20px; --r-input:14px; --r-img:16px;
  --bw-card:0; --bw-btn:0; --bw-line:1px;

  /* ── SOMBRAS (capas) ─────────────────────────────────── */
  --sh-card:0 1px 1px oklch(from var(--c-ink) l c h / .05), 0 4px 8px oklch(from var(--c-ink) l c h / .05), 0 12px 24px oklch(from var(--c-ink) l c h / .05);
  --sh-btn:none;
  --sh-hover:0 2px 4px oklch(from var(--c-ink) l c h / .08), 0 10px 20px oklch(from var(--c-ink) l c h / .08);

  /* ── RITMO (base 5px · densidad aireada ×1.28) ───────── */
  --w-container:1260px;
  --sp-1:6px; --sp-2:13px; --sp-3:19px; --sp-4:32px;
  --sp-5:51px; --sp-6:83px;
  --sp-section:clamp(58px, 5.8vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:19px;
  --card-pad:26px;

  /* ── TIPOGRAFÍA (escala modular ×1.2) ────────────────────────── */
  --ff-head:'Nunito Sans', system-ui, sans-serif;
  --ff-body:'Nunito Sans', system-ui, sans-serif;
  --fw-head:800; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(25.7px, 4.6vw, 35.7px);
  --fs-h2:clamp(21.8px, 3.0vw, 27.6px);
  --fs-h3:19.6px;
  --fs-body:16.4px;
  --fs-small:13.3px;
  --tt-head:none; --ls-head:-0.02em;
  --lh-head:1.16; --lh-body:1.65;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:13px 26px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:2.5;
  --h-img-service:192px;
  --h-img-hero:333px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.24s;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* Punto focal por defecto (diseno/fotografia.md: cada imagen lo fija en su style);
     mismo valor que la reserva de base.css */
  --foco: 50% 50%;
}

/* Fallback para navegadores sin contrast-color(): tinta calculada con luminancia WCAG real */
@supports not (color: contrast-color(red)){
  :root{
    --c-brand-ink:oklch(1 0 0);
    --c-accent-ink:oklch(1 0 0);
    --c-band-ink:oklch(1 0 0);
    --c-brand-lo-ink:oklch(1 0 0);
    --c-cta-ink:oklch(1 0 0);
  }
}

/* ── VARIANTES ACTIVAS ─────────────────────────────────────────────
   base.css define todos los layouts. Estas clases en <body> activan
   los de esta web. Vocabulario de clases: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H3 servicios:S4 ventajas:V2
   proceso:P1 resenas:R4 faq:F3
   zonas:Z1 contacto:CT4 footer:FO2
   etiqueta:numero-texto numeracion:paso iconos:Phosphor */

/* Etiqueta y numeración en @layer variants: así las reglas de contraste de
   base.css (fondos de banda, @layer state) pueden ajustarlas. */
@layer variants {
/* Etiqueta de sección — variante numero-texto */
.prs-eyebrow{counter-increment:sec;color:var(--c-ink-soft);font-size:var(--fs-small)}
.prs-eyebrow::before{content:counter(sec,decimal-leading-zero) ' — ';color:var(--c-accent)}

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

/* ═══ BRIEF A · revista «La casa por fuera» · persianassantgervasi.es (web-direccion-arte) ═══ */
@font-face{font-family:'Instrument Serif';src:url('/fonts/titular-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/titular-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* Reserva métrica de la cursiva del H1 (anti-CLS): la cursiva no cabe en las 2 precargas; mientras llega,
   Liberation Serif / Times New Roman Italic (métrica compatible) se ajusta a Instrument Serif Italic
   (anchura 92 %, ascendente 99 y descendente 31 por em) para que el titular no cambie de línea al cambiar */
@font-face{font-family:'Instrument Serif reserva';src:local('Liberation Serif Italic'),local('LiberationSerif-Italic'),local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Tinos Italic'),local('Tinos-Italic');font-weight:400;font-style:italic;size-adjust:92%;ascent-override:107.6%;descent-override:33.7%;line-gap-override:0%}
@font-face{font-family:'Manrope';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --ff-head:'Instrument Serif',serif; --ff-body:'Manrope',sans-serif;
  --fw-head:400; --fw-body:400; --fw-strong:600; --btn-fw:600; --btn-tt:none;
  --ls-head:-.005em; --lh-head:1.04; --lh-body:1.68;
  --fs-hero:clamp(2.9rem,1.5rem + 4.6vw,5.1rem); --fs-h1:clamp(2.9rem,1.5rem + 4.6vw,5.1rem);
  --fs-h2:clamp(2.1rem,1.4rem + 2.4vw,3.2rem); --fs-h3:1.6rem; --fs-body:17.5px; --fs-small:14px;
  /* Papeles del color (carta de colores, fila 7) */
  --c-surface:#FAF6F5; --c-surface-2:#F2E8E6; --c-ink:#22161A; --c-band:#2A1217;
  /* web-diseno (aplicar): texto secundario a 5,03:1 sobre el fondo suave #F2E8E6 (con L .53 daba 4,43:1)
     y foco a ≥3:1 sobre el fondo claro (3,93), el suave (3,51), la banda oscura (4,16) y el burdeos */
  --c-ink-soft:oklch(from var(--c-ink) 0.50 calc(c * .8) h); --c-ink-soft-claro:oklch(from var(--c-ink) 0.50 calc(c * .8) h);
  --c-focus:oklch(from var(--c-accent) .56 .13 h);
  /* Forma: sin radio, filetes, sin sombras */
  --r-btn:0; --r-card:0; --r-input:0; --r-img:0; --bw-card:1px; --bw-btn:1px;
  --sh-card:none; --sh-hover:none; --w-container:1200px;
  --btn-pad:15px 28px;
  /* Aire de sección algo más contenido (home de 12.800 px; la revista conserva margen) */
  --sp-section:clamp(52px,5.4vw,76px);
}
@layer skin{
 body{font-feature-settings:"ss01"}
 .prs-hv h1,.prs-v h2{font-weight:400;letter-spacing:-.005em}
 .prs-v h3{font-family:var(--ff-head);font-weight:400}
 .prs-v-cursiva{font-family:'Instrument Serif','Instrument Serif reserva',serif;font-style:italic;color:var(--c-brand-text)}
 /* Recurso: el filete vertical verde del logo */
 .prs-eyebrow{display:flex;align-items:center;gap:.7rem;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:600;color:var(--c-ink-soft)}
 .prs-eyebrow::before{content:"";width:2px;height:1.5em;background:var(--c-accent);flex:none}
 .prs-v--oscura .prs-eyebrow::before,.prs-v--marca .prs-eyebrow::before{background:currentColor}
 .prs-btn{border-radius:0;letter-spacing:.01em}
 .prs-btn--secondary:not(:is(.prs-v--oscura,.prs-v--marca,.prs-hv--sangre) *){background:transparent;border:1px solid var(--c-ink);color:var(--c-ink)}
 .prs-logo img{width:min(240px,58vw);max-width:none;height:auto}
 .prs-hv h1,.prs-v h2{hyphens:manual;text-wrap:balance}
 /* Hero: texto a la izquierda, foto vertical a la derecha con filete verde y aire de revista */
 @media (min-width:900px){
  .prs-hv--revista .prs-hv-grid{grid-template-columns:1.15fr .85fr;gap:clamp(3rem,6vw,6rem)}
  .prs-hv--revista .prs-hv-media{order:2}
 }
 .prs-hv--revista .prs-hv-media{border-right:0;border-left:2px solid var(--c-accent);padding:0 0 0 1.1rem;max-height:600px}
 .prs-hv--revista h1{max-width:16ch}
 /* Servicios: filas con numeración romana en cursiva */
 .prs-v-filas{counter-reset:fila}
 .prs-v-fila{counter-increment:fila;border-top:1px solid var(--c-line);padding-top:var(--sp-4)}
 .prs-v-fila > div::before{content:counter(fila,upper-roman);display:block;font-family:var(--ff-head);font-style:italic;font-size:1.4rem;color:var(--c-accent-text);margin-bottom:.4rem}
 .prs-v-fila h3{font-style:italic;color:var(--c-brand-text)}
 /* Filas más compactas (crítica visual: #servicios medía 3.415 px): foto más baja y columna de texto más ancha */
 .prs-v-fila img{aspect-ratio:4/5;max-height:300px}
 .prs-v-filas{gap:clamp(1.6rem,3.5vw,2.6rem)}
 .prs-v-fila{padding-top:var(--sp-3)}
 @media (min-width:900px){.prs-v-fila{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-5)}.prs-v-fila:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
 /* Foto del criterio en arco (casas de la zona alta) */
 .prs-v-check img{border-radius:999px 999px 0 0;aspect-ratio:4/5}
 .prs-v-check li::before{border-color:var(--c-accent)}
 /* Pasos: números romanos finos, sin círculo lleno */
 /* Pasos: romano en recuadro fino (brief). La cifra literal del H3 («1 ·», R37) sigue en el DOM
    para lectores de pantalla y fidelidad; visualmente la sustituye el romano (sin numeración doble) */
 .prs-v-pasos>li{padding-top:3.4rem}
 .prs-v-pasos>li::before{content:counter(v-paso,upper-roman) / "";background:transparent;color:var(--c-brand-text);border:1px solid var(--c-line);border-radius:0;font-family:var(--ff-head);font-style:italic;font-weight:400;font-size:1.3rem}
 .prs-v-pasos>li::after{height:1px}
 .prs-v-pasos-n{font-size:0}
 .prs-v-pasos h3{font-style:italic;color:var(--c-brand-text)}
 /* Zonas como índice, no como píldoras */
 /* Rótulos de los grupos de zonas: aire arriba y separación de su lista */
 .prs-v-zonas+p{margin-top:var(--sp-5)}
 .prs-container>p:has(+.prs-v-zonas){margin:var(--sp-5) 0 var(--sp-2);font-weight:600;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-soft)}
 .prs-v-cab+p:has(+.prs-v-zonas){margin-top:0}
 .prs-v-zonas li a,.prs-v-zonas li span{border-radius:0;border-width:0 0 1px;padding-inline:0 1.2rem;font-family:var(--ff-head);font-size:1.35rem}
 .prs-v-cita blockquote{font-style:italic}
}
/* ── Elemento original: PFX-f-lamina, la fachada anotada ── */
@layer skin{
 .prs-f-lamina-grid{display:grid;gap:var(--sp-5);align-items:center}
 @media (min-width:900px){.prs-f-lamina-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
 .prs-f-lamina-fig{margin:0;border-left:2px solid var(--c-accent);padding-left:var(--sp-3)}
 .prs-f-lamina-fig svg{display:block;width:100%;max-width:440px;height:auto;color:var(--c-ink)}
 .prs-f-lamina-fig figcaption{font-size:var(--fs-small);color:var(--c-ink-soft);margin-top:var(--sp-2)}
 .prs-f-lamina svg .prs-f-lamina-relleno{fill:var(--c-surface)}
 .prs-f-lamina svg .prs-f-lamina-lama{fill:color-mix(in oklch,var(--c-accent) 18%,var(--c-surface))}
 .prs-f-lamina svg .prs-f-lamina-pin{fill:var(--c-brand)}
 .prs-f-lamina svg .prs-f-lamina-num{fill:var(--c-brand-ink);font:600 13px var(--ff-body)}
 .prs-f-lamina-leyenda{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
 .prs-f-lamina-leyenda>li{position:relative;padding-block:var(--sp-3);padding-left:2.9rem;border-bottom:1px solid var(--c-line)}
 /* Círculo burdeos con la cifra literal del H3 (R37), como los pines del alzado; el « · » queda solo en el DOM */
 .prs-f-lamina-n{position:absolute;left:0;top:calc(var(--sp-3) + .1rem);width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--c-brand);color:var(--c-brand-ink);font:600 .85rem/1 var(--ff-body);font-style:normal}
 .prs-n-sep{font-size:0}
 .prs-f-lamina-leyenda h3{margin:0;font-size:1.45rem}
 .prs-f-lamina-leyenda p{margin:.2rem 0 .3rem;color:var(--c-ink-soft)}
 .prs-f-lamina-leyenda a{font-weight:600;color:var(--c-brand-text);text-underline-offset:.2em}
}
/* ── Laboratorio: PFX-x-carta, carta firmada del técnico (carta «carta-tecnico») ── */
@layer skin{
 .prs-x-carta .prs-x-carta-grid{display:grid;gap:var(--sp-5);align-items:start}
 @media (min-width:900px){.prs-x-carta-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
 .prs-x-carta-papel{--c-brand-text:var(--c-brand-text-claro);--c-ink-soft:var(--c-ink-soft-claro);background:var(--c-surface);color:var(--c-ink);padding:clamp(1.6rem,4vw,3rem);border-left:2px solid var(--c-accent)}
 .prs-x-carta-papel p{font-size:1.06rem}
 .prs-x-carta-papel .prs-x-carta-saludo{font-family:var(--ff-head);font-style:italic;font-size:1.6rem;color:var(--c-brand-text);margin-top:0}
 .prs-x-carta-firma{display:flex;align-items:end;gap:var(--sp-3);margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--c-ink-soft-claro,var(--c-ink-soft))}
 .prs-x-carta-firma svg{width:150px;height:auto;color:var(--c-brand)}
 .prs-x-carta-cab p{color:var(--c-band-ink-soft)}
}
/* Aire de revista: párrafos seguidos y titular → primer párrafo (home y subpáginas) */
@layer skin{
 :where(.prs-v,.prs-section) p+p:not(:where(form,.prs-faq-a) p){margin-top:.9em}
 :where(.prs-v,.prs-section) h2+p:not(:where(form) p){margin-top:var(--sp-3)}
 .prs-faq-a p+p{margin-top:.7em}
}
/* Móvil: primero titular y CTA; la foto, después y más baja */
@layer skin{
 /* <picture> del hero (recorte 4:3 para móvil): sin caja propia, la img sigue llenando .prs-hv-media */
 .prs-hv-media picture{display:contents}
 @media (max-width:899px){
  .prs-hv--revista .prs-hv-media{order:2;aspect-ratio:4/3;max-height:340px}
  .prs-hv--revista .prs-hv-media img{object-position:var(--foco,50% 30%)}
 }
}
/* Listas de comprobación (web-diseno, corregir 2026-10-06): base.css quita las viñetas a todas las listas.
   Listas sueltas del texto: la marca de comprobación verde de v-check, más fina; señales: «!» en recuadro fino,
   como los romanos de los pasos */
@layer skin{
 :is(.prs-card,.prs-prose)>ul:not([class]){display:grid;gap:.5rem;margin-block:var(--sp-2)}
 :is(.prs-card,.prs-prose)>ul:not([class])>li{position:relative;padding-left:1.7rem}
 :is(.prs-card,.prs-prose)>ul:not([class])>li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.85rem;height:.42rem;border-left:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);transform:rotate(-45deg)}
 .prs-v--oscura :is(.prs-card,.prs-prose)>ul:not([class])>li::before,.prs-v--marca :is(.prs-card,.prs-prose)>ul:not([class])>li::before{border-color:currentColor}
 .prs-signals{gap:0;margin-block:var(--sp-2);border-top:1px solid var(--c-line)}
 .prs-signal{align-items:baseline;gap:var(--sp-3)}
 .prs-signal-mark{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border:1px solid var(--c-accent);font-family:var(--ff-head);font-style:italic;font-size:1.15rem;line-height:1;color:var(--c-accent-text,var(--c-accent))}
 .prs-signal p{margin:0}
}
/* Coste por niveles: aire entre las tarjetas y el párrafo de cierre, y filas equilibradas */
@layer skin{
 :is(.prs-v-niveles,.prs-tiers)+*{margin-top:var(--sp-4)}
 .prs-v-nivel>p{margin:0}
 @media (min-width:600px) and (max-width:899px){
  .prs-v-niveles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prs-v-niveles>:last-child:nth-child(odd){grid-column:1/-1}
 }
 @media (min-width:900px){
  .prs-v-niveles:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .prs-v-niveles:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  .prs-v-niveles:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
 }
}
/* web-diseno (corregir 2026-10-06, auditoría de navegador post-R27) */
@layer skin{
 /* Botón de acento sobre bandas de marca u oscuras: el verde sobre el burdeos se distinguía a 1,64:1.
    En esas bandas va en papel claro con la letra verde (acento como texto), y al pasar/tocar, papel suave */
 :is(.prs-v--marca,.prs-v--oscura,.prs-hv--sangre) .prs-btn--accent{background:var(--c-surface);border-color:var(--c-surface);color:var(--c-accent-text)}
 :is(.prs-v--marca,.prs-v--oscura,.prs-hv--sangre) .prs-btn--accent:is(:hover,:active){background:var(--c-surface-2);border-color:var(--c-surface-2);color:var(--c-accent-text);text-decoration:underline;text-underline-offset:.2em}
 /* Ventajas (V2) entre 600 y 899 px: dos columnas (2 + 2) en vez de 3 + 1; la rejilla estira cada fila a la tarjeta más alta */
 @media (min-width:600px) and (max-width:899px){
  .prs-ventajas--v2 .prs-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 }
 /* Respuesta al toque visible en enlaces del texto y en el logo */
 main a:not([class]):active,.prs-footer a:not([class]):active{box-shadow:inset 0 -2px 0 currentColor}
 .prs-logo:active{opacity:.8}
}
/* web-diseno (corregir 2026-10-06, crítica visual final, mejoras 1 y 2): páginas más cortas sin tocar el texto (R37).
   Menos aire por banda, fotos de las filas más bajas, lámina más compacta, tarjetas de 4 en 2 + 2,
   índice «En esta página» del pie en una franja a lo ancho; y la nota final de los pasos como apunte con filete */
:root{ --sp-section:clamp(42px,4.2vw,56px); }
@layer skin{
 /* Servicios en filas: la foto baja de 300 a 210 px, columna de texto más ancha y menos hueco entre filas */
 .prs-v-fila img{max-height:210px}
 @media (min-width:900px){.prs-v-fila{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.prs-v-fila:nth-child(even){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
 .prs-v-filas{gap:clamp(1.2rem,2.4vw,1.8rem)}
 /* Lámina: columna de texto más ancha y leyenda más apretada */
 @media (min-width:900px){.prs-f-lamina-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
 .prs-f-lamina-leyenda>li{padding-block:var(--sp-2)}
 .prs-f-lamina-n{top:calc(var(--sp-2) + .1rem)}
 /* Zonas: rótulos de grupo con menos aire */
 .prs-v-zonas+p{margin-top:var(--sp-4)}
 .prs-container>p:has(+.prs-v-zonas){margin-top:var(--sp-4)}
 .prs-v-cab+p:has(+.prs-v-zonas){margin-top:0}
 /* Foto en arco: no más alta que 540 px (el arco se mantiene) */
 .prs-v-check img{max-height:540px}
 /* Rejilla de 2 con 4 tarjetas: 2 + 2 en escritorio (antes 3 + 1, con tarjetas estrechas y muy altas);
    la fila sigue estirando las tarjetas a la misma altura */
 @media (min-width:900px){.prs-grid--2:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
 /* Pie fo2: marca e índice de la página a lo ancho; el resto de bloques reparte la fila */
 @media (min-width:900px){
  .prs-footer--fo2 .prs-footer-grid{display:flex;flex-wrap:wrap;column-gap:var(--sp-5);row-gap:var(--sp-4)}
  .prs-footer--fo2 .prs-footer-grid>*{flex:1 1 180px;min-width:0}
  .prs-footer--fo2 .prs-footer-grid>.prs-footer-brand{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-5);margin-bottom:0}
  .prs-footer--fo2 .prs-footer-brand>p{margin:0}
  .prs-footer--fo2 .prs-footer-grid>div:has(a[href^="#"]):not(:has(a:not([href^="#"]),button)){flex-basis:100%;padding-bottom:var(--sp-4);border-bottom:1px solid color-mix(in oklch,var(--c-band-ink) 20%,transparent)}
  .prs-footer--fo2 .prs-footer-grid>div:has(a[href^="#"]):not(:has(a:not([href^="#"]),button)) ul{columns:3;column-gap:var(--sp-5)}
  .prs-footer--fo2 .prs-footer-grid>div:has(a[href^="#"]):not(:has(a:not([href^="#"]),button)) li{break-inside:avoid;padding-bottom:.45rem}
 }
 /* Pasos: la nota que sigue al texto de un paso (consejo final) va como apunte, con filete (en escritorio, letra algo menor: 15 px),
    y la columna que la lleva gana anchura para que no se descuelgue de las otras */
 .prs-v-pasos>li>p+p{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--c-line);color:var(--c-ink-soft)}
 @media (min-width:900px){
  .prs-v-pasos>li>p+p{font-size:.94rem;line-height:1.6}
  .prs-v-pasos:has(>li:nth-child(4):last-child>p+p){grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.45fr)}
 }
}