/* =========================================================
   footer.css: fat footer, mobile first
   Se carga en las 4 páginas, pero solo index, producto y juego tienen
   <footer> (login no). Usa los
   tokens de variables.css y .btn de components.css (el botón del
   newsletter). El HTML es semántico: cada columna es un <nav>, sponsors y
   newsletter son <section>, los datos de la empresa un <address>.
   Los <div> son solo de layout. Breakpoints: 48rem (tablet) y 64rem
   (desktop). Las medidas en rem de este archivo vienen de la primera
   versión, antes de tener los tokens de espaciado.
   ========================================================= */

.footer {
  background: var(--superficie);
  color: var(--primario-c3);
  font: 400 14px/1.6 var(--font-ui);
}

.footer__inner {
  padding: 2rem 1.25rem;
}

/* ---------- Elementos comunes ---------- */

/* Los links del footer heredan el color y pasan a celeste en hover, sin
   subrayado animado. Es el mismo criterio de .link--blanco (components.css). */
.footer p {
  margin: 0;
  color: inherit; /* base.css pinta los <p> de lila */
}

.footer a {
  color: inherit;
  transition: color var(--duracion-rapida) ease;
}

.footer a:hover {
  color: var(--acento);
}

/* Sin movimiento: el color cambia de golpe. */
@media (prefers-reduced-motion: reduce) {
  .footer a {
    transition: none;
  }
}

.footer__divider {
  border: 0;
  border-top: 1px solid var(--primario-o2);
  margin: var(--espaciado-8) 0;
}

/* Son <h2>: entran en la regla "Orbitron en h1-h3" aunque se vean como labels chicos */
.footer__label {
  margin: 0 0 var(--espaciado-4);
  font: 500 18px/1.4 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acento);
}

/* ---------- Sponsors ---------- */

.sponsors__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sponsors .footer__label {
  margin: 0;
}

.sponsors__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.sponsors__list a {
  font: 500 18px/1.4 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sponsors__mail {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 12px;
  color: var(--primario-c1);
}

/* ---------- Marca + columnas ----------
   Mobile: la marca arriba a todo el ancho y las columnas de a dos.
   Tablet: 4 columnas. Desktop: marca (2.2fr) + 4 columnas, como en Figma. */

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

.brand {
  grid-column: 1 / -1; /* en mobile ocupa todo el ancho */
}

.brand__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font: 600 24px/1.2 var(--font-display);
}

.brand__logo img {
  width: 2.75rem;
  height: 2.75rem;
}

.footer .brand__tagline {
  max-width: 22ch;
  margin: 0.75rem 0 1rem;
}

/* Redes: el ícono mide 26px pero el link 40px (área táctil). */
.social {
  display: flex;
  gap: 0.5rem;
  margin-left: -0.375rem; /* compensa el área táctil para alinear con el texto */
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.625rem;
}

.footer__col li + li {
  margin-top: 0.5rem;
}

/* ---------- Newsletter + empresa ---------- */

/* minmax(0, 1fr) en vez de la columna automática: el mínimo automático de un
   ítem de grilla es el ancho de su contenido, y el form del newsletter
   (input + botón) empujaba la columna más allá del ancho de la pantalla,
   con scroll horizontal en mobile chico (ver AUDITORIA.md, T06). */
.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* Es un <h2> (por eso Orbitron), con tamaño de label chico. */
.newsletter__title {
  margin: 0 0 var(--espaciado-3);
  font: 500 18px/1.4 var(--font-display);
}

.footer .newsletter__copy {
  max-width: 38ch;
  margin-bottom: 1.25rem;
}

.newsletter__form {
  display: flex;
  gap: 0.5rem;
  max-width: 22rem;
}

.newsletter__form input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-alto);
  padding: 0 var(--espaciado-3);
  background: var(--fondo);
  border: 1px solid var(--primario);
  border-radius: var(--radio-sm);
  color: var(--primario-c3);
  font: inherit;
}

.newsletter__form input::placeholder {
  color: var(--primario-c1);
}

.newsletter__form .btn {
  flex-shrink: 0;
}

/* Es un <h2 class="footer__label company__title">: toma el estilo de
   .footer__label y este bloque le saca las mayúsculas y el espaciado. */
.company__title {
  margin-bottom: var(--espaciado-3);
  text-transform: none;
  letter-spacing: 0;
}

.company address {
  font-style: normal;
}

/* ---------- Legal ----------
   Franja de abajo de todo: links legales y copyright. */

.legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.legal__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 12px;
}

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width: 48rem) {
  .sponsors__row {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal__meta {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* =========================================================
   Desktop
   ========================================================= */
@media (min-width: 64rem) {
  .footer__inner {
    padding: 2rem;
  }

  .sponsors__list {
    flex: 1;
    justify-content: space-between;
  }

  .footer__grid {
    grid-template-columns: 2.2fr repeat(4, 1fr);
  }

  .brand {
    grid-column: auto; /* en desktop vuelve a ser una columna más */
  } 

  .legal__links {
    justify-content: space-between;
  }
}