/* Estilo general del contenedor */
#titulo {
    position: relative;
    width: 100%;
    height: 90rem;

    display: flex;

    padding: 15rem 0 0 9rem; 

    background-image:  linear-gradient(var(--color_dos) 1px, transparent 1px), linear-gradient(to right, var(--color_dos) 1px, var(--color_uno) 1px);
    background-size: 3rem 3rem;
}

#titulo_column {
    display: flex;
    flex-direction: column;
}

/* Estilos para el texto del título */
#texto_titulo {
    height: 12rem;
    width: 24rem;
    background-image:  linear-gradient(var(--color_dos) 2px, transparent 2px), linear-gradient(90deg, var(--color_dos) 2px, transparent 2px), linear-gradient(var(--color_dos) 1px, transparent 1px), linear-gradient(90deg, var(--color_dos) 1px, var(--color_uno) 1px);
    background-size: 3rem 3rem, 3rem 3rem, 1rem 1rem, 1rem 1rem;
}

#texto_titulo h2 {
    z-index: 99;
    margin-top: 0.6rem;
    font-size: 2.7rem;

    line-height: 3rem;

    position: relative;
    z-index: 10;
    color: var(--color_texto_destacado);
    text-align: left;
}

#imagen_titulo {
    position: relative;
    z-index: 999;
    width: 10rem;
}

#texto_dos_titulo {
    padding-right: 3rem;
    margin-top: 3rem;
    height: 9rem;
    width: 39rem;
    background-image:  linear-gradient(var(--color_dos) 2px, transparent 2px), linear-gradient(90deg, var(--color_dos) 2px, transparent 2px), linear-gradient(var(--color_dos) 1px, transparent 1px), linear-gradient(90deg, var(--color_dos) 1px, var(--color_uno) 1px);
    background-size: 3rem 3rem, 3rem 3rem, 1rem 1rem, 1rem 1rem;
}

#texto_dos_titulo p {
    z-index: 99;
    margin-top: 0.6rem;
    font-size: 2.4rem;

    line-height: 3rem;
    letter-spacing: -0.2rem;

    position: relative;
    z-index: 10;
    color: var(--color_texto_dos);
    text-align: left;
}

/* Difuminado Uno (radial) */
#difuminado_uno {
    position: absolute;
    width: 90rem;
    height: 90rem;

    top: -50rem;
    left: 0rem;
    
    background: radial-gradient(circle, var(--color_difuminado_uno) 0%, rgba(255, 0, 0, 0) 70%);
    z-index: 1;
    filter: blur(15px);

    pointer-events: none;
}

/* Difuminado Dos (azul radial) */
#difuminado_dos {
    position: absolute;
    width: 200rem;
    height: 100rem;
    top: 15rem;
    left: -50rem;
    background: radial-gradient(circle, var(--color_uno) 20%, rgba(0, 0, 255, 0) 70%);
    z-index: 1;
    /* rgba(29, 30, 34, 1) */
    pointer-events: none;

    will-change: transform;
    animation: difuminadoAnimation 0.5s ease-out forwards;
}

@keyframes difuminadoAnimation {
    0% {
        top: -400rem;
        left: -400rem;
        
        width: 1000rem;
        height: 1000rem;
    }
    100% {
        top: 15rem;
        left: -50rem;
        width: 200rem;
        height: 100rem;
    }
}


/* CONTENIDO */  
.grid {
    position: absolute;
    top: 9rem;
    left: 0;
    width: 100%;
    padding: 3rem;
    display: grid;
    overflow: hidden;

    grid-template-columns: repeat(5, 15rem);
    grid-template-rows: repeat(4, 15rem);
    grid-gap: 3rem;
    z-index: 2;
}

.dkdron {
    /* grid-area: <start-row> / <start-column> / <end-row> / <end-column>; */
    grid-area: 3 / 2 / 4 / 4;
}

.lilicar {
    grid-area: 2 / 4 / 4 / 5;
}

.azaroa {
    grid-area: 1 / 5 / 3 / 6;
}

.elola {
    margin-left: 6rem;
    grid-area: 4 / 1 / 4 / 5;
}

.item1 {
    grid-area: 1 / 4 / 2 / 5;
}

.item2 {
    grid-area: 3 / 5 / 5 / 6;
}


.card {
    background: rgba(48, 48, 52, .7);
    backdrop-filter: blur(50px);
    border-radius: 1rem;
    border: 1px solid  rgba(255, 255, 255, .1);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    overflow: hidden;

    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    cursor: pointer;

    position: relative;
}

.card h3 {
    font-size: 2rem;
    z-index: 999;
    position: absolute;
    color: white;

    bottom: 1rem;
    left: 1rem;
}

.card img {
    object-fit: cover; 
    object-position: top;
    width: 100%;
    height: 100%;

    opacity: 1;
    transition: opacity 0.2s;
}

.card:hover:after {
    content: "";
    display: flex;
    position: absolute;
    /* background-image: url(img/fltro_tv.gif); */
    background-image: url(https://64.media.tumblr.com/da60c13b478dda09ab90c27e880983b8/tumblr_nd4pwdPKdc1tun3l0o1_1280.gifv);
    
    width: 100%;
    height: 100%;

    translate:0px 0px;
    background-repeat: no-repeat;
    background-position-y:-20px;
    background-size: cover;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 99;
    backdrop-filter: blur(6px);
}







@media only screen and (max-width: 1000px) {
    #main {
        overflow-x hidden;
    }

    #titulo {
        padding: 9rem 3rem 3rem 3rem; 
    }

    #texto_dos_titulo {
        height: fit-content;
        width: 100%;
    }
    
    .dkdron {
        /* grid-area: <start-row> / <start-column> / <end-row> / <end-column>; */
        grid-area: 3 / 1 / 2 / 2;
    }
    
    .lilicar {
        grid-area: 4 / 1 / 2 / 2;
    }
    
    .azaroa {
        grid-area: 5 / 1 / 2 / 2;
    }
    
    .elola {
        grid-area: 6/ 1 / 2 / 2;
    }
    
    .item1 {
        display: none;
    }
    
    .item2 {
        grid-area: 7 / 1 / 2 / 2;
    }


    
}