/* ============ DIOXICHEM — design v2 (2026-10) · base de Dani, integración Architect ============
   Registro de evidencia: sobrio, escaneable, autoridad documental.
   Conserva data-theme, RTL, print y todos los selectores existentes. */

:root{
  --paper:#faf9f6; --paper-2:#ffffff; --ink:#1c232b; --ink-2:#4a5560; --ink-3:#7a848f;
  --line:#e3e1da; --line-2:#d3d0c8;
  --accent:#3e8e6d; --accent-ink:#2c6b51;
  --false:#b3261e; --part:#b45309; --ready:#1d7a5f;
  --surface:#f2f0ea;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:880px;
  --radius:10px;
  --shadow:0 1px 2px rgba(28,35,43,.05),0 18px 40px -22px rgba(28,35,43,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:17px; line-height:1.68;
  color:var(--ink); background:var(--paper);
  max-width:var(--maxw); margin:0 auto; padding:40px 24px 72px;
}

/* --- navegación pegajosa --- */
nav{
  position:sticky; top:0; z-index:40;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  margin:0 -24px 30px; padding:12px 24px;
  background:var(--paper); border-bottom:1px solid var(--line);
  font-size:.84rem;
}
nav a{
  color:var(--ink-2); text-decoration:none; letter-spacing:.07em;
  text-transform:uppercase; font-weight:600; padding:6px 0;
  border-bottom:2px solid transparent; transition:color .18s,border-color .18s;
}
nav a:hover,nav a:focus-visible{color:var(--accent-ink);border-bottom-color:var(--accent)}

#langsel,#themetoggle{
  font:inherit; font-size:.8rem; line-height:1; padding:6px 10px;
  border:1px solid var(--line-2); border-radius:6px;
  background:var(--paper-2); color:var(--ink); cursor:pointer;
}
#langsel{margin-inline-start:auto; max-width:12em}
#themetoggle{margin-inline-start:6px; min-width:2.2em}
#langsel:focus-visible,#themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- jerarquía --- */
h1{font-family:var(--serif); font-size:clamp(2.05em,4.4vw,2.6em); line-height:1.12;
   letter-spacing:-.015em; margin:.1em 0 .4em; color:var(--ink)}
h2{font-family:var(--serif); font-size:clamp(1.28em,2.2vw,1.5em); line-height:1.25;
   margin:2.6em 0 .7em; padding-bottom:.3em; border-bottom:1px solid var(--line-2); color:var(--ink)}
h3{font-size:1.06em; font-weight:650; margin:1.8em 0 .5em; color:var(--ink)}

p{margin:0 0 1.1em; max-width:70ch}
.lead{font-size:1.12em; line-height:1.62; color:var(--ink-2); max-width:64ch;
  border-inline-start:3px solid var(--accent); padding-inline-start:16px; margin:1.2em 0 1.8em}
a{color:#16608a; text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
.small,p.small{font-size:.86em; color:var(--ink-3); line-height:1.6}
strong{font-weight:650}
code{font-family:var(--mono); font-size:.86em; background:var(--surface); padding:1px 5px; border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* --- portada: tarjeta con cifras y botones --- */
.hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,4vw,44px);
  align-items:center; margin:6px 0 46px; padding:clamp(20px,3vw,34px);
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow);
}
.hero img{width:100%; height:auto; border-radius:var(--radius); display:block}
.hero .txt h1{margin-top:0}
.hero .txt p{color:var(--ink-2); font-size:1.04em; line-height:1.55}
.hero-stats{
  border-top:1px solid var(--line-2); padding-top:.8em; font-size:.9em;
  color:var(--ink-2); display:flex; flex-wrap:wrap; gap:.4em 1.2em;
}
.hero-stats strong{font-family:var(--serif); font-size:1.45em; color:var(--ink); margin-inline-end:.15em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cta a{
  display:inline-block; padding:11px 20px; border-radius:999px; font-size:.92rem;
  font-weight:600; text-decoration:none; color:#fff; background:var(--accent);
  border:1px solid var(--accent); transition:transform .16s,box-shadow .16s,background .16s;
}
.cta a:hover{background:var(--accent-ink);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.cta a.ghost{background:transparent;color:var(--accent-ink)}
.cta a.ghost:hover{background:var(--surface)}

/* --- cajas tipo cita documental --- */
.box{
  background:var(--surface); border:none; border-inline-start:4px solid var(--ink-3);
  padding:16px 20px; margin:1.4em 0; border-radius:0 6px 6px 0; font-size:.96em;
}
.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}

/* --- tablas --- */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:.93em; margin:1.3em 0;
      background:var(--paper-2); border:1px solid var(--line); border-radius:8px; overflow:hidden}
th,td{text-align:start; padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--sans); font-size:.8em; font-weight:700; letter-spacing:.05em;
   text-transform:uppercase; color:var(--ink-2); background:var(--surface);
   border-bottom:2px solid var(--line-2)}
tr:last-child td{border-bottom:0}
table tr:not(.catrow):hover td{background:rgba(62,142,109,.05)}

/* filas de categoría */
tr.catrow td{background:var(--surface); font-family:var(--serif); font-size:1em;
  font-weight:600; padding:14px 13px; border-top:2px solid var(--line-2)}
tr:target td{background:rgba(180,83,9,.12)}

/* --- veredictos como insignias --- */
.v-false,.v-part,.v-ready{
  display:inline-block; font-weight:700; font-size:.84em; letter-spacing:.02em;
  padding:2px 9px 3px; border-radius:3px; white-space:nowrap;
}
.v-false{color:var(--false);background:rgba(179,38,30,.09);border-inline-start:2px solid var(--false)}
.v-part{color:var(--part);background:rgba(180,83,9,.10);border-inline-start:2px solid var(--part)}
.v-ready{color:var(--ready);background:rgba(62,142,109,.10);border-inline-start:2px solid var(--ready)}

/* --- anclas y copias archivadas --- */
a.perma{text-decoration:none}
a.perma code{background:transparent;color:var(--accent-ink);font-weight:700}
.arch{font-size:.66em;vertical-align:super;text-decoration:none;color:var(--ink-3);
      border:1px solid var(--line-2);border-radius:4px;padding:0 4px;white-space:nowrap}
.arch:hover{color:var(--accent-ink);border-color:var(--accent)}
.small.rel a{color:var(--accent-ink);text-decoration:none}
.small.rel a:hover{text-decoration:underline}
a.faers-id{font-variant-numeric:tabular-nums}

/* --- figuras y listas --- */
figure{margin:1.8em 0; text-align:center}
figure img{max-width:100%;height:auto;border-radius:8px}
figcaption{font-size:.86em;color:var(--ink-3);margin-top:.6em;line-height:1.5}
.molecule{float:inline-end;margin:0 0 1em 1.6em;max-width:220px}
html[dir="rtl"] .molecule{float:none;margin:0 auto 1em}
ul,ol{padding-inline-start:1.3em;margin:0 0 1.2em;max-width:70ch}
li{margin-bottom:.45em}

footer{margin-top:3.5em;padding-top:1.4em;border-top:1px solid var(--line-2);
       font-size:.85em;color:var(--ink-3);max-width:76ch}

p.code,pre{background:var(--surface);padding:12px 14px;border-radius:6px;
           overflow-x:auto;font-size:.9em}

/* --- noche --- */
html[data-theme="dark"]{color-scheme:dark; --paper:#14171b; --paper-2:#191e24; --ink:#e8e6e0;
  --ink-2:#b6bcc3; --ink-3:#8b939c; --line:#2a2f36; --line-2:#3a4048; --surface:#1c2026;
  --accent:#5fb894; --accent-ink:#7fceac; --false:#ff8a8a; --part:#e5b96a; --ready:#8fd6a8;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 44px -24px rgba(0,0,0,.8)}
html[data-theme="dark"] a{color:#7fb8d4}
html[data-theme="dark"] #langsel,html[data-theme="dark"] #themetoggle{
  background:var(--surface);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] #langsel option{background:var(--surface);color:var(--ink)}
html[data-theme="dark"] table tr:hover td{background:rgba(95,184,148,.06)}

/* --- RTL --- */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .box{border-radius:6px 0 0 6px}
html[dir="rtl"] code,html[dir="rtl"] pre{direction:ltr;unicode-bidi:embed}

/* --- móvil --- */
@media(max-width:780px){
  body{padding:24px 16px 52px;font-size:16px}
  nav{margin:0 -16px 22px;padding:10px 16px;gap:4px 14px}
  nav a{font-size:.76rem}
  .hero{grid-template-columns:1fr;padding:18px}
  .hero img{max-height:260px;object-fit:cover}
  h1{font-size:1.8em}
  table,tbody,tr,td{display:block;width:100%}
  table{border:0;background:transparent}
  thead,th{display:none}
  tr{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;margin-bottom:12px}
  td{border:0;padding:7px 13px}
  td.v-false,td.v-part,td.v-ready{display:block;padding:9px 13px}
}

/* --- impresión --- */
@media print{
  body{max-width:100%;padding:0;font-size:11pt;background:#fff;color:#000}
  h1{font-size:20pt} h2{font-size:14pt;margin-top:1.6em}
  nav,#themetoggle,#langsel,.cta{display:none}
  .hero{display:block;box-shadow:none;border:0;padding:0}
  .hero img{max-width:200px}
  .box{background:#f5f5f2;border-inline-start:3px solid #999;-webkit-print-color-adjust:exact}
  a{color:#000;text-decoration:underline}
  .v-false,.v-part,.v-ready{box-shadow:none;border:1px solid currentColor;print-color-adjust:exact}
  table{font-size:9.5pt}
}

/* formulario de contacto */
form{margin:1.4em 0 1em}
label{display:block;font-size:.94em;color:var(--ink-2)}
input[type=text],input[type=email],input[type=url],textarea{
  font:inherit;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;margin-top:5px}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.btn{font:inherit;font-weight:600;color:#fff;background:var(--accent);border:1px solid var(--accent);
     border-radius:999px;padding:10px 22px;cursor:pointer}
.btn:hover{background:var(--accent-ink)}
.btn:disabled{opacity:.6;cursor:default}
#msg{color:var(--accent-ink);font-weight:600}