/* 80-footer.css
   Footer + marca + redes sociales.
*/

.siteFooter{
  border-top: 1px solid rgba(20,36,70,.12);
  background:
    radial-gradient(900px 120px at 20% 0%, var(--tintA), transparent 65%),
    radial-gradient(900px 120px at 80% 0%, var(--tintC), transparent 65%),
    rgba(255,255,255,.76);
  backdrop-filter: blur(10px);
}


.footerInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  align-items:center;
}

@media (max-width: 980px){
  .footerInner{ grid-template-columns: 1fr; }
}

.footBrand{ display:flex; align-items:center; gap: 12px; }
.footLogo{ width: 42px; height: 42px; object-fit: contain; }
.footTitle{ font-weight: 1000; }
.footSub{ color: var(--muted); font-size: 12px; }
.footCopy{ color: rgba(20,36,70,.55); font-size: 12px; margin-top: 10px; }

/* Redes sociales */
.footSocial{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

@media (max-width: 980px){
  .footSocial{ align-items: flex-start; }
}

.footSocialTitle{
  font-weight: 1000;
  font-size: 13px;
  color: rgba(234,240,255,.85);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footSocialLinks{ display: flex; gap: 10px; }

.socialBtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 18px;
  color: var(--ink);

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(26, 56, 110, .14);

  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(20, 36, 70, .06);
}

.socialBtn:hover{
  transform: translateY(-2px);
  background: rgba(173,132,227,.14);
  border-color: rgba(173,132,227,.22);
  box-shadow: 0 14px 34px rgba(20, 36, 70, .10);
}

.socialBtn:active{ transform: translateY(0); }

/* =========================================================
   FOOTER EN TEMA CLARO – asegurar contraste de texto
========================================================= */

.footSocialTitle{
  color: rgba(20,36,70,.88);   /* ✅ “REDES SOCIALES” visible */
}

.footTitle{
  color: rgba(20,36,70,.92);
}

.footSub,
.footCopy{
  color: rgba(20,36,70,.62);
}

/* Links del footer si existieran */
.footLinks a{
  color: rgba(20,36,70,.72);
}

.footLinks a:hover{
  color: rgba(20,36,70,.92);
}