/*
 * hero.css — Slider hero full-viewport + ticker
 * ════════════════════════════════════════════════════════════════
 */

/* ── Hero container ────────────────────────────────────────────────────────── */
.hero {
  position:   relative;
  min-height: 100vh;
  display:    flex;
  align-items: flex-end;
  overflow:   hidden;
  background: var(--black);
}

/* ── Slider ────────────────────────────────────────────────────────────────── */
.hero-slider {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hero-slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  object-position: center 30%;
  animation:     slideZoom 9s ease-in-out infinite alternate;
}

@keyframes slideZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* ── Overlays del slide ────────────────────────────────────────────────────── */
.hero-slide-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.9)  0%,
    rgba(10, 10, 10, 0.45) 55%,
    rgba(10, 10, 10, 0.72) 100%
  );
}

.hero-grid-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background-image:
    linear-gradient(rgba(245, 196, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 196, 0, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-accent {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(135deg, transparent 60%, rgba(245, 196, 0, 0.05) 100%);
}

/* ── Barra de progreso ─────────────────────────────────────────────────────── */
.slider-progress {
  position:   absolute;
  top:        0;
  left:       0;
  height:     3px;
  background: var(--yellow);
  z-index:    10;
  width:      0%;
  transition: none; /* Animado por JS con requestAnimationFrame */
}

/* ── Dots de navegación ────────────────────────────────────────────────────── */
.slider-dots {
  position: absolute;
  bottom:   32px;
  right:    32px;
  z-index:  10;
  display:  flex;
  gap:      8px;
  align-items: center;
}

.slider-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   rgba(255, 255, 255, 0.3);
  border:       none;
  cursor:       pointer;
  transition:   all 0.3s ease;
  padding:      0;
}

.slider-dot.active,
.slider-dot[aria-selected="true"] {
  background:    var(--yellow);
  width:         28px;
  border-radius: 4px;
}

/* ── Caption del slide ─────────────────────────────────────────────────────── */
.slide-caption-wrap {
  position:   absolute;
  bottom:     80px;
  right:      32px;
  z-index:    10;
  text-align: right;
}

.active-caption {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(248, 248, 245, 0.5);
}

/* ── Contenido del hero ────────────────────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index:  2;
  padding:  120px 0 90px;
  width:    100%;
}

.hero-eyebrow {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin-bottom: 28px;
  animation:   fadeUp 0.8s 0.2s both;
}

.hero-badge {
  background:     var(--yellow);
  color:          var(--black);
  font-family:    var(--font-head);
  font-weight:    900;
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding:        5px 12px;
}

.hero-location {
  font-family:    var(--font-head);
  font-size:      13px;
  letter-spacing: 0.15em;
  color:          rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ── Títulos del hero ──────────────────────────────────────────────────────── */
.hero-title {
  font-family: var(--font-display);
  font-size:   clamp(72px, 12vw, 160px);
  line-height: 0.88;
  color:       var(--white);
  margin-bottom: 8px;
  animation:   fadeUp 0.8s 0.4s both;
}

.hero-title .accent {
  color: var(--yellow);
}

.hero-title-line2 {
  font-family:   var(--font-display);
  font-size:     clamp(48px, 8vw, 100px);
  line-height:   0.9;
  color:         transparent;
  -webkit-text-stroke: 1.5px rgba(245, 196, 0, 0.45);
  margin-bottom: 40px;
  animation:     fadeUp 0.8s 0.5s both;
}

.hero-desc {
  max-width:   520px;
  font-size:   16px;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  margin-bottom: 40px;
  animation:   fadeUp 0.8s 0.6s both;
}

.hero-actions {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
  animation: fadeUp 0.8s 0.7s both;
}

/* ── Stats flotantes (derecha) ─────────────────────────────────────────────── */
.hero-stats {
  position:       absolute;
  right:          0;
  bottom:         90px;
  display:        flex;
  flex-direction: column;
  gap:            1px;
  animation:      fadeLeft 0.8s 0.9s both;
}

.hero-stat {
  background:   rgba(10, 10, 10, 0.88);
  border-left:  3px solid var(--yellow);
  padding:      16px 24px;
  text-align:   right;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size:   42px;
  color:       var(--yellow);
  line-height: 1;
}

.hero-stat-label {
  font-family:    var(--font-head);
  font-size:      11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.55);
}

/* ── Scroll indicator ──────────────────────────────────────────────────────── */
.hero-scroll {
  position:       absolute;
  bottom:         28px;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  animation:      bounce 2s infinite;
}

.hero-scroll span {
  font-family:    var(--font-head);
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
}

.hero-scroll-line {
  width:      1px;
  height:     44px;
  background: linear-gradient(to bottom, var(--yellow), transparent);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Ticker ────────────────────────────────────────────────────────────────── */
.ticker {
  background:  var(--yellow);
  color:       var(--black);
  padding:     11px 0;
  overflow:    hidden;
  white-space: nowrap;
}

.ticker-track {
  display:   inline-flex;
  animation: ticker 32s linear infinite;
}

.ticker-item {
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0 44px;
}

.ticker-item::before {
  content: '★  ';
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pausar animación si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .hero-slide img   { animation: none; }
  .ticker-track     { animation: none; }
  .hero-scroll      { animation: none; }
  .hero-eyebrow,
  .hero-title,
  .hero-title-line2,
  .hero-desc,
  .hero-actions,
  .hero-stats       { animation: none; opacity: 1; transform: none; }
}