/*
 * «El catálogo»: el carrusel de productos que abre la columna única de la ficha.
 *
 * Toni lo pide el 10/09/2026 con `histrips.com` delante, que en cuanto acaban
 * las dos columnas —foto y compra— abre la parte ancha con una fila de
 * productos que se desliza y se corta contra el borde. Va en el mismo sitio:
 * **detrás de `.gp-single-product__layout` y antes de `#detalles-producto`**.
 *
 * Lo monta `assets/js/carrusel-productos.js`, que es el mismo fichero en la web
 * y en la preview. Aquí solo se dibuja.
 *
 * **Sustituye a dos bloques retirados el mismo día:** «También puede
 * interesarte» —tres productos de la misma familia al final de todo— y el pie
 * «Catálogo Gladiator · Volver a todos los productos». La salida a la tienda no
 * se pierde: es el botón de la cabecera.
 */
.gp-preview-product-page .gp-catalogo-carrusel {
  /* La misma paleta fría que los bloques de la columna de compra. */
  --gp-cat-ink: #0f1115;
  --gp-cat-muted: #6b7280;
  --gp-cat-line: #e5e7eb;
  --gp-cat-soft: #f7f8fa;
  --gp-cat-card: #ffffff;
  --gp-cat-star: #00b67a;
  --gp-cat-star-off: #cdeade;
  display: block;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.gp-preview-product-page .gp-catalogo__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.gp-preview-product-page .gp-catalogo__title {
  color: var(--gp-cat-ink);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0;
}

/*
 * El botón de la cabecera: la salida a la tienda que llevaba el pie retirado.
 * Va en cápsula con filete y no en negro sólido como estaba abajo: aquí
 * comparte pantalla con el «Añadir al carrito» de la columna de compra, y dos
 * botones negros a la vez se pelean.
 */
.gp-preview-product-page .gp-catalogo__all {
  border: 1px solid var(--gp-cat-line);
  border-radius: 999px;
  color: var(--gp-cat-ink);
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.gp-preview-product-page .gp-catalogo__all:hover,
.gp-preview-product-page .gp-catalogo__all:focus-visible {
  background: var(--gp-cat-soft);
  border-color: var(--gp-cat-ink);
}

/*
 * **Norma de Toni para todos los carruseles (05/09, recordada el 24/09): el
 * hueco de los lados no es un margen fijo, es sangría del principio y del
 * final del desplazamiento.** La caja se sale hasta el borde de la ventana y la
 * pista recupera ese hueco como relleno: parado, la primera tarjeta arranca
 * alineada con el título; al desplazar, las tarjetas pasan de borde a borde y
 * no se cortan contra el contenedor. La JS mide el hueco y lo deja en
 * `--gp-cat-bleed`; sin ella vale 0 y el carrusel se queda en su columna.
 */
.gp-preview-product-page .gp-catalogo__carousel {
  --gp-cat-bleed: 0px;
  margin-left: calc(var(--gp-cat-bleed) * -1);
  margin-right: calc(var(--gp-cat-bleed) * -1);
  position: relative;
}

/*
 * La pista.
 *
 * La barra del navegador se esconde: el carrusel se lleva con el dedo, con la
 * rueda, con el teclado o con las dos flechas, y una barra gris de sistema
 * debajo de las tarjetas ensucia una fila que se corta a propósito contra el
 * borde. El desplazamiento sigue siendo el nativo.
 */
.gp-preview-product-page .gp-catalogo__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.25rem var(--gp-cat-bleed);
  scroll-padding-inline: var(--gp-cat-bleed);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gp-preview-product-page .gp-catalogo__track::-webkit-scrollbar {
  display: none;
}

.gp-preview-product-page .gp-catalogo__track:focus-visible {
  border-radius: 1rem;
  outline: 2px solid var(--gp-cat-ink);
  outline-offset: 4px;
}

/*
 * Las flechas, solo para el ratón. La JS les pone `is-static` a la caja cuando
 * las tarjetas caben sin desplazar y entonces desaparecen; en los extremos se
 * quedan apagadas en vez de irse, para que la fila no se mueva.
 */
.gp-preview-product-page .gp-catalogo__arrow {
  align-items: center;
  background: var(--gp-cat-card);
  border: 1px solid var(--gp-cat-line);
  border-radius: 50%;
  box-shadow: 0 0.35rem 1.1rem rgba(17, 17, 17, 0.1);
  color: var(--gp-cat-ink);
  cursor: pointer;
  display: flex;
  height: 2.6rem;
  justify-content: center;
  position: absolute;
  top: calc(50% - 3rem);
  transition: opacity 0.2s ease, background 0.2s ease;
  width: 2.6rem;
  z-index: 2;
}

.gp-preview-product-page .gp-catalogo__arrow--prev { left: calc(var(--gp-cat-bleed) - 0.75rem); }
.gp-preview-product-page .gp-catalogo__arrow--next { right: calc(var(--gp-cat-bleed) - 0.75rem); }

.gp-preview-product-page .gp-catalogo__arrow svg {
  fill: none;
  height: 1.1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.1rem;
}

.gp-preview-product-page .gp-catalogo__arrow[disabled] {
  cursor: default;
  opacity: 0.3;
}

.gp-preview-product-page .gp-catalogo__carousel.is-static .gp-catalogo__arrow {
  display: none;
}

/*
 * La tarjeta.
 *
 * 15 rem de ancho fijo: a 1280 px entran cuatro y asoma la quinta, que es lo
 * que dice que hay más sin tener que ponerlo por escrito. No se estiran para
 * repartirse el ancho porque entonces la fila parecería una rejilla acabada.
 */
.gp-preview-product-page .gp-catalogo-card {
  background: var(--gp-cat-card);
  border: 1px solid var(--gp-cat-line);
  border-radius: 1rem;
  display: flex;
  flex: 0 0 15rem;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.gp-preview-product-page .gp-catalogo-card:hover {
  border-color: var(--gp-cat-ink);
  box-shadow: 0 0.6rem 1.6rem rgba(17, 17, 17, 0.08);
  transform: translateY(-3px);
}

/*
 * La foto, cuadrada y sobre el gris de la familia. `contain` y no `cover`: son
 * fotos de estudio con el producto centrado y recortarlas les corta el mango.
 */
.gp-preview-product-page .gp-catalogo-card__media {
  aspect-ratio: 1;
  background: var(--gp-cat-soft);
  display: block;
  overflow: hidden;
}

.gp-preview-product-page .gp-catalogo-card__media img {
  display: block;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  width: 100%;
}

.gp-preview-product-page .gp-catalogo-card:hover .gp-catalogo-card__media img {
  transform: scale(1.04);
}

.gp-preview-product-page .gp-catalogo-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 0.95rem;
}

/* Las estrellas y el recuento, como en la referencia: «★★★★★ (8293)». */
.gp-preview-product-page .gp-catalogo-card__rating {
  align-items: center;
  color: var(--gp-cat-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.35rem;
  margin: 0;
}

.gp-preview-product-page .gp-catalogo-card__name {
  color: var(--gp-cat-ink);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.gp-preview-product-page .gp-catalogo-card__name a {
  color: inherit;
  text-decoration: none;
}

.gp-preview-product-page .gp-catalogo-card__name a:hover,
.gp-preview-product-page .gp-catalogo-card__name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * 14/09/2026 · Toni: el precio va abajo, justo encima de «Ver producto», como en
 * las tarjetas del catálogo y de la portada. Es el precio quien lleva ahora el
 * `margin-top: auto`, así precio y botón bajan juntos y quedan a la misma
 * altura en todas las tarjetas del carril, ocupe el nombre una línea o dos.
 */
.gp-preview-product-page .gp-catalogo-card__price {
  align-items: baseline;
  color: var(--gp-cat-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  gap: 0.4rem;
  margin: auto 0 0.35rem;
  padding-top: 0.6rem;
}

.gp-preview-product-page .gp-catalogo-card__price strong {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gp-preview-product-page .gp-catalogo-card__from {
  color: var(--gp-cat-muted);
  font-size: 0.78rem;
}

.gp-preview-product-page .gp-catalogo-card__price del {
  color: var(--gp-cat-muted);
  font-size: 0.82rem;
  font-weight: 400;
}

/*
 * El botón, al fondo, justo debajo del precio. El `margin-top: auto` lo lleva el
 * precio (arriba): si lo llevara el botón, el precio se quedaría pegado al
 * nombre y el hueco caería entre el precio y el botón.
 */
.gp-preview-product-page .gp-catalogo-card__action {
  background: var(--gp-cat-ink);
  border-radius: 999px;
  color: #fff;
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0;
  padding: 0.6rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.gp-preview-product-page .gp-catalogo-card:hover .gp-catalogo-card__action {
  opacity: 0.86;
}

/*
 * ── Lo agotado (20/09/2026) ──────────────────────────────────────────────
 *
 * La tarjeta se queda —sale del final de una ficha, donde sirve para seguir
 * mirando el catálogo— pero deja de parecer comprable: foto en gris, precio sin
 * negrita y, en el sitio del botón, la etiqueta roja de la tarjeta del
 * catálogo. El botón lo quita la JS.
 *
 * La etiqueta **no se apaga con la tarjeta**: es lo único que hay que leer ahí,
 * así que mantiene su rojo y su peso mientras el resto baja de tinta. Por eso
 * el gris se aplica a la foto y al texto, y no con un `opacity` a la tarjeta.
 */
.gp-preview-product-page .gp-catalogo-card--agotado img {
  filter: grayscale(1);
  opacity: 0.6;
}

.gp-preview-product-page .gp-catalogo-card--agotado .gp-catalogo-card__name a,
.gp-preview-product-page .gp-catalogo-card--agotado .gp-catalogo-card__price {
  color: #8a8a8f;
}

.gp-preview-product-page .gp-catalogo-card--agotado .gp-catalogo-card__price strong {
  font-weight: 650;
}

/* Donde iba el botón: mismo hueco, misma altura, otra cosa que decir. */
.gp-preview-product-page .gp-catalogo-card__availability {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  padding: 0.6rem 0;
  text-align: center;
}

/* Las estrellas de la tarjeta comparten dibujo con las de encima del título. */
.gp-preview-product-page .gp-catalogo-card .gp-rating__stars {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
  position: relative;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__row {
  display: inline-flex;
  gap: 0.12rem;
  line-height: 0;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__row.is-on {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__star {
  align-items: center;
  border-radius: 0.13rem;
  display: inline-flex;
  flex: 0 0 auto;
  height: 0.85rem;
  justify-content: center;
  width: 0.85rem;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__row.is-off .gp-rating__star {
  background: var(--gp-cat-star-off);
  color: #fff;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__row.is-on .gp-rating__star {
  background: var(--gp-cat-star);
  color: #fff;
}

.gp-preview-product-page .gp-catalogo-card .gp-rating__star svg {
  fill: currentColor;
  height: 0.58rem;
  width: 0.58rem;
}

/*
 * En pantallas estrechas la tarjeta encoge y las flechas se van dentro, porque
 * fuera del contenedor se saldrían de la ventana. Con el dedo no hacen falta,
 * pero se quedan por si se navega con teclado.
 */
@media (max-width: 900px) {
  .gp-preview-product-page .gp-catalogo-card {
    flex-basis: 12.5rem;
  }

  .gp-preview-product-page .gp-catalogo__arrow--prev { left: calc(var(--gp-cat-bleed) + 0.25rem); }
  .gp-preview-product-page .gp-catalogo__arrow--next { right: calc(var(--gp-cat-bleed) + 0.25rem); }
}

@media (max-width: 560px) {
  .gp-preview-product-page .gp-catalogo-card {
    flex-basis: 63%;
  }
}

/*
 * En las fichas de lienzo oscuro el carrusel se lee en claro, como el resto de
 * bloques de esas dos fichas.
 */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-carrusel,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-carrusel {
  --gp-cat-ink: #f5f5f7;
  --gp-cat-muted: rgba(245, 245, 247, 0.68);
  --gp-cat-line: rgba(245, 245, 247, 0.22);
  --gp-cat-soft: rgba(245, 245, 247, 0.06);
  --gp-cat-card: rgba(245, 245, 247, 0.04);
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-card__action,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-card__action {
  background: #f5f5f7;
  color: #0f1115;
}

/*
 * 14/09/2026 · la palabra de familia en el nombre de las tarjetas. Sobre las
 * tarjetas claras sirve el degradado de fondo claro de `catalogo-2026-09-13.css`;
 * en las dos fichas Attack las tarjetas son oscuras (`#1d1d1f`) y va el de fondo
 * oscuro, el mismo de «Explora las Gladiator.»: Ascua `#bf5af2` 4,8:1 en su
 * extremo más oscuro y Glaciar `#8e7dff` 5,2:1.
 */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-card .gp-familia--attack,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-card .gp-familia--attack { color: #ff5470; }
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-card .gp-familia--control,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-card .gp-familia--control { color: #7fb2ff; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-card .gp-familia--attack,
  .gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-card .gp-familia--attack {
    background-image: linear-gradient(100deg, #ff9f45 0%, #ff5470 50%, #bf5af2 100%);
  }
  .gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-catalogo-card .gp-familia--control,
  .gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-catalogo-card .gp-familia--control {
    background-image: linear-gradient(100deg, #9fd4ff 0%, #7fb2ff 48%, #8e7dff 100%);
  }
}