/* Plantilla de lectura de las guías (skill contenido-seo §5). Usa los tokens de styles.css; no añadir colores.
   Sin animaciones decorativas: es para leer. */

/* Cabecera de la guía (zona oscura) */
.g-hero { position: relative; isolation: isolate; overflow: clip; padding: 56px 0 64px; }
.g-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 140%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 10% 10%, rgb(98 186 181 / 0.16), transparent 70%), radial-gradient(30% 40% at 90% 80%, rgb(11 100 102 / 0.22), transparent 72%);
}
.g-hero .wrap { display: grid; gap: 22px; max-width: 900px; margin-left: max(0px, calc((100% - var(--container)) / 2)); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font: 500 0.8125rem/1.4 var(--mono); color: var(--ink-subtle); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--hairline); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.g-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 22ch; }
.answer { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--ink-muted); max-width: 64ch; }
.answer strong { color: var(--ink); font-weight: 600; }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 0.8125rem/1.5 var(--mono); color: var(--ink-subtle); }
.g-meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }

/* Cuerpo */
.g-body { padding: 64px 0 var(--section-y); }
.g-layout { display: grid; gap: 40px; }
@media (min-width: 1100px) {
  .g-layout { grid-template-columns: minmax(0, 720px) 260px; justify-content: space-between; }
  .toc { position: sticky; top: 88px; align-self: start; order: 2; }
}
.toc { padding: 20px 22px; border-radius: var(--r-panel); }
.toc p { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 12px; }
.toc ol { display: grid; gap: 8px; counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 1.6em 1fr; font-size: 0.9375rem; line-height: 1.4; }
.toc li::before { content: counter(toc); font: 500 0.8125rem/1.6 var(--mono); color: var(--accent); }
.toc a { color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

.prose { display: grid; gap: 18px; max-width: 720px; min-width: 0; }
.prose > h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.03em; margin-top: 36px; scroll-margin-top: 88px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 10px; }
.prose p, .prose li { color: var(--ink-muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { list-style: disc; padding-left: 1.25em; display: grid; gap: 8px; }
.prose ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 8px; }
.prose code { font-family: var(--mono); font-size: 0.875em; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; color: var(--ink); white-space: nowrap; }
.note { font-size: 0.9375rem; color: var(--ink-subtle) !important; }

/* Tablas con scroll en móvil */
.tbl { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface); -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.tbl caption { text-align: left; padding: 14px 16px 0; font: 500 0.8125rem/1.4 var(--mono); color: var(--ink-subtle); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.tbl thead th { font-weight: 600; color: var(--ink); background: var(--surface-2); }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl td { color: var(--ink-muted); }
.tbl tr:last-child > * { border-bottom: 0; }
.tbl .hl > * { background: var(--accent-soft); }

/* Recuadros */
.box { padding: 24px 26px; display: grid; gap: 14px; }
.box h2, .box h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.015em; }
.box-it { border-left: 4px solid var(--accent); }
.checks { list-style: none !important; padding: 0 !important; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.checks li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; border-radius: 4px; border: 1.5px solid var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 8px 8px no-repeat; }
.stamp { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--r-panel); border: 1px dashed var(--hairline); background: var(--surface-2); font-size: 0.9375rem; }
.stamp b { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.stamp p { color: var(--ink-muted); }

/* CTA en línea */
.cta-inline { padding: 24px 26px; display: grid; gap: 14px; border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); }
.cta-inline p { color: var(--ink); }
.cta-inline .btn { justify-self: start; }

/* Diagrama */
.diagram { margin: 6px 0; padding: 18px; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface); overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }
.diagram figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-subtle); }
.d-box { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 1.5; }
.d-box-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-title { font: 600 15px var(--sans); fill: var(--ink); }
.d-text { font: 400 12.5px var(--sans); fill: var(--ink-muted); }
.d-mono { font: 500 11px var(--mono); fill: var(--accent); letter-spacing: 0.06em; }
.d-line { stroke: var(--accent); stroke-width: 2; fill: none; }
.d-stop { stroke: var(--danger); stroke-width: 2; fill: none; stroke-dasharray: 5 5; }
.d-stop-text { font: 500 11.5px var(--sans); fill: var(--danger); }
.d-arrow { fill: var(--accent); }

/* Fuentes */
.sources { font-size: 0.875rem; }
.sources li { color: var(--ink-subtle); }

/* CTA final (zona oscura) */
.g-cta { position: relative; isolation: isolate; overflow: clip; padding: var(--section-y) 0; }
.g-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 60% at 85% 20%, rgb(98 186 181 / 0.14), transparent 70%), radial-gradient(30% 50% at 0% 100%, rgb(11 100 102 / 0.2), transparent 70%); }
.g-cta::after { content: ""; position: absolute; top: -1px; left: 50%; width: min(1000px, 92%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(98 186 181 / 0.75), transparent); box-shadow: 0 0 28px 3px rgb(98 186 181 / 0.25); pointer-events: none; }
.g-cta .wrap { display: grid; gap: 20px; max-width: 820px; margin-left: max(0px, calc((100% - var(--container)) / 2)); }
.g-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.g-cta p { color: var(--ink-muted); max-width: 62ch; }
.g-cta .price-line { font: 500 0.9375rem/1.5 var(--mono); color: var(--ink); }
.g-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .g-cta .actions .btn { width: 100%; white-space: normal; text-align: center; } }

/* Índice de guías */
.g-list { display: grid; gap: 16px; max-width: 820px; }
.g-item { padding: 24px 26px; display: grid; gap: 8px; text-decoration: none; color: inherit; }
.g-item h2 { font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink); }
.g-item p { color: var(--ink-muted); }
.g-item > span { font: 500 0.8125rem/1.4 var(--mono); color: var(--accent); }
.g-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); }