/* Fuentes del sistema (el sitio no carga nada de terceros). */
:root{color-scheme:only light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#EFE8D9}
body{
  margin:0; background:#EFE8D9; color:#221C15;
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{max-width:720px; margin:0 auto; padding:0 24px}

/* ── encabezado ─────────────────────────────────────────── */
.top{padding:34px 0 0}
.home{
  font-family:ui-monospace,Menlo,monospace; font-size:13px;
  color:#5C5346; text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.home:hover{color:#221C15}
.dot{width:8px; height:8px; border-radius:50%; background:#B0593B; display:inline-block; flex:none}

header.hd{padding:38px 0 30px; border-bottom:1px solid #D8CFBE; margin-bottom:34px}
h1{
  font-family:Georgia,'Times New Roman',serif; font-weight:400;
  font-size:clamp(31px,6.4vw,46px); letter-spacing:-.02em; line-height:1.12; margin:0 0 14px;
}
.meta{
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:#5C5346; margin:0; letter-spacing:.01em;
}
.lede{color:#5C5346; margin:18px 0 0}

/* ── índice ─────────────────────────────────────────────── */
nav.toc{
  background:#F4EFE6; border:1px solid #E0D6C4; border-radius:13px;
  padding:22px 24px; margin:0 0 42px;
}
nav.toc h2{
  font-family:ui-monospace,Menlo,monospace; font-weight:500;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:#5C5346;
  margin:0 0 14px; padding:0; border:0;
}
nav.toc ol{margin:0; padding:0 0 0 1.3em; color:#5C5346}
nav.toc li{margin:0 0 7px}
nav.toc a{color:#221C15; text-decoration:none; border-bottom:1px solid #D8CFBE}
nav.toc a:hover{color:#B0593B; border-bottom-color:#B0593B}

/* ── cuerpo ─────────────────────────────────────────────── */
main h2{
  font-family:Georgia,'Times New Roman',serif; font-weight:400;
  font-size:clamp(22px,4vw,27px); letter-spacing:-.015em; line-height:1.25;
  margin:44px 0 14px; scroll-margin-top:26px; padding-top:4px;
}
main h2:first-child{margin-top:0}
main h3{
  font-weight:500; font-size:17px; margin:26px 0 8px; color:#221C15;
}
p{margin:0 0 16px}
ul{margin:0 0 16px; padding-left:1.25em}
li{margin:0 0 9px}
a{color:#B0593B}
a:hover{color:#9A4C30}
strong{font-weight:500}
hr{border:0; border-top:1px solid #D8CFBE; margin:46px 0}

.nota{
  background:#F4EFE6; border:1px solid #E0D6C4; border-radius:13px;
  padding:20px 22px; margin:22px 0;
}
.nota p:last-child{margin-bottom:0}
.nota .rotulo{
  font-family:ui-monospace,Menlo,monospace; font-weight:500;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#5C5346;
  display:block; margin-bottom:10px;
}
.cita{font-style:italic; color:#2C251C}
.pasos{counter-reset:paso; list-style:none; padding-left:0; margin:0 0 16px}
.pasos li{
  counter-increment:paso; position:relative; padding-left:38px; margin:0 0 14px;
}
.pasos li::before{
  content:counter(paso); position:absolute; left:0; top:1px;
  width:25px; height:25px; border-radius:50%; background:#E8DFCF; color:#221C15;
  font-family:ui-monospace,Menlo,monospace; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}

/* ── pie ────────────────────────────────────────────────── */
footer.ft{
  border-top:1px solid #D8CFBE; margin-top:52px; padding:30px 0 56px;
  font-size:15px; color:#5C5346;
}
footer.ft a{color:#5C5346; text-decoration:none; border-bottom:1px solid #D8CFBE}
footer.ft a:hover{color:#221C15}

@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .top{padding:26px 0 0}
  header.hd{padding:30px 0 24px; margin-bottom:28px}
  nav.toc{padding:20px; margin-bottom:34px}
  main h2{margin-top:38px}
}