/* ==========================================================
   GUSTÓ — TEMA HALLOWEEN (temporal)
   Para volver al diseño normal: quitar las líneas de
   halloween.css y halloween.js en index.html.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
  --hw-night: #0E0914;
  --hw-surface: #1A1122;
  --hw-surface-2: #241830;
  --hw-border: #3D2850;
  --hw-pumpkin: #FF7518;
  --hw-pumpkin-dark: #D95F0E;
  --hw-purple: #8B3FD9;
  --hw-bone: #F4E9DC;
  --hw-slime: #7CE84A;

  /* Remapeo de la paleta base */
  --red: var(--hw-pumpkin);
  --cream: var(--hw-surface-2);
  --cream-dark: var(--hw-border);
  --white: var(--hw-surface);
  --black: var(--hw-bone);
  --gray: #B7A6C4;
  --gray-light: #8A7A99;

  --shadow: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 48px rgba(139,63,217,0.25);
}

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(139,63,217,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,117,24,0.10), transparent 50%),
    var(--hw-night);
  background-attachment: fixed;
}

/* Secciones: alternan noche / violeta oscuro */
.process, .products, .faq { background: var(--hw-night); }
.packs, .ingredients, .gallery { background: var(--hw-surface); }

/* Títulos con tipografía de terror y brillo de calabaza */
.section-title {
  font-family: 'Creepster', var(--font-impact);
  font-weight: 400;
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255,117,24,0.45), 0 2px 0 #000;
}
.section-title::after {
  content: '🦇';
  display: inline-block;
  font-size: 0.55em;
  margin-left: 0.4em;
  vertical-align: super;
  animation: hw-flap 1.6s ease-in-out infinite;
}

/* HERO: velo nocturno + luna + cinta */
.hero { position: relative; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(255,214,140,0.55) 0 4%, rgba(255,160,60,0.18) 7%, transparent 14%),
    linear-gradient(180deg, rgba(40,10,60,0.35) 0%, rgba(14,9,20,0.15) 45%, rgba(14,9,20,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 30vh;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(200,190,230,0.22), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(200,190,230,0.18), transparent 55%);
  filter: blur(8px);
  animation: hw-fog 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}
.hw-ribbon {
  position: absolute;
  top: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: var(--hw-night);
  color: var(--hw-pumpkin);
  border: 2px solid var(--hw-pumpkin);
  border-radius: 50px;
  padding: 0.45rem 1.2rem;
  font-family: 'Creepster', var(--font-impact);
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: 2px;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(255,117,24,0.45);
  animation: hw-glow 2.4s ease-in-out infinite;
}

/* Tarjetas */
.product-card {
  border-color: var(--hw-border);
  box-shadow: 0 0 0 rgba(255,117,24,0);
}
.product-card:hover {
  border-color: var(--hw-pumpkin);
  box-shadow: 0 0 28px rgba(255,117,24,0.25), 0 12px 40px rgba(139,63,217,0.25);
}
.product-card__name { font-family: 'Creepster', var(--font-impact); font-weight: 400; letter-spacing: 1.5px; }
.product-card__price-discount { color: var(--hw-slime); }
.product-card__badge.badge--premium { color: var(--hw-night); }

/* Botones sobre calabaza: texto oscuro para contraste */
.option-btn.active, .option-toggle.active, .qty-btn:hover,
.process__number, .order-summary__discount, .order-modal__discount-badge,
.pack-freq.active, .packs__tab.active, .packs__step-num, .packs__soon-badge,
.packs__shuffle:hover, .option-toggle::after {
  color: var(--hw-night);
}
.process__number {
  box-shadow: 0 0 16px rgba(255,117,24,0.55);
}
.process__step:hover { box-shadow: 0 0 24px rgba(139,63,217,0.35); }

/* Barra de pedido y footer: noche profunda */
.order-summary__inner {
  background: var(--hw-night);
  box-shadow: 0 0 30px rgba(255,117,24,0.35);
}
.order-summary__details { color: var(--hw-bone); }
.order-summary__total strong { color: var(--hw-pumpkin); }
.packs__footer { background: var(--hw-night); color: var(--hw-bone); }
.packs__total-price { color: var(--hw-pumpkin); }
.packs__mix-item.has-qty { background: rgba(255,117,24,0.10); }
.packs__mix-status.is-ok { color: var(--hw-slime); }
.packs__mix-item .qty-btn:disabled { color: var(--hw-bone); }

.footer {
  background: #07040A;
  border-top: 2px solid var(--hw-pumpkin);
}
.footer__social a:hover { color: var(--hw-pumpkin); }

.ingredients__label { color: var(--hw-bone); }
.ingredients__item, .gallery__item { border-color: var(--hw-border); }
.ingredients__item:hover, .gallery__item:hover { border-color: var(--hw-pumpkin); }

/* CTA final: degradado calabaza→violeta */
.cta {
  background: linear-gradient(135deg, var(--hw-pumpkin-dark) 0%, #7A2E9E 100%);
  position: relative;
  overflow: hidden;
}
.cta__title {
  color: var(--hw-bone);
  font-family: 'Creepster', var(--font-impact);
  font-weight: 400;
  letter-spacing: 3px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
.cta__text { color: rgba(244,233,220,0.9); }
.cta__btn { background: var(--hw-night); color: var(--hw-pumpkin); }

/* Navegación inferior */
.section-nav {
  background: rgba(14, 9, 20, 0.95);
  box-shadow: 0 0 20px rgba(139,63,217,0.35);
}
.section-nav__item.active { color: var(--hw-pumpkin); background: rgba(255,117,24,0.12); }
.section-nav__item--cta { color: var(--hw-night) !important; }
.section-nav__item--cta:hover { background: var(--hw-pumpkin-dark) !important; }

/* Modal */
.order-modal { border: 2px solid var(--hw-border); }
.order-modal__overlay { background: rgba(7,4,10,0.75); }

/* Telarañas en las esquinas de las secciones claras */
.process, .products, .packs, .faq { position: relative; }
.process::before, .faq::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 140px; height: 140px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23B7A6C4' stroke-width='0.7' opacity='0.45'%3E%3Cpath d='M0 0L100 100M0 0L100 40M0 0L40 100M0 0L100 0M0 0L0 100'/%3E%3Cpath d='M20 0Q14 8 20 20Q8 14 0 20'/%3E%3Cpath d='M42 0Q30 18 40 40Q18 30 0 42'/%3E%3Cpath d='M66 0Q48 28 62 62Q28 48 0 66'/%3E%3Cpath d='M92 0Q68 38 85 85Q38 68 0 92'/%3E%3C/svg%3E") no-repeat;
  pointer-events: none;
}
.faq::before { left: auto; right: 0; transform: scaleX(-1); }

/* Murciélagos flotantes (los genera halloween.js) */
.hw-bats { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.hw-bat {
  position: absolute;
  font-size: 22px;
  opacity: 0.75;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
  animation: hw-fly linear infinite;
}

@keyframes hw-flap {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-4px) scaleX(0.8); }
}
@keyframes hw-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(255,117,24,0.35); }
  50% { box-shadow: 0 0 30px rgba(255,117,24,0.7); }
}
@keyframes hw-fog {
  from { transform: translateX(-4%); opacity: 0.8; }
  to { transform: translateX(4%); opacity: 1; }
}
@keyframes hw-fly {
  0% { transform: translate(-10vw, 0) rotate(-8deg); }
  25% { transform: translate(25vw, -6vh) rotate(6deg); }
  50% { transform: translate(55vw, 4vh) rotate(-6deg); }
  75% { transform: translate(85vw, -4vh) rotate(8deg); }
  100% { transform: translate(115vw, 2vh) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bats { display: none; }
  .section-title::after, .hw-ribbon, .hero::after { animation: none; }
}
@media (max-width: 540px) {
  .process::before, .faq::before { width: 90px; height: 90px; }
  .hw-bat { font-size: 18px; }
}