/* ===== FOOTER ===== */
footer {
  background:var(--dark); color:white; padding:60px 24px 30px;
}
.footer-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:40px; margin-bottom:40px;
}
.footer-brand p { color:rgba(255,255,255,0.6); font-size:0.88rem; line-height:1.7; }
.footer-col h4 {
  color:white; font-family:'Montserrat',sans-serif;
  font-size:1rem; margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-col a, .footer-col p {
  display:block; color:rgba(255,255,255,0.6); text-decoration:none;
  font-size:0.88rem; margin-bottom:10px; transition:color 0.2s; line-height:1.5;
}
.footer-col a:hover { color:var(--ocean-light); }

/* FIX: flex-wrap para 5 botones + override display:block del .footer-col a */
.footer-social {
  display:flex; gap:10px; margin-top:4px;
  flex-wrap:wrap;          /* ← wrappea cuando no caben */
}
.footer-social .social-btn {
  display:flex !important; /* ← sobreescribe el display:block de .footer-col a */
  margin-bottom:0 !important;
}
.social-btn {
  width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center;
  font-size:1rem; text-decoration:none; transition:all 0.25s;
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.7) !important;
  flex-shrink:0;
}
.social-btn:hover { color:white !important; border-color:white; transform:translateY(-3px); }

/* Colores de marca por red social — se activan con mouse (:hover) y al
   presionar en pantallas táctiles (:active), ya que en celular no hay hover. */
.social-facebook:hover, .social-facebook:active {
  background:#1877F2 !important; border-color:#1877F2 !important;
}
.social-whatsapp:hover, .social-whatsapp:active {
  background:#25D366 !important; border-color:#25D366 !important;
}
.social-instagram:hover, .social-instagram:active {
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;
  border-color:#bc1888 !important;
}
.social-tiktok:hover, .social-tiktok:active {
  background:#010101 !important; border-color:#25F4EE !important;
  box-shadow:0 0 0 1px #25F4EE, 2px 2px 0 0 #FE2C55 !important;
}
.social-youtube:hover, .social-youtube:active {
  background:#FF0000 !important; border-color:#FF0000 !important;
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:24px; text-align:center;
  color:rgba(255,255,255,0.45); font-size:0.82rem;
}