/* ==========================================================================
   VELLA PERFUMERÍA — HERO BANNER RESPONSIVE UX/UI PARA PÁGINA DE INICIO
   --------------------------------------------------------------------------
   Diseñado específicamente para:
   ✓ En escritorio NO se ve excesivamente grande (altura máxima controlada ~490px-510px)
   ✓ En móvil tiene proporciones perfectas (~390px) con botones y textos legibles
   ✓ Aspecto de boutique de lujo sueca con tarjetas estilizadas y contraste óptimo
   ========================================================================== */

:root {
  --vella-hero-h-mobile: 390px;
  --vella-hero-h-tablet: 440px;
  --vella-hero-h-desktop: 490px;
  --vella-hero-h-xl: 510px;
  
  --vella-hero-gold: #caa34d;
  --vella-hero-gold-glow: rgba(202, 163, 77, 0.25);
  --vella-hero-pink: #ec4899;
  --vella-hero-dark-bg: #09090b;
}

/* 1. CONTENEDOR HERO MAESTRO */
.vella-home-hero {
  position: relative !important;
  width: 100% !important;
  height: var(--vella-hero-h-mobile) !important;
  min-height: var(--vella-hero-h-mobile) !important;
  max-height: 520px !important;
  overflow: hidden !important;
  background-color: var(--vella-hero-dark-bg) !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .vella-home-hero {
    height: var(--vella-hero-h-tablet) !important;
    min-height: var(--vella-hero-h-tablet) !important;
  }
}

@media (min-width: 1024px) {
  .vella-home-hero {
    height: var(--vella-hero-h-desktop) !important;
    min-height: var(--vella-hero-h-desktop) !important;
  }
}

@media (min-width: 1280px) {
  .vella-home-hero {
    height: var(--vella-hero-h-xl) !important;
    min-height: var(--vella-hero-h-xl) !important;
  }
}

/* 2. CAPA DE FONDO E IMÁGENES */
.vella-hero-slide-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vella-hero-overlay-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.88) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

@media (min-width: 768px) {
  .vella-hero-overlay-gradient {
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.1) 100%) !important;
  }
}

/* 3. PRODUCTO FLOTANTE A LA DERECHA (DESKTOP) */
.vella-hero-product-right {
  position: absolute !important;
  right: clamp(16px, 6vw, 100px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(160px, 22vw, 290px) !important;
  height: clamp(160px, 22vw, 290px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.vella-hero-product-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.75)) !important;
}

/* 4. CONTENIDO / TARJETA FLOTANTE UX */
.vella-hero-content-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  z-index: 5 !important;
  padding: 0 clamp(16px, 4vw, 48px) clamp(20px, 3.5vh, 36px) !important;
  box-sizing: border-box !important;
}

.vella-hero-card {
  width: 100% !important;
  max-width: clamp(290px, 85vw, 420px) !important;
  background: rgba(12, 12, 15, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  padding: clamp(14px, 2.5vw, 22px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
}

.vella-hero-kicker {
  font-size: clamp(9px, 1.2vw, 11px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #ea9ec3 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.vella-hero-title {
  font-size: clamp(18px, 3.2vw, 28px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px 0 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

.vella-hero-desc {
  font-size: clamp(10px, 1.4vw, 12px) !important;
  font-weight: 500 !important;
  color: #d4d4d8 !important;
  line-height: 1.45 !important;
  margin: 0 0 14px 0 !important;
  max-width: 360px !important;
}

/* 5. BOTÓN PRINCIPAL DE ACCIÓN */
.vella-hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #caa34d !important;
  color: #000000 !important;
  font-size: clamp(10px, 1.3vw, 11.5px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: clamp(9px, 1.8vw, 11px) clamp(18px, 3vw, 26px) !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(202, 163, 77, 0.4) !important;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease !important;
}

.vella-hero-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: #dbb359 !important;
  filter: brightness(1.05) !important;
}

.vella-hero-cta:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 6. CONTROLES: FLECHAS Y PUNTOS INDICADORES */
.vella-hero-nav-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vella-hero-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: #caa34d !important;
  color: #caa34d !important;
  transform: scale(1.08) !important;
}

.vella-hero-dot {
  height: 4px !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.vella-hero-dot.active {
  width: 24px !important;
  background: #caa34d !important;
}

.vella-hero-dot.inactive {
  width: 8px !important;
  background: rgba(255, 255, 255, 0.35) !important;
}