/* landing/documentacion.css
 *
 * Las paginas generadas (documentacion y paginas de giro). Se apoya en las
 * variables de estilos.css, que se enlaza antes: aqui NO se declara ni un
 * color propio, para que el sitio siga teniendo una sola paleta.
 *
 * Es un documento para leer, no una landing: columna angosta, mucho aire y
 * ninguna animacion. Quien llega aqui viene a entender algo. */

.pagina-doc { background: var(--papel); color: var(--tinta); }
.doc-ancho { width: min(100% - 32px, 820px); margin-inline: auto; }

.doc-cabeza { border-bottom: 1px solid var(--linea); padding: 18px 0; }
.doc-cabeza .doc-ancho { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.doc-marca { font-weight: 700; color: var(--tinta); text-decoration: none; letter-spacing: -.01em; }
.doc-nav { display: flex; gap: 18px; }
.doc-nav a { color: var(--tinta-suave); text-decoration: none; font-size: .92rem; }
.doc-nav a:hover { color: var(--naranja); }

.doc-cuerpo { padding: 28px 0 64px; }

.migas { font-size: .82rem; color: var(--tinta-suave); margin-bottom: 20px; }
.migas a { color: var(--tinta-suave); }
.migas-sep { margin: 0 6px; }
.migas [aria-current] { color: var(--tinta); }

.doc-cuerpo h1 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; margin: 0 0 12px; letter-spacing: -.02em; }
.doc-cuerpo h2 { font-size: 1.16rem; margin: 32px 0 10px; letter-spacing: -.01em; }
.doc-entrada { font-size: 1.05rem; color: var(--tinta-media); margin: 0 0 18px; }

.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--tinta-suave);
    border-block: 1px solid var(--linea-tenue); padding: 10px 0; margin: 0 0 26px; }
.doc-meta strong { font-weight: 600; color: var(--tinta-media); }

.doc-respuesta { background: var(--papel-hueso); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; }
.doc-respuesta h2 { margin-top: 0; }
.doc-respuesta dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: .92rem; }
.doc-respuesta dt { font-weight: 600; color: var(--tinta-media); }
.doc-respuesta dd { margin: 0; color: var(--tinta-media); }
.doc-cuidado { margin: 14px 0 0; font-size: .92rem; color: var(--tinta-media); }

.doc-pasos ol { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.doc-pasos li strong { display: block; }
.doc-pasos li span { color: var(--tinta-media); }

.doc-infografia { margin: 32px 0 0; }
.doc-infografia img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--radio); display: block; }

.doc-claves { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 0; }
.doc-claves span { font-size: .78rem; color: var(--tinta-suave); background: var(--papel-hueso);
    border: 1px solid var(--linea-tenue); border-radius: 999px; padding: 3px 10px; }

.doc-modulos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.doc-modulos a { font-size: .88rem; text-decoration: none; color: var(--tinta-media);
    border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px; }
.doc-modulos a:hover { border-color: var(--naranja); color: var(--naranja); }
.doc-modulos a span { color: var(--tinta-suave); }

.doc-grupo { scroll-margin-top: 20px; }
.doc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-lista li { border-bottom: 1px solid var(--linea-tenue); padding: 12px 0; }
.doc-lista a { display: block; font-weight: 600; color: var(--tinta); text-decoration: none; }
.doc-lista a:hover { color: var(--naranja); }
.doc-lista span { display: block; font-size: .9rem; color: var(--tinta-suave); margin-top: 2px; }

.doc-pie { border-top: 1px solid var(--linea); padding: 26px 0 40px; font-size: .86rem; color: var(--tinta-suave); }
.doc-pie p { margin: 0 0 8px; }
.doc-pie nav { display: flex; gap: 16px; flex-wrap: wrap; }
.doc-pie a { color: var(--tinta-suave); }

@media (max-width: 640px) {
    .doc-respuesta dl { grid-template-columns: 1fr; gap: 2px; }
    .doc-respuesta dt { margin-top: 8px; }
}