:root {
  --turquoise-50: #e8fbfa;
  --turquoise-100: #c9f4f1;
  --turquoise-200: #9ee8e3;
  --turquoise-300: #5fd7d2;
  --turquoise-500: #18b7b0;
  --turquoise-600: #0b9691;
  --turquoise-700: #087b78;
  --turquoise-800: #075f67;
  --sky-50: #f1faff;
  --sky-100: #dff3ff;
  --sky-200: #bce5fb;
  --sky-300: #83cff2;
  --sky-500: #3ea6d6;
  --sky-700: #1e7099;
  --deep-blue: #0a4e69;
  --warm-white: #f8ffff;
  --cream: #eaf8ff;
  --soft-gold: var(--sky-300);
  --ink: #173d4b;
  --muted: #557985;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 24px 80px rgb(10 78 105 / 16%);
  --radius: 1.75rem;
  --header-height: 4.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: linear-gradient(180deg, var(--turquoise-50), var(--sky-50));
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

body.dialog-open {
  overflow: hidden;
}

body.menu-open {
  overflow: hidden;
}

body.game-active {
  overflow: hidden;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--sky-700);
  outline-offset: 4px;
}

::selection {
  color: var(--deep-blue);
  background: var(--turquoise-300);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  color: white;
  background: var(--deep-blue);
  border-radius: 0.5rem;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
}

.section-pad {
  padding-block: clamp(5rem, 10vw, 9rem);
}

/* Entrada interactiva: El reto de La Molona */
.unlock-game {
  position: fixed;
  z-index: 1000;
  inset: 0;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  color: white;
  background: var(--deep-blue);
  overscroll-behavior: contain;
  transition: background 200ms ease;
}

.unlock-game[hidden],
.unlock-panel[hidden] {
  display: none;
}

.unlock-game.is-opening {
  overflow: hidden;
  background: transparent;
}

.unlock-door {
  position: fixed;
  z-index: 0;
  inset-block: 0;
  width: 50.2%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgb(131 207 242 / 36%), transparent 17rem),
    linear-gradient(155deg, var(--turquoise-800), var(--sky-700));
  box-shadow: inset 0 0 5rem rgb(5 55 74 / 22%);
  transition: transform 900ms cubic-bezier(.76, 0, .24, 1);
}

.unlock-door::before {
  position: absolute;
  inset-block: 0;
  width: 1px;
  content: "";
  background: rgb(255 255 255 / 28%);
  box-shadow: 0 0 1.5rem rgb(131 207 242 / 75%);
}

.unlock-door-left {
  left: 0;
}

.unlock-door-left::before {
  right: 0;
}

.unlock-door-right {
  right: 0;
}

.unlock-door-right::before {
  left: 0;
}

.unlock-door > span {
  color: rgb(255 255 255 / 8%);
  font-family: var(--serif);
  font-size: clamp(8rem, 38vw, 30rem);
  line-height: 1;
  user-select: none;
}

.unlock-game.is-opening .unlock-door-left {
  transform: translateX(-101%);
}

.unlock-game.is-opening .unlock-door-right {
  transform: translateX(101%);
}

.unlock-game-glow {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgb(95 215 210 / 22%), transparent 17rem),
    radial-gradient(circle at 85% 80%, rgb(131 207 242 / 24%), transparent 19rem);
  transition: opacity 220ms ease;
}

.unlock-game.is-opening .unlock-game-glow {
  opacity: 0;
}

.unlock-game-shell {
  position: relative;
  z-index: 2;
  width: min(100% - 2rem, 46rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding: max(5.25rem, calc(env(safe-area-inset-top) + 4.5rem)) 0 max(2rem, env(safe-area-inset-bottom));
  display: grid;
  align-items: center;
  transition: opacity 220ms ease, transform 220ms ease;
}

.unlock-game.is-opening .unlock-game-shell {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.unlock-skip {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 0;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  color: rgb(255 255 255 / 76%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px;
  cursor: pointer;
}

.unlock-skip:hover {
  color: white;
  background: rgb(255 255 255 / 14%);
}

.unlock-panel {
  width: 100%;
  padding: clamp(1.35rem, 5vw, 2.5rem);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 7%));
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: clamp(1.5rem, 7vw, 2.5rem);
  box-shadow: 0 28px 80px rgb(2 36 52 / 38%);
  backdrop-filter: blur(18px);
  animation: unlock-panel-in 380ms ease both;
}

@keyframes unlock-panel-in {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to { opacity: 1; transform: none; }
}

.unlock-intro {
  text-align: center;
}

.unlock-lock,
.unlock-safe-icon {
  width: 4.6rem;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  background: linear-gradient(145deg, var(--turquoise-300), var(--sky-300));
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 1.45rem;
  box-shadow: 0 18px 50px rgb(3 45 63 / 24%);
  transform: rotate(-4deg);
}

.unlock-eyebrow {
  margin: 0 0 0.65rem;
  color: var(--turquoise-100);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unlock-intro h1,
.unlock-panel h2 {
  margin: 0;
  color: white;
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 0.98;
  text-wrap: balance;
}

.unlock-intro > p:not(.unlock-eyebrow) {
  margin: 1.1rem 0 0;
  color: rgb(255 255 255 / 78%);
}

.unlock-intro > .unlock-intro-question {
  margin-top: 0.15rem;
  color: white;
  font-weight: 750;
}

.unlock-main-button {
  width: 100%;
  min-height: 56px;
  margin-top: 1.4rem;
  padding: 0.85rem 1rem;
  color: var(--deep-blue);
  background: linear-gradient(120deg, var(--turquoise-300), var(--sky-300));
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgb(3 49 66 / 30%);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.unlock-main-button:hover {
  box-shadow: 0 20px 50px rgb(3 49 66 / 42%);
  transform: translateY(-2px);
}

.unlock-intro > small,
.unlock-success > small {
  display: block;
  margin-top: 0.9rem;
  color: rgb(255 255 255 / 58%);
  line-height: 1.45;
}

.unlock-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: rgb(255 255 255 / 67%);
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.unlock-progress-head p {
  margin: 0;
  color: white;
}

.unlock-progress {
  height: 0.5rem;
  margin-bottom: 1.8rem;
  overflow: hidden;
  background: rgb(255 255 255 / 13%);
  border-radius: 999px;
}

.unlock-progress i {
  display: block;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, var(--turquoise-300), var(--sky-300));
  border-radius: inherit;
  box-shadow: 0 0 1rem var(--turquoise-300);
  transition: width 350ms ease;
}

.unlock-progress .game-progress-1 { width: 20%; }
.unlock-progress .game-progress-2 { width: 40%; }
.unlock-progress .game-progress-3 { width: 60%; }
.unlock-progress .game-progress-4 { width: 80%; }
.unlock-progress .game-progress-5 { width: 100%; }

.unlock-quiz h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(1.85rem, 8vw, 3.25rem);
}

.unlock-options {
  display: grid;
  gap: 0.7rem;
}

.unlock-option {
  min-height: 56px;
  padding: 0.85rem 1rem;
  color: white;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.unlock-option:hover {
  background: rgb(255 255 255 / 17%);
  border-color: rgb(158 232 227 / 55%);
  transform: translateX(0.2rem);
}

.unlock-option.is-correct {
  color: var(--deep-blue);
  background: var(--turquoise-200);
  border-color: white;
}

.unlock-option.is-wrong,
.unlock-safe input.is-wrong {
  animation: unlock-shake 320ms ease;
  border-color: rgb(255 179 189 / 75%);
}

@keyframes unlock-shake {
  25% { transform: translateX(-0.35rem); }
  50% { transform: translateX(0.35rem); }
  75% { transform: translateX(-0.18rem); }
}

.unlock-feedback {
  min-height: 3.4rem;
  margin: 1rem 0 0;
  color: rgb(255 255 255 / 70%);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.unlock-feedback.is-correct {
  color: var(--turquoise-100);
}

.unlock-feedback.is-wrong {
  color: #ffd5dc;
}

.unlock-safe,
.unlock-success {
  text-align: center;
}

.unlock-safe h2,
.unlock-success h2 {
  font-size: clamp(2rem, 9vw, 3.75rem);
}

.unlock-safe > p:not(.unlock-eyebrow, .unlock-feedback),
.unlock-success > p:not(.unlock-eyebrow) {
  color: rgb(255 255 255 / 76%);
}

.unlock-safe form {
  margin-top: 1.4rem;
}

.unlock-safe label {
  display: block;
  margin-bottom: 0.55rem;
  color: white;
  font-weight: 800;
  text-align: left;
}

.unlock-safe label small {
  color: rgb(255 255 255 / 55%);
  font-weight: 600;
}

.unlock-safe input {
  width: 100%;
  min-height: 64px;
  padding: 0.7rem 1rem;
  color: var(--deep-blue);
  background: rgb(255 255 255 / 94%);
  border: 2px solid transparent;
  border-radius: 1rem;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-align: center;
}

.unlock-safe input::placeholder {
  color: rgb(10 78 105 / 42%);
  letter-spacing: 0.18em;
}

.unlock-safe form p {
  margin: 0.55rem 0 0;
  color: rgb(255 255 255 / 58%);
  font-size: 0.8rem;
  text-align: left;
}

.unlock-confirmed {
  width: 4.7rem;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  color: var(--deep-blue);
  background: linear-gradient(145deg, var(--turquoise-200), white);
  border-radius: 50%;
  font-size: 2.5rem;
  font-weight: 900;
  box-shadow: 0 0 0 0.65rem rgb(95 215 210 / 13%);
}

.unlock-success .unlock-welcome {
  margin-bottom: 0;
  color: white;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 800;
}

.unlock-success .unlock-welcome + p {
  margin-top: 0.3rem;
}

.unlock-open-button {
  min-height: 62px;
  font-size: 1.05rem;
}

.unlock-burst {
  position: fixed;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.game-spark {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.65rem;
  opacity: 0;
  animation: game-spark 900ms cubic-bezier(.2,.75,.2,1) both;
}

.game-spark-1{--x:-9rem;--y:-13rem;--r:-25deg}
.game-spark-2{--x:-3rem;--y:-15rem;--r:18deg;animation-delay:40ms}
.game-spark-3{--x:5rem;--y:-14rem;--r:35deg;animation-delay:80ms}
.game-spark-4{--x:10rem;--y:-9rem;--r:-15deg;animation-delay:30ms}
.game-spark-5{--x:12rem;--y:-2rem;--r:45deg;animation-delay:100ms}
.game-spark-6{--x:9rem;--y:7rem;--r:-30deg;animation-delay:50ms}
.game-spark-7{--x:4rem;--y:12rem;--r:25deg;animation-delay:120ms}
.game-spark-8{--x:-4rem;--y:13rem;--r:-18deg;animation-delay:70ms}
.game-spark-9{--x:-10rem;--y:8rem;--r:30deg;animation-delay:20ms}
.game-spark-10{--x:-12rem;--y:1rem;--r:-40deg;animation-delay:90ms}
.game-spark-11{--x:-11rem;--y:-6rem;--r:22deg;animation-delay:130ms}
.game-spark-12{--x:2rem;--y:-10rem;--r:-12deg;animation-delay:60ms}

@keyframes game-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1.25); }
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  color: white;
  background: linear-gradient(180deg, rgb(10 78 105 / 90%), transparent);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  background: linear-gradient(100deg, rgb(7 95 103 / 98%), rgb(30 112 153 / 98%));
  box-shadow: 0 6px 30px rgb(7 95 103 / 22%);
  backdrop-filter: blur(12px);
}

.brand {
  z-index: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: white;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.brand b {
  color: var(--turquoise-300);
}

.brand-label {
  white-space: nowrap;
}

.brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 0.75rem;
  box-shadow: 0 0.35rem 1rem rgb(2 28 43 / 22%);
}

.menu-button {
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: white;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  cursor: pointer;
}

.menu-button span[aria-hidden] {
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px currentColor, 0 6px currentColor;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.menu-button[aria-expanded="true"] span[aria-hidden] {
  transform: rotate(45deg);
  box-shadow: none;
}

.menu-button[aria-expanded="true"] span[aria-hidden]::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  transform: rotate(90deg);
}

.site-nav {
  position: fixed;
  z-index: 1;
  top: calc(var(--header-height) + 0.5rem);
  right: max(1rem, env(safe-area-inset-right));
  left: max(1rem, env(safe-area-inset-left));
  max-height: calc(100svh - var(--header-height) - 1.5rem);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.15rem;
  overflow-y: auto;
  color: white;
  background: linear-gradient(145deg, rgb(7 95 103 / 99%), rgb(30 112 153 / 99%));
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgb(4 47 62 / 42%);
  backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.75rem) scale(0.985);
  transform-origin: top;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.site-nav a {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:not(.nav-gift)::after {
  color: var(--turquoise-300);
  content: "→";
  font-size: 1.1rem;
}

.site-nav .nav-gift {
  width: 100%;
  margin-top: 0.6rem;
  padding-inline: 1.5rem;
  justify-content: center;
  color: var(--deep-blue);
  background: linear-gradient(120deg, var(--turquoise-300), var(--sky-300));
  border-bottom: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 750;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  gap: 3rem;
  padding: calc(var(--header-height) + 3.5rem) 1rem 6rem;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 15% 20%, rgb(223 243 255 / 38%), transparent 30rem),
    radial-gradient(circle at 88% 70%, rgb(95 215 210 / 38%), transparent 32rem),
    linear-gradient(145deg, #0a5570 0%, #078784 50%, #278db8 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -20vw -10vw;
  height: 25vw;
  min-height: 9rem;
  background: linear-gradient(90deg, var(--turquoise-50), var(--sky-50));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
  width: min(100%, 35rem);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--turquoise-800);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow-light {
  color: var(--turquoise-300);
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.25rem, 22vw, 9rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.06em;
}

.hero-subtitle {
  margin: 1rem 0 1.8rem;
  color: var(--turquoise-300);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 8vw, 3.6rem);
  line-height: 1;
}

.hero-quote {
  max-width: 32rem;
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 4.8vw, 1.65rem);
  line-height: 1.45;
}

.hero-note {
  margin: 0;
  color: rgb(255 255 255 / 72%);
  font-size: 0.95rem;
}

.hero-actions,
.final-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--deep-blue);
  background: linear-gradient(120deg, var(--turquoise-300), var(--sky-300));
  box-shadow: 0 14px 40px rgb(95 215 210 / 30%);
}

.button-ghost {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

.hero-actions .button-ghost {
  background: rgb(21 56 68 / 62%);
  backdrop-filter: blur(8px);
}

.button-gold {
  color: var(--deep-blue);
  background: linear-gradient(120deg, var(--sky-300), var(--turquoise-300));
}

.hero-visual {
  isolation: isolate;
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: min(82vw, 24rem);
  margin: 0 auto;
  padding: 0.55rem;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 10rem 10rem 1.5rem 1.5rem;
  box-shadow: 0 30px 90px rgb(3 28 33 / 35%);
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.hero-photo picture {
  display: grid;
  min-height: min(112vw, 32rem);
  place-items: center;
  overflow: hidden;
  background: var(--deep-blue);
  border-radius: inherit;
}

.hero-photo img {
  width: 100%;
  height: min(112vw, 32rem);
  object-fit: contain;
}

.hero-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  padding: 0.65rem 1rem;
  color: var(--deep-blue);
  background: linear-gradient(120deg, var(--sky-300), var(--turquoise-300));
  border-radius: 999px;
  font-weight: 800;
  transform: rotate(-3deg);
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
}

.hero-orbit-one {
  width: 22rem;
  height: 22rem;
  top: -8rem;
  right: -10rem;
}

.hero-orbit-two {
  width: 8rem;
  height: 8rem;
  bottom: 14rem;
  left: -4rem;
  border-color: rgb(131 207 242 / 45%);
}

.scroll-cue {
  position: absolute;
  z-index: 1;
  bottom: 1.5rem;
  left: 50%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgb(255 255 255 / 72%);
  font-size: 0.75rem;
  text-decoration: none;
  transform: translateX(-50%);
}

.hero > .scroll-cue {
  color: var(--deep-blue);
}

.scroll-cue i {
  width: 1px;
  height: 2.5rem;
  display: block;
  background: linear-gradient(white, transparent);
}

.beauty-verdict {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 7rem);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 10% 20%, rgb(95 215 210 / 30%), transparent 18rem),
    radial-gradient(circle at 90% 85%, rgb(131 207 242 / 34%), transparent 22rem),
    linear-gradient(125deg, var(--deep-blue), var(--turquoise-800) 52%, var(--sky-700));
}

.beauty-verdict::before {
  position: absolute;
  right: -0.05em;
  bottom: -0.28em;
  content: "A";
  color: rgb(255 255 255 / 5%);
  font-family: var(--serif);
  font-size: clamp(18rem, 60vw, 42rem);
  line-height: 1;
  pointer-events: none;
}

.beauty-verdict-layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
}

.beauty-verdict-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 11vw, 5.4rem);
  line-height: 0.94;
  text-wrap: balance;
}

.beauty-verdict-copy > p:last-child {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  color: rgb(255 255 255 / 76%);
  font-size: 1.05rem;
}

.beauty-certificate {
  position: relative;
  padding: clamp(1.5rem, 6vw, 3rem);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0%, rgb(95 215 210 / 30%), transparent 14rem),
    linear-gradient(145deg, rgb(255 255 255 / 98%), var(--turquoise-50));
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: calc(var(--radius) + 0.35rem);
  box-shadow: 0 28px 80px rgb(3 40 57 / 38%);
}

.beauty-certificate::after {
  position: absolute;
  right: -2.5rem;
  bottom: -3.5rem;
  width: 10rem;
  aspect-ratio: 1;
  content: "";
  border: 1.2rem solid rgb(13 147 141 / 8%);
  border-radius: 50%;
}

.beauty-certificate-mark {
  width: 4.1rem;
  aspect-ratio: 1;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, var(--turquoise-600), var(--sky-700));
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 0 0 0.55rem rgb(13 147 141 / 10%);
}

.beauty-certificate-label {
  margin: 0;
  color: var(--turquoise-700);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.beauty-certificate blockquote {
  margin: 0.85rem 0 1.5rem;
}

.beauty-certificate blockquote p {
  margin: 0;
  color: var(--deep-blue);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5.8vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
}

.beauty-verdict-points {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.6rem;
}

.beauty-verdict-points p {
  min-height: 4rem;
  margin: 0;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-content: center;
  background: rgb(201 244 241 / 42%);
  border: 1px solid rgb(13 147 141 / 14%);
  border-radius: 1rem;
}

.beauty-verdict-points span {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 1.35rem;
}

.beauty-verdict-points b {
  color: var(--turquoise-800);
  font-size: 0.76rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.beauty-verdict-points small {
  color: var(--muted);
  font-weight: 700;
}

.beauty-certificate-final {
  position: relative;
  z-index: 1;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  color: var(--turquoise-800);
  border-top: 1px dashed rgb(13 147 141 / 30%);
  font-weight: 850;
}

.letter-section,
.final-letter {
  background:
    radial-gradient(circle at 10% 10%, rgb(95 215 210 / 32%), transparent 22rem),
    radial-gradient(circle at 90% 80%, rgb(131 207 242 / 30%), transparent 24rem),
    linear-gradient(150deg, var(--turquoise-50), var(--sky-100));
}

.letter {
  position: relative;
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: clamp(2rem, 8vw, 5rem);
  background: linear-gradient(145deg, var(--warm-white), var(--sky-50));
  border-top: 1px solid var(--sky-200);
  border-right: 1px solid var(--sky-200);
  border-bottom: 1px solid var(--sky-200);
  border-left: 5px solid var(--turquoise-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}

.letter::before {
  content: "“";
  position: absolute;
  top: -1rem;
  right: 1rem;
  color: var(--turquoise-100);
  font-family: var(--serif);
  font-size: 8rem;
  line-height: 1;
}

.letter h2 {
  position: relative;
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  line-height: 1;
}

.letter p {
  position: relative;
}

.letter .signature {
  margin: 2.5rem 0 0;
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: 2.25rem;
  font-style: italic;
}

.section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 7vw, 5rem);
}

.section-heading h2,
.miki-heading h2,
.gifts-door h2 {
  margin: 0 0 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.section-heading > p:last-child {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
}

.qualities {
  background:
    radial-gradient(circle at 95% 10%, rgb(62 166 214 / 22%), transparent 26rem),
    linear-gradient(145deg, var(--sky-50), var(--turquoise-50));
}

.quality-grid {
  display: grid;
  gap: 1rem;
}

.quality-card {
  position: relative;
  min-height: 19rem;
  padding: 1.75rem;
  overflow: hidden;
  background: linear-gradient(145deg, var(--turquoise-50), var(--sky-50));
  border: 1px solid var(--turquoise-200);
  border-radius: var(--radius);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.quality-card:nth-child(3n + 2) {
  background: linear-gradient(145deg, var(--sky-100), var(--turquoise-100));
  border-color: var(--sky-200);
}

.quality-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.quality-card > span {
  display: block;
  margin-bottom: 3.5rem;
  color: var(--turquoise-600);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.quality-card h3 {
  max-width: 15rem;
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.08;
}

.quality-card p {
  margin: 0;
  color: var(--muted);
}

.manual {
  position: relative;
  color: white;
  background:
    radial-gradient(circle at 100% 0, rgb(131 207 242 / 28%), transparent 26rem),
    linear-gradient(150deg, var(--deep-blue), var(--turquoise-800) 58%, var(--sky-700));
}

.section-heading-light > p:last-child {
  color: rgb(255 255 255 / 68%);
}

.manual-list {
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.manual-list article {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.75rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.manual-list article > span {
  color: var(--sky-300);
  font-size: 0.75rem;
  font-weight: 800;
}

.manual-list h3 {
  margin: 0 0 0.35rem;
  color: var(--turquoise-300);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 6vw, 2.2rem);
}

.manual-list p {
  max-width: 46rem;
  margin: 0;
  color: rgb(255 255 255 / 70%);
}

.solar {
  background:
    radial-gradient(circle at 12% 82%, rgb(24 183 176 / 24%), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgb(62 166 214 / 24%), transparent 24rem),
    linear-gradient(135deg, var(--turquoise-100), var(--sky-100));
}

.solar-layout {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.solar-orbit {
  width: min(100%, 28rem);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.4rem, 2vw, 0.9rem);
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: radial-gradient(circle, var(--warm-white) 0 26%, rgb(223 243 255 / 58%) 27% 48%, transparent 49%);
  border: 1px solid var(--sky-200);
  border-radius: 50%;
}

.solar-orbit span {
  width: clamp(0.45rem, 2.5vw, 0.85rem);
  aspect-ratio: 1;
  background: var(--turquoise-500);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.solar-orbit span:nth-child(5n) {
  background: var(--sky-500);
}

.solar-orbit.is-visible span {
  animation: orbit-dot 440ms ease forwards;
}

.orbit-dot-1{animation-delay:25ms!important}.orbit-dot-2{animation-delay:50ms!important}.orbit-dot-3{animation-delay:75ms!important}
.orbit-dot-4{animation-delay:100ms!important}.orbit-dot-5{animation-delay:125ms!important}.orbit-dot-6{animation-delay:150ms!important}
.orbit-dot-7{animation-delay:175ms!important}.orbit-dot-8{animation-delay:200ms!important}.orbit-dot-9{animation-delay:225ms!important}
.orbit-dot-10{animation-delay:250ms!important}.orbit-dot-11{animation-delay:275ms!important}.orbit-dot-12{animation-delay:300ms!important}
.orbit-dot-13{animation-delay:325ms!important}.orbit-dot-14{animation-delay:350ms!important}.orbit-dot-15{animation-delay:375ms!important}
.orbit-dot-16{animation-delay:400ms!important}.orbit-dot-17{animation-delay:425ms!important}.orbit-dot-18{animation-delay:450ms!important}
.orbit-dot-19{animation-delay:475ms!important}.orbit-dot-20{animation-delay:500ms!important}.orbit-dot-21{animation-delay:525ms!important}
.orbit-dot-22{animation-delay:550ms!important}.orbit-dot-23{animation-delay:575ms!important}.orbit-dot-24{animation-delay:600ms!important}

@keyframes orbit-dot {
  to { opacity: 1; transform: scale(1); }
}

.gallery-section {
  background: linear-gradient(180deg, var(--sky-50), var(--turquoise-50) 35%, var(--sky-100));
}

.gallery {
  columns: 1;
  column-gap: 1rem;
}

.gallery-card {
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  display: inline-block;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, var(--warm-white), var(--sky-50));
  border: 1px solid var(--sky-200);
  border-radius: 1.1rem;
  text-align: left;
  cursor: zoom-in;
  break-inside: avoid;
}

.gallery-card picture,
.gallery-card img {
  width: 100%;
}

.gallery-card img {
  height: auto;
  background: var(--turquoise-50);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.gallery-card:hover img {
  transform: scale(1.025);
}

.gallery-card span {
  display: block;
  padding: 0.85rem 1rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.gallery-count {
  margin: 2rem 0 0;
  color: var(--muted);
  text-align: center;
}

.gallery-count span {
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: 1.5rem;
}

.video-memory {
  position: relative;
  padding-block: clamp(5rem, 7vw, 6rem);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 8% 16%, rgb(24 183 176 / 34%), transparent 25rem),
    radial-gradient(circle at 92% 88%, rgb(131 207 242 / 28%), transparent 28rem),
    linear-gradient(145deg, var(--deep-blue), var(--turquoise-800) 58%, var(--sky-700));
}

.video-memory::before,
.video-memory::after {
  position: absolute;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.video-memory::before {
  top: -9rem;
  right: -5rem;
}

.video-memory::after {
  bottom: -12rem;
  left: -6rem;
}

.video-memory-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 5rem);
}

.video-memory-media {
  min-width: 0;
}

.video-memory-copy {
  max-width: 42rem;
}

.video-memory-copy h2 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 12vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.video-memory-copy > p:not(.eyebrow) {
  max-width: 39rem;
  margin-bottom: 0;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(1.05rem, 4vw, 1.2rem);
}

.video-memory-tags {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.video-memory-tags span {
  padding: 0.55rem 0.8rem;
  color: var(--turquoise-100);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

.video-memory-actions {
  margin-top: 1.25rem;
  display: grid;
  justify-items: center;
  text-align: center;
}

.video-download-button {
  width: fit-content;
  max-width: 100%;
  min-height: 3.8rem;
  padding: 0.65rem 1.25rem 0.65rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--deep-blue);
  background: linear-gradient(135deg, var(--turquoise-200), var(--sky-300));
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 20%);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.video-download-button span {
  width: 2.45rem;
  aspect-ratio: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: white;
  background: var(--turquoise-800);
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.video-download-button strong {
  font-size: clamp(0.9rem, 3.8vw, 1rem);
  line-height: 1.15;
}

.video-download-button:hover {
  background: linear-gradient(135deg, var(--turquoise-100), var(--sky-200));
  box-shadow: 0 20px 50px rgb(0 0 0 / 28%);
  transform: translateY(-2px);
}

.video-download-button:hover span {
  transform: translateY(2px);
}

.video-download-button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

.video-memory-whisper {
  max-width: 30rem;
  margin: 1rem 0 0;
  color: var(--turquoise-100);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-style: italic;
  line-height: 1.35;
}

.video-memory-whisper small {
  margin-top: 0.35rem;
  display: block;
  color: rgb(255 255 255 / 58%);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.55;
}

.video-memory-frame {
  margin: 0;
  padding: 0.55rem;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(255 255 255 / 18%), rgb(131 207 242 / 10%));
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: clamp(1.1rem, 4vw, 2rem);
  box-shadow: 0 28px 80px rgb(0 0 0 / 28%);
}

.video-memory-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: var(--deep-blue);
  border-radius: clamp(0.75rem, 3vw, 1.45rem);
}

.video-memory-frame figcaption {
  padding: 0.8rem 0.65rem 0.45rem;
  color: rgb(255 255 255 / 70%);
  font-size: 0.86rem;
  text-align: center;
}

.miki-section {
  background:
    radial-gradient(circle at 80% 20%, rgb(62 166 214 / 26%), transparent 25rem),
    linear-gradient(145deg, var(--turquoise-50), var(--sky-100));
}

.miki-heading {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

.miki-heading h2 {
  color: var(--turquoise-800);
}

.miki-heading .lead {
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5vw, 2rem);
}

.miki-copy p {
  margin-top: 0;
}

.miki-anecdote {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 0 0 2.75rem;
  padding: 1.35rem;
  overflow: hidden;
  color: var(--deep-blue);
  background:
    radial-gradient(circle at 100% 0%, rgb(255 255 255 / 85%), transparent 12rem),
    linear-gradient(145deg, rgb(255 255 255 / 92%), var(--turquoise-100));
  border: 1px solid rgb(13 147 141 / 25%);
  border-radius: calc(var(--radius) + 0.25rem);
  box-shadow: 0 20px 55px rgb(8 100 95 / 14%);
}

.miki-anecdote::after {
  position: absolute;
  right: -2rem;
  bottom: -3.5rem;
  width: 9rem;
  aspect-ratio: 1;
  content: "";
  background: rgb(62 166 214 / 16%);
  border: 1rem solid rgb(255 255 255 / 22%);
  border-radius: 50%;
}

.miki-anecdote-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  place-items: center;
  font-size: 1.8rem;
  background: linear-gradient(145deg, var(--turquoise-100), var(--sky-100));
  border: 1px solid rgb(13 147 141 / 20%);
  border-radius: 1rem;
  transform: rotate(-4deg);
}

.miki-anecdote-story {
  position: relative;
  z-index: 1;
}

.miki-anecdote-kicker {
  margin: 0 0 0.45rem;
  color: var(--turquoise-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.miki-anecdote h3 {
  margin: 0 0 0.9rem;
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 8vw, 3rem);
  line-height: 1;
}

.miki-anecdote-story > p:not(.miki-anecdote-kicker) {
  margin: 0 0 0.75rem;
  max-width: 52rem;
}

.miki-anecdote-ending {
  padding-top: 0.2rem;
  color: var(--turquoise-800);
  font-weight: 700;
}

.miki-anecdote-ending em {
  font-family: var(--serif);
  font-size: 1.08em;
}

.miki-anecdote-stamp {
  position: relative;
  z-index: 1;
  width: max-content;
  padding: 0.45rem 0.7rem;
  color: var(--turquoise-800);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgb(255 255 255 / 70%);
  border: 1px dashed rgb(13 147 141 / 50%);
  border-radius: 0.6rem;
  transform: rotate(-2deg);
}

.carousel {
  position: relative;
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(145deg, var(--warm-white), var(--sky-50));
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  scroll-snap-align: center;
  box-shadow: 0 16px 45px rgb(8 100 95 / 10%);
}

.carousel-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.carousel-zoom::after {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 2.75rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  content: "↗";
  color: white;
  background: rgb(7 95 103 / 84%);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgb(5 55 74 / 28%);
  font-size: 1.15rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, background 180ms ease;
}

.carousel-zoom:hover::after,
.carousel-zoom:focus-visible::after {
  background: var(--sky-700);
  transform: scale(1.08);
}

.carousel-zoom:focus-visible {
  z-index: 1;
  outline: 4px solid var(--sky-500);
  outline-offset: -4px;
}

.carousel-slide picture {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--deep-blue);
}

.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.carousel-slide:hover img {
  transform: scale(1.025);
}

.carousel-slide figcaption {
  min-height: 4.5rem;
  padding: 1rem;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.carousel-controls {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.carousel-controls button {
  width: 48px;
  height: 48px;
  color: white;
  background: var(--turquoise-800);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-controls .carousel-toggle {
  color: var(--deep-blue);
  background: var(--sky-300);
}

.carousel-controls p {
  min-width: 4rem;
  margin: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gifts-door {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 90% 10%, rgb(131 207 242 / 42%), transparent 24rem),
    linear-gradient(140deg, var(--deep-blue), var(--turquoise-800) 58%, var(--sky-700));
}

.gifts-door-layout {
  display: grid;
  align-items: center;
  gap: 4rem;
}

.gifts-door h2 {
  max-width: 46rem;
}

.gifts-door p:not(.eyebrow) {
  max-width: 40rem;
  color: rgb(255 255 255 / 70%);
}

.gift-packages {
  min-height: 20rem;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.65rem;
  perspective: 700px;
}

.gift-packages span {
  position: relative;
  width: 40%;
  max-width: 9rem;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 24px 60px rgb(0 0 0 / 26%);
  transform: rotateY(-8deg) translateY(1rem);
}

.gift-packages span:nth-child(2) {
  z-index: 1;
  max-width: 10.5rem;
  color: var(--deep-blue);
  background: var(--sky-300);
  transform: translateY(-1rem);
}

.gift-packages span:nth-child(3) {
  transform: rotateY(8deg) translateY(1.5rem);
}

.gift-packages i {
  position: absolute;
  inset: 0 45%;
  background: rgb(255 255 255 / 38%);
}

.letter-final {
  border-left-color: var(--sky-500);
}

.postscript {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(32 49 55 / 12%);
  color: var(--muted);
  font-style: italic;
}

.final-actions .button-ghost {
  color: var(--turquoise-800);
}

.site-footer {
  padding-block: 3rem;
  color: rgb(255 255 255 / 76%);
  background: linear-gradient(120deg, var(--deep-blue), var(--turquoise-800) 55%, var(--sky-700));
}

.site-footer .section-shell {
  display: grid;
  gap: 1.5rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

.footer-mark {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  color: white;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 2rem;
}

dialog {
  max-width: none;
  max-height: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
  background: rgb(7 63 82 / 97%);
  border: 0;
}

.lightbox::backdrop {
  background: rgb(7 63 82 / 82%);
}

.lightbox[open] {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  align-items: center;
}

.lightbox figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4.5rem 0 1rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.lightbox figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox figcaption {
  min-height: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgb(255 255 255 / 78%);
  font-size: 0.9rem;
}

.lightbox button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: white;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  z-index: 2;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  font-size: 1.6rem;
}

.lightbox-arrow {
  margin-inline: 0.15rem;
}

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

.confetti-piece {
  position: absolute;
  top: -1rem;
  width: 0.55rem;
  height: 1rem;
  background: var(--turquoise-300);
  animation: confetti-fall 1700ms cubic-bezier(.2,.7,.2,1) forwards;
}

.confetti-piece:nth-child(3n) {
  background: var(--sky-300);
}

.confetti-piece:nth-child(4n) {
  border-radius: 50%;
}

.confetti-1{left:3%;--drift:3rem}.confetti-2{left:7%;--drift:-1rem}.confetti-3{left:12%;--drift:5rem}
.confetti-4{left:16%;--drift:-3rem}.confetti-5{left:21%;--drift:1rem}.confetti-6{left:25%;--drift:6rem}
.confetti-7{left:30%;--drift:-5rem}.confetti-8{left:34%;--drift:2rem}.confetti-9{left:39%;--drift:-2rem}
.confetti-10{left:43%;--drift:4rem}.confetti-11{left:47%;--drift:-6rem}.confetti-12{left:51%;--drift:1rem}
.confetti-13{left:55%;--drift:5rem}.confetti-14{left:59%;--drift:-3rem}.confetti-15{left:63%;--drift:2rem}
.confetti-16{left:67%;--drift:-5rem}.confetti-17{left:71%;--drift:4rem}.confetti-18{left:75%;--drift:-1rem}
.confetti-19{left:79%;--drift:3rem}.confetti-20{left:83%;--drift:-4rem}.confetti-21{left:87%;--drift:2rem}
.confetti-22{left:91%;--drift:-6rem}.confetti-23{left:95%;--drift:1rem}.confetti-24{left:98%;--drift:-3rem}
.confetti-25{left:10%;--drift:2rem}.confetti-26{left:36%;--drift:-2rem}.confetti-27{left:62%;--drift:3rem}
.confetti-28{left:89%;--drift:-1rem}
.confetti-2,.confetti-8,.confetti-14,.confetti-20,.confetti-26{animation-delay:100ms}
.confetti-4,.confetti-10,.confetti-16,.confetti-22,.confetti-28{animation-delay:180ms}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 110vh, 0) rotate(760deg); opacity: 0; }
}

.toast {
  position: fixed;
  z-index: 400;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  padding: 0.75rem 1rem;
  color: white;
  background: var(--deep-blue);
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.reveal {
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-pending {
  opacity: 0;
  transform: translateY(1.5rem);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 38rem) {
  .unlock-game-shell { width: min(100% - 3rem, 46rem); }
  .unlock-panel { padding: 2.5rem; }
  .unlock-options { grid-template-columns: 1fr 1fr 1fr; }
  .unlock-option { text-align: center; }
  .beauty-verdict-points { grid-template-columns: repeat(3, 1fr); }
  .section-shell { width: min(100% - 3rem, 74rem); }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
  .carousel-track { grid-auto-columns: 56%; }
  .site-footer .section-shell { grid-template-columns: auto 1fr auto; align-items: end; }
  .site-footer > .section-shell > p { text-align: right; }
}

@media (min-width: 52rem) {
  :root { --header-height: 5.25rem; }
  .site-header { padding-inline: clamp(1.5rem, 4vw, 4rem); }
  .menu-button { display: none; }
  .site-nav {
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.45rem;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .site-nav a {
    width: auto;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 650;
  }
  .site-nav a:not(.nav-gift)::after { content: none; }
  .site-nav .nav-gift {
    width: auto;
    margin: 0 0 0 0.5rem;
    font-size: 0.84rem;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.8fr);
    gap: 2rem;
    padding-inline: clamp(2rem, 7vw, 8rem);
  }
  .hero-copy { width: min(100%, 42rem); }
  .hero-photo { width: min(38vw, 27rem); }
  .hero-photo picture,
  .hero-photo img { height: min(66vh, 38rem); min-height: 0; }
  .beauty-verdict-layout { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; }
  .quality-grid { grid-template-columns: repeat(3, 1fr); }
  .manual-list article { grid-template-columns: 5rem 1fr; padding-block: 2rem; }
  .solar-layout { grid-template-columns: 1fr 1fr; }
  .video-memory-layout { grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr); }
  .miki-heading { grid-template-columns: 1fr 1fr; }
  .miki-anecdote { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.4rem; align-items: start; padding: 2rem; }
  .miki-anecdote-stamp { align-self: center; transform: rotate(3deg); }
  .gifts-door-layout { grid-template-columns: 1.25fr 0.75fr; }
  .carousel-track { grid-auto-columns: 42%; }
  .carousel-slide { transition: transform 200ms ease; }
  .carousel-slide:hover { transform: translateY(-0.35rem); }
  .lightbox[open] { grid-template-columns: 5rem minmax(0, 1fr) 5rem; }
  .lightbox figure { padding: 3rem 1rem 1.5rem; }
  .lightbox-arrow { margin-inline: auto; }
}

@media (min-width: 74rem) {
  .gallery { columns: 3; column-gap: 1.25rem; }
  .gallery-card { margin-bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .solar-orbit span { opacity: 1; transform: none; }
  .confetti-layer { display: none; }
}

@media (forced-colors: active) {
  .button,
  .menu-button,
  .carousel-controls button,
  .lightbox button { border: 2px solid ButtonText; }
}

/* Página de regalos */
.gifts-page {
  color: white;
  background: linear-gradient(160deg, var(--turquoise-800), var(--sky-700));
}

.gift-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
}

.gift-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgb(255 255 255 / 78%);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.gift-back-short {
  display: none;
}

@media (max-width: 30rem) {
  .gift-back-full {
    display: none;
  }

  .gift-back-short {
    display: inline;
  }
}

.gift-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 3rem;
  padding: calc(var(--header-height) + 3.5rem) 1rem 6rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgb(223 243 255 / 35%), transparent 24rem),
    radial-gradient(circle at 95% 85%, rgb(95 215 210 / 34%), transparent 30rem),
    linear-gradient(145deg, var(--deep-blue), var(--turquoise-800) 55%, var(--sky-700));
}

.gift-hero-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 43rem);
  margin-inline: auto;
}

.gift-hero h1 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 16vw, 7.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.gift-hero h1 em {
  color: var(--turquoise-300);
  font-weight: 400;
}

.gift-hero-copy > p:not(.eyebrow) {
  max-width: 36rem;
  margin-bottom: 2rem;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
}

.gift-spark {
  position: absolute;
  color: var(--sky-300);
  font-size: 3rem;
}

.gift-spark-one {
  top: 16%;
  right: 8%;
}

.gift-spark-two {
  bottom: 18%;
  left: 7%;
  color: var(--turquoise-300);
  font-size: 1.4rem;
}

.mystery-boxes {
  position: relative;
  z-index: 1;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  perspective: 700px;
}

.mystery-boxes span {
  position: relative;
  width: min(40%, 9.5rem);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 0.5rem 0.5rem 1.25rem 1.25rem;
  box-shadow: 0 28px 70px rgb(0 0 0 / 30%);
  transform: rotate(-6deg) translateY(1rem);
}

.mystery-boxes span:nth-child(2) {
  z-index: 1;
  width: min(43%, 10.5rem);
  background: var(--sky-300);
  transform: translateY(-1rem);
}

.mystery-boxes span:nth-child(3) {
  background: var(--turquoise-500);
  transform: rotate(6deg) translateY(1rem);
}

.mystery-boxes b {
  z-index: 1;
  font-family: var(--serif);
  font-size: 2.2rem;
}

.mystery-boxes i {
  position: absolute;
  inset: 0 43%;
  background: rgb(255 255 255 / 30%);
}

.gift-opening {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgb(131 207 242 / 34%), transparent 28rem),
    linear-gradient(155deg, var(--deep-blue), var(--turquoise-800) 54%, var(--sky-700));
}

.gift-opening .section-heading > p:last-child {
  color: rgb(255 255 255 / 65%);
}

.gift-grid {
  display: grid;
  gap: 4rem;
  width: min(100%, 52rem);
  margin-inline: auto;
}

.gift-card {
  position: relative;
  min-width: 0;
}

.gift-box-button {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border: 0;
  border-radius: 0.5rem 0.5rem 1.5rem 1.5rem;
  box-shadow: 0 28px 80px rgb(0 0 0 / 28%);
  cursor: pointer;
  transition: transform 260ms ease, opacity 260ms ease;
}

.gift-card:nth-child(2) .gift-box-button {
  background: var(--sky-300);
}

.gift-card:nth-child(3) .gift-box-button {
  color: white;
  background: var(--turquoise-600);
}

.gift-box-button:hover {
  transform: translateY(-0.5rem) rotate(1deg);
}

.gift-box-button b {
  font-family: var(--serif);
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 500;
}

.gift-box-button small {
  position: absolute;
  bottom: 1.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gift-lid {
  position: absolute;
  z-index: 2;
  top: -0.8rem;
  width: calc(100% + 1rem);
  height: 2.5rem;
  background: inherit;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 0.4rem;
  transform-origin: left bottom;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}

.gift-ribbon {
  position: absolute;
  inset: 0 44%;
  background: rgb(255 255 255 / 35%);
  transition: transform 500ms ease;
}

.gift-card.is-open .gift-lid {
  transform: translate(-1rem, -2.5rem) rotate(-16deg);
}

.gift-card.is-open .gift-ribbon {
  transform: translateY(1.5rem) rotate(4deg);
}

.gift-card.is-open .gift-box-button {
  opacity: 0.18;
  transform: scale(0.82);
}

.gift-reveal {
  margin-top: -3rem;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, var(--warm-white), var(--sky-50));
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  box-shadow: 0 30px 100px rgb(0 0 0 / 30%);
  animation: reveal-gift 600ms cubic-bezier(.2,.8,.2,1) both;
}

.gift-reveal[hidden] {
  display: none;
}

@keyframes reveal-gift {
  from { opacity: 0; transform: translateY(2rem) scale(.96); }
}

.gift-reveal picture {
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  background: linear-gradient(145deg, var(--turquoise-50), var(--sky-100));
}

.gift-card:nth-child(2) .gift-reveal picture {
  background: #fceaea;
}

.gift-reveal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gift-copy {
  padding: 1.5rem;
}

.gift-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--deep-blue);
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 3.1rem);
  line-height: 1;
}

.gift-copy .gift-phrase {
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.gift-copy blockquote {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  color: var(--deep-blue);
  background: var(--turquoise-50);
  border-left: 4px solid var(--turquoise-500);
  border-radius: 0 1rem 1rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.all-open {
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0, rgb(24 183 176 / 28%), transparent 25rem),
    radial-gradient(circle at 80% 100%, rgb(62 166 214 / 26%), transparent 25rem),
    linear-gradient(145deg, var(--turquoise-100), var(--sky-100));
}

.all-open[hidden] {
  display: none;
}

.all-open-card {
  width: min(100%, 48rem);
  margin-inline: auto;
  padding: clamp(2rem, 8vw, 5rem);
  background: linear-gradient(145deg, var(--warm-white), var(--sky-50));
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.all-open-card > span {
  color: var(--sky-500);
  font-size: 4rem;
}

.all-open-card h2 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 11vw, 5rem);
  line-height: 0.95;
}

.all-open-card .signature {
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
}

.all-open-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.all-open-actions .button-ghost {
  color: var(--turquoise-800);
}

.gift-footer {
  padding: 2rem 1rem;
  color: rgb(255 255 255 / 65%);
  background: linear-gradient(120deg, var(--deep-blue), var(--turquoise-800) 55%, var(--sky-700));
  text-align: center;
}

.gift-footer p {
  margin: 0;
}

@media (min-width: 52rem) {
  .gift-header { padding-inline: clamp(2rem, 5vw, 5rem); }
  .gift-hero { grid-template-columns: 1.2fr .8fr; padding-inline: clamp(2rem, 7vw, 8rem); }
  .gift-hero-copy { width: 100%; }
  .mystery-boxes { min-height: 32rem; }
  .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .gift-box-button { width: 100%; }
  .gift-reveal { margin-top: -2rem; }
  .gift-copy { padding: 1.75rem; }
}

.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: white;
  background:
    radial-gradient(circle at 50% 20%, rgb(131 207 242 / 42%), transparent 24rem),
    linear-gradient(145deg, var(--deep-blue), var(--turquoise-800) 58%, var(--sky-700));
}

.error-card {
  width: min(100%, 42rem);
  text-align: center;
}

.error-card > span {
  display: block;
  color: rgb(101 216 208 / 20%);
  font-family: var(--serif);
  font-size: clamp(9rem, 44vw, 18rem);
  line-height: 0.75;
}

.error-card h1 {
  margin: 1rem 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  line-height: 1;
}

.error-card > p:not(.eyebrow) {
  color: rgb(255 255 255 / 70%);
}

/* Álbum de la fiesta */
.party-page {
  color: var(--ink);
  background: var(--turquoise-50);
}

.party-header {
  color: white;
}

.party-header .gift-back-full {
  display: none;
}

.party-header .gift-back-short {
  display: inline;
}

.party-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 2.5rem;
  padding: calc(var(--header-height) + 4rem) 1rem 7rem;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(180deg, rgb(4 47 62 / 10%), rgb(4 47 62 / 52%)),
    radial-gradient(circle at 14% 22%, rgb(95 215 210 / 34%), transparent 22rem),
    radial-gradient(circle at 88% 75%, rgb(131 207 242 / 28%), transparent 25rem),
    linear-gradient(145deg, #073f56, var(--turquoise-800) 58%, var(--sky-700));
}

.party-hero::after {
  position: absolute;
  right: -0.08em;
  bottom: -0.3em;
  content: "A";
  color: rgb(255 255 255 / 4%);
  font-family: var(--serif);
  font-size: clamp(22rem, 100vw, 50rem);
  line-height: 1;
  pointer-events: none;
}

.party-glow {
  position: absolute;
  width: 22rem;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  pointer-events: none;
}

.party-glow-one {
  top: -12rem;
  left: -10rem;
}

.party-glow-two {
  right: -13rem;
  bottom: 8rem;
  width: 30rem;
}

.party-stars {
  position: absolute;
  inset: 6rem 0 auto;
  display: flex;
  justify-content: space-around;
  color: var(--turquoise-300);
  opacity: 0.8;
  pointer-events: none;
}

.party-stars span:nth-child(2n) {
  transform: translateY(4rem);
}

.party-hero-copy,
.party-hero-collage {
  position: relative;
  z-index: 2;
}

.party-hero-copy {
  width: min(100%, 42rem);
}

.party-hero-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 19vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.78;
  text-wrap: balance;
}

.party-hero-copy h1 em {
  display: inline-block;
  color: var(--turquoise-300);
  font-size: 0.78em;
  font-weight: 500;
  white-space: nowrap;
}

.party-hero-lead {
  max-width: 35rem;
  margin: 2rem 0 0;
  color: rgb(255 255 255 / 82%);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 5vw, 1.65rem);
  line-height: 1.35;
}

.party-numbers {
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.party-numbers span {
  min-width: 6.5rem;
  padding: 0.6rem 0.8rem;
  color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.party-numbers b {
  display: block;
  color: var(--turquoise-300);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
}

.party-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.party-hero-actions .button-ghost {
  color: white;
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 24%);
  backdrop-filter: blur(10px);
}

.party-hero-collage {
  width: min(100%, 31rem);
  min-height: 30rem;
  margin-inline: auto;
}

.party-hero-photo {
  position: absolute;
  overflow: hidden;
  background: var(--deep-blue);
  border: 0.35rem solid rgb(255 255 255 / 90%);
  border-radius: 1.1rem;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 35%);
}

.party-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-hero-photo-main {
  top: 0;
  left: 12%;
  width: 62%;
  aspect-ratio: 9 / 16;
  transform: rotate(-3deg);
}

.party-hero-photo-main img {
  object-position: center 63%;
}

.party-hero-photo-side {
  right: 0;
  bottom: 3.5rem;
  width: 58%;
  aspect-ratio: 16 / 10;
  transform: rotate(5deg);
}

.party-photo-stamp {
  position: absolute;
  z-index: 2;
  right: 1rem;
  top: 2rem;
  width: 6.4rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-align: center;
  transform: rotate(9deg);
}

.party-scroll {
  z-index: 3;
}

.party-opening {
  position: relative;
  background:
    radial-gradient(circle at 85% 15%, rgb(95 215 210 / 20%), transparent 22rem),
    linear-gradient(180deg, var(--sky-50), var(--warm-white));
}

.party-opening-card {
  width: min(100%, 52rem);
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 4.5rem);
  background: rgb(255 255 255 / 80%);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.party-opening-card h2,
.party-album-heading h2,
.party-ending-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.party-opening-card h2 em,
.party-album-heading h2 em {
  color: var(--turquoise-600);
}

.party-opening-card > p:not(.eyebrow) {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  color: var(--muted);
}

.party-opening-card .party-opening-signature {
  color: var(--turquoise-800);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
}

.party-album {
  color: white;
  background:
    radial-gradient(circle at 15% 8%, rgb(95 215 210 / 22%), transparent 24rem),
    radial-gradient(circle at 88% 55%, rgb(131 207 242 / 22%), transparent 26rem),
    linear-gradient(160deg, var(--deep-blue), var(--turquoise-800) 50%, #123f64);
}

.party-album-heading {
  margin-bottom: clamp(2.5rem, 8vw, 5rem);
  display: grid;
  gap: 1.5rem;
}

.party-album-heading h2 em {
  color: var(--turquoise-300);
}

.party-album-heading > p {
  max-width: 34rem;
  margin: 0;
  color: rgb(255 255 255 / 72%);
}

.party-chapter-nav {
  position: sticky;
  z-index: 8;
  top: calc(var(--header-height) + 0.5rem);
  width: calc(100% + 2rem);
  margin: 0 -1rem 2rem;
  padding: 0.7rem 1rem;
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  background: rgb(4 47 62 / 78%);
  border-block: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 16%);
  scrollbar-width: none;
  backdrop-filter: blur(16px);
}

.party-chapter-nav::-webkit-scrollbar {
  display: none;
}

.party-chapter-nav-label {
  flex: 0 0 auto;
  align-self: center;
  color: rgb(255 255 255 / 56%);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.party-chapter-nav a {
  min-height: 2.7rem;
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  color: rgb(255 255 255 / 78%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.party-chapter-nav a.is-active,
.party-chapter-nav a:hover {
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border-color: var(--turquoise-300);
}

.party-gallery {
  display: grid;
  gap: 1.25rem;
}

.party-gallery-loading {
  padding: 3rem 1rem;
  color: rgb(255 255 255 / 72%);
  text-align: center;
}

.party-photo-card {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: white;
  background: #083f54;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.35rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
  text-align: left;
  cursor: zoom-in;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: auto 24rem;
}

.party-photo-card picture {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
}

.party-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 300ms ease;
}

.party-photo-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgb(4 47 62 / 88%) 100%);
  content: "";
  pointer-events: none;
}

.party-photo-copy {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0 0.8rem;
}

.party-photo-copy b {
  grid-row: 1 / 3;
  color: var(--turquoise-300);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
}

.party-photo-copy strong {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  line-height: 1.05;
}

.party-photo-copy small {
  color: rgb(255 255 255 / 70%);
  font-size: 0.72rem;
}

.party-photo-card:hover img {
  filter: saturate(1.06);
  transform: scale(1.025);
}

.party-photo-card-portrait {
  max-height: none;
}

.party-photo-card-portrait picture {
  aspect-ratio: 4 / 5;
}

.party-photo-card-portrait img {
  object-position: center 62%;
}

.party-photo-card-wide picture {
  aspect-ratio: 16 / 8;
}

.party-photo-card-featured {
  border-color: rgb(95 215 210 / 58%);
  box-shadow: 0 1.7rem 4.5rem rgb(0 0 0 / 30%), 0 0 0 1px rgb(95 215 210 / 18%);
}

.party-chapter-break {
  position: relative;
  padding: clamp(1.75rem, 6vw, 3rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgb(131 207 242 / 22%), transparent 18rem),
    rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.35rem;
  scroll-margin-top: calc(var(--header-height) + 5.5rem);
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}

.party-chapter-break > span {
  width: clamp(3.8rem, 15vw, 5.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--turquoise-300), var(--sky-300));
  border-radius: 50%;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  box-shadow: 0 1rem 2.5rem rgb(95 215 210 / 20%);
}

.party-chapter-break p {
  margin: 0;
  color: rgb(255 255 255 / 70%);
}

.party-chapter-break div > p:first-child {
  color: var(--turquoise-300);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.party-chapter-break h3 {
  margin: 0.2rem 0 0.45rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
}

.party-video {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgb(95 215 210 / 32%), transparent 25rem),
    radial-gradient(circle at 8% 90%, rgb(131 207 242 / 30%), transparent 24rem),
    linear-gradient(160deg, var(--sky-50), var(--turquoise-50) 56%, white);
}

.party-video::before {
  position: absolute;
  right: -0.12em;
  bottom: -0.32em;
  color: rgb(7 95 103 / 5%);
  content: "▶";
  font-size: clamp(20rem, 70vw, 42rem);
  line-height: 1;
  pointer-events: none;
}

.party-video-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 8vw, 6rem);
}

.party-video-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 12vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.party-video-copy h2 em {
  color: var(--turquoise-700);
  font-weight: 500;
}

.party-video-copy > p:not(.eyebrow) {
  max-width: 36rem;
  margin-top: 1.5rem;
  color: var(--muted);
}

.party-video-card {
  padding: clamp(0.65rem, 2.5vw, 1rem);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 100% 0%, rgb(95 215 210 / 22%), transparent 20rem),
    linear-gradient(145deg, var(--deep-blue), var(--turquoise-800));
  border: 1px solid rgb(7 95 103 / 18%);
  border-radius: clamp(1.25rem, 5vw, 2rem);
  box-shadow: 0 2rem 5rem rgb(4 47 62 / 24%);
}

.party-video-card video {
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 478;
  display: block;
  overflow: hidden;
  background: #032d3d;
  border-radius: clamp(0.9rem, 4vw, 1.45rem);
  object-fit: cover;
}

.party-video-download {
  padding: clamp(1.4rem, 5vw, 2.2rem) 0.75rem 1rem;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  text-align: center;
}

.party-video-download p {
  margin: 0;
  color: var(--turquoise-100);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
}

.party-video-download small {
  color: rgb(255 255 255 / 58%);
}

.party-ending {
  color: white;
  background:
    radial-gradient(circle at 50% 0%, rgb(95 215 210 / 28%), transparent 26rem),
    linear-gradient(145deg, #082f45, var(--turquoise-800) 58%, var(--sky-700));
}

.party-ending-card {
  width: min(100%, 58rem);
  margin-inline: auto;
  text-align: center;
}

.party-ending-icon {
  width: 5rem;
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  font-size: 2rem;
}

.party-ending-card blockquote {
  max-width: 48rem;
  margin: 2rem auto;
  color: var(--turquoise-100);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-style: italic;
  line-height: 1.4;
}

.party-ending-card > p:last-of-type {
  color: rgb(255 255 255 / 76%);
}

.party-ending-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.party-footer img {
  border-radius: 0.8rem;
}

.party-lightbox {
  background: rgb(4 47 62 / 98%);
}

.party-lightbox figure {
  min-width: 0;
}

.party-lightbox-media {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.party-lightbox figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
}

.party-lightbox figcaption span {
  color: white;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.party-lightbox figcaption small {
  grid-column: 1;
  color: rgb(255 255 255 / 58%);
}

.party-lightbox figcaption b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--turquoise-300);
  font-variant-numeric: tabular-nums;
}

.party-door {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 15% 20%, rgb(95 215 210 / 28%), transparent 22rem),
    radial-gradient(circle at 90% 80%, rgb(131 207 242 / 24%), transparent 24rem),
    linear-gradient(145deg, #073f56, var(--turquoise-800) 56%, var(--sky-700));
}

.party-door-layout {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.party-door-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 13vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.party-door-copy h2 em {
  color: var(--turquoise-300);
  font-weight: 500;
}

.party-door-copy > p:not(.eyebrow) {
  max-width: 36rem;
  color: rgb(255 255 255 / 74%);
}

.party-door-photos {
  position: relative;
  min-height: 27rem;
}

.party-door-photos picture {
  position: absolute;
  overflow: hidden;
  border: 0.35rem solid rgb(255 255 255 / 90%);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}

.party-door-photos picture:first-child {
  top: 3rem;
  left: 0;
  width: 78%;
  transform: rotate(-4deg);
}

.party-door-photos picture:nth-child(2) {
  right: 0;
  bottom: 0;
  width: 43%;
  height: 86%;
  transform: rotate(5deg);
}

.party-door-photos picture:nth-child(2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
}

.party-door-photos > span {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  top: 0;
  padding: 0.65rem 0.85rem;
  color: var(--deep-blue);
  background: var(--turquoise-300);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: rotate(5deg);
}

.party-ready .party-hero-copy {
  animation: party-enter 800ms cubic-bezier(.2,.7,.2,1) both;
}

.party-ready .party-hero-collage {
  animation: party-enter 900ms 120ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes party-enter {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@media (min-width: 52rem) {
  .party-header .gift-back-full {
    display: inline;
  }

  .party-header .gift-back-short {
    display: none;
  }

  .party-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.75fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 8rem);
    padding-inline: clamp(2rem, 7vw, 8rem);
  }

  .party-hero-collage {
    width: min(100%, 34rem);
    min-height: 38rem;
  }

  .party-album-heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.7fr);
    align-items: end;
  }

  .party-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .party-chapter-nav {
    top: calc(var(--header-height) + 0.75rem);
    width: 100%;
    margin-inline: 0;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1rem;
  }

  .party-photo-card-wide {
    grid-column: 1 / -1;
  }

  .party-chapter-break {
    grid-column: 1 / -1;
  }

  .party-photo-card-featured:not(.party-photo-card-portrait) {
    grid-column: 1 / -1;
  }

  .party-photo-card-featured:not(.party-photo-card-portrait) picture {
    aspect-ratio: 16 / 8;
  }

  .party-door-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 0.8fr);
    gap: clamp(3rem, 7vw, 7rem);
  }

  .party-video-layout {
    grid-template-columns: minmax(18rem, 0.7fr) minmax(28rem, 1.3fr);
  }

  .party-door-photos {
    min-height: 34rem;
  }
}

@media (min-width: 74rem) {
  .party-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .party-photo-card-wide,
  .party-photo-card-featured:not(.party-photo-card-portrait),
  .party-chapter-break {
    grid-column: 1 / -1;
  }

  .party-photo-card-portrait picture {
    aspect-ratio: 4 / 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .party-ready .party-hero-copy,
  .party-ready .party-hero-collage {
    animation: none;
  }
}