/* ===== Paleta ===== */
/* en /static/css/footer.css */
.footer {
  font-family: 'Poppins', sans-serif;
}
:root{
  --cta-bg:#132b5b;           /* azul oscuro del CTA */
  --panel-bg:#2b3e60;         /* azul intermedio del panel */
  --text:#eef3fa;
  --text-dim:#c8d2e3;
  --accent:#62b6c8;           /* botones/hover */
  --link:#dfe7f5;
  --divider:rgba(255,255,255,.08);
}

/* Accesibilidad: oculto visualmente */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Footer base ===== */
.footer{
  background:var(--cta-bg);
  color:var(--text);
  padding: 48px 0 0;          /* arriba espacio para separarlo del bloque anterior */
}

/* Panel redondeado “dentro” del CTA */
.footer__surface{
  background:var(--panel-bg);
  border-radius:24px;
  max-width:1200px;
  margin:0 auto;              /* centra el panel */
  padding:34px 28px;
}

/* Grid interno: marca + 3 columnas */
.footer__inner{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:36px;
  align-items:start;
}

/* Columna de marca */
.footer__logo img{
  width:220px;                /* tamaño fijo del logo (reduce si lo ves grande) */
  height:auto;
  display:block;
}
.footer__tagline{
  margin:14px 0 20px;
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  opacity:.9;
}

/* RRSS */
.footer__social{
  display:flex; gap:14px; list-style:none; padding:0; margin:0;
}
.footer__social a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--text);
  transition:transform .15s ease, background-color .15s ease;
}
.footer__social a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.15); }

/* Títulos y listas */
.footer__title{
  margin:6px 0 12px;
  font-weight:700;
  font-size:0.9rem;           /* subtítulo del mockup */
  color:var(--text);
}
.footer__links ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:6px;
}
.footer__links a{
  color:var(--link);
  text-decoration:none;
  opacity:.9;
  font-size:0.85rem;
}
.footer__links a:hover{ color:#fff; opacity:1; }

/* Franja inferior */
.footer__bottom{
  max-width:1200px;
  margin:18px auto 0;
  padding:16px 10px 28px;
  border-top:1px solid var(--divider);
  color:var(--text-dim);
  font-size:.92rem;
}

/* =====================================
   RESPONSIVE FOOTER — MOBILE-FIRST
   ===================================== */

/* ≤480px — Mobile pequeño */
@media (max-width: 480px) {
  .footer{ padding: 32px 0 0; }

  .footer__surface{
    border-radius: 16px;
    padding: 24px 16px;
    margin: 0 12px;             /* deja aire lateral para ver el radio */
  }

  /* Stack: marca arriba, luego bloques en una sola columna */
  .footer__inner{
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .footer__logo img{ width: 160px; margin: 0 auto; }
  .footer__tagline{ font-size: 1rem; margin: 10px 0 14px; }

  .footer__social{ justify-content: center; }
  .footer__social a{ width: 44px; height: 44px; }

  .footer__title{ font-size: 0.85rem; }
  .footer__links ul{ justify-items: center; }

  .footer__bottom{
    margin: 16px 12px 0;
    padding: 12px 4px 24px;
    text-align: center;
    font-size: .85rem;
  }
}

/* 481–767px — Mobile grande */
@media (min-width: 481px) and (max-width: 767px) {
  .footer__surface{ border-radius: 20px; padding: 28px 20px; margin: 0 16px; }

  /* Dos columnas; la marca ocupa el ancho completo arriba */
  .footer__inner{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer__logo{ grid-column: 1 / -1; }
  .footer__logo img{ width: 180px; }
  .footer__tagline{ text-align: center; }
  .footer__social{ justify-content: center; }

  .footer__title{ font-size: 0.85rem; }

  .footer__bottom{ margin: 18px 16px 0; padding: 14px 8px 26px; text-align: center; }
}

/* 768–900px — Tablet chica */
@media (min-width: 768px) and (max-width: 900px) {
  .footer__surface{ border-radius: 22px; padding: 30px 22px; margin: 0 20px; }
  .footer__inner{
    display: grid;
    grid-template-columns: minmax(160px, 210px) 1fr 1fr 1fr; /* logo + 3 cols (más ancho para tagline) */
    gap: 12px; /* más compacto */
    align-items: start;
  }
  .footer__logo{ grid-column: 1; grid-row: 1; margin: 0; }
  .footer__logo img{ width: 180px; }

  .footer__tagline{
    grid-column: 1 / 3;          /* más ancho */
    display: block;              /* asegurar bloque */
    white-space: normal;         /* permitir salto de línea natural */
    overflow: visible;           /* no recortar */
    text-overflow: clip;         /* sin elipsis */
    font-size: 1rem;             /* un paso cómodo */
    margin: 10px 0 12px;
    line-height: 1.35;
  }

  .footer__links{ grid-row: 1; }
  .footer__links:nth-of-type(1){ grid-column: 2; }
  .footer__links:nth-of-type(2){ grid-column: 3; }
  .footer__links:nth-of-type(3){ grid-column: 4; }

}

/* 901–1023px — Tablet grande */
@media (min-width: 901px) and (max-width: 1025px) {
  .footer__logo img{ width: 200px; }

  .footer__surface{ border-radius: 22px; padding: 30px 22px; margin: 0 28px; }
  .footer__inner{
    display: grid;
    grid-template-columns: minmax(160px, 230px) 1fr 1fr 1fr; /* logo + 3 cols (más ancho para tagline) */
    gap: 12px; /* más compacto */
    align-items: start;
  }
  .footer__logo{ grid-column: 1; grid-row: 1; margin: 0; }
  .footer__logo img{ width: 180px; }


  .footer__tagline{
    grid-column: 1 / 3;          /* más ancho */
    display: block;              /* asegurar bloque */
    white-space: normal;         /* permitir salto de línea natural */
    overflow: visible;           /* no recortar */
    text-overflow: clip;         /* sin elipsis */
    font-size: 1rem;             /* un paso cómodo */
    margin: 10px 0 12px;
    line-height: 1.35;
  }

  .footer__links{ grid-row: 1; }
  .footer__links:nth-of-type(1){ grid-column: 2; }
  .footer__links:nth-of-type(2){ grid-column: 3; }
  .footer__links:nth-of-type(3){ grid-column: 4; }
}