/* ===========================================================================
   PANTALLAS
   Bienvenida, Sobre mi, CV, Contacto y las paginas de error.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FILTROS DE COLECCION
   Solo aparecen cuando la columna de colecciones no cabe (ver proyectos.css).
   --------------------------------------------------------------------------- */

/* Ocultos mientras exista la columna de colecciones; ver mas abajo el
   @media que los saca cuando esa columna se pliega. */
.filtros {
    display: none;
    align-items: center;
    gap: var(--espacio-6);
    flex-wrap: wrap;
    padding: 0 var(--espacio-16) var(--espacio-10);
}

.filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-6);
    height: 30px;
    padding: 0 var(--espacio-12);
    border-radius: var(--radio-8);
    color: var(--tinta);
    font-size: var(--texto-13);
    font-weight: var(--peso-medio);
    transition: background-color var(--transicion-rapida);
}

.filtro:hover {
    background-color: var(--fondo-campo);
    color: var(--tinta);
}

.filtro[aria-current="true"] {
    background-color: var(--fondo-activo);
}

.filtro span {
    color: var(--texto-suave);
    font-size: var(--texto-12);
}

/* ---------------------------------------------------------------------------
   BIENVENIDA
   Cubre el workspace la primera vez. "Ver los trabajos" es un enlace de
   verdad, asi que sin JavaScript tambien se entra.
   --------------------------------------------------------------------------- */

.bienvenida {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background-color: var(--superficie);
    transition: opacity 450ms ease;
}

.bienvenida-saliendo {
    opacity: 0;
    pointer-events: none;
}

/* Entrada escalonada muy corta: las piezas no se cascadean, solo se escalonan
   lo justo para que el conjunto entre "de una pieza", como un panel del
   sistema. Sin desplazamiento: solo funde y asienta. */
.bienvenida-texto > *,
.bienvenida-destacados {
    animation: aparecer 260ms var(--curva-entrada) backwards;
}

.bienvenida-titulo {
    animation-delay: 40ms;
}

.bienvenida-resumen,
.bienvenida-destacados {
    animation-delay: 80ms;
}

.bienvenida-acciones {
    animation-delay: 120ms;
}

.bienvenida-cuerpo {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 560px;
    overflow-y: auto;
}

.bienvenida-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--espacio-26);
    padding: var(--espacio-48) 88px;
    border-right: var(--grosor-linea) solid var(--borde);
}

.bienvenida-titulo {
    font-size: var(--titulo-bienvenida);
    line-height: 1;
    letter-spacing: -0.045em;
}

.bienvenida-resumen {
    font-size: var(--texto-19);
    max-width: 48ch;
}

.bienvenida-acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-20);
    flex-wrap: wrap;
}


.bienvenida-destacados {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bienvenida-rotulo {
    padding: 0 var(--espacio-44) var(--espacio-16);
}

.destacado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-14);
    padding: var(--espacio-24) var(--espacio-44);
    border-top: var(--grosor-linea) solid var(--borde);
    color: var(--tinta);
    transition: background-color var(--transicion-rapida);
}

.destacado:hover {
    background-color: rgba(23, 23, 26, 0.04);
    color: var(--tinta);
}

.destacado-portada {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 8;
    border-radius: 9px;
    overflow: hidden;
    background-color: var(--superficie-imagen);
    box-shadow: var(--linea-interior);
}

.destacado-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destacado-linea {
    display: flex;
    align-items: center;
    gap: var(--espacio-16);
    min-width: 0;
}

.destacado-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.destacado-meta {
    font-size: var(--texto-11);
    font-weight: var(--peso-semi);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.destacado-titulo {
    font-size: var(--texto-18);
    font-weight: var(--peso-semi);
    letter-spacing: -0.018em;
    line-height: 1.25;
    text-wrap: balance;
}

.destacado-flecha {
    margin-left: auto;
    flex: none;
}

/* Fila de cifras bajo los destacados.
   Se reparten a lo ancho en vez de amontonarse a la izquierda: la raya
   separadora queda centrada entre las dos. */
.bienvenida-cifras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-20);
    flex-wrap: wrap;
    padding: var(--espacio-22) var(--espacio-44);
    border-top: var(--grosor-linea) solid var(--borde);
    border-bottom: var(--grosor-linea) solid var(--borde);
    font-size: var(--texto-13);
    color: var(--texto-suave);
}

.bienvenida-cifras strong {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-fuerte);
    color: var(--tinta);
}

.bienvenida-pie {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 var(--espacio-24);
    border-top: var(--grosor-linea) solid var(--borde);
    font-size: var(--texto-12);
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------------
   SOBRE MI
   --------------------------------------------------------------------------- */

.sobre-mi {
    width: min(var(--ancho-sobre-mi), 100%);
    flex: none;
    display: grid;
    grid-template-columns: 1fr var(--ancho-panel-lateral);
    gap: var(--espacio-64);
    padding: var(--espacio-36) var(--espacio-32);
    align-content: start;
}

.sobre-mi-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-20);
    min-width: 0;
}

.sobre-mi-titulo {
    font-size: var(--titulo-seccion);
    line-height: 1.06;
    letter-spacing: -0.034em;
}

.sobre-mi-texto .parrafo {
    color: var(--texto-fuerte);
}

/* Los tres parrafos son un solo bloque de lectura, asi que van mas juntos
   entre si que del resto de piezas de la columna. */
.sobre-mi-parrafos {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
}

.bloque {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
    padding-top: var(--espacio-8);
}

.herramientas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-8);
}

.herramienta {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--espacio-14);
    border-radius: var(--radio-8);
    background-color: var(--superficie-suave);
    font-size: var(--texto-13);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

/* Los tres principios numerados */
.principios {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
}

.principio {
    display: flex;
    gap: var(--espacio-14);
    align-items: baseline;
}

.principio-numero {
    flex: none;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-14);
    font-weight: var(--peso-fuerte);
    color: var(--acento);
}

.principio p {
    font-size: var(--texto-15);
    line-height: 1.5;
    color: var(--texto-fuerte);
}

/* Formacion, en una linea */
.trayectoria {
    display: flex;
    align-items: center;
    gap: var(--espacio-26);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--espacio-16);
    border-top: var(--grosor-linea) solid var(--borde);
    font-size: var(--texto-13);
    color: var(--texto-suave);
}

.trayectoria strong {
    font-weight: var(--peso-normal);
    color: var(--tinta);
}

.sobre-mi-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-16);
    min-height: 0;
}

.retrato {
    border-radius: var(--radio-12);
    overflow: hidden;
    background-color: var(--superficie-imagen);
}

.retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Las dos cifras bajo el retrato */
.datos-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grosor-linea);
    background-color: var(--borde);
    border-radius: var(--radio-10);
    overflow: hidden;
}

.dato {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
    padding: var(--espacio-16) var(--espacio-20);
    background-color: var(--superficie-suave);
}

.dato-cifra {
    font-family: var(--fuente-titulos);
    font-size: var(--texto-26);
    font-weight: var(--peso-fuerte);
    letter-spacing: -0.03em;
    color: var(--acento);
}

.dato-pie {
    font-size: var(--texto-13);
    color: var(--texto);
}

/* ---------------------------------------------------------------------------
   CV
   --------------------------------------------------------------------------- */

.cv {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--superficie-suave);
}

.cv-barra {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--espacio-16);
    flex-wrap: wrap;
    min-height: 52px;
    padding: var(--espacio-8) var(--espacio-28);
    border-bottom: var(--grosor-linea) solid var(--borde);
    background-color: var(--superficie);
}

/* Los rotulos dentro de la hoja suben un punto: es un documento para leer,
   no una interfaz, y a 10px costaba. */
.cv-hoja .rotulo {
    font-size: var(--texto-11);
}

/* Es un nombre de archivo, asi que va en mono como el resto de datos */
.cv-nombre {
    font-family: var(--fuente-mono);
    font-size: var(--texto-12);
    font-weight: var(--peso-medio);
}

.cv-fecha {
    font-size: var(--texto-12);
    color: var(--texto-suave);
}

.cv-descarga {
    margin-left: auto;
}

.cv-lienzo {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: var(--espacio-36) var(--espacio-24) var(--espacio-56);
}

.cv-hoja {
    width: min(var(--ancho-cv), 100%);
    flex: none;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-36);
    padding: var(--espacio-56) var(--espacio-64);
    border-radius: var(--radio-12);
    background-color: var(--superficie);
    box-shadow: var(--sombra-hoja);
}

.cv-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-24);
    flex-wrap: wrap;
    padding-bottom: var(--espacio-28);
    border-bottom: var(--grosor-linea) solid var(--borde);
}

.cv-titulo {
    font-size: var(--titulo-cv);
    line-height: 1.1;
    letter-spacing: -0.034em;
}

.cv-oficio {
    font-size: var(--texto-17);
    color: var(--texto);
}

.cv-contacto {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    font-size: var(--texto-14);
    line-height: 1.5;
    color: var(--texto);
}

.cv-cuerpo {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--espacio-48);
}

.cv-columna {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-32);
    min-width: 0;
}

.cv-seccion {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-14);
}

.cv-seccion p {
    font-size: var(--texto-16);
    line-height: var(--altura-parrafo);
    color: var(--texto-fuerte);
    text-wrap: pretty;
}

.cv-puesto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-8);
}

.cv-puesto-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-16);
}

.cv-puesto-nombre {
    font-size: var(--texto-17);
    font-weight: var(--peso-semi);
    letter-spacing: -0.01em;
}

.cv-fechas {
    flex: none;
    font-size: var(--texto-13);
    color: var(--texto-suave);
}

.cv-puesto p {
    font-size: var(--texto-16);
    line-height: var(--altura-texto);
    color: var(--texto);
}

.cv-estudios {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
    font-size: var(--texto-15);
    line-height: 1.5;
}

.cv-estudio {
    display: flex;
    flex-direction: column;
}

.cv-estudio strong {
    font-weight: var(--peso-semi);
}

.cv-estudio span {
    color: var(--texto-suave);
}

.cv-habilidades {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-10);
    font-size: var(--texto-15);
    line-height: 1.55;
}

.cv-habilidades strong {
    font-weight: var(--peso-semi);
}

.cv-habilidades span {
    color: var(--texto);
}

/* ---------------------------------------------------------------------------
   CONTACTO
   --------------------------------------------------------------------------- */

.contacto {
    width: min(var(--ancho-contacto), 100%);
    flex: none;
    display: grid;
    grid-template-columns: 1fr var(--ancho-panel-lateral);
    gap: var(--espacio-56);
    padding: var(--espacio-48) var(--espacio-32);
    /* El formulario hace la columna izquierda mucho mas alta que la derecha;
       centrando, el hueco se reparte arriba y abajo en vez de amontonarse. */
    align-items: center;
}

.contacto-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-28);
    min-width: 0;
}

.contacto-titulo {
    font-size: var(--titulo-ficha);
}





.contacto-datos {
    display: flex;
    align-items: center;
    gap: var(--espacio-20);
    flex-wrap: wrap;
    padding-top: var(--espacio-16);
    border-top: var(--grosor-linea) solid var(--borde);
    font-size: var(--texto-14);
    color: var(--texto);
}

.contacto-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-16);
    min-width: 0;
}

.pasos {
    display: flex;
    flex-direction: column;
    gap: var(--grosor-linea);
    background-color: var(--borde);
    border-radius: var(--radio-10);
    overflow: hidden;
}

.paso {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-16);
    padding: var(--espacio-20) var(--espacio-22);
    background-color: var(--superficie-suave);
}

.paso-numero {
    flex: none;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-15);
    font-weight: var(--peso-fuerte);
    color: var(--acento);
}

.paso-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

.paso-titulo {
    font-size: var(--texto-14);
    font-weight: var(--peso-semi);
}

.paso-detalle {
    font-size: var(--texto-13);
    line-height: 1.55;
    color: var(--texto);
}

.contacto-enlaces {
    display: flex;
    align-items: center;
    gap: var(--espacio-20);
    flex-wrap: wrap;
    padding: 0 var(--espacio-4);
    font-size: var(--texto-13);
}

/* Enlaces sueltos, no dentro de una frase: necesitan al menos 24px de alto
   para poder tocarlos comodos en un movil. */
.contacto-enlaces a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ---------------------------------------------------------------------------
   FORMULARIO DE CONTACTO
   --------------------------------------------------------------------------- */

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-16);
    /* Un campo de 670px es incomodo de leer y de rellenar */
    max-width: 520px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
}

.campo label {
    font-size: var(--texto-13);
    font-weight: var(--peso-medio);
    color: var(--texto-fuerte);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: var(--espacio-12) var(--espacio-14);
    border-radius: var(--radio-8);
    background-color: var(--superficie);
    box-shadow: 0 0 0 1px var(--borde-fuerte);
    font-family: var(--fuente-base);
    font-size: var(--texto-15);
    color: var(--tinta);
    transition: box-shadow var(--transicion-rapida);
}

.campo textarea {
    resize: vertical;
    min-height: 96px;
    line-height: var(--altura-texto);
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--texto-tenue);
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--tinta);
}

.campo-con-error input,
.campo-con-error textarea {
    box-shadow: 0 0 0 1px var(--acento);
}

.campo-error {
    font-size: var(--texto-13);
    color: var(--acento);
}

.formulario-pie {
    display: flex;
    align-items: center;
    gap: var(--espacio-16);
    flex-wrap: wrap;
    margin-top: var(--espacio-4);
}


/* Campo trampa para robots: fuera de la vista pero sin display:none, porque
   algunos robots se saltan justamente lo que esta oculto de esa forma. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Avisos de resultado del envio */
.aviso {
    padding: var(--espacio-14) var(--espacio-16);
    border-radius: var(--radio-8);
    font-size: var(--texto-14);
    line-height: 1.5;
    background-color: var(--superficie-suave);
    box-shadow: inset 0 0 0 1px var(--borde);
}

.aviso strong {
    font-weight: var(--peso-semi);
}

.aviso-bien strong {
    color: var(--tinta);
}

.aviso-mal {
    box-shadow: inset 0 0 0 1px var(--acento);
}

.aviso-mal strong {
    color: var(--acento);
}

/* ---------------------------------------------------------------------------
   ERROR
   --------------------------------------------------------------------------- */

.error {
    width: min(820px, 100%);
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--espacio-32);
    padding: var(--espacio-48) var(--espacio-32);
}

/* El numero grande hace de ancla visual, como la cifra del resultado en las
   fichas de proyecto. */
.error-cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--espacio-32);
    align-items: start;
}

.error-codigo {
    font-family: var(--fuente-titulos);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: var(--peso-fuerte);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--acento);
}

.error-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
}

.error-titulo {
    font-size: var(--titulo-ficha);
}

.error-acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-14);
    flex-wrap: wrap;
}

.error-apunte {
    font-size: var(--texto-13);
    color: var(--texto-suave);
}

/* Salidas posibles desde el 404 */
.error-sugerencias {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-10);
    width: 100%;
    padding-top: var(--espacio-24);
    border-top: var(--grosor-linea) solid var(--borde);
}

.error-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
}

@media only screen and (max-width: 768px) {

    .error-cabecera {
        grid-template-columns: 1fr;
        gap: var(--espacio-12);
    }

    .error-lista {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {

    /* Sin columna de colecciones, los filtros ocupan su lugar */
    .filtros {
        display: flex;
    }

    .bienvenida-texto {
        padding: var(--espacio-48);
    }

.bienvenida-cuerpo {
        grid-template-columns: 1fr 440px;
    }

    .contacto {
        gap: var(--espacio-36);
    }
}

@media only screen and (max-width: 1024px) {

.bienvenida-cuerpo {
        grid-template-columns: 1fr;
    }

    .bienvenida-texto {
        border-right: none;
        border-bottom: var(--grosor-linea) solid var(--borde);
        padding: var(--espacio-36) var(--espacio-32);
    }

    .bienvenida-rotulo,
    .destacado,
    .bienvenida-cifras {
        padding-left: var(--espacio-32);
        padding-right: var(--espacio-32);
    }

    .bienvenida-rotulo {
        padding-top: var(--espacio-24);
    }

    .sobre-mi,
    .contacto {
        grid-template-columns: 1fr;
        gap: var(--espacio-32);
        align-items: start;
    }

    /* Sin dos columnas, el retrato no puede estirarse a lo alto */
    .retrato {
        aspect-ratio: 4 / 3;
    }

    .cv-cuerpo {
        grid-template-columns: 1fr;
        gap: var(--espacio-32);
    }

    .cv-hoja {
        padding: var(--espacio-36) var(--espacio-32);
    }
}

@media only screen and (max-width: 768px) {

    .bienvenida-texto {
        padding: var(--espacio-28) var(--espacio-20);
        gap: var(--espacio-20);
    }

    /* En la bienvenida esta franja es el unico rotulo que hay: se queda */
    .bienvenida .barra-app {
        display: inline;
    }

    .bienvenida-rotulo,
    .destacado,
    .bienvenida-cifras {
        padding-left: var(--espacio-20);
        padding-right: var(--espacio-20);
    }

    .bienvenida-pie {
        padding: 0 var(--espacio-16);
    }

    .sobre-mi,
    .contacto,
    .error {
        padding: var(--espacio-24) var(--espacio-20);
    }

    .cv-lienzo {
        padding: var(--espacio-20) var(--espacio-16) var(--espacio-36);
    }

    .cv-hoja {
        padding: var(--espacio-28) var(--espacio-20);
        gap: var(--espacio-28);
    }

    .cv-barra {
        padding: var(--espacio-8) var(--espacio-16);
    }

    .cv-contacto {
        align-items: flex-start;
    }

    .contacto-email {
        font-size: var(--texto-26);
    }

    .trayectoria {
        gap: var(--espacio-12);
    }

    .trayectoria .separador,
    .contacto-datos .separador,
    .bienvenida-cifras .separador {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   DISCIPLINAS
   Las tres palabras bajo el titular, separadas por una raya fina. Vienen del
   portafolio anterior, donde encabezaban la portada.
   --------------------------------------------------------------------------- */

.disciplinas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-16);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-13);
    font-weight: var(--peso-semi);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.disciplinas li {
    display: flex;
    align-items: center;
    gap: var(--espacio-16);
}

/* La raya va detrás de cada palabra menos de la última */
.disciplinas li:not(:last-child)::after {
    content: "";
    width: var(--grosor-linea);
    height: 14px;
    background-color: var(--borde-fuerte);
}

/* ---------------------------------------------------------------------------
   CV · ROL Y BASE TECNICA
   --------------------------------------------------------------------------- */

.cv-puesto-rol {
    font-size: var(--texto-14);
    font-weight: var(--peso-medio);
    color: var(--acento);
}

.cv-apunte {
    font-size: var(--texto-14);
    color: var(--texto-suave);
}

/* Empresa, tarea y fechas en una fila, como en el PDF */
.cv-tecnica {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-12);
}

.cv-tecnica-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    gap: var(--espacio-16);
    align-items: baseline;
    font-size: var(--texto-14);
}

.cv-tecnica-empresa {
    font-weight: var(--peso-semi);
}

.cv-tecnica-tarea {
    color: var(--texto);
}

@media only screen and (max-width: 768px) {

    /* En movil la fila de tres columnas no cabe: se apila */
    .cv-tecnica-fila {
        grid-template-columns: 1fr;
        gap: var(--espacio-4);
    }
}