footer{
  background:var(--white);
  color:var(--dark);
  border-top:1px solid var(--border-light);
  padding:26px 20px 16px;
  margin-top:0; /* antes: 40px */
}
.footer-inner{max-width:1120px;margin:0 auto;}
.footer-columns{
  display:grid;
  grid-template-columns:1.2fr repeat(4,minmax(0,1fr));
  gap:24px;
  font-size:13px;
}
.footer-logo{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-logo-main{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:18px;
  color:var(--dark);
}

/* Tamaño del logo y subirlo */
.footer-logo-main img{
  width:auto;
  display:block;
  margin-top:-10px;           /* valor negativo “sube” un poco */
}

.footer-section-title{
  font-weight:600;
  margin-bottom:8px;
  color:var(--dark);
}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:4px;}
.footer-links a{
  font-size:13px;
  color:#4B5563;
}
.footer-links a:hover{
  color:var(--blue);
}
.footer-bottom{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#6B7280;
}

/* Centrar SOLO los iconos sociales */
.footer-social {
  margin-top:16px;
  display:flex;
  justify-content:center;  /* centra el grupo de iconos */
  gap:12px;
}

/* Iconos con gradiente rojo → púrpura */
.footer-social a {
  font-size:18px;
  text-decoration:none;
  background:var(--blue);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:1;
}

.footer-social a:hover {
  filter:brightness(1.2);
}

.footer-section-title{
  font-weight:600;
  margin-bottom:8px;
  color:var(--dark);
}

/* TABLET: menos columnas */
@media (max-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 20px;
  }
}


/* Mobile: logo arriba, todo lo demás en una sola columna debajo */
@media (max-width: 640px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-columns > *:not(:first-child) {
    margin-left: 0;   /* por si alguna columna tenía margen lateral */
  }

  footer {
    padding: 20px 16px 14px;
  }
}
