/* Pie de página de ideaslabs.org (clon estático). Reemplaza los dos <footer> del tema Gaea.
   El marcado lo pone pie.py. Sin estilos inline ni recursos de terceros (CSP 'self').
   Pie mínimo: una banda roja con la misión, el botón del boletín (abre el panel de
   tools/suscripcion/form.js), las redes y el copyright. Sin logo: ya está en la cabecera. */

.il-pie {
  --il-rojo: #C81E2B;
  --il-ancho: 1140px;
  background: var(--il-rojo);
  color: #fff;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
}
.il-pie *,
.il-pie *::before,
.il-pie *::after { box-sizing: border-box; }
.il-pie a { text-decoration: none; }
.il-pie a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.il-pie__cuerpo {
  max-width: calc(var(--il-ancho) + 40px);
  margin: 0 auto;
  padding: 40px 20px 20px;
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.il-pie__mision {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.il-pie__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Botón del boletín: abre el mismo panel que el botón flotante del componente. */
.il-pie__boletin {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: #fff;
  color: var(--il-rojo);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  transition: background-color .15s, color .15s;
}
.il-pie__boletin:hover,
.il-pie__boletin:focus,
.il-pie__boletin:focus-visible { background: transparent; color: #fff; }

.il-pie__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.il-pie__redes li { margin: 0; padding: 0; }
.il-pie__redes a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; border: 1px solid rgba(255, 255, 255, .55);
  transition: background-color .15s, border-color .15s, color .15s;
}
.il-pie__redes a:hover,
.il-pie__redes a:focus-visible { color: var(--il-rojo); background: #fff; border-color: #fff; }
.il-pie__redes svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.il-pie__copy {
  justify-self: stretch;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}

@media (min-width: 800px) {
  .il-pie__cuerpo {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 28px 40px;
    padding-top: 44px;
  }
  .il-pie__mision { font-size: 24px; }
  .il-pie__acciones { flex-direction: row; gap: 24px; }
  .il-pie__copy { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .il-pie__boletin,
  .il-pie__redes a { transition: none; }
}