:root {
  --ink: #3b2140;
  --deep: #32143f;
  --purple: #653675;
  --violet: #8a477f;
  --pink: #b95d91;
  --peach: #e7a46e;
  --orange: #e77e37;
  --cream: #fff0d2;
  --yellow: #f5cb88;
  --lilac: #e5b8d9;
  --paper: #f4d9ae;
  --shadow: rgba(20, 6, 28, 0.2);
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--cream);

  font-family: "Fredoka", system-ui, sans-serif;

  background: var(--deep);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -20;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 8%,
      rgba(180, 79, 142, 0.45),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 10% 55%,
      rgba(105, 48, 132, 0.32),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #47204f 0%,
      #32143f 52%,
      #26102f 100%
    );
}

.page-bg::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 226, 177, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 226, 177, 0.025) 1px,
      transparent 1px
    );

  background-size: 24px 24px;

  opacity: 0.35;
}

.page-bg::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 35%,
      rgba(15, 4, 23, 0.18) 100%
    );

  pointer-events: none;
}


/* =========================================================
   BACKGROUND TEXTURES
   ========================================================= */

.checker {
  display: none;
}

.halftone {
  position: absolute;

  width: 210px;
  height: 270px;

  opacity: 0.08;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 240, 194, 0.9) 0 1.8px,
      transparent 2px
    );

  background-size: 12px 12px;

  mask-image: linear-gradient(
    90deg,
    #000,
    transparent
  );
}

.halftone-left {
  left: -20px;
  top: 24%;

  transform: rotate(-5deg);
}

.halftone-right {
  right: -20px;
  top: 57%;

  transform:
    scaleX(-1)
    rotate(-5deg);
}

.bg-starfield {
  position: absolute;
  inset: 0;

  opacity: 0.12;

  background-image: url("assets/estrellas.png");
  background-size: 420px auto;
  background-repeat: repeat;
  background-position: center 40px;

  mix-blend-mode: screen;
}

.bg-specks {
  position: absolute;
  inset: 0;

  opacity: 0.08;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 245, 206, 0.9) 0 1.2px,
      transparent 1.7px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.6) 0 1px,
      transparent 1.5px
    );

  background-size:
    92px 118px,
    151px 167px;

  background-position:
    17px 60px,
    71px 97px;
}

.bg-wash {
  position: absolute;

  border-radius: 50%;

  filter: blur(45px);

  opacity: 0.1;
}

.wash-a {
  width: 310px;
  height: 310px;

  left: -150px;
  top: 42%;

  background: #ffb9dd;
}

.wash-b {
  width: 350px;
  height: 350px;

  right: -190px;
  top: 67%;

  background: #ffc67e;
}


/* =========================================================
   VERY SUBTLE PRINT TEXTURE
   ========================================================= */

.page-bg .print-texture {
  display: none;
}

body::after {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 20;

  pointer-events: none;

  opacity: 0.018;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8) 0,
      rgba(255, 255, 255, 0.8) 1px,
      transparent 1px,
      transparent 4px
    );

  mix-blend-mode: overlay;
}


/* =========================================================
   FIXED LACE
   ========================================================= */

.lace {
  display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  min-height: 400px;

  padding: 82px 18px 46px;

  display: grid;
  place-items: center;

  text-align: center;

  overflow: hidden;
}

.hero-content {
  position: relative;

  z-index: 8;

  width: min(650px, 100%);

  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;

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

  gap: 10px;

  color: #ffe8aa;

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.eyebrow span {
  color: #ffe05f;
}

.hero h1 {
  margin: 18px 0 7px;

  font-family: "Berkshire Swash", cursive;

  font-weight: 400;

  font-size:
    clamp(
      3.2rem,
      12vw,
      5.8rem
    );

  line-height: 0.94;

  color: #fff8df;

  text-shadow:
    2px 3px 0 #652b76,
    0 8px 0 rgba(72, 13, 105, 0.12);
}

.hero h1 em {
  font-style: normal;
  color: #ffd55b;
}

.title-ornament {
  display: flex;

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

  gap: 9px;

  width: min(255px, 80%);

  margin: 18px auto 14px;

  color: #ffe28b;
}

.title-ornament i {
  height: 2px;

  flex: 1;

  background: rgba(255, 226, 139, 0.55);
}

.title-ornament b {
  font-size: 0.85rem;
}

.hero p {
  margin: 0 auto 10px;

  color: #fff4da;

  font-size: 0.85rem;

  text-shadow:
    0 2px 4px rgba(60, 9, 82, 0.18);
}

.timezone {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #fff0c8;

  font-size: 0.58rem;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.timezone span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ffdf61;
}


/* =========================================================
   HERO ILLUSTRATIONS
   ========================================================= */

.hero-illustration {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.hero-web {
  position: absolute;

  width: 135px;

  opacity: 0.72;

  z-index: 2;
}

.hero-web-left {
  left: -1%;
  top: 205px;

  transform: rotate(-11deg);
}

.hero-web-right {
  right: -1%;
  top: 200px;

  transform:
    scaleX(-1)
    rotate(-7deg);
}

.hero-hat {
  position: absolute;

  width: 116px;

  left: 3%;
  top: 252px;

  z-index: 3;

  transform: rotate(-14deg);

  filter:
    drop-shadow(
      0 8px 4px rgba(54, 8, 74, 0.2)
    );

  animation:
    floatHat 5s ease-in-out infinite;
}

.hero-cinnamon {
  position: absolute;

  width: 105px;

  right: 2%;
  top: 246px;

  z-index: 4;

  filter:
    drop-shadow(
      0 8px 4px rgba(54, 8, 74, 0.18)
    );

  animation:
    peek 5.5s ease-in-out infinite;
}


/* =========================================================
   HERO PUMPKIN
   ========================================================= */

.hero-pumpkin {
  position: absolute;

  width: 235px;

  right: 17%;
  top: 266px;

  z-index: 4;

  filter:
    drop-shadow(
      0 7px 4px rgba(54, 8, 74, 0.2)
    );

  animation:
    pumpkin 4.4s ease-in-out infinite;
}

.hero-bow {
  position: absolute;

  width: 66px;

  left: 18%;
  bottom: 17px;

  z-index: 3;

  transform: rotate(-8deg);

  filter:
    drop-shadow(
      0 5px 3px rgba(54, 8, 74, 0.18)
    );
}


/* =========================================================
   INTRO
   ========================================================= */

.intro-wrap {
  width: min(690px, calc(100% - 28px));

  margin:
    0 auto
    70px;

  text-align: center;
}

.intro-ribbon {
  position: relative;

  z-index: 2;

  display: inline-block;

  margin-bottom: -2px;

  padding: 8px 17px;

  background: #552078;

  color: #ffe49b;

  border:
    2px solid #ffd55d;

  border-radius:
    8px 8px 6px 6px;

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.16em;

  box-shadow:
    0 4px 0 rgba(74, 17, 102, 0.2);
}

.intro-card {
  position: relative;

  padding:
    26px
    15px
    22px;

  background: #f4d9ae;

  border:
    2px solid #e9b878;

  border-radius: 12px;

  box-shadow:
    0 8px 0 rgba(20, 6, 28, 0.18);

  overflow: hidden;
}

.intro-card::before {
  content: "";

  position: absolute;
  inset: 9px;

  border:
    1px dashed rgba(83, 37, 79, 0.32);

  border-radius: 7px;
}

.intro-card::after {
  display: none;
}

.corner {
  position: absolute;

  z-index: 2;

  color: #7624a3;

  font-size: 1.05rem;
}

.corner-a {
  left: 16px;
  top: 14px;
}

.corner-b {
  right: 16px;
  top: 14px;
}

.intro-card h2 {
  position: relative;

  z-index: 2;

  margin: 5px 0 9px;

  font-family: "Berkshire Swash", cursive;

  font-weight: 400;

  font-size:
    clamp(
      1.9rem,
      7vw,
      2.8rem
    );

  line-height: 0.95;

  color: #55264f;
}

.intro-card h2 em {
  font-style: normal;
  color: #9b3e72;
}

.intro-card p {
  position: relative;

  z-index: 2;

  max-width: 500px;

  margin: 0 auto;

  color: #5e245e;

  font-size: 0.79rem;

  line-height: 1.5;
}

.intro-card p strong {
  font-weight: 800;
}

.mini-divider {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 8px;

  max-width: 460px;

  margin: 17px auto 0;

  color: #6e2392;

  font-size: 0.5rem;
  font-weight: 700;

  letter-spacing: 0.13em;
}

.mini-divider span {
  height: 2px;

  flex: 1;

  background:
    rgba(110, 35, 146, 0.28);
}


/* =========================================================
   EVENTS
   ========================================================= */

#schedule {
  width: 100%;
}

.event {
  position: relative;

  width: min(760px, 100%);

  margin:
    0 auto;

  /*
    MÁS ESPACIO ENTRE CADA EVENTO
  */
  padding:
    72px
    16px
    78px;

  isolation: isolate;

  display: flex;

  justify-content: center;
}

.event + .event {
  padding-top: 88px;
}

.event::before {
  content: "";

  position: absolute;

  z-index: -3;

  width: min(560px, 94%);

  height: 360px;

  top: 110px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(177, 90, 155, 0.18),
      transparent 72%
    );
}

.event::after {
  display: none;
}

.event-inner {
  position: relative;

  width: min(620px, 100%);

  margin-inline: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


/* =========================================================
   EVENT HEADER
   ========================================================= */

.event-number {
  position: relative;

  flex: 0 0 auto;

  width: 57px;
  height: 57px;

  margin:
    0 auto
    18px;

  display: grid;

  place-items: center;

  background: #e77e37;

  color: #fff4cb;

  border:
    2px solid #f8d5a1;

  border-radius: 50%;

  box-shadow:
    0 3px 0 #6d315e;

  font-family: "Creepster", cursive;

  font-size: 1.7rem;

  transform: rotate(-5deg);
}

.event-number::after {
  content: "";

  position: absolute;

  width: 28px;
  height: 2px;

  left: 50%;
  bottom: -10px;

  transform:
    translateX(-50%)
    rotate(-2deg);

  background: #d99b78;

  opacity: 0.65;

  border-radius: 999px;
}

.event:nth-child(2) .event-number::after {
  width: 22px;

  transform:
    translateX(-50%)
    rotate(2deg);
}

.event:nth-child(3) .event-number::after {
  width: 34px;

  transform:
    translateX(-50%)
    rotate(-4deg);
}

.event:nth-child(4) .event-number::after {
  width: 25px;

  transform:
    translateX(-50%)
    rotate(1deg);
}

.event:nth-child(5) .event-number::after {
  width: 30px;

  transform:
    translateX(-50%)
    rotate(-2deg);
}

.event:nth-child(6) .event-number::after {
  width: 20px;

  transform:
    translateX(-50%)
    rotate(3deg);
}

.event-date {
  color: #fff0bf;

  font-size: 0.54rem;
  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(70, 8, 91, 0.2);
}

.event-title {
  width: 100%;

  margin:
    7px
    0
    4px;

  font-family: "Berkshire Swash", cursive;

  font-weight: 400;

  font-size:
    clamp(
      2.15rem,
      9vw,
      3.35rem
    );

  line-height: 0.9;

  color: #fff8df;

  text-shadow:
    2px 3px 0 #652b76;

  text-wrap: balance;
}

.event-sub {
  width: min(100%, 330px);

  margin: 0 auto;

  color: #ffe9ce;

  font-size: 0.7rem;

  line-height: 1.4;

  font-weight: 600;

  text-shadow:
    0 2px 4px rgba(70, 8, 91, 0.18);

  text-wrap: balance;
}


/* =========================================================
   SCENE DIVIDER
   ========================================================= */

.scene-rule {
  position: relative;

  flex: 0 0 auto;

  width: min(320px, 76%);

  height: 28px;

  margin:
    22px auto;

  display: flex;

  align-items: center;

  justify-content: center;
}

.scene-rule::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 2px;

  background:
    rgba(255, 225, 143, 0.42);
}

.scene-rule span {
  position: relative;

  z-index: 1;

  width: 45px;
  height: 20px;

  background:
    radial-gradient(
      circle,
      #ffd85f 0 3px,
      transparent 4px
    );

  background-size: 12px 12px;
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.countdown-stage {
  position: relative;

  width: min(570px, 100%);

  margin: 0 auto;

  padding:
    24px
    0
    10px;
}

.countdown-stage::before {
  display: none;
}

.countdown {
  position: relative;

  z-index: 4;

  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  align-items: stretch;
}


/* =========================================================
   GRAVES
   ========================================================= */

.grave {
  position: relative;

  min-width: 0;

  height: 108px;

  padding:
    25px
    3px
    10px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  background:
    linear-gradient(
      180deg,
      #653675,
      #47234f
    );

  border:
    1px solid #c99a79;

  border-radius:
    34px
    34px
    7px
    7px;

  box-shadow:
    0 4px 0 #21102b;

  overflow: hidden;
}

.grave::before {
  content: "";

  position: absolute;

  inset: 7px;

  border:
    1px solid rgba(248, 213, 161, 0.17);

  border-radius:
    27px
    27px
    5px
    5px;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(255, 220, 104, 0.08),
      transparent 55%
    );
}

.grave::after {
  content: "";

  position: absolute;

  left: 15%;
  bottom: 15px;

  width: 18px;
  height: 22px;

  border-left:
    1px solid rgba(255, 220, 104, 0.22);

  border-radius: 50%;

  transform: rotate(18deg);
}


/* =========================================================
   CROSSES
   ========================================================= */

.cross {
  position: absolute;

  top: 7px;
  left: 50%;

  width: 15px;
  height: 15px;

  transform:
    translateX(-50%);

  opacity: 0.9;

  z-index: 2;
}

.cross::before,
.cross::after {
  content: "";

  position: absolute;

  background: #edc887;

  border-radius: 2px;
}

.cross::before {
  width: 15px;
  height: 3px;

  top: 6px;
  left: 0;
}

.cross::after {
  width: 3px;
  height: 15px;

  top: 0;
  left: 6px;
}


/* =========================================================
   COUNTDOWN NUMBERS
   ========================================================= */

.value {
  position: relative;

  z-index: 2;

  display: block;

  min-height: 30px;

  top: 8px;

  color: #fff0d2;

  font-family: "Creepster", cursive;

  font-size:
    clamp(
      1.45rem,
      6vw,
      2rem
    );

  line-height: 0.92;

  letter-spacing: 0.01em;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.value.tick {
  animation:
    tick 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.label {
  position: relative;

  z-index: 2;

  display: block;

  margin-top: 16px;

  color: #e5b8d9;

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.next-label {
  position: relative;

  z-index: 6;

  display: inline-flex;

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

  gap: 8px;

  max-width: 100%;

  margin:
    22px
    auto
    0;

  color: #f5cb88;

  font-size: 0.52rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  text-align: center;

  text-wrap: balance;
}

.next-label::before,
.next-label::after {
  content: "✦";

  font-size: 0.72rem;

  color: #ffd55b;
}


/* =========================================================
   EVENT ILLUSTRATIONS
   ========================================================= */

.scene-art {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


/* =========================================================
   WEBS
   ========================================================= */

.art-web {
  position: absolute;

  width: 112px;

  opacity: 0.68;

  filter:
    drop-shadow(
      0 3px 2px rgba(50, 8, 72, 0.14)
    );

  transform-origin: center;
}

.art-web.left {
  left: -4px;
  top: 115px;

  transform: rotate(-8deg);
}

.art-web.right {
  right: -4px;
  top: 108px;

  transform:
    scaleX(-1)
    rotate(-7deg);
}


/* =========================================================
   DIFFERENT WEB SIZES
   ========================================================= */

.event:nth-child(1) .art-web {
  width: 98px;
  opacity: 0.62;
}

.event:nth-child(2) .art-web {
  width: 145px;
  opacity: 0.72;
}

.event:nth-child(3) .art-web {
  width: 185px;
  opacity: 0.58;
}

.event:nth-child(4) .art-web {
  width: 112px;
  opacity: 0.66;
}

.event:nth-child(5) .art-web {
  width: 165px;
  opacity: 0.56;
}

.event:nth-child(6) .art-web {
  width: 92px;
  opacity: 0.60;
}


/* =========================================================
   DIFFERENT WEB POSITIONS
   ========================================================= */

.event:nth-child(1) .art-web.left {
  top: 5%;
  left: -1%;
}

.event:nth-child(2) .art-web.right {
  top: 12%;
  right: -2%;
}

.event:nth-child(3) .art-web.left {
  top: 1%;
  left: -5%;
}

.event:nth-child(4) .art-web.right {
  bottom: 8%;
  top: auto;
  right: 1%;
}

.event:nth-child(5) .art-web.left {
  top: 11%;
  left: -2%;
}

.event:nth-child(6) .art-web.right {
  top: 5%;
  right: 2%;
}


/* =========================================================
   HAT
   ========================================================= */

.art-hat {
  position: absolute;

  width: 108px;

  left: -2px;
  top: 82px;

  filter:
    drop-shadow(
      0 7px 3px rgba(48, 8, 73, 0.2)
    );

  transform: rotate(-12deg);

  animation:
    floatHat 5.2s ease-in-out infinite;
}


/* =========================================================
   PUMPKIN
   ========================================================= */

.art-pumpkin {
  position: absolute;

  width: 255px;
  max-width: none;

  right: 10px;
  top: 145px;

  filter:
    drop-shadow(
      0 7px 4px rgba(48, 8, 73, 0.22)
    );

  animation:
    pumpkin 4.2s ease-in-out infinite;
}


/* =========================================================
   CINNAMON
   ========================================================= */

.art-cinnamon {
  position: absolute;

  width: 105px;

  right: -3px;
  bottom: 105px;

  filter:
    drop-shadow(
      0 7px 3px rgba(48, 8, 73, 0.18)
    );

  animation:
    peek 5.4s ease-in-out infinite;
}


/* =========================================================
   BOW
   ========================================================= */

.art-bow {
  position: absolute;

  width: 58px;

  left: 50%;
  bottom: 66px;

  transform:
    translateX(-50%)
    rotate(-3deg);

  filter:
    drop-shadow(
      0 5px 3px rgba(48, 8, 73, 0.18)
    );
}


/* =========================================================
   ALTERNATING EVENT COMPOSITIONS
   ========================================================= */

.event:nth-child(even) .art-hat {
  left: auto;
  right: -2px;

  transform:
    scaleX(-1)
    rotate(-12deg);
}

.event:nth-child(even) .art-pumpkin {
  right: auto;

  left: 10px;
  top: 145px;
}

.event:nth-child(even) .art-cinnamon {
  right: auto;
  left: -3px;

  transform: scaleX(-1);
}

.event:nth-child(even) .art-bow {
  left: auto;
  right: 20%;

  transform: rotate(5deg);
}

.event:nth-child(even) .art-web.left {
  transform:
    scaleX(-1)
    rotate(-8deg);
}

.event:nth-child(even) .art-web.right {
  transform: rotate(-7deg);
}


/* =========================================================
   SMALL EDITORIAL DETAILS
   ========================================================= */

.event-inner::after {
  content: "✦";

  position: absolute;

  font-family:
    "Berkshire Swash",
    cursive;

  font-size: 15px;

  color:
    rgba(255, 213, 91, 0.48);

  pointer-events: none;
}

.event:nth-child(1) .event-inner::after {
  right: 13%;
  top: 7%;
}

.event:nth-child(2) .event-inner::after {
  left: 10%;
  bottom: 8%;

  transform: rotate(-12deg);
}

.event:nth-child(3) .event-inner::after {
  right: 9%;
  bottom: 12%;

  transform: rotate(8deg);
}

.event:nth-child(4) .event-inner::after {
  left: 13%;
  top: 9%;

  font-size: 11px;
}

.event:nth-child(5) .event-inner::after {
  right: 15%;
  top: 11%;

  font-size: 18px;
}

.event:nth-child(6) .event-inner::after {
  left: 12%;
  bottom: 9%;

  opacity: 0.3;
}


/* =========================================================
   EVENT STATES
   ========================================================= */

.event.reached .grave {
  filter: saturate(0.72);
  opacity: 0.88;
}

.event.reached .event-title {
  opacity: 0.88;
}

.event.reached .next-label {
  color: #ffeec1;
}

.event.next .countdown-stage::after {
  content: "";

  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 7px;

  width: 300px;
  height: 80px;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 213, 91, 0.25),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   CINNAMON MINI GAME
   ========================================================= */

.cinnamon-game {
  position: relative;

  width: min(760px, calc(100% - 28px));

  min-height: 500px;

  /*
    MÁS SEPARACIÓN DE LOS EVENTOS
  */
  margin:
    90px
    auto
    85px;

  padding:
    48px
    24px
    34px;

  overflow: hidden;

  isolation: isolate;

  text-align: center;

  background:
    radial-gradient(
      ellipse at 50% 78%,
      rgba(231, 126, 55, 0.16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(91, 42, 105, 0.96),
      rgba(54, 24, 67, 0.98)
    );

  border-top:
    1px solid rgba(255, 224, 145, 0.45);

  border-bottom:
    1px solid rgba(255, 224, 145, 0.3);

  box-shadow:
    0 -8px 30px rgba(16, 5, 24, 0.14),
    0 10px 30px rgba(16, 5, 24, 0.2);
}


/* =========================================================
   DECORATIVE FRAME
   ========================================================= */

.cinnamon-game::before {
  content: "";

  position: absolute;

  inset: 12px;

  border:
    1px dashed rgba(255, 225, 157, 0.28);

  pointer-events: none;
}

.cinnamon-game::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -110px;

  width: 390px;
  height: 220px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 203, 103, 0.15),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   SMALL DECORATIONS
   ========================================================= */

.game-decoration {
  position: absolute;

  z-index: 1;

  color: #ffd75f;

  font-family:
    "Berkshire Swash",
    cursive;

  opacity: 0.65;

  pointer-events: none;
}

.game-decoration-left {
  left: 26px;
  top: 27px;

  font-size: 1.1rem;

  transform: rotate(-12deg);
}

.game-decoration-right {
  right: 27px;
  top: 42px;

  font-size: 0.85rem;

  transform: rotate(9deg);
}


/* =========================================================
   GAME INTRO
   ========================================================= */

.game-intro {
  position: relative;

  z-index: 5;

  width: min(500px, 100%);

  margin: 0 auto;

  text-align: center;
}

.game-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #f7cb76;

  font-size: 0.56rem;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.game-eyebrow::before,
.game-eyebrow::after {
  content: "✦";

  color: #e77e37;

  font-size: 0.7rem;
}

.cinnamon-game h2 {
  margin:
    9px
    0
    5px;

  color: #fff4d6;

  font-family:
    "Berkshire Swash",
    cursive;

  font-size:
    clamp(
      2.25rem,
      8vw,
      3.5rem
    );

  font-weight: 400;

  line-height: 0.94;

  text-shadow:
    2px 3px 0 #54235f;
}

.game-intro p {
  margin: 0;

  color: #f7dfbc;

  font-size: 0.76rem;

  font-weight: 500;
}


/* =========================================================
   PLAYGROUND
   ========================================================= */

.cinnamon-playground {
  position: relative;

  z-index: 4;

  width: min(600px, 100%);

  height: 280px;

  margin:
    22px
    auto
    0;
}


/* =========================================================
   GROUND / LITTLE STAGE
   ========================================================= */

.cinnamon-playground::after {
  content: "";

  position: absolute;

  z-index: -1;

  left: 50%;
  bottom: 10px;

  width: 300px;
  height: 48px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(20, 6, 28, 0.38),
      transparent 70%
    );
}


/* =========================================================
   CINNAMON
   ========================================================= */

.cinnamon-target {
  position: absolute;

  left: 50%;
  bottom: 12px;

  width: 180px;
  height: 205px;

  transform:
    translateX(-50%);

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  z-index: 5;

  -webkit-tap-highlight-color: transparent;
}

.cinnamon-target img {
  position: absolute;

  left: 50%;
  bottom: 0;

  width: 155px;

  max-width: none;

  transform:
    translate(-50%, -40px);

  filter:
    drop-shadow(
      0 9px 4px rgba(28, 8, 38, 0.32)
    );

  user-select: none;

  -webkit-user-drag: none;

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}


/* =========================================================
   CINNAMON HOVER
   ========================================================= */

.cinnamon-target:hover img {
  transform:
    translate(-50%, -45px)
    rotate(-2deg);

  filter:
    drop-shadow(
      0 12px 5px rgba(28, 8, 38, 0.28)
    );
}


/* =========================================================
   CINNAMON HAPPY
   ========================================================= */

.cinnamon-target.happy img {
  animation:
    cinnamonHappy 0.65s ease-out;
}


/* =========================================================
   CINNAMON DRAG OVER
   ========================================================= */

.cinnamon-target.drag-over img {
  transform:
    translate(-50%, -48px)
    scale(1.06)
    rotate(2deg);

  filter:
    drop-shadow(
      0 0 14px rgba(255, 210, 95, 0.5)
    );
}


/* =========================================================
   LITTLE SPEECH LABEL
   ========================================================= */

.cinnamon-hint {
  position: absolute;

  left: 50%;
  top: -35px;

  transform:
    translateX(-50%);

  display: block;

  width: max-content;

  padding:
    6px
    10px;

  background: #f4d9ae;

  border:
    1px solid #d59b71;

  border-radius: 8px;

  color: #6b2e5c;

  font-size: 0.48rem;
  font-weight: 800;

  letter-spacing: 0.1em;

  box-shadow:
    0 3px 0 rgba(30, 8, 40, 0.18);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.cinnamon-hint::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -6px;

  width: 10px;
  height: 10px;

  transform:
    translateX(-50%)
    rotate(45deg);

  background: #f4d9ae;

  border-right:
    1px solid #d59b71;

  border-bottom:
    1px solid #d59b71;
}

.cinnamon-target:hover .cinnamon-hint {
  transform:
    translateX(-50%)
    translateY(-3px);
}


/* =========================================================
   CANDY AREA
   ========================================================= */

.candy-area {
  position: absolute;

  inset: 0;

  pointer-events: none;
}


/* =========================================================
   CANDIES
   SOLO IMÁGENES — SIN CÍRCULOS NI FONDOS
   ========================================================= */

.candy {
  position: absolute;

  width: 78px;
  height: 78px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  cursor: grab;

  pointer-events: auto;

  touch-action: manipulation;

  transition:
    transform 0.22s ease,
    opacity 0.25s ease,
    filter 0.22s ease;
}


/* =========================================================
   CANDY IMAGES
   ========================================================= */

.candy img {
  width: 68px;
  height: 68px;

  object-fit: contain;

  display: block;

  user-select: none;

  pointer-events: none;

  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 5px 3px rgba(32, 10, 40, 0.25)
    );
}


/* =========================================================
   INDIVIDUAL CANDY POSITIONS
   ========================================================= */

.candy-lollipop {
  left: 13%;
  top: 67px;

  transform:
    rotate(-12deg);
}

.candy-candy {
  right: 13%;
  top: 48px;

  transform:
    rotate(10deg);
}

.candy-chocolate {
  left: 20%;
  bottom: 18px;

  transform:
    rotate(7deg);
}


/* =========================================================
   CANDY HOVER
   ========================================================= */

.candy:hover {
  transform:
    translateY(-8px)
    rotate(0deg)
    scale(1.08);

  filter:
    drop-shadow(
      0 7px 5px rgba(32, 10, 40, 0.2)
    );
}

.candy:hover img {
  filter:
    drop-shadow(
      0 8px 4px rgba(32, 10, 40, 0.28)
    );
}


/* =========================================================
   SELECTED CANDY
   ========================================================= */

.candy.selected {
  transform:
    translateY(-8px)
    scale(1.08)
    rotate(-4deg);

  box-shadow: none;

  animation:
    candySelected 0.8s ease-in-out infinite;
}


/* =========================================================
   CANDY ACTIVE
   ========================================================= */

.candy:active {
  cursor: grabbing;

  transform:
    scale(0.92);
}


/* =========================================================
   CANDY REMOVAL
   ========================================================= */

.candy.eaten {
  pointer-events: none;

  animation:
    candyEaten 0.35s ease forwards;
}


/* =========================================================
   CANDY FOCUS
   ========================================================= */

.candy:focus-visible {
  outline:
    3px solid #ffd55b;

  outline-offset: 4px;
}


/* =========================================================
   GAME MESSAGE
   ========================================================= */

.game-message {
  position: relative;

  z-index: 6;

  min-height: 24px;

  margin:
    1px
    auto
    0;

  color: #ffe9bd;

  font-family:
    "Fredoka",
    sans-serif;

  font-size: 0.72rem;

  font-weight: 600;

  transition:
    opacity 0.2s ease;
}


/* =========================================================
   GAME COUNT
   ========================================================= */

.game-count {
  position: relative;

  z-index: 6;

  margin-top: 7px;

  color: #dca6c6;

  font-size: 0.5rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


/* =========================================================
   GAME ANIMATIONS
   ========================================================= */

@keyframes cinnamonHappy {
  0% {
    transform:
      translate(-50%, -40px)
      scale(1);
  }

  35% {
    transform:
      translate(-50%, -48px)
      scale(1.07)
      rotate(-3deg);
  }

  65% {
    transform:
      translate(-50%, -42px)
      scale(0.98)
      rotate(3deg);
  }

  100% {
    transform:
      translate(-50%, -40px)
      scale(1);
  }
}

@keyframes candySelected {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -4px;
  }
}

@keyframes candyEaten {
  0% {
    opacity: 1;

    transform:
      scale(1)
      rotate(0);
  }

  40% {
    opacity: 1;

    transform:
      scale(1.18)
      rotate(-8deg);
  }

  100% {
    opacity: 0;

    transform:
      translateY(35px)
      scale(0.2)
      rotate(18deg);
  }
}


/* =========================================================
   SCROLL HINT
   ========================================================= */

.scroll-hint {
  padding:
    10px
    0
    50px;

  color: #ffe7aa;

  font-size: 0.5rem;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-align: center;

  text-transform: uppercase;

  opacity: 0.75;
}

.scroll-hint span {
  display: inline-block;

  width: 24px;
  height: 1px;

  margin:
    0
    8px;

  vertical-align: middle;

  background:
    rgba(255, 231, 170, 0.45);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes tick {
  0% {
    transform:
      translateY(-9px)
      scale(0.94);

    opacity: 0.2;
  }

  55% {
    transform:
      translateY(2px)
      scale(1.04);

    opacity: 1;
  }

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

@keyframes floatHat {
  0%,
  100% {
    transform:
      rotate(-12deg)
      translateY(0);
  }

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

@keyframes pumpkin {
  0%,
  100% {
    transform:
      rotate(2deg)
      scale(1);
  }

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

@keyframes peek {
  0%,
  100% {
    transform:
      translateY(2px)
      rotate(-2deg);
  }

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


/* =========================================================
   MOBILE — 620px
   ========================================================= */

@media (max-width: 620px) {

  /* ---------- HERO ---------- */

  .hero {
    min-height: 350px;

    padding:
      78px
      16px
      38px;
  }

  .hero h1 {
    font-size:
      clamp(
        3rem,
        12.5vw,
        4rem
      );
  }

  .hero p {
    font-size: 0.78rem;
  }

  .hero-web {
    width: 88px;
  }

  .hero-web-left {
    left: -8%;
    top: 198px;
  }

  .hero-web-right {
    right: -8%;
    top: 198px;
  }

  .hero-hat {
    width: 82px;

    left: -2px;
    top: 242px;
  }

  .hero-cinnamon {
    width: 78px;

    right: -2px;
    top: 242px;
  }

  /* CALABAZA GRANDE EN MOBILE */

  .hero-pumpkin {
    width: 92px;

    right: 11%;
    top: 270px;
  }

  .hero-bow {
    width: 53px;

    left: 17%;
  }


  /* ---------- INTRO ---------- */

  .intro-wrap {
    width: calc(100% - 28px);

    margin-bottom: 52px;
  }

  .intro-card {
    padding:
      26px
      15px
      22px;
  }

  .intro-card h2 {
    font-size: 2.2rem;
  }

  .intro-card p {
    font-size: 0.68rem;
  }

  .intro-ribbon {
    padding:
      7px
      12px;

    font-size: 0.54rem;
  }


  /* ---------- EVENTS ---------- */

  .event {
    padding:
      52px
      14px
      64px;
  }

  .event + .event {
    padding-top: 70px;
  }

  .event-inner {
    width: 100%;
  }

  .event-number {
    width: 51px;
    height: 51px;

    margin-bottom: 17px;

    font-size: 1.5rem;
  }

  .event-title {
    font-size:
      clamp(
        2rem,
        8vw,
        2.5rem
      );

    line-height: 1;
  }

  .event-sub {
    width:
      min(
        100%,
        290px
      );

    font-size: 0.78rem;
  }


  /* ---------- DIVIDER ---------- */

  .scene-rule {
    margin-top: 15px;
    margin-bottom: 15px;
  }


  /* ---------- COUNTDOWN ---------- */

  .countdown-stage {
    width: 100%;

    padding:
      22px
      0
      8px;
  }

  .countdown {
    gap: 6px;
  }

  .grave {
    height: 96px;

    padding:
      24px
      3px
      8px;

    border-radius:
      30px
      30px
      6px
      6px;
  }

  .value {
    top: 6px;

    font-size:
      clamp(
        1.35rem,
        6.5vw,
        1.7rem
      );
  }

  .label {
    margin-top: 13px;

    font-size: 0.52rem;

    letter-spacing: 0.04em;
  }

  .next-label {
    max-width: 94%;

    margin-top: 17px;

    gap: 6px;

    font-size: 0.46rem;

    letter-spacing: 0.12em;
  }


  /* ---------- EVENT ART ---------- */

  .art-web {
    width: 82px;

    opacity: 0.65;
  }

  .art-web.left {
    left: -12px;
    top: 112px;
  }

  .art-web.right {
    right: -12px;
    top: 107px;
  }

  .event:nth-child(1) .art-web {
    width: 70px;
  }

  .event:nth-child(2) .art-web {
    width: 105px;
  }

  .event:nth-child(3) .art-web {
    width: 125px;
  }

  .event:nth-child(4) .art-web {
    width: 82px;
  }

  .event:nth-child(5) .art-web {
    width: 112px;
  }

  .event:nth-child(6) .art-web {
    width: 68px;
  }

  .event:nth-child(1) .art-web.left {
    left: -8px;
    top: 108px;
  }

  .event:nth-child(2) .art-web.right {
    right: -12px;
    top: 120px;
  }

  .event:nth-child(3) .art-web.left {
    left: -18px;
    top: 101px;
  }

  .event:nth-child(4) .art-web.right {
    right: -8px;
    top: auto;
    bottom: 106px;
  }

  .event:nth-child(5) .art-web.left {
    left: -8px;
    top: 115px;
  }

  .event:nth-child(6) .art-web.right {
    right: -8px;
    top: 106px;
  }

  .art-hat {
    width: 80px;

    left: -6px;
    top: 88px;
  }

  .art-pumpkin {
    width: 135px;
    max-width: none;
    right: 4px;
    top: 145px;
  }

  .art-cinnamon {
    width: 80px;

    right: -8px;
    bottom: 101px;
  }

  .art-bow {
    width: 52px;

    bottom: 64px;
  }


  /* ---------- ALTERNATING ART ---------- */

  .event:nth-child(even) .art-hat {
    right: -6px;
  }

  .event:nth-child(even) .art-pumpkin {
    left: 4px;
    top: 156px;
  }

  .event:nth-child(even) .art-cinnamon {
    left: -8px;
  }

  .event:nth-child(even) .art-bow {
    right: 15%;
  }


  /* ---------- SMALL DETAILS ---------- */

  .event-inner::after {
    font-size: 11px;
  }

  .event:nth-child(1) .event-inner::after {
    right: 9%;
    top: 7%;
  }

  .event:nth-child(2) .event-inner::after {
    left: 7%;
    bottom: 7%;
  }

  .event:nth-child(3) .event-inner::after {
    right: 6%;
    bottom: 11%;
  }

  .event:nth-child(4) .event-inner::after {
    left: 8%;
    top: 8%;
  }

  .event:nth-child(5) .event-inner::after {
    right: 10%;
    top: 10%;
  }

  .event:nth-child(6) .event-inner::after {
    left: 8%;
    bottom: 8%;
  }


  /* ---------- CINNAMON GAME ---------- */

  .cinnamon-game {
    width:
      calc(100% - 28px);

    min-height: 470px;

    margin-top: 65px;
    margin-bottom: 55px;

    padding:
      38px
      14px
      27px;
  }

  .game-decoration-left {
    left: 17px;
    top: 23px;
  }

  .game-decoration-right {
    right: 18px;
    top: 29px;
  }

  .game-eyebrow {
    font-size: 0.5rem;
  }

  .cinnamon-game h2 {
    font-size: 2.45rem;
  }

  .game-intro p {
    font-size: 0.68rem;
  }

  .cinnamon-playground {
    height: 265px;

    margin-top: 16px;
  }


  /* ---------- CINNAMON ---------- */

  .cinnamon-target {
    width: 160px;
    height: 185px;

    bottom: 5px;
  }

  .cinnamon-target img {
    width: 135px;

    transform:
      translate(-50%, -40px);
  }


  /* ---------- SPEECH LABEL ---------- */

  .cinnamon-hint {
    top: -35px;

    font-size: 0.43rem;
  }


  /* ---------- CANDIES ---------- */

  .candy {
    width: 62px;
    height: 62px;
  }

  .candy img {
    width: 56px;
    height: 56px;
  }

  .candy-lollipop {
    left: 6%;
    top: 60px;
  }

  .candy-candy {
    right: 6%;
    top: 48px;
  }

  .candy-chocolate {
    left: 12%;
    bottom: 18px;
  }


  /* ---------- GAME TEXT ---------- */

  .game-message {
    font-size: 0.67rem;
  }

  .game-count {
    font-size: 0.46rem;
  }


  /* ---------- SCROLL ---------- */

  .scroll-hint {
    padding-bottom: 50px;
  }
}


/* =========================================================
   VERY SMALL SCREENS — 380px
   ========================================================= */

@media (max-width: 380px) {

  .hero h1 {
    font-size: 2.9rem;
  }

  .hero-hat {
    width: 74px;
  }

  .hero-cinnamon {
    width: 70px;
  }

  .hero-pumpkin {
    width: 78px;

    right: 8%;
    top: 272px;
  }

  .event {
    padding-left: 11px;
    padding-right: 11px;

    padding-top: 46px;
    padding-bottom: 58px;
  }

  .event + .event {
    padding-top: 62px;
  }

  .countdown {
    gap: 5px;
  }

  .grave {
    height: 92px;

    padding-left: 2px;
    padding-right: 2px;
  }

  .value {
    font-size: 1.3rem;
  }

  .label {
    font-size: 0.47rem;
  }

  .cross {
    transform:
      translateX(-50%)
      scale(0.9);
  }


  /* ---------- SMALL EVENT PUMPKINS ---------- */

  .art-pumpkin {
    width: 78px;

    right: 1px;
    top: 158px;
  }

  .event:nth-child(even) .art-pumpkin {
    left: 1px;
    top: 158px;
  }


  /* ---------- GAME ---------- */

  .cinnamon-game {
    width:
      calc(100% - 22px);

    min-height: 450px;

    padding-top: 34px;

    margin-top: 55px;
  }

  .cinnamon-game h2 {
    font-size: 2.15rem;
  }

  .cinnamon-playground {
    height: 250px;
  }

  .cinnamon-target {
    width: 145px;
    height: 170px;

    bottom: 5px;
  }

  .cinnamon-target img {
    width: 120px;

    transform:
      translate(-50%, -40px);
  }

  .cinnamon-hint {
    top: -32px;
  }


  /* ---------- CANDIES ---------- */

  .candy {
    width: 55px;
    height: 55px;
  }

  .candy img {
    width: 50px;
    height: 50px;
  }

  .candy-lollipop {
    left: 3%;
  }

  .candy-candy {
    right: 3%;
  }

  .candy-chocolate {
    left: 8%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;
  }

  .hero-hat,
  .hero-cinnamon,
  .hero-pumpkin,
  .art-hat,
  .art-pumpkin,
  .art-cinnamon,
  .art-bow,
  .value,
  .cinnamon-target img {
    animation: none !important;
  }
}