/*
 * El pie de la tienda, rehecho el 10/09/2026.
 *
 * Toni lo pide con `histrips.com` delante: una marca grande a la izquierda con
 * los datos de contacto debajo, tres columnas de enlaces numeradas —[01], [02],
 * [03]—, las redes y las formas de pago en una tira, y el aviso de copyright al
 * final. Lo que había eran cuatro columnas iguales de enlaces y una línea de
 * copyright: correcto, pero sin ninguna de las cosas que hacen que un pie
 * parezca de una tienda de verdad —a quién le escribes, dónde está la empresa y
 * con qué se paga—.
 *
 * **Los datos son los de la empresa, no unos de relleno.** Razón social, CIF,
 * domicilio, correo y teléfono son los que confirmó el propietario y los que ya
 * usan las facturas (`Web/content/invoice-operational-readiness.json`).
 *
 * **No hay horario de atención**, aunque la referencia lo lleve: el nuestro
 * sigue sin decidirse y `Web/content/paginas-locales.json` deja escrito que no
 * debe inventarse.
 *
 * **Las formas de pago solo aparecen si la pasarela está encendida**, y eso lo
 * decide `gladiator_footer_payment_methods()` preguntándole a WooCommerce. A
 * fecha de hoy Redsys sigue en pruebas y desactivado, así que esa fila no se
 * pinta: un pie con el logo de Visa es una promesa de que se puede pagar con
 * tarjeta, y todavía no se puede.
 */
.gp-site-footer {
  --gp-pie-ink: #f5f5f7;
  --gp-pie-muted: rgba(245, 245, 247, 0.6);
  --gp-pie-line: rgba(245, 245, 247, 0.14);
}

/*
 * La marca ocupa el doble que cada columna de enlaces: es donde va el reclamo
 * grande y el bloque de datos, y con cuatro columnas iguales el domicilio se
 * partía en cinco renglones.
 */
.gp-site-footer .gp-footer-grid {
  align-items: start;
  counter-reset: gp-pie-col;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.gp-site-footer .gp-footer-brand__logo {
  max-width: 13rem;
}

/*
 * El reclamo, grande y en dos renglones como en la referencia. Sale del mismo
 * ajuste del personalizador que ya llevaba —`gladiator_footer_description`—, o
 * sea que no hay texto nuevo: lo que cambia es que se lee.
 */
.gp-site-footer .gp-footer-claim {
  color: var(--gp-pie-ink);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 1.5rem 0 0;
  max-width: 16ch;
}

.gp-site-footer .gp-footer-contact {
  color: var(--gp-pie-muted);
  display: grid;
  font-size: 0.9rem;
  gap: 0.2rem;
  line-height: 1.5;
  margin-top: 1.75rem;
  max-width: 34ch;
}

.gp-site-footer .gp-footer-contact p {
  margin: 0;
}

.gp-site-footer .gp-footer-contact__lead {
  color: var(--gp-pie-ink);
  font-weight: 600;
}

.gp-site-footer .gp-footer-contact a {
  color: var(--gp-pie-ink);
  text-decoration: none;
}

.gp-site-footer .gp-footer-contact a:hover,
.gp-site-footer .gp-footer-contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* La razón social y el domicilio, un punto por debajo: son la letra pequeña. */
.gp-site-footer .gp-footer-contact__legal {
  font-size: 0.82rem;
  margin-top: 0.9rem !important;
}

/*
 * Las columnas van numeradas con un contador y no con el número escrito: así
 * el orden no se puede desincronizar si algún día se añade o se quita una, y
 * no hay que tocar el texto en las dos superficies.
 */
.gp-site-footer .gp-footer-col {
  counter-increment: gp-pie-col;
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}

.gp-site-footer .gp-footer-heading {
  color: var(--gp-pie-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.gp-site-footer .gp-footer-heading::before {
  content: "[0" counter(gp-pie-col) "] ";
}

.gp-site-footer .gp-footer-col a {
  color: var(--gp-pie-ink);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.gp-site-footer .gp-footer-col a:hover,
.gp-site-footer .gp-footer-col a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/*
 * La tira de redes y formas de pago: redes a la izquierda, pago a la derecha,
 * separada por arriba con el mismo filete de un píxel que el copyright.
 */
.gp-site-footer .gp-footer-strip {
  align-items: center;
  border-top: 1px solid var(--gp-pie-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
}

.gp-site-footer .gp-footer-social,
.gp-site-footer .gp-footer-payments {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Solo Instagram y TikTok: son las dos cuentas que la marca tiene abiertas.
 * Un icono de una red sin cuenta detrás es un enlace roto en todas las páginas.
 */
.gp-site-footer .gp-footer-social a {
  align-items: center;
  border: 1px solid var(--gp-pie-line);
  border-radius: 50%;
  color: var(--gp-pie-ink);
  display: flex;
  height: 2.6rem;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  width: 2.6rem;
}

.gp-site-footer .gp-footer-social a:hover,
.gp-site-footer .gp-footer-social a:focus-visible {
  background: var(--gp-pie-ink);
  border-color: var(--gp-pie-ink);
  color: #0a0a0a;
  transform: translateY(-2px);
}

.gp-site-footer .gp-footer-social svg {
  fill: none;
  height: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 1.25rem;
}

.gp-site-footer .gp-footer-social .gp-social-dot {
  fill: currentColor;
  stroke: none;
}

/*
 * Las marcas de pago van sobre fondo claro, como en todas las tiendas: sobre
 * el negro del pie los colores de las marcas se apagan y no se reconocen.
 */
.gp-site-footer .gp-pay {
  align-items: center;
  background: #fff;
  border-radius: 0.35rem;
  display: flex;
  height: 1.6rem;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0 0.4rem;
}

.gp-site-footer .gp-pay--visa span {
  color: #1434cb;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.gp-site-footer .gp-pay--mastercard svg {
  height: 1.05rem;
  width: 1.75rem;
}

.gp-site-footer .gp-pay--bizum span {
  color: #00b0b2;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gp-site-footer .gp-footer-bottom {
  border-top: 1px solid var(--gp-pie-line);
  color: var(--gp-pie-muted);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

@media (max-width: 900px) {
  .gp-site-footer .gp-footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gp-site-footer .gp-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .gp-site-footer .gp-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gp-site-footer .gp-footer-strip {
    justify-content: flex-start;
  }
}

/*
 * ── La costura entre la ficha y el pie ───────────────────────────────────
 *
 * Toni ve el 10/09/2026 una banda blanca entre el bloque oscuro de dudas
 * frecuentes y el pie negro, y pide quitarla. Eran 8 rem: 2 de
 * `#detalles-producto` y 6 de `.gp-single-product`, que es el aire que separa
 * la ficha del pie cuando lo ultimo es contenido claro.
 *
 * **Se quita solo cuando la ficha acaba en el bloque de dudas**, que es a
 * sangre y con fondo oscuro y por eso pega con el pie. Si una ficha no lo
 * tuviera, lo ultimo seria contenido claro y ahi el aire sigue haciendo falta:
 * por eso la regla pregunta por el bloque con `:has()` en vez de poner el
 * relleno a cero para todas.
 */
.gp-single-product:has(.gp-preview-product-faqs) {
  padding-bottom: 0;
}

.gp-single-product:has(.gp-preview-product-faqs) #detalles-producto {
  padding-bottom: 0;
}