/* ed-ingredientes: hoja de sección del sistema editorial (ver DESIGN.md)
   Se carga detrás de editorial.css en public/ingredientes/*.
   El HTML de las fichas y del índice lo generan tareas automáticas con plantilla fija:
   todo el diseño sale de aquí, sobre el marcado existente.
     1 · ATLAS (índice): capítulos por familia y filas con regla, no tarjetas
     2 · FICHA: pieza de investigación; reglas, mono para el dato, notas al margen */

/* ════════════════════════════════════════════════════════════════
   1 · ATLAS DE INGREDIENTES (main.gl)
   ════════════════════════════════════════════════════════════════ */
html body main.gl{max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter);padding-block:var(--sp-xl) 0;display:block}

/* Cabecera de la página */
html body main.gl>div:first-child{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:18px;align-items:end}
html body main.gl>div:first-child>*{grid-column:1/-1;margin:0!important}
html body main.gl h1{font-size:var(--t-h1);font-weight:400;letter-spacing:-.03em;line-height:.96;max-width:11ch}
html body main.gl .lede{font-size:var(--t-lead);line-height:1.4;color:var(--d-ink-2);max-width:30ch;margin-top:10px!important}
html body main.gl>div:first-child>p:last-child{font-size:var(--t-small);font-weight:500!important}
html body main.gl>div:first-child>p:last-child a{color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-underline-offset:.3em;display:inline-block;padding-block:10px}
html body main.gl>div:first-child>p:last-child a:hover{color:var(--d-acc)}
@media (min-width:900px){
  html body main.gl>div:first-child{grid-template-rows:1fr auto}
  html body main.gl>div:first-child>h1{grid-column:1/9;grid-row:1/3}
  html body main.gl>div:first-child>.lede{grid-column:9/13;grid-row:1;align-self:end}
  html body main.gl>div:first-child>p:last-child{grid-column:9/13;grid-row:2}
}

/* Buscador y filtros: una línea y enlaces de texto, sin barra fija ni píldoras */
html body .tools{position:static;background:transparent;border:0;border-top:1px solid var(--ed-regla);border-bottom:1px solid var(--d-line);margin-top:var(--sp-lg);padding-block:var(--sp-sm) var(--sp-sm);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-sm) clamp(16px,2.4vw,40px)}
html body .tools .search{background:transparent;border:0;border-bottom:1px solid var(--d-ink);border-radius:0!important;padding:0;gap:10px;max-width:none;align-self:start;color:var(--d-ink-2)}
html body .tools .search:focus-within{border-bottom-color:var(--d-acc)}
html body .tools .search svg{width:18px;height:18px;flex:none}
html body .tools .search input{border:0;padding:13px 0;font-size:var(--t-body);min-height:48px;outline:none}
html body .tools .search input:focus-visible{outline:none}
html body .tools .search:focus-within{outline:2px solid var(--d-acc);outline-offset:4px}
html body .filtros{margin:0;gap:14px}
html body .filtro{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html body .filtro-t{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;padding-top:4px}
html body .filtro-chips{display:flex;flex-wrap:wrap;gap:0 22px;overflow:visible;margin:0;padding:0}
html body .fchip{background:transparent;border:0;border-radius:0!important;padding:0;min-height:44px;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:500;color:var(--d-ink-2);white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.42em;transition:color .18s,text-decoration-color .18s}
html body .fchip:hover{color:var(--d-ink);text-decoration-color:var(--d-line)}
html body .fchip[aria-pressed="true"]{background:transparent;color:var(--d-ink);font-weight:600;text-decoration-color:var(--d-acc)}
html body .fchip:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
html body .filtro-n{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-acc);margin:0}
@media (min-width:900px){
  html body .tools{grid-template-columns:repeat(12,minmax(0,1fr));padding-block:var(--sp-md) var(--sp-sm)}
  html body .tools .search{grid-column:1/6}
  html body .filtros{grid-column:7/13}
}
@media (min-width:1200px){
  html body .tools .search{grid-column:1/5}
  html body .filtros{grid-column:6/13}
  html body .filtro{grid-template-columns:11.5rem minmax(0,1fr);align-items:baseline}
  html body .filtro-n{padding-left:11.5rem}
}

/* Capítulo = familia */
html body .cat{display:block;margin-top:var(--sp-sec);border-top:1px solid var(--ed-regla);padding-top:16px;scroll-margin-top:96px}
html body .cat-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;gap:var(--sp-md);padding-bottom:var(--sp-md)}
html body .cat-head h2{font-size:var(--t-h2);line-height:1;max-width:14ch}
html body .cat-head span{order:-1;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 .gl .grid{display:block}

/* Fila = ingrediente */
html body .ing{position:relative;background:transparent;border:0;border-top:1px solid var(--d-line);border-radius:0;padding:var(--sp-md) 0 var(--sp-sm);display:grid;gap:0 16px;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"n f" "w f" "t t" "d d" "u u" "m m" "a a";scroll-margin-top:96px;overflow:visible}
html body .ing:has(a.more):hover{border-color:var(--d-line)}
html body .ing h3{grid-area:n;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.022em;line-height:1.04;text-wrap:balance;hyphens:auto;transition:color .18s}
html body .ing:has(a.more:hover) h3,html body .ing:has(a.ing-foto:hover) h3{color:var(--d-acc)}
html body .ing .when{grid-area:w;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;color:var(--d-ink-2);opacity:1;margin-top:8px}
html body .ing .tag{grid-area:t;font-size:var(--t-body);font-weight:600;line-height:1.35;color:var(--d-ink);margin-top:16px}
html body .ing .desc{grid-area:d;font-size:var(--t-small);line-height:1.55;color:var(--d-ink-2);margin-top:6px;max-width:58ch}
html body .ing .usos.mini{grid-area:u;display:block;margin-top:12px;font-family:var(--ed-mono);font-size:var(--t-meta);letter-spacing:.03em;line-height:1.7;color:var(--d-ink-3);text-transform:uppercase}
html body .ing .usos.mini .uso{display:inline;background:none;padding:0;font:inherit;color:inherit;letter-spacing:inherit}
html body .ing .usos.mini .uso svg{display:none}
html body .ing .usos.mini .uso{white-space:nowrap}
html body .ing .usos.mini .uso:not(:last-child)::after{content:"·";display:inline-block;margin:0 .7em}
html body .ing .more{grid-area:m;justify-self:start;margin-top:8px;padding:12px 0 4px;font-size:var(--t-small);font-weight:600;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .ing .more:hover{color:var(--d-acc)}
/* toda la fila lleva a la ficha: el enlace «Ver ficha» se extiende sobre ella */
html body .ing a.more::after{content:"";position:absolute;inset:0}
html body .ing .more.off{color:var(--d-ink-3);text-decoration:none;opacity:1}
html body .ing .al-test{grid-area:a;justify-self:start;position:relative;z-index:1;margin:0;padding:8px 0;font-size:var(--t-cap);font-weight:500;color:var(--d-ink-2);text-decoration-color:var(--d-line)}
html body .ing .al-test:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
/* La placa de PubChem, pequeña, hace de miniatura; la foto solo abre el capítulo */
html body .ing .ing-foto{grid-area:f;display:block;margin:0;aspect-ratio:auto;background:none;align-self:start}
html body .ing .ing-foto>img{display:none}
html body .ing .ing-foto .placa{position:static;width:88px;aspect-ratio:1000/560;padding:4px;background:#FFFFFF;border:1px solid var(--d-line)}
html body .ing .ing-foto .placa.sola{position:static;inset:auto;width:88px;aspect-ratio:1000/560}

/* Móvil: la foto del primer ingrediente abre la familia, a sangre */
@media (max-width:759px){
  html body .ing:first-child{grid-template-areas:"f f" "n n" "w w" "t t" "d d" "u u" "m m" "a a";border-top:0;padding-top:0}
  html body .ing:first-child .ing-foto{position:relative;margin:0 calc(-1 * var(--gutter)) 34px;background:var(--fam,var(--ed-papel-2))}
  html body .ing:first-child .ing-foto>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  html body .ing:first-child .ing-foto .placa{position:absolute;right:var(--gutter);bottom:-18px;width:38%;max-width:180px;padding:5px}
  html body .cat:not(:has(.ing:first-child:not([hidden]))) .ing:not([hidden]){border-top:1px solid var(--d-line)}
}
/* Tableta: nombre a la izquierda, texto a la derecha */
@media (min-width:760px){
  html body .ing{grid-template-columns:minmax(0,4fr) minmax(0,7fr) 104px;column-gap:clamp(20px,2.6vw,40px);grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:"n w f" "n t f" "n d f" "n u f" "n m f" "n a f";padding:var(--sp-md) 0 var(--sp-md)}
  html body .ing h3{align-self:start}
  html body .ing .ing-foto,html body .ing:first-child .ing-foto{position:static}
  html body .ing .when{margin-top:.55em}
  html body .ing .tag{margin-top:8px}
  html body .ing .ing-foto .placa,html body .ing .ing-foto .placa.sola{width:104px}
  /* una imagen por familia, como figura al margen del titular del capítulo */
  html body .ing:first-child .ing-foto>img{display:block;position:absolute;right:0;bottom:calc(100% + clamp(22px,3vw,40px));width:clamp(190px,24vw,300px);height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--fam,var(--ed-papel-2))}
  html body .cat:has(.ing:first-child:not([hidden])) .cat-head{min-height:calc(clamp(190px,24vw,300px) * .75 + clamp(22px,3vw,40px) + 8px);padding-right:calc(clamp(190px,24vw,300px) + 32px)}
}
/* Escritorio: fila a 12 columnas · nombre · estructura · qué hace · cuándo y enlace */
@media (min-width:1100px){
  html body .ing{grid-template-columns:minmax(0,3.3fr) 120px minmax(0,5fr) minmax(0,2.5fr);grid-template-rows:auto auto 1fr;
    grid-template-areas:"n f t w" "n f d m" "n f u a";padding:var(--sp-md) 0 var(--sp-md)}
  html body .ing .ing-foto .placa,html body .ing .ing-foto .placa.sola{width:120px}
  html body .ing .when{margin-top:.5em;justify-self:end;text-align:right}
  html body .ing .tag{margin-top:.2em;font-size:var(--t-body)}
  html body .ing .more{justify-self:end;margin-top:0;padding:10px 0 4px}
  html body .ing .al-test{justify-self:end;text-align:right;max-width:22ch}
}

html body .gl .empty{margin-top:var(--sp-sec);font-family:var(--ed-serif);font-size:var(--t-h3);font-weight:400;color:var(--d-ink);max-width:24ch;line-height:1.15}
html body .gl-cta{margin-top:var(--sp-pausa);border-top:1px solid var(--ed-regla);padding-top:var(--sp-md);gap:14px}
html body .gl-cta h2{font-size:var(--t-h2);line-height:1.02;max-width:14ch}
html body .gl-cta p{font-size:var(--t-lead);line-height:1.42;color:var(--d-ink-2);max-width:38ch}
html body .gl-cta-row{margin-top:14px;gap:14px 20px}
html body .gl-cta-row small{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2)}
@media (min-width:900px){
  html body .gl-cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:start}
  html body .gl-cta h2{grid-column:1/7;grid-row:1/3}
  html body .gl-cta p{grid-column:8/13}
  html body .gl-cta-row{grid-column:8/13}
}

/* ════════════════════════════════════════════════════════════════
   2 · FICHA (main > .wrap)
   ════════════════════════════════════════════════════════════════ */
html body main>.wrap{max-width:calc(var(--a-amplio) + 2 * var(--gutter));padding-inline:var(--gutter);padding-block:var(--sp-lg) 0;display:flex;flex-direction:column;gap:0;counter-reset:sec;
  --zone:var(--d-acc);--hot:var(--d-warn);--track:var(--d-line);--muted:var(--d-ink-3);--ink:var(--d-ink);--card:transparent;--line:var(--d-line)}
html body main>.wrap p{max-width:var(--a-lectura)}

/* ── Cabecera ── */
html body .wrap>header{display:block}
html body .wrap .crumbs{margin:0}
html body .wrap .revision{margin:8px 0 0;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-ink-2)}
html body .wrap .revision a{color:inherit;text-decoration:underline;text-decoration-color:var(--d-acc);text-underline-offset:.3em}
html body .wrap .revision a:hover{color:var(--d-acc)}
html body .wrap .hero{display:block;margin-top:var(--sp-lg)}
html body .wrap .hero h1{font-size:var(--t-h1);font-weight:400;letter-spacing:-.035em;line-height:.94;hyphens:auto;overflow-wrap:break-word}
html body .wrap .ident{margin-top:var(--sp-md);padding-top:12px;border-top:1px solid var(--ed-regla);display:flex;flex-wrap:wrap;gap:4px 28px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-3)}
html body .wrap .ident b{font-weight:500;color:var(--d-ink);text-transform:none;letter-spacing:0;font-size:var(--t-cap);margin-left:.35em}
html body .wrap .lede{margin-top:var(--sp-md);font-size:var(--t-lead);line-height:1.42;color:var(--d-ink);max-width:34em}
html body .wrap .lede-2{margin-top:12px;font-size:var(--t-body);color:var(--d-ink-2);max-width:var(--a-lectura)}
/* superíndices de cita: número en mono, sin descolocar la línea */
html body .wrap sup.ref{font-family:var(--ed-mono);font-size:.64em;font-weight:500;line-height:0;vertical-align:super;letter-spacing:0;margin-left:1px;color:var(--d-ink-3);white-space:nowrap}
html body .wrap sup.ref a{color:var(--d-ink-3);text-decoration:none;padding:.35em .05em}
/* cita pegada a un enlace: se separa lo justo para que no se pisen los dos objetivos táctiles */
html body .wrap :is(.col,.sn-col) li>a.ilink + sup.ref{margin-left:.85em}
html body .wrap sup.ref a:hover{color:var(--d-acc);text-decoration:underline}

/* La dosis de cabecera: un dato, no una caja oscura */
html body .wrap .stat{background:transparent!important;color:var(--d-ink);border-radius:0;padding:14px 0 0;margin-top:var(--sp-md);border-top:1px solid var(--d-line);display:grid;grid-template-columns:minmax(0,1fr);gap:6px 28px;align-items:start;justify-content:start}
html body .wrap .stat span{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);opacity:1}
html body .wrap .stat b{font-family:var(--ed-mono);font-weight:500;font-size:var(--t-h2);letter-spacing:-.045em;line-height:1;color:var(--d-acc);font-variant-numeric:tabular-nums;overflow-wrap:break-word;min-width:0}
html body .wrap .stat b.stat-txt{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h2);letter-spacing:-.02em;white-space:normal;color:var(--d-ink)}
html body .wrap .stat p{font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2);opacity:1;max-width:46ch}
@media (min-width:620px){
  html body .wrap .stat{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr}
  html body .wrap .stat span{grid-column:1;grid-row:1;max-width:22ch}
  html body .wrap .stat b{grid-column:1;grid-row:2}
  html body .wrap .stat p{grid-column:2;grid-row:1/3;padding-top:2px}
}

/* Figura: materia prima + placa de estructura, con pie */
html body .wrap .mp{margin:var(--sp-lg) 0 0;display:block}
html body .wrap .mp .lienzo{aspect-ratio:4/3;background:var(--fam,var(--ed-papel-2))}
html body .wrap .mp .lienzo .placa{background:#FFFFFF;border:1px solid var(--d-line);padding:6px;right:14px;bottom:-26px;width:min(44%,300px)}
html body .wrap .mp .lienzo .placa.sola{right:auto;bottom:auto}
html body .wrap .mp figcaption{margin-top:14px;padding-right:min(48%,330px);font-size:var(--t-cap);line-height:1.45;color:var(--d-ink-2);display:flex;flex-direction:column;gap:3px}
html body .wrap .mp:not(:has(.placa)) figcaption{padding-right:0}
html body .wrap .mp figcaption b{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink);display:block;margin-bottom:2px}
html body .wrap .mp figcaption span + span{color:var(--d-ink-3)}
html body .wrap .mp figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--d-line)}
html body .wrap .mp figcaption a:hover{color:var(--d-acc)}
html body .wrap .actua{margin:10px 0 6px;gap:10px}
html body .wrap .actua figcaption{font-size:var(--t-cap);color:var(--d-ink-2)}
@media (min-width:760px) and (max-width:1079px){html body .wrap .mp .lienzo{aspect-ratio:16/9}}
@media (max-width:759px){
  html body .wrap .mp{margin-inline:calc(-1 * var(--gutter))}
  html body .wrap .mp .lienzo .placa{right:var(--gutter);width:46%;bottom:-22px}
  html body .wrap .mp figcaption{padding:0 var(--gutter);margin-top:var(--sp-md)}
}

/* «Se usa en productos para» · «Problemas relacionados» · avisos: hoja de datos con reglas */
html body .wrap .usos-blq,html body .wrap .prob-rel{background:transparent;border-radius:0;padding:14px 0 0;margin-top:var(--sp-lg);border-top:1px solid var(--d-line);display:grid;grid-template-columns:minmax(0,1fr);gap:10px!important}
html body .wrap .prob-rel{margin-top:var(--sp-md)}
html body .wrap :is(.usos-blq,.prob-rel)>h2{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.5;color:var(--d-ink-2)}
html body .wrap .usos{display:block;font-family:var(--ed-serif);font-size:var(--t-h3);line-height:1.3;letter-spacing:-.015em}
html body .wrap .usos .uso{display:inline;background:none;padding:0;font:inherit;letter-spacing:inherit;color:var(--d-ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .18s,text-decoration-color .18s}
html body .wrap .usos .uso svg{display:none}
html body .wrap .usos .uso{white-space:nowrap}
html body .wrap .usos a.uso:hover{background:none;color:var(--d-acc);text-decoration-color:var(--d-acc)}
html body .wrap .usos .uso:not(:last-child)::after{content:"·";display:inline-block;margin:0 .42em;color:var(--d-ink-3)}
html body .wrap .usos-nota{font-size:var(--t-cap);color:var(--d-ink-2)}
html body .wrap .usos-nota a{color:var(--d-ink)}
html body .wrap .carnet{display:block;border-top:0;padding-top:0;margin-top:8px}
html body .wrap .carnet div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 0;border-top:1px solid var(--d-line)}
html body .wrap .carnet small{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2);flex:1 1 9em;min-width:0;line-height:1.5}
html body .wrap .carnet b{font-weight:600;font-size:var(--t-body);text-align:right;flex:1 1 9em;min-width:0;overflow-wrap:anywhere}
html body .wrap .prob-chips{display:flex;flex-wrap:wrap;gap:0 24px}
html body .wrap .prob-chips a{display:inline-flex;flex-direction:row;align-items:center;min-height:44px;padding:0;background:none;border:0;border-radius:0!important;font-size:var(--t-small);font-weight:500;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .wrap .prob-chips a:hover{color:var(--d-acc)}
html body .wrap header .chips{display:block;margin-top:var(--sp-md);border-top:1px solid var(--d-line)}
html body .wrap header .chip{display:block;background:none;border:0;border-bottom:1px solid var(--d-line);border-radius:0!important;padding:11px 0;font-size:var(--t-small);font-weight:400;line-height:1.4;color:var(--d-ink-2)}
html body .wrap header .chip b{color:var(--d-ink);font-weight:600}
@media (min-width:620px){
  html body .wrap .usos-blq,html body .wrap .prob-rel{grid-template-columns:11.5rem minmax(0,1fr);column-gap:24px;align-items:baseline}
  html body .wrap :is(.usos-blq,.prob-rel)>h2{max-width:9.5rem}
  html body .wrap :is(.usos-blq,.prob-rel)>:not(h2){grid-column:2}
  html body .wrap header .chips{padding-left:calc(11.5rem + 24px);border-top:1px solid var(--d-line)}
  html body .wrap header .chip:last-child{border-bottom:0}
}
/* accesos (móvil y tableta) */
html body .wrap .accesos{margin-top:var(--sp-md);gap:0 22px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
html body .wrap .accesos a{display:inline-flex;align-items:center;min-height:44px;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-underline-offset:.35em}
html body .wrap .accesos a:hover{color:var(--d-acc)}
/* «¿Tiene sentido para tu piel?»: nota con regla de tinta, sin fondo */
html body .wrap .tiene-sentido{margin-top:var(--sp-md);background:transparent;color:var(--d-ink);border-radius:0;border-top:1px solid var(--ed-regla);padding:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}
html body .wrap .tiene-sentido p{font-size:var(--t-small);line-height:1.5;max-width:52ch}
html body .wrap .tiene-sentido b{color:var(--d-ink);font-weight:600;display:block;font-family:var(--ed-serif);font-weight:400!important;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
html body .wrap .tiene-sentido span{color:var(--d-ink-2)}
html body .wrap .tiene-sentido a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;background:none;color:var(--d-ink);padding:0;border-radius:0!important;font-weight:600;white-space:normal;text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .wrap .tiene-sentido a:hover{background:none;color:var(--d-acc)}

/* ── Secciones: capítulos con regla de tinta y numeración en mono ── */
html body .wrap>section,html body .wrap>.tip,html body .wrap>.cta,html body .wrap>.author{margin-top:var(--sp-sec);border-top:1px solid var(--ed-regla);padding-top:16px}
html body .wrap>section{counter-increment:sec;gap:var(--sp-md)}
html body .wrap>section>h2{font-size:var(--t-h2);line-height:1.02;max-width:18ch;margin-bottom:var(--sp-xs)}
html body .wrap>section>h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;line-height:1.4;color:var(--d-ink-2);margin-bottom:var(--sp-md)}
html body .wrap .pull{font-size:var(--t-body);line-height:1.55;color:var(--d-ink);max-width:36em}
html body .wrap .pull b{color:var(--d-ink);font-weight:600}
html body .wrap section[aria-labelledby="dosis"]:has(.gauge .ceil:not([style*="background"])) .pull b{color:var(--d-warn)}
html body .wrap .fine{font-size:var(--t-cap);color:var(--d-ink-2)}
html body .wrap .fine a{color:var(--d-ink)}

/* Gráfico de dosis: plano, sin caja; rango en cobalto, límite legal en rojo aviso */
html body .wrap .gauge{background:transparent;border:0;border-radius:0;padding:10px 0 0;max-width:820px}
html body .wrap .gauge .scale{height:46px}
html body .wrap .gauge .track{top:22px;height:10px;background:var(--d-line);border-radius:0!important}
html body .wrap .gauge .zone{top:22px;height:10px;border-radius:0!important}
html body .wrap .gauge .ceil{top:6px;height:34px;width:2px;margin-left:-1px;border-radius:0!important}
html body .wrap .gauge .scale::before{content:"";position:absolute;left:0;top:14px;height:26px;width:1px;background:var(--d-ink-3)}
html body .wrap .gauge .ticks{height:22px;margin-top:4px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;color:var(--d-ink-2)}
html body .wrap .gauge .ticks span{white-space:nowrap}
html body .wrap .gauge .legend{margin-top:18px;padding-top:12px;border-top:1px solid var(--d-line);gap:6px 28px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.01em;line-height:1.5;color:var(--d-ink)}
html body .wrap .gauge .legend i{width:14px;height:10px;border-radius:0!important;margin-right:9px;vertical-align:-1px}

/* Desplegables de estudios: regla, sin caja */
html body .wrap details{background:transparent;border:0;border-radius:0;padding:0}
html body .wrap summary{border-radius:0!important}
html body .wrap details.studies{margin-top:4px;border-top:1px solid var(--d-line);max-width:var(--a-lectura)}
html body .wrap details.studies summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink);transition:color .18s}
html body .wrap details.studies summary:hover{color:var(--d-acc)}
html body .wrap details.studies summary::after{content:"+";font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-acc)}
html body .wrap details.studies[open] summary::after{content:"−"}
html body .wrap details.studies p{margin:2px 0 14px;font-size:var(--t-small);line-height:1.6;color:var(--d-ink-2)}
html body .wrap details.studies p b{color:var(--d-ink)}

/* Qué sabemos / qué no: dos columnas de texto */
html body .wrap .sn,html body .wrap .two{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-md) clamp(24px,4vw,56px)}
html body .wrap :is(.sn-col,.col){background:transparent!important;border:0;border-top:1px solid var(--ed-regla);border-radius:0;padding:12px 0 0;display:block}
html body .wrap :is(.sn-col,.col) h3{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--d-ink);margin:0 0 6px}
html body .wrap :is(.sn-col,.col) h3::before{font-weight:500;margin-right:.7em}
html body .wrap :is(.sn-col.si,.col.ok) h3::before{content:"+";content:"+" / "";color:var(--d-acc)}
html body .wrap .sn-col.no h3::before{content:"?";content:"?" / "";color:var(--d-warn)}
html body .wrap .col.no h3::before{content:"!";content:"!" / "";color:var(--d-warn)}
html body .wrap :is(.sn-col,.col) ul{list-style:none;margin:0;padding:0;display:block;font-size:var(--t-body);line-height:1.55}
html body .wrap :is(.sn-col,.col) li{display:block;padding:12px 0;border-top:1px solid var(--d-line);max-width:none}
html body .wrap :is(.sn-col,.col) li:first-child{border-top:0}
html body .wrap .sn-col li::before{content:none}
@media (min-width:700px){html body .wrap .sn,html body .wrap .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Para qué sirve / lo que se dice: entradas con regla, no tarjetas */
html body .wrap .evs{gap:0;margin-top:14px;border-bottom:1px solid var(--d-line)}
html body .wrap .ev{background:transparent;border:0;border-top:1px solid var(--d-line);border-radius:0;padding:var(--sp-md) 0 var(--sp-md);display:grid;grid-template-columns:minmax(0,1fr)!important;gap:0;scroll-margin-top:96px}
html body .wrap .evs .ev:first-child{border-top-color:var(--ed-regla)}
html body .wrap .ev h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
html body .wrap .ev .badge{justify-self:start;align-self:start;display:inline-flex;align-items:center;margin-top:12px;padding:0;background:none;border:0;border-radius:0!important;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.45;text-align:left;white-space:normal;max-width:24em;color:var(--d-ink-2)}
html body .wrap .ev .badge.b-hi{color:var(--d-acc)}
html body .wrap .ev .badge.b-lo{color:var(--d-warn)}
/* nivel de evidencia en tres puntos (solo donde el rótulo es un nivel) */
html body .wrap .ev .badge:is(.b-hi,.b-md)::before{content:"";flex:none;width:32px;height:8px;margin-right:10px;
  background:radial-gradient(circle,var(--p1) 0 3.2px,transparent 3.7px) 0 50%/8px 8px no-repeat,radial-gradient(circle,var(--p2) 0 3.2px,transparent 3.7px) 12px 50%/8px 8px no-repeat,radial-gradient(circle,transparent 0 2.2px,var(--p3) 2.6px 3.3px,transparent 3.8px) 24px 50%/8px 8px no-repeat;
  --p1:currentColor;--p2:currentColor;--p3:currentColor}
html body .wrap .ev .badge.b-hi::before{background:radial-gradient(circle,currentColor 0 3.2px,transparent 3.7px) 0 50%/12px 8px repeat-x}
html body .wrap section[aria-labelledby="mitos"] .ev .badge::before{content:"";flex:none;width:14px;height:1px;margin-right:10px;background:currentColor}
html body .wrap .ev .badge.b-st::before{content:"";flex:none;width:14px;height:1px;margin-right:10px;background:currentColor}
html body .wrap .ev>p{margin-top:14px;font-size:var(--t-body);line-height:1.58;color:var(--d-ink-2)}
html body .wrap .ev>p b{color:var(--d-ink)}
html body .wrap .ev details.studies{margin-top:14px;max-width:none}
html body .wrap .ev .meta{margin-top:6px;gap:0;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--d-ink-3);line-height:1.6}
html body .wrap .ev .pill{background:none;padding:0;border-radius:0!important;font:inherit;color:inherit}
html body .wrap .ev .pill + .pill::before{content:"·";margin:0 .7em}
@media (min-width:760px){
  html body .wrap .ev{grid-template-columns:minmax(0,5fr) minmax(0,8fr)!important;grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,48px);padding:var(--sp-md) 0 var(--sp-md)}
  html body .wrap .ev h3{grid-column:1;grid-row:1}
  html body .wrap .ev .badge{grid-column:1;grid-row:2}
  html body .wrap .ev>p{grid-column:2;grid-row:1/3;margin-top:.2em}
  html body .wrap .ev details.studies{grid-column:2;grid-row:3}
  html body .wrap .ev .meta{grid-column:2;grid-row:4}
}

/* Cómo usarlo: lista de definiciones a dos columnas */
html body .wrap .grid4{display:block;border-top:1px solid var(--ed-regla);margin-top:6px;max-width:none}
html body .wrap .cell{position:relative;background:transparent;border:0;border-bottom:1px solid var(--d-line);border-radius:0;padding:16px 0 18px;font-size:var(--t-body);line-height:1.58;color:var(--d-ink)}
html body .wrap .cell>span{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:6px}
@media (min-width:700px){
  html body .wrap .cell{padding:18px 0 20px clamp(10.5rem,24%,15rem);max-width:calc(clamp(10.5rem,24%,15rem) + 62ch)}
  html body .wrap .cell>span{position:absolute;left:0;top:22px;width:clamp(9rem,21%,13.5rem);margin:0}
}
/* Para quién · cómo leerlo en el envase: notas con regla */
html body .wrap .para-quien{background:transparent;border:0;border-top:1px solid var(--ed-regla);border-radius:0;padding:14px 0 0;margin-top:var(--sp-md);color:var(--d-ink);font-size:var(--t-body);line-height:1.58}
html body .wrap .para-quien 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);margin-bottom:8px}
html body .wrap>.tip{background:transparent;color:var(--d-ink);border-radius:0;padding:16px 0 0;gap:14px}
html body .wrap>.tip h3{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;color:var(--d-ink);margin-bottom:6px}
html body .wrap>.tip p{opacity:1;color:var(--d-ink-2);font-size:var(--t-body);line-height:1.58}
html body .wrap code{font-family:var(--ed-mono);font-size:.88em;font-weight:500;color:var(--d-ink);background:var(--ed-papel-2);padding:.08em .34em;border-radius:0!important;overflow-wrap:anywhere}
@media (min-width:760px){
  html body .wrap>.tip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:clamp(24px,3vw,48px);row-gap:0}
  html body .wrap>.tip h3{grid-column:1;grid-row:1/span 12}
  html body .wrap>.tip p{grid-column:2}
  html body .wrap>.tip p + p{margin-top:12px}
}

/* Cierre hacia el análisis: nota con regla y botón de tinta */
html body .wrap>.cta{background:transparent;color:var(--d-ink);border-radius:0;padding:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-md) clamp(24px,3vw,48px);align-items:end}
html body .wrap>.cta h2{color:var(--d-ink);font-size:var(--t-h2);line-height:1.02;max-width:14ch}
html body .wrap>.cta p{opacity:1;color:var(--d-ink-2);margin-top:14px;max-width:46ch}
html body .wrap>.cta>a{justify-self:start;display:inline-flex;align-items:center;min-height:48px;background:var(--d-ink);color:var(--d-bg);border:1px solid var(--d-ink);border-radius:2px!important;padding:14px 22px;font-weight:600;font-size:var(--t-small);line-height:1.1;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
html body .wrap>.cta>a:hover{background:var(--d-acc);border-color:var(--d-acc);color:var(--d-bg)}
@media (min-width:760px){html body .wrap>.cta{grid-template-columns:minmax(0,1fr) auto}}

/* Preguntas frecuentes */
html body .wrap .faqs{gap:0;border-top:1px solid var(--ed-regla);border-bottom:1px solid var(--d-line);margin-top:6px}
html body .wrap .faqs details{border-top:1px solid var(--d-line)}
html body .wrap .faqs details:first-child{border-top:0}
html body .wrap .faqs summary{align-items:baseline;gap:24px;padding:18px 0;min-height:44px;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-lead);letter-spacing:-.015em;line-height:1.18;color:var(--d-ink);transition:color .18s}
html body .wrap .faqs summary:hover{color:var(--d-acc)}
html body .wrap .faqs summary::after{font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-acc);flex:none}
html body .wrap .faqs details p{margin:0 0 14px;color:var(--d-ink-2);font-size:var(--t-body);line-height:1.6}
html body .wrap .faqs details p:last-child{margin-bottom:var(--sp-md)}

/* Estudios citados: referencias en cuerpo pequeño, número en mono */
html body .wrap .refs{display:block;padding-left:2.6em;margin-top:6px;font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2);border-top:1px solid var(--ed-regla);padding-top:16px}
html body .wrap .refs li{max-width:none;margin:0 0 10px;padding-left:.3em;break-inside:avoid;overflow-wrap:anywhere}
html body .wrap .refs li::marker{font-family:var(--ed-mono);font-size:.92em;font-weight:500;color:var(--d-ink-3)}
html body .wrap .refs li:target{background:var(--d-acc-soft);border-radius:0;outline:6px solid var(--d-acc-soft)}
html body .wrap .refs a{color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-line);text-underline-offset:.22em}
html body .wrap .refs a:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
@media (min-width:860px){html body .wrap .refs{columns:2;column-gap:clamp(40px,5vw,72px)}}

/* Firma */
html body .wrap>.author{background:transparent;border:0;border-top:1px solid var(--ed-regla);border-radius:0;padding:18px 0 0;gap:16px;align-items:flex-start}
html body .wrap .firma-foto{width:56px;height:56px;border-radius:0!important;object-fit:cover}
html body .wrap>.author .fine{font-size:var(--t-cap);line-height:1.5;color:var(--d-ink-2)}
html body .wrap>.author .fine b{color:var(--d-ink)!important;font-weight:600}
html body .wrap>.author .fine + .fine{margin-top:4px}

/* ── Escritorio: 12 columnas; ficha en 1–8 (cabecera en 1–9) e índice fijo en 10–12 ── */
@media (min-width:1080px){
  html body main>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:0;align-items:start}
  html body main>.wrap>*{grid-column:1/9;min-width:0}
  html body main>.wrap>header{grid-column:1/10;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);grid-auto-rows:auto;align-items:start}
  html body main>.wrap>header>*{grid-column:1/-1}
  /* el titular ocupa todo el ancho; debajo, entradilla y resumen a la izquierda y la figura a la derecha */
  html body main>.wrap>header .hero,html body main>.wrap>header .hero>div:first-child{display:contents}
  html body main>.wrap>header .hero h1{grid-column:1/-1;margin-top:var(--sp-lg);font-size:var(--t-h1)}
  html body main>.wrap>header .ident{grid-column:1/-1}
  html body main>.wrap>header :is(.lede,.lede-2,.stat,.cf-res){grid-column:1/7}
  html body main>.wrap>header figure.mp{display:block;grid-column:7/10;grid-row:5/span 3;margin:var(--sp-md) 0 0;align-self:start}
  html body main>.wrap>header figure.mp figcaption{padding-right:0;margin-top:38px}
  html body main>.wrap>header :is(.prob-rel,.tiene-sentido){grid-column:1/9}
  html body main>.wrap section p,html body main>.wrap section li{max-width:var(--a-lectura)}
  html body main>.wrap :is(.sn-col,.col) li,html body main>.wrap .refs li{max-width:none}
}

/* ════════════════════════════════════════════════════════════════
   3 · CAPAS DE LECTURA (lo que añade scripts/capas-fichas.py: clases cf-*)
   Entender en 30 segundos · profundizar · verificar
   ════════════════════════════════════════════════════════════════ */
html{--cf-top:62px}
/* lo que el resumen y el índice hacen innecesario sigue en el HTML, pero no se ve */
html body .wrap>header:has(.cf-res) :is(.usos-blq,.chips,.accesos,.stat>span,.stat>b){display:none!important}
html body main>.wrap:has(>.cf-nav)>.f-lat{display:none!important}
html body .wrap>header:has(.cf-res) .stat{display:block;border-top:0;margin-top:12px;padding:0}
html body .wrap>header:has(.cf-res) .stat p{font-size:var(--t-body);line-height:1.55;color:var(--d-ink-2);max-width:var(--a-lectura)}
html body .wrap .cf-br{display:block;height:.8em}
html body .wrap .cf-h{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--d-ink);margin:0}
html body .wrap :is(h2[id],.ev[id],.refs li,.cf-res,#para-quien,sup.ref){scroll-margin-top:calc(var(--cf-top) + 64px)}
@media (min-width:1080px){html body .wrap :is(h2[id],.ev[id],.refs li,.cf-res,#para-quien,sup.ref){scroll-margin-top:calc(var(--cf-top) + 28px)}}
html body .wrap .crumbs a{display:inline-block;padding-block:6px}

/* ── A · En 30 segundos: lista de definición con reglas ── */
html body .wrap .cf-res{margin-top:var(--sp-md);border-top:1px solid var(--ed-regla);padding-top:12px}
html body .wrap .cf-res dl{margin:10px 0 0}
html body .wrap .cf-res dl>div{display:grid;grid-template-columns:7.4rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--d-line)}
html body .wrap .cf-res dt{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.45;color:var(--d-ink-2)}
html body .wrap .cf-res dd{margin:0;font-size:var(--t-small);line-height:1.45;color:var(--d-ink);min-width:0;overflow-wrap:break-word}
html body .wrap .cf-res dd b{font-weight:600}
html body .wrap .cf-res dd small{display:block;margin-top:3px;font-size:var(--t-cap);line-height:1.4;color:var(--d-ink-2)}
html body .wrap .cf-res dd a{color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-line);text-decoration-thickness:1px;text-underline-offset:.26em;padding-block:5px}
html body .wrap .cf-res dd a:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
html body .wrap .cf-res .cf-usos a{display:inline-block;white-space:nowrap}
html body .wrap .cf-res .cf-usos a:not(:last-child)::after{content:"·";display:inline-block;margin:0 .5em;color:var(--d-ink-3);text-decoration:none}
html body .wrap .cf-res .cf-dato{font-family:var(--ed-mono);font-weight:500;font-size:var(--t-h3);letter-spacing:-.04em;line-height:1.05;color:var(--d-acc);font-variant-numeric:tabular-nums}
html body .wrap .cf-res .cf-niv.b-hi{color:var(--d-acc)}
html body .wrap .cf-res-n{margin:0;padding-top:10px;border-top:1px solid var(--d-line);font-size:var(--t-cap)}
html body .wrap .cf-res-n a{display:inline-block;padding-block:8px;color:var(--d-ink-2);text-decoration:underline;text-decoration-color:var(--d-line);text-underline-offset:.26em}
html body .wrap .cf-res-n a:hover{color:var(--d-acc)}
@media (min-width:520px){html body .wrap .cf-res dl>div{grid-template-columns:10.5rem minmax(0,1fr);column-gap:24px}}

/* ── Índice de la ficha ── */
html body .cf-nav{font-family:var(--ed-sans)}
html body .cf-nav details{background:transparent;border:0;padding:0}
html body .cf-nav summary{list-style:none;display:flex;align-items:center;justify-content:flex-start;gap:0;min-height:46px;cursor:pointer;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 .cf-nav summary::-webkit-details-marker{display:none}
html body .cf-nav summary b{font-weight:500;color:var(--d-ink)}
html body .cf-nav summary span{white-space:pre}
html body .cf-nav summary::after{content:"↓";margin-left:auto;color:var(--d-acc);font-size:var(--t-small)}
html body .cf-nav details[open] summary::after{content:"↑"}
html body .cf-nav summary:focus-visible{outline:2px solid var(--d-acc);outline-offset:-2px}
html body .cf-nav ol{list-style:none;margin:0;padding:0}
html body .cf-nav ol a{display:flex;align-items:center;min-height:44px;padding:0 0 0 14px;border-left:1px solid var(--d-line);font-size:var(--t-small);font-weight:500;line-height:1.25;color:var(--d-ink-2);text-decoration:none;transition:color .18s,border-color .18s}
html body .cf-nav ol a:hover{color:var(--d-ink)}
html body .cf-nav ol a[aria-current]{color:var(--d-acc);border-left-color:var(--d-acc);font-weight:600}
html body .cf-nav .cf-nav-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:var(--t-small);font-weight:600;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .cf-nav .cf-nav-cta:hover{color:var(--d-acc)}
/* móvil y tableta: control compacto bajo la cabecera, cuando el titular ya ha salido de la vista */
@media (max-width:1079px){
  html body .cf-nav{border-bottom:1px solid var(--d-line);margin-bottom:8px}
  html body .cf-nav details[open]{padding-bottom:14px}
  html.cf-js body .cf-nav{position:fixed;z-index:9;left:0;right:0;top:var(--cf-top);margin:0;padding-inline:var(--gutter);background:var(--d-bg);border-bottom:1px solid var(--d-line);visibility:hidden;transform:translateY(-100%);transition:transform .22s ease,visibility 0s .22s}
  html.cf-js body .cf-nav.cf-vis{visibility:visible;transform:none;transition:transform .22s ease}
  html.cf-js body .cf-nav details[open]{max-height:calc(100dvh - var(--cf-top) - 24px);overflow:auto;border-bottom:1px solid var(--ed-regla);margin-bottom:-1px}
  html body .cf-nav ol a{min-height:46px;border-left:0;border-top:1px solid var(--d-line);padding-left:0;font-size:var(--t-body)}
  html body .cf-nav ol a[aria-current]::before{content:"";width:8px;height:8px;background:var(--d-acc);margin-right:10px;flex:none}
}
@media (max-width:1079px) and (prefers-reduced-motion:reduce){html.cf-js body .cf-nav,html.cf-js body .cf-nav.cf-vis{transition:none}}
/* escritorio: columna fija a la derecha desde el principio */
@media (min-width:1080px){
  html body main>.wrap>.cf-nav{grid-column:10/13;grid-row:1/span 60;position:sticky;top:calc(var(--cf-top) + 28px);align-self:start;padding-left:clamp(8px,1.6vw,28px);margin-top:var(--sp-lg);max-height:calc(100vh - var(--cf-top) - 48px);overflow:auto;scrollbar-width:thin}
  html.cf-js body .cf-nav summary{pointer-events:none;min-height:0;padding-bottom:12px}
  html.cf-js body .cf-nav details summary::after,html.cf-js body .cf-nav details[open] summary::after{content:none}
  html.cf-js body .cf-nav summary span{display:none}
  html body .cf-nav ol a{min-height:36px;font-size:var(--t-small)}
}

/* ── Dosis: lectura rotulada sobre la barra ── */
html body .wrap .cf-dosis{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(20px,3vw,44px);margin:6px 0 4px;max-width:820px}
html body .wrap .cf-dosis>div{border-top:3px solid var(--d-line);padding:10px 0 16px;min-width:0}
html body .wrap .cf-dosis dt{font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.45;color:var(--d-ink-2)}
html body .wrap .cf-dosis dd{margin:6px 0 0;font-family:var(--ed-mono);font-weight:500;font-size:var(--t-h3);letter-spacing:-.045em;line-height:1;color:var(--d-ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
html body .wrap .cf-dosis .cf-largo dd{font-family:var(--ed-sans);font-size:var(--t-body);font-weight:600;letter-spacing:0;line-height:1.35}
html body .wrap .cf-dosis .cf-t-zone,html body .wrap .cf-dosis .cf-t-acc{border-top-color:var(--d-acc)}
html body .wrap .cf-dosis :is(.cf-t-zone,.cf-t-acc):not(.cf-largo) dd{color:var(--d-acc)}
html body .wrap .cf-dosis .cf-t-hot{border-top-color:var(--d-warn)}
html body .wrap .cf-dosis .cf-t-hot dd{color:var(--d-warn)}
html body .wrap .cf-dosis .cf-t-low{border-top-color:var(--low,#C98A1B)}
html body .wrap .cf-dosis .cf-t-muted{border-top-color:var(--d-ink-3)}
@media (min-width:560px){html body .wrap .cf-dosis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
html body .wrap .cf-dosis + .gauge .legend{display:none}
html body .wrap .cf-dosis + .gauge{padding-top:0}
html body .wrap .cf-dosis + .gauge .scale{height:58px}
html body .wrap .cf-dosis + .gauge :is(.track,.zone){top:18px;height:22px}
html body .wrap .cf-dosis + .gauge .ceil{top:4px;height:50px;width:3px;margin-left:-2px}
html body .wrap .cf-dosis + .gauge .scale::before{top:10px;height:38px}
html body .wrap .cf-dosis + .gauge .ticks{font-size:var(--t-meta)}

/* ── Esquema de conversión (solo donde la ficha describe la cadena) ── */
html body .wrap .cf-esq{margin:10px 0 6px;max-width:820px}
html body .wrap .cf-esq ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html body .wrap .cf-esq li{position:relative;max-width:none;border-top:1px solid var(--ed-regla);padding:10px 0 var(--sp-md)}
html body .wrap .cf-esq li b{display:block;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08}
html body .wrap .cf-esq li span{display:block;margin-top:5px;font-size:var(--t-cap);line-height:1.4;color:var(--d-ink-2);max-width:26ch}
html body .wrap .cf-esq li.cf-aqui{border-top:3px solid var(--d-acc);padding-top:8px}
html body .wrap .cf-esq li.cf-aqui b{color:var(--d-acc)}
html body .wrap .cf-esq li:not(:last-child)::after{content:"↓";position:absolute;left:0;bottom:4px;font-family:var(--ed-mono);font-size:var(--t-body);color:var(--d-ink-3)}
html body .wrap .cf-esq figcaption{margin-top:10px;padding-top:10px;border-top:1px solid var(--d-line);font-size:var(--t-cap);line-height:1.45;color:var(--d-ink-2)}
@media (min-width:620px){
  html body .wrap .cf-esq ol{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px}
  html body .wrap .cf-esq li{padding-bottom:14px}
  html body .wrap .cf-esq li:not(:last-child)::after{content:"→";left:auto;right:-32px;bottom:auto;top:14px;font-size:var(--t-body)}
}

/* ── Desplegables de estudios: una línea de texto, no una barra ── */
html body .wrap details.studies{border-top:0;margin-top:2px}
html body .wrap details.studies summary{display:inline-flex;justify-content:flex-start;gap:.6em;font-family:var(--ed-sans);font-size:var(--t-small);font-weight:500;letter-spacing:0;text-transform:none;color:var(--d-ink-2);text-decoration:underline;text-decoration-color:var(--d-line);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .wrap details.studies summary:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
html body .wrap details.studies summary:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
html body .wrap details.studies[open] summary{color:var(--d-ink)}
html body .wrap details.studies[open]>p{border-left:1px solid var(--d-acc);padding-left:16px;margin:4px 0 16px}
html body .wrap .ev .meta{order:1;margin-top:14px}
html body .wrap .ev details.studies{order:2;margin-top:0}
@media (min-width:760px){
  html body .wrap .ev .meta{grid-row:3;margin-top:12px}
  html body .wrap .ev details.studies{grid-row:4}
}

/* ── Ritmo entre secciones: cada una con su gramática ── */
/* Cómo usarlo: rejilla de pautas, no otra lista */
@media (min-width:760px){
  html body .wrap .grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:0}
  html body .wrap .cell{padding:14px 0 var(--sp-md);max-width:none;border-top:1px solid var(--ed-regla);border-bottom:0;font-size:var(--t-body);line-height:1.55}
  html body .wrap .cell>span{position:static;width:auto;margin:0 0 8px;color:var(--d-ink)}
}
/* Mitos: el veredicto primero, la frase en cursiva */
html body .wrap section[aria-labelledby="mitos"] .ev h3{font-style:italic;font-size:var(--t-h3)}
html body .wrap section[aria-labelledby="mitos"] .ev .badge{order:-1;margin:0 0 10px}
@media (min-width:760px){
  html body .wrap section[aria-labelledby="mitos"] .ev{grid-template-rows:auto auto 1fr}
  html body .wrap section[aria-labelledby="mitos"] .ev .badge{grid-row:1}
  html body .wrap section[aria-labelledby="mitos"] .ev h3{grid-row:2}
  html body .wrap section[aria-labelledby="mitos"] .ev>p{grid-row:1/4}
  html body .wrap section[aria-labelledby="mitos"] .ev details.studies{grid-row:4}
}
/* la idea de «Para qué sirve», a tamaño de entradilla */
html body .wrap section[aria-labelledby="sirve"]>.pull{font-family:var(--ed-serif);font-size:var(--t-lead);line-height:1.34;letter-spacing:-.012em;max-width:30em}
html body .wrap section[aria-labelledby="sirve"]>.pull b{font-weight:500}

/* ── C · Bibliografía plegada ── */
html body .wrap .cf-bib{margin-top:6px;border-top:1px solid var(--ed-regla);border-bottom:1px solid var(--d-line)}
html body .wrap .cf-bib>summary{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;min-height:60px;padding:10px 0;cursor:pointer;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink)}
html body .wrap .cf-bib>summary::-webkit-details-marker{display:none}
html body .wrap .cf-bib>summary::after{content:none}
html body .wrap .cf-bib>summary .cf-bib-v{color:var(--d-ink-2);text-decoration:underline;text-decoration-color:var(--d-acc);text-underline-offset:.35em}
html body .wrap .cf-bib>summary .cf-bib-v::after{content:"+";display:inline-block;margin-left:.7em;color:var(--d-acc);font-size:var(--t-body);text-decoration:none}
html body .wrap .cf-bib[open]>summary .cf-bib-v::after{content:"−"}
html body .wrap .cf-bib>summary:hover .cf-bib-v{color:var(--d-acc)}
html body .wrap .cf-bib>summary:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
html body .wrap .cf-bib .refs{border-top:1px solid var(--d-line);margin-top:0;padding-bottom:10px}
html body .wrap .cf-volver{display:inline-block;margin-left:.4em;padding:6px 0;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--d-acc)!important;text-decoration-color:var(--d-acc)!important;white-space:nowrap}
html body .wrap sup.ref a:focus-visible{outline:2px solid var(--d-acc);outline-offset:1px}

/* ── Anterior / siguiente y relacionados: líneas, no miniaturas ── */
html body .wrap>.cf-sig{margin-top:var(--sp-sec)}
html body .wrap .cf-pn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,4vw,56px);border-top:1px solid var(--ed-regla)}
html body .wrap .cf-pn a{display:block;padding:14px 0 var(--sp-md);color:var(--d-ink);text-decoration:none;min-width:0}
html body .wrap .cf-pn a[rel="next"]{text-align:right}
html body .wrap .cf-pn small{display:block;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.45;color:var(--d-ink-2)}
html body .wrap .cf-pn b{display:block;margin-top:8px;font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.08;overflow-wrap:break-word;hyphens:auto;transition:color .18s}
html body .wrap .cf-pn a:hover b{color:var(--d-acc)}
html body .wrap .cf-rel{margin-top:var(--sp-lg);border-top:1px solid var(--ed-regla);padding-top:14px}
html body .wrap .cf-rel ul{list-style:none;margin:12px 0 0;padding:0}
html body .wrap .cf-rel li{max-width:none;border-top:1px solid var(--d-line)}
html body .wrap .cf-rel li a{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;align-items:baseline;padding:13px 0 14px;min-height:48px;color:var(--d-ink);text-decoration:none}
html body .wrap .cf-rel li b{font-family:var(--ed-serif);font-weight:400;font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.15;transition:color .18s}
html body .wrap .cf-rel li span{font-size:var(--t-small);line-height:1.4;color:var(--d-ink-2)}
html body .wrap .cf-rel li a:hover b{color:var(--d-acc)}
html body .wrap .cf-rel p{margin:0;border-top:1px solid var(--d-line);font-size:var(--t-small)}
html body .wrap .cf-rel p a{display:inline-flex;align-items:center;min-height:48px;font-weight:600;color:var(--d-ink);text-decoration:underline;text-decoration-color:var(--d-acc);text-decoration-thickness:1px;text-underline-offset:.3em}
html body .wrap .cf-rel p a:hover{color:var(--d-acc)}
@media (min-width:620px){html body .wrap .cf-rel li a{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}}

/* ════════════════════════════════════════════════════════════════
   4 · ATLAS, PRIMERA CAPA: nombre + una línea + usos. El resto, en la ficha.
   ════════════════════════════════════════════════════════════════ */
html body .ing .al-test{display:none}
html body .cat,html body .ing{scroll-margin-top:calc(var(--cf-top) + 64px)}
/* salto entre familias: una línea de enlaces que acompaña al bajar */
html body .cf-fam{position:sticky;top:var(--cf-top);z-index:5;display:flex;align-items:center;gap:0 22px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:var(--d-bg);border-bottom:1px solid var(--d-line);overflow-x:auto;scrollbar-width:none;font-family:var(--ed-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
html body .cf-fam::-webkit-scrollbar{display:none}
html body .cf-fam span{color:var(--d-ink-3)}
html body .cf-fam a{display:inline-flex;align-items:center;min-height:46px;color:var(--d-ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.4em;transition:color .18s,text-decoration-color .18s}
html body .cf-fam a:hover{color:var(--d-acc);text-decoration-color:var(--d-acc)}
html body .cf-fam a:focus-visible{outline:2px solid var(--d-acc);outline-offset:-2px}
html body .gl:has(#retinoides[hidden]) .cf-fam a[href="#retinoides"],html body .gl:has(#antioxidantes[hidden]) .cf-fam a[href="#antioxidantes"],html body .gl:has(#exfoliantes[hidden]) .cf-fam a[href="#exfoliantes"],html body .gl:has(#hidratantes[hidden]) .cf-fam a[href="#hidratantes"],html body .gl:has(#despigmentantes[hidden]) .cf-fam a[href="#despigmentantes"],html body .gl:has(#calmantes[hidden]) .cf-fam a[href="#calmantes"],html body .gl:has(#peptidos[hidden]) .cf-fam a[href="#peptidos"]{display:none}
@media (max-width:759px){html body .cf-fam span{display:none}}
/* filas: en móvil y tableta, la descripción larga y «Ver ficha» salen de la primera vista (siguen en el HTML) */
@media (max-width:1599px){
  html body .ing .desc{display:none}
}
@media (max-width:1099px){
  html body .ing{padding:18px 0 16px}
  html body .ing .tag{font-weight:400;color:var(--d-ink-2);margin-top:8px;font-size:var(--t-small)}
  html body .ing .usos.mini{margin-top:8px}
  html body .ing .more{font-size:0;margin:0;padding:0;min-height:0;line-height:0}
  html body .ing a.more:focus-visible{outline:none}
  html body .ing a.more:focus-visible::after{outline:2px solid var(--d-acc);outline-offset:2px}
  html body .ing h3::after{content:"\00a0→";content:"\00a0→" / "";font-family:var(--ed-sans);font-size:var(--t-cap);vertical-align:.25em;color:var(--d-acc)}
}
@media (max-width:759px){
  html body .ing{grid-template-areas:"n f" "w f" "t t" "u u" "m m"}
  html body .ing h3{font-size:var(--t-h3)}
  html body .ing:first-child{grid-template-areas:"f f" "n n" "w w" "t t" "u u" "m m"}
}
@media (min-width:760px) and (max-width:1099px){
  html body .ing{grid-template-rows:auto auto auto 1fr;grid-template-areas:"n w f" "n t f" "n u f" "n m f"}
}
@media (min-width:1100px) and (max-width:1599px){
  html body .ing{grid-template-rows:auto 1fr;grid-template-areas:"n f t w" "n f u m";padding:var(--sp-md) 0 var(--sp-sm)}
}
@media (min-width:1600px){
  html body .ing{grid-template-columns:minmax(0,3fr) 104px minmax(0,3.4fr) minmax(0,3.6fr) minmax(0,1.6fr);grid-template-rows:auto 1fr;grid-template-areas:"n f t d w" "n f u d m";padding:var(--sp-md) 0 var(--sp-sm)}
  html body .ing .ing-foto .placa,html body .ing .ing-foto .placa.sola{width:104px}
  html body .ing .desc{margin-top:.3em;font-size:var(--t-small);line-height:1.5;color:var(--d-ink-2)}
}
html body .wrap .cf-dosis dd small{display:block;margin-top:8px;font-family:var(--ed-sans);font-size:var(--t-cap);font-weight:400;letter-spacing:0;line-height:1.4;color:var(--d-ink-2)}
html body .wrap .cf-res .cf-niv{background:none!important;padding:0;border:0;border-radius:0;color:var(--d-ink)}
html body .wrap .cf-res .cf-niv.b-hi{color:var(--d-acc)}

/* ════════════════════════════════════════════════════════════════
   5 · FASE 3: edición y calibración (misma profundidad, menos fricción)
   Tamaños solo con tokens --t-*; espacio de bloque solo con --sp-*.
   ════════════════════════════════════════════════════════════════ */
/* ── Primera pantalla: una sola versión de cada dato ── */
/* la llamada al análisis vive en el cierre y, discreta, en el índice; la nota de cabecera no se ve */
html body .wrap>header:has(.cf-res) .tiene-sentido{display:none!important}
/* «Problemas de piel relacionados» está fundido en la fila «Para qué sirve» del resumen (el bloque sigue en el HTML) */
html body .wrap>header:has(.cf-res.cf-fus) .prob-rel{display:none!important}
html body .wrap .cf-res .cf-usos>*{display:inline-block;white-space:nowrap}
html body .wrap .cf-res .cf-usos>*:not(:last-child)::after{content:"·";display:inline-block;margin:0 .5em;color:var(--d-ink-3);text-decoration:none}
html body .wrap .cf-res .cf-usos.cf-fus a{text-decoration-color:var(--d-acc)}
html body .wrap .cf-res dl>div:first-child{border-top:0}
html body .wrap .cf-res dl{margin-top:4px}
html body .wrap .cf-res .cf-dato{letter-spacing:-.03em}

/* ── Figura de cabecera · clase B editorial: foto 4:5 junto al resumen; la molécula (D diagrama) debajo, legible ── */
html body .wrap .mp .lienzo{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto;background:none}
html body .wrap .mp .lienzo>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--fam,var(--ed-papel-2))}
html body .wrap .mp .lienzo .placa{position:static;inset:auto;width:min(100%,340px);aspect-ratio:1000/560;margin-top:var(--sp-xs);padding:8px;background:#FFFFFF;border:1px solid var(--d-line)}
html body .wrap .mp figcaption{margin-top:var(--sp-xs);padding:0}
@media (max-width:759px){
  /* móvil: no es protagonista, así que no va a sangre; 3:2 dentro de los márgenes (≈27 vh) */
  html body .wrap .mp{margin:var(--sp-md) 0 0}
  html body .wrap .mp .lienzo .placa{width:min(72%,300px)}
  html body .wrap .mp figcaption{padding:0;margin-top:var(--sp-xs)}
}
@media (min-width:760px) and (max-width:1079px){
  html body .wrap .mp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(20px,3vw,40px);align-items:end;max-width:none}
  html body .wrap .mp .lienzo{display:contents}
  html body .wrap .mp .lienzo>img{grid-column:1;grid-row:1/3;aspect-ratio:3/2}
  html body .wrap .mp .lienzo .placa{grid-column:2;grid-row:1;margin:0;align-self:end}
  html body .wrap .mp figcaption{grid-column:2;grid-row:2}
  html body .wrap .mp:not(:has(.placa)) figcaption{grid-row:1/3}
}
@media (min-width:1080px){
  html body main>.wrap>header :is(.lede,.lede-2,.stat,.cf-res){grid-column:1/6}
  html body main>.wrap>header figure.mp{grid-column:6/10;grid-row:5/span 4;margin:var(--sp-md) 0 0}
  html body main>.wrap>header figure.mp .lienzo>img{aspect-ratio:4/5}
  html body main>.wrap>header figure.mp figcaption{padding-right:0;margin-top:var(--sp-xs)}
  html body main>.wrap>header figure.mp .lienzo .placa{width:min(78%,340px)}
}

/* ── Dosis: el visual es la barra rotulada; debajo, un párrafo ── */
/* los rótulos son la leyenda de la barra, no cifras de impacto */
html body .wrap .cf-dosis{margin:0;gap:0 clamp(20px,3vw,44px)}
html body .wrap .cf-dosis>div{border-top-width:2px;padding:8px 0 var(--sp-sm)}
html body .wrap .cf-dosis dd{margin-top:2px;font-size:var(--t-h3);letter-spacing:-.03em;line-height:1.1}
html body .wrap .cf-dosis .cf-largo dd{font-size:var(--t-small)}
/* los dos párrafos se leen como uno; el rojo queda solo en la marca del límite de la barra */
html body .wrap section[aria-labelledby="dosis"]{gap:var(--sp-sm)}
html body .wrap section[aria-labelledby="dosis"] .pull{max-width:var(--a-lectura);color:var(--d-ink-2)}
html body .wrap section[aria-labelledby="dosis"] .pull + .pull{margin-top:calc(-1 * var(--sp-xs))}
html body .wrap section[aria-labelledby="dosis"]:has(.gauge .ceil:not([style*="background"])) .pull b,html body .wrap section[aria-labelledby="dosis"] .pull b{color:var(--d-ink);font-weight:600}
html body .wrap section[aria-labelledby="dosis"]>h2{margin-bottom:var(--sp-sm)}

/* ── Ritmo: menos reglas repetidas, densidades alternas ── */
/* «Para qué sirve»: lista; la primera entrada no dobla la regla */
html body .wrap .evs{border-bottom:0}
html body .wrap .ev .meta{margin-top:var(--sp-xs)}
/* «Qué sabemos» y «Con qué combinarlo»: columnas sin regla por fila, solo aire */
html body .wrap :is(.sn-col,.col) li{border-top:0;padding:6px 0}
html body .wrap :is(.sn-col,.col) h3{margin-bottom:var(--sp-xs)}
/* «Mitos»: citas a --t-cita, sin filete entre una y otra */
html body .wrap section[aria-labelledby="mitos"] .ev h3{font-size:var(--t-cita);line-height:1.1}
html body .wrap section[aria-labelledby="mitos"] .ev{border-top:0;padding-top:var(--sp-sm)}
html body .wrap section[aria-labelledby="mitos"] .evs .ev:first-child{border-top:1px solid var(--ed-regla);padding-top:var(--sp-md)}
/* preguntas: una regla por pregunta basta */
html body .wrap .faqs{border-bottom:0}
html body .wrap .faqs summary{padding:var(--sp-sm) 0}
/* «Para quién»: nota sin regla propia (la sección ya abre con una) */
html body .wrap .para-quien{border-top:0;padding-top:0;margin-top:var(--sp-sm)}
html body .wrap .cf-bib{border-bottom:0}
html body .wrap .cf-esq li b{line-height:1.1}

/* ── Hueco opcional de imagen (solo existe si capas-fichas.py encuentra el archivo) ── */
html body .wrap .cf-fig{margin:0 0 var(--sp-sm);max-width:820px}
html body .wrap .cf-fig img{display:block;width:100%;height:auto;object-fit:cover;background:var(--ed-papel-2)}
html body .wrap .cf-fig-uso img{aspect-ratio:3/2}
html body .wrap .cf-fig-envase{max-width:300px;margin:0 0 var(--sp-sm)}
html body .wrap .cf-fig-envase img{aspect-ratio:1/1}
@media (min-width:760px){
  html body .wrap>.tip:has(.cf-fig-envase) .cf-fig-envase{grid-column:1;grid-row:2;margin-top:var(--sp-sm)}
  html body .wrap>.tip:has(.cf-fig-envase) h3{grid-row:1}
}

/* ── Índice de ingredientes ── */
/* foto de familia · clase C apoyo, 3:2 */
@media (min-width:760px){
  html body .ing:first-child .ing-foto>img{aspect-ratio:3/2;bottom:calc(100% + var(--sp-md))}
  html body .cat:has(.ing:first-child:not([hidden])) .cat-head{min-height:calc(clamp(190px,24vw,300px) * .667 + var(--sp-md))}
}
@media (max-width:759px){
  /* móvil: la foto deja de ir a sangre siete veces; pasa a ser un apoyo 1:1 junto al titular de la familia */
  html body .ing:first-child{grid-template-areas:"n f" "w f" "t t" "u u" "m m";border-top:1px solid var(--d-line);padding-top:var(--sp-sm)}
  html body .ing:first-child .ing-foto{position:static;margin:0;background:none}
  html body .ing:first-child .ing-foto>img{display:block;position:absolute;right:0;bottom:calc(100% + var(--sp-sm));width:30%;min-width:104px;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--fam,var(--ed-papel-2))}
  html body .ing:first-child .ing-foto .placa{position:static;width:88px;max-width:none;padding:4px}
  html body .cat:has(.ing:first-child:not([hidden])) .cat-head{min-height:calc(max(30vw - 12px,104px) + var(--sp-sm));padding-right:calc(max(30%,104px) + 16px);justify-content:flex-end;padding-bottom:var(--sp-sm)}
  html body .cat-head{gap:var(--sp-xs)}
  html body .cat-head h2{hyphens:auto;overflow-wrap:break-word}
  /* controles compactos: cada filtro en una línea que se desliza */
  html body .tools{margin-top:var(--sp-md);padding-block:var(--sp-xs) 0;gap:var(--sp-xs)}
  html body .filtros{gap:0}
  html body .filtro{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
  html body .filtro-t{padding:0;white-space:nowrap}
  html body .filtro-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  html body .filtro-chips::-webkit-scrollbar{display:none}
  html body .tools{border-bottom:0}
}
html body .ing h3::after{font-size:var(--t-cap)}