/* PIEZA: el pie, de caja flotante a banda
 * ---------------------------------------------------------------------------
 * La banda va a ancho completo con `width: 100%`, NO con `100vw`: `100vw`
 * cuenta tambien la barra de desplazamiento y saca scroll horizontal en
 * cuanto la pagina es mas alta que la ventana.
 *
 * El contenido sigue centrado en los MISMOS 1000px que el resto del sitio.
 * Ese ancho no se toca: los formatos de Ad Manager llegan a 900x250.
 * --------------------------------------------------------------------------- */

.dl-pie {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--dl-azul-900);
  color: #DCE7F1;
  font-size: 1rem;
}

.dl-pie__dentro {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--dl-esp-lg);
}

.dl-pie a { color: #fff; text-decoration: none; }
.dl-pie a:hover { color: #A9C3DA; }
.dl-pie :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- El mástil ------------------------------------------------------------- */

.dl-pie__mastil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--dl-esp-xl);
  align-items: start;
  padding-block: var(--dl-esp-xl);
}

.dl-pie__nombre {
  margin: 0 0 var(--dl-esp-sm);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.dl-pie__que-es {
  margin: 0;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #B9CDDE;
}

.dl-pie__rotulo {
  margin: 0 0 var(--dl-esp-sm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7FA3C4;
}

/* Los enlaces útiles, en rejilla y SIN filetes. Los llevaron un rato y el
   usuario los quitó: diez reglas horizontales en un pie son diez líneas que
   no separan nada que necesite separarse. La comilla angular ya marca dónde
   empieza cada enlace. */
.dl-pie__enlaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem var(--dl-esp-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-pie__enlaces a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.dl-pie__enlaces a::before { content: "›"; margin-right: 0.5em; color: #7FA3C4; }

/* --- La barra legal, centrada --------------------------------------------- */

.dl-pie__legal {
  width: 100%;
  border-top: 1px solid #2E5F8B;
  background: var(--dl-azul-900);
}

.dl-pie__legal .dl-pie__dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dl-esp-sm);
  padding-block: var(--dl-esp-md);
  font-size: 0.8rem;
  color: #9DB8D0;
  text-align: center;
}

.dl-pie__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dl-esp-sm) var(--dl-esp-lg);
}

.dl-pie__legal a { color: #DCE7F1; }
.dl-pie__copy { margin: 0; font-variant-numeric: tabular-nums; }

/* --- Móvil ----------------------------------------------------------------- */

@media (max-width: 760px) {
  .dl-pie__mastil { grid-template-columns: minmax(0, 1fr); gap: var(--dl-esp-lg); }
}

@media (max-width: 520px) {
  .dl-pie__enlaces { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .dl-pie__dentro { padding-inline: var(--dl-esp-md); }
}