/*
 * Guía de producto de Roads Unleashed (/guide).
 *
 * Va aparte de `roads-unleashed.css` porque esa hoja se genera con
 * `ops/design/roads-unleashed-css.py` y no se edita a mano. Esta usa los mismos
 * tokens de la marca y solo añade lo que una página de texto largo necesita:
 * índice, capítulos numerados y una versión de impresión legible.
 */

.ru-guide .guia-toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--filete);
}

.ru-guide .guia-toc a {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--filete);
    color: var(--hueso);
    font-family: var(--font-display);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.25;
    text-decoration: none;
    transition: color 140ms ease;
}

.ru-guide .guia-toc a:hover,
.ru-guide .guia-toc a:focus-visible {
    color: var(--naranja);
}

.ru-guide .guia-toc a:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 3px;
}

.ru-guide .guia-toc a span {
    color: var(--naranja);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
}

.ru-guide .guia-cap-in {
    display: grid;
    grid-template-columns: minmax(0, 0.16fr) minmax(0, 0.84fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: start;
}

.ru-guide .guia-cap__number {
    margin: 6px 0 0;
    color: var(--naranja);
    font-size: 13px;
}

.ru-guide .guia-texto {
    max-width: 64ch;
    margin: 16px 0 0;
    color: var(--gris);
    font-size: 17px;
    line-height: 1.65;
}

.ru-guide .guia-lista {
    max-width: 64ch;
    margin: 20px 0 0;
    padding-left: 1.1rem;
    color: var(--hueso);
}

.ru-guide .guia-lista li + li {
    margin-top: 9px;
}

.ru-guide .guia-lista li::marker {
    color: var(--naranja);
}

.ru-guide .guia-cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.ru-guide .guia-contacto {
    color: var(--naranja);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

@media (max-width: 860px) {
    .ru-guide .guia-cap-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

@media print {
    .ru-guide {
        background: #fff;
        color: #111;
    }

    .ru-guide .top,
    .ru-guide .pie,
    .ru-guide .guia-cierre,
    .ru-guide .rb-cookie-notice,
    .ru-guide .rb-cookie-dialog {
        display: none !important;
    }

    .ru-guide .cab {
        padding: 0 0 18px;
        border-bottom: 2px solid #111;
    }

    .ru-guide .cab h1,
    .ru-guide .guia-toc a,
    .ru-guide .guia-lista,
    .ru-guide h2 {
        color: #111;
    }

    .ru-guide .guia-texto,
    .ru-guide .cab p {
        color: #111;
    }

    .ru-guide .sec {
        padding-block: 16pt;
        border-top: 1px solid #999;
    }

    .ru-guide .guia-toc a span,
    .ru-guide .guia-cap__number {
        color: #111;
    }

    .ru-guide .guia-toc a,
    .ru-guide .guia-contacto {
        text-decoration: underline;
    }
}