/* ───────────────────── Banner «Inversión» de la portada ───────────────────

   Lived in a <style> tag inside a Bricks code element until the banner moved
   into the plugin — see includes/banner-inversion.php for why that was a bad
   place for it. Same design, now versioned.

   The artwork ships with the plugin, so the URLs here are relative to this
   file instead of pointing at one environment's uploads directory.          */

.hc-banner-inversion {
  --hc-gold: #ffd64f;
  --hc-cream: #f0eee0;
  --hc-gold-linear: linear-gradient(135deg, #8B7355 0%, #DAA520 25%, #FFD700 50%, #FFED4A 75%, #DAA520 100%);

  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #010000;
  border-radius: 1rem;
  overflow: hidden;
  padding: clamp(2.6rem, 4vw, 4.2rem) clamp(2rem, 4vw, 5rem);
}

/* Línea dorada decorativa superior */
.hc-banner-inversion::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hc-gold-linear);
  opacity: .85;
  z-index: 3;
}

.hc-banner-img {
  position: absolute;
  inset: 0 0 0 30%;
  background-image: url("banner/fondo.webp");
  transform: scaleX(-1);
  background-size: cover;
  background-position: center right;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.7) 70%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.7) 70%, #000 100%);
  z-index: 0;
  transition: opacity .4s ease-in-out;
}

/* Grupos de producto: ocultos por defecto. Sólo se usan en escritorio con puntero. */
.hc-hover-group {
  position: absolute;
  top: 50%;
  right: clamp(4rem, 10vw, 12rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

.hc-pieza {
  height: clamp(110px, 16vw, 190px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(218, 165, 32, .45));
  transform: translateX(30px) scale(.85);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}

.hc-pieza--2 { margin-left: -3.2rem; z-index: 2; transition-delay: .06s; }
.hc-pieza--3 { margin-left: -3.2rem; z-index: 3; transition-delay: .12s; }
.hc-pieza--4 { margin-left: -3.2rem; z-index: 4; transition-delay: .18s; }

.hc-group-monedas .hc-pieza--2,
.hc-group-monedas .hc-pieza--3 { margin-left: -4.5rem; }

/* Los relojes van más grandes y son cuatro, no tres. Un reloj es una pieza
   alta y angosta: a la misma altura que un lingote ocupa la mitad de ancho, y
   el grupo quedaba perdido en el negro. Se corrige el área, no la altura, que
   es lo que el ojo compara. Y se superponen menos, o el de atrás desaparece
   detrás del de adelante. */
.hc-group-relojes .hc-pieza {
  height: clamp(130px, 19vw, 225px);
}

.hc-group-relojes .hc-pieza--2,
.hc-group-relojes .hc-pieza--3,
.hc-group-relojes .hc-pieza--4 { margin-left: -2.4rem; }

/* === Rollover: sólo en dispositivos con puntero === */
/* Sólo el puntero dispara el vuelo, no el foco del teclado. Se intentó sumar
   `:focus-visible` dentro del `:has()` y no se pudo comprobar funcionando, así
   que no queda escrito: una regla que nadie vio andar es peor que su ausencia,
   porque el próximo que la lea va a creerle.

   No se pierde nada por eso. Los grupos son `aria-hidden` y muestran los mismos
   tres productos que los enlaces ya nombran en palabras; quien llega con el
   teclado conserva el anillo dorado y el texto. Un adorno no justifica JavaScript. */
@media (hover: hover) and (pointer: fine) {
  /* Cualquiera de los enlaces apaga el fondo: una sola regla en lugar de una
     por producto, así sumar un cuarto no obliga a acordarse de ésta. */
  .hc-banner-inversion:has(.hc-link:hover) .hc-banner-img {
    opacity: .12;
  }

  /* Éstas sí enumeran, porque CSS no puede emparejar el enlace con su grupo:
     hay que decirle cuál va con cuál. */
  .hc-banner-inversion:has(.hc-link--lingote:hover) .hc-group-lingote,
  .hc-banner-inversion:has(.hc-link--monedas:hover) .hc-group-monedas,
  .hc-banner-inversion:has(.hc-link--relojes:hover) .hc-group-relojes {
    opacity: 1;
  }

  .hc-banner-inversion:has(.hc-link--lingote:hover) .hc-group-lingote .hc-pieza,
  .hc-banner-inversion:has(.hc-link--monedas:hover) .hc-group-monedas .hc-pieza,
  .hc-banner-inversion:has(.hc-link--relojes:hover) .hc-group-relojes .hc-pieza {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* === Táctil / sin hover: ocultar grupos para no estorbar el tap === */
@media (hover: none), (pointer: coarse) {
  .hc-hover-group { display: none; }
}

/* Quien pidió menos movimiento recibe el mismo cambio, sin el vuelo. */
@media (prefers-reduced-motion: reduce) {
  .hc-banner-img,
  .hc-pieza {
    transition: none;
  }

  .hc-pieza {
    transform: none;
  }
}

.hc-banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 1100px;
  margin: 0 auto;
}

.hc-banner-titulo {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Montserrat, sans-serif;
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

.hc-titulo-main {
  background: var(--hc-gold-linear);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hc-gold);
  font-weight: 900;
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  letter-spacing: .5px;
}

.hc-titulo-sub {
  color: var(--hc-cream);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  letter-spacing: .3px;
  margin-top: .4rem;
}

.hc-banner-links {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.hc-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  text-decoration: none;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.8vw, 1.9rem);
  letter-spacing: .3px;
  color: var(--hc-gold);
  border-bottom: 1px solid rgba(255, 214, 79, .35);
  padding-bottom: 2px;
  transition: color .3s ease-in-out, border-color .3s ease-in-out;
}

.hc-link .hc-arrow {
  transition: transform .3s ease-in-out;
  font-weight: 400;
}

.hc-link:hover,
.hc-link:focus-visible {
  color: #ffe48a;
  border-bottom-color: #ffe48a;
}

.hc-link:hover .hc-arrow,
.hc-link:focus-visible .hc-arrow {
  transform: translateX(5px);
}

/* El banner es negro: el anillo por defecto del navegador se pierde encima. */
.hc-link:focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 700px) {
  .hc-banner-img { inset: 0 0 0 10%; opacity: .4; }
  .hc-titulo-main { font-size: 3.2rem; }
  .hc-titulo-sub { font-size: 1.6rem; }
}