/* ==========================================================================
   CUENTAS CLARAS — GUÍA DE USO
   --------------------------------------------------------------------------
   Estilos propios de /guia/. Hereda tokens.css + primitives.css + landing.css
   (header, footer, botones, tipografía). Acá solo lo específico de la
   página de guía: hero, índice anclado, secciones y badges de plan.
   ========================================================================== */

/* ── Header heredado del landing: dos ajustes propios de la guía ──────── */

/* 1. Opaco. El header del landing es translúcido (rgba .92 + backdrop-blur);
      acá se scrollea permanentemente sobre capturas oscuras y el contenido de
      atrás se transparenta (se leían botones de la app a través de la barra). */
.site-header { background-color: var(--color-white); }

/* 2. CTA siempre visible. landing.css esconde .nav-links Y .nav-cta abajo de
      880px porque ahí entra el menú hamburguesa, que vive en main.js — script
      del landing que la guía no carga. Sin esto el header mobile queda solo con
      la marca. Los links de sección ya los cubre el índice anclado. */
.nav-cta { display: inline-flex; }
@media (max-width: 879.98px) {
  .nav-cta { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-xs); }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.guia-hero {
  padding-block: var(--space-10) var(--space-8);
  background-color: var(--color-ink-50);
  border-bottom: 1px solid var(--color-ink-150);
}
.guia-hero h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink-900);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2) 0 var(--space-4);
}
.guia-hero-sub {
  max-width: 46rem;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-600);
  margin: 0 0 var(--space-5);
}
.guia-plan-note {
  max-width: 46rem;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-600);
  background-color: var(--color-white);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.guia-plan-note a { color: var(--color-primary-700); text-decoration: underline; }

.badge-plan {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-full);
  padding: 0.2em 0.7em;
  white-space: nowrap;
}
.badge-plan-sm { font-size: 0.7em; padding: 0.1em 0.5em; margin-left: 0.4em; }

/* ── Índice anclado (sticky bajo el header) ──────────────────────────── */

.guia-toc {
  position: sticky;
  top: 64px; /* alto de .nav (site-header) */
  z-index: 150; /* debajo de --z-header (200) */
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-ink-150);
}
/* Wrappea en desktop (los 12 chips no entran en una línea ni a 1280px, y un
   scroll lateral es poco descubrible); abajo de 900px pasa a strip scrolleable,
   que en mobile sí es el patrón esperado. */
.guia-toc-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
}
@media (max-width: 899.98px) {
  .guia-toc-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}
.guia-toc-inner a {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-700);
  background-color: var(--color-ink-100);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  transition: var(--transition-color);
}
.guia-toc-inner a:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* ── Secciones ────────────────────────────────────────────────────────── */

.guia-section {
  padding-block: var(--space-10);
  /* Debe superar la altura de TODO lo sticky (header + índice), si no el h2 del
     destino queda tapado. Medido: <900px → 65+60=125px · ≥900px → 65+105=170px
     (arriba de 900 el índice wrappea a 2 líneas). Si cambia el alto del header
     o del índice, re-medir con e2e/verify-guia.mjs (imprime "Sticky: ..."). */
  scroll-margin-top: 140px;
}
@media (min-width: 900px) {
  .guia-section { scroll-margin-top: 186px; }
}
.guia-section-alt { background-color: var(--color-ink-50); }
.guia-section-inner { max-width: 52rem; }

.guia-section h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink-900);
  margin: 0 0 var(--space-3);
}
.guia-section-head-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.guia-section-head-row h2 { margin-bottom: 0; }

.guia-section-lead {
  font-size: var(--text-md);
  color: var(--color-ink-600);
  line-height: var(--leading-relaxed);
  margin: var(--space-2) 0 var(--space-6);
}

.guia-section h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-900);
  margin: var(--space-6) 0 var(--space-2);
}
.guia-section p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
  margin: 0 0 var(--space-4);
}
.guia-section code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background-color: var(--color-ink-100);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
}
.guia-section img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ink-200);
  box-shadow: var(--shadow-md);
  margin-block: var(--space-4);
}

/* Recortes chicos (un botón, un control) — a tamaño natural, no estirados. */
.guia-section img.guia-img-inline {
  width: auto;
  max-width: 100%;
  box-shadow: var(--shadow-xs);
}

.guia-tip {
  background-color: var(--color-info-bg);
  border-left: 4px solid var(--color-info-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

/* ── Primeros pasos — lista numerada ──────────────────────────────────── */

.guia-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  counter-reset: none;
}
.guia-steps > li {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-ink-150);
}
.guia-steps > li:first-child { padding-top: 0; border-top: none; }
.guia-steps h3 { margin-top: 0; }

/* ── Cards de las 4 puertas de stock ──────────────────────────────────── */

/* min 300px → 2 columnas en el ancho de prosa (52rem): las 4 puertas quedan 2x2
   en vez de 3+1 con una huérfana. Colapsa a 1 columna en mobile. */
.guia-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-block: var(--space-4) var(--space-6);
}
.guia-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}
.guia-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}
.guia-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}

/* ── Comparación de planes (sección Planes) ──────────────────────────── */

.guia-plans-compare {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-block: var(--space-4) var(--space-6);
}
@media (min-width: 640px) {
  .guia-plans-compare { grid-template-columns: 1fr 1fr; }
}
.guia-plan-col {
  background-color: var(--color-white);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.guia-plan-col-featured {
  border: 2px solid var(--color-primary-500);
}
.guia-plan-col h3 {
  margin-top: 0;
  font-size: var(--text-md);
}
.guia-plan-col ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}