/* Redes de variables para colores y espaciados */
:root{
  --footer-bg: linear-gradient(180deg, #0b61a4 0%, #0a4f8a 100%);
  --footer-contrast: #ffffff;
  --footer-accent: #0b87e6;
  --footer-muted: #e9eef6;
  --footer-bottom-bg: #e6e6e6;
  --max-width: 1200px;
  --gap: 1rem;
}

/* Estilo general del footer */
footer{
  background: var(--footer-bg);
  color: var(--footer-contrast);
  padding: 36px 16px 0 16px;
  box-sizing: border-box;
  font-family: inherit;
}

/* Evitar justificado en textos del footer (columnas son estrechas) */
.footer-column p,
.footer-column li { text-align: start; hyphens: manual; overflow-wrap: anywhere; word-spacing: normal; letter-spacing: normal; }

.footer-container{
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 8px 28px 8px;
}

/* Columnas dentro del footer */
.footer-column{
  flex: 1 1 220px; /* grow | shrink | basis */
  min-width: 220px;
}

.footer-column h3{
  font-size: 1.15rem;
  margin: 0 0 8px 0;
  color: var(--footer-muted);
}

.footer-column p,.footer-column a{
  color: rgba(255,255,255,0.95);
  font-size: 0.95rem;
  line-height: 1.45;
  text-decoration: none;
}

.footer-column a:hover{ text-decoration: underline; }

/* Logo centrado en su columna */
.footer-logo{ display:flex; align-items:center; justify-content:center; }
.footer-logo img{ max-width:160px; height:auto; display:block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); transition:transform .25s ease,filter .25s ease; }
.footer-logo img:hover{ transform:translateY(-4px) scale(1.03); filter:drop-shadow(0 6px 14px rgba(0,0,0,0.32)); }

/* Redes sociales: íconos dentro de círculos */
.footer-social-list{ display:flex; gap:.5rem; padding:0; margin:6px 0 0 0; list-style:none; }
/* removed empty ruleset: .footer-social-list li */
.footer-social-list a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); transition:all .18s ease; }
.footer-social-list img{ width:22px; height:22px; display:block; filter:brightness(1) invert(0); }
.footer-social-list a:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.12); }

/* Donar: botón más visible */
.btn-donate{
  display:inline-block;
  background:var(--footer-accent);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(11,135,230,0.16);
  transition:transform .16s ease, box-shadow .16s ease, background .12s ease;
}
.btn-donate:hover{ transform:translateY(-3px); box-shadow: 0 10px 26px rgba(11,135,230,0.18); background:#0677d1; }

/* Footer bottom (copyright) */
.footer-bottom{

  /* Full-bleed bar: stretch to viewport width even if footer has centered max-width */
  background:var(--footer-bottom-bg);
  color:#111;
  padding:16px 8px;
  text-align:center;
  margin-block-start:18px;
  inline-size: 100vw; /* span the viewport */
  margin-inline-start: calc(50% - 50vw); /* center the full-width bar */
  margin-inline-end: calc(50% - 50vw);
  box-sizing: border-box; /* so padding doesn't add overflow */
  overflow-x: hidden; /* guard against fractional vw scroll */
}

.footer-bottom p{ margin:0; font-size:0.95rem; }

/* Evitar espacios grandes por justificado en la franja de copyright */
.footer-bottom p{
  text-align: center;
  text-justify: auto;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: manual;
  text-wrap: balance;
}

/* Responsive: columnas apiladas en pantallas pequeñas */
@media (max-width:767px){
  .footer-container{ padding-block-end:8px; }
  .footer-column{ flex-basis:100%; min-inline-size:0; }
  .footer-logo{ order: 2; margin:12px 0; }
  .footer-social{ order: 3; }
  .footer-donate{ order: 4; text-align:start; }
}

@media (min-width:768px){
  .footer-donate{ text-align:end; }
}