/* =========================
   FOOTER BASE
========================= */

.footer {
    background-color: var(--surface-dark);
    color: var(--text-inverse);
}




/* =========================
   FOOTER TOP GRID
========================= */

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--gap-lg);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-5);
}

@media (max-width: 64rem) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}


/* =========================
   FOOTER LOGO
========================= */

.footer-logo img {
    max-width: 16rem;
    height: auto;
    /* Force logo to be white in case it's black/dark */
    filter: brightness(0) invert(1);
}

@media (max-width: 64rem) {
    .footer-logo {
        display: flex;
        justify-content: center;
        margin-bottom: var(--space-2);
    }

    .footer-logo img {
        max-width: 12rem;
        /* Logo reducido en móvil */
    }
}


/* =========================
   ADDRESSES
========================= */

/* =========================
   ADDRESSES
========================= */

.footer-addresses {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.address {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.address:hover {
    transform: translateX(4px);
}

.address .icon {
    font-size: 24px;
    color: var(--action-primary);
    flex-shrink: 0;
    margin-top: 2px;
    transition: color var(--duration-fast) var(--ease-standard);
}

.address:hover .icon {
    color: var(--accent-hover);
}

.address-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.address h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--action-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: color var(--duration-fast) var(--ease-standard);
}

.address:hover h4 {
    color: var(--accent-hover);
}

.address p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    transition: color var(--duration-fast) var(--ease-standard);
}

.address:hover p {
    color: var(--text-inverse);
}


/* =========================
   FOOTER LINKS
========================= */

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-end;
}

.links-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 64rem) {
    .footer-links {
        flex-direction: column;
        /* Mantener los DOS grupos en filas separadas */
        align-items: center;
        /* Centrar ambas filas */
        gap: var(--space-4);
    }

    .links-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        justify-content: center;
    }
}

.links-group a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--duration-fast) var(--ease-standard);
}

.links-group a:hover {
    color: var(--action-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 48rem) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }

    .footer-links {
        align-items: center;
        width: 100%;
    }

    .links-group {
        align-items: center;
        text-align: center;
    }
}

.footer-bottom p {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}


/* =========================
   SOCIAL LINKS
========================= */

.social-links {
    display: flex;
    gap: var(--space-3);
    margin-right: 5.5rem;
    /* Evita que choque con el botón flotante de WhatsApp */
}

@media (max-width: 48rem) {
    .social-links {
        justify-content: center;
        margin-right: 0;
        width: 100%;
    }
}

.social-links a {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--duration-fast) var(--ease-standard);
}

.social-links a:hover {
    color: var(--action-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================
   ANIMATIONS
========================= */

/* Fade up animation */
.fade-up {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity var(--duration-slow) var(--ease-smooth),
        transform var(--duration-slow) var(--ease-smooth);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.delay-1 {
    transition-delay: 100ms;
}

.delay-2 {
    transition-delay: 200ms;
}

.delay-3 {
    transition-delay: 300ms;
}

.delay-4 {
    transition-delay: 400ms;
}

/* Fallback sin JS */
@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}