/* ══════════════════════════════════════════════════════════════════════════════
   pie.css — MÓDULO 8 · Footer · Home D
   ──────────────────────────────────────────────────────────────────────────────
   flujos.md: "chat, mail Experience, badges con física (juguete), firma
   Multiplica discreta".

   EL JUGUETE YA NO ESTÁ AQUÍ (25/ago). Se mudó al módulo 6, donde el frame
   ajustado lo pone alrededor del titular de las insignias. Tiene sentido: allí
   el juguete ILUSTRA lo que el módulo cuenta; aquí solo era el último gesto de
   la página. Con él se fueron js/pie.js y las 270px de alto de su caja — el
   footer pasó de 510px a poco más de 180.

   Lo que queda es lo que siempre fue suyo: la línea, los dos contactos y la
   firma. Y los tres TODO(dato) que siguen sin resolverse (regla 21).
   ══════════════════════════════════════════════════════════════════════════════ */

.pie {
  position: relative;
  z-index: 1;
  padding: 0 var(--margen-hero) clamp(56px, 8vh, 88px);
}

/* La línea de arriba era el borde inferior de la caja del juguete. Al irse el
   juguete se quedaba el footer sin remate, así que la línea pasa a ser suya. */
.pie__interior {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: clamp(28px, 4.5vh, 44px);
  border-top: var(--trazo-linea) solid var(--borde-fuerte);
}

/* ── Contacto y firma ──────────────────────────────────────────────────────── */

.pie__abajo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
  justify-content: space-between;
}

.pie__rotulo {
  margin: 0 0 12px;
  font-family: var(--tipografia-pixel);
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.pie__lista { margin: 0; padding: 0; list-style: none; }
.pie__lista li { margin-bottom: 10px; }
.pie__lista li:last-child { margin-bottom: 0; }

.pie__etiqueta {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-secundario);
}

/* Dato que falta (regla 21): se declara en pantalla, no se rellena a ojo. */
.pie__falta {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 10px 2px;
  background: var(--superficie-aviso);
  border-left: var(--espacio-4) solid var(--acento-base);
  font-family: var(--tipografia-pixel);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.4;
  color: var(--texto-secundario);
}
.pie__falta b { color: var(--texto-principal); font-weight: 400; }

.pie__firma {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-terciario);
}
.pie__firma b { font-weight: 600; color: var(--texto-secundario); }


@media (max-width: 620px) {
  .pie__abajo { flex-direction: column; gap: 28px; }
}