/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Contenedor principal de la barra */
.topbar {
    width: 100%;
    background-color: #f5f5f5; /* Gris claro de fondo */
    padding: 11px 10px;        /* Un poco más de espacio vertical para albergar los 35px */
    display: flex;
    justify-content: center; /* Centra horizontalmente los iconos */
    align-items: center;  
}

/* Contenedor de los íconos */
.social-icons {
    display: flex;
    gap: 25px; /* Espaciado horizontal entre cada ícono */

}

/* Estilo uniforme para TODOS los íconos */
.social-icons a {
    width: 20px;
    height: 20px;
    font-size: 20px;         /* Forzamos a que el vector mida 35px de alto/ancho */
    text-decoration: none;
    color: #225de0;
    background: transparent;
    border: none;
    /* Flexbox interno para que el ícono no se mueva de su celda de 35x35 */
    display: inline-flex;
    align-items: center;     /* Centrado vertical interno */
    justify-content: center; /* Centrado horizontal interno */
    line-height: 1;
    
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Efecto hover interactivo */
.social-icons a:hover {
    color: #878e9c;          /* Oscurece un poco al pasar el cursor */

    transform: scale(1.08);  /* Efecto de crecimiento sutil */
}

/* TABLET */

@media(max-width:768px){

    .menu-btn{
        display:block;
    }

    .menu{
        display:none;
        flex-direction:column;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#002f6c;
        padding:20px;
    }

    .menu.active{
        display:flex;
    }

    .hero{
        height:300px;
    }

    .hero h1{
        font-size:2rem;
    }
}

/* CELULAR */

@media(max-width:480px){

    .hero{
        height:250px;
    }

    .hero h1{
        font-size:1.5rem;
    }

    .hero-content{
        width:90%;
    }

}