/* =====================================================================
   3 GARRAFAS NEVERÍA — hero.css (v3 corregido)
   - Header EMPUJA la imagen (no la tapa)
   - SIN degradado rosa
   - Sello amarillo dentro del hero, sobresaliendo por debajo
   ===================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 106px); /* llena la pantalla justo debajo del header */
  min-height: 560px;
  overflow: visible; /* para que el sello sobresalga por abajo */
  margin-top: 0;
}

/* Contenedor de slides con overflow hidden para las transiciones */
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* SIN degradado por defecto — foto limpia */
.hero-slide::before {
  display: none;
}

/* Overlay MUY sutil solo en slides light (para asegurar contraste del texto crema) */
.hero-slide[data-theme="light"]::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.06) 40%,
    transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* ═════ Contenido ═════ */
.hero-slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 130px; /* padding-bottom mayor para dar aire al sello */
}
.hero-content {
  max-width: 700px;
}

.hero-title {
  font-family: 'MidcentDisco', 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(48px, 5.5vw, 74px);
  line-height: 0.94;
  letter-spacing: -1.8px;
  margin: 0 0 20px;
}

.hero-spoon {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 0 26px;
  user-select: none;
  pointer-events: none;
}

.hero-sub {
  font-family: 'Grift', 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 380px;
}

/* ═════ Colores por tema ═════ */
.hero-slide[data-theme="dark"] .hero-title,
.hero-slide[data-theme="dark"] .hero-sub { color: #6b4023; }

.hero-slide[data-theme="light"] .hero-title,
.hero-slide[data-theme="light"] .hero-sub {
  color: #fcf1d8;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.hero-slide[data-theme="light"] .hero-spoon {
  filter: brightness(0) invert(1) sepia(0.15) saturate(3) hue-rotate(-15deg);
}

/* ═════ Botón ═════ */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 15px 30px;
  background: #5448dd;
  color: #fcf1d8;
  border: none;
  border-radius: 100px;
  font-family: 'Grift', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease;
  position: relative;
  overflow: hidden;
}
.hero-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 212, 0, 0.35) 50%, transparent 70%);
  transition: left .6s ease;
  pointer-events: none;
}
.hero-btn:hover::before { left: 100%; }
.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(84, 72, 221, 0.6);
}
.hero-btn svg { flex-shrink: 0; }

/* ═════ Animación de entrada ═════ */
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-spoon,
.hero-slide.is-active .hero-sub,
.hero-slide.is-active .hero-btn {
  animation: heroFadeUp .85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-slide.is-active .hero-title { animation-delay: .15s; }
.hero-slide.is-active .hero-spoon { animation-delay: .28s; }
.hero-slide.is-active .hero-sub   { animation-delay: .38s; }
.hero-slide.is-active .hero-btn   { animation-delay: .50s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═════ SELLO CIRCULAR ═════ */
.hero-sello-badge {
  position: absolute;
  left: 6%;
  bottom: -95px; /* la mitad del sello sale por abajo del hero */
  width: 190px;
  height: 190px;
  z-index: 20;
  animation: hero-sello-spin 26s linear infinite;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
@keyframes hero-sello-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sello-badge { animation: none; }
}

/* ═════ Flechas ═════ */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #6b4023;
  border: none;
  cursor: pointer;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, transform .25s ease;
  backdrop-filter: blur(8px);
}
.hero-arrow:hover {
  background: #ffd400;
  transform: translateY(-50%) scale(1.06);
}
.hero-arrow--prev { left: 24px; }
.hero-arrow--next { right: 24px; }

/* ═════ Dots ═════ */
.hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 8;
}
.hero-dot {
  width: 36px;
  height: 4px;
  border: none;
  border-radius: 3px;
  background: rgba(107, 64, 35, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background-color .3s, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-dot.is-active {
  background: #5448dd;
  transform: scaleX(1.4);
}
.hero.is-theme-light .hero-dot { background: rgba(252, 241, 216, 0.4); }
.hero.is-theme-light .hero-dot.is-active { background: #fcf1d8; }

/* ═════ Responsive ═════ */
@media (max-width: 900px) {
  .hero { min-height: 100vh; }
  .hero-slide {
    background-size: cover;
    background-position: center center;
  }
  .hero-slide-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}
@media (max-width: 560px) {
  .hero-title { font-size: clamp(40px, 12vw, 58px); }
  .hero-arrow { display: none; }
  .hero-dots { bottom: 24px; }
  .hero-sello-badge {
    width: 120px;
    height: 120px;
    bottom: -60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active * {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  .hero-btn::before { display: none; }
}