/* --- ESTILOS PARA EL FOOTER --- */

.site-footer {
    background: #1d1d1d;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
    padding: 60px 0;
}
.site-footer a {
    color: #ffffff;
    text-decoration: none;
}
.site-footer a:hover {
    color: #ffc107;
}
.site-footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #ffffff;
}

.footer-col {
    margin-bottom: 30px;
    /* Asegúrate de que no haya padding horizontal que sume un ancho excesivo aquí */
    /* Por ejemplo, evita: padding-left: 15px; padding-right: 15px; si Bootstrap ya lo maneja */
    box-sizing: border-box; /* Reconfirma */
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-list li {
    margin-bottom: 10px;
}

.social-icons {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    gap: 10px;
}
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffffff;
    color: #1d1d1d;
    transition: transform 0.2s ease-in-out;
}
.social-icons a:hover {
    transform: translateY(-3px);
}

/* Estilos para el formulario de contacto en el footer */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%; /* Asegura que el formulario tome todo el ancho de su columna */
}
.contact-form .form-control {
    background: #333333;
    border: none;
    border-radius: 30px;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 14px;
    width: 100%; /* Muy importante: siempre 100% del ancho del padre */
    box-sizing: border-box; /* Asegura que padding y border no desborden */
    min-width: 0; /* Permite que el input se encoja si el espacio es muy limitado */
    word-wrap: break-word; /* Rompe palabras largas */
    white-space: normal; /* Permite saltos de línea normales */
}
.contact-form .form-control::placeholder {
    color: #b2b2b2;
}

.contact-form .btn-send {
    background-color: #f7be03; /* Amarillo de tu marca */
    color: #1d1d1d; /* Texto oscuro para el botón */
    font-size: 14px;
    font-weight: 700;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto; /* Permite que el botón se ajuste a su contenido */
    max-width: 100%; /* Evita desbordamiento si el texto es muy largo */
    display: block; /* Para permitir margin auto */
    margin: 15px auto 0 auto; /* Centra el botón */
}
.contact-form .btn-send:hover {
    background-color: #e0ac00; /* Un tono más oscuro al pasar el ratón */
}


/* --- Media Queries para el Footer (Más explícitas) --- */

/* Para pantallas grandes y superiores (≥992px), 4 columnas */
@media (min-width: 992px) {
    .site-footer .row .col-lg-3 {
        /* Fuerza la base flex y el ancho máximo para cada columna a 23% */
        flex: 0 0 23%;
        max-width: 23%; /* Ajusta esto a 23% para que sea consistente con flex-basis */
    }
}

/* Para pantallas medianas (≥768px y <992px), 2 columnas */
@media (min-width: 768px) and (max-width: 991.98px) {
    .site-footer .row .col-md-6 {
        /* Fuerza la base flex de 50% para cada columna */
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Para pantallas pequeñas y extra pequeñas (<768px), 1 columna */
@media (max-width: 767.98px) {
    .site-footer .row .col-md-6,
    .site-footer .row .col-lg-3 { /* Aplica a ambas clases de columna en móvil */
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center; /* Centra el texto en móviles */
    }
    .social-icons {
        justify-content: center; /* Centra los íconos sociales en móviles */
    }
    .contact-form {
        align-items: center; /* Centra los elementos del formulario en móviles si el display flex lo permite */
    }
}