/* Enciclopedia /learn/ — hereda de styles.css, solo agrega lo propio. */

/* ── Base (móvil primero): una columna de lectura ── */
main.learn{max-width:760px;margin:0 auto;padding:88px 20px 40px}
main.learn h1{font-family:Sora,system-ui,sans-serif;font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 14px}
main.learn h2{font-family:Sora,system-ui,sans-serif;font-size:20px;margin:26px 0 8px}
main.learn p{font-size:17px;line-height:1.75;margin:0 0 14px}
main.learn .lede{font-size:19px;line-height:1.7;font-weight:500}
main.learn ul{margin:0 0 14px;padding-left:22px}
main.learn li{font-size:17px;line-height:1.75;margin-bottom:8px}
/* styles.css le da 90px de padding a .sect (secciones a pantalla completa); acá van seguidas */
main.learn .sect{padding:0;margin:0 0 8px}
main.learn .crumbs{display:block}
.crumbs{font-size:14px;opacity:.7;margin-bottom:20px}
.crumbs a{text-decoration:none}

.learn-disclaimer{background:rgba(15,23,42,.045);border-radius:12px;padding:14px 18px;margin:20px 0 6px}
.learn-disclaimer p{font-size:15px;line-height:1.65;margin:0;opacity:.85}
.learn-calm{background:rgba(37,99,235,.06);border-radius:14px;padding:18px 20px;margin:26px 0}
.learn-calm .src{font-size:13px;opacity:.65;margin:0}
.learn-not{border-left:3px solid rgba(37,99,235,.35);padding-left:18px;margin:26px 0}
.learn-flags{background:rgba(220,38,38,.05);border-radius:14px;padding:18px 20px;margin:26px 0}
.learn-flags h3{font-family:Sora,system-ui,sans-serif;font-size:16px;margin:16px 0 6px}
.flags-urgent{background:rgba(220,38,38,.12);border-left:3px solid #b91c1c;border-radius:10px;
  padding:12px 16px;margin:0 0 6px}
.flags-urgent h3{margin-top:0;color:#991b1b}
.learn-cta{background:rgba(37,99,235,.08);border-radius:16px;padding:24px 22px;margin:32px 0;text-align:center}
.learn-cta h2{margin-top:0}
.learn-cta .cta{display:inline-block;margin-top:6px}
.reviewed{font-size:13.5px;opacity:.6;border-top:1px solid rgba(15,23,42,.1);padding-top:14px;margin:28px 0 0}

/* Tarjetas (índice y relacionados) */
main.learn .gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
main.learn .gcard{display:flex;flex-direction:column;text-decoration:none;padding:20px 22px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.08);transition:transform .18s,box-shadow .18s,border-color .18s}
main.learn .gcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.08);
  border-color:rgba(37,99,235,.3)}
main.learn .gcard h3{font-family:Sora,system-ui,sans-serif;font-size:17px;line-height:1.3;margin:0 0 8px}
main.learn .gcard p{font-size:14.5px;line-height:1.6;margin:0 0 12px;opacity:.8;flex:1}
main.learn .gcard .go{font-size:13.5px;font-weight:600;color:#2563EB}

/* Índice lateral: oculto en móvil, aparece en escritorio */
.learn-side{display:none}

/* ── Escritorio: el índice usa todo el ancho; el artículo suma columna lateral ── */
@media (min-width:1000px){
  main.learn.learn-hub{max-width:1080px;padding-top:104px}
  main.learn.learn-hub .lede{max-width:640px}
  main.learn.learn-hub .gcards{grid-template-columns:repeat(3,1fr)}

  main.learn.learn-article{
    max-width:1080px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 244px;
    grid-template-areas:"crumbs crumbs" "body side";
    column-gap:56px;
    align-items:start;
    padding-top:104px;
  }
  main.learn.learn-article > .crumbs{grid-area:crumbs}
  main.learn.learn-article > .learn-body{grid-area:body;min-width:0;max-width:680px}
  main.learn.learn-article > .learn-side{grid-area:side}

  .learn-side{display:block;position:sticky;top:96px;font-size:14px}
  .learn-side .side-h{font-family:Sora,system-ui,sans-serif;font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;opacity:.55;margin:0 0 12px;font-weight:600}
  .learn-side ul{list-style:none;margin:0 0 20px;padding:0;border-left:1px solid rgba(15,23,42,.1)}
  .learn-side li{margin:0;font-size:14px}
  .learn-side a{display:block;padding:7px 0 7px 14px;text-decoration:none;line-height:1.4;
    color:inherit;opacity:.72;margin-left:-1px;border-left:2px solid transparent}
  .learn-side a:hover{opacity:1;border-left-color:rgba(37,99,235,.35)}
  .learn-side a[aria-current="page"]{opacity:1;font-weight:600;color:#2563EB;
    border-left-color:#2563EB}
  .learn-side .side-cta{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;
    background:rgba(37,99,235,.09);color:#2563EB;font-weight:600;font-size:13.5px;line-height:1.4}
  .learn-side .side-cta:hover{background:rgba(37,99,235,.15)}
}

@media (max-width:520px){main.learn{padding-top:76px}}