/* site-footer.css — footer compartido por site-footer (site-chrome.js).
   Único origen de verdad: cualquier página que use site-footer debe enlazar este archivo
   en vez de reimplementar sus propias reglas de footer.
   Colores en literal (no variables) para que funcione también en las páginas que no
   cargan landing.css. */

.footer {
  background: linear-gradient(130deg, #3D1C9E 0%, #4B2AB8 45%, #2E63B8 100%);
  color: #FFFFFF;
}

/* Especificidad extra (.footer .footer-inner): en páginas como /equipo el <style> local
   define .container { padding: 0 16px } y, al ir después, anularía el padding vertical. */
.footer .footer-inner { padding-top: 4rem; padding-bottom: 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }

.footer-brand img { width: 10rem; height: auto; }
.footer-brand p { max-width: 26rem; margin-top: 1rem; color: #C6BEE0; font-size: .86rem; line-height: 1.7; }

.footer-col h4 { color: #FFFFFF; font-size: .9rem; font-weight: 800; }
.footer-col ul { display: grid; gap: .35rem; margin-top: .8rem; list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: #C6BEE0; font-size: .82rem; text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: #FFD84D; }

/* Los logos de redes son de relleno, no de trazo: hay que anular cualquier estilo global de svg */
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer-socials a { display: grid; place-items: center; min-width: 48px; min-height: 48px; border: 0; border-radius: .75rem; background: rgba(255, 255, 255, .12); color: #FFFFFF; transition: background .2s ease; }
.footer-socials a:hover { background: rgba(255, 255, 255, .24); }
.footer-socials svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin-top: 1.5rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 40px; color: #FFFFFF; font-size: .72rem; text-decoration: underline; text-underline-offset: .2rem; }
.footer-legal-dot { color: #28A8F3; }

.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: 1.5rem; color: #FFFFFF; font-size: .7rem; text-align: center; }

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: center; gap: 1.5rem; }
}