/* Hero de fallback para el Home cuando ps_imageslider no tiene banners
   activos que mostrar (ver ps_imageslider/views/templates/hook/slider.tpl
   y templates/_partials/home-hero-fallback.tpl). Copiado del layout de
   eclipse.css pero con nombres de clase propios: no compartir el mismo
   archivo/clases con la landing de categoría para poder evolucionar cada
   uno sin que se afecten entre sí. Reutiliza la paleta navy/dorado
   definida en :root dentro de custom.css. */

.home-hero-wrap {
  position: relative;
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  margin-right: 0;
  background:
    radial-gradient(1px 1px at 15% 25%, #fff 100%, transparent),
    radial-gradient(1px 1px at 45% 60%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 75% 20%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 85%, #fff 100%, transparent),
    linear-gradient(120deg, var(--navy-900) 40%, var(--navy-700));
  overflow: hidden;
}

.home-hero-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 24px 80px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
}

.home-hero-eyebrow {
  color: var(--gold-400);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.home-hero-title {
  color: var(--ink-100);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 18px;
}

.home-hero-title span {
  color: var(--gold-400);
}

.home-hero-sub {
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 28px;
}

.home-hero-countdown {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
}

.home-hero-cd-block {
  background: var(--navy-800);
  border: 1px solid var(--navy-600);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  min-width: 64px;
}

.home-hero-cd-num {
  display: block;
  color: var(--gold-400);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.home-hero-cd-label {
  display: block;
  color: var(--ink-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.home-hero-cd-block--done {
  min-width: auto;
  padding: 12px 20px;
}

.home-hero-cd-block--done .home-hero-cd-label {
  color: var(--gold-400);
  font-size: 14px;
  text-transform: none;
}

.home-hero-btn {
  display: inline-block;
  background: var(--gold-500);
  color: var(--navy-900);
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
}

.home-hero-visual {
  height: 300px;
  position: relative;
}

.home-hero-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--navy-600), var(--navy-900) 70%);
  box-shadow: 0 0 0 1px var(--navy-600);
}

.home-hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  opacity: .5;
}

@media (max-width: 768px) {
  .home-hero-in {
    grid-template-columns: 1fr;
    padding: 50px 20px 60px;
  }

  .home-hero-title {
    font-size: 30px;
  }

  .home-hero-countdown {
    flex-wrap: wrap;
  }

  .home-hero-visual {
    display: none;
  }
}