/* logo */

.logo {
    width: 100%;
    height: 100%;
}

.fotologo img {
    width: 20%; /* Usando % para mayor flexibilidad */
    height: auto; /* Ajustamos la altura automáticamente para mantener la proporción */
    border-radius: 50%;
    border: 0.3125rem solid #FF0099; /* 5px a rem */
    object-fit: cover;
    display: block;
    margin: 2% auto;
    transition: box-shadow 0.5s ease;

}

.tituloweb {
    font-family: Montserrat;
    font-size: 5rem;
    color: #0d0d0d;
    white-space: nowrap;
    display: inline-block;
    text-shadow: 0px 0px 2px #FF0099;
    padding: 0.3rem 0.8rem; /* Reduce el padding para acercarlo más */
    text-align: center;
    transition: color 0.5s ease;
}

.tituloweb:hover{
    text-shadow: 
        0px 0px 10px #FFFFFF, /* Brillo blanco */
        0px 0px 20px #BF00FF, /* Brillo violeta */
        0px 0px 30px #BF00FF;
    color: #FFFFFF; /* Opción para cambiar el color del texto en hover */
}

.fotologo img:hover {
    box-shadow: 0px 0px 3.125rem #ffffff; /* 50px a rem */
}





/* MEDIA QUERIES */
@media (max-width: 768px) {
    html {
        font-size: 90%; /* Reduce un poco la escala en móviles */
    }

    .fotologo img {
        width: 25%; 
        margin: 1.5% auto; /* Reduce aún más el margen */
    }

    .tituloweb {
        font-size: 4rem; /* Reduce el tamaño para evitar que se separe mucho */
        padding: 0.2rem 0.6rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 80%; /* Reduce aún más la escala en pantallas muy pequeñas */
    }

    .fotologo img {
        width: 50%;
        margin: 1% auto; /* Acerca más la imagen */
    }
    .tituloweb {
        font-size: 5rem;
        padding: 0.2rem 0.5rem;
    }
}