/* ===== HERO ===== */
.hero {
  min-height: 75vh; /* En web mantiene un mínimo excelente */
  position: relative; 
  overflow: hidden;
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 100px 0 60px; /* ¡CLAVE! Da espacio arriba para el navbar y abajo para las stats */
}
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.5s ease-in-out;
}
.hero-slide.active { opacity:1; }
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(13,37,53,0.45) 0%, rgba(13,37,53,0.2) 50%, rgba(13,37,53,0.7) 100%);
}
.hero-content {
  position:relative; z-index:2; text-align:center;
  color:white; padding:0 24px; max-width:800px;
  animation: heroFadeUp 1.2s ease forwards;
}
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:translateY(0); }
}
.hero-badge {
  display:inline-block; background:rgba(255,124,56,0.9);
  backdrop-filter:blur(8px);
  padding:6px 18px; border-radius:50px;
  font-size:0.78rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:20px;
}
.hero-title {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.8rem, 4.5vw, 3.2rem);
  line-height:1.1; margin-bottom:12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-sub {
  font-size: 1.1rem; 
  font-weight: 300; 
  opacity: 0.9;
  margin-bottom: clamp(16px, 3vh, 36px); /* Usa un margen elástico según el alto de la pantalla */
  letter-spacing: 0.5px;
}
.hero-search {
  display: flex; 
  gap: 0; 
  max-width: 560px; 
  margin: 0 auto clamp(20px, 4vh, 40px); /* Ajusta dinámicamente el espacio antes de las stats */
  background: white; 
  border-radius: 60px; 
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.hero-search input {
  flex:1; border:none; outline:none; padding:16px 24px;
  font-size:0.95rem; color:var(--dark); font-family:'Montserrat',sans-serif;
  background:transparent;
}
.hero-search button {
  background: linear-gradient(135deg, var(--sunset), var(--sunset-warm));
  border:none; padding:16px 30px; color:white;
  font-weight:700; font-size:0.9rem; cursor:pointer;
  border-radius:0 60px 60px 0; letter-spacing:0.5px;
  transition:all 0.3s; white-space:nowrap;
}
.hero-search button:hover { filter:brightness(1.1); }
.hero-stats {
  display:flex; gap:32px; justify-content:center; flex-wrap:wrap;
}
.hero-stat {
  text-align:center;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(8px);
  padding:12px 24px; border-radius:16px; border:1px solid rgba(255,255,255,0.2);
}
.hero-stat strong { display:block; font-size:1.6rem; font-family:'Montserrat',sans-serif; }
.hero-stat span { font-size:0.78rem; opacity:0.85; text-transform:uppercase; letter-spacing:1px; }
.hero-dots {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; gap:8px;
}
.hero-dot {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.5);
  cursor:pointer; transition:all 0.3s; border:none;
}
.hero-dot.active { background:white; width:24px; border-radius:4px; }

/* ── FIX CONTROLADO: Mantiene proporciones y buscador visible ── */
@media (max-width: 768px) {
  .hero {
    height: 56vh !important; /* antes 70vh — ocupaba casi toda la pantalla en el primer scroll */
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important; /* Volvemos al centrado clásico */
    justify-content: center !important;
    padding-top: 44px !important;
  }

  .hero-content {
    padding: 0 16px !important;
    display: block !important; /* Quitamos el flex para evitar que rompa componentes dinámicos */
    width: 100% !important;
  }

  /* Reducciones precisas para ahorrar espacio vertical */
  .hero-badge {
    margin-bottom: 8px !important;
    padding: 3px 10px !important;
    font-size: 0.66rem !important;
  }

  .hero-title {
    font-size: 1.32rem !important;
    margin-bottom: 5px !important;
  }

  .hero-sub {
    font-size: 0.8rem !important;
    margin-bottom: 12px !important; /* Espacio recortado */
  }

  /* FIX: esta regla de margin quedaba muerta igual que antes — el override
     real que gana es el de index.css (carga después). Se deja la altura del
     .hero de arriba, que es lo único de este bloque que sí manda porque
     index.css no toca esa propiedad. */
  .hero-search {
    max-width: 100% !important;
  }

  /* FIX limpieza: .hero-stats/.hero-stat de mobile viven en responsive.css
     (un solo lugar) — aquí se duplicaban con valores distintos y quedaban
     muertos porque responsive.css carga después con !important. */
}

@media (max-width: 420px) {
  .hero {
    height: 52vh !important; /* Tu altura original para pantallas pequeñas */
    min-height: 390px !important;
  }

  .hero-title {
    font-size: 1.18rem !important;
  }
}