/* ---------- fonts (self-hosted, Latin subset) ---------- */
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('../fonts/greatvibes-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
/* Shell names avoid the card palette's custom properties (--ink, --glow, --ribbon...),
   which card.js sets on each card and view.js sets on <body>. */
:root {
  color-scheme: light;
  /* paper, ink and one festive accent */
  --paper: #f5f0e6;
  --paper-2: #ebe3d4;
  --stock: #fcfaf5;
  --fg: #1d1a16;
  --fg-2: #4f483f;
  --fg-3: #675f54;
  --rule: #dcd2c2;
  --edge: #cbbfac;
  --rule-2: #857a6b;
  --accent: #9c1f3b;
  --accent-2: #7d1830;
  --on-accent: #fff;
  --wa: #25d366;
  --wa-2: #1fbd5a;
  --wa-ink: #0b2a16;
  --danger: #b42318;
  --danger-wash: #fbebe8;
  --gold: #f6c86b; /* card internals only: curtain trim and the opening's focus ring */
  --ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* type scale: 14 / 16 / 18 / 22 / 28 / 44 */
  --fs-s: .875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.75rem;
  /* layout */
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
  --aside: 360px;
  --col-gap: 64px;
  --bar-h: 69px;
  --r: 4px;
  --shadow-card: 0 1px 2px rgba(45, 34, 22, .14), 0 8px 18px -10px rgba(45, 34, 22, .38);
  --shadow-lift: 0 1px 3px rgba(45, 34, 22, .1), 0 24px 44px -24px rgba(45, 34, 22, .55);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; min-height: 100svh; color: var(--fg); background: var(--paper); font: 400 var(--fs-m)/1.5 var(--ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
::selection { background: #ecd3d6; color: var(--fg); }
[hidden] { display: none !important; }
.sr-only, .step-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- top bar: brand and the step ruler ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.topbar-in { display: flex; align-items: center; gap: 20px; max-width: var(--wrap); height: 60px; margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--fg); text-decoration: none; font: 600 var(--fs-xl)/1 var(--display); letter-spacing: -.012em; white-space: nowrap; }
.brand i { font-weight: 400; }
.brand-mark { width: 30px; height: 30px; flex: none; }
/* Twelve segments: the fill is masked into the same ticks as the track. */
.progress {
  flex: 0 1 228px; height: 3px; background: var(--rule);
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 3px), transparent 0) 0 0 / calc((100% + 3px) / var(--steps, 12)) 100% repeat-x;
  mask: linear-gradient(90deg, #000 calc(100% - 3px), transparent 0) 0 0 / calc((100% + 3px) / var(--steps, 12)) 100% repeat-x;
}
/* done in ink, the current step in cranberry (its segment is the last 1/n of the fill) */
.progress > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--fg) calc(100% - 100% / var(--n, 1)), var(--accent) 0); transition: width .45s var(--ease); }
/* Start over: always one tap away in the top bar. */
.restart {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 44px; margin-right: -8px; padding: 0 8px;
  border: 0; border-radius: var(--r); background: none; color: var(--fg-2); font: 600 var(--fs-s)/1 var(--ui); white-space: nowrap;
}
.restart svg { width: 17px; height: 17px; flex: none; }
.restart:active { background: var(--paper-2); }
@media (hover: hover) {
  .restart:hover { color: var(--fg); }
  .restart:hover .restart-label { text-decoration: underline; text-underline-offset: 3px; }
}
/* On phones the step ruler runs along the bottom edge of the bar, which leaves room for the button. */
@media (max-width: 599px) {
  .topbar-in { position: relative; }
  .progress { position: absolute; left: 0; right: 0; bottom: -1px; }
}
/* wizard.js adds .compact when the label doesn't fit; the name stays for screen readers. */
.restart.compact { padding: 0 10px; }
.restart.compact .restart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Confirmation before throwing a card away. */
.confirm { width: min(calc(100vw - 32px), 400px); max-width: none; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); color: var(--fg); box-shadow: var(--shadow-lift); }
.confirm:not([open]) { display: none; }
.confirm[open] { animation: stepIn .22s var(--ease) both; }
.confirm::backdrop { background: rgba(29, 26, 22, .4); }
.confirm form { display: grid; gap: 8px; margin: 0; padding: 22px 20px 18px; }
.confirm-title { margin: 0; font: 400 var(--fs-xl)/1.2 var(--display); letter-spacing: -.01em; }
.confirm-text { margin: 0 0 12px; font-size: var(--fs-m); line-height: 1.45; color: var(--fg-2); }
.confirm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-row .btn { flex: 1 1 140px; }
@media (prefers-reduced-motion: reduce) { .confirm[open] { animation: none; } }

/* Phones on their side: the header scrolls away instead of taking a fifth of the screen. */
@media (max-height: 520px) { .topbar { position: static; } }
/* Focused fields stay clear of the sticky header and the bottom bar. */
.input, .textarea { scroll-margin: 84px 0 calc(var(--bar-h) + 24px + env(safe-area-inset-bottom)); }
@media (max-width: 599px) {
  .topbar-in { height: 56px; gap: 14px; }
  .brand { gap: 8px; font-size: var(--fs-l); }
  .brand-mark { width: 26px; height: 26px; }
  .progress { flex-basis: 132px; }
}

/* ---------- wizard layout ---------- */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap); max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter) calc(var(--bar-h) + 48px + env(safe-area-inset-bottom)); }
@media (min-width: 980px) {
  .wizard { grid-template-columns: minmax(0, 1fr) var(--aside); padding-top: 52px; }
}
.panel { min-width: 0; }
/* A page settling into place; vertical, so nothing pokes out sideways on small phones. */
.step { animation: stepIn .34s var(--ease) both; }
.step.back { animation-name: stepInBack; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* step header, set like a booklet: folio with a rule, then the question */
.folio { display: flex; align-items: baseline; gap: .3em; margin: 0 0 14px; font: italic 400 var(--fs-l)/1.2 var(--display); color: var(--fg-3); }
.folio::after { content: ''; flex: 1; align-self: center; height: 1px; margin-left: .7em; background: var(--rule); }
.eyebrow { margin: 0; font-weight: 600; color: var(--accent); }
.q { margin: 0; font: 400 clamp(var(--fs-2xl), 1rem + 2.9vw, var(--fs-3xl))/1.06 var(--display); letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.q em { font-style: italic; }
/* Headings take focus only so screen readers announce the new step. */
.q:focus { outline: none; }
.q-sub { max-width: 46ch; margin: 12px 0 0; font-size: var(--fs-l); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
@media (max-width: 599px) { .q-sub { font-size: var(--fs-m); } }

/* ---------- options ---------- */
.options { display: grid; gap: 12px; margin-top: 28px; }

/* Text options sit on lighter card stock with a hairline edge. The chosen one gets a
   cranberry edge and a bookmark ribbon; keyboard focus is a separate ink ring. */
.opt, .chips .chip, .msg-opt {
  position: relative; border: 1px solid var(--edge); border-radius: var(--r); background: var(--stock); color: var(--fg); text-align: left;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.opt { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.opt:active, .chips .chip:active, .msg-opt:active { background-color: var(--paper-2); }
@media (hover: hover) {
  .opt:hover, .chips .chip:hover, .msg-opt:hover { border-color: var(--rule-2); }
}
.opt[aria-pressed="true"], .chips .chip[aria-pressed="true"], .msg-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt[aria-pressed="true"]::after, .chips .chip[aria-pressed="true"]::after, .msg-opt[aria-pressed="true"]::after,
.opt.occ[aria-pressed="true"] .occ-art::after {
  content: ''; position: absolute; top: -1px; right: 14px; z-index: 3; width: 14px; height: 24px; background: var(--accent);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  transform-origin: 50% 0; animation: ribbon .3s var(--ease) both;
}
@keyframes ribbon { from { transform: scaleY(0); } to { transform: none; } }
.opt-title { font-weight: 600; font-size: var(--fs-m); line-height: 1.3; }
.opt-desc { font-size: var(--fs-s); line-height: 1.4; color: var(--fg-2); text-wrap: pretty; }
/* small annotations ("Recomendado", "Verano") are set like a margin note */
.opt-tag, .tag-south { display: block; font: italic 600 var(--fs-s)/1.3 var(--display); color: var(--accent); }

/* occasion: a fan of two cards on a tray */
.options.grid-occ { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.opt.occ {
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 16px; row-gap: 4px;
  padding: 0; border: 0; background: none; box-shadow: none;
}
.opt.occ::after { content: none; }
.opt.occ:focus-visible { outline-offset: 6px; }
.occ-art { position: relative; grid-row: 1 / -1; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r); background: var(--paper-2); transition: box-shadow .15s; }
.occ-art .card { position: absolute; top: 14%; left: 50%; width: 38%; border-radius: 6px; box-shadow: var(--shadow-card); }
.occ-art .card:first-child { transform: translateX(-90%) rotate(-7deg); }
.occ-art .card + .card { top: 12%; transform: translateX(-12%) rotate(5deg); }
.opt.occ .opt-title { grid-row: 2; font: 400 var(--fs-xl)/1.15 var(--display); letter-spacing: -.01em; }
.opt.occ .opt-desc { grid-row: 3; }
.opt.occ[aria-pressed="true"] .occ-art { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.opt.occ[aria-pressed="true"] .occ-art::after { top: 0; right: 12px; }
@media (hover: hover) { .opt.occ:hover .occ-art { box-shadow: 0 0 0 1px var(--rule-2); } .opt.occ[aria-pressed="true"]:hover .occ-art { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); } }
@media (min-width: 600px) {
  .options.grid-occ { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .opt.occ { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; }
  .occ-art { grid-row: 1; margin-bottom: 12px; }
  .opt.occ .opt-title { grid-row: 2; font-size: var(--fs-2xl); }
}

/* scene and palette thumbnails: the card is the object, the caption sits below it */
.options.grid-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 600px) { .options.grid-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; } }
.opt.thumb { gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; }
.opt.thumb .card { margin-bottom: 10px; border-radius: 8px; box-shadow: var(--shadow-card); transition: box-shadow .15s, transform .15s var(--ease); }
.opt.thumb:active { background: none; }
.opt.thumb:active .card { transform: scale(.985); }
@media (hover: hover) { .opt.thumb:hover .card { box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-card); } }
.opt.thumb[aria-pressed="true"] .card { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent), var(--shadow-card); }
.opt.thumb[aria-pressed="true"]::after { top: -5px; right: 12px; }
.opt.thumb:focus-visible { outline-offset: 9px; }
.opt.thumb .opt-desc { margin-top: 1px; }
.tag-south { margin-bottom: 1px; }
.swatches { display: flex; align-self: flex-start; margin-top: 6px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(29, 26, 22, .18); }
.swatches i { width: 22px; height: 12px; }

/* effects and openings */
.options.grid-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.opt.tile {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "icon tag" "icon title" "icon desc";
  align-content: center; align-items: center; column-gap: 14px; row-gap: 1px; min-height: 76px; padding: 14px 40px 14px 16px;
}
.opt.tile .tile-icon { grid-area: icon; }
.opt.tile .opt-tag { grid-area: tag; }
.opt.tile .opt-title { grid-area: title; }
.opt.tile .opt-desc { grid-area: desc; }
.tile-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--fg); }
.tile-icon canvas, .tile-icon svg { display: block; width: 100%; height: 100%; }
@media (min-width: 600px) {
  .options.grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .opt.tile { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "icon tag" "title title" "desc desc"; align-content: stretch; align-items: start; column-gap: 12px; row-gap: 2px; padding: 18px 40px 20px 18px; }
  .opt.tile .tile-icon { margin-bottom: 22px; }
  .opt.tile .opt-tag { align-self: center; margin-bottom: 22px; }
}
@media (min-width: 1100px) { .options.grid-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* lettering: a type specimen per option */
.options.grid-fonts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 600px) { .options.grid-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.opt.font-opt { gap: 2px; padding: 14px 18px 16px; }
.font-sample { display: flex; align-items: center; min-height: 58px; margin-bottom: 10px; padding-right: 20px; border-bottom: 1px solid var(--rule); font-size: 30px; line-height: 1.1; color: var(--fg); overflow-wrap: anywhere; }
.font-sample.font-elegante { font-family: var(--display); font-style: italic; font-weight: 600; }
.font-sample.font-caligrafia { font-family: 'Great Vibes', cursive; font-size: 38px; }
.font-sample.font-manuscrita { font-family: 'Caveat', cursive; font-weight: 700; font-size: 36px; }
.font-sample.font-moderna { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -.02em; }

/* music: a track list with a listen button per row */
.options.list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.music-row { display: flex; align-items: center; gap: 12px; }
.music-row .opt { flex: 1; min-width: 0; }
.opt.music-opt { justify-content: center; min-height: 66px; padding: 12px 40px 12px 16px; }
.music-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.music-row .play {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1.5px solid var(--fg); border-radius: 50%;
  background: transparent; color: var(--fg); transition: background-color .15s, color .15s;
}
.music-row .play svg { width: 18px; height: 18px; }
.music-row .play:not(.on) svg { transform: translateX(1px); }
@media (hover: hover) { .music-row .play:hover { background: var(--paper-2); } }
.music-row .play.on { background: var(--fg); color: var(--paper); }
.music-row .play.muted { border: 1.5px dashed var(--rule-2); color: var(--fg-3); }
.music-row .play.muted svg { transform: none; }

/* greetings: a list of headlines set in the display face */
.chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
@media (min-width: 600px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.chips .chip { min-height: 60px; padding: 12px 42px 12px 18px; font: italic 400 var(--fs-xl)/1.2 var(--display); letter-spacing: -.005em; }

/* tone: words on a line, the chosen one underlined */
.tone-tabs { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 26px; }
@media (max-width: 599px) { .tone-tabs { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; column-gap: 24px; } }
/* the underline is a text decoration so it hugs the word while the target stays 44px */
.tone-tabs .chip {
  min-width: 44px; min-height: 44px; padding: 10px 0; border: 0; border-radius: 0; background: none;
  font: 600 var(--fs-m)/1.2 var(--ui); color: var(--fg-2); text-align: left;
  text-decoration: underline 2px transparent; text-underline-offset: 9px; text-decoration-skip-ink: none;
}
@media (hover: hover) { .tone-tabs .chip:hover { color: var(--fg); text-decoration-color: var(--edge); } }
.tone-tabs .chip[aria-pressed="true"] { color: var(--fg); text-decoration-color: var(--accent); }
.msg-list { display: grid; gap: 8px; margin-top: 12px; }
.msg-opt { padding: 14px 42px 14px 16px; font-size: var(--fs-m); line-height: 1.5; color: var(--fg-2); }
.msg-opt[aria-pressed="true"] { color: var(--fg); }

/* fields: what ends up on the card is typed in the card's serif */
.field { margin-top: 28px; }
.field label { display: block; margin-bottom: 8px; font-weight: 600; font-size: var(--fs-m); line-height: 1.3; color: var(--fg); }
.input, .textarea {
  display: block; width: 100%; padding: 12px 16px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); color: var(--fg);
  font: 400 var(--fs-xl)/1.3 var(--display); transition: border-color .15s, box-shadow .15s;
}
.input { min-height: 58px; }
.textarea { min-height: 172px; resize: vertical; font-size: var(--fs-l); line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); font-style: italic; opacity: 1; }
.input:focus, .textarea:focus { outline: none; border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.counter { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-s); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.counter .warn { color: var(--danger); }
.hint { margin: 10px 0 0; font-size: var(--fs-s); color: var(--fg-2); }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 10px; font-size: var(--fs-m); line-height: 1.35; color: var(--fg-2); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r); font: 600 var(--fs-m)/1.1 var(--ui); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s; -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn .arr { font-family: var(--ui); }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.btn.primary:active { background: var(--accent-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.btn.ghost { background: transparent; border-color: var(--rule-2); color: var(--fg); }
.btn.ghost:active { background: var(--paper-2); }
.btn.quiet { padding: 0 14px 0 6px; background: transparent; color: var(--fg); }
.btn.quiet:active { background: var(--paper-2); }
.btn.wa { background: var(--wa); color: var(--wa-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.wa svg { fill: currentColor; }
.btn.wa:active { background: var(--wa-2); }
@media (hover: hover) {
  .btn.primary:hover { background: var(--accent-2); }
  .btn.ghost:hover { border-color: var(--fg); background: var(--stock); }
  .btn.quiet:hover { background: var(--paper-2); }
  .btn.wa:hover { background: var(--wa-2); }
}
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn.block { width: 100%; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fg); font-size: var(--fs-m); text-align: left;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
@media (hover: hover) { .link-btn:hover { text-decoration-thickness: 2px; } }
.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }

/* ---------- bottom bar: aligned with the question column ---------- */
.navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
.navbar .inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 980px) { .navbar .inner { padding-right: calc(var(--gutter) + var(--aside) + var(--col-gap)); } }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-row #next { margin-left: auto; }
.nav-error {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--danger); background: var(--danger-wash);
  color: var(--danger); font-size: var(--fs-s); font-weight: 600; line-height: 1.4;
}
/* Small phones: the three controls must fit inside the gutters, never touch the edge. */
@media (max-width: 380px) {
  .navbar .btn { padding: 0 14px; font-size: 15px; gap: 8px; }
  .navbar .btn.quiet { padding: 0 10px 0 4px; }
}
@media (max-width: 359px) {
  .peek { justify-content: center; min-width: 48px; padding: 0 11px; }
  .peek > span:last-child { display: none; }
}

/* ---------- live preview (desktop) and the phone preview sheet ---------- */
.live { display: none; }
@media (min-width: 980px) {
  .live { display: block; position: sticky; top: 100px; align-self: start; }
}
.live-frame { width: min(100%, calc((100svh - 250px) * 2 / 3)); margin: 0 auto; }
.live-frame .card, .sheet-card .card, .final-card .card { box-shadow: var(--shadow-lift); }
.live-cap { margin: 18px 0 0; text-align: center; font: italic 400 var(--fs-m)/1.3 var(--display); color: var(--fg-3); }
.peek {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 6px; flex: none;
  border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); color: var(--fg); font-weight: 600; font-size: var(--fs-m);
}
.peek:active { background: var(--paper-2); }
.peek .peek-thumb { width: 24px; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(45, 34, 22, .3); }
.peek .peek-thumb .card { border-radius: 3px; }
@media (min-width: 980px) { .peek { display: none; } }
.sheet {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(72px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background: rgba(245, 240, 230, .97); animation: fade .2s ease both;
}
.sheet .sheet-card { width: min(88vw, calc((100svh - 170px) * 2 / 3), 420px); }
.sheet-cap { margin: 0; font: italic 400 var(--fs-m)/1.3 var(--display); color: var(--fg-3); }
.sheet .close {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px 0 10px;
  border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); color: var(--fg); font-weight: 600; font-size: var(--fs-m);
}
.sheet .close svg { width: 20px; height: 20px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- step 12: the card takes the preview's place ---------- */
body.final-step .live { display: none; }
body.final-step .wizard { grid-template-columns: minmax(0, 1fr); }
.step-listo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "folio" "title" "stage" "sub" "sheet"; }
.step-listo > .folio { grid-area: folio; }
.step-listo > .q { grid-area: title; }
.step-listo > .q-sub { grid-area: sub; margin-top: 18px; }
.step-listo .final { display: contents; }
.final-stage { grid-area: stage; display: grid; justify-items: center; gap: 12px; margin-top: 18px; }
/* On phones the card, its replay button and the bottom bar share one screen. */
.final-card { width: min(100%, 400px, max(210px, calc((100svh - 300px - env(safe-area-inset-bottom)) * 2 / 3))); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-sheet { grid-area: sheet; min-width: 0; margin-top: 26px; }
.final-sheet .hint { margin: 0 0 10px; }
.summary { border-top: 1px solid var(--fg); }
.sum-row {
  display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 48px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--fg); text-align: left;
}
.sum-k { font-size: var(--fs-s); color: var(--fg-3); }
.sum-v { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-m); }
.sum-go { display: grid; place-items: center; color: var(--fg-3); }
.sum-go svg { width: 18px; height: 18px; }
.sum-row:active { background: var(--paper-2); }
@media (hover: hover) { .sum-row:hover .sum-v { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .sum-row:hover .sum-go { color: var(--accent); } }
@media (min-width: 980px) {
  .step-listo { grid-template-columns: minmax(0, 1fr) var(--aside); grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); grid-template-areas: "folio stage" "title stage" "sub stage" "sheet stage"; }
  .step-listo > .q-sub { margin-top: 12px; }
  .final-stage { align-self: start; margin-top: 0; }
  .final-card { width: min(100%, calc((100svh - 250px) * 2 / 3)); }
  .final-sheet { margin-top: 28px; }
  .sum-row { min-height: 44px; padding: 8px 0; }
}

/* ---------- share ---------- */
.step-share { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 18px; grid-template-areas: "folio folio" "title thumb" "sub thumb" "share share"; }
.step-share > .folio { grid-area: folio; }
.step-share > .q { grid-area: title; }
.step-share > .q-sub { grid-area: sub; }
.share-thumb { grid-area: thumb; align-self: start; margin-top: 2px; transform: rotate(3deg); }
.share-thumb .card { border-radius: 6px; box-shadow: var(--shadow-card); }
.share { grid-area: share; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin-top: 28px; }
.share .btn.wa { min-height: 58px; font-size: var(--fs-l); }
.share .btn.wa svg { width: 24px; height: 24px; }
.share-or { margin: 6px 0 -4px; font-size: var(--fs-s); color: var(--fg-2); }
.linkbox { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); }
.linkbox input { flex: 1; min-width: 0; padding: 0 14px; border: 0; background: none; color: var(--fg); font-size: var(--fs-m); text-overflow: ellipsis; }
.linkbox input:focus { outline: none; }
.linkbox:focus-within { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.linkbox .btn { flex: none; min-width: 112px; padding: 0 16px; border: 0; border-left: 1px solid var(--rule-2); border-radius: 0 var(--r) var(--r) 0; background: transparent; color: var(--fg); }
.linkbox .btn:active { background: var(--paper-2); }
@media (hover: hover) { .linkbox .btn:hover { background: var(--paper-2); } }
.share-more { display: flex; flex-wrap: wrap; gap: 8px; }
.share-more .btn { flex: 1 1 140px; }
.share-again { display: grid; justify-items: start; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--rule); }
@media (min-width: 980px) {
  .step-share { grid-template-columns: minmax(0, 1fr) var(--aside); grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); grid-template-areas: "folio thumb" "title thumb" "sub thumb" "share thumb"; }
  .share-thumb { justify-self: center; width: min(100%, calc((100svh - 250px) * 2 / 3)); margin: 0; transform: none; }
  .share-thumb .card { border-radius: 22px; box-shadow: var(--shadow-lift); }
  .share { max-width: 520px; margin-top: 32px; }
}

/* ---------- the card ---------- */
.card {
  position: relative; container-type: inline-size; width: 100%; aspect-ratio: 2 / 3; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--sky-1, #111); color: var(--ink, #fff); -webkit-user-select: none; user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.card-art, .card-fx, .card-scrim, .card-copy { position: absolute; inset: 0; }
.card-art svg { display: block; width: 100%; height: 100%; }
.card-fx { width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.card-scrim { z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--scrim), .5) 0%, rgba(var(--scrim), 0) 30%), linear-gradient(to top, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .66) 30%, rgba(var(--scrim), 0) 57%); }
.card-copy { z-index: 3; display: flex; flex-direction: column; padding: 9cqw 8cqw 8.5cqw; text-align: center; }
.card-to { margin: 0; font: 500 3.9cqw/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .92; }
.card-to strong { font-weight: 700; letter-spacing: .1em; }
.card-title {
  margin: 2.4cqw 0 0; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600);
  font-size: calc(var(--title-size) * var(--title-k, 1)); line-height: 1.05; letter-spacing: var(--title-track, -.01em); color: var(--ink); text-wrap: balance;
  text-shadow: 0 .3cqw 3.2cqw rgba(var(--scrim), .55);
}
.card-title .w { display: inline-block; white-space: nowrap; }
.card-title .ch { display: inline-block; }
.card-body { margin-top: auto; }
.card-msg { margin: 0; font-family: var(--body-font); font-weight: var(--body-weight, 400); font-size: var(--body-size); line-height: 1.45; white-space: pre-line; color: var(--ink-2); text-wrap: pretty; text-shadow: 0 .2cqw 2cqw rgba(var(--scrim), .5); }
.card.long .card-msg { font-size: calc(var(--body-size) * .9); }
.card.xlong .card-msg { font-size: calc(var(--body-size) * .8); }
.card-from { margin: 3cqw 0 0; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600); font-size: var(--from-size, 6.4cqw); color: var(--ink); line-height: 1.1; }
.card.font-elegante { --title-font: 'Fraunces', Georgia, serif; --title-style: italic; --title-weight: 600; --title-size: 10.6cqw; --body-font: 'Fraunces', Georgia, serif; --body-size: 4.6cqw; --from-size: 6cqw; }
.card.font-caligrafia { --title-font: 'Great Vibes', cursive; --title-weight: 400; --title-size: 14.5cqw; --title-track: 0; --body-font: 'Fraunces', Georgia, serif; --body-size: 4.6cqw; --from-size: 8.4cqw; }
.card.font-manuscrita { --title-font: 'Caveat', cursive; --title-weight: 700; --title-size: 13.4cqw; --title-track: 0; --body-font: 'Caveat', cursive; --body-weight: 500; --body-size: 6cqw; --from-size: 7.6cqw; }
.card.font-moderna { --title-font: 'Outfit', system-ui, sans-serif; --title-weight: 700; --title-size: 10.2cqw; --title-track: -.025em; --body-font: 'Outfit', system-ui, sans-serif; --body-size: 4.5cqw; --from-size: 5.4cqw; }

.card-art { transform-origin: 50% 60%; }
/* Long messages: the countdown clock shrinks toward the title so the text clears it. */
.card.scene-reloj.long .card-art svg { transform: scale(.84); transform-origin: 50% 34%; }
/* Great Vibes sets its spaces very tight. */
.card.font-caligrafia .card-title { word-spacing: .14em; }
.card:not(.revealed) .card-copy > * { opacity: 0; }
/* Nothing in the scene moves while the opening still covers it. */
.card:not(.revealed) .card-art * { animation-play-state: paused; }
.card.revealed:not(.still) .card-art { animation: settle 2.2s var(--ease) both; }
.card.revealed:not(.still) .card-to { animation: rise .8s var(--ease) .15s both; }
.card.revealed:not(.still) .card-title .ch { animation: letter .7s var(--ease) both; animation-delay: calc(.35s + var(--i) * 34ms); }
.card.revealed:not(.still) .card-body { animation: rise 1s var(--ease) both; animation-delay: calc(.85s + var(--n, 10) * 34ms); }
.card.settled .card-to, .card.settled .card-title .ch, .card.settled .card-body { animation: none; opacity: 1; }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes letter { from { opacity: 0; transform: translateY(.35em) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(5cqw); } to { opacity: 1; transform: none; } }

/* scene paint: gradients and fills read the palette variables */
.s-sky1 { stop-color: var(--sky-1); } .s-sky2 { stop-color: var(--sky-2); } .s-sky3 { stop-color: var(--sky-3); }
.s-glow { stop-color: var(--glow); } .s-window { stop-color: var(--window); }
.s-land1 { stop-color: var(--land-1); } .s-land2 { stop-color: var(--land-2); } .s-land3 { stop-color: var(--land-3); }
.s-aur1 { stop-color: var(--aurora-1); } .s-aur2 { stop-color: var(--aurora-2); }
.s-sea1 { stop-color: var(--sea-1); } .s-sea2 { stop-color: var(--sea-2); }
.s-sand1 { stop-color: var(--sand-1); } .s-sand2 { stop-color: var(--sand-2); }
.s-tree1 { stop-color: var(--tree-1); } .s-tree2 { stop-color: var(--tree-2); }
.s-bld2 { stop-color: var(--bld-2); } .s-water { stop-color: var(--water); }
.s-face { stop-color: var(--face); } .s-face2 { stop-color: var(--face-2); }
.f-glow { fill: var(--glow); } .f-glow2 { fill: var(--sky-2); opacity: .22; }
.f-star { fill: var(--star, var(--glow)); } .f-star-s { stroke: var(--star, var(--glow)); }
.f-land1 { fill: var(--land-1); } .f-land2 { fill: var(--land-2); } .f-land3 { fill: var(--land-3); }
.f-tree { fill: var(--tree); } .f-tree2 { fill: var(--tree-2); } .f-tree3 { fill: var(--tree-3); }
.f-window { fill: var(--window); } .f-cloud { fill: var(--cloud); } .f-shimmer { fill: var(--shimmer); }
.f-palm { fill: var(--palm); } .f-palm.frond { fill: var(--palm-2, var(--palm)); } .f-trunk { fill: var(--trunk); } .f-floor { fill: var(--floor); }
.f-light1 { fill: var(--light-1); } .f-light2 { fill: var(--light-2); } .f-light3 { fill: var(--light-3); } .f-light-red { fill: #ff5a5a; }
.f-orn1 { fill: var(--orn-1); } .f-orn2 { fill: var(--orn-2); } .f-orn3 { fill: var(--orn-3); }
.f-gift1 { fill: var(--gift-1); } .f-gift2 { fill: var(--gift-2); } .f-gift3 { fill: var(--gift-3); } .f-ribbon { fill: var(--ribbon); }
.f-bld1 { fill: var(--bld-1); } .f-bld2 { fill: var(--bld-2); } .f-bld3 { fill: var(--bld-3); }
.f-tick { fill: var(--tick); } .f-hand { fill: var(--hand); } .f-ring { fill: var(--ring); }
.f-fx1 { color: var(--window, var(--shimmer)); } .f-fx2 { color: var(--glow); } .f-fx3 { color: var(--ink); }
.burst line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.burst circle { fill: currentColor; }
.aurora { opacity: calc(var(--aurora, 0) * .85); }
.night-only { opacity: var(--stars, 0); }
.sun-g { transform: translateY(var(--sun-dy, 0px)); }
.clock-num text { font: 600 21px var(--display); }

/* scene motion */
.tw { animation: tw 3s ease-in-out infinite alternate; }
.blink { animation: blink 1.6s ease-in-out infinite alternate; }
.glow-pulse, .win-glow { animation: glowp 3s ease-in-out infinite alternate; }
.smoke { transform-box: fill-box; transform-origin: center; animation: smoke 4.2s linear infinite; }
.aur-a { animation: aur 11s ease-in-out infinite alternate; }
.aur-b { animation: aur 15s ease-in-out infinite alternate-reverse; }
.sway { transform-box: view-box; animation: sway 5.5s ease-in-out infinite alternate; }
.drift { animation: drift 16s ease-in-out infinite alternate; }
.shimmer { transform-box: fill-box; transform-origin: center; animation: shim 2.6s ease-in-out infinite alternate; }
.wave { animation: wave 4.5s ease-in-out infinite alternate; }
.bird { fill: none; stroke-width: 1.6; stroke-linecap: round; animation: bird 7s ease-in-out infinite alternate; }
.float { animation: float 9s ease-in-out infinite alternate; }
.pulse { transform-box: view-box; animation: pulse 2.8s ease-in-out infinite alternate; }
.spin-slow { transform-box: view-box; animation: spin 90s linear infinite; }
.wblink { animation: wblink 5s steps(1) infinite; }
.burst { transform-box: view-box; opacity: 0; animation: burst 3.8s ease-out infinite; }
.dash-move { animation: dash 26s linear infinite; }
.dash-move.rev { animation-duration: 44s; animation-direction: reverse; }
.hand { transform-box: view-box; }
.hand-h { transform: rotate(-4deg); } .hand-m { transform: rotate(-36deg); } .hand-s { transform: rotate(-210deg); }
.card.revealed:not(.still) .hand { animation: toTwelve 3s cubic-bezier(.55, 0, .25, 1) .25s forwards; }
.clock-flash { opacity: 0; pointer-events: none; }
.card.revealed:not(.still) .clock-flash { animation: flash 1.5s ease-out 3.25s both; }
.clock-glow { opacity: .55; }
.card.revealed:not(.still) .clock-glow { animation: glowp 2.2s ease-in-out 3.25s infinite alternate; }
@keyframes tw { from { opacity: .2; } to { opacity: 1; } }
@keyframes blink { from { opacity: .3; } to { opacity: 1; } }
@keyframes glowp { from { opacity: .5; } to { opacity: 1; } }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .5; } 100% { transform: translate(12px, -48px) scale(1.9); opacity: 0; } }
@keyframes aur { from { transform: translateX(-20px) skewX(-5deg); } to { transform: translateX(20px) skewX(5deg); } }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.4deg); } }
@keyframes drift { from { transform: translateX(-12px); } to { transform: translateX(14px); } }
@keyframes shim { from { opacity: .2; transform: scaleX(.7); } to { opacity: 1; transform: scaleX(1.1); } }
@keyframes wave { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes bird { from { transform: translate(0, 0); } to { transform: translate(16px, -9px); } }
@keyframes float { from { transform: translateY(8px); } to { transform: translateY(-10px); } }
@keyframes pulse { from { transform: scale(.88); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wblink { 0%, 62% { opacity: .9; } 63%, 100% { opacity: .1; } }
@keyframes burst { 0% { opacity: 0; transform: scale(.2); } 10% { opacity: 1; } 55% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes dash { to { stroke-dashoffset: -400; } }
@keyframes toTwelve { to { transform: rotate(0deg); } }
@keyframes flash { 0% { opacity: 0; } 14% { opacity: .55; } 100% { opacity: 0; } }

/* still thumbnails: no motion, show a representative frame */
.card.still *, .card.still *::before, .card.still *::after { animation: none !important; transition: none !important; }
.card.still .burst { opacity: .85; transform: none; }

/* ---------- openings ---------- */
.op {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7cqw;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; color: var(--ink);
  background: radial-gradient(120% 80% at 50% 32%, var(--sky-3), var(--sky-2) 45%, var(--sky-1));
  transition: opacity .55s ease, visibility .55s;
}
.op:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.op.done { opacity: 0; visibility: hidden; pointer-events: none; }
.op-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6cqw; z-index: 3; }
.op-to { margin: 0; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600); font-size: calc(var(--title-size) * .58); line-height: 1.1; text-align: center; text-shadow: 0 .4cqw 2.4cqw rgba(var(--scrim), .5); max-width: 84cqw; }
.op-to strong { font-weight: inherit; }
.op-hint { position: absolute; bottom: 8cqw; margin: 0; display: inline-flex; align-items: center; gap: 2.4cqw; font: 600 3.6cqw/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; opacity: .85; transition: opacity .3s; }
.op.s1 .op-hint { opacity: 0; }
.op-dot { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 4cqw rgba(255, 255, 255, 0); } }
.op:not(.s1) .op-stage { animation: bob 2.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-1cqw); } to { transform: translateY(1.2cqw); } }

/* envelope */
.env { position: relative; width: 72cqw; height: 48cqw; perspective: 160cqw; filter: drop-shadow(0 4cqw 5cqw rgba(0, 0, 0, .35)); }
.env-back { position: absolute; inset: 0; border-radius: 2.6cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--op-1) 82%, #000), var(--op-1)); }
.env-letter {
  position: absolute; left: 6%; right: 6%; top: 7%; height: 86%; z-index: 1; border-radius: 1.6cqw; display: grid; place-items: center; padding: 3cqw;
  background: linear-gradient(#fffdf8, #f4ecdd); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .18); transition: transform .8s var(--ease);
}
.env-title { font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600); font-size: calc(var(--title-size) * .52); color: var(--op-3); text-align: center; line-height: 1.05; }
.env-pocket {
  position: absolute; inset: 0; z-index: 2; border-radius: 2.6cqw;
  background:
    linear-gradient(to top right, rgba(0, 0, 0, .07) 49.6%, transparent 50%),
    linear-gradient(to top left, rgba(0, 0, 0, .07) 49.6%, transparent 50%),
    linear-gradient(170deg, var(--op-1), color-mix(in srgb, var(--op-1) 88%, #000));
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 3; transform-origin: 50% 0; border-radius: 2.6cqw 2.6cqw 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--op-1) 78%, #000), var(--op-1)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .6s cubic-bezier(.45, 0, .2, 1);
}
.env-seal {
  position: absolute; left: 50%; top: 59%; z-index: 4; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--op-2) 62%, #fff), var(--op-2) 55%, color-mix(in srgb, var(--op-2) 70%, #000));
  color: rgba(255, 255, 255, .9); font: italic 600 6.4cqw/1 var(--display); box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .32), inset 0 0 0 .9cqw rgba(255, 255, 255, .1);
  transition: transform .35s ease, opacity .3s ease;
}
.op-sobre.s1 .env-seal { transform: scale(1.5) rotate(-24deg); opacity: 0; }
.op-sobre.s2 .env-flap { transform: rotateX(180deg); }
.op-sobre.s3 .env-flap { z-index: 0; }
.op-sobre.s3 .env-letter { transform: translateY(-60%) rotate(-2deg); }

/* gift box */
.gift { position: relative; width: 52cqw; height: 50cqw; }
.gift-box {
  position: absolute; left: 7%; right: 7%; bottom: 0; height: 64%; border-radius: 1.8cqw; box-shadow: 0 3cqw 5cqw -1cqw rgba(0, 0, 0, .45);
  background:
    linear-gradient(90deg, transparent 43%, var(--op-1) 43% 57%, transparent 57%),
    linear-gradient(165deg, color-mix(in srgb, var(--op-2) 82%, #fff), var(--op-2) 45%, color-mix(in srgb, var(--op-2) 72%, #000));
}
.gift-lid {
  position: absolute; left: 1%; right: 1%; top: 25%; height: 17%; z-index: 2; border-radius: 1.8cqw; box-shadow: 0 1cqw 1.6cqw rgba(0, 0, 0, .28);
  background: linear-gradient(90deg, transparent 43%, var(--op-1) 43% 57%, transparent 57%), linear-gradient(180deg, color-mix(in srgb, var(--op-2) 78%, #fff), var(--op-2));
  transition: transform .75s cubic-bezier(.3, 1.25, .5, 1), opacity .4s ease .4s;
}
.gift-bow { position: absolute; left: 50%; bottom: 92%; width: 0; height: 0; }
.gift-bow i { position: absolute; bottom: -1cqw; width: 13cqw; height: 9cqw; border: 2.4cqw solid var(--op-1); border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; }
.gift-bow i:first-child { right: -.6cqw; transform: rotate(-22deg); transform-origin: 100% 100%; }
.gift-bow i:nth-child(2) { left: -.6cqw; transform: rotate(22deg); transform-origin: 0 100%; }
.gift-bow b { position: absolute; left: -2.6cqw; bottom: -1.8cqw; width: 5.2cqw; height: 4.4cqw; border-radius: 1.4cqw; background: var(--op-1); }
.gift-glow { position: absolute; left: 50%; top: 42%; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 50%; z-index: 1; opacity: 0; transform: scale(.2); background: radial-gradient(circle, #fff 0, rgba(255, 244, 214, .85) 30%, rgba(255, 244, 214, 0) 70%); transition: transform .9s ease, opacity .5s ease; }
.op-regalo.s1 .gift { animation: wiggle .46s ease-in-out 1; }
.op-regalo.s2 .gift-lid { transform: translate(8cqw, -46cqw) rotate(-24deg); opacity: 0; }
.op-regalo.s2 .gift-glow { opacity: 1; transform: scale(10); }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.02); } 50% { transform: rotate(3.5deg); } 75% { transform: rotate(-2deg); } }

/* curtain */
.op-telon { background: radial-gradient(100% 70% at 50% 42%, var(--sky-3), var(--sky-1)); }
.op-telon.s2 { background: transparent; }
.cur {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; transition: transform 1.2s cubic-bezier(.7, 0, .25, 1);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .07) 3.4cqw, rgba(0, 0, 0, .18) 6cqw, rgba(0, 0, 0, .32) 8cqw),
    linear-gradient(180deg, color-mix(in srgb, var(--op-2) 88%, #fff), var(--op-2) 40%, color-mix(in srgb, var(--op-2) 62%, #000));
  box-shadow: inset 0 -10cqw 12cqw rgba(0, 0, 0, .28);
}
.cur-l { left: 0; transform-origin: 0 50%; }
.cur-r { right: 0; transform-origin: 100% 50%; }
.cur-top { position: absolute; left: 0; right: 0; top: 0; height: 10%; z-index: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--op-2) 70%, #000), var(--op-2)); box-shadow: 0 .8cqw 0 color-mix(in srgb, var(--gold) 80%, transparent), 0 2.4cqw 3cqw rgba(0, 0, 0, .35); transition: transform 1s cubic-bezier(.7, 0, .25, 1); }
.telon-sign { padding: 3cqw 6cqw; border-radius: 2cqw; border: .5cqw solid rgba(255, 225, 163, .85); background: rgba(0, 0, 0, .28); color: #fff; transition: opacity .3s ease, transform .3s ease; }
.op-telon .op-stage { animation: none; }
.op-telon .op-hint { z-index: 3; color: #fff; }
.op-telon.s1 .telon-sign { opacity: 0; transform: translateY(-3cqw); }
.op-telon.s2 .cur-l { transform: translateX(-86%) scaleX(.42); }
.op-telon.s2 .cur-r { transform: translateX(86%) scaleX(.42); }
.op-telon.s2 .cur-top { transform: translateY(-100%); }

/* ---------- recipient page: the card on paper, then a reply card ---------- */
body.view { background: var(--paper); }
.view-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 100svh;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
}
.brandmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; color: var(--fg); text-decoration: none; font: 600 var(--fs-l)/1 var(--display); letter-spacing: -.01em; }
.brandmark i { font-weight: 400; }
.brandmark svg { width: 24px; height: 24px; flex: none; }
/* --chrome is the height of everything around the card; the reply card adds to it so it
   never covers the card or its buttons. */
.view-card {
  --chrome: 150px;
  width: min(100%, calc((100svh - var(--chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3), 460px);
  transition: width .6s var(--ease);
}
.view-card .card { box-shadow: var(--shadow-lift); }
body.cta-on .view-card { --chrome: 318px; min-width: min(100%, 200px); }
.view-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.view-bar[hidden] { display: flex !important; visibility: hidden; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--stock); color: var(--fg); font-weight: 600; font-size: var(--fs-s);
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn:active { background: var(--paper-2); }
@media (hover: hover) { .icon-btn:hover { border-color: var(--fg); } }
.view-cta { width: min(100%, 460px); }
.view-cta:empty { display: none; }
.cta-sheet {
  position: relative; display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px dashed var(--rule-2); border-radius: var(--r); background: var(--stock);
  animation: sheetIn .5s var(--ease) both;
}
.cta-title { margin: 0; padding-right: 40px; font: italic 400 var(--fs-xl)/1.2 var(--display); color: var(--fg); }
.cta-text { margin: -6px 0 0; padding-right: 8px; font-size: var(--fs-s); line-height: 1.45; color: var(--fg-2); }
.cta-text strong { font-weight: 600; color: var(--fg); }
.cta-sheet .row { display: flex; gap: 8px; }
.cta-sheet .row .btn { flex: 1; padding: 0 12px; }
.cta-close {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r);
  background: none; color: var(--fg-2); font-size: 26px; line-height: 1;
}
.cta-close:active { background: var(--paper-2); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Phone on its side: a readable card, and the page scrolls to the buttons. */
@media (orientation: landscape) and (max-height: 520px) {
  .view-wrap { justify-content: flex-start; }
  .view-card, body.cta-on .view-card { width: min(100%, 290px); }
}
@media (min-width: 1100px) {
  .view-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr); align-content: center; justify-items: center; column-gap: 48px; row-gap: 14px; }
  .view-wrap > * { grid-column: 2; }
  .view-wrap > .view-cta { grid-column: 3; grid-row: 2; align-self: end; justify-self: start; width: min(100%, 320px); }
  body.cta-on .view-card { --chrome: 150px; }
}
.noscript-card { max-width: 420px; padding: 28px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--stock); color: var(--fg); text-align: center; }
.noscript-card h1 { font: italic 400 var(--fs-2xl)/1.1 var(--display); }

/* ---------- misc pages ---------- */
.center-page { display: grid; place-items: center; min-height: calc(100svh - 61px); padding: 32px var(--gutter) 72px; text-align: center; }
.center-page > div { max-width: 34rem; }
.center-page .folio { justify-content: center; margin-bottom: 18px; }
.center-page .folio::before { content: ''; flex: 0 1 56px; align-self: center; height: 1px; margin-right: .7em; background: var(--rule); }
.center-page .folio::after { flex: 0 1 56px; }
.center-page .folio .eyebrow { max-width: none; margin: 0; font-size: inherit; color: var(--accent); }
.center-page h1 { margin: 0 0 12px; font: 400 clamp(var(--fs-2xl), 1rem + 3vw, var(--fs-3xl))/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.center-page p { max-width: 38ch; margin: 0 auto 28px; font-size: var(--fs-l); color: var(--fg-2); }
noscript .center-page { min-height: 60vh; }

@media (prefers-reduced-motion: reduce) {
  .card *, .op *, .step, .sheet, .cta-sheet, .view-card, .progress > span { animation: none !important; transition: none !important; }
  .opt[aria-pressed="true"]::after, .chips .chip[aria-pressed="true"]::after, .msg-opt[aria-pressed="true"]::after, .occ-art::after { animation: none; }
  .card .hand { transform: none; }
  .card:not(.revealed) .card-copy > * { opacity: 0; }
}


/* ---------- scenes added as modules (public/js/scenes/*.js) ---------- */

/* scene: pesebre */
.s-pes-dusk { stop-color: var(--dusk); } .s-pes-warm { stop-color: var(--warm); } .s-pes-babe { stop-color: var(--babe); }
.s-pes-star { stop-color: var(--star); } .s-pes-hill3 { stop-color: var(--hill-3); } .s-pes-ground { stop-color: var(--ground); }
.f-pes-dot { fill: var(--twinkle); } .f-pes-star { fill: var(--star); } .f-pes-core { fill: var(--babe); }
.f-pes-hill1 { fill: var(--hill-1); } .f-pes-hill2 { fill: var(--hill-2); } .f-pes-hill3 { fill: var(--hill-3); } .f-pes-ground { fill: var(--ground); }
.f-pes-fig { fill: var(--figure); } .f-pes-beast { fill: var(--beast); } .f-pes-in { fill: var(--inside); } .f-pes-plank { fill: var(--plank); } .f-pes-babe { fill: var(--babe); }
.k-pes-hill1 { stroke: var(--hill-1); } .k-pes-fig { stroke: var(--figure); } .k-pes-rim { stroke: var(--glow); }
.pes-halo, .pes-rays, .pes-spark, .pes-star-g { transform-box: view-box; transform-origin: 200px 196px; }
.pes-halo { animation: pesHalo 5s ease-in-out infinite alternate; }
.pes-rays { animation: pesRays 4.2s ease-in-out infinite alternate; }
.pes-spark { animation: pesSpark 3.2s ease-in-out infinite alternate; }
.pes-warm { animation: pesWarm 3.4s ease-in-out infinite alternate; }
.pes-babe-glow { animation: glowp 2.6s ease-in-out infinite alternate; }
.pes-rim { opacity: .5; }
.card.revealed:not(.still) .pes-star-g { animation: pesIgnite 1.8s var(--ease) .2s both; }
.card.revealed:not(.still) .pes-beam { animation: pesBeam 2.6s ease-out .9s both; }
@keyframes pesHalo { from { opacity: .8; transform: scale(.95); } to { opacity: 1; transform: scale(1.04); } }
@keyframes pesRays { from { opacity: .75; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }
@keyframes pesSpark { from { transform: scale(.9); } to { transform: scale(1.08); } }
@keyframes pesWarm { from { opacity: .84; } to { opacity: 1; } }
@keyframes pesIgnite { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes pesBeam { from { opacity: 0; } to { opacity: 1; } }

/* scene: chimenea */
.s-chim-fireglow { stop-color: var(--fireglow); } .s-chim-shade { stop-color: var(--shade); } .s-chim-snow { stop-color: var(--snow); }
.s-chim-night1 { stop-color: var(--night-1); } .s-chim-night2 { stop-color: var(--night-2); }
.s-chim-floor1 { stop-color: var(--floor-1); } .s-chim-floor2 { stop-color: var(--floor-2); }
.s-chim-fire1 { stop-color: var(--fire-1); } .s-chim-fire2 { stop-color: var(--fire-2); } .s-chim-fire3 { stop-color: var(--fire-3); }
.s-chim-tree1 { stop-color: var(--tree-1); } .s-chim-tree2 { stop-color: var(--tree-2); }
.f-chim-stripe { fill: var(--stripe); } .f-chim-trim { fill: var(--trim); } .f-chim-shade { fill: var(--shade); }
.f-chim-snow { fill: var(--snow); } .f-chim-night1 { fill: var(--night-1); }
.f-chim-stone1 { fill: var(--stone-1); } .f-chim-stone2 { fill: var(--stone-2); } .f-chim-mantel { fill: var(--mantel); }
.f-chim-firebox, .f-chim-iron { fill: var(--firebox); } .f-chim-log { fill: var(--log); } .f-chim-log2 { fill: var(--log-2); }
.f-chim-fire1 { fill: var(--fire-1); } .f-chim-fire2 { fill: var(--fire-2); } .f-chim-fire3 { fill: var(--fire-3); } .f-chim-ember { fill: var(--ember); }
.f-chim-tree1 { fill: var(--tree-1); } .f-chim-tree2 { fill: var(--tree-2); } .f-chim-berry { fill: var(--berry); }
.f-chim-stock1 { fill: var(--stock-1); } .f-chim-stock2 { fill: var(--stock-2); } .f-chim-cuff { fill: var(--cuff); }
.f-chim-light { fill: var(--light); } .f-chim-brass { fill: var(--brass); } .f-chim-orn1 { fill: var(--orn-1); } .f-chim-orn2 { fill: var(--orn-2); }
.f-chim-rug1 { fill: var(--rug-1); } .k-chim-rug2 { stroke: var(--rug-2); } .s-chim-rug1 { stop-color: var(--rug-1); }
.chim-flame, .chim-cdl { transform-box: fill-box; transform-origin: 50% 100%; animation: chimFlick 1.2s ease-in-out infinite; }
.chim-cdl { animation-duration: 1.7s; }
.chim-flick-glow, .chim-cdl-glow { animation: chimGlow 2.3s linear infinite; }
.chim-room { animation: chimGlow 3.1s linear infinite; }
.chim-l1 { animation: blink 1.6s ease-in-out infinite alternate; }
.chim-l2 { animation: blink 1.6s ease-in-out -.8s infinite alternate; }
.chim-snow-a { animation: chimSnow 6.5s linear infinite; }
.chim-snow-b { animation: chimSnow 10s linear infinite; }
.chim-lick { transform-box: fill-box; transform-origin: 50% 100%; animation: chimLick 1.4s ease-out infinite; }
.card.still .chim-lick { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .chim-lick { opacity: 0; } }
@keyframes chimFlick { 0%, 100% { transform: none; } 22% { transform: scale(.93, 1.08) skewX(-3deg); } 47% { transform: scale(1.05, .9) skewX(2deg); } 71% { transform: scale(.97, 1.05) skewX(-1.5deg); } }
@keyframes chimGlow { 0%, 100% { opacity: 1; } 18% { opacity: .82; } 36% { opacity: .95; } 52% { opacity: .78; } 74% { opacity: .92; } }
@keyframes chimSnow { from { transform: translateY(0); } to { transform: translateY(76px); } }
@keyframes chimLick { 0%, 100% { opacity: 0; transform: translateY(6px) scale(.6); } 30% { opacity: .9; } 70% { opacity: 0; transform: translateY(-10px) scale(1); } }

/* scene: esfera (Bola de nieve) */
.s-esf-globe1 { stop-color: var(--globe-1); } .s-esf-globe2 { stop-color: var(--globe-2); }
.s-esf-snow { stop-color: var(--snow); } .s-esf-snow2 { stop-color: var(--snow-2); }
.s-esf-win { stop-color: var(--window); } .s-esf-star { stop-color: var(--star); }
.s-esf-bk1 { stop-color: var(--bokeh-1); } .s-esf-bk2 { stop-color: var(--bokeh-2); }
.s-esf-wood1 { stop-color: var(--wood-1); } .s-esf-wood2 { stop-color: var(--wood-2); } .s-esf-wood3 { stop-color: var(--wood-3); }
.s-esf-brass { stop-color: var(--brass); } .s-esf-brass2 { stop-color: var(--brass-2); } .s-esf-brasshi { stop-color: var(--brass-hi); }
.s-esf-table { stop-color: var(--table); } .s-esf-table2 { stop-color: var(--table-2); }
.s-esf-glass { stop-color: var(--glass); } .s-esf-rim { stop-color: var(--rim); }
.f-esf-snow { fill: var(--snow); } .f-esf-snow2 { fill: var(--snow-2); } .f-esf-win { fill: var(--window); } .f-esf-star { fill: var(--star); }
.f-esf-house { fill: var(--house); } .f-esf-house2 { fill: var(--house-2); } .f-esf-roof { fill: var(--roof); }
.f-esf-pine { fill: var(--pine); } .f-esf-pine2 { fill: var(--pine-2); }
.f-esf-l1 { fill: var(--light-1); } .f-esf-l2 { fill: var(--light-2); } .f-esf-l3 { fill: var(--light-3); }
.f-esf-brass2 { fill: var(--brass-2); } .f-esf-glass { fill: var(--glass); }
.k-esf-snow { stroke: var(--snow); } .k-esf-rim { stroke: var(--rim); } .k-esf-edge { stroke: var(--glow); }
.k-esf-wood1 { stroke: var(--wood-1); } .k-esf-wood3 { stroke: var(--wood-3); }
.k-esf-brass2 { stroke: var(--brass-2); } .k-esf-brasshi { stroke: var(--brass-hi); }
.esf-swirl, .esf-whirl, .esf-rock { transform-box: view-box; }
.esf-swirl-a { animation: esfSpin 26s linear infinite; }
.esf-swirl-b { animation: esfSpin 38s linear infinite reverse; }
.esf-swirl-c { animation: esfSpin 52s linear infinite; }
.esf-bk { animation: esfBk 6s ease-in-out infinite alternate; }
.esf-blink { animation: esfBlink 1.8s ease-in-out infinite alternate; }
.esf-glint { animation: esfBlink 1.3s ease-in-out infinite alternate; }
.esf-twinkle { transform-box: fill-box; transform-origin: center; animation: esfTwinkle 2.6s ease-in-out infinite alternate; }
.esf-lamp { animation: esfLamp 3.2s ease-in-out infinite alternate; }
.card.revealed:not(.still) .esf-whirl { animation: esfWhirl 5.5s cubic-bezier(.12, .7, .3, 1) .2s both; }
.card.revealed:not(.still) .esf-rock { animation: esfRock 1.7s ease-out .15s both; }
@keyframes esfSpin { to { transform: rotate(360deg); } }
@keyframes esfWhirl { from { transform: rotate(-220deg); } to { transform: none; } }
@keyframes esfRock { 0% { transform: none; } 14% { transform: rotate(-2.6deg); } 34% { transform: rotate(2deg); } 54% { transform: rotate(-1.1deg); } 74% { transform: rotate(.5deg); } 100% { transform: none; } }
@keyframes esfBk { from { opacity: .55; } to { opacity: 1; } }
@keyframes esfBlink { from { opacity: .35; } to { opacity: 1; } }
@keyframes esfTwinkle { from { opacity: .7; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
@keyframes esfLamp { from { opacity: .75; } to { opacity: 1; } }

/* scene: patio (Nochebuena en el patio) */
.s-pat-dusk { stop-color: var(--dusk); } .s-pat-bulb { stop-color: var(--bulb); }
.s-pat-door { stop-color: var(--door); } .s-pat-door2 { stop-color: var(--door-2); }
.s-pat-wall { stop-color: var(--wall); } .s-pat-wall2 { stop-color: var(--wall-2); }
.s-pat-floor1 { stop-color: var(--floor-1); } .s-pat-floor2 { stop-color: var(--floor-2); }
.s-pat-cloth { stop-color: var(--cloth); } .s-pat-cloth2 { stop-color: var(--cloth-2); } .s-pat-shade { stop-color: var(--shade); }
.f-pat-star { fill: var(--star); } .f-pat-far { fill: var(--far); } .f-pat-shade { fill: var(--shade); }
.f-pat-tile { fill: var(--tile); } .f-pat-tile2 { fill: var(--tile-2); }
.f-pat-wall2 { fill: var(--wall-2); } .f-pat-walltop { fill: var(--wall-top); }
.f-pat-wire { fill: var(--wire); } .f-pat-bulb { fill: var(--bulb); } .f-pat-glass { fill: var(--glass); }
.f-pat-leaf { fill: var(--leaf); } .f-pat-leaf2 { fill: var(--leaf-2); } .f-pat-flower { fill: var(--flower); }
.f-pat-chair { fill: var(--chair); } .f-pat-cloth { fill: var(--cloth); } .f-pat-cloth2 { fill: var(--cloth-2); } .f-pat-runner { fill: var(--runner); }
.f-pat-wine { fill: var(--wine); } .f-pat-bottle { fill: var(--bottle); } .f-pat-foil { fill: var(--foil); }
.f-pat-bread { fill: var(--bread); } .f-pat-crust { fill: var(--crust); }
.f-pat-l1 { fill: var(--light-1); } .f-pat-l2 { fill: var(--light-2); } .f-pat-l3 { fill: var(--light-3); }
.k-pat-wire { stroke: var(--wire); } .k-pat-shade { stroke: var(--shade); } .k-pat-glass { stroke: var(--glass); }
.k-pat-leaf { stroke: var(--leaf); } .k-pat-runner { stroke: var(--runner); }
.pat-night { opacity: var(--stars, 1); }
.pat-glow { animation: patGlow 4s ease-in-out infinite alternate; }
.pat-lamp { animation: patGlow 2.8s ease-in-out infinite alternate; }
.pat-candle-glow { animation: patGlow 1.6s ease-in-out infinite alternate; }
.pat-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: patFlame 1.1s ease-in-out infinite alternate; }
.pat-blink { animation: patBlink 1.7s ease-in-out infinite alternate; }
.card.revealed:not(.still) .pat-on { animation: patOn .7s ease-out both; animation-delay: calc(.3s + var(--k, 0) * 55ms); }
@keyframes patGlow { from { opacity: .72; } to { opacity: 1; } }
@keyframes patFlame { from { transform: scale(.92, .86) skewX(-4deg); } to { transform: scale(1.04, 1.08) skewX(3deg); } }
@keyframes patBlink { from { opacity: .35; } to { opacity: 1; } }
@keyframes patOn { 0% { opacity: .12; } 45% { opacity: 1; } 60% { opacity: .55; } 100% { opacity: 1; } }

/* ---------- scene: copas (Brindis) ---------- */
.s-cop-bk1 { stop-color: var(--cop-bk-1); } .s-cop-bk2 { stop-color: var(--cop-bk-2); }
.s-cop-liq1 { stop-color: var(--cop-liq-1); } .s-cop-liq2 { stop-color: var(--cop-liq-2); }
.s-cop-spark { stop-color: var(--cop-spark); }
.f-cop-glass { fill: var(--cop-glass); fill-opacity: var(--cop-glass-a, .1); }
.s-cop-glass { stop-color: var(--cop-glass); } .o-cop-solid { fill-opacity: var(--cop-solid-a, .3); }
.f-cop-hl { fill: var(--cop-hl); } .k-cop-hl { fill: none; stroke: var(--cop-hl); }
.k-cop-edge { fill: none; stroke: var(--cop-edge); }
.f-cop-foam { fill: var(--cop-foam); } .k-cop-foam { fill: none; stroke: var(--cop-foam); }
.f-cop-spark { fill: var(--cop-spark); }
.cop-bub { fill: var(--cop-foam); opacity: .85; animation: copRise 3s cubic-bezier(.45, .05, .8, .6) infinite; }
.cop-bk { animation: copBk 6s ease-in-out infinite alternate; }
.cop-gl, .cop-spark, .cop-glint { transform-box: view-box; }
.card.revealed:not(.still) .cop-gl-l { animation: copInL 1.5s cubic-bezier(.3, .6, .25, 1) .3s both; }
.card.revealed:not(.still) .cop-gl-r { animation: copInR 1.5s cubic-bezier(.3, .6, .25, 1) .3s both; }
.cop-spark { animation: copTw 2.6s ease-in-out infinite alternate; }
.card.revealed:not(.still) .cop-spark { animation: copFlash 1.4s ease-out 1.05s both, copTw 2.6s ease-in-out 2.45s infinite alternate; }
.cop-glint { animation: copGlint 2.2s ease-in-out infinite alternate; }
@keyframes copRise { to { transform: translateY(-100px); } }
@keyframes copBk { from { opacity: .45; } to { opacity: 1; } }
@keyframes copInL { 0% { transform: translate(-26px, 8px) rotate(-6deg); } 60% { transform: translate(1px, 0) rotate(.5deg); } 72% { transform: translate(-3px, .5px) rotate(-.6deg); } 86% { transform: translate(.6px, 0) rotate(.1deg); } 100% { transform: none; } }
@keyframes copInR { 0% { transform: translate(26px, 8px) rotate(6deg); } 60% { transform: translate(-1px, 0) rotate(-.5deg); } 72% { transform: translate(3px, .5px) rotate(.6deg); } 86% { transform: translate(-.6px, 0) rotate(-.1deg); } 100% { transform: none; } }
@keyframes copFlash { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: none; } }
@keyframes copTw { from { transform: none; } to { transform: scale(.82) rotate(10deg); opacity: .82; } }
@keyframes copGlint { from { opacity: .15; transform: scale(.55); } to { opacity: 1; transform: scale(1.1); } }

/* ---------- scene: globos (Globos y serpentinas) ---------- */
.s-glb-bulb { stop-color: var(--glb-bulb); } .f-glb-bulb { fill: var(--glb-bulb); }
.s-glb-b1 { stop-color: var(--glb-b1); } .s-glb-b2 { stop-color: var(--glb-b2); } .s-glb-b3 { stop-color: var(--glb-b3); }
.s-glb-b1a, .s-glb-b1c { stop-color: var(--glb-b1); } .s-glb-b2a, .s-glb-b2c { stop-color: var(--glb-b2); } .s-glb-b3a, .s-glb-b3c { stop-color: var(--glb-b3); }
.f-glb-b1, .f-glb-b1c, .f-glb-b1d { fill: var(--glb-b1); } .f-glb-b2, .f-glb-b2c, .f-glb-b2d { fill: var(--glb-b2); } .f-glb-b3, .f-glb-b3c, .f-glb-b3d { fill: var(--glb-b3); }
.f-glb-hl { fill: var(--glb-hl); } .k-glb-rim { fill: none; stroke: var(--glb-hl); }
.k-glb-string { fill: none; stroke: var(--glb-string); }
.k-glb-side { stroke: var(--glb-side); } .k-glb-bevel, .k-glb-face { stroke: var(--glb-face); } .k-glb-chan { stroke: var(--glb-chan); }
/* Lighter and darker balloon shades; older browsers keep the flat colors above. */
@supports (color: color-mix(in srgb, red 50%, #fff)) {
  .s-glb-b1a { stop-color: color-mix(in srgb, var(--glb-b1) 50%, #fff); } .s-glb-b2a { stop-color: color-mix(in srgb, var(--glb-b2) 50%, #fff); } .s-glb-b3a { stop-color: color-mix(in srgb, var(--glb-b3) 50%, #fff); }
  .s-glb-b1c { stop-color: color-mix(in srgb, var(--glb-b1) 70%, #000); } .s-glb-b2c { stop-color: color-mix(in srgb, var(--glb-b2) 70%, #000); } .s-glb-b3c { stop-color: color-mix(in srgb, var(--glb-b3) 70%, #000); }
  .f-glb-b1c { fill: color-mix(in srgb, var(--glb-b1) 60%, #000); } .f-glb-b2c { fill: color-mix(in srgb, var(--glb-b2) 60%, #000); } .f-glb-b3c { fill: color-mix(in srgb, var(--glb-b3) 60%, #000); }
  .f-glb-b1d { fill: color-mix(in srgb, var(--glb-b1) 74%, #000); } .f-glb-b2d { fill: color-mix(in srgb, var(--glb-b2) 74%, #000); } .f-glb-b3d { fill: color-mix(in srgb, var(--glb-b3) 74%, #000); }
  .k-glb-bevel { stroke: color-mix(in srgb, var(--glb-face) 55%, #fff); }
}
.glb-chase { animation: glbChase 2.4s ease-in-out infinite; }
.glb-float, .glb-hang, .glb-beam { transform-box: view-box; }
.glb-float { animation: glbFloat 7s ease-in-out infinite alternate; }
.glb-hang { animation: glbHang 6s ease-in-out infinite alternate; }
.glb-beam { animation: glbSweep 9s ease-in-out infinite alternate; }
.glb-beam-r { animation-name: glbSweepR; animation-delay: -4s; }
@keyframes glbChase { 0%, 100% { opacity: .3; } 33% { opacity: 1; } }
@keyframes glbFloat { from { transform: translateY(3px) rotate(-1.4deg); } to { transform: translateY(-6px) rotate(1.4deg); } }
@keyframes glbHang { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes glbSweep { from { transform: rotate(-8deg); } to { transform: rotate(9deg); } }
@keyframes glbSweepR { from { transform: rotate(8deg); } to { transform: rotate(-9deg); } }

/* ---------- scene: reyes (Reyes Magos) ---------- */
.s-rey-star { stop-color: var(--rey-star); } .s-rey-stars { stop-color: var(--rey-stars); }
.f-rey-star { fill: var(--rey-star); } .f-rey-dot { fill: var(--rey-stars); } .k-rey-dot { stroke: var(--rey-stars); }
.s-rey-dune2 { stop-color: var(--rey-dune-2); } .s-rey-dune3 { stop-color: var(--rey-dune-3); } .s-rey-dune3s { stop-color: var(--rey-dune-3s); }
.f-rey-dune1 { fill: var(--rey-dune-1); } .f-rey-dune2s { fill: var(--rey-dune-2s); } .f-rey-dune3s { fill: var(--rey-dune-3s); }
.k-rey-crest { stroke: var(--rey-crest); }
.f-rey-sil { fill: var(--rey-sil); } .k-rey-sil { stroke: var(--rey-sil); }
.f-rey-town { fill: var(--rey-town); }
.rey-leg { transform-box: fill-box; transform-origin: 50% 0; animation: reyStep 1.8s ease-in-out infinite alternate; }
.rey-star, .rey-halo { transform-box: view-box; }
.rey-star { animation: reyStar 3.2s ease-in-out infinite alternate; }
.rey-halo { animation: reyHalo 3.2s ease-in-out infinite alternate; }
@keyframes reyStep { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes reyStar { from { transform: scale(.94); } to { transform: scale(1.05); } }
@keyframes reyHalo { from { opacity: .75; transform: scale(.95); } to { opacity: 1; transform: scale(1.04); } }

/* ---------- openings added as modules (public/js/openings/*.js) ---------- */
/* scratch card (raspadita): the foil is <ta-raspadita>, a canvas drawn in openings/raspadita.js */
.op-raspadita {
  background: none; touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='%23d3ac45' stroke='%236b4f12' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='7.6' fill='none' stroke='%23fff2c2' stroke-opacity='.75' stroke-width='1.1'/%3E%3Cpath d='M10.2 12.4c2.1-2.4 5.5-2.4 7.6 0' fill='none' stroke='%23fff6d8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 14 14, pointer;
}
.op-raspadita:focus-visible { box-shadow: none; }
.op-raspadita:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--gold); pointer-events: none; }
.op-raspadita .op-to { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-raspadita .op-hint { z-index: 2; color: var(--rasp-ink, var(--ink)); text-shadow: 0 .3cqw 0 var(--rasp-shade, transparent); pointer-events: none; transition: opacity .35s ease; }
ta-raspadita { position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; transition: opacity .65s ease, transform .9s var(--ease); }
ta-raspadita:not(.ready) { background: linear-gradient(125deg, color-mix(in srgb, var(--op-2) 62%, #000), var(--op-2) 30%, color-mix(in srgb, var(--op-2) 55%, #fff) 45%, var(--op-2) 60%, color-mix(in srgb, var(--op-2) 60%, #000)); }
ta-raspadita canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
ta-raspadita.touched ~ .op-hint { opacity: 0; }
ta-raspadita.out { opacity: 0; transform: scale(1.05); }
.rasp-shine {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 220%; pointer-events: none; transform: translateX(-70%);
  background: linear-gradient(104deg, transparent 41%, rgba(255, 255, 255, .2) 48.5%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .2) 51.5%, transparent 59%);
  animation: raspShine 4.6s cubic-bezier(.45, 0, .25, 1) .9s infinite;
}
ta-raspadita.touched .rasp-shine { opacity: 0; transition: opacity .3s ease; }
@keyframes raspShine { 0% { transform: translateX(-70%); } 50%, 100% { transform: translateX(70%); } }
.rasp-ring { position: absolute; left: 50%; top: 50%; width: 19cqw; height: 19cqw; margin: -9.5cqw 0 0 -9.5cqw; overflow: visible; pointer-events: none; opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .25s ease; }
.rasp-ring circle { fill: none; stroke: var(--rasp-ink, #fff); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transform: rotate(-90deg); transform-origin: 22px 22px; filter: drop-shadow(0 1px 0 var(--rasp-shade, transparent)); }
.rasp-ring.on { opacity: 1; transform: none; }
.rasp-ring.on circle { stroke-dashoffset: 0; transition: stroke-dashoffset .94s linear; }

/* letter folded in thirds (carta): panels 24 / 32 / 28 cqw, see openings/carta.js */
.carta {
  --paper: color-mix(in srgb, var(--op-1) 70%, #fff);
  --paper-2: color-mix(in srgb, var(--op-1) 90%, #5a4a30);
  --rule: color-mix(in srgb, var(--op-2) 72%, transparent);
  position: relative; width: 56cqw; height: 84cqw; perspective: 150cqw; perspective-origin: 50% 46%;
  transition: transform .72s cubic-bezier(.5, 0, .15, 1), opacity .45s ease;
}
.carta-sheet { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotate(-4deg) scale(.94); transition: transform .6s var(--ease); }
.carta-p { position: absolute; left: 0; right: 0; transform-style: preserve-3d; transition: transform .84s cubic-bezier(.45, .05, .2, 1); }
.carta-a { top: 0; height: 24cqw; transform-origin: 50% 100%; transform: rotateX(-180deg) translateZ(-2px); }
.carta-b { top: 24cqw; height: 32cqw; }
.carta-c { top: 56cqw; height: 28cqw; transform-origin: 50% 0; transform: rotateX(180deg) translateZ(-1px); }
.carta-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--op-3);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.carta-face.in { background: linear-gradient(172deg, var(--paper), var(--paper-2)) 0 0 / 100% 84cqw no-repeat; }
.carta-b .carta-face.in { background-position: 0 -24cqw; }
.carta-c .carta-face.in { background-position: 0 -56cqw; }
.carta-face.out { transform: rotateX(180deg); background: linear-gradient(176deg, var(--paper), var(--paper-2)); }
.carta-c .carta-face.out { background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 94%, #000), var(--paper-2) 30%); }
.carta-a .carta-face.out { box-shadow: 0 .5cqw .9cqw -.3cqw rgba(40, 28, 10, .35); }
/* printed rule around the inside of the sheet, split across the three panels */
.carta-face.in::before { content: ''; position: absolute; left: 3.4cqw; right: 3.4cqw; top: 0; bottom: 0; border: 0 solid var(--rule); border-left-width: .3cqw; border-right-width: .3cqw; pointer-events: none; transition: opacity .3s ease; }
.carta-a .carta-face.in::before { top: 3.4cqw; border-top-width: .3cqw; border-radius: 1.4cqw 1.4cqw 0 0; }
.carta-c .carta-face.in::before { bottom: 3.4cqw; border-bottom-width: .3cqw; border-radius: 0 0 1.4cqw 1.4cqw; }
/* light and creases: flaps are shaded until they lie flat, the folds stay faintly marked */
.carta-face.in::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .84s cubic-bezier(.45, .05, .2, 1); }
.carta-a .carta-face.in::after { background: linear-gradient(0deg, rgba(50, 34, 8, .16), rgba(50, 34, 8, .4) 70%); }
.carta-c .carta-face.in::after { background: linear-gradient(180deg, rgba(50, 34, 8, .16), rgba(50, 34, 8, .4) 70%); }
.carta-b .carta-face.in::after { background: linear-gradient(180deg, rgba(50, 34, 8, .13), transparent 7%, transparent 93%, rgba(50, 34, 8, .13)); }
.op-carta.s2 .carta-a .carta-face.in::after, .op-carta.s3 .carta-c .carta-face.in::after { opacity: .2; }

.carta-addr { position: absolute; left: 4.5cqw; right: 4.5cqw; top: 1.5cqw; bottom: 6.4cqw; display: flex; align-items: center; justify-content: center; }
.op-carta .op-to { max-width: none; color: var(--op-3); text-shadow: none; font-size: calc(var(--title-size) * .42); line-height: 1.08; }
.carta-title {
  margin: 0; padding: 0 6.5cqw; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600);
  font-size: calc(var(--title-size) * .5); line-height: 1.05; letter-spacing: var(--title-track, -.01em); text-wrap: balance; transition: opacity .3s ease;
}
.carta-from { margin: 0 0 2.2cqw; padding: 0 6cqw; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600); font-size: calc(var(--from-size, 6.4cqw) * .72); line-height: 1.1; transition: opacity .3s ease; }
.carta-orn {
  position: relative; display: block; width: 24cqw; height: 3.2cqw; opacity: .85; transition: opacity .3s ease;
  background: linear-gradient(90deg, transparent, var(--op-2) 22%, var(--op-2) 41%, transparent 41% 59%, var(--op-2) 59%, var(--op-2) 78%, transparent) center / 100% .24cqw no-repeat;
}
.carta-orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3.2cqw; height: 3.2cqw; margin: -1.6cqw 0 0 -1.6cqw; background: var(--op-2); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* wax seal, broken along the flap's edge: the top half rides on the top flap */
.carta-seal {
  position: absolute; left: 50%; width: 11.5cqw; height: 11.5cqw; margin: -5.75cqw 0 0 -5.75cqw; display: grid; place-items: center;
  border-radius: 46% 54% 50% 50% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--op-2) 58%, #fff), var(--op-2) 48%, color-mix(in srgb, var(--op-2) 64%, #000));
  box-shadow: 0 .5cqw .9cqw rgba(0, 0, 0, .32), inset 0 -.5cqw .8cqw rgba(0, 0, 0, .22);
  color: color-mix(in srgb, var(--op-2) 25%, #fff); font: italic 600 5.4cqw/1 var(--display);
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
}
.carta-seal::before { content: ''; position: absolute; inset: 1.5cqw; border-radius: 50%; border: .35cqw solid color-mix(in srgb, var(--op-2) 68%, #000); box-shadow: 0 .25cqw 0 color-mix(in srgb, var(--op-2) 55%, #fff); opacity: .6; }
.carta-seal b { position: relative; font-weight: inherit; text-shadow: 0 -.2cqw 0 rgba(0, 0, 0, .35); }
.carta-seal.hi { top: 24cqw; clip-path: polygon(-20% -20%, 120% -20%, 120% 52%, 84% 56%, 67% 51%, 50% 57%, 33% 51%, 16% 56%, -20% 52%); }
.carta-seal.lo { top: 20cqw; clip-path: polygon(-20% 52%, 16% 56%, 33% 51%, 50% 57%, 67% 51%, 84% 56%, 120% 52%, 120% 120%, -20% 120%); }
.carta-shadow {
  position: absolute; left: 4cqw; right: 4cqw; top: 26cqw; height: 30cqw; border-radius: 2cqw; background: rgba(0, 0, 0, .45); filter: blur(2.6cqw); opacity: .8;
  transform: translateY(2.6cqw) rotate(-4deg) scale(.94); transition: transform .84s cubic-bezier(.45, .05, .2, 1), opacity .4s ease;
}

.op-carta.s1 .carta-sheet { transform: none; }
.op-carta.s1 .carta-shadow { transform: translateY(2.6cqw); }
.op-carta.s1 .carta-seal.hi { transform: translate(-.5cqw, -.7cqw) rotate(-7deg); }
.op-carta.s1 .carta-seal.lo { transform: translate(.4cqw, .5cqw) rotate(5deg); }
.op-carta.s2 .carta-a { transform: rotateX(0deg) translateZ(0); }
.op-carta.s2 .carta-shadow { transform: translateY(-10.4cqw) scaleY(1.87); }
.op-carta.s3 .carta-c { transform: rotateX(0deg) translateZ(0); }
.op-carta.s3 .carta-shadow { transform: translateY(3.4cqw) scaleY(2.8); }
.op-carta.s4 .carta { transform: scale(1.7858); }
.op-carta.s4 .carta-shadow { opacity: 0; }
.op-carta.s4 .carta-title, .op-carta.s4 .carta-from, .op-carta.s4 .carta-orn, .op-carta.s4 .carta-face.in::before { opacity: 0; }
.op-carta.s5 { background: none; }
.op-carta.s5 .carta { opacity: 0; }

/* ---------- extra card fonts ---------- */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.card.font-clasica { --title-font: 'Cormorant Garamond', Georgia, serif; --title-style: italic; --title-weight: 600; --title-size: 12.4cqw; --title-track: 0; --body-font: 'Cormorant Garamond', Georgia, serif; --body-weight: 500; --body-size: 5.5cqw; --from-size: 7.2cqw; }
.card.font-redonda { --title-font: 'Fredoka', system-ui, sans-serif; --title-weight: 600; --title-size: 10.6cqw; --title-track: -.01em; --body-font: 'Fredoka', system-ui, sans-serif; --body-weight: 500; --body-size: 4.7cqw; --from-size: 6cqw; }
.font-sample.font-clasica { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 36px; }
.font-sample.font-redonda { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; }