/**
 * Estilos de Réplica Exacta para el Footer - FOOTER.jpg
 * Optimización responsiva para evitar desbordamientos del logo en móvil.
 */

:root {
    --footer-bg-white: #ffffff;
    --footer-pure-black: #000000;
    --footer-green-neon: #76ff03; /* Verde neón idéntico para los círculos */
    --footer-text-copyright: #111111;
    --footer-divider-black: #000000;
    --font-footer-impact: "Arial Black", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-footer-clean: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

.site-footer {
    background-color: var(--footer-bg-white);
    width: 100%;
    padding: 25px 20px 15px 20px; /* Corregido el valor negativo para evitar errores de renderizado */
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Bloque Superior (Alineación móvil por defecto) --- */
.footer-top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; 
    width: 100%;
    margin-bottom: 20px; 
}

/* Contenedor del Logo */
.footer-logo-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-main-logo {
    /* SOLUCIÓN RESPONSIVA: Evita que el logo horizontal se desborde o deforme en pantallas de 360px */
    width: 100%;
    max-width: 280px; 
    height: auto;
    object-fit: contain;
}

/* Contenedor de Redes */
.footer-social-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.footer-social-title {
    font-family: var(--font-footer-impact);
    color: var(--footer-pure-black);
    font-size: 1.25rem; 
    font-weight: 900;
    line-height: 1.15;
    text-transform: lowercase; /* Forzado en minúsculas como el mockup */
    white-space: pre-line;
    margin: 0 0 12px 0; 
    letter-spacing: -0.5px;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* --- Botones Redondos: Fondo Verde e Icono Negro --- */
.social-icon-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--footer-green-neon);
    color: var(--footer-pure-black);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2rem; 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}

/* Efecto hover interactivo */
.social-icon-link:hover {
    transform: scale(1.12);
    background-color: var(--footer-pure-black);
    color: var(--footer-green-neon); /* Invierte colores al pasar el cursor */
}

/* Ajustes finos de tamaño interno individuales */
.social-icon-link.icon-instagram {
    font-size: 1.25rem;
}

.social-icon-link.icon-tiktok {
    font-size: 1.15rem;
}

.social-icon-link.icon-facebook {
    font-size: 1.35rem;
}

/* --- Línea Divisoria Sólida --- */
.footer-divider {
    border: 0;
    height: 1.2px;
    background-color: var(--footer-divider-black);
    width: 100%;
    margin: 0 0 12px 0; 
}

/* --- Bloque Inferior Copyright --- */
.footer-bottom-row {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.footer-copyright span {
    font-family: var(--font-footer-clean);
    color: var(--footer-text-copyright);
    font-size: 0.85rem; 
    font-weight: 600;
    display: block;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding: 0 10px;
    /* renderizado suavizaado la fuente */
    -webkit-font-smoothing: antialiased;   
    -moz-osx-font-smoothing: grayscale;      
    text-rendering: optimizeLegibility;     
}

/* Estilos para el enlace de la marca en el footer */
.powered-brand-link {
    text-decoration: none; 
    font-weight: 800; 
    color: #133f93; 
    transition: color 0.3s ease; 
}

/* Efecto al pasar el cursor (Hover) - Opcional pero recomendado para buena UI/UX */
.powered-brand-link:hover {
    color: #1b59c7; /* Un tono un poco más oscuro para indicar que es clickeable */
}


/* ==========================================================================
   MEDIA QUERY PARA ESCRITORIO (Distribución balanceada a los extremos)
   ========================================================================== */
@media (min-width: 768px) {
    .footer-top-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .footer-logo-block {
        justify-content: flex-start;
        width: auto;
    }

    .footer-main-logo {
        /* En escritorio recupera una escala estática perfecta y fija */
        height: 100px;
        width: auto;
        max-width: none;
    }

    .footer-social-block {
        align-items: flex-end; /* Alineación limpia al extremo derecho */
        text-align: right;
        width: auto;
    }

    .footer-social-title {
        font-size: 1.4rem;
        margin: 0 0 10px 0;
    }
}