/* =========================================================================
   Hojas de ruta · Bus Directo — portada y entrada (25/09/2026)

   Usuario: «la fuente y el diseño se nota a leguas que es IA. Unas fuentes,
   diseños y colores más distinguidos. Más elegante. Botones menos
   redondeados». De ahí el aire de DOCUMENTO; gris carbón, crema y rojo
   teja, fijos (ver :root); IBM Plex (serif para títulos, sans para leer, mono para números y
   códigos); filetes finos en vez de sombras; esquinas casi rectas; nada de
   degradados ni de pastillas.
   ========================================================================= */

@font-face { font-family: 'Plex Sans'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-serif-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
    /* Una sola paleta, la misma con el móvil en claro o en oscuro (25/09/2026,
       usuario: «me gusta la paleta que tenía antes en el modo oscuro de
       móvil; quiero ese color como fijo para todos los modos»): gris carbón,
       crema y rojo teja. El panel de gestión sigue con los de Oficina. */
    color-scheme: dark;
    --papel: #15171a;
    --papel-2: #1d2024;
    --hoja: #1b1e22;
    --tinta: #ece8df;
    --tinta-2: #c9c4b9;
    --gris: #9a9a95;
    --filete: #33373d;
    --sello: #d0604f;
    --sello-2: #e07262;
    --ok: #6fb58d;
    --noche: #0e1012;
    --serif: 'Plex Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ancho: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 400 16px/1.6 var(--sans);
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cab {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 max(16px, calc((100vw - var(--ancho)) / 2));
    height: 60px;
    background: var(--papel);
    border-bottom: 1px solid var(--filete);
}
.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}
.marca img { flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt strong { font: 500 17px/1.1 var(--serif); }
.marca-txt small { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.cab-nav { display: none; gap: 26px; margin-left: auto; }
.cab-nav a { text-decoration: none; font-size: 14.5px; color: var(--tinta-2); }
.cab-nav a:hover { color: var(--sello); }
.cab-entrar { margin-left: auto; }

/* ── Botones: casi rectos, planos ──────────────────────────────────── */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 2px;
    border: 1px solid var(--tinta);
    font: 500 15px/1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.boton-principal { background: var(--tinta); color: var(--papel); }
.boton-principal:hover { background: var(--sello); border-color: var(--sello); }
.boton-secundario { background: transparent; color: var(--tinta); }
.boton-secundario:hover { border-color: var(--sello); color: var(--sello); }
.boton-fino { min-height: 38px; padding: 0 14px; font-size: 14px; }
.boton-ancho { width: 100%; }

/* ── Portada ────────────────────────────────────────────────────────── */
.heroe {
    display: grid;
    gap: 40px;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 40px 16px 48px;
}
.antetitulo {
    margin: 0 0 18px;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sello);
}
.heroe h1 {
    margin: 0 0 18px;
    font-size: clamp(32px, 8.4vw, 58px);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.heroe h1 em { font-style: italic; color: var(--sello); }
.heroe .entradilla { margin: 0; font-size: 17px; color: var(--tinta-2); max-width: 34em; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.heroe-acciones .boton { flex: 1 1 180px; }

/* La hoja de ejemplo: un documento, no una tarjeta de app */
.muestra {
    width: 100%;
    max-width: 360px;
    justify-self: center;
    background: var(--hoja);
    border: 1px solid var(--filete);
    padding: 22px 22px 18px;
    position: relative;
}
.muestra::after {
    /* Una segunda hoja asomando por detrás */
    content: '';
    position: absolute;
    inset: 8px -8px -8px 8px;
    border: 1px solid var(--filete);
    background: var(--papel-2);
    z-index: -1;
}
.muestra-cab { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--filete); }
.muestra-cab span { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.muestra-estado { color: var(--ok) !important; }
.muestra-num { margin: 14px 0 4px; font: 500 13px/1.3 var(--mono); color: var(--gris); }
.muestra-ruta { margin: 0 0 16px; font: 500 21px/1.25 var(--serif); }
.muestra-ruta span { color: var(--sello); }
.muestra-datos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.muestra-datos div { padding: 10px 0; }
.muestra-datos div + div { padding-left: 14px; border-left: 1px solid var(--filete); }
.muestra-datos small { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.muestra-datos strong { font: 500 14.5px/1.4 var(--mono); }
.muestra-qr { margin: 18px auto 10px; width: 136px; color: var(--tinta); }
.muestra-qr svg { display: block; width: 100%; height: auto; }
.muestra-pie { margin: 0; text-align: center; font: 400 12px/1.4 var(--mono); color: var(--gris); }

/* Cuatro datos en fila, separados por filetes */
.cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--ancho);
    margin: 0 16px;
    border-top: 1px solid var(--tinta);
    border-bottom: 1px solid var(--filete);
}
@media (min-width: 1152px) { .cifras { margin: 0 auto; } }
.cifras div { padding: 18px 16px; border-bottom: 1px solid var(--filete); }
.cifras div:nth-child(odd) { border-right: 1px solid var(--filete); }
.cifras div:nth-last-child(-n+2) { border-bottom: 0; }
.cifras strong { display: block; font: 500 17px/1.25 var(--serif); }
.cifras span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--gris); }

.bloque { max-width: var(--ancho); margin: 0 auto; padding: 64px 16px 0; }
.bloque-ante {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sello);
}
.bloque-ante::after { content: ''; flex: 1; height: 1px; background: var(--filete); }
.bloque h2 { margin: 0 0 26px; font-size: clamp(26px, 6.2vw, 38px); line-height: 1.12; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.pasos li { padding: 22px 0; border-top: 1px solid var(--filete); display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
.pasos li:last-child { border-bottom: 1px solid var(--filete); }
.paso-num { grid-row: span 2; font: 500 14px/1.9 var(--mono); color: var(--sello); }
.pasos h3 { margin: 0 0 6px; font-size: 20px; }
.pasos p { margin: 0; color: var(--tinta-2); }

.tarjetas { display: grid; border-top: 1px solid var(--tinta); }
.tarjetas article { padding: 22px 0; border-bottom: 1px solid var(--filete); }
.tarjetas h3 { margin: 0 0 10px; font-size: 20px; }
.tarjetas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--tinta-2); }
.tarjetas li { padding-left: 18px; position: relative; }
.tarjetas li::before { content: '—'; position: absolute; left: 0; color: var(--sello); }

.bloque-oscuro {
    max-width: none;
    margin-top: 72px;
    padding: 56px 16px;
    background: var(--noche);
    color: var(--tinta);
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
}
.bloque-oscuro .bloque-ante::after { background: var(--filete); }
.bloque-oscuro .bloque-ante { color: var(--sello); }
.requisitos { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 28px; }
.requisitos p { margin: 0; color: var(--tinta-2); font-size: 16.5px; }
.garantias { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 12px; color: var(--tinta-2); }
.garantias li { padding-left: 4px; line-height: 1.55; }
.garantias li::marker { font: 500 14px var(--mono); color: var(--sello); }
.garantias b { color: var(--tinta); font-weight: 600; }

.datos-lista { display: grid; border-top: 1px solid var(--tinta); }
.datos-lista span {
    padding: 13px 0 13px 28px;
    border-bottom: 1px solid var(--filete);
    position: relative;
}
.datos-lista span::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-weight: 600; }

.normas { display: grid; border-top: 1px solid var(--tinta); }
.normas a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--filete);
    text-decoration: none;
}
.normas a::after { content: '↗'; grid-row: span 2; color: var(--gris); }
.normas a:hover strong { color: var(--sello); }
.normas small { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.normas strong { font: 500 16.5px/1.4 var(--serif); }

.faq { border-top: 1px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--filete); }
.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 36px 18px 0;
    font: 500 18px/1.35 var(--serif);
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 22px/1 var(--mono); color: var(--sello); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 0 18px; color: var(--tinta-2); max-width: 44em; }

.pie {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: var(--ancho);
    margin: 72px auto 0;
    padding: 22px 16px 40px;
    border-top: 1px solid var(--tinta);
    font: 400 12.5px/1.5 var(--mono);
    color: var(--gris);
}

@media (min-width: 860px) {
    .cab { height: 68px; }
    .cab-nav { display: flex; }
    .cab-entrar { margin-left: 8px; }
    .heroe {
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 64px;
        padding: 88px 16px 80px;
    }
    .heroe .entradilla { font-size: 18.5px; }
    .heroe-acciones .boton { flex: 0 0 auto; }
    .cifras { grid-template-columns: repeat(4, 1fr); }
    .cifras div { padding: 22px 20px; border-bottom: 0; border-right: 1px solid var(--filete); }
    .cifras div:last-child { border-right: 0; }
    .cifras div:first-child { padding-left: 0; }
    .bloque { padding-top: 96px; }
    .pasos { grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
    .pasos li, .pasos li:last-child { border-bottom: 0; border-top: 1px solid var(--tinta); grid-template-columns: 1fr; }
    .paso-num { grid-row: auto; margin-bottom: 14px; }
    .tarjetas { grid-template-columns: repeat(3, 1fr); column-gap: 36px; border-top: 0; }
    .tarjetas article { border-top: 1px solid var(--tinta); border-bottom: 0; }
    .bloque-oscuro { margin-top: 96px; padding: 80px 16px; }
    .requisitos { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
    .datos-lista { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}

/* ── Entrada ────────────────────────────────────────────────────────── */
.pantalla-entrar {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}
.entrar {
    width: 100%;
    max-width: 380px;
    background: var(--hoja);
    border: 1px solid var(--filete);
    border-top: 3px solid var(--tinta);
    padding: 28px 24px 24px;
}
.entrar h1 { font-size: 27px; margin: 26px 0 6px; }
.entrar-nota { margin: 0 0 22px; color: var(--gris); font-size: 15px; }
.entrar-aviso, .entrar-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid #b8860b;
    background: var(--papel);
    font-size: 14px;
}
.entrar-aviso.ok { border-color: var(--ok); }
.entrar-error { border-color: var(--sello); color: var(--sello-2); }
.entrar-o { display: flex; align-items: center; gap: 10px; margin: 18px 0; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.entrar-o::before, .entrar-o::after { content: ''; flex: 1; height: 1px; background: var(--filete); }
.entrar-form { display: grid; gap: 16px; }
.entrar-form label > span { display: block; margin-bottom: 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.entrar-form input[type=email], .entrar-form input[type=password] {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    font: 400 16px var(--sans);
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--filete);
    border-radius: 2px;
}
.entrar-form input:focus { outline: 2px solid var(--tinta); outline-offset: -1px; border-color: var(--tinta); }
.entrar-recordar { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.entrar-recordar input { accent-color: var(--tinta); width: 16px; height: 16px; }
.entrar-recordar span { margin: 0 !important; font: 400 14px var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.entrar-pie { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--filete); font-size: 13.5px; color: var(--gris); }

/* La contraseña con su ojo (25/09/2026) */
.entrar-clave { position: relative; display: block; }
.entrar-clave input { padding-right: 48px !important; }
.entrar-ojo {
    position: absolute; top: 0; right: 0; width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0; background: none; color: var(--gris); cursor: pointer;
}
.entrar-ojo:hover, .entrar-ojo[aria-pressed="true"] { color: var(--tinta); }
.entrar-ojo .ojo-cerrado { display: none; }
.entrar-ojo[aria-pressed="true"] .ojo-cerrado { display: inline; }
.entrar-ojo[aria-pressed="true"] .ojo-abierto { display: none; }
.entrar-form input[type=text] {
    width: 100%; height: 46px; padding: 0 12px; font: 400 16px var(--sans);
    color: var(--tinta); background: var(--papel); border: 1px solid var(--filete); border-radius: 2px;
}