/* ==========================================================================
   public/css/footer.css | Footer MAGNA (Dark Preview Card sobre lienzo crema)
   ========================================================================== */

.main-footer {
    width: calc(100% - 32px);
    max-width: calc(var(--page-max-width) + 128px);
    margin: var(--spacing-64) auto 16px;
    padding: var(--spacing-64) var(--spacing-48) var(--spacing-40);
    background-color: var(--surface-dark-preview);
    border-radius: var(--radius-cards);
    color: var(--color-pure-white);
}

.footer-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "logo socials"
        "legal legal";
    align-items: center;
    gap: var(--spacing-48) var(--spacing-32);
}

.footer-logo { grid-area: logo; display: flex; align-items: center; }

/* [IMG] Filtro original del logo en fondo oscuro: sin cambios */
.footer-logo-img {
    height: 96px;
    margin: -24px 0 -24px -20px; /* compensa el margen transparente del PNG */
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-socials {
    grid-area: socials;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-8);
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: var(--color-pure-white);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.footer-socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-socials a:hover { border-color: var(--color-ember-orange); background-color: var(--color-ember-orange); color: var(--color-pure-white); }

.footer-legal {
    grid-area: legal;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-16);
    padding-top: var(--spacing-24);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal p {
    margin: 0;
    font-size: 13px;
    color: var(--color-stone);
    max-width: none;
}

.legal-links { display: flex; gap: var(--spacing-24); }

.legal-links a {
    color: var(--color-stone);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.legal-links a:hover { color: var(--color-pure-white); }

/* BOTÓN WHATSAPP (sin cambios de comportamiento) */
.whatsapp-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wa-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.whatsapp-btn:hover {
    transform: scale(1.1) translateY(-8px);
    background-color: #1eb954;
}

.whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: whatsapp-pulse 2s infinite;
    pointer-events: none;
}

@keyframes whatsapp-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .main-footer { width: calc(100% - 16px); margin: var(--spacing-40) auto 8px; padding: var(--spacing-40) 20px var(--spacing-32); border-radius: 28px; }
    .footer-content { grid-template-columns: 1fr; grid-template-areas: "logo" "socials" "legal"; gap: var(--spacing-32); }
    .footer-socials { justify-content: flex-start; flex-direction: row; }
    .footer-legal { flex-direction: column; align-items: flex-start; }
    .legal-links { flex-direction: column; gap: var(--spacing-8); }
    .whatsapp-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; }
}