/* ===== CAFÉ DE MUESTRA ===== */

/* ===== VISIBILIDAD DEL MODO ===== */

.halloween-only {
  display: none;
}

body.halloween-active .halloween-only {
  display: block;
}

/* ===== CONTROL DE HALLOWEEN ===== */

.halloween-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
}

.halloween-toggle__icon {
  color: #92400e;
}

.halloween-toggle.is-active .halloween-toggle__icon {
  color: var(--color-brand);
}

.halloween-toggle__state {
  color: var(--color-espresso);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ===== GENERAL ===== */

.halloween-decoration {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.halloween-spark {
  color: #f59e0b;
  font-size: 0.65rem;
  animation: halloween-spark-pulse 1.8s ease-in-out infinite;
}

@keyframes halloween-spark-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* ===== LUCIÉRNAGAS ===== */

.fireflies {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.55;
  animation: firefly-float 6s ease-in-out infinite;
}

.firefly--1 {
  top: 14%;
  left: 8%;
  background: #fcd34d;
  box-shadow: 0 0 6px #f59e0b;
  animation-delay: 1.2s;
}

.firefly--2 {
  top: 28%;
  right: 10%;
  width: 8px;
  height: 8px;
  background: #fef9c3;
  box-shadow: 0 0 8px #fef08a;
  animation-delay: 3.5s;
}

.firefly--3 {
  top: 44%;
  left: 12%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
  animation-delay: 5.1s;
}

.firefly--4 {
  top: 62%;
  right: 14%;
  background: #fde047;
  box-shadow: 0 0 6px #fde047;
  animation-delay: 2.8s;
}

.firefly--5 {
  top: 80%;
  left: 16%;
  width: 8px;
  height: 8px;
  background: #fef3c7;
  box-shadow: 0 0 8px #fef08a;
  animation-delay: 4.2s;
}

.firefly--6 {
  top: 94%;
  right: 18%;
  background: #fef9c3;
  box-shadow: 0 0 6px #fde047;
  animation-delay: 6.3s;
}

@keyframes firefly-float {
  0%,
  100% {
    opacity: 0.25;
    transform: translate3d(0, 0, 0) scale(0.9);
  }

  35% {
    opacity: 0.75;
    transform: translate3d(4px, -8px, 0) scale(1.15);
  }

  70% {
    opacity: 0.45;
    transform: translate3d(-5px, -2px, 0) scale(0.95);
  }
}

/* ===== ARAÑA ===== */

.halloween-spider {
  position: absolute;
  top: 0;
  right: 24px;
  z-index: 5;
  width: 52px;
  overflow: visible;
}

.halloween-spider__sway {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: spider-thread-bob 4.5s ease-in-out infinite alternate;
}

.halloween-spider__thread {
  width: 2px;
  height: 60px;
  background: linear-gradient( to bottom, #fcd34d, #f59e0b, rgba(253, 230, 138, 0.9) );
  opacity: 0.9;
}

.halloween-spider__body {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: -4px;
  transform-origin: top center;
  animation: spider-swing 3s ease-in-out infinite alternate;
}

.halloween-spider__body svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow( 0 4px 4px rgba(32, 23, 21, 0.25) );
}

.halloween-spider:hover .halloween-spider__body,
.halloween-spider:focus-visible .halloween-spider__body,
.halloween-spider.is-excited .halloween-spider__body {
  animation-duration: 0.75s;
}

.halloween-spark--spider {
  position: absolute;
  right: -5px;
  bottom: -3px;
}

@keyframes spider-thread-bob {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(10px);
  }
}

@keyframes spider-swing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(13deg);
  }

  75% {
    transform: rotate(-13deg);
  }
}

/* ===== PERSONAJES TORTA + MUFFIN ===== */

.delivery-cta {
  position: relative;
}

.halloween-character-slot {
  width: 100%;
  min-height: 88px;
  margin-bottom: 8px;
  align-items: center;
  pointer-events: none;
}

body.halloween-active .halloween-character-slot {
  display: flex;
}

.halloween-character-slot--cake {
  justify-content: flex-end;
  padding-right: 4px;
}

.halloween-character-slot--muffin {
  justify-content: flex-start;
  padding-left: 4px;
}

.halloween-character {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  padding: 5px;
  overflow: visible;
  border: 1px solid rgba(32, 23, 21, 0.11);
  border-radius: 8px;
  background: rgba(255, 253, 252, 0.96);
  color: inherit;
  box-shadow: 0 5px 15px rgba(32, 23, 21, 0.08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  pointer-events: auto;
  transform-origin: center bottom;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.halloween-character svg {
  display: block;
  width: 66px;
  height: 66px;
  overflow: visible;
  pointer-events: none;
}

.halloween-character--cake {
  border-color: rgba(234, 88, 12, 0.24);
  background: linear-gradient( 145deg, #fffaf4 0%, #fff0dc 100% );
  box-shadow: 0 5px 15px rgba(72, 38, 25, 0.1);
  animation: halloween-cake-idle 4.4s ease-in-out infinite;
}

.halloween-character--muffin {
  border-color: rgba(124, 58, 237, 0.14);
  background: linear-gradient( 145deg, #fffdfc 0%, #fbf8ff 100% );
  animation: halloween-cake-idle 4.8s ease-in-out infinite;
}

/* ===== ESTADOS ===== */

.halloween-character:hover,
.halloween-character:focus-visible {
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 7px 18px rgba(32, 23, 21, 0.11), 0 0 0 3px rgba(124, 58, 237, 0.06);
  filter: drop-shadow( 0 0 6px rgba(124, 58, 237, 0.08) );
}

.halloween-character:active {
  transform: scale(0.95);
}

/* ===== MOVIMIENTOS ===== */

@keyframes halloween-cake-idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

/* ===== CARAS ===== */

.halloween-face {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 160ms ease, transform 220ms ease;
}

.halloween-face--cute {
  opacity: 1;
  transform: scale(1);
}

.halloween-face--scary {
  opacity: 0;
  transform: scale(0.75);
}

/* ===== RUGIDO ===== */

.halloween-character.is-roaring {
  border-color: rgba(124, 58, 237, 0.42);
  animation: halloween-character-roar 650ms cubic-bezier( 0.18, 0.89, 0.32, 1.35 );
  box-shadow: 0 7px 20px rgba(32, 23, 21, 0.13), 0 0 18px rgba(124, 58, 237, 0.2);
  filter: drop-shadow( 0 0 7px rgba(124, 58, 237, 0.16) );
}

.halloween-character.is-roaring .halloween-face--cute {
  opacity: 0;
  transform: scale(0.72);
}

.halloween-character.is-roaring .halloween-face--scary {
  opacity: 1;
  transform: scale(1.08);
}

@keyframes halloween-character-roar {
  0% {
    transform: scale(1) rotate(0deg);
  }

  16% {
    transform: scale(0.94, 1.05) rotate(-2deg);
  }

  34% {
    transform: scale(1.1, 0.96) rotate(3deg);
  }

  54% {
    transform: scale(1.06) rotate(-2deg);
  }

  75% {
    transform: scale(1.03) rotate(1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* ===== BOO ===== */

.halloween-character__bubble {
  position: absolute;
  top: -13px;
  right: -11px;
  z-index: 4;
  min-width: 48px;
  padding: 5px 8px;
  border: 1px solid rgba(107, 17, 43, 0.18);
  border-radius: 7px;
  background: #fffdfc;
  color: #6b112b;
  box-shadow: 0 5px 14px rgba(32, 23, 21, 0.1);
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.8);
  transform-origin: center;
}

.halloween-character__bubble::after {
  position: absolute;
  right: 10px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(107, 17, 43, 0.18);
  border-bottom: 1px solid rgba(107, 17, 43, 0.18);
  background: #fffdfc;
  content: "";
  transform: rotate(45deg);
}

.halloween-character.is-roaring .halloween-character__bubble {
  animation: halloween-boo-pop 1.7s ease-out;
}

@keyframes halloween-boo-pop {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.6);
  }

  14% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }

  28%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-5px) scale(0.9);
  }
}

/* ===== ONDA DE SUSTO ===== */

.halloween-character__shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(124, 58, 237, 0.4);
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.65);
}

.halloween-character.is-roaring .halloween-character__shockwave {
  animation: halloween-character-shockwave 650ms ease-out;
}

@keyframes halloween-character-shockwave {
  0% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.65);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

/* ===== HOY EN VITRINA ===== */

.haunted-cake {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 4px;
  overflow: visible;
  border: 1px solid rgba(234, 88, 12, 0.22);
  border-radius: 7px;
  background: linear-gradient( 145deg, #fffaf4 0%, #ffe9cf 100% );
  box-shadow: 0 3px 9px rgba(62, 33, 22, 0.1);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.haunted-cake svg {
  display: block;
  width: 34px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow( 0 2px 2px rgba(32, 23, 21, 0.12) );
}

.haunted-cake > span {
  position: absolute;
  top: -6px;
  right: -5px;
  color: #f59e0b;
  font-size: 0.55rem;
  animation: halloween-spark-pulse 1.6s ease-in-out infinite;
}

.haunted-cake:hover,
.haunted-cake:focus-visible {
  border-color: rgba(234, 88, 12, 0.42);
  box-shadow: 0 5px 12px rgba(62, 33, 22, 0.14);
  transform: translateY(-2px);
}

.haunted-cake:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 3px;
}

.haunted-cake:active {
  transform: scale(0.95);
}

.haunted-cake.is-excited {
  animation: haunted-cake-square-reaction 600ms ease;
}

@keyframes haunted-cake-square-reaction {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.08) rotate(-3deg);
  }

  65% {
    transform: scale(1.06) rotate(3deg);
  }

  100% {
    transform: scale(1);
  }
}

/* ===== CUCHARA ===== */

.halloween-spoon--classics {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  align-items: center;
  width: 58px;
  gap: 5px;
  opacity: 0.78;
  pointer-events: none;
}

body.halloween-active .halloween-spoon--classics {
  display: none;
}

.halloween-spoon svg {
  width: 44px;
  height: 24px;
  filter: drop-shadow( 0 1px 2px rgba(32, 23, 21, 0.1) );
}

.halloween-spoon > span {
  color: #f59e0b;
  font-size: 0.7rem;
  animation: halloween-spark-pulse 1.7s ease-in-out infinite;
}

/* ===== VELAS ===== */

.candle-flame {
  display: block;
  width: 10px;
  height: 12px;
  border-radius: 60% 60% 55% 55%;
  background: #fbbf24;
  box-shadow: 0 0 9px rgba(245, 158, 11, 0.85);
  transform-origin: center bottom;
  animation: candle-flicker 2.2s ease-in-out infinite alternate;
}

.candle-flame--delay {
  animation-delay: 700ms;
}

@keyframes candle-flicker {
  0%,
  100% {
    opacity: 0.92;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.12, 0.92) rotate(2deg);
  }
}

.halloween-candle--menu {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 3;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

body.halloween-active .halloween-candle--menu {
  display: flex;
}

.halloween-candle--menu .candle-flame {
  width: 8px;
  height: 10px;
}

/* ===== DULCES ===== */

.halloween-candy-row {
  align-items: center;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  gap: 8px;
}

body.halloween-active .halloween-candy-row {
  display: flex;
}

.halloween-candy-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  gap: 5px;
  border: 1px solid rgba(216, 27, 96, 0.2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}

.halloween-candy-row__ornaments {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 40px;
  padding: 4px 7px;
  gap: 4px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  font-size: 0.7rem;
  opacity: 0.82;
}

.halloween-candy-row__ornaments:hover,
.halloween-candy-row__ornaments:focus-visible {
  opacity: 1;
}

.candy-peek {
  display: inline-block;
  animation: candy-peek 2.8s ease-in-out infinite;
}

@keyframes candy-peek {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15) rotate(-5deg);
  }
}

/* ===== SOMBRERO DE BRUJA ===== */

.witch-hat {
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 3;
  width: 54px;
  height: 54px;
  pointer-events: none;
}

.witch-hat svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow( 0 5px 5px rgba(32, 23, 21, 0.28) );
  animation: witch-hat-float 4s ease-in-out infinite;
}

.witch-hat > span {
  position: absolute;
  top: -1px;
  right: -1px;
  font-size: 0.625rem;
  animation: halloween-spark-pulse 1.8s ease-in-out infinite;
}

@keyframes witch-hat-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}

/* ===== GALERÍA ===== */

.halloween-gallery-spoon {
  position: absolute;
  top: -18px;
  right: 8px;
  z-index: 2;
  align-items: center;
  gap: 7px;
  opacity: 0.8;
  pointer-events: none;
}

body.halloween-active .halloween-gallery-spoon {
  display: flex;
}

.halloween-gallery-spoon svg {
  width: 46px;
  height: 23px;
  filter: drop-shadow( 0 1px 2px rgba(32, 23, 21, 0.08) );
}

.halloween-paws {
  display: flex;
  gap: 2px;
  color: var(--color-espresso);
  font-size: 0.48rem;
  opacity: 0.4;
}

.halloween-paws span:first-child {
  transform: rotate(-12deg);
}

.halloween-paws span:last-child {
  transform: rotate(12deg);
}

/* ===== VELAS OPINIONES ===== */

.halloween-candle-pair {
  position: absolute;
  top: -16px;
  right: 16px;
  z-index: 3;
  align-items: flex-end;
  gap: 8px;
  opacity: 0.9;
  pointer-events: none;
}

body.halloween-active .halloween-candle-pair {
  display: flex;
}

.decorative-candle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.decorative-candle__body {
  display: block;
  width: 12px;
  border-radius: 2px 2px 1px 1px;
}

.decorative-candle--pink .decorative-candle__body {
  height: 24px;
  border: 1px solid #e4beb2;
  background: #fed7ca;
}

.decorative-candle--cream .decorative-candle__body {
  width: 14px;
  height: 31px;
  border: 1px solid var(--color-border);
  background: #ede0d4;
}

/* ===== VISÍTANOS ===== */

.visit-candle {
  position: absolute;
  top: -8px;
  right: 72px;
  z-index: 2;
  align-items: flex-end;
  gap: 5px;
  opacity: 0.78;
  pointer-events: none;
}

body.halloween-active .visit-candle {
  display: flex;
}

.visit-candle__body {
  display: block;
  width: 10px;
  height: 16px;
  margin-left: -10px;
  border: 1px solid #e4beb2;
  border-radius: 2px;
  background: #fed7ca;
}

.visit-candle > span:last-child {
  margin-bottom: 8px;
  color: #fcd34d;
  font-size: 0.7rem;
}

/* ===== FAROL ===== */

.halloween-lantern {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 3;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  animation: lantern-sway 4s ease-in-out infinite alternate;
}

body.halloween-active .halloween-lantern {
  display: flex;
}

.halloween-lantern svg {
  width: 30px;
  height: 38px;
  filter: drop-shadow( 0 4px 5px rgba(32, 23, 21, 0.25) );
}

.halloween-lantern > span {
  color: #f59e0b;
  font-size: 0.7rem;
}

.lantern-flame {
  transform-origin: center;
  animation: lantern-glow 1.9s ease-in-out infinite alternate;
}

@keyframes lantern-sway {
  from {
    transform: rotate(-2deg);
  }

  to {
    transform: rotate(3deg);
  }
}

@keyframes lantern-glow {
  from {
    opacity: 0.72;
    filter: drop-shadow( 0 0 2px #fbbf24 );
  }

  to {
    opacity: 1;
    filter: drop-shadow( 0 0 7px #f59e0b );
  }
}

/* ===== CONTACTO ===== */

.contact-candle {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 2;
  align-items: flex-end;
  gap: 5px;
  pointer-events: none;
}

body.halloween-active .contact-candle {
  display: flex;
}

.contact-candle__body {
  width: 14px;
  height: 20px;
  margin-left: -10px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: #ede0d4;
}

.contact-candle > span:last-child {
  margin-bottom: 4px;
  color: #f59e0b;
  font-size: 0.65rem;
}

/* ===== FOOTER ===== */

.footer-halloween-decoration {
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
  opacity: 0.82;
  pointer-events: none;
}

body.halloween-active .footer-halloween-decoration {
  display: flex;
}

.footer-halloween-decoration > svg {
  width: 26px;
  height: 22px;
}

.footer-halloween-decoration__candle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-halloween-decoration__candle .candle-flame {
  width: 8px;
  height: 10px;
}

.footer-halloween-decoration__wax {
  display: block;
  width: 10px;
  height: 12px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: #ede0d4;
}

.footer-halloween-decoration > span:last-child {
  color: #f59e0b;
  font-size: 0.65rem;
}

/* ===== FANTASMAS ===== */

.ghost-layer {
  position: fixed;
  inset: 0;
  z-index: 39;
  overflow: hidden;
  pointer-events: none;
}

.ghost {
  position: absolute;
  width: 68px;
  height: 82px;
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: transparent;
  filter: drop-shadow( 0 4px 14px rgba(216, 27, 96, 0.25) ) drop-shadow( 0 2px 8px rgba(32, 23, 21, 0.12) );
  pointer-events: auto;
  transition: filter 250ms ease, opacity 250ms ease;
}

.ghost svg {
  width: 100%;
  height: 100%;
}

.ghost--coffee {
  top: 35%;
  left: -100px;
  animation: ghost-patrol-horizontal 24s linear infinite;
}

.ghost--cake {
  top: 55%;
  right: -100px;
  animation: ghost-patrol-diagonal 28s linear infinite;
}

.ghost__food {
  transition: transform 300ms ease;
}

.ghost:hover .ghost__food,
.ghost:focus-visible .ghost__food {
  transform: translateY(-3px);
}

.ghost__emoji {
  position: absolute;
  top: -4px;
  right: -5px;
  font-size: 0.75rem;
  animation: halloween-spark-pulse 1.8s ease-in-out infinite;
}

.ghost.is-startled {
  filter: drop-shadow( 0 0 18px rgba(216, 27, 96, 0.85) ) drop-shadow( 0 2px 8px rgba(32, 23, 21, 0.12) );
}

.ghost.is-startled svg {
  animation: ghost-startled 350ms cubic-bezier( 0.2, 1.4, 0.5, 1 );
}

.ghost-steam {
  animation: ghost-steam 2.4s ease-in-out infinite;
}

.ghost-steam--delay {
  animation-delay: 700ms;
}

@keyframes ghost-steam {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes ghost-startled {
  0% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.25) rotate(-10deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes ghost-patrol-horizontal {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(1);
  }

  5% {
    opacity: 0.95;
  }

  45% {
    opacity: 0.95;
    transform: translateX(calc(100vw + 130px)) translateY(-8px) scaleX(1);
  }

  50% {
    opacity: 0;
    transform: translateX(calc(100vw + 130px)) translateY(-8px) scaleX(-1);
  }

  55% {
    opacity: 0.95;
  }

  95% {
    opacity: 0.95;
    transform: translateX(0) translateY(0) scaleX(-1);
  }

  100% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(1);
  }
}

@keyframes ghost-patrol-diagonal {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(1);
  }

  6% {
    opacity: 0.92;
  }

  45% {
    opacity: 0.92;
    transform: translateX(calc(-100vw - 140px)) translateY(70px) scaleX(1);
  }

  50% {
    opacity: 0;
    transform: translateX(calc(-100vw - 140px)) translateY(70px) scaleX(-1);
  }

  55% {
    opacity: 0.92;
  }

  95% {
    opacity: 0.92;
    transform: translateX(0) translateY(0) scaleX(-1);
  }

  100% {
    opacity: 0;
    transform: translateX(0) translateY(0) scaleX(1);
  }
}

/* ===== TABLET ===== */

@media (min-width: 640px) {
  .halloween-spider {
    right: 56px;
    width: 58px;
  }

  .halloween-spider__thread {
    height: 76px;
  }

  .halloween-spider__body {
    width: 46px;
    height: 46px;
  }

  .halloween-character-slot {
    min-height: 98px;
  }

  .halloween-character {
    width: 86px;
    height: 86px;
    padding: 6px;
    border-radius: 9px;
  }

  .halloween-character svg {
    width: 72px;
    height: 72px;
  }

  .halloween-character__bubble {
    top: -14px;
    right: -14px;
  }

  .halloween-candle--menu,
  .contact-candle,
  .halloween-lantern {
    right: 32px;
  }

  .halloween-gallery-spoon {
    right: 24px;
  }

  .halloween-candle-pair {
    right: 32px;
  }

  .ghost {
    width: 80px;
    height: 96px;
  }
}

/* ===== DESKTOP ===== */

@media (min-width: 768px) {
  body.halloween-active .halloween-spoon--classics {
    display: flex;
  }

  .halloween-spoon--classics {
    top: 3px;
    right: 18px;
  }

  .halloween-character-slot--cake {
    padding-right: 14px;
  }

  .halloween-character-slot--muffin {
    padding-left: 14px;
  }

  .halloween-character {
    width: 90px;
    height: 90px;
    border-radius: 10px;
  }

  .halloween-character svg {
    width: 76px;
    height: 76px;
  }
}

/* ===== MOBILE 360–389 ===== */

@media (max-width: 389px) {
  .halloween-spider {
    right: 12px;
  }

  .halloween-character-slot {
    min-height: 78px;
  }

  .halloween-character {
    width: 70px;
    height: 70px;
    padding: 4px;
    border-radius: 7px;
  }

  .halloween-character svg {
    width: 60px;
    height: 60px;
  }

  .halloween-character__bubble {
    top: -12px;
    right: -8px;
    min-width: 44px;
    padding: 5px 7px;
    font-size: 0.625rem;
  }

  .haunted-cake {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .haunted-cake svg {
    width: 30px;
    height: 30px;
  }

  .halloween-gallery-spoon,
  .halloween-candle-pair,
  .contact-candle,
  .halloween-lantern {
    right: 8px;
  }

  .visit-candle {
    right: 58px;
  }
}

/* ===== FOCO DE LOS FANTASMAS ===== */
.ghost--coffee:focus { left: 12px; }
.ghost--cake:focus { right: 12px; }
.ghost:focus {
  animation: none;
  opacity: 1;
  transform: none;
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

/* ===== MOVIMIENTO REDUCIDO ===== */

@media (prefers-reduced-motion: reduce) {
  .firefly,
  .halloween-spider__sway,
  .halloween-spider__body,
  .halloween-character--cake,
  .halloween-character--muffin,
  .haunted-cake,
  .candy-peek,
  .witch-hat svg,
  .candle-flame,
  .halloween-lantern,
  .lantern-flame,
  .ghost,
  .ghost-steam,
  .halloween-spark,
  .ghost__emoji,
  .ghost.is-startled svg,
  .haunted-cake.is-excited,
  .halloween-character.is-roaring,
  .halloween-character.is-roaring .halloween-character__bubble,
  .halloween-character.is-roaring .halloween-character__shockwave,
  .halloween-spoon > span,
  .witch-hat > span,
  .haunted-cake > span {
    animation: none;
  }

  .halloween-character,
  .halloween-face,
  .haunted-cake,
  .ghost,
  .ghost__food {
    transition-duration: 0.01ms;
  }

  body.halloween-active .ghost-layer {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: space-around;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 16px;
  }
  .ghost, .ghost--coffee:focus, .ghost--cake:focus {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
}