/* ===== Hoodie Factory Promo Bar (Scrolling) ===== */

/* Color azul de la barra (ajústalo si quieres más claro/oscuro) */
:root{
  --hf-blue: #3f5062;   /* azul grisáceo parecido al de tus capturas */
  --hf-white: #ffffff;
}

/* Asegura que la fila "Above Header" no meta colores raros */
.ast-above-header-wrap,
.ast-above-header-bar{
  background: var(--hf-blue) !important;
}

/* Barra */
.hf-promo{
  background: var(--hf-blue);
  color: var(--hf-white);
  overflow: hidden;
  white-space: nowrap;
  height: 35px;          /* más fina */
  line-height: 30px;     /* centrado vertical */
  font-size: 12.5px;     /* letra más pequeña */
  font-weight: 400;      /* menos gordita */
  letter-spacing: 0.6px; /* toque “marca” */
  text-transform: uppercase;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Pista que se mueve */
.hf-track{
  display: inline-flex;
  align-items: center;
  gap: 18px;                 /* separación entre elementos */
  width: max-content;
  will-change: transform;
  animation: hf-scroll 20s linear infinite;  /* velocidad suave */
}

/* Separador visual entre frases */
.hf-sep{
  opacity: 0.9;
  font-weight: 600;
  margin: 0 10px;            /* separación clara */
}

/* Resaltado del cupón */
.hf-coupon{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Animación (loop continuo) */
@keyframes hf-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* En móvil: un pelín más pequeño */
@media (max-width: 768px){
  .hf-promo{
    font-size: 11.5px;
    height: 36px;
    line-height: 31px;
  }
  .hf-track{
    animation-duration: 18s;
  }
}


/* EFECTO BOTONES COLECCIÓN Y PERSONALIZACIÓN */
.hf-cta{
  transition: transform .2s ease, box-shadow .2s ease;
}

.hf-cta:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
.fondo-cristal {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 20px 40px !important;
    border-radius: 10px;
    display: inline-block;
    color: #ffffff !important;
}


.hf-preview{
text-align:center;
margin:40px 0;
}

.hf-preview img{
max-width:350px;
border-radius:8px;
}