/*
 * footer.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: global — todas las páginas
 *
 * Footer custom inyectado vía hook blocksy:footer:before (functions.php).
 * Footer nativo de Blocksy suprimido con:
 * add_filter('blocksy:builder:footer:enabled', '__return_false')
 * Verificado en blocksy/inc/integrations/theme-builders.php línea 79.
 *
 * DISEÑO:
 * - Fondo: --color-gris-oscuro (#403F3E) — neutro oscuro, diferenciado del hero verde
 * - Desktop: 3 columnas (2fr 1fr 1.5fr) · Tablet ≤1024px: 2+1 · Móvil ≤600px: 1
 * - Tipografía: títulos de columna (H4) pequeños en seminegrita ·
 *   copyright del subfooter condensado (700 + 75%) como sello de cierre
 * - Logo provisional: filter brightness+invert hasta recibir SVG definitivo en blanco
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-footer
 */

/* ============================================================
   WRAPPER EXTERNO
   Fondo oscuro neutro · separa visualmente del cuerpo de la página
   ============================================================ */
.db-footer {
    width: 100%;
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco-80);
}

/* ============================================================
   CONTENEDOR INTERNO
   Ancho máximo centrado · padding superior de sección
   ============================================================ */
.db-footer .db-footer__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding: var(--espaciado-seccion) var(--padding-contenedor) 0;
}

/* ============================================================
   GRID DE COLUMNAS
   Desktop: 2fr · 1fr · 1.5fr
   ============================================================ */
.db-footer .db-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: var(--espaciado-seccion);
}

/* ============================================================
   COLUMNA — base compartida
   ============================================================ */
.db-footer .db-footer__col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================================
   LOGO
   logotipo_decibelio.svg — versión corporativa para fondos oscuros.
   ============================================================ */
.db-footer .db-footer__logo-link {
    display: inline-block;
    align-self: flex-start;
}

.db-footer .db-footer__logo {
    height: 28px;
    width: auto;
}

/* ============================================================
   DESCRIPCIÓN — texto bajo el logo
   ============================================================ */
.db-footer .db-footer__descripcion {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-light);
    line-height: 1.7;
    color: var(--color-blanco-80);
    margin: 0;
}

/* ============================================================
   REDES SOCIALES — iconos SVG con currentColor
   ============================================================ */
.db-footer .db-footer__redes {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-top: 0.25rem;
}

.db-footer .db-footer__red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco-60);
    padding: 0.25rem;
    text-decoration: none;
    transition: color var(--transicion-rapida);
}

.db-footer .db-footer__red:hover {
    color: var(--color-blanco);
}

/* ============================================================
   TÍTULOS DE COLUMNA (H4)
   Pequeños y en seminegrita · uppercase con letter-spacing.
   ============================================================ */
.db-footer .db-footer__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blanco);
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-blanco-separador);
}

/* ============================================================
   LISTA DE SERVICIOS — columna central
   Sin bullets · items apilados con gap
   ============================================================ */
.db-footer .db-footer__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ============================================================
   ENLACES — servicios y teléfono
   Normal · hover con subrayado sutil
   ============================================================ */
.db-footer .db-footer__enlace {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-blanco-80);
    text-decoration: none;
    display: inline-block;
    transition: color var(--transicion-rapida);
}

.db-footer .db-footer__enlace:hover {
    color: var(--color-blanco);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Teléfono — ligeramente destacado */
.db-footer .db-footer__enlace--tel {
    font-weight: var(--peso-medio);
    letter-spacing: 0.02em;
}

/* ============================================================
   BLOQUE DE CONTACTO
   address reset + datos apilados
   ============================================================ */
.db-footer .db-footer__contacto-datos {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.db-footer .db-footer__dato {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-light);
    line-height: 1.6;
    color: var(--color-blanco-80);
    margin: 0;
}

/* Fila de contacto con icono — teléfono y email */
.db-footer .db-footer__dato--icono {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icono de la fila (db_icono_svg) — secundario, como los iconos de redes */
.db-footer .db-footer__dato-icono {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-blanco-60);
}

.db-footer .db-footer__dato-icono svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

/* Separación del sub-bloque teléfono/email respecto a dirección/horario */
.db-footer .db-footer__dato:not(.db-footer__dato--icono) + .db-footer__dato--icono {
    margin-top: 1.25rem;
}

/* ============================================================
   SUBFOOTER — copyright + links legales
   Separador superior · flex con espacio entre izquierda y derecha
   ============================================================ */
.db-footer .db-footer__subfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;   /* simétrico — antes 48px abajo contra 20 arriba */
    border-top: 1px solid var(--color-blanco-separador);
}

/* Copyright — bold condensado: sello de cierre.
   700 + 75% = condensación máxima. Contrasta con los H3 (200 + 115%). */
.db-footer .db-footer__copyright {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-bold);
    font-stretch: var(--ancho-condensado);
    letter-spacing: 0.04em;
    color: var(--color-blanco-60);
    margin: 0;
}

/* Lista de links legales — inline con separación */
.db-footer .db-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Links legales — light, secundarios */
.db-footer .db-footer__legal-enlace {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-light);
    color: var(--color-blanco-60);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}

.db-footer .db-footer__legal-enlace:hover {
    color: var(--color-blanco-80);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   2 columnas: identidad ocupa la fila entera · servicios + contacto abajo
   ============================================================ */
@media (max-width: 1024px) {
    .db-footer .db-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .db-footer .db-footer__col--identidad {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (≤600px)
   Una columna · subfooter apilado
   ============================================================ */
@media (max-width: 600px) {
    .db-footer .db-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .db-footer .db-footer__subfooter {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Legales en rejilla determinista — 2 columnas fijas (2+2) en todo el
       tramo móvil. La línea única queda descartada: a 14px no cabe en los
       anchos de móvil reales, y un 2+2 estable es preferible a rótulos
       partidos dentro de su celda. */
    .db-footer .db-footer__legal {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        gap: 0.5rem 1rem;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-footer .db-footer__red,
    .db-footer .db-footer__enlace,
    .db-footer .db-footer__legal-enlace {
        transition: none;
    }
}