.contacto{
    padding: 140px 10% 80px;
    background: #f8f8f8;
}

.contacto-titulo{
    text-align: center;
    max-width: 820px;
    margin: 0 auto 55px;
}

.contacto-titulo h1{
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    color: #003B66;
    margin-bottom: 16px;
}

.contacto-linea{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.contacto-linea span{
    width: 120px;
    height: 2px;
    background: #D4AF37;
}

.contacto-linea i{
    color: #D4AF37;
    font-size: 22px;
}

.contacto-titulo p{
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

.contacto-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.info-contacto,
.formulario-contacto{
    background: white;
    padding: 45px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    border: 1px solid rgba(212,175,55,.18);
}

.info-contacto h2,
.formulario-contacto h2{
    color: #003B66;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    font-size: 32px;
}

.contacto-intro{
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.contacto-datos{
    display: grid;
    gap: 10px;
    margin: 25px 0;
}

.contacto-dato{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #003B66;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.contacto-dato:hover{
    background: #f8f4e8;
    transform: translateX(4px);
}

.contacto-dato > i,
.contacto-direccion > i{
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #003B66;
    color: #D4AF37;
}

.contacto-dato span{
    display: flex;
    flex-direction: column;
    font-size: 17px;
    font-weight: 600;
}

.contacto-dato small{
    color: #777;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
}

.contacto-direccion{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 26px 0;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
}

.contacto-direccion:hover{
    color: #003B66;
}

.contacto-horarios{
    border-top: 1px solid #eee;
    padding-top: 22px;
}

.contacto-horarios h3{
    color: #003B66;
    font-size: 18px;
    margin-bottom: 14px;
}

.contacto-horarios h3 i{
    color: #D4AF37;
    margin-right: 8px;
}

.contacto-horarios p{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0;
    color: #555;
    font-size: 14px;
}

.contacto-horarios strong{
    color: #003B66;
}

.redes{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 50px; /* más abajo dentro del bloque */
}

.redes a{
    text-decoration: none;
    background: #003B66; /* azul oscuro */
    color: white;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* botón circular */
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 18px rgba(0,59,102,0.12);
}

.redes a i{
    font-size: 26px;
    color: white;
}

.redes a:hover{
    background: white;
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,59,102,0.14);
}

.redes a:hover i{
    color: #003B66;
}

@media(max-width: 480px){
    .redes a{ width: 68px; height: 68px; }
    .redes a i{ font-size: 20px; }
}

.texto-whatsapp{
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.whatsapp-box{
    background: #f8f4e8;
    padding: 50px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(212,175,55,.2);
}

.whatsapp-box i{
    font-size: 70px;
    color: #25D366;
    margin-bottom: 20px;
}

.whatsapp-box h3{
    color: #003B66;
    margin-bottom: 15px;
}

.whatsapp-box p{
    color: #666;
    margin-bottom: 25px;
}

.btn-whatsapp{
    display: inline-block;
    background: #003B66;
    color: white;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}

.btn-whatsapp:hover{
    background: #D4AF37;
    color: #003B66;
    transform: translateY(-3px);
}

.mapa{
    margin-top: 80px;
}

.mapa h2{
    text-align: center;
    color: #003B66;
    font-size: 40px;
    margin-bottom: 25px;
}

.mapa iframe{
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.footer-copy{
    background: #003B66;
    color: white;
    text-align: center;
    padding: 20px;
}

@media(max-width: 992px){

    .contacto-grid{
        grid-template-columns: 1fr;
    }

    .contacto-titulo h1{
        font-size: 45px;
    }

    .contacto-linea span{
        width: 80px;
    }

    .info-contacto,
    .formulario-contacto{
        padding: 30px;
    }

    .mapa iframe{
        height: 350px;
    }

}

@media(max-width: 600px){

    .contacto{
        padding: 120px 6% 60px;
    }

    .contacto-titulo h1{
        font-size: 40px;
    }

    .contacto-linea span{
        width: 55px;
    }

    .info-contacto,
    .formulario-contacto{
        padding: 28px 22px;
    }

    .contacto-horarios p{
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

}