/* ═════════════════════════════════════════════════════════════════════════
   DermaTrack — hoja de estilo de las páginas legales
   Autónoma a propósito: privacidad y términos no dependen de app.css ni del
   <style> de la landing, para que se puedan mover o versionar sin arrastrar
   nada más.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bone:#F2EDE4; --surface:#FBF8F3; --surface-2:#E9E2D6;
  --ink:#2E2620; --ink-2:#6B5F53; --ink-3:#96897B;
  --line:#DED5C7; --line-2:#C8BCA9;
  --accent:#8A5A32; --accent-deep:#5F3D22; --accent-soft:#EDE1D2; --accent-tint:#D9C4AC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bone:#15110D; --surface:#1E1913; --surface-2:#282118;
    --ink:#F2ECE2; --ink-2:#B5A897; --ink-3:#8B7E6E;
    --line:#332B21; --line-2:#4A3F31;
    --accent:#D69C6A; --accent-deep:#EBBE95; --accent-soft:#2B2118; --accent-tint:#6E5439;
  }
}
:root[data-theme="dark"]{
  --bone:#15110D; --surface:#1E1913; --surface-2:#282118;
  --ink:#F2ECE2; --ink-2:#B5A897; --ink-3:#8B7E6E;
  --line:#332B21; --line-2:#4A3F31;
  --accent:#D69C6A; --accent-deep:#EBBE95; --accent-soft:#2B2118; --accent-tint:#6E5439;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
.shell{max-width:760px; margin:0 auto; padding:0 24px}

/* ── barra superior ─────────────────────────────────────────────────────── */
.nav{background:var(--bone); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:"Instrument Serif",Georgia,serif; font-size:24px;
}
.logo img{width:26px; height:26px; display:block; flex:none}
.volver{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500}
.volver:hover{color:var(--accent)}

/* ── tipografía del documento ───────────────────────────────────────────── */
/* main lleva también .shell, y .shell gana por especificidad: hay que fijar
   el padding aquí o el título se pega a la barra superior. */
main.shell{padding:58px 24px 24px}
h1{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(34px,6vw,46px);
  line-height:1.1; margin:0 0 10px; letter-spacing:.004em;
}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 18px;
}
.fecha{color:var(--ink-3); font-size:14px; margin:0 0 8px}
.lede{font-size:19px; color:var(--ink-2); margin:24px 0 0; max-width:60ch}

h2{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:27px;
  line-height:1.2; margin:52px 0 4px; letter-spacing:.004em;
}
h2 .n{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; color:var(--ink-3); margin-bottom:9px;
}
h3{font-size:17px; font-weight:700; margin:28px 0 0; letter-spacing:-.005em}
p{margin:14px 0; max-width:68ch}
ul,ol{margin:14px 0; padding-left:22px; max-width:68ch}
li{margin:7px 0}
li::marker{color:var(--line-2)}
a{color:var(--accent); text-underline-offset:3px}
strong{font-weight:700}
hr{border:none; border-top:1px solid var(--line); margin:56px 0 0}

/* ── recuadros ──────────────────────────────────────────────────────────── */
.caja{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:20px 22px; margin:26px 0; border-radius:2px;
}
.caja p{margin:8px 0}
.caja p:first-child{margin-top:0}
.caja p:last-child{margin-bottom:0}
.caja .titulo{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;
}

/* Marcador de dato pendiente. Que se vea feo es intencional: así no se
   despliega a producción por accidente con los campos legales sin llenar. */
.pendiente{
  background:#FFE9A8; color:#5A4300; padding:1px 7px; border-radius:2px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em; font-weight:500;
}

/* ── índice ─────────────────────────────────────────────────────────────── */
.indice{
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:20px 24px; margin:40px 0 0;
}
.indice p{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.indice ol{margin:0; padding-left:20px; columns:2; column-gap:32px}
.indice li{margin:5px 0; font-size:14.5px}
.indice a{color:var(--ink-2); text-decoration:none}
.indice a:hover{color:var(--accent); text-decoration:underline}
@media (max-width:640px){ .indice ol{columns:1} }

/* ── tabla ──────────────────────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto; margin:20px 0}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:15px}
th,td{border-bottom:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top}
th{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:500;
}

/* ── pie ────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); margin-top:56px; padding:30px 0 48px}
.foot-in{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-3);
}
.foot-in a{color:var(--ink-3)}
.foot-in a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }