/*
   Landing de AI Hub
   ==========================================================================

   Misma receta que las demás landings: una sola hoja, sin build, sin
   dependencias y sin fuentes externas. El contenedor sirve tres ficheros.

   La paleta sale del panel de administración del propio proyecto, que usa
   Tailwind con la escala zinc sobre fondo zinc-950 y un acento índigo
   definido en su configuración. Aquí se han copiado esos valores en
   variables para que la página y el panel se parezcan.

   Nota sobre las rutas: todos los enlaces a ficheros son relativos, así que
   la página funciona igual servida en la raíz que bajo un prefijo de ruta.
*/

:root {
    /* Escala zinc de Tailwind, la que usa el panel. */
    --fondo: #09090B;
    --fondo-suave: #111113;
    --superficie: #18181B;
    --superficie-alta: #27272A;
    --borde: #27272A;
    --borde-claro: #3F3F46;

    --texto: #E4E4E7;
    --texto-suave: #A1A1AA;
    --texto-tenue: #71717A;

    /* El acento del panel, definido en su configuración de Tailwind. */
    --indigo: #6366F1;
    --indigo-claro: #818CF8;
    --indigo-tenue: rgba(99, 102, 241, 0.12);

    /* Colores de estado, los mismos que el panel usa en sus avisos. */
    --verde: #34D399;
    --ambar: #FBBF24;
    --rojo: #F87171;

    --ancho: 74rem;
    --lectura: 40rem;

    --t-portada: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
    --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;

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

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

    --radio: 8px;
    --radio-pequeno: 5px;
}

*,
*::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.65;
    -webkit-font-smoothing: antialiased;
}

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

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(--indigo-claro);
    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);
    }
}

.acento {
    color: var(--indigo-claro);
}

/* Nombres de modelo, alias y rutas. Aparecen en mitad de frases normales, así
   que van en monoespaciada pero sin caja ni fondo, para no picar el texto. */
.mono {
    font-family: var(--mono);
    font-size: 0.9375em;
}

.tenue {
    color: var(--texto-tenue);
}

/* Una ruta de la API dentro de un párrafo sí lleva caja: es una cita literal
   de código y conviene que se distinga. */
.ruta {
    padding: 1px var(--e2);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background-color: var(--superficie);
    font-family: var(--mono);
    font-size: 0.875em;
    color: var(--indigo-claro);
    white-space: nowrap;
}

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

.antetitulo {
    display: inline-block;
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borde);
    border-radius: 999px;
    background-color: var(--indigo-tenue);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo-claro);
    margin-bottom: var(--e4);
}

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

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

/* Bandas alternas. Sin ellas la página es un único bloque 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);
}

/* Algunas entradillas explican una decisión de arquitectura y necesitan más
   de una línea larga para no quedar picadas. */
.seccion__cabecera--ancha {
    max-width: 46rem;
}

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

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

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

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

.barra {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: rgba(9, 9, 11, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}

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

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-weight: 650;
}

.marca__icono {
    color: var(--indigo-claro);
}

.marca__nombre {
    font-size: 1.0625rem;
}

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

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

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

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

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

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

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

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

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

.portada__titulo {
    font-size: var(--t-portada);
    font-weight: 700;
    margin-bottom: var(--e5);
}

.portada__entrada {
    max-width: var(--lectura);
    font-size: 1.125rem;
    line-height: 1.8;
}

.portada__apoyo {
    max-width: var(--lectura);
    margin-top: var(--e4);
    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);
    border-radius: var(--radio-pequeno);
    background-color: var(--superficie);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

/* ==========================================================================
   Consola de código
   ========================================================================== */

.consola {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--fondo-suave);
    overflow: hidden;
    /* La sombra despega el bloque del fondo sin necesitar un marco más grueso,
       que competiría con el titular. */
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
}

.consola--ancha {
    max-width: 46rem;
}

.consola__barra {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borde);
    background-color: var(--superficie);
}

.consola__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--borde-claro);
}

.consola__ruta {
    margin-left: var(--e2);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-tenue);
    /* En móvil la ruta es más larga que el ancho disponible y no debe empujar
       la caja. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codigo {
    margin: 0;
    padding: var(--e5) var(--e4);
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    line-height: 1.75;
    color: var(--texto);
    /* El código no se parte: si no cabe, se desplaza dentro de su caja y la
       página nunca hace scroll horizontal. */
    overflow-x: auto;
}

.c-com { color: var(--texto-tenue); }
.c-cla { color: var(--indigo-claro); }
.c-str { color: var(--verde); }
.c-num { color: var(--ambar); }
.c-key { color: var(--rojo); }
.c-met { color: var(--indigo-claro); font-weight: 700; }

.consola__nota {
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--borde);
    background-color: var(--superficie);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

/* ==========================================================================
   Capacidades
   ========================================================================== */

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

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

.capacidad {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    transition: border-color 180ms ease;
}

.capacidad:hover {
    border-color: var(--borde-claro);
}

.capacidad__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--e4);
    margin-bottom: var(--e4);
}

.capacidad__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-pequeno);
    background-color: var(--indigo-tenue);
    color: var(--indigo-claro);
}

.capacidad__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
}

.capacidad__ruta {
    display: inline-block;
    margin-top: var(--e1);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-tenue);
}

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

/* Los dos datos quedan pegados abajo aunque las tarjetas midan distinto. */
.capacidad__datos {
    display: grid;
    gap: var(--e2);
    margin-top: auto;
    padding-top: var(--e5);
}

.capacidad__texto + .capacidad__datos {
    margin-top: var(--e5);
}

.dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    padding-top: var(--e2);
    border-top: 1px solid var(--borde);
}

.dato__nombre {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.dato__valor {
    font-size: var(--t-minimo);
    text-align: right;
    color: var(--texto-suave);
}

/* ==========================================================================
   Tabla de modelos
   ========================================================================== */

/* La tabla tiene cinco columnas y en móvil no cabe. Se desplaza dentro de su
   marco en lugar de romper el ancho de la página. */
.tabla-marco {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    overflow-x: auto;
}

.tabla {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: var(--t-pequeno);
}

.tabla th,
.tabla td {
    padding: var(--e3) var(--e4);
    text-align: left;
    border-bottom: 1px solid var(--borde);
}

.tabla th {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

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

.tabla tbody tr:last-child td {
    border-bottom: none;
}

.tabla__pie {
    caption-side: bottom;
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--borde);
    font-size: var(--t-minimo);
    text-align: left;
    color: var(--texto-tenue);
}

.num {
    font-family: var(--mono);
    white-space: nowrap;
}

.pastilla {
    display: inline-block;
    padding: 1px var(--e2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

/* El alias que usan las aplicaciones se marca en índigo, que es el color de
   lo que está en producción. */
.pastilla--defecto {
    background-color: var(--indigo-tenue);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: var(--indigo-claro);
}

/* El aviso de licencia va en ámbar: no impide usarlo, pero condiciona dónde. */
.pastilla--aviso {
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--ambar);
}

/* ==========================================================================
   Bloques a dos columnas
   ========================================================================== */

.dos-columnas {
    display: grid;
    gap: var(--e4);
    margin-top: var(--e6);
}

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

.bloque {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--indigo);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

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

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

/* ==========================================================================
   Reglas de memoria
   ========================================================================== */

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

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

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

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

.regla__numero {
    display: block;
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.14em;
    color: var(--indigo-claro);
    margin-bottom: var(--e3);
}

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

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

/* ==========================================================================
   Bloque destacado
   ========================================================================== */

.destacado {
    margin-top: var(--e6);
    padding: var(--e6);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.destacado__etiqueta {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo-claro);
    margin-bottom: var(--e4);
}

.destacado__texto {
    max-width: 46rem;
    color: var(--texto-suave);
}

/* ==========================================================================
   Diagrama de arquitectura
   ========================================================================== */

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

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

/* La capa pública lleva el acento porque es la única que toca internet, que
   es justo lo que explica esta sección. */
.capa--publica {
    border-color: rgba(99, 102, 241, 0.45);
    background-color: var(--indigo-tenue);
}

.capa__nombre {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: var(--e4);
}

/* La línea vertical que une una capa con la siguiente. */
.capa__union {
    justify-self: center;
    width: 1px;
    height: var(--e5);
    background-color: var(--borde-claro);
}

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

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

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

    /* Las dos piezas con estado son cajas largas y no deben quedarse
       estrechas en la rejilla de cinco columnas. */
    .cajas--dos {
        grid-template-columns: repeat(2, 1fr);
    }
}

.caja {
    padding: var(--e4);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-pequeno);
    background-color: var(--fondo);
}

.caja--acento {
    border-color: var(--indigo);
}

.caja--estado {
    border-style: dashed;
}

.caja__titulo {
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    font-weight: 700;
    margin-bottom: var(--e2);
}

.caja__papel {
    font-size: var(--t-minimo);
    line-height: 1.5;
    color: var(--texto-suave);
}

/* ==========================================================================
   Seguridad
   ========================================================================== */

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

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

@media (min-width: 62rem) {
    .lista-seguridad {
        grid-template-columns: repeat(3, 1fr);
    }
}

.punto {
    display: grid;
    gap: var(--e2);
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-top: 2px solid var(--verde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.punto__titulo {
    font-size: var(--t-pequeno);
    font-weight: 650;
}

.punto__texto {
    font-size: var(--t-minimo);
    line-height: 1.6;
    color: var(--texto-suave);
}

/* ==========================================================================
   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.1em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

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

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

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

.cierre__frase {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.cierre__sello {
    margin-top: var(--e5);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.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: var(--texto-tenue);
}