/* ==========================================================================
   IncubArte — Pie de página
   Banda 1: logos de patrocinadores en VERDE con logos en NEGRO (más delgada)
   Banda 2: información de IncubArte en ROSA
   ========================================================================== */

/* --- Banda de patrocinadores ------------------------------------------------- */
.footer-sponsors {
  padding-block: clamp(1rem, 2vw, 1.75rem);
  background: var(--verde);
}

.footer-sponsors .marquee {
  padding-block: 0;
}

.footer-sponsors .marquee__item img {
  height: clamp(30px, 3.6vw, 42px);
}

/* Variante invertida (rosa) — usada donde el diseño lo pide */
.footer-sponsors--rosa {
  background: var(--rosa);
}

/* --- Banda de información ------------------------------------------------------ */
.footer {
  padding-block: clamp(2rem, 4vw, 3.25rem);
  background: var(--rosa);
  color: var(--blanco);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Logotipo IncubArte */
.footer__logo img {
  height: clamp(74px, 8vw, 104px);
  width: auto;
  /* La columna es flex: sin esto el logotipo se estira a todo el ancho
     disponible y pierde su proporción, muy visible en móvil. */
  align-self: flex-start;
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: contain;
}

/* Bloque POP Gallery */
.footer__pop-label {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
  color: var(--blanco);
}

.footer__pop {
  display: inline-block;
  cursor: pointer;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.footer__pop img {
  height: clamp(42px, 4.5vw, 58px);
  width: auto;
  /* Mismo motivo que el logotipo: evitar que la columna flex lo estire */
  max-width: 100%;
  object-fit: contain;
}

.footer__pop {
  align-self: flex-start;
}

.footer__pop:hover,
.footer__pop:focus-visible {
  opacity: 0.78;
}

/* Datos de contacto */
.footer__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.footer__item svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__item a {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__item a:hover,
.footer__item a:focus-visible {
  color: var(--negro);
}

/* Redes sociales del pie */
.footer__social {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--blanco);
  border: 2px solid var(--blanco);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

.footer__social a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__social a:hover,
.footer__social a:focus-visible {
  background: var(--blanco);
  color: var(--rosa);
}

/* Enlaces legales */
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
}

.footer__legal a {
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  color: var(--negro);
}

/* Línea final */
.footer__bottom {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.28);
  font-size: var(--text-xs);
  text-align: center;
  color: rgb(255 255 255 / 0.92);
}