/* ed-problemas: hoja de sección del sistema editorial (ver DESIGN.md)
   Problemas de piel es la sección más llana de la web: qué ocurre → qué suele importar → qué ingredientes pueden ayudar →
   qué no esperar → cuándo consultar → evidencia. Cada capítulo tiene su propia composición (7+5, frase a todo el ancho,
   4+8, 8+4, lista compacta): nunca dos iguales seguidos. Lo secundario va plegado con <details>. Todo sale por CSS
   sobre el marcado que genera scripts/problemas.py. */

html body main.pr{max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter)}
html body .pr ::selection{background:var(--d-ink);color:var(--d-bg)}

/* ───────── Indicador de 3 segmentos: plano, recto, cobalto / gris ───────── */
html body .pr .pr-alc-b{display:inline-flex;gap:3px;flex:none}
html body .pr .pr-alc-b i{width:26px;height:6px;background:var(--d-line)}
html body .pr .pr-alc-b i.on{background:var(--d-acc)}

/* ═════════ ÍNDICE ═════════ */
html body .pr-indice .intro{padding-block:var(--sp-xl);display:grid;gap:var(--sp-md)}
html body .pr-indice .intro h1{font-size:var(--t-h1);max-width:none;line-height:.94}
html body .pr-indice .intro .entradilla{margin:0;font-size:var(--t-lead);line-height:1.4;color:var(--d-ink-2);max-width:34ch}
@media (min-width:900px){
  html body .pr-indice .intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:end}
  html body .pr-indice .intro .entradilla{padding-bottom:.5em}
}

/* Empieza por lo que notas: herramienta calmada, sin caja */
html body .pr-busca{margin:0;background:transparent;padding:var(--sp-md) 0 0;border-top:1px solid var(--ed-regla)}
html body .pr-busca>h2{font-size:var(--t-h2);line-height:1.02;max-width:14ch}
html body .pr-busca-g{display:grid;gap:var(--sp-md);margin-top:var(--sp-lg)}
html body .pr-mapa{background:var(--ed-papel-2);padding:var(--sp-md);display:grid;place-items:center}
html body .pr-mapa-svg{width:min(100%,210px)}
html body .pr-grupo-chips+.pr-grupo-chips{margin-top:var(--sp-md)}
html body .pr-grupo-chips>p{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);margin:0 0 4px}
html body .pr-chips-f{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,30px)}
html body .pr-chip{font-family:var(--ed-sans);font-size:var(--t-small);line-height:1.3;font-weight:500;min-height:44px;padding:10px 0 9px;border:0;border-bottom:1px solid var(--d-line);border-radius:0!important;background:transparent;color:var(--d-ink);cursor:pointer;text-align:left;transition:color .18s,border-color .18s}
html body .pr-chip:hover{border-bottom-color:var(--d-ink)}
html body .pr-chip[aria-pressed="true"]{background:transparent;color:var(--d-acc);border-bottom:2px solid var(--d-acc);padding-bottom:8px;font-weight:600}
html body .pr-chip:focus-visible,html body .pr-fila:focus-visible{outline:2px solid var(--d-acc);outline-offset:3px}
html body .pr-res{margin-top:var(--sp-md);border-top:1px solid var(--d-line);padding-top:var(--sp-sm);min-height:96px}
html body .pr-res-vacio{margin:0;font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2);max-width:52ch}
html body .pr-res-t{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;margin:6px 0 14px}
html body .pr-res-l li{animation:ed-pr-fundido .22s ease both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes ed-pr-fundido{from{opacity:0}to{opacity:1}}
@media (min-width:900px){
  html body .pr-busca-g{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  html body .pr-mapa{position:sticky;top:96px}
  html body .pr-mapa-svg{width:min(100%,250px)}
}
@media (max-width:899px){
  html body .pr-mapa{justify-items:start;place-items:center start}
  html body .pr-mapa-svg{width:190px}
}

/* Entrada de problema: nombre en serif grande + frase gancho + flecha. Sin miniatura (más guía, menos atlas) */
html body .pr-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(14px,2vw,28px);align-items:baseline;padding:var(--sp-md) 0;border-bottom:1px solid var(--d-line);color:var(--d-ink);text-decoration:none}
html body .pr-fila::after{content:"→";font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-acc);transition:transform .2s}
html body .pr-fila-t{display:grid;gap:6px clamp(20px,3vw,48px);align-items:baseline}
html body .pr-fila-t b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;transition:color .18s}
html body .pr-fila-t>span{color:var(--d-ink-2);font-size:var(--t-small);line-height:1.45;max-width:44ch}
html body .pr-fila:hover b{color:var(--d-acc)}
@media (min-width:640px){
  html body .pr-fila-t{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
/* en el resultado del filtro: más pequeña, con el alcance como dato en mono */
html body .pr-res-l .pr-fila{padding:var(--sp-sm) 0}
html body .pr-res-l li:first-child .pr-fila{border-top:1px solid var(--ed-regla)}
html body .pr-fila-t .pr-alc{display:none}
html body .pr-res-l .pr-fila-t .pr-alc{display:flex;align-items:center;gap:10px;margin-top:4px}
html body .pr-res-l .pr-fila-t .pr-alc b{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);line-height:1.3}
html body .pr-res-l .pr-fila:hover .pr-alc b{color:var(--d-ink-2)}
@media (min-width:640px){html body .pr-res-l .pr-fila-t .pr-alc{grid-column:2}}

/* Todos, por lo que puede hacer un cosmético: tres capítulos, cada uno con su foto */
html body .pr-todos{padding-top:var(--sp-pausa)}
html body .pr-todos>h2{font-size:var(--t-h2);line-height:1.02;max-width:17ch}
html body .pr-carriles{display:block;margin-top:var(--sp-lg)}
html body .pr-carril{border-top:1px solid var(--ed-regla);padding-top:var(--sp-md);scroll-margin-top:96px}
html body .pr-carril+.pr-carril{margin-top:var(--sp-sec)}
html body .pr-carril h3{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-sm);border:0;padding:0;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.022em;line-height:1.06}
html body .pr-carril h3 .pr-alc-b i{width:34px;height:7px}
html body .pr-carril-p{margin:10px 0 0;font-size:var(--t-small);color:var(--d-ink-2)}
html body .pr-carril-f{margin:var(--sp-md) 0 0}
html body .pr-carril-f img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
html body .pr-carril-f figcaption{padding-top:10px;font-size:var(--t-cap);color:var(--d-ink-2)}
html body .pr-carril-f figcaption small{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-right:.8em}
html body .pr-carril ul{margin-top:var(--sp-md);border-top:1px solid var(--d-line)}
@media (min-width:900px){
  html body .pr-carril{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,96px)}
  html body .pr-carril-h{grid-column:1;grid-row:1}
  html body .pr-carril-f{grid-column:1;grid-row:2;align-self:start;position:sticky;top:96px}
  html body .pr-carril ul{grid-column:2;grid-row:1 / span 2;margin-top:0;border-top:0}
  html body .pr-carril ul li:first-child .pr-fila{padding-top:0}
}
@media (max-width:899px){
  /* foto de capítulo = apoyo (clase C): dentro de la columna y con ancho contenido, nunca a sangre */
  html body .pr-carril-f{max-width:min(100%,420px)}
  html body .pr-carril ul{border-top:0;margin-top:8px}
}

/* ═════════ CIERRE (índice y página) ═════════ */
html body .pr .cierre{margin-top:var(--sp-2xl);padding:var(--sp-md) 0 0;border-top:1px solid var(--ed-regla)}
html body .pr .cierre h2.gran{font-size:var(--t-h2);max-width:16ch;line-height:1.04}
html body .pr .cierre .bloque-txt{margin-top:var(--sp-sm);font-size:var(--t-body);color:var(--d-ink-2);max-width:52ch}
html body .pr .cierre .cta-fila{margin-top:var(--sp-md);gap:14px 22px}
html body .pr .cierre .cta-fila small{font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
@media (min-width:900px){
  html body .pr .cierre{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5vw,96px)}
  html body .pr .cierre>*{grid-column:2}
}

/* ═════════ PÁGINA DE PROBLEMA ═════════ */
/* Primera pantalla = capa 1: qué es · cuánto puede hacer un cosmético · por dónde empezar */
html body .pr .pr-hero{padding-block:var(--sp-lg) 0;display:grid;gap:var(--sp-md);align-items:start}
html body .pr .crumbs{margin:0 0 var(--sp-md)}
html body .pr .crumbs a{display:inline-block;padding-block:6px}
html body .pr .pr-hero h1{font-size:var(--t-h1);max-width:12ch;line-height:.94;overflow-wrap:break-word}
html body .pr .pr-intro{margin-top:var(--sp-md);max-width:34em;font-size:var(--t-body)}
html body .pr .pr-intro p{color:var(--d-ink-2)}
html body .pr .pr-intro p:first-child{font-size:var(--t-lead);line-height:1.38;color:var(--d-ink)}
html body .pr .pr-intro p+p{margin-top:14px}
html body .pr .pr-clave{display:grid;gap:var(--sp-sm) clamp(24px,3vw,48px);padding-top:14px;border-top:1px solid var(--ed-regla)}
html body .pr .pr-clave .pr-alc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;gap:8px 14px}
html body .pr .pr-clave .pr-alc small{grid-column:1 / -1;display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-clave .pr-alc b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.1;color:var(--d-ink)}
html body .pr .pr-clave .pr-alc-b i{width:30px;height:7px}
/* foto: 3:2, esquinas rectas, pie en mono */
html body .pr .pr-fig{margin:0;background:transparent;border-radius:0;max-width:none;overflow:visible;justify-self:stretch}
html body .pr .pr-fig img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
html body .pr .pr-fig figcaption{display:block;padding:10px 0 0;font-size:var(--t-cap);color:var(--d-ink-2)}
html body .pr .pr-fig .pr-ilus{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;background:transparent}
/* En esta página: seis pasos numerados */
html body .pr .accesos{display:block;margin-top:var(--sp-xs);padding-top:12px;border-top:1px solid var(--d-line);max-width:none;font-size:var(--t-small);font-weight:500}
html body .pr .accesos::before{content:"En esta página";display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);margin-bottom:4px}
html body .pr .accesos ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;counter-reset:acc}
html body .pr .accesos li{counter-increment:acc;max-width:none}
html body .pr .accesos a{display:flex;align-items:baseline;gap:.7em;min-height:44px;padding-block:11px;color:var(--d-ink);text-decoration:none;border-bottom:1px solid var(--d-line);line-height:1.25;transition:color .18s,border-color .18s}
html body .pr .accesos a::before{content:counter(acc,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);color:var(--d-acc)}
html body .pr .accesos a:hover{color:var(--d-acc);border-bottom-color:var(--d-acc)}
@media (min-width:640px){
  html body .pr .accesos ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  html body .pr .pr-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);grid-template-areas:"txt fig" "clave fig" "nav nav";grid-template-rows:auto 1fr auto}
  html body .pr .pr-hero-txt{grid-area:txt}
  html body .pr .pr-clave{grid-area:clave;align-self:end}
  html body .pr .pr-fig{grid-area:fig;margin-top:calc(var(--sp-md) + 2.2rem)}
  html body .pr .accesos{grid-area:nav;margin-top:var(--sp-md)}
  html body .pr .accesos ol{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body .pr .accesos a{border-bottom:0;height:100%}
}
@media (max-width:899px){
  html body .pr .pr-fig{margin-inline:calc(-1 * var(--gutter))}
  html body .pr .pr-fig figcaption{padding-inline:var(--gutter)}
  html body .pr .pr-hero.sin-foto .pr-fig{margin-inline:0}
  html body .pr .pr-hero.sin-foto .pr-fig figcaption{padding-inline:0}
}

/* Capítulos 01–06: base */
html body main.pr .sec{margin-top:var(--sp-xl);padding:var(--sp-md) 0 0;border-top:1px solid var(--ed-regla);display:block;scroll-margin-top:84px}
html body main.pr .pr-hero+.sec{margin-top:var(--sp-lg)}
html body main.pr .sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-xs);margin-bottom:var(--sp-md)}
html body main.pr .sec>.sec-h{grid-column:auto;grid-row:auto;position:static;margin-bottom:var(--sp-md)}
html body main.pr .sec>*:not(.sec-h){grid-column:auto;min-width:0}
html body main.pr .sec-n{color:var(--d-acc);font-size:var(--t-meta)}
html body main.pr .sec .sec-h h2{font-size:var(--t-h2);line-height:1.04;max-width:16ch}
html body main.pr .sec-nota{margin:0;max-width:30ch;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
html body main.pr .sec .fine{margin:var(--sp-sm) 0 0;font-size:var(--t-cap);color:var(--d-ink-2)}
html body main.pr :is(.s-importa,.s-no,.sin-pauta) .sec-h h2{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink);max-width:none}
html body main.pr :is(.s-importa,.s-no,.sin-pauta) .sec-h{flex-direction:row;align-items:baseline;gap:1.2em;margin-bottom:var(--sp-md)}
/* frase destacada (texto del catálogo, en serif) y su resto */
html body .pr .pr-frase{margin:0;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-cita);letter-spacing:-.02em;line-height:1.16;color:var(--d-ink);max-width:26em;text-wrap:pretty}
html body .pr .pr-resto{margin:var(--sp-sm) 0 0;max-width:var(--a-lectura);font-size:var(--t-lead);line-height:1.45;color:var(--d-ink-2)}
/* segunda capa plegada */
html body .pr .pr-mas-d{margin-top:var(--sp-md);border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);scroll-margin-top:84px}
html body .pr .pr-mas-d[open]{border-bottom-color:transparent}
html body .pr .pr-mas-d summary{display:flex;align-items:baseline;gap:.8em;min-height:48px;padding:14px 0;cursor:pointer;font-weight:600;font-size:var(--t-small);color:var(--d-ink);list-style:none}
html body .pr .pr-mas-d summary::-webkit-details-marker{display:none}
html body .pr .pr-mas-d summary::after{content:"+";margin-left:auto;font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-acc)}
html body .pr .pr-mas-d[open] summary::after{content:"−"}
html body .pr .pr-mas-d summary:hover{color:var(--d-acc)}

/* 01 · Qué ocurre: 7 + 5, con el esquema al lado */
html body .pr .pr-esq{margin:var(--sp-md) 0 0;background:transparent;border-radius:0;overflow:visible;max-width:440px}
html body .pr :is(.pr-esq,.pr-fig) svg{border-block:1px solid var(--d-line)}
html body .pr .pr-esq figcaption{padding:10px 0 0;font-size:var(--t-cap);line-height:1.45;color:var(--d-ink-2)}
html body .pr :is(.pr-signos,.pr-casos){border-top:1px solid var(--ed-regla)}
html body .pr :is(.pr-signos,.pr-casos) div{gap:6px clamp(20px,3vw,40px);padding:var(--sp-sm) 0;align-items:baseline}
html body .pr :is(.pr-signos,.pr-casos) dt{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);letter-spacing:-.015em;line-height:1.18;text-wrap:balance}
html body .pr :is(.pr-signos,.pr-casos) dd{color:var(--d-ink-2);line-height:1.55}
html body .pr .pr-mas-d .pr-casos{border-top:0}
html body .pr .pr-lista{list-style:none;margin:0;padding:0;display:block;max-width:none;color:var(--d-ink-2);font-size:var(--t-body)}
html body .pr .pr-lista li{padding:13px 0;border-bottom:1px solid var(--d-line);line-height:1.5;max-width:none}
html body .pr .pr-mas-d .pr-lista li:first-child{padding-top:2px}
html body .pr .pr-hijas{margin:var(--sp-sm) 0 0;gap:2px 22px;font-size:var(--t-small)}
html body .pr .pr-hijas b{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-hijas a{min-height:44px;padding:0;border-radius:0;background:transparent;color:var(--d-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .pr .pr-hijas a:hover{color:var(--d-acc)}
@media (min-width:900px){
  html body main.pr .s-ocurre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  html body main.pr .s-ocurre>.sec-h{grid-column:1 / -1}
  html body main.pr .s-ocurre>.pr-ocurre-t{grid-column:1}
  html body main.pr .s-ocurre>.pr-esq{grid-column:2}
  html body main.pr .s-ocurre.sin-esq>.pr-ocurre-t{grid-column:2}
  html body main.pr .s-ocurre .pr-esq{margin-top:0;max-width:none}
  html body main.pr .s-ocurre.sin-esq{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  html body main.pr .s-ocurre.sin-esq>.sec-h{grid-column:1;margin-bottom:0}
  html body main.pr .s-ocurre.sin-esq .pr-signos{border-top:0}
  html body main.pr .s-ocurre.sin-esq .pr-signos div:first-child{padding-top:0}
}

/* 02 · Qué suele importar: frase a todo el ancho + rutina en dos líneas */
html body .pr .pr-rut{display:block;max-width:none;margin:var(--sp-lg) 0 0;border-top:1px solid var(--ed-regla);scroll-margin-top:84px}
html body .pr .pr-rut-t{margin:0;padding:12px 0 4px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-rut>.pr-rut-l{background:transparent;border-radius:0;padding:14px 0;border-bottom:1px solid var(--d-line);display:grid;gap:6px 24px;align-items:baseline}
html body .pr .pr-rut h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);letter-spacing:-.015em;line-height:1.18;color:var(--d-ink)}
html body .pr .pr-rut ol{list-style:none;margin:0;padding:0;display:block;counter-reset:paso;color:var(--d-ink);font-weight:500;font-size:var(--t-body)}
html body .pr .pr-rut li{counter-increment:paso;display:grid;grid-template-columns:1.9rem minmax(0,1fr);padding:7px 0;line-height:1.4;max-width:none}
html body .pr .pr-rut li::before{content:counter(paso);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-acc);line-height:2.1}
html body .pr .pr-rut-n{margin:0;padding:var(--sp-sm) 0;max-width:var(--a-lectura);font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2)}
@media (min-width:760px){
  html body .pr .pr-rut>.pr-rut-l{grid-template-columns:minmax(6.5rem,2fr) minmax(0,10fr);padding:18px 0}
  html body .pr .pr-rut ol{display:flex;flex-wrap:wrap;gap:6px 0}
  html body .pr .pr-rut li{display:block;padding:0}
  html body .pr .pr-rut li::before{content:none}
  html body .pr .pr-rut li+li::before{content:"→";font-family:var(--ed-mono);font-size:var(--t-meta);color:var(--d-acc);margin-inline:.9em;line-height:inherit}
}

/* 03 · Ingredientes: 4 + 8, nombre grande y papel en una línea */
html body .pr .pr-ings{list-style:none;margin:0;padding:0;display:block;border-top:1px solid var(--ed-regla)}
html body .pr .pr-ing{background:transparent;border-radius:0;padding:var(--sp-sm) 0;border-bottom:1px solid var(--d-line);display:grid;gap:6px clamp(20px,3vw,40px);align-items:baseline;max-width:none}
html body .pr .pr-ing h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08}
html body .pr .pr-ing h3 a{display:inline-block;padding-block:4px;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .18s}
html body .pr .pr-ing h3 a:hover{color:var(--d-acc)}
html body .pr .pr-papel{margin:0;font-weight:400;color:var(--d-ink-2);line-height:1.5}
/* enlace a los estudios de ese uso, en la ficha (antes era una segunda lista en «Evidencia») */
html body .pr .pr-est{justify-self:start;display:inline-block;padding-block:14px;margin-block:-10px;line-height:1.3;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--d-ink-2);text-decoration:underline;text-decoration-color:var(--d-line);text-decoration-thickness:1px;text-underline-offset:.35em;transition:color .18s}
html body .pr .pr-est:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
@media (min-width:640px){html body .pr .pr-ing{grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto}}
html body .pr .pr-otros{margin-top:var(--sp-sm);background:transparent;border-radius:0;padding:0;border-block:1px solid var(--d-line)}
html body .pr .pr-otros summary{display:flex;align-items:baseline;gap:.8em;padding:14px 0;min-height:48px;font-weight:600;font-size:var(--t-small);border-radius:0!important;list-style:none}
html body .pr .pr-otros summary::-webkit-details-marker{display:none}
html body .pr .pr-otros summary::after{content:"+";margin-left:auto;font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-acc)}
html body .pr .pr-otros[open] summary::after{content:"−"}
html body .pr .pr-otros summary:hover{color:var(--d-acc)}
html body .pr .pr-otros>.fine{margin:0 0 12px;font-size:var(--t-cap);max-width:var(--a-lectura)}
html body .pr .pr-otros-g{margin:0;padding-bottom:var(--sp-sm);display:block}
html body .pr .pr-otros-g ul{display:block;max-width:none;columns:3 11.5em;column-gap:clamp(20px,3vw,40px);border-top:1px solid var(--d-line);padding-top:6px}
html body .pr .pr-otros-g li{break-inside:avoid;max-width:none}
html body .pr :is(.pr-otros-g,.pr-ev-m) a{display:inline-block;min-height:0;padding:11px 0;border-radius:0;background:transparent;color:var(--d-ink);font-weight:500;font-size:var(--t-small);text-decoration:underline;text-decoration-color:var(--d-line);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .pr :is(.pr-otros-g,.pr-ev-m) a:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
@media (min-width:900px){
  html body main.pr :is(.s-ing,.s-cons){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  html body main.pr :is(.s-ing,.s-cons)>.sec-h{grid-column:1;grid-row:1 / span 9;position:sticky;top:96px;margin-bottom:0}
  html body main.pr .s-ing.sin-pauta>.sec-h{grid-column:auto}
  html body main.pr :is(.s-ing,.s-cons)>*:not(.sec-h){grid-column:2;min-width:0}
  html body main.pr .s-ing.sin-pauta{display:block}
  html body main.pr .s-ing.sin-pauta>.sec-h{position:static;margin-bottom:var(--sp-md)}
}

/* 04 · Qué no esperar: 8 + 4, la frase manda y los plazos van al margen */
html body main.pr .s-no .sec-n{color:var(--d-warn)}
html body .pr .pr-plazo{margin-top:var(--sp-md);padding-top:12px;border-top:1px solid var(--ed-regla)}
html body .pr :is(.pr-plazo h3,.pr-plazo-h){margin:0 0 8px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-plazo p{margin:0;font-size:var(--t-body);line-height:1.55;color:var(--d-ink)}
@media (min-width:900px){
  html body main.pr .s-no{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  html body main.pr .s-no>.sec-h{grid-column:1 / -1}
  html body main.pr .s-no>.pr-no-t{grid-column:1}
  html body main.pr .s-no>.pr-plazo{grid-column:2}
  html body main.pr .s-no .pr-plazo{margin-top:.5em}
}

/* 05 · Cuándo consultar */
html body .pr .pr-consulta{border-top:1px solid var(--ed-regla);color:var(--d-ink);font-size:var(--t-body)}
html body .pr .pr-consulta li{display:grid;grid-template-columns:1.6rem minmax(0,1fr)}
html body .pr .pr-consulta li::before{content:"—";color:var(--d-warn)}

/* 06 · Evidencia: nota compacta, tercera capa */
html body main.pr .s-ev .sec-h{margin-bottom:var(--sp-sm)}
html body main.pr .s-ev .sec-h h2{font-size:var(--t-h3)}
html body .pr .pr-ev-p{margin:0;max-width:var(--a-lectura);color:var(--d-ink-2)}
html body .pr .pr-ev-m{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,30px)}
html body .pr .pr-ev-m a{font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);padding-block:15px}
@media (min-width:900px){
  html body main.pr .s-ev{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5vw,96px);align-items:baseline}
  html body main.pr .s-ev>.sec-h{grid-column:1;grid-row:1 / span 4;margin-bottom:0}
  html body main.pr .s-ev>*:not(.sec-h){grid-column:2}
  html body main.pr .s-ev>.sec-h{position:static}
}

/* Seguir: anterior / siguiente dentro del capítulo, y relacionados */
html body .pr .pr-seguir{margin-top:var(--sp-sec);border-top:1px solid var(--ed-regla);padding-top:12px}
html body .pr .pr-seguir-c{margin:0;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body .pr .pr-seguir-c a{display:inline-block;padding-block:12px;color:inherit;text-decoration:underline;text-decoration-color:var(--d-line);text-underline-offset:.3em}
html body .pr .pr-seguir-c a:hover{color:var(--d-acc)}
html body .pr .pr-pasos{display:grid;gap:0 clamp(24px,4vw,56px)}
html body .pr .pr-pasos a{display:grid;gap:var(--sp-xs);align-content:start;padding:var(--sp-sm) 0 var(--sp-md);border-bottom:1px solid var(--d-line);color:var(--d-ink);text-decoration:none}
html body .pr .pr-pasos small{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc)}
html body .pr .pr-pasos b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;transition:color .18s}
html body .pr .pr-pasos a:hover b{color:var(--d-acc)}
@media (min-width:640px){
  html body .pr .pr-pasos{grid-template-columns:1fr 1fr}
  html body .pr .pr-pasos .sig{text-align:right;justify-items:end}
}
html body .pr .pr-rel{margin-top:var(--sp-lg)}
html body .pr .pr-rel h2{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);padding-bottom:10px;border-bottom:1px solid var(--ed-regla);max-width:none}
html body .pr .pr-rel ul{list-style:none;margin:0;padding:0}
html body .pr .pr-rel li{max-width:none}
html body .pr .rd-nota{margin-top:var(--sp-lg)}

@media (prefers-reduced-motion:reduce){html body .pr-res-l li{animation:none}}
/* tablet: la foto sigue en 3:2 (proporción del sistema) y con ancho contenido; no ocupa media pantalla */
@media (min-width:600px) and (max-width:899px){
  html body .pr .pr-fig{margin-inline:0;max-width:560px}
  html body .pr .pr-fig figcaption{padding-inline:0}
}

/* Base que antes ponía problemas.css (fase 3: aquella hoja queda solo como estructura) */
html body .pr-chip{font:inherit;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:500;line-height:1.3}
html body .pr-fila-t{gap:6px clamp(20px,3vw,48px)}
html body .pr .pr-alc b{font-weight:400}