/* ===== 21. ALIEN — EXCLUSIVO DE HALLOWEEN ===== */

#alien-ghost-companion {
  display: none;

  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 45;

  flex-direction: column;
  align-items: flex-end;
  gap: 3px;

  width: min(185px, 43vw);
  pointer-events: none;
}

#alien-speech-bubble {
  width: min(185px, 100%);
  padding: 10px 12px;

  border: 1px solid rgba(242, 202, 80, .4);
  border-radius: 16px;

  background: rgba(40, 42, 50, .96);
  color: var(--cp-text);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  pointer-events: none;

  transition:
    opacity 200ms ease,
    visibility 200ms ease,
    transform 200ms ease;
}

#alien-avatar-trigger {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 126px;
  height: 164px;
  padding: 0;

  border: 0;
  background: transparent;

  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: center;
}

#alien-avatar-trigger svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;

  filter: drop-shadow(
    0 4px 10px rgba(242, 202, 80, .18)
  );
}

#alien-avatar-trigger .flight-patrol {
  transform-origin: 65px 90px;
}

#alien-avatar-trigger .soft-jet-thrust {
  transform-box: fill-box;
  transform-origin: center top;
  animation: cp-jet-thrust 500ms ease-in-out infinite;
}

#alien-avatar-trigger .steam-flow {
  animation: cp-steam-rise 2.2s ease-in-out infinite;
}

/* ===== BASE ===== */

:root {
  --halloween-orange: #ff8c42;
  --halloween-orange-deep: #d85a18;
  --halloween-orange-light: #ffc078;
  --halloween-purple: #a78bfa;
  --halloween-violet: #44245b;
  --halloween-green: #86efac;
  --halloween-night: #100b18;
}

/* ===== 01. TEMA ===== */

body.theme-halloween {
  background-color: #121317;
}

body.theme-halloween .site-header {
  border-bottom-color: rgba(255, 140, 66, .3);
}

body.theme-halloween .halloween-toggle {
  color: #241307;
  background: var(--halloween-orange-light);
  border-color: var(--halloween-orange);
}

body.theme-halloween .halloween-toggle:hover {
  background-color: #ffd29d;
}

body.theme-halloween .halloween-toggle-label {
  font-weight: 700;
}

body.theme-halloween .nav-link:hover,
body.theme-halloween .nav-link[aria-current="location"] {
  color: var(--halloween-orange-light);
}

body.theme-halloween .star-twinkle-1,
body.theme-halloween .star-twinkle-2,
body.theme-halloween .star-twinkle-3 {
  background-color: var(--halloween-orange-light);
}

body.theme-halloween .orbit-ring {
  filter: drop-shadow(
    0 0 4px rgba(255, 140, 66, .2)
  );
}

/* ===== 02. CAPAS POR SECCIÓN ===== */

body.theme-halloween main section[id] {
  position: relative;
  isolation: isolate;
}

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

.section-halloween-layer[hidden] {
  display: none;
}

body.theme-halloween main section[id]
  > :not(.section-halloween-layer) {
  position: relative;
  z-index: 1;
}

.section-halloween-layer [class^="h-"],
.section-halloween-layer [class*=" h-"] {
  position: absolute;
  pointer-events: none;
}

.h-vignette-glow,
.h-mist-strip {
  display: none;
}

/* ===== 03. LUNAS ===== */

.h-moon {
  width: clamp(54px, 7vw, 100px);
  aspect-ratio: 1;
  border-radius: 50%;

  background: #ffd38c;
  border: 2px solid rgba(216, 138, 73, .7);

  opacity: .78;

  animation:
    halloween-moon-float 11s ease-in-out infinite;
}

.h-moon::before {
  content: "";
  position: absolute;

  width: 18%;
  height: 18%;
  top: 25%;
  left: 27%;

  border-radius: 50%;
  background: rgba(145, 85, 56, .18);

  box-shadow:
    22px 28px 0 7px rgba(145, 85, 56, .1),
    42px 3px 0 3px rgba(145, 85, 56, .1);
}

.h-moon--hero {
  top: 52px;
  right: clamp(18px, 7vw, 88px);
}

.h-moon--espacio {
  top: 25px;
  right: 24px;
  width: 78px;
}

/* ===== 04. MURCIÉLAGOS ===== */

.h-bat {
  width: 48px;
  height: 24px;
  color: #6b526f;
  opacity: .8;

  animation:
    halloween-bat-flight 13s ease-in-out infinite;
}

.h-bat::before,
.h-bat::after {
  content: "";
  position: absolute;

  top: 2px;
  width: 24px;
  height: 14px;

  border-top: 4px solid currentColor;
  border-radius: 70% 70% 0 0;
}

.h-bat::before {
  left: 1px;
  transform: rotate(18deg);
  transform-origin: right;
}

.h-bat::after {
  right: 1px;
  transform: rotate(-18deg);
  transform-origin: left;
}

.h-bat--a {
  top: 16%;
  left: 12%;
  animation-delay: -2s;
}

.h-bat--b {
  top: 22%;
  left: 22%;
  scale: .78;
  animation-delay: -5s;
}

.h-bat--c {
  top: 18%;
  right: 18%;
  scale: .7;
  animation-delay: -8s;
}

/* ===== 05. TELARAÑAS ===== */

.h-web {
  width: 108px;
  height: 108px;
  opacity: .27;

  background:
    radial-gradient(
      circle at 100% 0,
      transparent 0 12px,
      rgba(90, 70, 100, .5) 12px 13px,
      transparent 13px 26px,
      rgba(90, 70, 100, .45) 26px 27px,
      transparent 27px 40px,
      rgba(90, 70, 100, .4) 40px 41px,
      transparent 41px
    ),
    linear-gradient(
      135deg,
      transparent 49%,
      rgba(90, 70, 100, .4) 50%,
      transparent 51%
    ),
    linear-gradient(
      160deg,
      transparent 49%,
      rgba(90, 70, 100, .35) 50%,
      transparent 51%
    ),
    linear-gradient(
      110deg,
      transparent 49%,
      rgba(90, 70, 100, .35) 50%,
      transparent 51%
    );
}

.h-web--tl {
  top: 0;
  left: 0;
}

.h-web--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.h-web--br {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}

/* ===== 06. FANTASMAS ===== */

.h-ghost {
  width: 34px;
  height: 42px;
  border-radius: 18px 18px 8px 8px;

  background: #f5f1ff;
  box-shadow: inset 0 -7px 0 rgba(172, 163, 196, .15);

  opacity: .74;
  animation:
    halloween-ghost-hover 8s ease-in-out infinite;
}

.h-ghost::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 5px;
  height: 7px;

  border-radius: 50%;
  background: #28222d;
  box-shadow: 12px 0 0 #28222d;
}

.h-ghost::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 4px;
  width: 11px;
  height: 11px;

  border-radius: 50%;
  background: #f5f1ff;
  box-shadow: 14px 0 0 #f5f1ff;
}

.h-ghost--a {
  top: 15%;
  right: 10%;
  animation-delay: -1s;
}

.h-ghost--b {
  top: 20%;
  left: 16%;
  scale: .82;
  animation-delay: -4s;
}

.h-ghost--c {
  top: 30%;
  right: 18%;
  scale: .72;
  animation-delay: -6s;
}

/* ===== 07. VELAS ===== */

.h-candle {
  width: 16px;
  height: 58px;
  border-radius: 5px;
  background: #ead8b2;
  border: 1px solid rgba(120, 92, 43, .3);
}

.h-candle::before {
  content: "";
  position: absolute;

  top: -14px;
  left: 50%;

  width: 12px;
  height: 18px;

  transform: translateX(-50%);
  border-radius: 50% 50% 45% 45%;
  background: #ffbd65;

  box-shadow: 0 0 9px rgba(255, 174, 90, .35);

  animation:
    halloween-candle-flicker 2.4s ease-in-out infinite;
}

.h-candle::after {
  content: "";
  position: absolute;

  top: -3px;
  left: 50%;

  width: 2px;
  height: 7px;

  transform: translateX(-50%);
  background: #4f3a20;
}

.h-candle--left {
  left: 22px;
  bottom: 18px;
}

.h-candle--right {
  right: 22px;
  bottom: 18px;
}

.h-candle--mid-left {
  left: 42px;
  bottom: 22px;
  scale: .82;
}

.h-candle--mid-right {
  right: 42px;
  bottom: 22px;
  scale: .82;
}

/* ===== 08. OJOS ===== */

.h-eyes {
  width: 54px;
  height: 16px;
  opacity: .75;
}

.h-eyes::before,
.h-eyes::after {
  content: "";
  position: absolute;
  top: 0;

  width: 18px;
  height: 10px;

  border-radius: 50%;
  background: #ffc96c;

  box-shadow: 0 0 6px rgba(255, 187, 78, .3);
  animation:
    halloween-eye-blink 6.5s ease-in-out infinite;
}

.h-eyes::before {
  left: 0;
}

.h-eyes::after {
  right: 0;
}

.h-eyes--top-left {
  top: 18px;
  left: 28px;
}

.h-eyes--top-right {
  top: 28px;
  right: 32px;
}

.h-eyes--mid-right {
  top: 34%;
  right: 10%;
}

/* ===== 09. CALABAZAS ===== */

.h-pumpkin {
  width: 74px;
  height: 64px;
}

.h-pumpkin__body,
.h-pumpkin::before,
.h-pumpkin::after {
  content: "";
  position: absolute;
}

.h-pumpkin__body {
  inset: 11px 4px 0;
  border-radius: 45% 45% 42% 42%;

  background: #e9792d;
  border: 2px solid #af4e1a;

  box-shadow:
    inset 14px 0 0 rgba(255, 179, 78, .18),
    inset -14px 0 0 rgba(110, 45, 9, .14);
}

.h-pumpkin::before {
  top: 1px;
  left: 33px;
  width: 10px;
  height: 17px;
  border-radius: 4px;
  background: #54804a;
  transform: rotate(13deg);
}

.h-pumpkin::after {
  left: 18px;
  top: 29px;
  width: 38px;
  height: 20px;

  background:
    linear-gradient(
      135deg,
      transparent 0 32%,
      #28151a 33% 65%,
      transparent 66%
    ),
    linear-gradient(
      225deg,
      transparent 0 32%,
      #28151a 33% 65%,
      transparent 66%
    );

  -webkit-clip-path: polygon(
    0 22%, 38% 100%, 39% 22%,
    61% 22%, 62% 100%, 100% 22%,
    100% 100%, 0 100%
  );
  clip-path: polygon(
    0 22%, 38% 100%, 39% 22%,
    61% 22%, 62% 100%, 100% 22%,
    100% 100%, 0 100%
  );
}

.h-pumpkin--mini {
  right: 20px;
  bottom: 16px;
  scale: .78;
}

.h-pumpkin--cake {
  right: 22px;
  bottom: 16px;
  scale: .86;
}

/* ===== 10. POCIONES ===== */

.h-potion {
  width: 36px;
  height: 52px;
  border-radius: 8px 8px 12px 12px;

  border: 2px solid rgba(239, 229, 210, .52);
  background: #27ac7c;

  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12);
}

.h-potion::before {
  content: "";
  position: absolute;

  top: -8px;
  left: 10px;

  width: 14px;
  height: 11px;

  border-radius: 4px 4px 0 0;
  background: #c8baa1;
}

.h-potion::after {
  content: "";
  position: absolute;

  top: 18px;
  right: -7px;

  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: rgba(134, 239, 172, .7);

  box-shadow:
    -8px -13px 0 rgba(134, 239, 172, .38),
    5px 14px 0 rgba(255, 192, 120, .26);

  animation:
    halloween-potion-bubble 3.5s ease-in-out infinite;
}

.h-potion--left {
  left: 20px;
  bottom: 18px;
}

.h-potion--right {
  right: 22px;
  bottom: 22px;
  scale: .92;
}

.h-potion--gift {
  right: 22px;
  bottom: 18px;
}

/* ===== 11. LÁPIDAS ===== */

.h-grave {
  width: 44px;
  height: 56px;
  border-radius: 18px 18px 6px 6px;

  background: #817d86;
  border: 1px solid rgba(20, 18, 24, .28);
  opacity: .7;
}

.h-grave::before,
.h-grave::after {
  content: "";
  position: absolute;
  background: #342d38;
}

.h-grave::before {
  left: 15px;
  top: 18px;
  width: 14px;
  height: 2px;
}

.h-grave::after {
  left: 21px;
  top: 12px;
  width: 2px;
  height: 14px;
}

.h-grave--one {
  left: 20px;
  bottom: 16px;
  scale: .86;
}

.h-grave--two {
  left: 60px;
  bottom: 12px;
  scale: .72;
}

/* ===== 12. SEÑALIZACIÓN ===== */

.h-signpost {
  width: 62px;
  height: 92px;
}

.h-signpost::before {
  content: "";
  position: absolute;

  left: 28px;
  bottom: 0;

  width: 7px;
  height: 74px;

  border-radius: 6px;
  background: #5d4124;
  transform: rotate(3deg);
}

.h-signpost::after {
  content: "HAUNTED";
  position: absolute;

  top: 18px;
  left: 2px;

  width: 54px;
  padding: 4px 6px;

  border-radius: 6px;
  background: #8f5a2a;
  color: #fff0db;

  font-family: "Space Grotesk", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;

  transform: rotate(-8deg);
}

.h-signpost--route {
  right: 24px;
  bottom: 14px;
}

/* ===== 13. RAMAS ===== */

.h-branch {
  width: 94px;
  height: 160px;
  opacity: .22;
}

.h-branch::before,
.h-branch::after {
  content: "";
  position: absolute;
  background: #2d1c1a;
}

.h-branch::before {
  left: 44px;
  bottom: -10px;

  width: 6px;
  height: 170px;

  transform: rotate(4deg);
  border-radius: 8px;
}

.h-branch::after {
  left: 16px;
  bottom: 74px;

  width: 70px;
  height: 4px;

  transform: rotate(-28deg);
  border-radius: 5px;

  box-shadow:
    26px -24px 0 #2d1c1a,
    -4px 18px 0 #2d1c1a,
    35px 26px 0 #2d1c1a;
}

.h-branch--left {
  left: -10px;
  bottom: -24px;
}

.h-branch--right {
  right: -6px;
  bottom: -20px;
  transform: scaleX(-1);
}

/* ===== 14. SÍMBOLO ORBITAL ===== */

.h-sigil {
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;

  border: 1px dashed rgba(255, 191, 108, .25);
  opacity: .32;
}

.h-sigil::before {
  content: "";
  position: absolute;

  inset: 22%;
  border-radius: 50%;

  border: 1px solid rgba(255, 191, 108, .24);
}

.h-sigil::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 191, 108, .6);

  box-shadow:
    0 -66px 0 -2px rgba(255, 191, 108, .4),
    0 66px 0 -2px rgba(255, 191, 108, .4),
    66px 0 0 -2px rgba(255, 191, 108, .4),
    -66px 0 0 -2px rgba(255, 191, 108, .4);
}

.h-sigil--menu {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== 15. GUIRNALDA ===== */

.h-garland {
  top: 10px;
  left: 0;
  right: 0;
  height: 32px;
}

.h-garland::before {
  content: "";
  position: absolute;

  inset: 0 10% auto;
  height: 2px;

  border-top: 2px dashed rgba(255, 196, 120, .4);
}

.h-garland::after {
  content: "";
  position: absolute;

  inset: 8px 11% auto;
  height: 12px;

  background:
    radial-gradient(circle at 5% 50%, #ff8c42 0 4px, transparent 5px),
    radial-gradient(circle at 20% 50%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 35% 50%, #ffc078 0 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, #ff8c42 0 4px, transparent 5px),
    radial-gradient(circle at 65% 50%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 80% 50%, #ffc078 0 4px, transparent 5px),
    radial-gradient(circle at 95% 50%, #ff8c42 0 4px, transparent 5px);

  opacity: .72;
}

/* ===== 16. GOTEO ===== */

.h-drip {
  top: 0;
  left: 0;
  right: 0;
  height: 32px;

  background:
    radial-gradient(circle at 10% 0, #4d1c1c 0 14px, transparent 15px),
    radial-gradient(circle at 26% 0, #5c1b13 0 12px, transparent 13px),
    radial-gradient(circle at 44% 0, #4d1c1c 0 16px, transparent 17px),
    radial-gradient(circle at 65% 0, #5c1b13 0 11px, transparent 12px),
    radial-gradient(circle at 84% 0, #4d1c1c 0 15px, transparent 16px);

  opacity: .5;
}

/* ===== 17. VENTANA ===== */

.h-window-bars {
  width: 110px;
  height: 130px;
  border-radius: 20px 20px 10px 10px;
  border: 1px solid rgba(255, 210, 150, .25);

  background:
    linear-gradient(
      90deg,
      transparent 0 22%,
      rgba(160, 138, 120, .45) 22% 25%,
      transparent 25% 48%,
      rgba(160, 138, 120, .45) 48% 51%,
      transparent 51% 74%,
      rgba(160, 138, 120, .45) 74% 77%,
      transparent 77%
    ),
    linear-gradient(
      180deg,
      transparent 0 48%,
      rgba(160, 138, 120, .45) 48% 51%,
      transparent 51%
    );

  opacity: .18;
}

.h-window-bars--espacio {
  left: 18px;
  top: 18px;
}

/* ===== 18. VARIANTES POR SECCIÓN ===== */

.section-halloween--momentos .h-ghost,
.section-halloween--resenas .h-ghost {
  opacity: .68;
}

.section-halloween--carta .h-sigil,
.section-halloween--carta-digital .h-sigil {
  opacity: .25;
}

.section-halloween--ubicacion .h-signpost,
.section-halloween--ubicacion .h-grave {
  opacity: .78;
}

.section-halloween--pasteleria .h-drip {
  opacity: .5;
}

.section-halloween--cafe .h-potion {
  opacity: .85;
}

/* ===== 19. ALIEN — SOLO EN HALLOWEEN ===== */

body.theme-halloween #alien-ghost-companion {
  position: fixed;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  top: 0;
  left: 0;
  right: auto;
  bottom: auto;

  z-index: 46;
  width: 132px;
  height: 158px;

  pointer-events: none;

  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: none;
}

body.theme-halloween #alien-avatar-trigger {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 124px;
  height: 150px;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

body.theme-halloween #alien-avatar-trigger svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;

  filter: drop-shadow(
    0 4px 8px rgba(167, 139, 250, .2)
  );
}

body.theme-halloween
  #alien-avatar-trigger:hover {
  scale: 1.03;
}

/* ===== 20. MENSAJES EXCLUSIVAMENTE POR CLIC ===== */

body.theme-halloween #alien-speech-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% - 7px);
  left: auto;

  z-index: 2;

  display: block;
  width: 230px;
  max-width: min(230px, 76vw);

  margin: 0;
  padding: 11px 13px;

  border-radius: 14px;
  border: 1px solid var(--halloween-orange);

  background: #28212f;
  color: #fff3df;

  box-shadow: 0 7px 16px rgba(0, 0, 0, .2);

  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);

  transition:
    opacity 200ms ease,
    visibility 200ms ease,
    transform 200ms ease;

  pointer-events: none;
}

body.theme-halloween #alien-speech-bubble strong {
  color: var(--halloween-orange-light);
}

body.theme-halloween
  #alien-ghost-companion.alien-message-visible
  #alien-speech-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.theme-halloween
  #alien-ghost-companion.alien-on-left
  #alien-speech-bubble {
  right: auto;
  left: 0;
}

body.theme-halloween
  #alien-ghost-companion.alien-on-right
  #alien-speech-bubble {
  right: 0;
  left: auto;
}

body.theme-halloween
  #alien-ghost-companion:not(.alien-message-visible)
  #alien-speech-bubble {
  opacity: 0;
  visibility: hidden;
}

/* ===== 21. VUELO ===== */

body.theme-halloween
  #alien-ghost-companion.alien-halloween-flight {
  will-change: transform;
}

/* ===== 22. ESTACIONAMIENTO EN LA CARTA ===== */

.alien-halloween-dock {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  max-width: 1280px;
  min-height: 155px;

  margin-inline: auto;
  padding: 8px clamp(20px, 5vw, 64px);

  background: transparent;
}

.alien-halloween-dock[hidden] {
  display: none;
}

body.theme-halloween
  #alien-ghost-companion.alien-is-docked {
  position: relative;

  top: auto;
  left: auto;
  right: auto;
  bottom: auto;

  width: 132px;
  height: 145px;

  flex: 0 0 auto;
  margin: 0;

  transform: none;
  transition: none;
  will-change: auto;
}

body.theme-halloween
  #alien-ghost-companion.alien-is-docked
  #alien-avatar-trigger {
  width: 124px;
  height: 145px;
}

body.theme-halloween
  #alien-ghost-companion.alien-is-docked
  #alien-speech-bubble {
  right: 0;
  left: auto;
}

/* ===== 23. ANIMACIONES ===== */

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

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

@keyframes halloween-bat-flight {
  0%, 100% {
    translate: 0 0;
    rotate: -4deg;
  }

  30% {
    translate: 18px -11px;
    rotate: 6deg;
  }

  65% {
    translate: -12px 7px;
    rotate: -6deg;
  }
}

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

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

@keyframes halloween-candle-flicker {
  0%, 100% {
    transform: translateX(-50%) scale(.95);
  }

  45% {
    transform: translateX(-50%) scale(1.05) rotate(2deg);
  }
}

@keyframes halloween-eye-blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }

  46% {
    transform: scaleY(.16);
  }
}

@keyframes halloween-potion-bubble {
  0%, 100% {
    transform: translateY(0) scale(.85);
    opacity: .3;
  }

  50% {
    transform: translateY(-9px) scale(1.1);
    opacity: .8;
  }
}

/* ===== 24. RESPONSIVE ===== */

@media (max-width: 1023px) {
  .h-branch {
    opacity: .15;
  }

  .h-signpost--route {
    right: 14px;
  }

  .h-sigil {
    width: 132px;
  }
}

@media (max-width: 767px) {
  .h-web,
  .h-branch,
  .h-window-bars {
    opacity: .12;
  }

  .h-moon--hero {
    top: 34px;
    right: 14px;
    width: 58px;
  }

  .h-bat--c,
  .h-ghost--c {
    display: none;
  }

  .h-candle {
    height: 48px;
  }

  body.theme-halloween #alien-ghost-companion {
    width: 99px;
    height: 125px;
  }

  body.theme-halloween #alien-avatar-trigger {
    width: 94px;
    height: 118px;
  }

  body.theme-halloween #alien-speech-bubble {
    width: 180px;
    max-width: min(180px, 72vw);
    padding: 9px 11px;
    font-size: 11px;
  }

  .alien-halloween-dock {
    min-height: 130px;
    padding: 5px 20px;
  }

  body.theme-halloween
    #alien-ghost-companion.alien-is-docked {
    width: 100px;
    height: 120px;
  }

  body.theme-halloween
    #alien-ghost-companion.alien-is-docked
    #alien-avatar-trigger {
    width: 95px;
    height: 116px;
  }
}

@media (max-width: 479px) {
  .h-sigil,
  .h-window-bars,
  .h-signpost,
  .h-grave--two {
    display: none;
  }

  .h-web {
    width: 82px;
    height: 82px;
  }

  body.theme-halloween #alien-speech-bubble {
    display: block;
  }
}

/* ===== 25. ACCESIBILIDAD ===== */

@media (prefers-reduced-motion: reduce) {
  .section-halloween-layer *,
  .section-halloween-layer *::before,
  .section-halloween-layer *::after {
    animation: none;
    transition: none;
  }

  body.theme-halloween #alien-ghost-companion,
  body.theme-halloween #alien-avatar-trigger,
  body.theme-halloween #alien-speech-bubble {
    animation: none;
    transition: none;
  }
}

/* ===== ===== AISLAMIENTO DEL MODO ===== ===== */

body:not(.theme-halloween) .section-halloween-layer,
body:not(.theme-halloween) #alien-ghost-companion,
body:not(.theme-halloween) .alien-halloween-dock,
body.theme-halloween .section-halloween-layer[hidden],
body.theme-halloween #alien-ghost-companion[hidden] {
  display: none;
}

body.theme-halloween #alien-speech-bubble {
  overflow-wrap: anywhere;
}

/* ===== ===== PREFERENCIAS DE ACCESIBILIDAD ===== ===== */

@media (prefers-reduced-motion: reduce) {
  #alien-ghost-companion *,
  #alien-ghost-companion *::before,
  #alien-ghost-companion *::after {
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  #alien-avatar-trigger:focus-visible {
    outline: 3px solid Highlight;
  }
}