/* ═══════════════════════════════════════════════════════════════════════════
   DermaTrack — blog
   Misma paleta hueso y café de la landing. Lo que cambia es el ritmo: aquí se
   lee de corrido, así que la columna es angosta y el interlineado más suelto.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bone:#F2EDE4; --surface:#FBF8F3; --surface-2:#E9E2D6; --surface-3:#DFD5C5;
  --ink:#2E2620; --ink-2:#6B5F53; --ink-3:#96897B;
  --line:#DED5C7; --line-2:#C8BCA9;
  --accent:#8A5A32; --accent-deep:#5F3D22; --accent-soft:#EDE1D2; --accent-tint:#D9C4AC;
  --ok:#2F6B4F; --ok-soft:#DFEBE3; --crit:#9E3B3B; --crit-soft:#F5E1DF;
  --sombra:0 2px 4px rgba(46,38,32,.04), 0 12px 32px rgba(46,38,32,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bone:#15110D; --surface:#1E1913; --surface-2:#282118; --surface-3:#332A1F;
    --ink:#F2ECE2; --ink-2:#B5A897; --ink-3:#8B7E6E;
    --line:#332B21; --line-2:#4A3F31;
    --accent:#D69C6A; --accent-deep:#EBBE95; --accent-soft:#2B2118; --accent-tint:#6E5439;
    --ok:#7FC7A3; --ok-soft:#16281E; --crit:#E58D82; --crit-soft:#2E1815;
    --sombra:0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bone:#15110D; --surface:#1E1913; --surface-2:#282118; --surface-3:#332A1F;
  --ink:#F2ECE2; --ink-2:#B5A897; --ink-3:#8B7E6E;
  --line:#332B21; --line-2:#4A3F31;
  --accent:#D69C6A; --accent-deep:#EBBE95; --accent-soft:#2B2118; --accent-tint:#6E5439;
  --ok:#7FC7A3; --ok-soft:#16281E; --crit:#E58D82; --crit-soft:#2E1815;
  --sombra:0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
}

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

h1,h2,h3.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:.004em; line-height:1.1; margin:0; text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,52px)}
h2{font-size:clamp(26px,3.4vw,34px); margin:56px 0 0}
h3{font-family:"Karla",sans-serif; font-weight:700; font-size:19px; margin:34px 0 0; letter-spacing:-.005em}
p{margin:18px 0}
a{color:var(--accent); text-underline-offset:3px}
strong,b{font-weight:700}
hr{border:none; border-top:1px solid var(--line); margin:52px 0}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 16px;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bone) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-family:"Instrument Serif",serif; font-size:23px; color:var(--ink); text-decoration:none}
.logo img{width:25px; height:25px; display:block}
.nav-links{display:flex; gap:22px; align-items:center; font-size:14.5px}
.nav-links a{color:var(--ink-2); text-decoration:none; font-weight:500}
.nav-links a:hover, .nav-links a[aria-current]{color:var(--accent)}
@media (max-width:640px){ .nav-links a.oculta{display:none} }

/* ── botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:600; padding:13px 26px; border-radius:2px;
  border:1px solid var(--accent); background:var(--accent); color:var(--surface);
  text-decoration:none; cursor:pointer; transition:background .16s, border-color .16s;
}
.btn:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.btn.fantasma{background:transparent; color:var(--accent); border-color:var(--line-2)}
.btn.fantasma:hover{background:var(--accent-soft); border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ── artículo ── */
article{padding:56px 0 20px}
.art-meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin-top:20px}
.entrada{font-size:20.5px; color:var(--ink-2); margin-top:26px}
article ul, article ol{margin:18px 0; padding-left:24px}
article li{margin:9px 0}
article li::marker{color:var(--line-2)}
article ol li::marker{font-family:"IBM Plex Mono",monospace; font-size:.9em; color:var(--accent)}

.nota{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:2px; padding:20px 22px; margin:32px 0;
}
.nota p{margin:10px 0} .nota p:first-child{margin-top:0} .nota p:last-child{margin-bottom:0}
.nota .titulo{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.nota.aviso{border-left-color:var(--crit)}
.nota.aviso .titulo{color:var(--crit)}

.tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:2px; background:var(--surface); margin:28px 0}
table{border-collapse:collapse; width:100%; min-width:440px; font-size:16px}
th,td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
tr:last-child td{border-bottom:none}
td.num, th.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:15px}
tfoot td{font-weight:700; background:var(--surface-2)}

/* ── calculadora embebida ── */
.calc{margin:38px 0}
.calc-caja{background:var(--surface); border:1px solid var(--line-2); border-radius:3px; box-shadow:var(--sombra); overflow:hidden}
.calc-cab{padding:20px 22px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.calc-cab h3{margin:0; font-family:"Instrument Serif",serif; font-weight:400; font-size:24px}
.calc-cab p{margin:6px 0 0; font-size:14.5px; color:var(--ink-2)}
.calc-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:720px){ .calc-cuerpo{grid-template-columns:minmax(0,1fr)} }
.calc-campos{padding:20px 22px; display:grid; gap:14px; border-right:1px solid var(--line)}
@media (max-width:720px){ .calc-campos{border-right:none; border-bottom:1px solid var(--line)} }
.calc-campo{display:block; min-width:0}
.calc-campo .k{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
.calc-campo .k em{font-style:normal; color:var(--ink-3); font-weight:400; font-family:"IBM Plex Mono",monospace; font-size:11.5px}
.calc-campo input{
  width:100%; min-width:0; padding:9px 11px; font:inherit; font-size:16px;
  font-family:"IBM Plex Mono",monospace; background:var(--bone); color:var(--ink);
  border:1px solid var(--line-2); border-radius:2px; appearance:textfield;
}
.calc-campo input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.calc-campo input::-webkit-outer-spin-button,
.calc-campo input::-webkit-inner-spin-button{appearance:none; margin:0}
.calc-campo .ayuda{display:block; font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.45}

.calc-salida{padding:22px; display:flex; flex-direction:column; gap:18px}
.calc-precio .et{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.calc-precio .pv{display:block; font-family:"Instrument Serif",serif; font-weight:400; font-size:52px; line-height:1.05; margin-top:4px}
.calc-precio .tj{display:block; font-size:14px; color:var(--ink-2); margin-top:6px}
.calc-barras{display:grid; gap:9px}
.calc-b{display:grid; grid-template-columns:1fr auto; gap:2px 10px; font-size:13.5px}
.calc-b .l{color:var(--ink-2)}
.calc-b .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:13px}
.calc-b .r{grid-column:1/-1; height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.calc-b i{display:block; height:100%; border-radius:99px; background:var(--accent-tint)}
.calc-b i.b{background:var(--accent)} .calc-b i.c{background:var(--line-2)} .calc-b i.d{background:var(--ok)}
.calc-veredicto{border-top:1px solid var(--line); padding-top:14px; font-size:15px; color:var(--ink-2)}
.calc-veredicto p{margin:0}
.calc-veredicto.mal{color:var(--crit)}
.calc-veredicto.bien{color:var(--ok)}

/* ── cierre y relacionados ── */
.cierre{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:30px 28px; margin:52px 0 0; text-align:center}
.cierre h3{font-family:"Instrument Serif",serif; font-weight:400; font-size:27px; margin:0}
.cierre p{color:var(--ink-2); margin:12px auto 22px; max-width:44ch}
.otros{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:24px}
.otro{display:block; background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:18px 20px; text-decoration:none; color:inherit; transition:border-color .16s}
.otro:hover{border-color:var(--accent)}
.otro b{display:block; font-size:16.5px; margin-bottom:5px}
.otro span{font-size:14px; color:var(--ink-3)}

footer{border-top:1px solid var(--line); margin-top:64px; padding:32px 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} }

/* ── FAQ del artículo ── */
.faq{border-top:1px solid var(--line); margin-top:20px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:17px 34px 17px 0; font-weight:600; font-size:17px;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace; font-size:19px; color:var(--accent); font-weight:400;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.faq details p{margin:0 0 20px; color:var(--ink-2); font-size:16.5px}