/*
   Landing de True Duel
   ==========================================================================

   Misma receta que la landing de MOTHERLINE: una sola hoja, sin build, sin
   dependencias y sin fuentes externas. El contenedor sirve tres ficheros.

   La paleta no está inventada aquí. Sale de la aplicación Flutter del juego,
   del fichero mobile/flutter/lib/core/theme/duel_theme.dart, donde la clase
   DuelPalette define el tema oscuro que ya usa la app. Si el juego cambia de
   color, esta hoja se actualiza copiando los valores de allí.
*/

:root {
    /* Copiados de DuelPalette.dark en la app Flutter. */
    --fondo: #050B16;
    --fondo-suave: #0A1322;
    --superficie: #1A2433;
    --superficie-alt: #111A29;
    --borde-app: #2A3547;
    --texto: #F3F6FC;
    --texto-suave: #9BA9BD;
    --verde: #7CB342;
    --naranja: #FFA000;
    --peligro: #FF5252;
    --exito: #66BB6A;
    --aviso: #FFC107;
    --epico: #BA68C8;

    /* Derivados, para no repetir rgba() por toda la hoja. */
    --borde: rgba(42, 53, 71, 0.9);
    --verde-tenue: rgba(124, 179, 66, 0.12);

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

    --t-portada: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
    --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;

    /* La app usa Space Grotesk para titulares y Manrope para texto. Aquí no
       se cargan desde Google Fonts para no depender de una red externa, así
       que se piden por nombre y detrás va una pila del sistema. */
    --titulos: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cuerpo: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;

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

    /* La app redondea poco: 4 px en tarjetas y botones. */
    --radio: 4px;
}

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

html {
    scroll-behavior: smooth;
    /* La cabecera es fija. Sin este margen, un ancla deja el titular tapado. */
    scroll-padding-top: 5rem;
}

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

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

h1, h2, h3 {
    margin: 0;
    font-family: var(--titulos);
    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(--verde);
    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 para quien baja rápido
   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(--verde);
    margin-bottom: var(--e3);
}

.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 es un único bloque azul oscuro y deja
   de notarse dónde acaba un tema y empieza el siguiente. */
.seccion--clara {
    background-color: var(--fondo-suave);
}

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

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

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

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

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

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: rgba(5, 11, 22, 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 {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    transition: color 150ms ease;
}

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

.marca__icono {
    color: var(--verde);
}

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

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

/* Por debajo de 58rem los cinco enlaces no caben sin apretarse. En móvil la
   página se recorre desplazando y el menú sobra. */
@media (min-width: 58rem) {
    .barra__enlaces {
        display: flex;
    }
}

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

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

/* ==========================================================================
   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;
    justify-items: center;
}

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

.portada__titulo {
    font-size: var(--t-portada);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--e4);
}

.portada__lema {
    font-family: var(--titulos);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--verde);
    margin-bottom: var(--e4);
}

.portada__entrada {
    max-width: var(--lectura);
    color: var(--texto-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-app);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.04em;
    color: var(--texto-suave);
}

/* --- La pantalla de combate. --- */

.movil {
    width: 100%;
    max-width: 19rem;
    padding: var(--e2);
    border: 1px solid var(--borde-app);
    border-radius: 1.75rem;
    background-color: var(--superficie-alt);
    /* La sombra separa el teléfono del fondo sin necesitar un marco grueso,
       que competiría con el titular. */
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
}

.movil__pantalla {
    display: grid;
    gap: var(--e4);
    padding: var(--e4);
    border-radius: 1.4rem;
    background-color: var(--fondo);
}

.hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
}

.hud__turno {
    color: var(--texto-suave);
}

.hud__cola {
    color: var(--naranja);
}

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

/* El bloque del rival se alinea a la derecha y el propio a la izquierda, que
   es como se enfrentan los dos lados en la pantalla de combate. */
.luchador--rival {
    text-align: right;
}

.luchador__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.luchador--rival .luchador__cabecera {
    flex-direction: row-reverse;
}

.luchador__nombre {
    font-family: var(--titulos);
    font-weight: 700;
}

.luchador__vida {
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

.luchador__rol {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.vida {
    height: 6px;
    border-radius: 3px;
    background-color: var(--borde-app);
    overflow: hidden;
}

.vida__relleno {
    display: block;
    height: 100%;
    /* La barra del rival va en rojo y la propia en verde: es la convención de
       la pantalla de combate de la aplicación. */
    background-color: var(--peligro);
}

.vida__relleno--propio {
    background-color: var(--verde);
}

.choque {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.choque__linea {
    flex: 1;
    height: 1px;
    background-color: var(--borde-app);
}

.choque__texto {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.2em;
    color: var(--texto-suave);
}

.cargas {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e1);
}

.cargas__etiqueta {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-right: var(--e1);
}

.cargas__punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--borde-app);
}

.cargas__punto--llena {
    background-color: var(--aviso);
    border-color: var(--aviso);
}

.acciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e2);
}

.accion {
    padding: var(--e2) var(--e1);
    border: 1px solid var(--borde-app);
    border-radius: var(--radio);
    background-color: var(--superficie);
    font-size: var(--t-minimo);
    text-align: center;
    color: var(--texto-suave);
}

/* Con dos cargas el especial está listo, y la pantalla lo canta. */
.accion--lista {
    border-color: var(--verde);
    background-color: var(--verde-tenue);
    color: var(--verde);
    font-weight: 700;
}

.registro {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    line-height: 1.5;
    color: var(--texto-suave);
    padding-top: var(--e3);
    border-top: 1px solid var(--borde-app);
}

/* ==========================================================================
   Rejillas de tarjetas
   ========================================================================== */

.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);
    }
}

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

/* ==========================================================================
   Las tres acciones
   ========================================================================== */

.accion-detalle {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie-alt);
}

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

.accion-detalle__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 700;
    margin-bottom: var(--e3);
}

.accion-detalle__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Campeones
   ========================================================================== */

.campeon {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--borde);
    /* La franja lateral lleva el color del rol, igual que las tarjetas de
       selección de campeón de la aplicación. */
    border-left: 3px solid var(--acento-campeon, var(--borde-app));
    border-radius: var(--radio);
    background-color: var(--fondo);
}

.campeon__rol {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento-campeon, var(--texto-suave));
    margin-bottom: var(--e2);
}

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

.campeon__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* El precio queda pegado abajo aunque las tarjetas tengan distinta altura. */
.campeon__estado {
    margin-top: auto;
    padding-top: var(--e4);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.06em;
    color: var(--naranja);
}

.campeon__estado--inicial {
    color: var(--exito);
}

.campeon__texto + .campeon__estado {
    margin-top: var(--e4);
}

/* ==========================================================================
   Modificadores
   ========================================================================== */

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

@media (min-width: 62rem) {
    .volatilidades {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

.volatilidad {
    padding: var(--e5);
    border: 1px solid var(--borde);
    /* El borde superior sube de temperatura con la volatilidad: verde, ámbar
       y rojo. Se lee el riesgo antes de leer los nombres. */
    border-top: 3px solid var(--borde-app);
    border-radius: var(--radio);
    background-color: var(--superficie-alt);
}

.volatilidad--baja {
    border-top-color: var(--verde);
}

.volatilidad--media {
    border-top-color: var(--aviso);
}

.volatilidad--alta {
    border-top-color: var(--peligro);
}

.volatilidad__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 700;
}

.volatilidad__resumen {
    margin-top: var(--e2);
    margin-bottom: var(--e5);
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

.modificadores {
    display: grid;
    gap: var(--e3);
}

.modificador {
    display: grid;
    gap: 2px;
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borde);
}

.modificador:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.modificador__nombre {
    font-size: var(--t-pequeno);
    font-weight: 700;
}

.modificador__efecto {
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

/* ==========================================================================
   Ranked
   ========================================================================== */

.divisiones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-bottom: var(--e6);
}

.division {
    padding: var(--e2) var(--e4);
    border: 1px solid var(--borde-app);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

/* La división más alta se marca para que la escala tenga un final visible. */
.division--alta {
    border-color: var(--epico);
    color: var(--epico);
}

.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(--naranja);
    border-radius: var(--radio);
    background-color: var(--fondo);
}

/* La columna de lo que no afecta al combate va en verde: es la promesa de
   juego limpio, no una advertencia. */
.columna--limpia {
    border-top-color: var(--verde);
}

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

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

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

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

.lista-marcada--limpia li::before {
    background-color: var(--verde);
}

/* ==========================================================================
   Roles de composición
   ========================================================================== */

.rol {
    padding: var(--e5);
    border: 1px dashed var(--borde-app);
    border-radius: var(--radio);
    background-color: transparent;
}

/* El borde discontinuo distingue lo que todavía es diseño de lo que ya está
   en la aplicación. */
.rol__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 700;
    color: var(--epico);
    margin-bottom: var(--e3);
}

.rol__texto {
    color: var(--texto-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(--texto-suave);
}

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

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

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

.cierre__frase {
    max-width: 34rem;
    margin: 0 auto;
    font-family: var(--titulos);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
}

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

.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(--texto-suave);
}

.pie__texto--suave {
    color: rgba(155, 169, 189, 0.65);
}