/*
   Landing de MOTHERLINE
   ==========================================================================

   Una sola hoja para una sola página. No hay build, no hay dependencias y no
   se cargan fuentes externas: el contenedor sirve tres ficheros estáticos y
   nada más. Si algún día hace falta un preprocesador, será porque la página
   ha crecido, no porque se empezó con uno.

   La paleta y el tono salen de docs/BIBLIA-VISUAL.md del repositorio del
   juego. La idea rectora de allí es «un manual de seguridad ferroviaria de
   una sociedad desaparecida que ha empezado a observarte», así que aquí hay
   papel, tinta gastada, señalética y una terminal. No hay degradados de neón
   ni cristal translúcido.
*/

:root {
    /* Paleta de la biblia visual del juego. */
    --carbon: #172023;
    --sombra: #0D1214;
    --papel: #E6DDC9;
    --metal: #667276;
    --oxido: #AF4B3D;
    --ambar: #E1AE3A;
    --verde: #3F7C75;
    --alerta: #D33F35;

    /* Derivados. Se declaran aquí para no repetir rgba() por toda la hoja. */
    --papel-suave: #A9A296;
    --borde: rgba(230, 221, 201, 0.14);
    --borde-fuerte: rgba(230, 221, 201, 0.28);
    --superficie: #1C2629;

    --ancho: 72rem;
    --lectura: 38rem;

    /* Escala tipográfica. Los tres primeros tamaños son fluidos porque la
       página se lee igual en un móvil que en un monitor de 27 pulgadas. */
    --t-portada: clamp(2.75rem, 1.5rem + 5.5vw, 6rem);
    --t-seccion: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    --t-tarjeta: 1.0625rem;
    --t-base: 1rem;
    --t-pequeno: 0.875rem;
    --t-minimo: 0.75rem;

    --sans: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* La cabecera es fija, así que un ancla sin este margen deja el titular
       tapado detrás de la barra. */
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background-color: var(--carbon);
    color: var(--papel);
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

p {
    margin: 0;
}

ul, ol, dl, dd {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

:focus-visible {
    outline: 2px solid var(--ambar);
    outline-offset: 3px;
}

.ancho {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding-inline: var(--e4);
}

@media (min-width: 48rem) {
    .ancho {
        padding-inline: var(--e6);
    }
}

/* ==========================================================================
   Piezas repetidas
   ========================================================================== */

/* Etiqueta pequeña sobre el titular. Sitúa la sección de un vistazo cuando
   alguien baja rápido por la página sin leer los párrafos. */
.antetitulo {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ambar);
    margin-bottom: var(--e3);
}

.antetitulo--alerta {
    color: var(--alerta);
}

.seccion {
    padding-block: var(--e7);
    border-top: 1px solid var(--borde);
}

@media (min-width: 48rem) {
    .seccion {
        padding-block: 5rem;
    }
}

/* Bandas alternas. Sin ellas la página entera es un único bloque oscuro y
   deja de notarse dónde acaba un tema y empieza el siguiente. */
.seccion--clara {
    background-color: var(--superficie);
}

.seccion__cabecera {
    max-width: var(--lectura);
    margin-bottom: var(--e6);
}

.seccion__titulo {
    font-size: var(--t-seccion);
    font-weight: 600;
}

.seccion__intro {
    color: var(--papel-suave);
    margin-top: var(--e4);
}

.prosa {
    max-width: var(--lectura);
    display: grid;
    gap: var(--e4);
    color: var(--papel-suave);
}

.prosa strong {
    color: var(--papel);
    font-weight: 600;
}

.nota {
    max-width: var(--lectura);
    margin-top: var(--e6);
    padding-left: var(--e4);
    border-left: 2px solid var(--oxido);
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: rgba(23, 32, 35, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}

.barra__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 3.5rem;
}

.marca {
    transition: color 150ms ease;
}

.marca:hover {
    color: var(--ambar);
}

.marca__nombre {
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    font-weight: 700;
    letter-spacing: 0.22em;
}

.barra__enlaces {
    display: none;
    gap: var(--e5);
}

/* Por debajo de 62rem los seis enlaces no caben en una línea sin apretarse.
   En móvil la página se recorre desplazando, que es lo natural, y el menú
   sobra. */
@media (min-width: 62rem) {
    .barra__enlaces {
        display: flex;
    }
}

.barra__enlace {
    font-size: var(--t-pequeno);
    color: var(--papel-suave);
    transition: color 150ms ease;
}

.barra__enlace:hover {
    color: var(--ambar);
}

/* ==========================================================================
   Portada
   ========================================================================== */

.portada {
    padding-block: var(--e7) 4rem;
}

@media (min-width: 62rem) {
    .portada {
        padding-block: 5rem 6rem;
    }
}

.portada__rejilla {
    display: grid;
    gap: var(--e7);
    align-items: center;
}

@media (min-width: 62rem) {
    .portada__rejilla {
        grid-template-columns: 1fr 22rem;
        gap: 4rem;
    }
}

.portada__titulo {
    font-family: var(--mono);
    font-size: var(--t-portada);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--e5);
}

.portada__entrada {
    max-width: var(--lectura);
    font-size: 1.125rem;
    color: var(--papel);
}

.portada__apoyo {
    max-width: var(--lectura);
    margin-top: var(--e4);
    color: var(--papel-suave);
}

.datos-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-top: var(--e6);
}

.datos-rapidos__item {
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borde-fuerte);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.04em;
    color: var(--papel-suave);
}

/* --- La terminal de MADRE. --- */

.terminal {
    border: 1px solid var(--borde-fuerte);
    background-color: var(--sombra);
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    /* La sombra proyectada separa el panel del fondo sin necesitar un marco
       más grueso, que competiría con el titular. */
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}

.terminal__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borde);
    background-color: rgba(211, 63, 53, 0.08);
}

.terminal__sello {
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--alerta);
}

.terminal__dia {
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    color: var(--metal);
}

.terminal__cuerpo {
    padding: var(--e4);
    display: grid;
    gap: var(--e4);
}

/* Las líneas del informe son texto de MADRE, algo más aireado que el resto
   de la monoespaciada para que se lea como voz y no como una tabla. */
.terminal__linea {
    line-height: 1.5;
}

.terminal__linea--voz {
    color: var(--papel);
}

.terminal__linea--nota {
    padding-top: var(--e3);
    border-top: 1px dashed var(--borde);
    color: var(--ambar);
}

.terminal__rotulo {
    font-size: var(--t-minimo);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--metal);
}

.medidor {
    display: grid;
    gap: var(--e2);
}

.medidor__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
}

.medidor__nombre {
    color: var(--metal);
}

.medidor__valor {
    color: var(--papel);
}

.medidor__valor--alerta {
    color: var(--alerta);
}

.vias {
    display: grid;
    gap: var(--e2);
}

.via {
    display: grid;
    gap: 2px;
    padding: var(--e2) var(--e3);
    border-left: 2px solid var(--verde);
    background-color: rgba(63, 124, 117, 0.07);
}

.via__nombre {
    color: var(--papel);
}

.via__coste {
    font-size: var(--t-minimo);
    color: var(--metal);
}

/* ==========================================================================
   Tarjetas y rejillas
   ========================================================================== */

.tarjetas {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 48rem) {
    .tarjetas--tres {
        grid-template-columns: repeat(3, 1fr);
    }

    .tarjetas--cuatro {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarjetas--personajes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62rem) {
    .tarjetas--cuatro {
        grid-template-columns: repeat(4, 1fr);
    }

    .tarjetas--personajes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tarjeta {
    padding: var(--e5);
    border: 1px solid var(--borde);
    background-color: var(--superficie);
}

.tarjeta__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 600;
    margin-bottom: var(--e3);
}

.tarjeta__texto {
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   MADRE
   ========================================================================== */

.seccion--madre {
    background-color: var(--sombra);
}

.madre__rejilla {
    display: grid;
    gap: var(--e6);
    align-items: center;
}

@media (min-width: 48rem) {
    .madre__rejilla {
        grid-template-columns: 12rem 1fr;
        gap: var(--e7);
    }
}

.madre__simbolo {
    display: flex;
    justify-content: center;
    /* El símbolo es una marca impresa gastada, no un logotipo luminoso. */
    opacity: 0.85;
}

/* ==========================================================================
   Control
   ========================================================================== */

.columnas {
    display: grid;
    gap: var(--e5);
}

@media (min-width: 48rem) {
    .columnas {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--e6);
    }
}

.columna {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-top: 2px solid var(--verde);
    background-color: var(--superficie);
}

/* Los límites llevan el rojo de MADRE porque son suyos: es ella quien decide
   qué no puedes hacer. */
.columna--limites {
    border-top-color: var(--alerta);
}

.columna__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 600;
    margin-bottom: var(--e4);
}

.lista-marcada {
    display: grid;
    gap: var(--e3);
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

.lista-marcada li {
    padding-left: var(--e4);
    position: relative;
}

.lista-marcada li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: var(--verde);
}

.lista-marcada--limites li::before {
    background-color: var(--alerta);
}

/* ==========================================================================
   Pasajeros
   ========================================================================== */

.persona {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--borde);
    /* La franja lateral usa el color de acento del personaje que fija la
       biblia visual: cobre, verde médico, amarillo señal, azul grisáceo y
       malva gris. */
    border-left: 3px solid var(--acento-persona, var(--metal));
    background-color: var(--carbon);
}

.seccion--clara .persona {
    background-color: var(--carbon);
}

.persona__papel {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acento-persona, var(--metal));
    margin-bottom: var(--e2);
}

.persona__nombre {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--e3);
}

.persona__texto {
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

.persona__secreto {
    margin-top: auto;
    padding-top: var(--e4);
    border-top: 1px dashed var(--borde);
    font-size: var(--t-pequeno);
    font-style: italic;
    color: var(--metal);
}

/* El primer párrafo tiene que quedar pegado al secreto aunque las tarjetas
   tengan distinta altura, por eso el margen automático va arriba del secreto
   y este hueco lo separa del texto. */
.persona__texto + .persona__secreto {
    margin-top: var(--e4);
}

/* ==========================================================================
   Historias
   ========================================================================== */

.historias {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 48rem) {
    .historias {
        grid-template-columns: repeat(2, 1fr);
    }

    /* La quinta historia se queda sola en su fila. Ocupar el ancho completo
       la convierte en cierre de la sección en vez de en un hueco. */
    .historia:last-child {
        grid-column: 1 / -1;
    }
}

.historia {
    padding: var(--e5);
    border: 1px solid var(--borde);
    background-color: var(--superficie);
}

.historia__numero {
    display: block;
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.14em;
    color: var(--ambar);
    margin-bottom: var(--e2);
}

.historia__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 600;
    margin-bottom: var(--e3);
}

.historia__texto {
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Un día
   ========================================================================== */

.pasos {
    display: grid;
    gap: var(--e3);
    max-width: 46rem;
}

.paso {
    display: flex;
    align-items: baseline;
    gap: var(--e4);
    padding: var(--e3) var(--e4);
    border: 1px solid var(--borde);
    background-color: var(--carbon);
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

.paso__numero {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--ambar);
}

/* ==========================================================================
   Finales
   ========================================================================== */

.final {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-bottom: 2px solid var(--oxido);
    background-color: var(--superficie);
}

.final__titulo {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ambar);
    margin-bottom: var(--e3);
}

.final__texto {
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Ficha técnica
   ========================================================================== */

.ficha {
    display: grid;
    border-top: 1px solid var(--borde);
}

.ficha__fila {
    display: grid;
    gap: var(--e1);
    padding-block: var(--e4);
    border-bottom: 1px solid var(--borde);
}

@media (min-width: 48rem) {
    .ficha__fila {
        grid-template-columns: 14rem 1fr;
        gap: var(--e5);
        align-items: baseline;
    }
}

.ficha__nombre {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--metal);
}

.ficha__valor {
    color: var(--papel-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Cierre y pie
   ========================================================================== */

.cierre {
    padding-block: 5rem;
    background-color: var(--sombra);
    border-top: 1px solid var(--borde);
    text-align: center;
}

.cierre__frase {
    max-width: 34rem;
    margin: 0 auto;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    line-height: 1.35;
    color: var(--papel);
}

.cierre__sello {
    margin-top: var(--e4);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--alerta);
}

.pie {
    padding-block: var(--e6);
    border-top: 1px solid var(--borde);
}

.pie__interior {
    display: grid;
    gap: var(--e1);
}

.pie__texto {
    font-size: var(--t-minimo);
    color: var(--metal);
}

.pie__texto--suave {
    color: rgba(102, 114, 118, 0.75);
}