/* ============================================================
   pages/guide.css — "Guía" archetype (evergreen help/guide hub)
   Reuses tokens + components (data-table, faq, callout, steps,
   cta-band, cards). Adds guide-specific bits only.
   ============================================================ */

/* Guide hero */
.guide-hero{position:relative;overflow:hidden;padding-block:var(--s7) var(--s6);border-bottom:1px solid var(--border)}
.guide-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(640px 300px at 90% -30%,var(--primary-soft),transparent 60%)}
.guide-hero__in{position:relative;max-width:var(--maxw-prose)}
.guide-hero h1{font-size:clamp(2rem,4.2vw,var(--t-4xl));letter-spacing:-.03em}
.guide-hero .tagline{font-size:var(--t-lg);color:var(--text-muted);margin-top:var(--s4)}
.guide-meta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);font-size:var(--t-sm);color:var(--text-subtle)}
.guide-meta .updated{display:inline-flex;align-items:center;gap:7px}
.guide-meta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Guide layout: content + optional sticky TOC */
.guide-layout{display:grid;grid-template-columns:1fr 240px;gap:var(--s7);align-items:start;padding-block:var(--s7)}
@media (max-width:900px){.guide-layout{grid-template-columns:1fr}}
.guide-body{min-width:0;max-width:var(--maxw-prose)}
.guide-toc{position:sticky;top:calc(var(--header-h) + 12px);order:2}
@media (max-width:900px){.guide-toc{position:relative;top:0;order:-1}}
.guide-toc__card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4) var(--s5)}
.guide-toc h2{font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle);margin-bottom:var(--s3)}
.guide-toc ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.guide-toc a{display:block;padding:6px 8px;border-radius:var(--r-sm);color:var(--text-muted);font-size:var(--t-sm)}
.guide-toc a:hover{background:var(--bg-sunken);color:var(--text);text-decoration:none}
.guide-toc a.is-active{color:var(--primary);background:var(--primary-soft)}

/* Answer-first verdict box */
.verdict{display:flex;gap:var(--s4);padding:var(--s5) var(--s6);border-radius:var(--r-xl);border:1px solid var(--border);background:linear-gradient(120deg,var(--primary-soft),var(--accent-soft));margin-bottom:var(--s6)}
.verdict .v-ico{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-md);background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.verdict .v-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.verdict b{display:block;font-family:var(--font-display);font-size:var(--t-lg);margin-bottom:4px}
.verdict p{color:var(--text);font-size:var(--t-base)}
.verdict p + p{margin-top:8px;color:var(--text-muted);font-size:var(--t-sm)}

/* Guide section headings + answer-first lead */
.guide-section{margin-bottom:var(--s8);scroll-margin-top:calc(var(--header-h) + 16px)}
.guide-section > h2{font-size:var(--t-2xl);margin-bottom:var(--s3)}
.guide-section .lead-answer{font-size:var(--t-lg);color:var(--text);margin-bottom:var(--s4)}
.guide-section p{color:var(--text-muted)}
.guide-section p + p{margin-top:var(--s3)}

/* Comparison table: category rows + Lite/Premium columns */
.compare th:first-child{width:46%}
.compare td.center,.compare th.center{text-align:center}
.compare .cat td{background:var(--bg-sunken);font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);font-weight:var(--fw-semibold)}
.compare .yes{color:var(--accent);font-weight:var(--fw-semibold)}
.compare .no{color:var(--text-subtle)}
.compare .col-premium{background:var(--primary-soft)}
.compare thead .col-premium{color:var(--primary)}

/* "Pick" cards */
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:700px){.pick-grid{grid-template-columns:1fr}}
.pick-card{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.pick-card.is-premium{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--sh-md)}
.pick-card h3{font-size:var(--t-xl);display:flex;align-items:center;gap:10px}
.pick-card ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:4px}
.pick-card li{display:flex;gap:10px;font-size:var(--t-sm);color:var(--text-muted);align-items:flex-start}
.pick-card li svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.pick-card .btn{margin-top:auto}

/* Guides hub index grid */
.guides-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.guides-grid{grid-template-columns:1fr}}