/* COGNILAB - FOOTER */

/* Variables CSS necesarias para el footer */
:root {
    --bg2: #0a0a0a;
    --txt: #ffffff;
    --txt3: #cccccc;
    --magenta: #d946ef;
    --t1: 0.45s ease-out;
    --t2: 0.55s ease-in-out;
    --r2: 0.5rem;
    --r4: 1rem;
    --sh3: 0 20px 40px rgba(0,0,0,0.3);
    --card: rgba(255,255,255,0.05);
    --muted: #888888;
    
    /* Variables de espaciado */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s12: 3rem;
    --s16: 4rem;
    --s20: 5rem;
    
    /* Colores oficiales de redes sociales */
    --discord-color: #5865F2;
    --twitter-color: #1DA1F2;
    --instagram-color: #E4405F;
    --facebook-color: #1877F2;
    --youtube-color: #FF0000;
    --tiktok-color: #25F4EE;
    
    /* Colores de contacto */
    --mail-color: var(--magenta); /* Correo usa color de marca CogniLab */
    --whatsapp-color: #25D366;  /* WhatsApp */
}

/* Footer principal */
.footer{background:#000;border-top:1px solid rgba(255,255,255,0.14);padding:var(--s16) 0 var(--s8);margin-top:var(--s8);box-shadow:none;min-height:160px}
/* Garantizar consistencia de separación interna */
.footer .footer-grid{min-height:100px}
.footer .footer-bottom{padding-top:var(--s8)}
/* En móvil mantener proporciones adecuadas */
@media(max-width:768px){
    .footer{min-height:140px}
}

/* Grid del footer */
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr) minmax(180px,220px);gap:var(--s8);margin-bottom:var(--s12)}

/* Secciones del footer */
.footer-section h4{color:var(--txt);font-family:"Poppins",sans-serif;font-weight:600;font-size:1.125rem;margin-bottom:var(--s4)}

/* Enlaces del footer */
.footer-links{list-style:none}
.footer-links li{margin-bottom:var(--s2)}
/* Distribución en dos columnas SOLO para la lista de enlaces (no contacto) */
.footer-links.lista-enlaces{columns:2;column-gap:var(--s4);padding:0;margin:0}
.footer-links.lista-enlaces li{break-inside:avoid}
/* Texto e íconos del footer en blanco por defecto */
.footer-links a{color:var(--txt);text-decoration:none;font-size:.875rem;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r2);transition:background var(--t1),transform var(--t1),color var(--t1);position:relative;overflow:hidden}

/* Efecto hover simple de color para footer */
.footer-links a::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.06);opacity:0;transition:opacity 0.25s ease;z-index:0}
.footer-links a:hover::before{opacity:1}
.footer-links a:hover{color:var(--txt)}

/* Estilos específicos para íconos de Tabler */
.footer-links a i,
.footer-links a .ti {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
    color: inherit; /* Default: hereda blanco */
}

/* Iconos de contacto con color permanente de plataforma */
.footer-links .ti-mail { color: var(--mail-color) !important; }
.footer-links .ti-brand-whatsapp { color: var(--whatsapp-color) !important; }

/* Redes sociales */
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:200px}
/* Fondo y borde neutros; icono con color de marca permanente */
.social-link{width:48px;height:48px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--brand-color, var(--txt));text-decoration:none;transition:all var(--t1);font-size:1.25rem;position:relative;overflow:hidden}

/* Efecto hover simple de color para redes sociales */
.social-link::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.08);opacity:0;transition:opacity 0.25s ease;z-index:0}
.social-link:hover::before{opacity:1}
.social-link:hover{border-color:rgba(255,255,255,.3)}

/* Colores específicos para cada red social */
/* Definición del color de marca para cada red (color del ícono permanente) */
.social-link.discord { --brand-color: var(--discord-color); }

.social-link.twitter { --brand-color: var(--twitter-color); }

.social-link.instagram { --brand-color: var(--instagram-color); }

.social-link.facebook { --brand-color: var(--facebook-color); }

.social-link.youtube { --brand-color: var(--youtube-color); }

.social-link.tiktok { --brand-color: var(--tiktok-color); }

/* Efectos hover específicos para cada red social */
.social-link.discord:hover {
    background: var(--discord-color);
    color: var(--txt);
    border-color: var(--discord-color);
}

.social-link.twitter:hover {
    background: var(--twitter-color);
    color: var(--txt);
    border-color: var(--twitter-color);
}

.social-link.instagram:hover {
    background: var(--instagram-color);
    color: var(--txt);
    border-color: var(--instagram-color);
}

.social-link.facebook:hover {
    background: var(--facebook-color);
    color: var(--txt);
    border-color: var(--facebook-color);
}

.social-link.youtube:hover {
    background: var(--youtube-color);
    color: var(--txt);
    border-color: var(--youtube-color);
}

.social-link.tiktok:hover {
    background: var(--tiktok-color);
    color: var(--txt);
    border-color: var(--tiktok-color);
}

/* Estilos específicos para íconos de redes sociales */
.social-link i,
.social-link .ti {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* Estilos de depuración para íconos */
.ti {
    font-family: 'tabler-icons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Información legal */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s8);border-top:1px solid rgba(255,255,255,0.08);flex-wrap:wrap;gap:var(--s4)}
.footer-legal{color:var(--txt);font-size:.75rem}
.footer-legal-links{display:flex;gap:var(--s6)}
.footer-legal-links a{color:var(--txt);text-decoration:none;font-size:.75rem;padding:2px 6px;border-radius:var(--r2);transition:background var(--t1),color var(--t1),transform var(--t1)}
.footer-legal-links a:hover{color:var(--txt);background:rgba(255,255,255,.06);transform:translateY(-1px)}

/* Accesibilidad: foco visible en iconos sociales */
.social-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;transform:translateY(-2px) scale(1.03)}

/* Newsletter en footer */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.newsletter-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--s2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.newsletter-icon-link:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.newsletter-icon-footer {
    height: auto;
    display: block;
}

.newsletter-logo-substack {
    width: 80px;
}

.newsletter-logo-cognilab {
    width: 120px;
}

/* Responsive */
@media(max-width:768px){
    .footer-bottom{flex-direction:column;text-align:center}
    .footer-legal-links{justify-content:center}
    /* En móvil, volver a una sola columna para la lista de enlaces */
    .footer-links.lista-enlaces{columns:1}
    /* En móvil, el grid vuelve a auto-fit */
    .footer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
    .footer-newsletter {
        margin-top: var(--s4);
    }
}