/* Estilo general del contenedor */
#titulo {
    position: relative;
    width: 100%;
    display: flex;

    padding-top: 6rem; 

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

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

    bottom: 0rem;
    left: 0rem;
    
    background: linear-gradient(360deg, #111113 1%, transparent);
    z-index: 1;
    pointer-events: none;
}

#info_politica {
    background: #111113;
    color: white;
    padding: 3rem 9rem;
}

#pais {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: solid white 1px;
}

svg {
    z-index: 999;
}

path {
    cursor: pointer;
    transition: fill 0.3s ease; /* Smooth transition for hover effect */
}

/* Change fill to white on hover */
path:hover {
  fill: #ffffff;
}


#nombre_pais {
    gap: 1rem;
    display: flex;
    align-items: center;
}

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

#informacion_del_pais {
    padding-top: 1rem;
    background-image: linear-gradient(var(--color_tres) 2px, transparent 2px), linear-gradient(90deg, var(--color_tres) 2px, transparent 2px), linear-gradient(var(--color_tres) 1px, transparent 1px), linear-gradient(90deg, var(--color_tres) 1px, var(--color_uno) 1px);
    background-size: 3rem 3rem, 3rem 3rem, 1rem 1rem, 1rem 1rem;
}




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

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

    #texto_dos_titulo {
        height: fit-content;
        width: 100%;
    }
}