/* ═══════════════════════════════════════════════════════════════════
   guias.css — hoja compartida de las guías de InRoom.
   Mismos tokens que la portada; tipografía pensada para leer largo.
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#f7f3ed; --paper-2:#efe8de; --ink:#1c1714; --ink-2:#5f564d;
  --ink-3:#9c9184; --line:rgba(28,23,20,.14); --line-2:rgba(28,23,20,.26);
  --terra:#b5623c; --ochre:#d99a3e; --olive:#7e8c62; --oak:#c08b52;
  --ease:cubic-bezier(.16,1,.3,1); --serif:'Instrument Serif',Georgia,serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Geist',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:17px;line-height:1.66;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(100% - 44px,1180px);margin-inline:auto}
.lectura{width:min(100% - 44px,690px);margin-inline:auto}

/* ── cabecera ─────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(247,243,237,.92);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:64px}
.marca{display:flex;align-items:center;gap:11px;font-weight:500;font-size:15.5px;
  letter-spacing:-.022em;text-decoration:none}
.marca img{width:28px;height:28px;border-radius:7px}
.top nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.top nav a{font-size:14.5px;color:var(--ink-2);text-decoration:none;letter-spacing:-.012em}
.top nav a:hover{color:var(--ink)}
.top .cta{background:var(--ink);color:var(--paper);padding:9px 17px;border-radius:100px;
  font-size:14px;font-weight:500}
@media(max-width:720px){.top nav a:not(.cta){display:none}}

/* ── cabecera de artículo ─────────────────────────────────────────── */
.migas{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:clamp(34px,5vw,56px) 0 20px}
.migas a{text-decoration:none;color:var(--terra)}
.migas a:hover{text-decoration:underline}
h1{font-size:clamp(31px,4.6vw,50px);line-height:1.04;letter-spacing:-.04em;
  font-weight:500;margin:0 0 22px;max-width:19ch}
h1 .it{font-family:var(--serif);font-style:italic;color:var(--terra);font-weight:400;
  font-size:1.06em;letter-spacing:-.02em}
.entradilla{font-size:clamp(17.5px,2vw,20px);line-height:1.5;color:var(--ink-2);
  letter-spacing:-.014em;margin:0 0 26px;max-width:56ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ── cuerpo ───────────────────────────────────────────────────────── */
article{padding-bottom:clamp(50px,7vw,90px)}
article h2{font-size:clamp(23px,2.9vw,31px);line-height:1.14;letter-spacing:-.032em;
  font-weight:500;margin:clamp(44px,5vw,64px) 0 16px;scroll-margin-top:84px}
article h3{font-size:clamp(18px,2.1vw,21px);line-height:1.25;letter-spacing:-.024em;
  font-weight:550;margin:34px 0 12px;scroll-margin-top:84px}
article p{margin:0 0 20px}
article strong{font-weight:550}
article a{color:var(--terra);text-decoration:none;border-bottom:1px solid rgba(181,98,60,.4)}
article a:hover{border-bottom-color:var(--terra)}
article ul,article ol{margin:0 0 22px;padding-left:22px}
article li{margin-bottom:9px}
article li::marker{color:var(--terra)}

/* ── piezas de contenido ──────────────────────────────────────────── */
.sumario{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;
  padding:22px 24px;margin:30px 0}
.sumario b{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-weight:500}
.sumario ol{margin:0;padding-left:19px;font-size:15.5px}
.sumario li{margin-bottom:7px}
.sumario a{color:var(--ink);text-decoration:none;border:0}
.sumario a:hover{color:var(--terra)}

.clave{background:var(--ink);color:var(--paper);border-radius:5px;padding:26px 28px;margin:34px 0}
.clave .et{display:block;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:12px}
.clave p{color:rgba(247,243,237,.82);margin:0}
.clave p+p{margin-top:13px}
.clave strong,.clave b{color:var(--paper)}
.clave a{color:var(--ochre);border-bottom-color:rgba(217,154,62,.45)}

.aviso{background:#fbf3ea;border:1px solid rgba(181,98,60,.32);border-radius:5px;
  padding:18px 20px;margin:28px 0;font-size:16px;color:#6b4227}
.aviso strong{color:#5a3520}

figure{margin:32px 0}
figure img{border:1px solid var(--line);border-radius:4px}
figcaption{margin-top:10px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7}

table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15.5px}
th{text-align:left;background:var(--ink);color:var(--paper);font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:11px 13px}
td{padding:13px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even) td{background:rgba(28,23,20,.028)}

/* ── caja de conversión ───────────────────────────────────────────── */
.cierre{border:1px solid var(--line);border-radius:5px;padding:28px;margin:44px 0 0;
  background:#fff}
.cierre .et{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra);display:block;margin-bottom:11px}
.cierre h3{margin:0 0 9px;font-size:21px;letter-spacing:-.03em;font-weight:550}
.cierre p{font-size:16px;color:var(--ink-2);margin:0 0 18px}
.cierre a{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  padding:11px 20px;border-radius:100px;font-size:15px;font-weight:500;text-decoration:none;border:0}

/* ── índice de guías ──────────────────────────────────────────────── */
.lista{display:grid;gap:0;border-top:1px solid var(--ink);margin:34px 0 0}
.lista a{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;padding:28px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:padding .4s var(--ease),background .4s var(--ease)}
.lista a:hover{padding-left:16px;background:linear-gradient(90deg,var(--paper-2),transparent)}
.lista em{font-family:'Geist Mono',monospace;font-style:normal;font-size:10.5px;letter-spacing:.12em;
  color:var(--ink-3);padding-top:6px}
.lista h2{margin:0 0 7px;font-size:clamp(20px,2.4vw,26px);line-height:1.15;letter-spacing:-.03em;
  font-weight:500}
.lista a:hover h2{color:var(--terra)}
.lista p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:62ch}
.lista span{display:inline-block;margin-top:10px;font-family:'Geist Mono',monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ── pie ──────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);margin-top:clamp(50px,7vw,90px);padding:34px 0 46px;
  font-size:14.5px;color:var(--ink-3)}
.pie .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pie a{color:var(--ink-2);text-decoration:none;margin-right:18px}
.pie a:hover{color:var(--terra)}

/* ── 404 ──────────────────────────────────────────────────────────── */
.perdido{min-height:calc(100vh - 64px);display:grid;place-items:center;text-align:center;padding:50px 0}
.perdido .cifra{font-family:var(--serif);font-style:italic;font-size:clamp(90px,17vw,180px);
  line-height:.9;color:var(--terra);margin:0 0 6px}
.perdido h1{max-width:18ch;margin-inline:auto;margin-bottom:16px}
.perdido .entradilla{margin-inline:auto;text-align:center}
.perdido .enlaces{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.perdido .enlaces a{border:1px solid var(--line-2);border-radius:100px;padding:10px 18px;
  font-size:14.5px;text-decoration:none;color:var(--ink);transition:.3s var(--ease)}
.perdido .enlaces a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.perdido .enlaces a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}