/* Hoja de los recursos (hub + artículos).
   Mismos tokens y registros del design system que la landing; aquí solo vive
   lo propio de una página de lectura larga. */
:root {
  --paper: #f2f4f3;
  --card: #ffffff;
  --ink: #1c2422;
  --ink-2: #5d6b66;
  --ink-3: #82918a;
  --line: #dde3e0;
  --accent: #0d6b5c;
  --accent-soft: #e6f4ef;
  --signal: #b06a3b;
  --night: #0b1411;
  --night-halo: #16342a;
  --night-ink: #e8efec;
  --night-dim: #9db4ac;
  --night-line: rgba(255,255,255,0.12);
  --glow: #55c0a8;
  --whatsapp: #25d366;
  --halo: radial-gradient(1100px 600px at 50% -10%, var(--night-halo) 0%, var(--night) 60%);
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}
* { margin: 0; box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink);
  font: 17px/1.7 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Iowan Old Style", "Palatino", Georgia, serif; text-wrap: balance; }
a { color: var(--accent); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--s-5); }
.wrap-wide { max-width: 1020px; }

/* cabecera nocturna: la firma de la marca abre también aquí */
.top { background: var(--halo); color: var(--night-ink); padding-bottom: var(--s-7); }
.top nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; flex-wrap: wrap; }
.brandmark { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brandmark .wm { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.brandmark .wm b { color: var(--glow); font-weight: 600; }
.brandmark .wm span { color: #fff; }
.top nav .cta { font-size: .88rem; font-weight: 600; color: var(--night-ink); text-decoration: none; border: 1px solid rgba(255,255,255,.3); padding: 8px 18px; border-radius: 10px; }
.top nav .cta:hover { border-color: var(--glow); color: var(--glow); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); margin-bottom: var(--s-3); display: block; text-decoration: none; }
a.kicker:hover { color: #fff; }
.top h1 { font-size: clamp(28px, 4.6vw, 40px); line-height: 1.18; font-weight: 600; color: var(--night-ink); max-width: 22ch; }
.top .lede { color: var(--night-dim); margin-top: var(--s-4); font-size: 1.06rem; max-width: 58ch; }
.meta { margin-top: var(--s-5); font-family: var(--mono); font-size: .76rem; color: var(--night-dim); }

.precio-badge {
  display: inline-flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-5); padding: var(--s-3) var(--s-5);
  border: 1px solid var(--night-line); border-radius: 12px; background: rgba(255,255,255,.04);
}
.precio-badge b { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.7rem; color: var(--glow); }
.precio-badge span { font-size: .8rem; color: var(--night-dim); }

.ic { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex-shrink: 0; }

/* cuerpo del artículo */
article { padding: var(--s-8) 0; }
article > * + * { margin-top: 1.15em; }
article p { color: var(--ink-2); max-width: 68ch; }
article h2 { font-size: 1.45rem; margin-top: 1.8em; }
article h3 { font-size: 1.1rem; margin-top: 1.5em; }
article strong { color: var(--ink); }
article ul, article ol { color: var(--ink-2); padding-left: 1.3em; max-width: 66ch; }
article li + li { margin-top: .4em; }
article table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.tabla { overflow-x: auto; }
article th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px; border-bottom: 2px solid var(--line); }
article td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
article td b { color: var(--ink); }
article th:last-child, article tbody tr td:last-child { background: var(--accent-soft); }
.nota { font-size: .88rem; color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: var(--s-4); }

/* preguntas frecuentes del artículo */
.faq { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) var(--s-5);
  font-family: "Iowan Old Style", Georgia, serif; font-size: 1rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--mono); font-size: 1.2rem; color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 var(--s-5) var(--s-4); }
.faq .a p { font-size: .92rem; margin: 0; }

/* cierre y navegación entre artículos */
.cta-box { background: var(--halo); color: var(--night-ink); border-radius: 14px; padding: var(--s-7) var(--s-6); margin-top: var(--s-8); }
.cta-box h2 { color: var(--night-ink); font-size: 1.4rem; margin: 0 0 var(--s-3); max-width: 24ch; }
.cta-box p { color: var(--night-dim); max-width: 52ch; margin-bottom: var(--s-5); }
.btn-wa { display: inline-block; background: var(--whatsapp); color: var(--night); font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(37,211,102,.5); }
.btn-wa:hover { filter: brightness(1.06); }

.sigue { margin-top: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.sigue .lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5); text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 18px 40px -28px rgba(13,107,92,.5); }
.card .t { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.02rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; }
.card .d { font-size: .86rem; color: var(--ink-2); }

footer { padding: var(--s-6) 0 var(--s-7); margin-top: var(--s-8); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }