/*
 * Manual de uso público de Roadbook PRO (/manual).
 *
 * Va aparte de `landing.css` y no depende del bundle de Vite: esta página es
 * texto largo con anclas y debe seguir leyéndose aunque el build de assets no
 * esté disponible. Reutiliza los tokens y los componentes de marca que ya
 * define `landing.css` (`.brand`, `.site-nav`, `.mobile-menu`).
 */

.manual-page {
    background: var(--roadbook-black);
    color: var(--roadbook-white);
}

.manual-shell {
    width: min(var(--roadbook-max), calc(100% - 64px));
    margin-inline: auto;
}

.manual-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--roadbook-white);
    color: var(--roadbook-black);
    transform: translateY(-150%);
}

.manual-skip:focus {
    transform: translateY(0);
}

/* Cabecera: fija, porque el manual es largo y el índice tiene que estar a mano. */
.manual-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(247, 247, 245, 0.12);
    background: rgba(7, 7, 7, 0.94);
    backdrop-filter: blur(10px);
}

.manual-header__inner {
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.manual-header .site-nav a[aria-current="page"] {
    color: var(--roadbook-orange);
}

.manual-header__index {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(242, 127, 13, 0.55);
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.manual-header__index:hover,
.manual-header__index:focus-visible {
    background: rgba(242, 127, 13, 0.14);
}

.manual-header__index:focus-visible {
    outline: 3px solid var(--roadbook-white);
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .manual-header__index {
        display: none;
    }
}

/* Portada del manual */
.manual-hero {
    padding: 90px 0 64px;
    border-bottom: 1px solid rgba(247, 247, 245, 0.1);
    background:
        radial-gradient(circle at 12% 0%, rgba(242, 127, 13, 0.16), transparent 46%),
        var(--roadbook-black);
}

.manual-kicker {
    margin: 0 0 18px;
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.manual-hero h1 {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(3rem, 9vw, 6.4rem);
    line-height: 0.86;
    text-transform: uppercase;
}

.manual-hero h1 span {
    color: var(--roadbook-orange);
}

.manual-hero__lead {
    max-width: 62ch;
    margin: 28px 0 0;
    color: var(--roadbook-muted);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
}

/* El nombre de la marca no se parte entre líneas: «ROADBOOK / PRO» se lee mal. */
.manual-hero h1 span {
    white-space: nowrap;
}

.manual-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 26px 0 0;
    padding: 0;
    color: rgba(247, 247, 245, 0.55);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    list-style: none;
    text-transform: uppercase;
}

.manual-quick {
    display: grid;
    gap: 14px;
    margin-top: 44px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.manual-quick a {
    display: block;
    padding: 20px;
    border: 1px solid rgba(247, 247, 245, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: var(--roadbook-white);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
}

.manual-quick a:hover,
.manual-quick a:focus-visible {
    border-color: var(--roadbook-orange);
    transform: translateY(-2px);
}

.manual-quick strong {
    display: block;
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.manual-quick span {
    display: block;
    margin-top: 8px;
    color: var(--roadbook-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Índice */
.manual-index {
    padding: 72px 0 24px;
    scroll-margin-top: 100px;
}

.manual-index h2,
.manual-chapter h2 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 0.92;
    text-transform: uppercase;
}

.manual-index__groups {
    display: grid;
    gap: 34px;
    margin-top: 34px;
}

.manual-index__group h3 {
    margin: 0 0 14px;
    color: rgba(247, 247, 245, 0.5);
    font-family: "Barlow", Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.manual-index__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manual-index__list a {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 4px 16px;
    padding: 16px 18px;
    border: 1px solid rgba(247, 247, 245, 0.1);
    background: rgba(255, 255, 255, 0.02);
    color: var(--roadbook-white);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.manual-index__list a:hover,
.manual-index__list a:focus-visible {
    border-color: var(--roadbook-orange);
    background: rgba(242, 127, 13, 0.08);
}

.manual-index__list a:focus-visible {
    outline: 3px solid var(--roadbook-white);
    outline-offset: 2px;
}

.manual-index__number {
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.5rem;
    line-height: 1;
}

.manual-index__title {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.45rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.manual-index__summary {
    grid-column: 2;
    color: rgba(247, 247, 245, 0.6);
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 900px) {
    .manual-index__groups {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

/* Capítulos */
.manual-body {
    padding: 40px 0 80px;
}

.manual-chapter {
    padding: 56px 0;
    border-top: 1px solid rgba(247, 247, 245, 0.12);
    scroll-margin-top: 100px;
}
.manual-chapter__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 20px;
    align-items: start;
}

.manual-chapter__number {
    margin: 4px 0 0;
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1;
}

.manual-chapter__body {
    max-width: 72ch;
    margin-top: 26px;
    color: rgba(247, 247, 245, 0.8);
    font-size: 1.06rem;
    line-height: 1.72;
}

.manual-chapter__body > * + * {
    margin-top: 1.15em;
}

.manual-chapter h3 {
    margin: 2em 0 0;
    color: var(--roadbook-white);
    font-family: "Barlow", Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.manual-chapter h4 {
    margin: 1.6em 0 0;
    color: var(--roadbook-orange);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.manual-chapter a {
    color: #ffb066;
    text-underline-offset: 0.18em;
}

.manual-chapter a:hover {
    color: var(--roadbook-orange);
}

.manual-chapter ul,
.manual-chapter ol {
    margin: 0;
    padding-left: 1.3em;
}

.manual-chapter li + li {
    margin-top: 0.55em;
}

.manual-chapter li::marker {
    color: var(--roadbook-orange);
}

.manual-chapter ol > li::marker {
    font-weight: 800;
}

.manual-chapter strong {
    color: var(--roadbook-white);
}

.manual-chapter code {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.92em;
    white-space: nowrap;
}

.manual-chapter blockquote {
    margin: 1.6em 0 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid rgba(242, 127, 13, 0.6);
    color: rgba(247, 247, 245, 0.72);
    font-style: italic;
}

/* Avisos: lo que la persona necesita saber antes de echar de menos algo. */
.manual-note {
    margin: 1.6em 0 0;
    padding: 18px 20px;
    border: 1px solid rgba(242, 127, 13, 0.4);
    background: rgba(242, 127, 13, 0.08);
    font-size: 0.98rem;
    line-height: 1.6;
}

.manual-note__label {
    display: block;
    margin-bottom: 6px;
    color: var(--roadbook-orange);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.manual-note p {
    margin: 0;
}

.manual-note p + p {
    margin-top: 0.7em;
}

/* Definiciones: qué ves y qué puedes hacer, sin párrafos largos. */
.manual-definitions {
    display: grid;
    gap: 0;
    margin: 1.6em 0 0;
    border-top: 1px solid rgba(247, 247, 245, 0.12);
}

.manual-definitions > div {
    display: grid;
    gap: 4px 24px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(247, 247, 245, 0.12);
}

.manual-definitions dt {
    color: var(--roadbook-orange);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.manual-definitions dd {
    margin: 0;
    color: rgba(247, 247, 245, 0.78);
    font-size: 1rem;
    line-height: 1.6;
}

@media (min-width: 760px) {
    .manual-definitions > div {
        grid-template-columns: 15rem 1fr;
        align-items: baseline;
    }
}

/* Pasos numerados de un procedimiento. */
.manual-steps {
    margin: 1.6em 0 0;
    padding: 0;
    counter-reset: manual-step;
    list-style: none;
}

.manual-steps > li {
    position: relative;
    padding: 0 0 18px 46px;
    counter-increment: manual-step;
}

.manual-steps > li::before {
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(242, 127, 13, 0.6);
    color: var(--roadbook-orange);
    content: counter(manual-step);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1rem;
}

.manual-steps > li + li {
    margin-top: 0;
}

.manual-table {
    width: 100%;
    margin: 1.6em 0 0;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.manual-table th,
.manual-table td {
    padding: 12px 14px;
    border: 1px solid rgba(247, 247, 245, 0.14);
    text-align: left;
    vertical-align: top;
}

.manual-table th {
    color: var(--roadbook-orange);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.manual-back {
    display: inline-flex;
    margin-top: 34px;
    color: rgba(247, 247, 245, 0.55);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
}

.manual-back:hover,
.manual-back:focus-visible {
    color: var(--roadbook-orange);
}

/* Cierre: a dónde ir cuando el manual no basta. */
.manual-help {
    padding: 64px 0;
    border-top: 1px solid rgba(247, 247, 245, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

.manual-help h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 0.94;
    text-transform: uppercase;
}

.manual-help p {
    max-width: 62ch;
    margin: 18px 0 0;
    color: var(--roadbook-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.manual-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.manual-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid var(--roadbook-orange);
    background: var(--roadbook-orange);
    color: #0a0a0a;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.manual-button:hover,
.manual-button:focus-visible {
    background: var(--roadbook-white);
    border-color: var(--roadbook-white);
}

.manual-button--ghost {
    border-color: rgba(247, 247, 245, 0.35);
    background: transparent;
    color: var(--roadbook-white);
}

.manual-footer {
    padding: 40px 0 56px;
    border-top: 1px solid rgba(247, 247, 245, 0.12);
}

.manual-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.manual-footer__top {
    color: rgba(247, 247, 245, 0.55);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
}

.manual-footer__top:hover,
.manual-footer__top:focus-visible {
    color: var(--roadbook-orange);
}

@media (max-width: 680px) {
    .manual-shell {
        width: min(var(--roadbook-max), calc(100% - 32px));
    }

    .manual-hero {
        padding: 60px 0 48px;
    }

    .manual-index__list a {
        grid-template-columns: 2.6rem 1fr;
        padding: 14px;
    }

    .manual-chapter {
        padding: 44px 0;
    }

    .manual-chapter__head {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .manual-chapter__number {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manual-quick a,
    .manual-index__list a {
        transition: none;
    }

    .manual-quick a:hover,
    .manual-quick a:focus-visible {
        transform: none;
    }
}

/*
 * Impresión: el manual se usa en la carretera, así que también tiene que poder
 * imprimirse en papel o guardarse en PDF sin gastar tinta en fondo negro.
 */@media print {
    .manual-page {
        background: #fff;
        color: #111;
    }

    .manual-skip,
    .manual-header,
    .manual-quick,
    .manual-index,
    .manual-back,
    .manual-help__actions,
    .manual-footer,
    .rb-cookie-notice,
    .rb-cookie-dialog {
        display: none !important;
    }

    .manual-hero {
        padding: 0 0 18px;
        border-bottom: 2px solid #111;
        background: none;
    }

    .manual-kicker,
    .manual-hero h1 span,
    .manual-index__number,
    .manual-chapter__number {
        color: #111;
    }

    .manual-hero h1 {
        font-size: 30pt;
    }

    .manual-hero__lead,
    .manual-chapter__body,
    .manual-chapter__body li,
    .manual-definitions dd,
    .manual-note {
        color: #111;
    }

    .manual-chapter {
        padding: 18pt 0;
        border-top: 1px solid #999;
        break-inside: auto;
    }

    .manual-chapter__body {
        max-width: none;
        font-size: 11pt;
    }

    .manual-chapter h3,
    .manual-chapter h4 {
        color: #111;
        break-after: avoid;
    }

    .manual-chapter a {
        color: #111;
        text-decoration: underline;
    }

    .manual-note {
        border: 1px solid #111;
        background: none;
        break-inside: avoid;
    }

    .manual-note__label {
        color: #111;
    }

    .manual-table th,
    .manual-table td {
        border: 1px solid #999;
    }

    .manual-table th {
        color: #111;
    }
}