/* GANK · Footer (propuesta A) — staging 2026-09-24
   Alcance: solo .footer-container.gank-footer-on y .gf  */

.footer-container.gank-footer-on {
  background: #0e0e0e !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.footer-container.gank-footer-on .tvfooter-logo-link-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.gf {
  color: #b8b8b8;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.gf a { color: #b8b8b8; text-decoration: none; transition: color .15s ease; }
.gf a:hover { color: #F5A800; }
.gf a:focus-visible,
.gf .gf__col-toggle:focus-visible { outline: 2px solid #F5A800; outline-offset: 3px; border-radius: 4px; }
.gf ul { list-style: none; margin: 0; padding: 0; }

.gf__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 52px 0 36px;
}

.gf__logo { display: inline-block; }
.gf__logo img { display: block; height: 44px; width: auto; max-width: 180px; }
.gf__tagline { margin: 16px 0; max-width: 380px; color: #c9c9c9; font-size: 14px; line-height: 22px; }

.gf__contact { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px !important; font-size: 13px; }
.gf__contact li { display: flex; gap: 8px; align-items: flex-start; }
.gf__contact svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.gf a.gf__cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 44px;
  padding: 0 20px 0 16px;
  border: 1px solid #5c5c5c;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.gf a.gf__cta:hover { border-color: #F5A800; color: #F5A800; }
.gf__cta svg { width: 18px; height: 18px; flex: none; }

.gf__col-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: default;
}
.gf__col-toggle svg { display: none; width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.gf__links { display: flex; flex-direction: column; gap: 11px; }

.gf__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 64px;
  padding: 14px 0;
  border-top: 1px solid #2a2a2a;
  font-size: 12px;
  color: #8f8f8f;
}
.gf__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.gf__legal a { color: #8f8f8f; }
.gf__pay { display: flex; flex-wrap: wrap; gap: 6px; }
.gf__pay li { display: flex; align-items: center; height: 24px; box-sizing: border-box; padding: 0 8px; background: #ffffff; border-radius: 5px; }
.gf__pay li.gf__pay--aplazo { background: #44eef9; }
.gf__pay img { display: block; height: 16px; width: auto; }

/* Tableta */
@media (max-width: 991px) {
  .gf__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .gf__brand { grid-column: 1 / -1; }
}

/* Laptop/tableta: dejar libre el WhatsApp flotante (esquina inferior izquierda) */
@media (min-width: 768px) and (max-width: 1279px) {
  .gf__legal { padding-left: 64px; }
}

/* Móvil: columnas en acordeón */
@media (max-width: 767px) {
  .gf__main { display: flex; flex-direction: column; gap: 0; padding: 36px 0 8px; }
  .gf__brand { margin-bottom: 24px; }
  .gf a.gf__cta { display: flex; justify-content: center; width: 100%; height: 48px; font-size: 15px; box-sizing: border-box; }
  .gf__col { border-top: 1px solid #2a2a2a; }
  .gf__col:last-child { border-bottom: 1px solid #2a2a2a; }
  .gf__col-toggle { height: 56px; margin: 0; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
  .gf__col-toggle svg { display: block; }
  .gf__col.is-open .gf__col-toggle svg { transform: rotate(45deg); }
  .gf__links { display: none; gap: 0; padding: 0 0 12px; }
  .gf__col.is-open .gf__links { display: flex; }
  .gf__links a { display: block; padding: 8px 0; }
  .gf__bottom { flex-direction: column; align-items: flex-start; padding: 20px 0 96px; }
}