/* Hugo's Beauty Project — dirección D (rediseño, oct 2026)
   Se carga la ÚLTIMA en todas las páginas. Traduce los tokens antiguos
   (site.css, estilo.css, tema del test y estilos de las fichas) a la paleta D
   y añade los bloques de imagen de los ingredientes.
   Papel de cada color: tinta = texto · cobalto = acciones y datos · rojo = límite o aviso.
   Fondo de cada familia de ingredientes: ver --f-* abajo. */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-ext.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html:root{
  color-scheme:light;
  /* D */
  --d-bg:#F4F5F7; --d-card:#FFFFFF; --d-ink:#0E1220; --d-ink-2:#4A5163; --d-ink-3:#6B7285; --d-line:#DDE1E8;
  --d-acc:#023BC3; --d-acc-2:#012E9C; --d-acc-soft:#E7ECFA; --d-acc-light:#5B7FFF; --d-warn:#C8402A; --d-warn-soft:#F8E3DE;
  --d-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Familias de ingredientes (fondo de la foto) */
  --f-ret:#C9A15A; --f-ant:#023BC3; --f-exf:#C8402A; --f-hid:#B9CFD3; --f-des:#C9C3D6; --f-cal:#9FB09A; --f-pep:#0E1220;

  /* site.css y fichas */
  --ground:var(--d-bg); --card:var(--d-card); --ink:var(--d-ink); --muted:var(--d-ink-2); --line:var(--d-line);
  --acc:var(--d-acc); --acc-ink:#FFFFFF; --acc-soft:var(--d-acc-soft); --acc-strong:var(--d-acc-2);
  --zone:var(--d-acc-light); --track:var(--d-acc-soft); --hot:var(--d-warn); --hot-soft:var(--d-warn-soft); --low:#A16207;
  --flag:#FFF4D6; --flag-ink:#6B4E00; --mark:#D9E2FF; --mark-ink:var(--d-ink);
  --field:var(--d-ink-3); --slab:var(--d-ink); --slab-ink:var(--d-bg); --slab-acc:#8FA9FF;
  --display:var(--d-font); --body:var(--d-font); --r:16px;
  /* estilo.css */
  --fondo:var(--d-bg); --papel:var(--d-card); --tinta:var(--d-ink); --gris:var(--d-ink-2); --linea:var(--d-line);
  --verde:var(--d-acc); --verde-osc:var(--d-acc-2); --menta:#8FA9FF; --menta-suave:var(--d-acc-soft);
  --amarillo:#D9E2FF; --no:var(--d-warn); --titulo:var(--d-font);
  /* tema del test */
  --plum:var(--d-ink); --plum-2:var(--d-acc-2); --plum-soft:#E9ECF2;
  --coral:var(--d-acc); --coral-2:var(--d-acc-2); --coral-soft:var(--d-acc-soft);
  --lila:#8FA9FF; --lila-soft:#EEF2FD; --bg:var(--d-bg); --ok:var(--d-acc); --ok-soft:var(--d-acc-soft);
  --claro:var(--d-bg); --claro-2:#B9C0CF; --claro-3:#9AA2B5;
  --sombra:0 1px 2px rgba(14,18,32,.05), 0 12px 30px -20px rgba(14,18,32,.35);
}
@media (prefers-color-scheme: dark){
  html:root:not([data-theme="light"]){
    color-scheme:dark;
    --d-bg:#0E1220; --d-card:#171C2B; --d-ink:#E8ECF4; --d-ink-2:#B3BACB; --d-ink-3:#9AA2B5; --d-line:#2A3142;
    --d-acc:#7E9DFF; --d-acc-2:#A9BDFF; --d-acc-soft:#1E2742; --d-acc-light:#7E9DFF; --d-warn:#F08A63; --d-warn-soft:#3A2019;
    --acc-ink:#0E1220; --flag:#3A3014; --flag-ink:#F2D98A; --mark:#26335C; --slab:#171C2B; --plum-soft:#1E2433; --lila-soft:#1E2742; --plum:#1E2742;
  }
}
html:root[data-theme="dark"]{
  color-scheme:dark;
  --d-bg:#0E1220; --d-card:#171C2B; --d-ink:#E8ECF4; --d-ink-2:#B3BACB; --d-ink-3:#9AA2B5; --d-line:#2A3142;
  --d-acc:#7E9DFF; --d-acc-2:#A9BDFF; --d-acc-soft:#1E2742; --d-acc-light:#7E9DFF; --d-warn:#F08A63; --d-warn-soft:#3A2019;
  --acc-ink:#0E1220; --flag:#3A3014; --flag-ink:#F2D98A; --mark:#26335C; --slab:#171C2B; --plum-soft:#1E2433; --lila-soft:#1E2742; --plum:#1E2742;
}

/* Tipografía: titulares anchos y contundentes, texto a ancho normal */
html body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-ink)}
h1,h2,.display,.gran{font-family:var(--d-font);font-weight:850!important;font-stretch:118%;letter-spacing:-.035em!important}
h3,h4{font-family:var(--d-font);font-stretch:110%;letter-spacing:-.015em}
input,button,select,textarea{font-family:inherit}
.logo b,.marca{font-family:var(--d-font);font-weight:850;font-stretch:112%;letter-spacing:-.02em}
::selection{background:var(--d-acc);color:#fff}
/* Rotulador fluorescente: solo el texto clave de cada pantalla (como mucho uno por sección).
   Nunca en botones ni enlaces. Tinta #0E1220 sobre lima #E4FF3A = 16,6:1 (AA y AAA), también en modo oscuro. */
html mark{background:#E4FF3A;color:#0E1220;padding:0 .14em;margin:0 -.04em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html a mark,html button mark,html .btn mark,html [role=button] mark{background:none;color:inherit;padding:0;margin:0}

/* Botones: cobalto, sin cambiar de color raro al pasar */
html .btn-acc{background:var(--d-acc);color:#fff}
html .btn-acc:hover{background:var(--d-acc-2);color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-acc,:root:not([data-theme="light"]) .btn-acc:hover{color:#0E1220}}

/* ===== Imágenes de ingredientes ===== */
.fam-ret{--fam:var(--f-ret)} .fam-ant{--fam:var(--f-ant)} .fam-exf{--fam:var(--f-exf)} .fam-hid{--fam:var(--f-hid)}
.fam-des{--fam:var(--f-des)} .fam-cal{--fam:var(--f-cal)} .fam-pep{--fam:var(--f-pep)}

/* Placa blanca con la estructura de PubChem: pieza fija del sistema */
.placa{background:#FFFFFF;border-radius:12px;box-shadow:0 10px 30px -18px rgba(14,18,32,.6);padding:6px;display:block}
.placa img{width:100%;height:100%;object-fit:contain;display:block}

/* Glosario: tarjeta con foto */
.ing .ing-foto{position:relative;display:block;margin:-20px -20px 30px;aspect-ratio:4/3;background:var(--fam,#DDE1E8);border-radius:var(--r) var(--r) 0 0}
.ing .ing-foto>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r) var(--r) 0 0}
.ing .ing-foto .placa{position:absolute;right:12px;bottom:-22px;width:52%;aspect-ratio:1000/560}
.ing .ing-foto .placa.sola{position:absolute;inset:14% 10%;width:auto;bottom:auto;aspect-ratio:auto}
html .ing{overflow:visible}
.ing h3{font-stretch:112%}
html .ing .ico{display:none}

/* Ficha: la materia prima y su estructura */
.mp{margin:26px 0 0;display:grid;gap:10px}
.mp .lienzo{position:relative;aspect-ratio:16/9;border-radius:var(--r);background:var(--fam,#DDE1E8);overflow:visible}
.mp .lienzo>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r)}
.mp .lienzo .placa{position:absolute;right:16px;bottom:-28px;width:min(42%,320px);aspect-ratio:1000/560}
.mp .lienzo .placa.sola{inset:12% 18%;width:auto;bottom:auto;aspect-ratio:auto}
.mp figcaption{margin-top:30px;font-size:.84rem;color:var(--d-ink-3);display:flex;flex-wrap:wrap;gap:4px 14px;padding-right:min(44%,330px)}
.mp figcaption b{color:var(--d-ink-2);font-weight:700}
.mp figcaption a{color:var(--d-ink-3)}
.mp .grupo{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){
  .mp .lienzo{aspect-ratio:4/3}
  .mp .lienzo .placa{width:58%;right:10px;bottom:-24px}
  .mp figcaption{padding-right:0}
}
/* En la ficha la foto lleva el protagonismo: la cifra de dosis pasa a cobalto */
html .stat{background:var(--d-ink)}
html .stat b{color:#8FA9FF;font-stretch:125%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stat{background:#1E2742}}

/* ===== Para qué sirve: resumen de funciones con su nivel de evidencia ===== */
.nivel{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--d-ink-2);white-space:nowrap}
.nivel .pts{display:inline-flex;gap:3px}
.nivel .pts i{width:9px;height:9px;border-radius:50%;background:var(--d-line);display:block}
.nivel .pts i.on{background:var(--d-acc)}
.nivel.n3{color:var(--d-acc)}
.funciones{margin-top:34px;background:var(--d-card);border-radius:var(--r);padding:22px 24px;display:block}
.funciones .fn-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.funciones h2{font-size:1.35rem!important;letter-spacing:-.02em!important}
.funciones .fn-cab a{font-size:.85rem;font-weight:600;color:var(--d-ink-3)}
.funciones ul{list-style:none;margin:0;padding:0}
.funciones li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--d-line)}
.funciones li:first-child{border-top:0}
.funciones li a{font-weight:700;font-stretch:108%;font-size:1.05rem;color:var(--d-ink);text-decoration:none}
.funciones li a:hover{color:var(--d-acc)}
.funciones li a::after{content:" →";color:var(--d-acc)}
html .ing .fn-mini{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--d-line);display:grid;gap:6px}
html .ing .fn-mini li{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.86rem;font-weight:600;color:var(--d-ink)}
html .ing .fn-mini .nivel{font-size:.74rem}
html .ing .fn-mini .nivel .pts i{width:7px;height:7px}
.ev{scroll-margin-top:90px}
@media (max-width:480px){.funciones li{flex-wrap:wrap;gap:4px}}
.funciones .fn-sub{margin:18px 0 2px;font-size:.85rem;font-weight:700;font-stretch:100%;color:var(--d-ink-3);letter-spacing:0}
.veredicto-fn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--d-warn);white-space:nowrap}
.veredicto-fn::before{content:"";width:9px;height:2px;background:currentColor;border-radius:2px}
.funciones li.dicho a{font-weight:600;color:var(--d-ink-2)}
.funciones li.dicho a::after{color:var(--d-ink-3)}
html .ing .fn-mini li.dicho{color:var(--d-ink-3);font-weight:500}
html .ing .fn-mini .veredicto-fn{font-size:.74rem}

/* ===== Se usa en productos para (sustituye al resumen con niveles) ===== */
.usos-blq{margin-top:34px;background:var(--d-card);border-radius:var(--r);padding:24px;display:grid;gap:16px}
.usos-blq h2{font-size:1.35rem!important;letter-spacing:-.02em!important}
.usos{display:flex;flex-wrap:wrap;gap:10px}
.uso{display:inline-flex;align-items:center;gap:10px;background:var(--d-acc-soft);color:var(--d-ink);border-radius:999px;padding:8px 16px 8px 8px;font-weight:700;font-stretch:108%;font-size:1rem;text-decoration:none;line-height:1.2}
.uso svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--d-card);color:var(--d-acc);flex:none}
a.uso:hover{background:var(--d-acc);color:#fff}
a.uso:hover svg{color:var(--d-acc)}
.carnet{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;border-top:1px solid var(--d-line);padding-top:14px}
.carnet div{display:grid;gap:2px}
.carnet small{color:var(--d-ink-3);font-size:.8rem}
.carnet b{font-weight:800;font-stretch:110%;font-size:1.02rem}
.usos-nota{font-size:.85rem;color:var(--d-ink-3);margin:0}
.usos-nota a{color:var(--d-ink-2)}
html .ing .usos.mini{margin-top:10px;gap:6px}
html .ing .usos.mini .uso{font-size:.8rem;padding:4px 10px 4px 4px;gap:6px}
html .ing .usos.mini .uso svg{width:24px;height:24px;padding:4px}
/* Esquema de cómo actúa */
.actua{margin:6px 0 4px;display:grid;gap:8px}
.actua img{width:100%;height:auto;border-radius:var(--r);display:block}
.actua figcaption{font-size:.84rem;color:var(--d-ink-3)}

/* Modo oscuro: botones de tienda que usan la tinta como fondo */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tiendas a:first-child,:root:not([data-theme="light"]) a.oficial{background:#E8ECF4;color:#0E1220}}
:root[data-theme="dark"] .tiendas a:first-child,:root[data-theme="dark"] a.oficial{background:#E8ECF4;color:#0E1220}

/* Tarjeta "Esto no lo tengo todavía": qué buscar en el INCI y a qué concentración */
.hueco-buscar{margin:12px 0 0;display:grid;gap:10px}
.hueco-buscar>div{border-top:1px solid var(--d-line,#D9DCE3);padding-top:10px}
.hueco-buscar dt{font-weight:700;font-size:.95rem}
.hueco-buscar dd{margin:4px 0 0;font-size:.92rem}
.hueco-buscar small{display:block;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--d-ink-3)}