/* ==========================================================================
   FOOTER.CSS — Constructora Almonacid
   Estilos para el pie de página responsivo, redes sociales y copyright.
   ========================================================================== */

/* ----------------------------------------------------------------
   1. CONTENEDOR PRINCIPAL
   ---------------------------------------------------------------- */
#footer {
    background-color: var(--color-seccion); /* #111111 */
    border-top: 1px solid var(--color-borde); /* Gris exclusivo bordes */
    padding-top: 3rem;
    padding-bottom: 2rem;
    color: var(--color-texto-suave);
    font-family: var(--fuente-cuerpo); /* Raleway */
}

/* Distribución interna en Flexbox (Mobile First → apilado vertical) */
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem; /* Separación generosa entre bloques en celulares */
    margin-bottom: 3rem;
}

/* ----------------------------------------------------------------
   2. ESTILOS DE COLUMNAS / BLOQUES
   ---------------------------------------------------------------- */
.footer-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-col-titulo {
    font-family: var(--fuente-titulo); /* Bebas Neue */
    font-size: 1.3rem;
    color: var(--color-texto); /* Blanco absoluto */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Listas de datos y navegación */
.footer-lista {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.footer-lista li {
    font-size: var(--fs-datos); /* 13px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.4;
}

/* Forzar íconos siempre blancos */
.footer-lista li i {
    color: #ffffff;
    font-size: 1rem;
}

.footer-lista li span {
    max-width: 280px; /* Evita que la dirección se estire de forma fea */
}

/* Enlaces telefónicos y correos */
.footer-lista a {
    color: var(--color-texto-suave);
    transition: color var(--trans-rapida);
}

.footer-lista a:hover,
.footer-lista a:focus {
    color: #ffffff;
    outline: none;
}

/* ----------------------------------------------------------------
   3. COLUMNA BRAND (Identidad) Y REDES SOCIALES
   ---------------------------------------------------------------- */
.footer-brand .footer-nombre {
    font-family: var(--fuente-titulo); /* Bebas Neue */
    font-size: 1.6rem;
    color: var(--color-texto);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.footer-eslogan {
    font-size: var(--fs-datos);
    font-style: italic;
    color: var(--color-eyebrow); /* Gris claro */
    margin-top: 0.4rem;
}

/* Botones de Redes Sociales y WhatsApp Directo */
.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 240px; /* Ancho de botón cómodo para celular */
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    font-size: var(--fs-datos);
    font-weight: 500;
    color: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-btn); /* 8px */
    background-color: rgba(255, 255, 255, 0.02);
    transition: background-color var(--trans-normal), border-color var(--trans-normal);
}

.footer-social:hover,
.footer-social:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #555555;
    color: #ffffff;
    outline: none;
}

.footer-social i {
    font-size: 1.1rem;
}

/* Menú secundario de navegación en el Footer */
.footer-nav {
    gap: 0.5rem;
}

.footer-nav a {
    font-size: var(--fs-datos);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-suave);
    transition: color var(--trans-rapida);
}

.footer-nav a:hover {
    color: #ffffff;
}

/* ----------------------------------------------------------------
   4. SECCIÓN COPYRIGHT (Línea Inferior)
   ---------------------------------------------------------------- */
.footer-copy {
    border-top: 1px solid var(--color-borde); /* Separador estricto */
    padding-top: 1.5rem;
    text-align: center;
}

.footer-copy p {
    font-size: 0.75rem; /* 12px sutil */
    letter-spacing: 0.02em;
    color: var(--color-eyebrow);
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   5. BREAKPOINT DESKTOP (Distribución horizontal en 3 columnas)
   ---------------------------------------------------------------- */
@media (min-width: 992px) {
    .footer-inner {
        flex-direction: row; /* Fila horizontal en PC */
        justify-content: space-between; /* Distribuye extremos equitativamente */
        align-items: flex-start; /* Alinea los bloques desde arriba */
        text-align: left;
        gap: 2rem;
    }

    .footer-col {
        width: 30%; /* Tres columnas proporcionales */
        align-items: flex-start; /* Alinea textos a la izquierda */
    }

    .footer-lista li {
        justify-content: flex-start; /* Íconos alineados a la izquierda */
        text-align: left;
    }
    
    .footer-lista li span {
        max-width: 100%; /* Aprovecha el ancho de columna en PC */
    }

    .footer-social {
        justify-content: flex-start; /* Contenido del botón a la izquierda */
        max-width: 100%; /* Se estira al ancho de su columna */
    }
}


.footer-mapa-box {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radio-card);
}

.footer-mapa-box iframe {
    width: 100%;
    height: 250px;
    display: block;
}