/* ════════════════════════════════════════════════════════════════════
   WEBLYM · EL PIE DE LA PORTADA                                 (12/10)

   Sin referencia («hazlo tú»), así que todo sale de lo que ya hay en la
   portada y no se inventa nada nuevo:
   · Los márgenes son los de las secciones (46 a la izquierda, 43 a la
     derecha) y el ancho tope el de siempre, 1440.
   · El corte de arriba es el gris fino de la barra (#dcdcdc); el de en
     medio, más claro todavía, para que pese menos que el de las preguntas.
   · El logo, a la altura del de la barra (33 px); el lema en el gris
     suave de los lemas.
   · El idioma usa el globo de la barra y escribe al lado el idioma en el
     que estás. Lo cambia idioma.js, igual que el de arriba.
   · Lo de abajo, en letra pequeña y gris, como cualquier pie legal.
   ════════════════════════════════════════════════════════════════════ */

.pie {
  --u: calc(min(100vw, 1920px) / 1088);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(43 * var(--u)) 0 calc(46 * var(--u));
  box-sizing: border-box;
}

.pie__arriba {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(48 * var(--u)) 0 calc(40 * var(--u));
  border-top: 1px solid #dcdcdc;
}

.pie__logo {
  display: inline-block;
}

.pie__logo img {
  display: block;
  width: auto;
  height: 33px;
}

.pie__lema {
  margin: calc(14 * var(--u)) 0 0;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.3;
  color: var(--tinta-suave);
}

.pie__idioma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #4a4a4a;
  font: inherit;
  font-size: max(13px, calc(15 * var(--u)));
  cursor: pointer;
}

.pie__idioma svg {
  display: block;
  width: 17px;
  height: 17px;
}

.pie__idioma:hover span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pie__abajo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(18 * var(--u)) 0 calc(28 * var(--u));
  border-top: 1px solid #ececec;
  font-size: max(12px, calc(13.5 * var(--u)));
  color: #6b6b6b;
}

.pie__copy {
  margin: 0;
}

.pie__enlace {
  color: #4a4a4a;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ── MÓVIL (12/10, pedido) ───────────────────────────────────────────
   El mismo pie, con 20 px de margen y en píxeles (el porqué, en ia.css).
   Las dos filas caben a 390: logo y lema a un lado, el idioma al otro. */
@media (max-width: 640px) {
  .pie {
    padding: 0 20px;
  }

  .pie__arriba {
    gap: 16px;
    padding: 32px 0 28px;
  }

  .pie__logo img {
    height: 30px;
  }

  .pie__lema {
    margin-top: 10px;
    font-size: 14px;
  }

  .pie__idioma {
    font-size: 14px;
  }

  .pie__abajo {
    padding: 16px 0 calc(24px + env(safe-area-inset-bottom));
    font-size: 13px;
  }
}