/* Zócalo compartido: estilos originales del home. */
.site-footer{--petro-galopante:#09121C;--aquamarina:#B3ECE6;--coral:#EB455D;--hueso:#F1F0F0;--cuarzo-ahumado:#89837A;font-weight:400;color:var(--hueso)}
.site-footer {
  position: relative;
  z-index: 20;
  background: #060d15; /* un toque más oscuro que --petro-galopante para separarse visualmente de la galería */
  border-top: 1px solid rgba(241, 240, 240, 0.08);
  padding: 4.5rem 2.5rem 2rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr 0.95fr 0.95fr 1fr;
  gap: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 3.5rem;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  grid-column: span 1;
}

/* FASE 16: logo oficial (antes era texto "GALOPANTE / MEDIA" armado
   con CSS — ver FASE 14/16 en el comentario del footer en index.html
   para el detalle). Mismo archivo que ya usaban la secuencia
   "BIENVENIDO A [logo]" y la sección "Somos". */
.site-footer__logo {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
}

.site-footer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.site-footer__divider {
  display: block;
  width: 40px;
  height: 2px;
  background: rgba(241, 240, 240, 0.25);
}

.site-footer__tagline {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--cuarzo-ahumado);
}

.site-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}

.site-footer__social a {
  display: flex;
  color: var(--hueso);
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer__social svg {
  width: 17px;
  height: 17px;
}

.site-footer__social a:hover {
  opacity: 1;
  color: var(--aquamarina);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__col-title {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hueso);
}

.site-footer__nav-link {
  color: var(--cuarzo-ahumado);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
  width: fit-content;
}

.site-footer__nav-link:hover {
  color: var(--aquamarina);
}

.site-footer__promo {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__promo-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cuarzo-ahumado);
}

.site-footer__promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.55rem 1rem;
  border: 1px solid var(--aquamarina);
  border-radius: 6px;
  color: var(--aquamarina);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-footer__promo-btn:hover {
  background: var(--aquamarina);
  color: var(--petro-galopante);
}

.site-footer__promo-thumb {
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
  display: block;
  margin-top: 0.25rem;
}

.site-footer__col--contact {
  gap: 0.85rem;
}

.site-footer__contact-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--hueso);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.site-footer__contact-line svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--aquamarina);
}

a.site-footer__contact-line:hover {
  color: var(--aquamarina);
}

.site-footer__contact-line--static {
  cursor: default;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(241, 240, 240, 0.08);
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  color: var(--cuarzo-ahumado);
}

.site-footer__legal {
  display: flex;
  gap: 1.5rem;
}

.site-footer__legal a {
  color: var(--cuarzo-ahumado);
  text-decoration: none;
  font-size: 0.78rem;
  transition: color 0.2s ease;
}

.site-footer__legal a:hover {
  color: var(--aquamarina);
}

.site-footer__signature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--cuarzo-ahumado);
}

.site-footer__signature .site-footer__dot {
  position: static;
  flex: 0 0 auto;
}

@media (max-width: 1300px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .site-footer {
    padding: 3.5rem 1.5rem 2rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* padding-bottom extra: en mobile .social-fixed (ver esa regla más
     arriba) pasa a ser una barra FIJA de ~60px pegada al borde
     inferior real de la pantalla — al final del todo de la página
     (scroll máximo), el contenido de acá abajo quedaba tapado por esa
     barra porque el padding normal no alcanzaba para despejarla.
     Mismo tipo de ajuste que ya se hizo para el CTA/mute del círculo
     de video (FASE 10.1) por el mismo motivo. */
  .site-footer {
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 560px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}