/* Hugo's Beauty Project · hoja de sección: SOBRE MÍ (.sm), CÓMO FUNCIONA (.cf) y LEGALES (main.doc).
   Se carga detrás de editorial.css. Nada de cajas: tipografía, reglas de 1 px, columnas asimétricas y pausas. */

/* ───────── Común a .sm y .cf ───────── */
html body main:is(.sm,.cf){max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter)}
html body main:is(.sm,.cf) [id]{scroll-margin-top:124px}
@media (min-width:900px){html body main:is(.sm,.cf) [id]{scroll-margin-top:104px}}
:where(main.sm,main.cf) p{margin:0}
html body main:is(.sm,.cf) .sec-n{display:block;color:var(--d-acc);font-size:var(--t-meta);font-weight:500}
html body main:is(.sm,.cf) :is(.sm-txt,.cf-txt){max-width:var(--a-lectura)}
html body main:is(.sm,.cf) :is(.sm-txt,.cf-txt)>p+p{margin-top:1.05em}
html body main:is(.sm,.cf) .btn-texto{display:inline-flex;align-items:center;gap:8px;min-height:44px}
html body main:is(.sm,.cf) .btn-texto .ic{width:15px;height:15px;flex:none}

html body .pg-cierre{padding:var(--sp-pausa) 0 0}
html body .pg-cierre h2{font-size:var(--t-h2);max-width:17ch;line-height:1.02}
html body .pg-cierre .cta-fila{margin-top:var(--sp-md);gap:14px var(--sp-md)}
html body .pg-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)}

/* ───────── Piezas comunes de segunda capa y de recorrido ───────── */
/* Segunda capa: <details> nativo. Dos reglas finas y un signo; nunca una caja */
html body main:is(.sm,.cf) .pg-mas{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);max-width:none}
html body main:is(.sm,.cf) .pg-mas+.pg-mas{border-top:0}
html body main:is(.sm,.cf) .pg-mas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);min-height:52px;padding:8px 0;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:500;line-height:1.3;color:var(--d-ink);transition:color .18s}
html body main:is(.sm,.cf) .pg-mas>summary::-webkit-details-marker{display:none}
html body main:is(.sm,.cf) .pg-mas>summary::after{content:"+";flex:none;font-family:var(--ed-mono);font-size:var(--t-lead);font-weight:400;line-height:1;color:var(--d-acc)}
html body main:is(.sm,.cf) .pg-mas[open]>summary::after{content:"−"}
html body main:is(.sm,.cf) .pg-mas>summary:hover{color:var(--d-acc)}
html body main:is(.sm,.cf) .pg-mas-c{padding:6px 0 var(--sp-md)}
html body main:is(.sm,.cf) .pg-mas-c>*+*{margin-top:1.05em}

/* Recorrido / línea temporal: línea fina, puntos y número en mono.
   Vertical por defecto (móvil); horizontal desde 900 px. El último punto va lleno. */
html body .pg-linea{list-style:none;margin:0;padding:0;border-left:1px solid var(--ed-regla);margin-left:4px}
html body .pg-linea>li{position:relative;padding:0 0 var(--sp-md) 26px}
html body .pg-linea>li:last-child{padding-bottom:0}
html body .pg-linea>li::before{content:"";position:absolute;left:-5px;top:.28em;width:9px;height:9px;border-radius:50%!important;border:1px solid var(--ed-regla);background:var(--claro);box-sizing:border-box}
html body .pg-linea>li:last-child::before{background:var(--ed-regla)}
html body .pg-linea .pl-n{display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-2);line-height:1.4}
html body .pg-linea h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;margin:8px 0 0}
html body .pg-linea p{margin:8px 0 0;color:var(--d-ink-2);line-height:1.45;max-width:34ch}
@media (min-width:900px){
  html body .pg-linea{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-left:0;margin-left:0;border-top:1px solid var(--ed-regla)}
  html body .pg-linea>li{padding:var(--sp-md) var(--sp-md) 0 0}
  html body .pg-linea>li:last-child{padding-right:0}
  html body .pg-linea>li::before{left:0;top:-5px}
}

/* ═════════ SOBRE MÍ ═════════
   Ritmo: apertura → texto corto → [retrato 4:5] → línea temporal → [trabajo 3:2] → cita → lista compacta → colofón → declaración */
html body .sm-cab{padding-top:var(--sp-xl);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--sp-lg);align-items:end}
html body .sm-cab>*{grid-column:1/-1;min-width:0}
html body .sm-cab h1{font-size:var(--t-display);line-height:.92;margin:0}
html body .sm-cab .quien{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-top:var(--sp-sm)}
html body .sm-foto{margin:0;width:min(320px,100%)}
html body .sm-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0}
html body .sm-foto figcaption{margin-top:10px;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 .sm-eje{border-top:1px solid var(--ed-regla);padding-top:var(--sp-md)}
html body .sm-eje .eje{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.025em;max-width:22ch;margin:0;text-wrap:balance;color:var(--d-ink)}
html body .sm-eje .sm-cta{margin-top:var(--sp-sm)}
/* Móvil: el retrato pequeño va junto al nombre, no debajo en una pantalla aparte */
@media (max-width:639px){
  html body .sm-cab{grid-template-columns:minmax(0,1fr) 104px;column-gap:16px;align-items:end}
  html body .sm-cab-t{grid-column:1}
  html body .sm-foto{grid-column:2;width:104px}
  html body .sm-foto figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html body .sm-eje{grid-column:1/-1}
}
@media (min-width:640px){
  html body .sm-cab-t{grid-column:1/9}
  html body .sm-foto{grid-column:9/13;justify-self:end;width:min(320px,100%)}
}
@media (min-width:900px){
  html body .sm-eje{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end}
  html body .sm-eje .eje{grid-column:1/10}
  html body .sm-eje .sm-cta{grid-column:10/13;justify-self:end;margin:0}
}

/* Capítulos: regla de tinta, número en mono */
html body .sm-cap{margin-top:var(--sp-xl);border-top:1px solid var(--ed-regla);padding-top:var(--sp-sm);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--sp-md);align-items:start}
html body .sm-cab+.sm-cap{margin-top:var(--sp-xl)}
html body .sm-cap>*{grid-column:1/-1;min-width:0}
html body .sm h2{margin:0}
html body .sm-h h2{font-size:var(--t-h2);margin-top:14px;max-width:14ch}
html body .sm-intro{margin-top:var(--sp-sm);font-size:var(--t-lead);line-height:1.42;color:var(--d-ink-2);max-width:34ch}

/* 01 · texto corto; la afirmación del medio en serif mediana; el resto de la historia, plegado */
html body .sm-lectura .sm-txt{font-size:var(--t-body);line-height:1.6}
html body .sm-lectura .sm-txt>p.sm-extraida{font-family:var(--ed-serif);font-size:var(--t-cita);line-height:1.1;letter-spacing:-.02em;margin-block:var(--sp-md);max-width:20ch;text-wrap:balance}
html body .sm-lectura .pg-mas{margin-bottom:var(--sp-md)}
html body .sm-lectura .pg-mas-c{font-size:var(--t-body);line-height:1.6;max-width:var(--a-lectura)}
@media (min-width:900px){
  html body .sm-lectura .sm-h{grid-column:1/5}
  html body .sm-lectura .sm-txt{grid-column:5/12;max-width:none}
  html body .sm-lectura .sm-txt>p:not(.sm-extraida){max-width:var(--a-lectura)}
}

/* Fotos previstas (hoy no existen): basta con poner el <figure>. Sin él no queda hueco. */
html body .sm-fig{margin:var(--sp-xl) 0 0}
html body .sm-fig img{display:block;width:100%;height:auto;object-fit:cover;border:0}
html body .sm-fig figcaption{margin-top:10px;font-size:var(--t-cap);line-height:1.4;color:var(--d-ink-3)}
html body .sm-fig-retrato img{aspect-ratio:4/5}
html body .sm-fig-trabajo img{aspect-ratio:3/2}
/* B editorial: el retrato no pasa de ~45 vh en móvil ni de ~60 vh en escritorio */
html body .sm-fig-retrato{width:min(280px,78%)}
@media (min-width:640px){html body .sm-fig-retrato{width:min(440px,56%);margin-left:auto}}
@media (min-width:900px){
  html body .sm-fig-retrato{margin-left:calc((100% + clamp(16px,2.4vw,40px)) / 12 * 4);margin-right:0}
  html body .sm-fig-trabajo{width:calc((100% + clamp(16px,2.4vw,40px)) / 12 * 8 - clamp(16px,2.4vw,40px));margin-left:auto}
}

/* 02 · línea temporal a todo el ancho; los tres pasos en serif */
html body .sm-tray>li>p{font-family:var(--ed-serif);font-size:var(--t-h3);line-height:1.12;letter-spacing:-.02em;color:var(--d-ink);max-width:16ch;text-wrap:balance;margin-top:10px}
html body .sm-vengo .sm-tray{margin-top:clamp(4px,1vw,12px)}
@media (min-width:900px){
  html body .sm-vengo .sm-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end}
  html body .sm-vengo .sm-h>*{grid-column:1/6}
  html body .sm-vengo .sm-h>.sm-intro{grid-column:7/13;margin:0 0 .2em}
  html body .sm-vengo .sm-tray{margin-top:var(--sp-md)}
  html body .sm-vengo .sm-txt{grid-column:9/13;margin-top:var(--sp-sm)}
}
@media (min-width:900px) and (max-width:1099px){html body .sm-vengo .sm-txt{grid-column:8/13}}

/* Cita: la segunda idea, en cursiva y a menor escala que la apertura */
html body .sm-cita{margin-top:var(--sp-2xl);margin-bottom:var(--sp-2xl)}
html body .sm-cita+.sm-cap{margin-top:0}
html body .sm-frase{font-family:var(--ed-serif);font-style:italic;font-weight:400;font-size:var(--t-cita);line-height:1.12;letter-spacing:-.02em;max-width:24ch;text-wrap:balance;color:var(--d-ink)}
html body .sm-frase-pie{margin-top:var(--sp-sm);color:var(--d-ink-2);max-width:30ch;line-height:1.45}
@media (min-width:900px){html body .sm-cita{padding-left:calc((100% + clamp(16px,2.4vw,40px)) / 12 * 4)}}

/* 03 · 5+7: entrada a la izquierda, lista compacta en dos columnas a la derecha */
html body .sm-num{list-style:none;margin:0;padding:0;counter-reset:n;border-top:1px solid var(--d-line)}
html body .sm-num li{counter-increment:n;display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;padding:13px 0;border-bottom:1px solid var(--d-line);line-height:1.4}
html body .sm-num li::before{content:counter(n,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-2)}
html body .sm-trabajo .sm-txt{margin-top:var(--sp-md)}
html body .sm-nada{margin-top:var(--sp-lg);padding-top:var(--sp-sm);border-top:1px solid var(--ed-regla);max-width:var(--a-lectura)}
html body .sm-nada h3{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.4;margin:0}
html body .sm-nada p{margin-top:12px;line-height:1.55}
html body .sm-nada p b{display:block;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.15;margin-bottom:var(--sp-xs)}
@media (min-width:700px){
  html body .sm-num{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:clamp(16px,2.4vw,40px)}
}
@media (min-width:900px){
  html body .sm-trabajo .sm-h{grid-column:1/5}
  html body .sm-trabajo-c{grid-column:5/13}
}

/* 04 · una línea de colofón */
html body .sm-form{margin-top:var(--sp-xl);border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);padding:var(--sp-sm) 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--sp-md)}
html body .sm-form h2{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--d-ink-2);line-height:1.4}
html body .sm-form .formacion{list-style:none;margin:0 0 0 auto;padding:0;display:block;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.1}
@media (max-width:599px){html body .sm-form .formacion{margin-left:0;flex-basis:100%}}

/* 05 · transparencia y límites en un solo bloque: el límite manda, el resto son filas */
html body .sm-transp .sm-h h2{max-width:14ch}
html body .sm-lim{margin-top:var(--sp-md);font-family:var(--ed-serif);font-size:var(--t-h3);line-height:1.14;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
html body .sm-lim b{font-weight:400}
html body .sm-transp dl{margin:0}
html body .sm-transp dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:15px 0;border-top:1px solid var(--d-line)}
html body .sm-transp dl>div:last-child{border-bottom:1px solid var(--d-line)}
html body .sm-transp dt{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 .sm-transp dd{margin:0;line-height:1.5}
html body .sm-transp-c>p{margin-top:14px}
@media (min-width:600px){html body .sm-transp dl>div{grid-template-columns:9.5rem minmax(0,1fr);gap:var(--sp-md);align-items:baseline}}
@media (min-width:900px){
  html body .sm-transp .sm-h{grid-column:1/6}
  html body .sm-transp-c{grid-column:6/13}
}

/* ═════════ CÓMO FUNCIONA ═════════
   Tres velocidades: esquema (30 s) → conclusión visible de cada bloque → detalle plegado */
html body .cf-cab{padding-top:var(--sp-xl);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--sp-lg);align-items:end}
html body .cf-cab>*{grid-column:1/-1;min-width:0}
html body .cf-cab h1{margin:0;font-size:var(--t-h1);line-height:.98}
html body .cf-cab .entradilla{margin-top:var(--sp-md);font-size:var(--t-lead);line-height:1.4;max-width:36ch;color:var(--d-ink-2)}
html body .cf-cab .entradilla b{color:var(--d-ink);font-weight:500}
html body .cf .cf-rot{font-family:var(--ed-mono);font-size:var(--t-meta)!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase;line-height:1.4;color:var(--d-ink-2);margin:0}
html body .cf-indice ol{list-style:none;margin:10px 0 0;padding:0;counter-reset:i;border-top:1px solid var(--ed-regla)}
html body .cf-indice li{counter-increment:i;border-bottom:1px solid var(--d-line)}
html body .cf-indice a{display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;min-height:44px;padding:10px 0;color:var(--d-ink);text-decoration:none;font-size:var(--t-small);font-weight:500;line-height:1.3;transition:color .18s}
html body .cf-indice a::before{content:counter(i,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--d-ink-2)}
html body .cf-indice a:hover{color:var(--d-acc)}
@media (min-width:900px){
  html body .cf-cab-t{grid-column:1/8}
  html body .cf-indice{grid-column:9/13}
}

/* En 30 segundos: el recorrido como esquema */
html body .cf-ruta{margin-top:var(--sp-xl)}
html body .cf-ruta .pg-linea{margin-top:var(--sp-md)}
@media (max-width:899px){html body .cf-ruta .pg-linea p{max-width:none}}

html body .cf-sec{margin-top:var(--sp-xl);border-top:1px solid var(--ed-regla);padding-top:var(--sp-sm);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--sp-md);align-items:start}
html body .cf-sec>*{grid-column:1/-1;min-width:0}
html body .cf h2{margin:0}
html body .cf-h h2{font-size:var(--t-h2);line-height:1.04;margin-top:14px;max-width:16ch}
html body .cf .cf-c>*+*{margin-top:var(--sp-md)}
@media (min-width:900px){
  html body .cf-sec>.cf-h{grid-column:1/5;position:sticky;top:104px}
  html body .cf-sec>.cf-c{grid-column:5/13}
}
/* Conclusión visible de cada bloque: una o dos frases en serif */
html body .cf-conc{font-family:var(--ed-serif);font-size:var(--t-h3);line-height:1.18;letter-spacing:-.018em;max-width:30ch;text-wrap:pretty;color:var(--d-ink)}
html body .cf .cf-aviso{color:var(--d-ink-2);font-size:var(--t-small);line-height:1.55}

/* 04 · una sola afirmación grande a todo el ancho, la explicación al margen */
html body .cf-grande{font-family:var(--ed-serif);font-size:var(--t-cita);line-height:1.08;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
html body .cf-ancha .cf-txt{color:var(--d-ink-2)}

/* Pasos numerados (dentro de los plegados de 01 y 05) */
html body .cf-pasos{list-style:none;margin:0;padding:0;counter-reset:p;border-top:1px solid var(--d-line)}
html body .cf-pasos>li{counter-increment:p;display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:0;row-gap:4px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--d-line)}
html body .cf-pasos>li:last-child{border-bottom:0}
html body .cf-pasos>li::before{content:counter(p,decimal-leading-zero);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-2);grid-row:1/3}
html body .cf-pasos>li>:is(b,h3){grid-column:2;font-family:var(--ed-sans);font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0}
html body .cf-pasos>li>:is(span,p){grid-column:2;color:var(--d-ink-2);line-height:1.5}
@media (min-width:1100px){
  html body .cf-pasos>li{grid-template-columns:3.2rem minmax(0,5fr) minmax(0,7fr);column-gap:clamp(16px,2vw,32px)}
  html body .cf-pasos>li::before{grid-row:auto;margin-right:calc(-1 * clamp(16px,2vw,32px))}
  html body .cf-pasos>li>:is(span,p){grid-column:3}
}

/* Criterios (plegado de 02): filas con regla, sin iconos */
html body .cf-crit{list-style:none;margin:0;padding:0;border-top:1px solid var(--d-line)}
html body .cf-crit li{padding:12px 0;border-bottom:1px solid var(--d-line);line-height:1.5}
html body .cf-crit li:last-child{border-bottom:0}
/* Ejemplo de cómo se lee un resultado: dato en mono, no una píldora */
html body .cf .ej{font-family:var(--ed-mono);font-size:var(--t-small);font-weight:500;letter-spacing:-.01em;background:none;border:0;border-bottom:1px solid var(--d-ink);padding:0 0 1px;white-space:normal;color:var(--d-ink)}
html body .cf .ej.no{color:var(--d-warn);border-bottom-color:var(--d-warn)}

/* 03 · casos y 05 · fuentes: tablas de dos columnas con reglas; en móvil, rótulo sobre dato */
html body .cf-casos{margin:0;border-top:1px solid var(--ed-regla)}
html body .cf-casos>div{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:15px 0;border-bottom:1px solid var(--d-line)}
html body .cf-casos dt,html body .cf-fuentes tbody th{font-family:var(--ed-sans);font-weight:600;font-size:var(--t-body);line-height:1.35;letter-spacing:-.005em;text-align:left;color:var(--d-ink)}
html body .cf-casos dd{margin:0;line-height:1.5;color:var(--d-ink-2)}
html body .cf-fuentes{border-collapse:collapse;width:100%;border-top:1px solid var(--ed-regla)}
html body .cf-fuentes thead th{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);text-align:left;padding:10px 20px 10px 0;border-bottom:1px solid var(--ed-regla)}
html body .cf-fuentes tbody :is(th,td){vertical-align:baseline;padding:14px 20px 14px 0;border-bottom:1px solid var(--d-line);line-height:1.5}
html body .cf-fuentes tbody td{color:var(--d-ink-2);padding-right:0}
html body .cf-fuentes tbody th{width:42%}
@media (min-width:600px){html body .cf-casos>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(16px,2.4vw,40px);align-items:baseline}}
@media (max-width:599px){
  html body .cf-fuentes,html body .cf-fuentes tbody,html body .cf-fuentes tr,html body .cf-fuentes :is(th,td){display:block;width:auto}
  html body .cf-fuentes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html body .cf-fuentes tbody tr{padding:14px 0;border-bottom:1px solid var(--d-line)}
  html body .cf-fuentes tbody :is(th,td){padding:0;border:0;width:auto}
  html body .cf-fuentes tbody td{margin-top:4px}
}

/* 05 · niveles de evidencia: los mismos puntos que las fichas (●●● alta, ●●○ media, raya = fuera de escala) */
html body .cf-niv{margin-top:var(--sp-lg)}
html body .cf-niv-h h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;margin:0}
html body .cf-niv-h p{margin-top:10px;color:var(--d-ink-2);max-width:30ch}
html body .cf .niveles{display:block;margin:var(--sp-md) 0 0;border-top:1px solid var(--ed-regla)}
html body .cf .niveles>div{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0;border-top:0;border-bottom:1px solid var(--d-line)}
html body .cf .niveles dt{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.12}
html body .cf-niv-c>.niveles>div:first-child dt{color:var(--d-acc)}
html body .cf .niveles dd{margin:0 0 0 44px;color:var(--d-ink-2);line-height:1.5;max-width:60ch}
html body .cf .nv{display:inline-flex;gap:4px;align-items:center;align-self:center}
html body .cf .nv i{width:8px;height:8px;border-radius:50%!important;border:1px solid currentColor;box-sizing:border-box}
html body .cf .nv i.on{background:currentColor}
html body .cf .cf-niv-mas{border-top:0}
html body .cf .cf-niv-mas .niveles{margin-top:0;border-top:0}
html body .cf .cf-niv-mas .niveles>div:last-child{border-bottom:0}
html body .cf .cf-niv-mas .pg-mas-c,html body .cf .cf-niv-mas{padding:0}
html body .cf .nv.nv-0{width:14px;height:1px;background:currentColor}
@media (min-width:700px){
  html body .cf .niveles>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(16px,2.4vw,40px);align-items:baseline}
  html body .cf .niveles dd{margin-left:0}
}
@media (min-width:900px){
  html body .cf-fichas>.cf-niv{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:start;margin-top:var(--sp-lg)}
  html body .cf-niv-h{grid-column:1/5}
  html body .cf-niv-c{grid-column:5/13}
  html body .cf .niveles{margin-top:0}
  /* el título de la sección no se queda fijo: debajo va la tabla */
  html body .cf-fichas>.cf-h{position:static}
}

/* 06 y 07 · dos declaraciones en paralelo, 7+5 */
html body .cf-par{margin-top:var(--sp-xl);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--sp-xl);align-items:start}
html body .cf-par>section{grid-column:1/-1;min-width:0;border-top:1px solid var(--ed-regla);padding-top:var(--sp-sm)}
html body .cf-par .cf-h h2{max-width:14ch}
html body .cf-par .cf-txt{margin-top:var(--sp-md)}
@media (min-width:900px){
  html body .cf-par>section:first-child{grid-column:1/7}
  html body .cf-par>section:last-child{grid-column:7/13}
}

/* ═════════ LEGALES (solo CSS) ═════════ */
html body main.doc{max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter);padding-block:var(--sp-xl) 0;gap:0;display:flex;flex-direction:column}
html body main.doc>*{max-width:41rem}
html body main.doc [id]{scroll-margin-top:124px}
html body main.doc h1{font-size:var(--t-h1);line-height:.98;margin:0 0 var(--sp-lg);max-width:14ch}
html body main.doc h2{font-family:var(--ed-serif);font-size:var(--t-h2-2);line-height:1.1;margin:var(--sp-lg) 0 0;padding-top:var(--sp-sm);border-top:1px solid var(--ed-regla)}
html body main.doc p{margin:16px 0 0;line-height:1.62}
html body main.doc h2+p,html body main.doc h2+ul,html body main.doc h2+.tablewrap{margin-top:18px}
html body main.doc ul,html body main.doc ol{list-style:none;margin:18px 0 0;padding:0;gap:0;border-top:1px solid var(--d-line)}
html body main.doc li{padding:11px 0;border-bottom:1px solid var(--d-line);line-height:1.5}
html body main.doc li>b:first-child{font-weight:600}
/* Aviso de borrador y datos pendientes: son avisos reales. Regla y color de aviso, sin caja ni amarillo */
html body main.doc .draft{background:none;color:var(--d-ink);border-top:1px solid var(--d-warn);border-bottom:1px solid var(--d-warn);padding:14px 0;margin:0;font-size:var(--t-small);line-height:1.5}
html body main.doc .draft b{color:var(--d-warn);font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-right:.4em}
html body main.doc .pend{background:var(--flag);color:var(--d-ink);font-family:var(--ed-mono);font-size:var(--t-cap);font-weight:500;padding:1px 5px;letter-spacing:.02em}
html body main.doc .fine{margin-top:var(--sp-lg);padding-top:14px;border-top:1px solid var(--d-line);font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
html body main.doc .fine .pend{font-size:inherit}
/* Tablas con reglas */
html body main.doc .tablewrap{margin-top:18px;overflow-x:visible;max-width:none}
html body main.doc table{border-collapse:collapse;width:100%;font-size:var(--t-small);line-height:1.5;border-top:1px solid var(--ed-regla)}
html body main.doc th{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);text-align:left;padding:10px 20px 10px 0;border-bottom:1px solid var(--ed-regla)}
html body main.doc td{vertical-align:top;padding:14px 20px 14px 0;border-bottom:1px solid var(--d-line);color:var(--d-ink)}
html body main.doc :is(th,td):last-child{padding-right:0}
/* En móvil la tabla se lee por filas, sin scroll lateral */
@media (max-width:699px){
  html body main.doc table,html body main.doc tbody,html body main.doc tr,html body main.doc td{display:block}
  html body main.doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html body main.doc tr{padding:16px 0;border-bottom:1px solid var(--d-line)}
  html body main.doc td{padding:0;border:0}
  html body main.doc td+td{margin-top:10px;color:var(--d-ink-2)}
  html body main.doc td:first-child{font-weight:500}
}
/* Índice lateral sobrio en escritorio */
@media (min-width:1024px){
  html body main.doc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:start}
  html body main.doc>*{grid-column:5/13;max-width:41rem}
  html body main.doc>.tablewrap{grid-column:5/13;max-width:none}
  html body main.doc [id]{scroll-margin-top:104px}
  html body main.doc>.doc-indice{grid-column:1/4;grid-row:1/span 60;position:sticky;top:104px;border:0;border-top:1px solid var(--ed-regla);padding:12px 0 0;max-width:none}
  html body .doc-indice 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);padding:0 0 8px;margin:0}
  html body .doc-indice a{display:flex;align-items:center;min-height:36px;padding:4px 0;color:var(--d-ink);text-decoration:none;font-size:var(--t-small);font-weight:500;line-height:1.3;border-top:1px solid var(--d-line);transition:color .18s}
  html body .doc-indice a:hover{color:var(--d-acc)}
}