@charset "UTF-8";
/* ============================================================
   TANTO LAMPS \00b7 Pie de página
   Estructura tipo Terria (marca+social \00b7 Información \00b7 Servicios ·
   Newsletter + barra inferior con selectores y legales), sobre fondo
   terracota de marca (#7a3b2e) con texto en blanco roto (#fff4e6).
   ============================================================ */

.tanto-pie {
  background: #7a3b2e;
  color: #fff4e6;
  font-family: "Instrument Sans", sans-serif;
  padding: clamp(48px, 6vw, 96px) 0 30px;
  /* Filete separador en terracota más oscuro */
  border-top: 2px solid #542a22;
}

.tanto-pie__in {
  max-width: 1400px; margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 70px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

/* --- Marca + redes --- */
.tanto-pie__logo { display: inline-block; line-height: 0; max-width: 100%; }
/* El mismo vector que la cabecera, de máscara, en el crema de la marca —el
   mismo con el que ya se pintan los iconos de las redes de aquí al lado—. */
.tanto-pie__logo-img {
  display: block;
  height: 40px; max-width: 100%;
  aspect-ratio: 1031.667 / 142.425;
  background-color: #fff4e6;
  -webkit-mask: url("../img/logo.svg") left center / contain no-repeat;
          mask: url("../img/logo.svg") left center / contain no-repeat;
}
.tanto-pie__social { display: flex; gap: 16px; margin-top: 24px; }
.tanto-pie__social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff4e6; opacity: .82; transition: opacity .2s ease;
}
.tanto-pie__social a:hover { opacity: 1; }

/* --- Columnas de enlaces --- */
.tanto-pie__tit {
  margin: 0 0 20px;
  font-family: "Instrument Sans", sans-serif;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: #fff4e6;
}
.tanto-pie__col ul { list-style: none; margin: 0; padding: 0; }
/* El hueco baja de 13 a 5 px porque el enlace se lleva 4 px arriba y 4 abajo:
   la separacion que se ve entre lineas es la misma de antes. */
.tanto-pie__col li { margin: 0 0 5px; }
.tanto-pie__col a {
  color: #fff4e6; text-decoration: none; font-size: .92rem;
  opacity: .82; transition: opacity .2s ease;
  /* 18 px de alto no llegan a los 24 que pide el criterio 2.5.8 de WCAG 2.2.
     Estos enlaces van en columnas de navegacion, asi que no les vale la
     excepcion de «enlace dentro de una frase». */
  display: inline-block; padding: 4px 0;
}
.tanto-pie__col a:hover { opacity: 1; }

/* --- Newsletter --- */

/* --- Barra inferior --- */
.tanto-pie__base {
  max-width: 1400px; margin: clamp(40px, 5vw, 72px) auto 0;
  padding: 22px clamp(24px, 4vw, 70px) 0;
  border-top: 1px solid rgba(255, 244, 230, .22);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px 30px; flex-wrap: wrap;
}
.tanto-pie__selectores { display: flex; gap: 24px; }
.tanto-pie__sel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; opacity: .82;   /* sin cursor de mano: no son pulsables */
}
/* El hueco entre filas baja de 12 a 4 px porque cada enlace se lleva ahora 4
   arriba y 4 abajo: lo que se ve separado es lo mismo. */
.tanto-pie__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; }
.tanto-pie__legal a {
  color: #fff4e6; text-decoration: none; font-size: .82rem; opacity: .82; transition: opacity .2s ease;
  /* 16 px de alto no llegan a los 24 del criterio 2.5.8, y estos cuatro
     enlaces salen en todas las paginas del sitio. */
  display: inline-block; padding: 4px 0;
}
.tanto-pie__legal a:hover { opacity: 1; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .tanto-pie__in { grid-template-columns: 1fr 1fr; }
  .tanto-pie__marca { grid-column: 1 / -1; }
  .tanto-pie__base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .tanto-pie__in { grid-template-columns: 1fr; }
}