/* Hero crítico - Dimensiones fijas para evitar CLS */
/* --- Hero Section General --- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  min-height: 70vh;
  aspect-ratio: 16/9;
  contain: layout style paint;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.hero-container {
  width: 100%;
  max-width: 1200px;
  padding: 2rem 1rem;
  margin: 0 auto;
  contain: layout;
}

.hero-content h1,
.hero-title-mobile {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 1rem 0;
  line-height: 1.3;
  height: auto;
  min-height: 3.25rem;
  contain: layout;
}

/* Responsive hero sin layout shift */
@media (max-width: 768px) {
  .hero-content h1,
  .hero-title-mobile {
    font-size: 1.8rem;
    min-height: 2.34rem;
  }

  /* Evitar estiramiento en móviles: sin aspect-ratio y con altura basada en viewport
     Dejar espacio para el header fijo (~80px) */
  .hero {
    aspect-ratio: auto;
    min-height: calc(100vh - 80px);
    padding: 80px 16px 24px;
  }

  .hero-container {
    padding: 0 12px;
  }
}

/* Desktop: acercar el H1 al menú y reducir altura del hero */
@media (min-width: 1024px) {
  .hero {
    justify-content: flex-start;   /* colocar contenido arriba */
    padding-top: 80px;             /* espacio para header fijo (reducido) */
    min-height: 55vh;              /* un poco menos de altura */
    aspect-ratio: auto;            /* evitar forzar 16/9 en desktop */
  }
  .hero-container {
    padding-top: 0;
  }
}

/* Hero subtitle y animaciones */
.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    margin-bottom: var(--space-12);
    opacity: 0.9;
    animation: slideUp 1s ease-out 0.2s both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search card responsive optimizado */
.search-card {
    background: white;
    border-radius: clamp(12px, 3vw, 20px);
    padding: clamp(15px, 4vw, 28px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: min(95vw, 1100px);
    margin: 0 auto;
    width: 100%;
}

.popular-tags {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    animation: slideUp 1s ease-out 0.6s both;
}

.tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tag:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* === Hero background responsive (alineado con preloads) === */
#hero {
  background: url('https://cdn.publikaya.com/assets/fondos/fondo1.webp?v=2024') center/cover no-repeat;
}

@media (max-width: 767px) {
  #hero {
    background: url('https://cdn.publikaya.com/assets/fondos/fondo1-mobile.webp?v=2024') center/cover no-repeat;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #hero {
    background: url('https://cdn.publikaya.com/assets/fondos/fondo1-tablet.webp?v=2024') center/cover no-repeat;
  }
}