/* ==========================================================
   SCARBE — Tema Halloween 2026
   Todo va dentro de html.hw: sin esa clase este archivo no cambia nada.
   La clase la pone halloween/tema.js hasta el 1/11/2026 inclusive.
   Paleta tomada de la pieza hw-scarbe-26: noche, naranja calabaza,
   verde luna (solo brillo y detalles) y hueso para el texto.
   ========================================================== */

html.hw {
  --hw-night: #0b0908;
  --hw-night-2: #13100e;
  --hw-night-3: #1b1613;
  --hw-bone: #efe6da;
  --hw-bone-2: #c9bdaf;
  --hw-moon: #8fd27f;
  --hw-moon-glow: rgba(143, 210, 127, .28);
  --hw-ember: #ff8a2a;

  --orange: #ee4a1a;
  --orange-dark: #ff6a33;
  --paper: var(--hw-night-2);
  --line: #2e2521;
  --muted: #a3978b;
  --ink: var(--hw-bone);
  color-scheme: dark;
  background: var(--hw-night);
}
html.hw body { background: var(--hw-night); color: var(--hw-bone); }
html.hw ::selection { background: var(--orange); color: var(--hw-night); }

/* ---------- Header ---------- */
html.hw .header { background: rgba(11, 9, 8, .82); }
html.hw .header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html.hw .cart-btn, html.hw .search-toggle, html.hw .search__btn { color: var(--hw-bone); }
html.hw .burger span { background: var(--hw-bone); }
html.hw .search input { background: var(--hw-night-3); border-color: var(--line); color: var(--hw-bone); }
html.hw .search input:focus { border-color: var(--orange); }
html.hw .search input::placeholder { color: #7d7268; }
@media (max-width: 960px) {
  html.hw .nav, html.hw .search { background: var(--hw-night-2); border-bottom-color: var(--orange); }
}

/* ---------- Botones ---------- */
html.hw .btn--primary { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .btn--primary:hover { background: var(--hw-bone); border-color: var(--hw-bone); color: var(--hw-night); }
html.hw .btn--ghost { color: var(--hw-bone); border-color: var(--hw-bone); }
html.hw .btn--ghost:hover { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .btn--light { background: var(--hw-bone); border-color: var(--hw-bone); color: var(--hw-night); }
html.hw .insta .btn--primary { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .insta .btn--primary:hover { background: var(--hw-bone); border-color: var(--hw-bone); }
@media (hover: none) {
  html.hw .btn--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
  html.hw .btn--ghost:hover { background: transparent; border-color: var(--hw-bone); color: var(--hw-bone); }
  html.hw .filter:hover:not(.is-active) { background: transparent; border-color: var(--line); }
  html.hw .insta .btn--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
}

/* ---------- Hero ---------- */
html.hw .hero {
  background:
    radial-gradient(50% 60% at 0% 100%, rgba(238, 74, 26, .10), transparent 70%),
    #000;
  padding-bottom: 110px;
}
html.hw .hero::before { display: none; }
html.hw .hero .eyebrow { color: var(--hw-bone-2); }
html.hw .hero__lead { color: var(--hw-bone-2); }
html.hw .hero__title { color: var(--hw-bone); }
html.hw .hero__title .accent { color: var(--orange); animation: hwFlicker 7s infinite; }
html.hw .hero__scroll { color: var(--hw-bone-2); z-index: 3; bottom: 54px; }
html.hw #heroVisual { display: none; }
html.hw .hero__grid { z-index: 2; grid-template-columns: 1fr 1fr; }

html.hw .hw-art { position: relative; margin: 0; display: grid; place-items: center; animation: hwRise 1.1s cubic-bezier(.2, .7, .2, 1) both .15s; }
html.hw .hw-art picture { position: relative; z-index: 1; display: block; width: min(640px, 100%); }
html.hw .hw-art img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, transparent 100%);
  filter: saturate(1.05) contrast(1.04);
}
html.hw .hw-art__moon {
  position: absolute; z-index: 0; right: 8%; top: 4%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--hw-moon-glow), transparent 68%);
  filter: blur(18px);
  animation: hwGlow 5s ease-in-out infinite;
}
html.hw .hw-art__tag {
  position: absolute; z-index: 2; left: 6%; top: 10%;
  padding: 7px 12px 6px;
  background: var(--hw-night); color: var(--hw-moon);
  border: 1px solid rgba(143, 210, 127, .45);
  font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 0 0 22px rgba(143, 210, 127, .18);
}

/* Murciélagos */
html.hw .hw-bats { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
html.hw .hw-bat { position: absolute; left: 0; top: 0; width: 46px; color: #000; opacity: .9; will-change: transform; }
html.hw .hw-bat svg { display: block; width: 100%; fill: #0b0908; stroke: var(--orange); stroke-width: 1.1; stroke-linejoin: round; overflow: visible; filter: drop-shadow(0 0 6px rgba(238, 74, 26, .35)); }
html.hw .hw-wing { transform-box: fill-box; animation: hwFlap .32s ease-in-out infinite alternate; }
html.hw .hw-wing--l { transform-origin: 100% 40%; }
html.hw .hw-wing--r { transform-origin: 0% 40%; }
html.hw .hw-bat--1 { animation: hwFly1 17s linear infinite; }
html.hw .hw-bat--2 { width: 30px; animation: hwFly2 23s linear infinite -6s; }
html.hw .hw-bat--3 { width: 58px; animation: hwFly3 19s linear infinite -11s; }
html.hw .hw-bat--4 { width: 24px; opacity: .6; animation: hwFly1 27s linear infinite -14s; }
html.hw .hw-bat--5 { width: 36px; animation: hwFly2 21s linear infinite -2s; }
html.hw .hw-bat--6 { width: 20px; opacity: .5; animation: hwFly3 31s linear infinite -20s; }
html.hw .hw-bat--7 { width: 40px; animation: hwFly1 25s linear infinite -9s; }
html.hw .hw-bat--2 .hw-wing, html.hw .hw-bat--6 .hw-wing { animation-duration: .26s; }
html.hw .hw-bat--3 .hw-wing { animation-duration: .4s; }

/* Arañas */
html.hw .hw-spider { position: absolute; z-index: 3; top: 0; left: 6%; width: 34px; color: #0a0807; pointer-events: none; transform-origin: 50% 0; animation: hwDangle 9s cubic-bezier(.45, 0, .55, 1) infinite; }
html.hw .hw-spider svg { display: block; width: 100%; color: var(--orange); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
html.hw .hw-spider__thread { display: block; width: 1px; height: 120px; margin: 0 auto; background: linear-gradient(rgba(239, 230, 218, 0), rgba(239, 230, 218, .55)); }
html.hw .hw-spider--cat { left: auto; right: 7%; width: 26px; animation-duration: 12s; animation-delay: -4s; }
html.hw .hw-spider--cat .hw-spider__thread { height: 70px; }

/* Niebla */
html.hw .hw-fog { position: absolute; left: 0; right: 0; bottom: 30px; height: 220px; z-index: 1; pointer-events: none; overflow: hidden; }
html.hw .hw-fog span {
  position: absolute; bottom: 0; left: -50%; width: 200%; height: 100%;
  background:
    radial-gradient(30% 60% at 20% 80%, rgba(143, 210, 127, .08), transparent 70%),
    radial-gradient(25% 50% at 55% 90%, rgba(239, 230, 218, .07), transparent 70%),
    radial-gradient(30% 55% at 85% 85%, rgba(143, 210, 127, .06), transparent 70%);
  filter: blur(8px);
  animation: hwFog 38s linear infinite;
}
html.hw .hw-fog span + span { animation-duration: 56s; animation-direction: reverse; opacity: .8; bottom: -30px; }

/* ---------- Todos nuestros productos ---------- */
html.hw .allprod__link { position: relative; overflow: hidden; background: var(--hw-night-2); border-color: var(--line); }
html.hw .allprod__link:hover { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 20px 60px rgba(238, 74, 26, .16); }
html.hw .allprod__tee { background: var(--hw-night-3); }
html.hw .allprod__tee:has(.photo) { background: #fff; }

/* ---------- Nosotros ---------- */
html.hw .about__media { background: var(--hw-night-2); overflow: hidden; }
html.hw .about__media::after { border-color: var(--orange); }
html.hw .about__text p { color: var(--hw-bone-2); }
html.hw .values, html.hw .values li { border-color: var(--line); }

/* Telarañas */
html.hw .hw-web { position: absolute; z-index: 1; width: 120px; color: rgba(239, 230, 218, .22); pointer-events: none; }
html.hw .hw-web svg { display: block; width: 100%; }
html.hw .hw-web--tl { top: 0; left: 0; }
html.hw .hw-web--tr { top: 0; right: 0; transform: scaleX(-1); width: 140px; }
html.hw .hw-web--faq { top: 0; right: 0; transform: scaleX(-1); width: 160px; color: rgba(239, 230, 218, .12); }
html.hw .faq { position: relative; }

/* ---------- Catálogo ---------- */
html.hw .catalog { position: relative; background: var(--hw-night); border-top-color: var(--line); }
html.hw .filter { background: transparent; color: var(--hw-bone); border-color: var(--line); }
html.hw .filter:hover { background: transparent; border-color: var(--orange); color: var(--orange); }
html.hw .filter.is-active { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .card__media { box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s var(--ease); }
@media (hover: hover) {
  html.hw .card:hover .card__media { box-shadow: 0 0 0 1px var(--orange), 0 18px 50px rgba(238, 74, 26, .22); }
}
html.hw .card__flip { background: var(--hw-night-2); border-color: var(--line); }
html.hw .card__flip button.is-on { background: var(--orange); color: var(--hw-night); }
html.hw .card__price--sale { color: var(--orange-dark); }
html.hw .card__until { background: var(--hw-night); }
html.hw .size { background: transparent; color: var(--hw-bone); border-color: var(--line); }
html.hw .size.is-selected { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .size:disabled { background: var(--hw-night-3); color: #5c534c; }
html.hw .card__wa { color: var(--hw-bone); }
html.hw .sale-note { background: var(--hw-night-3); }

/* ---------- Personalizada ---------- */
html.hw .custom { background: var(--hw-night-2); border-top-color: var(--line); }
html.hw .custom__intro > p, html.hw .custom__ideas ul, html.hw .check { color: var(--hw-bone-2); }
html.hw .custom__preview { background: #f4efe8; border-color: var(--orange); }
html.hw .custom__preview figcaption { color: #6b6158; }
html.hw .custom__form { background: var(--hw-night); border-color: var(--line); }
html.hw .form input, html.hw .form textarea, html.hw .modal input,
html.hw .ship__field input, html.hw .ship__field select {
  background: var(--hw-night-3); border-color: var(--line); color: var(--hw-bone);
}
html.hw .form input:focus, html.hw .form textarea:focus, html.hw .modal input:focus,
html.hw .ship__field input:focus, html.hw .ship__field select:focus { border-color: var(--orange); }
html.hw .chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--hw-night); }
html.hw .opt__card input:checked + span,
html.hw .ship__opt input:checked + span { background: var(--hw-night-3); border-color: var(--orange); }
html.hw .opt__hint { background: var(--hw-night-3); }
html.hw .check input { accent-color: var(--orange); }
html.hw .custom__total { border-top-color: var(--orange); }

/* ---------- Instagram ---------- */
html.hw .insta { background: #050404; }
html.hw .insta__tile { background: var(--hw-night-3); }

/* ---------- FAQ ---------- */
html.hw .faq { background: var(--hw-night-2); }
html.hw .faq__item { border-top-color: var(--line); }
html.hw .faq__item:last-child { border-bottom-color: var(--line); }
html.hw .faq__body { color: var(--hw-bone-2); }
html.hw .size-table { background: var(--hw-night); }
html.hw .size-table th, html.hw .size-table td { border-color: var(--line); }
html.hw .size-table thead th { background: var(--orange); color: var(--hw-night); }

/* ---------- Pie ---------- */
html.hw .footer { position: relative; background: #050404; border-top: 1px solid var(--line); }
html.hw .footer__bottom { border-top-color: var(--line); }

/* ---------- Carrito, modal y avisos ---------- */
html.hw .cart, html.hw .cart__foot { background: var(--hw-night-2); }
html.hw .cart__head { border-bottom-color: var(--orange); }
html.hw .icon-btn { color: var(--hw-bone); }
html.hw .icon-btn:hover { color: var(--hw-night); }
html.hw .ci, html.hw .cart__foot { border-color: var(--line); }
html.hw .ci__img { background: var(--hw-night-3); }
html.hw .qty { border-color: var(--line); }
html.hw .qty button { color: var(--hw-bone); }
html.hw .ship__zones { background: var(--hw-night-3); }
html.hw .ship__zone > span { background: var(--hw-night-2); }
html.hw .ship__zone input:checked + span { border-color: var(--orange); }
html.hw .ship__locate { color: var(--hw-bone); }
html.hw .modal { background: var(--hw-night-2); color: var(--hw-bone); }
html.hw .modal__inner p { color: var(--hw-bone-2); }
html.hw .toast { background: var(--hw-night-3); color: var(--hw-bone); }
html.hw .overlay { background: rgba(0, 0, 0, .7); }

/* ---------- Animaciones ---------- */
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
@keyframes hwFly1 {
  0%   { transform: translate(-10vw, 62vh) rotate(-8deg); }
  25%  { transform: translate(25vw, 30vh) rotate(6deg); }
  50%  { transform: translate(55vw, 44vh) rotate(-4deg); }
  75%  { transform: translate(80vw, 16vh) rotate(8deg); }
  100% { transform: translate(110vw, 8vh) rotate(0deg); }
}
@keyframes hwFly2 {
  0%   { transform: translate(110vw, 22vh) scaleX(-1); }
  30%  { transform: translate(72vw, 40vh) scaleX(-1); }
  60%  { transform: translate(38vw, 14vh) scaleX(-1); }
  100% { transform: translate(-10vw, 34vh) scaleX(-1); }
}
@keyframes hwFly3 {
  0%   { transform: translate(-12vw, 18vh) rotate(4deg); }
  40%  { transform: translate(40vw, 6vh) rotate(-6deg); }
  70%  { transform: translate(66vw, 28vh) rotate(5deg); }
  100% { transform: translate(112vw, 12vh) rotate(-3deg); }
}
@keyframes hwDangle {
  0%, 100% { transform: translateY(-40px) rotate(0deg); }
  30%      { transform: translateY(70px) rotate(3deg); }
  55%      { transform: translateY(40px) rotate(-3deg); }
  75%      { transform: translateY(90px) rotate(2deg); }
}
@keyframes hwGlow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes hwFog { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes hwRise { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes hwFlicker {
  0%, 18%, 22%, 62%, 64%, 100% { text-shadow: 0 0 18px rgba(238, 74, 26, .45); opacity: 1; }
  20%, 63% { text-shadow: none; opacity: .72; }
}

/* ---------- Celulares ---------- */
@media (max-width: 960px) {
  html.hw .hero { padding-bottom: 96px; }
  html.hw .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  html.hw .hw-art { order: -1; margin-top: -8px; }
  html.hw .hw-art picture { width: min(520px, 100%); }
  html.hw .hero .hw-spider { left: 4%; width: 26px; }
  html.hw .hw-spider__thread { height: 70px; }
  html.hw .hw-bat { width: 32px; }
  html.hw .hw-bat--3 { width: 40px; }
  html.hw .hw-web--tr { width: 96px; }
  html.hw .hw-web--faq { width: 110px; }
  html.hw .hero__scroll { display: none; }
}
@media (max-width: 560px) {
  html.hw .hw-art__tag { font-size: .62rem; top: 8%; }
  html.hw .hero .hw-spider { display: none; }
}

/* Las animaciones de Halloween se mantienen aunque el sistema pida reducir movimiento
   (pedido expreso del cliente). Se repiten con !important porque style.css las apaga. */
@media (prefers-reduced-motion: reduce) {
  html.hw .hw-wing { animation: hwFlap .32s ease-in-out infinite alternate !important; }
  html.hw .hw-bat--1, html.hw .hw-bat--4, html.hw .hw-bat--7 { animation: hwFly1 21s linear infinite !important; }
  html.hw .hw-bat--2, html.hw .hw-bat--5 { animation: hwFly2 23s linear infinite -6s !important; }
  html.hw .hw-bat--3, html.hw .hw-bat--6 { animation: hwFly3 19s linear infinite -11s !important; }
  html.hw .hw-spider { animation: hwDangle 9s cubic-bezier(.45, 0, .55, 1) infinite !important; }
  html.hw .hw-art__moon { animation: hwGlow 5s ease-in-out infinite !important; }
  html.hw .hw-fog span { animation: hwFog 38s linear infinite !important; }
  html.hw .hw-art { animation: hwRise 1.1s cubic-bezier(.2, .7, .2, 1) both .15s !important; }
  html.hw .hero__title .accent { animation: hwFlicker 7s infinite !important; }
  html.hw .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease) !important; }
  html.hw .reveal.is-visible { opacity: 1; transform: none; }
  html.hw .card__media { transition: box-shadow .4s var(--ease) !important; }
}