/* =========================================================================
   Guías de aprende/: encaje con el nav y el footer de la web (25-sep-2026)
   -------------------------------------------------------------------------
   Va detrás de aprende/aprende.css. Los artículos traen su propio diseño
   (textos y estilos aprobados, casi todo en línea): esta hoja no lo cambia,
   solo lo acomoda al nav fijo y al footer que pone ui-layout.js y le aplica
   la escala de assets/aprende-articulo.js.
   ========================================================================= */

/* El nav de ui-layout.js es fijo: se reserva su hueco arriba. Fondo crema,
   el mismo que aprende/index.html (antes blanco, de aprende.css). */
body { padding-top: 62px; background: #FAF7F3; }

/* La escala de la maqueta (ver aprende-articulo.js). «clip» en vez del
   «hidden» en línea: recorta igual lo que se salga por los lados, pero no
   convierte el bloque en contenedor de scroll, así que el índice fijo
   (position: sticky) del diseño funciona. */
[data-article-root] { zoom: var(--ap-extra, 1); overflow-x: clip !important; }

/* La barra de progreso de lectura, pegada bajo el nav */
[data-article-root] > div:first-child { top: calc(62px / var(--ap-extra, 1)) !important; z-index: 49 !important; }

/* El índice fijo y los saltos a cada apartado, sin quedar tapados por el nav */
[data-toc-desktop] { top: calc(62px / var(--ap-extra, 1) + 24px) !important; }
[data-article-root] [id] { scroll-margin-top: calc(62px / var(--ap-extra, 1) + 24px) !important; }

/* Nav y footer con la letra de la web (aprende.css cambia la del body) y sin
   el gris que aprende.css da a todos los enlaces al pasar el ratón */
.ri-nav, .ri-foot { font-family: var(--font); }
.ri-nav__links a:hover, .ri-nav__login:hover, .ri-nav__beta:hover, .ri-nav__brand:hover { color: var(--ink); }
.ri-nav__reg:hover { color: #fff; }

/* Footer como el de la portada: blanco, con el texto en negro */
.ri-foot { background: #fff; border-top: 1px solid #ebe6df; }
.ri-foot nav a, .ri-foot__contact, .ri-legal { color: #0f172a; }
.ri-foot nav a:hover { color: #0f172a; text-decoration: underline; text-underline-offset: 2px; }
.ri-foot__contact a:hover, .ri-legal a:hover { color: #000; }
.ri-social a { color: #0f172a; border-color: rgba(15,23,42,.25); }
.ri-social a:hover { color: #0f172a; border-color: rgba(15,23,42,.6); background: rgba(15,23,42,.06); }