/* ═══════════════════════════════════════════════════════
   BLAD CAPITAL — Página Aprende
   Usa los tokens y superficies de styles.css
═══════════════════════════════════════════════════════ */

/* ─── Estructura: índice fijo + contenido ─── */
.guia {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.guia__indice {
  position: sticky;
  top: calc(var(--nav-alto) + 32px);
  display: grid;
  gap: 12px;
}
.guia__indice h2 {
  font-family: var(--font-texto);
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--c-texto-2);
}
.guia__indice ul { border-left: 1px solid var(--c-filete); }
.guia__indice a {
  display: block;
  margin-left: -1px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--c-texto-2);
  text-decoration: none;
}
.guia__indice a:hover,
.guia__indice a.activo {
  color: var(--c-texto);
  border-left-color: var(--azul-registro);
}

.guia__contenido { display: grid; }

/* ─── Cada tema ─── */
.tema {
  display: grid;
  gap: 22px;
  padding-block: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--marino);
  scroll-margin-top: calc(var(--nav-alto) + 24px);
}
.tema:first-child { padding-top: 0; border-top: 0; }
.tema h2 { max-width: 24ch; }
.tema__lead {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 40rem;
}
.tema__nota {
  max-width: 44rem;
  color: var(--c-texto-2);
  padding-left: 16px;
  border-left: 3px solid var(--azul-registro);
}
.tema__nota strong { color: var(--c-texto); }
.tema__accion { color: var(--c-texto-2); }

/* Características en dos columnas */
.caracteristicas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.caracteristicas div {
  display: grid;
  gap: 6px;
  align-content: start;
  padding-block: 18px;
  border-top: 1px solid var(--c-filete);
}
.caracteristicas dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}
.caracteristicas dd { color: var(--c-texto-2); }

/* Perfiles del inversionista */
.perfiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.perfiles li {
  padding-block: 16px;
  border-top: 1px solid var(--c-filete);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}

.diversificar {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--blanco);
  border: 1px solid var(--c-filete);
  border-radius: var(--radio-panel);
}
.diversificar p { color: var(--c-texto-2); }
.lista-marcas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  margin-top: 6px;
}
.lista-marcas li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.lista-marcas li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  transform: translateY(-2px) rotate(45deg);
  background: var(--azul-registro);
}

/* Cita */
.tema__cita p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  max-width: 38rem;
  color: var(--c-texto);
  padding-left: 20px;
  border-left: 3px solid var(--azul-registro);
}

/* Errores */
.errores { display: grid; }
.error {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px 32px;
  padding-block: 24px;
  border-top: 1px solid var(--c-filete);
}
.error__numero {
  font-size: var(--t-14);
  font-weight: 700;
  color: var(--azul-registro);
  padding-top: 6px;
}
.error__cuerpo { display: grid; gap: 12px; }
.error__cuerpo p { color: var(--c-texto-2); max-width: 40rem; }

.alertas {
  border-radius: var(--radio-panel);
  padding: 20px 24px;
  display: grid;
  gap: 12px;
  max-width: 34rem;
}
.alertas__titulo { font-weight: 600; color: var(--oro); }
.alertas ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.alertas li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--blanco);
}
.alertas li::before {
  content: "!";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--oro);
  color: var(--oro);
  font-size: 0.75rem;
  font-weight: 700;
  transform: translateY(2px);
}

/* Tres puntos a revisar */
.puntos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.puntos li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 18px;
  border-top: 2px solid var(--marino);
}
.puntos h3 { font-size: 1.375rem; }
.puntos p { color: var(--c-texto-2); }
.puntos .enlace { font-size: 0.95rem; }

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .guia { grid-template-columns: 1fr; gap: 40px; }
  .guia__indice {
    position: static;
    padding: 18px 20px;
    background: var(--blanco);
    border: 1px solid var(--c-filete);
    border-radius: var(--radio-panel);
  }
  .guia__indice ul { border-left: 0; display: grid; gap: 2px; }
  .guia__indice a { padding: 8px 0; margin-left: 0; border-left: 0; }
  .puntos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .caracteristicas,
  .perfiles,
  .lista-marcas,
  .alertas ul { grid-template-columns: 1fr; }
  .error { grid-template-columns: 1fr; gap: 4px; }
  .error__numero { padding-top: 0; }
}