/* ─────────────────────────────────────────────────────────────
   LOOTTR — sistema de diseño
   Festivo · mexicano moderno · lifestyle premium
───────────────────────────────────────────────────────────── */

:root {
  /* Paleta — Rosa Mexicano (default) */
  --ink: #1a0e16;
  --ink-soft: #463240;
  --ink-mute: #876e7e;
  --cream: #fbf5ec;          /* page bg, clean warm */
  --cream-deep: #f1e5d0;
  --paper: #ffffff;           /* cards — clean */
  --paper-warm: #fdf9f0;
  --coral: #e0492a;
  --coral-deep: #b13718;
  --coral-soft: #f5b8a4;
  --mustard: #e8a93c;        /* secondary */
  --mustard-deep: #b8801e;
  --emerald: #1f7a5c;
  --emerald-deep: #155441;
  --magenta: #d4196d;        /* primary — rosa mexicano */
  --magenta-deep: #a30f50;
  --rose: #f5d2c4;
  --line: rgba(26, 14, 22, 0.10);
  --line-soft: rgba(26, 14, 22, 0.05);

  /* tweakable, overridden by JS */
  --brand-primary: var(--magenta);
  --brand-secondary: var(--mustard);
  --brand-accent: var(--emerald);
  --brand-bg: var(--cream);
  --brand-paper: var(--paper);
  --brand-ink: var(--ink);

  /* Tipografía */
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-script: "Caveat", "Bradley Hand", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* density-driven (tweakable) */
  --pad-section: var(--s-9);
  --pad-card: var(--s-6);
  --gap-grid: var(--s-5);

  /* Radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 22px;
  --r-pill: 999px;

  /* Shadows — warm */
  --sh-1: 0 1px 2px rgba(60, 30, 10, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --sh-2: 0 6px 18px rgba(80, 40, 20, 0.10), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  --sh-3: 0 22px 60px rgba(80, 40, 20, 0.18), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  --sh-card-tilt: 0 18px 32px -10px rgba(80, 40, 20, 0.28), 0 4px 10px rgba(80, 40, 20, 0.12);
}

[data-density="compact"] { --pad-section: var(--s-7); --pad-card: var(--s-5); --gap-grid: var(--s-4); }
[data-density="comfy"]   { --pad-section: 140px;     --pad-card: var(--s-7); --gap-grid: var(--s-6); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { margin: 0; padding: 0; overflow-x: hidden; }
body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--brand-ink);
  background: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Layout shell ── */
.app {
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(circle at 12% -8%, color-mix(in oklab, var(--brand-primary) 14%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 92% 8%, color-mix(in oklab, var(--brand-secondary) 16%, transparent) 0%, transparent 26%),
    var(--brand-bg);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1280px) { .container { padding: 0 56px; } }

/* ── Wordmark / Logo (legacy compat — see logo system below) ── */

/* ── Header ── */
.site-header {
  /* Sticky on every viewport so the menu stays reachable while scrolling.
     Mobile keeps a SOLID background (no backdrop-filter) on purpose —
     Chromium Android has a paint corruption bug when content scrolls UNDER
     a sticky element with backdrop-filter blur (the blur capture/composite
     leaks pixels into the compositing buffer, visible as stripe noise
     during scroll). That bug needs both sticky AND blur to trigger; solid
     background + sticky doesn't touch the same compositing path. The
     blurred/translucent look is added back from tablet width up, where
     this was already verified safe. Other browsers (Firefox Android,
     Samsung Internet) handle blur+sticky fine even on mobile. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand-bg);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 768px) {
  .site-header {
    background: color-mix(in oklab, var(--brand-bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.site-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
}
@media (min-width: 900px) { .site-header__nav { display: flex; } }
.site-header__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.16s;
}
.site-header__nav a:hover, .site-header__nav a.is-active {
  color: var(--brand-ink);
}
.site-header__nav a.is-active::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--brand-primary);
  border-radius: 2px;
}
.site-header__cta { display: flex; align-items: center; gap: 12px; }
.site-header__cart {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--brand-paper);
  position: relative;
  transition: transform 0.14s;
}
.site-header__cart:hover { transform: translateY(-1px); }
.site-header__cart .badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--brand-primary); color: white;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--brand-bg);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn svg { display: inline-block; flex-shrink: 0; vertical-align: middle; }
@media (hover: hover) {
  .btn {
    transition: transform 0.16s, box-shadow 0.16s, background 0.16s;
  }
}
.btn--primary {
  background: var(--brand-primary);
  color: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 20px -6px color-mix(in oklab, var(--brand-primary) 60%, transparent);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 24px -6px color-mix(in oklab, var(--brand-primary) 75%, transparent); }
.btn--ghost {
  background: var(--brand-paper);
  color: var(--brand-ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--cream-deep); }
.btn--ink {
  background: var(--brand-ink);
  color: var(--paper);
}
.btn--ink:hover { transform: translateY(-1px); }
.btn--big { padding: 18px 30px; font-size: 17px; }
.btn--sm  { padding: 10px 16px; font-size: 13px; }
.btn--outline-primary {
  background: var(--brand-paper);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
}
.btn--outline-primary:hover { background: color-mix(in oklab, var(--brand-primary) 6%, var(--brand-paper)); }

/* ── Tags / chips ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--brand-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  transition: all 0.16s;
}
.chip:hover { background: var(--cream-deep); color: var(--brand-ink); }
.chip.is-active {
  background: var(--brand-ink);
  color: var(--paper);
  border-color: var(--brand-ink);
}
.chip--coral { background: var(--brand-primary); color: white; border-color: transparent; }
.chip--mustard { background: var(--brand-secondary); color: var(--ink); border-color: transparent; }
.chip--emerald { background: var(--brand-accent); color: white; border-color: transparent; }

/* ── Eyebrow label ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--brand-primary);
  border-radius: 2px;
}

/* ── Section headers ── */
.section { padding: var(--pad-section) 0; }
.section--tight { padding: var(--s-7) 0; }
.section-head {
  max-width: 720px;
  margin: 0 auto var(--s-7);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin: 14px 0 16px;
  text-wrap: balance;
}
.section-head p {
  font-size: 17px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── Hero ── */
.hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 60px; }
  .hero { padding: 100px 0 80px; }
}
.hero__title {
  font-size: clamp(46px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 18px 0 24px;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--brand-primary);
  font-size: 0.92em;
  line-height: 0.9;
  display: inline-block;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.hero__lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.5;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__proof {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-mute);
}
.hero__stars { color: var(--mustard); letter-spacing: 2px; font-size: 16px; }

/* Hero visual — stacked lotería cards */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.hero__card {
  position: absolute;
  width: 64%;
  filter: drop-shadow(0 24px 30px rgba(80, 30, 10, 0.18));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero__card--1 { transform: rotate(-9deg) translate(-22%, 4%); z-index: 1; }
.hero__card--2 { transform: rotate(4deg) translate(18%, -8%); z-index: 2; }
.hero__card--3 { transform: rotate(-2deg) translate(-3%, 16%); z-index: 3; width: 70%; }
/* Real product cover photo, shown in place of the emoji-grid .loteria card
   when the admin uploaded one — .hero__card's own drop-shadow filter
   already applies here, no separate shadow needed on the image itself. */
.hero__card-cover { display: block; width: 100%; border-radius: 10px; }
.hero__visual:hover .hero__card--1 { transform: rotate(-12deg) translate(-26%, 2%); }
.hero__visual:hover .hero__card--2 { transform: rotate(7deg) translate(22%, -10%); }
.hero__visual:hover .hero__card--3 { transform: rotate(0deg) translate(-2%, 14%); }

/* ── Confetti / papel picado decorative pieces ── */
.confetti {
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
}
.confetti--1 { top: 18%; left: 6%; width: 22px; height: 22px; background: var(--mustard); border-radius: 50%; transform: rotate(15deg); }
.confetti--2 { top: 8%; right: 18%; width: 14px; height: 28px; background: var(--magenta); transform: rotate(40deg); }
.confetti--3 { bottom: 22%; right: 6%; width: 18px; height: 18px; background: var(--emerald); transform: rotate(20deg); }
.confetti--4 { bottom: 12%; left: 22%; width: 26px; height: 8px; background: var(--coral); border-radius: 8px; transform: rotate(-22deg); }

/* ── Lotería card mockup ── */
.loteria {
  --la-bg: var(--paper);
  --la-band: var(--coral);
  --la-band-ink: #fff;
  --la-ink: var(--ink);
  background: var(--la-bg);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-card-tilt);
  border: 1px solid color-mix(in oklab, var(--la-band) 20%, transparent);
}
/* Per-product decorative frame/background image (Product::frame_image_path)
   — mirrors .tabla's background-image rule in order-tablas.blade.php so the
   pre-purchase preview matches what actually prints. Opt-in: only applied
   when a product has a frame image set (see order-lottery-preview.blade.php
   / product-landing.blade.php), so every product without one is unaffected. */
.loteria--framed {
  background-image: var(--la-frame);
  background-size: cover;
  background-position: center;
}
.loteria--framed .loteria__grid {
  background: color-mix(in oklab, var(--la-bg) 45%, transparent);
}
/* Per-product custom font (Product::font_family) — an inline font-family on
   .loteria alone can't reach the title/labels below, since each of these
   already has its own more-specific font-family override; --la-font is only
   ever set when a non-default font is chosen (see order-lottery-preview.blade.php
   / product-landing.blade.php). */
.loteria--custom-font .loteria__band,
.loteria--custom-font .loteria__band-eyebrow,
.loteria--custom-font .loteria__band-date,
.loteria--custom-font .loteria__cell-name,
.loteria--custom-font .loteria__foot {
  font-family: var(--la-font);
}
.loteria__band {
  background: var(--la-band);
  color: var(--la-band-ink);
  padding: 10px 12px 8px;
  text-align: center;
  font-family: var(--font-display);
  position: relative;
}
.loteria--editable .loteria__band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 14px;
  min-height: 72px;
  text-align: initial;
}
.loteria__band-center {
  grid-column: 2;
  text-align: center;
}
.loteria__band-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 5px auto 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--la-band-ink);
  opacity: 0.85;
  background: transparent;
}
.loteria__band-date::before,
.loteria__band-date::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.loteria__band-eyebrow {
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.86;
  font-weight: 600;
}
.loteria__band-title {
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-top: 3px;
  text-wrap: balance;
  word-spacing: -0.02em;
}
.loteria__band-photo {
  grid-column: 1;
  justify-self: start;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--la-band-ink) 35%, transparent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 0 0 3px color-mix(in oklab, var(--la-band) 100%, transparent);
  background: var(--la-bg);
}
.loteria__band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loteria__band-deco {
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 8px;
  background-image:
    radial-gradient(circle at 4px 0, var(--la-band) 4px, transparent 4.5px);
  background-size: 8px 8px;
  background-position: 0 -4px;
}
.loteria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px;
  background: var(--la-bg);
}
.loteria__cell {
  aspect-ratio: 1 / 1;
  background: color-mix(in oklab, var(--la-band) 8%, var(--la-bg));
  border: 1px solid color-mix(in oklab, var(--la-band) 14%, transparent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--la-ink);
}
.loteria--editable .loteria__cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-width: 2px;
  border-color: color-mix(in oklab, var(--la-band) 60%, transparent);
}
.loteria__cell-icon {
  font-size: 24px;
  filter: saturate(0.85);
}
.loteria__cell-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
.loteria__cell-num {
  position: absolute;
  top: 3px;
  left: 4px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  color: var(--la-band-ink);
  background: var(--la-band);
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.2;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.loteria__cell-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--la-band-ink);
  background: var(--la-band);
  padding: 3px 4px;
  line-height: 1.1;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Checkerboard alt cells — 4-col grid: positions 1,3,6,8 / 9,11,14,16 */
.loteria__cell:nth-child(8n+1),
.loteria__cell:nth-child(8n+3),
.loteria__cell:nth-child(8n+6),
.loteria__cell:nth-child(8n+8) {
  background: color-mix(in oklab, var(--la-cell-2, var(--la-band)) 8%, var(--la-bg));
  border-color: color-mix(in oklab, var(--la-cell-2, var(--la-band)) 60%, transparent);
}
/* Both the number badge and the name label tint with cell-2 on alternating
   cells — matches .cell--alt .cell__num / .cell__name in the PDF template. */
.loteria__cell:nth-child(8n+1) .loteria__cell-num,
.loteria__cell:nth-child(8n+3) .loteria__cell-num,
.loteria__cell:nth-child(8n+6) .loteria__cell-num,
.loteria__cell:nth-child(8n+8) .loteria__cell-num,
.loteria__cell:nth-child(8n+1) .loteria__cell-name,
.loteria__cell:nth-child(8n+3) .loteria__cell-name,
.loteria__cell:nth-child(8n+6) .loteria__cell-name,
.loteria__cell:nth-child(8n+8) .loteria__cell-name {
  background: var(--la-cell-2, var(--la-band));
}
.loteria__foot {
  position: relative;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--la-band-ink) 75%, transparent);
  padding: 8px 14px 12px;
  background: var(--la-band);
}
.loteria__foot-link {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.16s;
}
.loteria__foot-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Theme variants for loteria cards */
.loteria--coral    { --la-band: #e0492a; --la-bg: #fffaee; }
.loteria--rose     { --la-band: #d4789d; --la-bg: #fff7f6; }
.loteria--emerald  { --la-band: #1f7a5c; --la-bg: #f4f8e8; }
.loteria--mustard  { --la-band: #d49426; --la-bg: #fcf5e3; }
.loteria--magenta  { --la-band: #c93374; --la-bg: #fff2f6; }
.loteria--gold     { --la-band: #8a6a1c; --la-bg: #fdf6e0; --la-ink: #2a1f08; }
.loteria--midnight { --la-band: #2b3a52; --la-bg: #f3eee4; }
.loteria--teal     { --la-band: #1a8a8a; --la-bg: #effaf7; }

/* ── Pasos / cómo funciona ── */
.steps {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step {
  position: relative;
  padding: 32px 24px;
  background: var(--brand-paper);
  border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
}
.step__num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--brand-primary);
  letter-spacing: -0.04em;
}
.step h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  margin: 16px 0 8px;
  letter-spacing: -0.01em;
}
.step p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.step__icon {
  position: absolute;
  top: 24px; right: 24px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand-primary) 14%, transparent);
  color: var(--brand-primary);
}

/* ── Ocasiones ── */
.occasions {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .occasions { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .occasions { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.occasion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px 22px;
  background: var(--brand-paper);
  border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
  transition: transform 0.18s, box-shadow 0.18s;
  text-align: center;
}
.occasion:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.occasion__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
}
.occasion__icon--rose    { background: #ffe1e0; color: #d4456e; }
.occasion__icon--teal    { background: #cfe9e9; color: #1a8a8a; }
.occasion__icon--mustard { background: #fbe7b1; color: #8a6a1c; }
.occasion__icon--emerald { background: #d7ebd6; color: #1f7a5c; }
.occasion__icon--coral   { background: #ffd8c9; color: #b13718; }
.occasion__icon--magenta { background: #f8d2e1; color: #c93374; }
.occasion__name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--brand-ink);
}
.occasion__count {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* ── Catálogo cards ── */
.catalog {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .catalog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .catalog { grid-template-columns: repeat(3, 1fr); } }

.design-card {
  background: var(--brand-paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 0 540px;
}
@media (hover: hover) {
  .design-card {
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
}
.design-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in oklab, var(--brand-primary) 30%, transparent);
}
.design-card__preview {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--brand-secondary) 8%, var(--cream-deep)) 0 12px, var(--cream-deep) 12px 24px);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.design-card__cover {
  width: 78%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow:
    0 14px 28px -8px rgba(60, 30, 10, 0.22),
    0 4px 8px -2px rgba(60, 30, 10, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.design-card__preview:has(.design-card__cover) {
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.design-card__preview .loteria {
  width: 78%;
  transform: rotate(-3deg);
}
.design-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
}
.design-card__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.design-card__name {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
}
.design-card__meta {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.design-card__meta strong {
  color: var(--brand-ink);
  font-weight: 700;
}
.design-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.design-card__price {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-ink);
}
.design-card__price small {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
  display: block;
  margin-top: -2px;
}
.design-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.design-card__cta svg {
  width: 16px;
  height: 16px;
}

/* ── Catalog filters ── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  align-items: center;
}
.filters__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-right: 8px;
}
.sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.sort select {
  background: var(--brand-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 28px 6px 12px;
  font-size: 13px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231d140e' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ── Testimonios ── */
.testimonials {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--brand-paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  padding: 26px;
  position: relative;
}
.testimonial__stars { color: var(--mustard); font-size: 14px; letter-spacing: 2px; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--brand-ink);
  margin: 14px 0 22px;
  letter-spacing: -0.01em;
}
.testimonial__author {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--brand-primary);
  font-size: 18px;
  overflow: hidden;
}
.testimonial__name { font-size: 14px; font-weight: 600; }
.testimonial__meta { font-size: 12px; color: var(--ink-mute); }

/* ── FAQ ── */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq__q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.005em;
}
.faq__q .pm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-paper);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}
.faq__item.is-open .pm { background: var(--brand-primary); color: white; transform: rotate(45deg); border-color: var(--brand-primary); }
.faq__a {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}
.faq__item.is-open .faq__a {
  max-height: 400px;
  padding-top: 14px;
}

/* ── CTA block ── */
.cta-block {
  background: var(--brand-ink);
  color: var(--paper);
  border-radius: var(--r-4);
  padding: 64px 48px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-block::before, .cta-block::after {
  content: ""; position: absolute;
  border-radius: 50%; pointer-events: none;
}
.cta-block::before { width: 240px; height: 240px; background: var(--brand-primary); top: -100px; left: -80px; opacity: 0.42; filter: blur(20px); }
.cta-block::after { width: 200px; height: 200px; background: var(--brand-secondary); bottom: -80px; right: -60px; opacity: 0.4; filter: blur(16px); }
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 18px;
  text-wrap: balance;
}
.cta-block p { font-size: 18px; color: rgba(255, 255, 255, 0.75); max-width: 540px; margin: 0 auto 32px; }

/* ── Footer ── */
.site-footer {
  background: var(--brand-ink);
  color: var(--paper);
  padding: 80px 0 36px;
  margin-top: 80px;
}
.site-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer .wordmark { color: var(--paper); font-size: 32px; }
.site-footer__about {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 320px;
  margin-top: 18px;
  line-height: 1.55;
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  transition: color 0.16s;
}
.footer-col a:hover { color: white; }
.site-footer__bottom {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 12px; color: rgba(255, 255, 255, 0.4);
}

/* ── Gallery (impreso) ── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
/* <image-slot>'s shadow DOM ships its own default width:240px;height:160px
   (see image-slot.js) — a grid item's automatic minimum size is its content
   size unless told otherwise, so that 240px floor kept the 1fr columns from
   ever shrinking below it on mobile, pushing the whole gallery (and the
   page) wider than the viewport. width:100% + min-width:0 lets the grid
   track set the size instead; height:auto hands the other dimension to
   aspect-ratio. */
.gallery image-slot {
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-3);
  overflow: hidden;
}
.gallery > :nth-child(1) { grid-row: span 2; grid-column: span 2; }
.gallery > :nth-child(1) image-slot { aspect-ratio: 1 / 1; }
@media (min-width: 720px) {
  .gallery > :nth-child(1) image-slot { aspect-ratio: 1 / 1; }
}

/* ── Personalizador layout ── */
.customizer {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  padding: 40px 0 80px;
}
@media (min-width: 980px) {
  .customizer { grid-template-columns: 1.15fr 1fr; gap: 56px; }
}
.preview-pane {
  position: sticky;
  top: 88px;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--brand-secondary) 16%, transparent), transparent 50%),
    var(--cream-deep);
  border-radius: var(--r-4);
  padding: 56px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  overflow: hidden;
}
/* Mobile: the full card shows once, in normal flow, like a hero photo —
   it used to stay sticky (clamped to ~340px) for the ENTIRE scroll, which
   combined with the sticky price bar at the bottom left only a ~30% sliver
   of the screen for the actual form. Now .preview-mini-bar (below) is the
   only thing that stays pinned once you scroll past the card, so the form
   gets the rest of the screen back. */
@media (max-width: 979px) {
  /* `.customizer` is `display: grid` by default — each child sits in its own
     grid cell sized to its content, which means a sticky child can't escape
     its cell. Switch to normal block flow on mobile so the mini-bar's
     sticky positioning has the full customizer height to anchor against. */
  .customizer {
    display: block;
  }
  .customizer__preview-col {
    margin-bottom: 18px;
  }
  .preview-pane {
    position: relative;
    top: auto;
    padding: 24px 16px 18px;
    min-height: 0;
    border-radius: var(--r-3);
  }
  .preview-pane__sheet {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .preview-pane .loteria {
    width: 100%;
    max-width: 240px;
  }
  .tabla-preview-toggle--inside {
    margin: 14px 0 0;
  }
  /* Round FAB — fixed at the bottom-right the whole time (not just once
     scrolled past the card), pointing down to the form or up to the design
     depending on which one is currently off-screen. Sits above the sticky
     .summary-bar (~70px tall) so the two never overlap. */
  .preview-fab {
    position: fixed;
    right: 18px;
    bottom: 100px;
    z-index: 40;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-3);
    cursor: pointer;
  }
}
/* Desktop never shows the FAB — .preview-pane itself is already sticky
   (see base rule above) at a size that doesn't need a jump-back shortcut. */
@media (min-width: 980px) {
  .preview-fab {
    display: none;
  }
}
.preview-pane__sheet {
  width: min(100%, 380px);
  position: relative;
}
.preview-pane .loteria { width: 100%; }

/* Live-preview label — signals the card is a generated mockup (updates as
   you fill the form below) rather than a canvas you tap to edit directly. */
.preview-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  white-space: nowrap;
}

/* Marketing tease below the preview card — "there's more deck than what
   you're seeing here", not part of the tabla mockup itself. */
.preview-deck-tease {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary);
}

/* Scroll cue — mobile only: the first screen otherwise shows nothing
   actionable (hero copy + a preview card), so this points at the actual
   form below. Sits in normal flow right before the customizer, so it
   simply scrolls away the moment the user starts scrolling — no JS. */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 8px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.scroll-cue__icon {
  animation: bounceDown 1.6s ease-in-out infinite;
}
@media (min-width: 980px) {
  .scroll-cue { display: none; }
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

.panel {
  background: var(--brand-paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  padding: 28px;
  margin-bottom: 18px;
}
.panel h3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--ink-soft); }
.field .phone-group {
  display: flex;
  align-items: stretch;
}
/* Deliberately narrow + muted: the country is already defaulted correctly
   for the vast majority of customers (Mexico), so this should read as a
   quiet, already-handled prefix rather than a decision the customer needs
   to stop and review — full width+contrast made it look like an active
   choice competing with the phone number field for attention. */
.field .phone-group__code {
  flex: 0 0 auto;
  /* Longest label is "🇪🇨 +593" (flag + 4-digit code) — 64px clipped it
     against the native <select> arrow, showing "+5" instead of "+593". */
  width: 88px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--r-2) 0 0 var(--r-2);
  background: color-mix(in oklab, var(--brand-paper) 60%, var(--brand-bg));
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-mute);
  cursor: pointer;
}
.field .phone-group__number {
  flex: 1 1 auto;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.field .phone-group__code:focus,
.field .phone-group__number:focus {
  outline: 2px solid color-mix(in oklab, var(--brand-primary) 50%, transparent);
  outline-offset: 1px;
  border-color: var(--brand-primary);
  z-index: 1;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
  font-size: 15px;
  font-family: inherit;
  color: var(--brand-ink);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid color-mix(in oklab, var(--brand-primary) 50%, transparent);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
label.field-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0;
}
label.field-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand-primary);
}
.field-toggle-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.field-toggle-row .field-toggle,
.field-toggle-row input[type="date"] {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}
.field-toggle-row .field-toggle {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.field-toggle-row input[type="date"] {
  width: auto;
  font-size: 15px;
}
.tabla-preview-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
/* Variant: rendered inside the preview sheet (below the lottery card) so it
   travels with the sticky preview instead of scrolling off-screen. */
.tabla-preview-toggle--inside {
  margin: 22px 0 4px;
}
.tabla-preview-btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--brand-paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.tabla-preview-btn:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}
.tabla-preview-btn.is-active {
  background: var(--brand-ink);
  color: var(--brand-paper);
  border-color: var(--brand-ink);
}
.palette-options {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.palette-swatch--custom .palette-swatch__dots {
  border: 2px dashed var(--line);
  padding: 6px;
  background: var(--brand-paper);
  color: var(--ink-soft);
  transition: border-color 0.16s, color 0.16s;
}
.palette-swatch--custom:hover .palette-swatch__dots {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}
.palette-swatch--custom.is-active .palette-swatch__dots {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
  background: var(--brand-bg);
}
.palette-swatch__dots--icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.palette-custom {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
}
.palette-custom-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.palette-custom-field label {
  margin: 0;
}
.palette-custom-field input[type="color"] {
  width: 52px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-paper);
  cursor: pointer;
}
.palette-custom-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.palette-custom-field input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.palette-row { display: flex; gap: 10px; flex-wrap: wrap; }
.palette-swatch {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px; cursor: pointer; transition: transform 0.14s;
}
.palette-swatch:hover { transform: translateY(-2px); }
.palette-swatch__dots {
  display: inline-flex;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--brand-bg);
  transition: border-color 0.16s;
}
.palette-swatch.is-active .palette-swatch__dots {
  border-color: var(--brand-ink);
}
.palette-swatch__dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 -4px; border: 2px solid var(--brand-paper); }
.palette-swatch__name { font-size: 11px; color: var(--ink-soft); }

.qty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  /* Room for the "Más elegida" tag to overflow above the card without
     getting clipped by the grid row above it. */
  row-gap: 18px;
}
.qty-btn {
  position: relative;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
  text-align: center;
  transition: all 0.14s;
}
.qty-btn.is-active {
  background: var(--brand-ink);
  color: var(--paper);
  border-color: var(--brand-ink);
}
.qty-btn b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.qty-btn small { font-size: 11px; opacity: 0.7; }
/* Per-tabla price — makes the bulk discount that already exists in
   pricing actually visible, instead of only showing the pack total. */
.qty-btn__unit {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 3px;
}
.qty-btn__savings {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald);
  background: color-mix(in oklab, var(--emerald) 14%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.qty-btn__tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-primary);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: var(--sh-1);
}

/* "Imprimir también las cartas del mazo" — a paid add-on, so it gets more
   visual weight than a plain field-toggle checkbox. */
.deck-cards-addon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--brand-primary) 4%, var(--brand-bg));
  cursor: pointer;
}
.deck-cards-addon input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.deck-cards-addon__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
}
.deck-cards-addon__price { color: var(--brand-primary); font-weight: 700; }
.deck-cards-addon__help {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
}

.upload-zone {
  display: block;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-2);
  padding: 26px;
  text-align: center;
  background: color-mix(in oklab, var(--brand-secondary) 5%, var(--brand-bg));
  transition: all 0.16s;
}
.upload-zone:hover { border-color: var(--brand-primary); background: color-mix(in oklab, var(--brand-primary) 5%, var(--brand-bg)); }
.upload-zone__icon { font-size: 32px; margin-bottom: 8px; }
.upload-zone p { font-size: 13px; color: var(--ink-soft); }
.upload-zone small { font-size: 11px; color: var(--ink-mute); }
.upload-zone__thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.upload-zone__text { min-width: 0; }
.upload-zone.is-filled {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border-style: solid;
  border-color: var(--brand-primary);
  background: color-mix(in oklab, var(--brand-primary) 4%, var(--brand-bg));
}

/* Tap-to-customize affordance directly on the live preview's cards — see
   .loteria__cell in the preview partial above. */
.loteria__cell--editable { cursor: pointer; }
.loteria__cell-edit-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0;
  transition: opacity 0.14s;
  z-index: 1;
}
.loteria__cell--editable:hover .loteria__cell-edit-hint,
.loteria__cell--editable:active .loteria__cell-edit-hint {
  opacity: 1;
}
.loteria__cell-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}

/* Thumbnail grid of already-customized cards (panel 3) — the customer's own
   uploaded photos, not deck artwork, so showing them here isn't the
   exposure concern the card-picker modal's <select> was designed around. */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.figure-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--brand-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.14s;
}
.figure-slot.is-filled { border-color: var(--brand-primary); }
.figure-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure-slot__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.figure-slot__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}

.summary-bar {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  background: var(--brand-ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  padding: 12px 12px 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--sh-3);
  margin-top: 22px;
}
.summary-bar__amount {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}
.summary-bar__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}
.summary-bar__urgency {
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
  margin-top: 4px;
}
.urgency-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--coral);
  margin: 8px 0 0;
}
.urgency-badge--hot {
  animation: urgencyPulse 1.6s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.coupon-box {
  margin-top: 10px;
}
.coupon-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coupon-row__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
  font-size: 13px;
  font-family: inherit;
  color: var(--brand-ink);
}
.coupon-row__input:focus {
  outline: 2px solid color-mix(in oklab, var(--brand-primary) 50%, transparent);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}
.coupon-row__btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid var(--brand-ink);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.coupon-row--applied {
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--brand-secondary) 12%, var(--brand-bg));
}
.coupon-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}
.coupon-row__remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--ink-mute);
  cursor: pointer;
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--new      { background: var(--emerald); color: white; }
.badge--popular  { background: var(--mustard); color: var(--ink); }
.badge--bestseller { background: var(--magenta); color: white; }

/* ══════════════════════════════════════════════
   3 ACTOS — historia central
   ══════════════════════════════════════════════ */
.acts {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .acts { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.act {
  position: relative;
  border-radius: var(--r-4);
  padding: 32px 28px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.act--1 { background: color-mix(in oklab, var(--brand-primary) 12%, var(--paper)); }
.act--2 { background: color-mix(in oklab, var(--brand-secondary) 16%, var(--paper)); }
.act--3 { background: var(--brand-ink); color: var(--paper); }
.act__num {
  font-family: var(--font-display);
  font-size: 90px;
  line-height: 0.8;
  color: rgba(0,0,0,0.08);
  letter-spacing: -0.04em;
  position: absolute;
  top: 16px; right: 20px;
}
.act--3 .act__num { color: rgba(255,255,255,0.10); }
.act__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.act--2 .act__eyebrow { color: var(--mustard-deep); }
.act--3 .act__eyebrow { color: var(--brand-secondary); }
.act__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.act__desc {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 360px;
  margin-bottom: 22px;
}
.act__visual {
  margin-top: auto;
  position: relative;
  height: 220px;
  display: flex;
  align-items: end;
  justify-content: center;
}
.act__visual--print {
  height: 240px;
}
.act__visual--phone {
  height: 380px;
  align-items: end;
  overflow: hidden;
}
.act__phone-photo {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}
.act__visual--print .stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.act__visual--print .stack > div {
  position: absolute; left: 50%;
  background: var(--paper);
  border-radius: 4px;
  width: 64%; height: 72%;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.act__visual--print .stack > div:nth-child(1) { transform: translateX(-50%) rotate(-6deg) translateY(-8%); background: color-mix(in oklab, var(--brand-secondary) 18%, var(--paper)); }
.act__visual--print .stack > div:nth-child(2) { transform: translateX(-50%) rotate(2deg)  translateY(-4%); background: var(--paper); }
.act__visual--print .stack > div:nth-child(3) {
  transform: translateX(-50%) rotate(-1deg);
  background: var(--paper);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.act__visual--print .pdf-band {
  background: var(--brand-primary);
  height: 14%;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: white;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.act__visual--print .pdf-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 6px;
}
.act__visual--print .pdf-grid > span {
  background: color-mix(in oklab, var(--brand-primary) 8%, var(--paper));
  border-radius: 2px;
}

/* ══════════════════════════════════════════════
   QR PASS — el protagonista del acto 3
   ══════════════════════════════════════════════ */
.qr-pass {
  background: var(--brand-primary);
  color: white;
  border-radius: var(--r-4);
  padding: 36px 30px 30px;
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 30px 60px -10px color-mix(in oklab, var(--brand-primary) 50%, transparent);
  overflow: hidden;
}
.qr-pass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.16), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(255,255,255,0.10), transparent 35%);
  pointer-events: none;
}
.qr-pass__header {
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: 22px;
  position: relative;
}
.qr-pass__badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.qr-pass__event {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
  position: relative;
}
.qr-pass__date {
  font-size: 13px;
  opacity: 0.78;
  position: relative;
}
.qr-pass__qr-frame {
  background: white;
  border-radius: 18px;
  padding: 18px;
  position: relative;
  margin: 24px 0 18px;
}
.qr-pass__qr-frame::before, .qr-pass__qr-frame::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--brand-primary);
  border-radius: 50%;
}
.qr-pass__qr-frame::before { left: -13px; }
.qr-pass__qr-frame::after { right: -13px; }
.qr-pass__qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
}
.qr-pass__qr-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-primary);
  margin-top: 12px;
}
.qr-pass__caption {
  font-family: var(--font-display);
  font-size: 17px;
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-top: 6px;
  position: relative;
}
.qr-pass__divider {
  margin: 20px -30px 18px;
  border: 0;
  border-top: 1.5px dashed rgba(255,255,255,0.35);
  position: relative;
}
.qr-pass__steps {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.4;
  position: relative;
}
.qr-pass__steps li {
  display: flex; gap: 8px; align-items: start;
  flex: 1 1 100%;
}
.qr-pass__steps b {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   CONFIRMACIÓN / DESCARGA
   ══════════════════════════════════════════════ */
.confirm-hero {
  text-align: center;
  padding: 80px 0 24px;
}
.confirm-hero__check {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--emerald) 16%, var(--brand-bg));
  display: flex; align-items: center; justify-content: center;
  color: var(--emerald);
  position: relative;
}
.confirm-hero__check::before, .confirm-hero__check::after {
  content: ""; position: absolute;
  border: 2px solid color-mix(in oklab, var(--emerald) 30%, transparent);
  border-radius: 50%;
  inset: -10px;
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}
.confirm-hero__check::after { animation-delay: 1.2s; }
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.confirm-hero h1 {
  font-size: clamp(44px, 6.5vw, 80px);
  margin-bottom: 18px;
  text-wrap: balance;
}
.confirm-hero h1 em {
  font-style: normal;
  font-family: var(--font-script);
  color: var(--brand-primary);
  display: inline-block;
  font-size: 0.95em;
  line-height: 0.9;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.confirm-hero p {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}

.confirm-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
  margin: 56px 0 40px;
}
@media (min-width: 980px) {
  .confirm-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.download-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-4);
  padding: 36px 30px;
  text-align: center;
}
.download-card__icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.download-card h2 {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.download-card p {
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-size: 15px;
}
.download-card__file {
  background: color-mix(in oklab, var(--brand-secondary) 8%, var(--brand-bg));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  margin-bottom: 20px;
}
.download-card__file-icon {
  background: var(--brand-ink);
  color: var(--paper);
  width: 40px; height: 40px;
  border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.download-card__file-name { font-weight: 600; font-size: 14px; }
.download-card__file-meta { font-size: 12px; color: var(--ink-mute); }

.share-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  background: var(--brand-paper);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.16s;
}
.share-btn:hover { background: var(--cream-deep); transform: translateY(-1px); }
.share-btn--wa { background: #25D366; color: white; border-color: transparent; }
.share-btn--ig { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); color: white; border-color: transparent; }

.print-tips {
  background: color-mix(in oklab, var(--brand-secondary) 10%, var(--paper));
  border-radius: var(--r-3);
  padding: 24px 22px;
  margin-top: 32px;
}
.print-tips h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 14px;
}
.print-tips ul {
  display: flex; flex-direction: column; gap: 8px;
}
.print-tips li {
  display: flex; gap: 10px; align-items: start;
  font-size: 14px;
  color: var(--ink-soft);
}
.print-tips li::before {
  content: "•";
  color: var(--brand-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   PHONE / APP SHOWCASE (on home)
   ══════════════════════════════════════════════ */
.magic-section {
  background: var(--brand-ink);
  color: var(--paper);
  border-radius: var(--r-4);
  padding: 64px 32px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 980px) { .magic-section { padding: 80px 64px; } }
.magic-section::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand-primary) 60%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.magic-section__grid {
  position: relative;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) { .magic-section__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.magic-section__copy h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  margin-bottom: 22px;
  text-wrap: balance;
  line-height: 1;
}
.magic-section__copy h2 em {
  font-style: normal;
  font-family: var(--font-script);
  color: var(--brand-primary);
  display: inline-block;
  font-size: 1em;
  line-height: 0.9;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.magic-section__lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 460px;
  margin-bottom: 28px;
}
.magic-points {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 32px;
}
.magic-point {
  display: flex; gap: 14px; align-items: start;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
}
.magic-point__dot {
  width: 28px; height: 28px;
  background: color-mix(in oklab, var(--brand-primary) 80%, transparent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white;
}
.magic-section__phone-wrap {
  display: flex; justify-content: center;
  position: relative;
}
.magic-section__phone-photo {
  height: 480px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 640px) { .magic-section__phone-photo { height: 380px; } }

/* ── Animations ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
.float { animation: float 5s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fadeUp { animation: fadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ── Utility ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.text-soft { color: var(--ink-soft); }
.text-mute { color: var(--ink-mute); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.hidden-mobile { display: none; }
@media (min-width: 720px) { .hidden-mobile { display: initial; } }

/* ══════════════════════════════════════════════
   LOGOTIPO — wordmark + logomark
   ══════════════════════════════════════════════ */
.logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.logomark__seal {
  width: 100%; height: 100%;
  display: block;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.wordmark__type {
  font-family: "Caprasimo", "Playfair Display", Georgia, serif;
  font-size: 1em;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  line-height: 0.9;
  display: inline-flex;
  align-items: center;
}
.wordmark__type em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.wordmark__type em::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.42em;
  transform: translateX(-50%);
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 0.05em var(--brand-bg);
}
.wordmark--inverse .wordmark__type { color: var(--paper); }
.wordmark--inverse .wordmark__type em::after { box-shadow: 0 0 0 0.05em var(--brand-ink); }
.wordmark--centered { flex-direction: column; gap: 6px; }
.wordmark__tagline {
  font-family: var(--font-sans);
  font-size: 0.32em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   MOBILE MENU — hamburger + drawer
   ══════════════════════════════════════════════ */
.site-header__menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--brand-paper);
  transition: background 0.16s;
}
.site-header__menu-toggle:hover { background: var(--cream-deep); }
.site-header__menu-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--brand-ink);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
  transform-origin: center;
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .site-header__menu-toggle { display: none; } }

.site-header__drawer {
  position: fixed;
  inset: 0;
  background: var(--brand-bg);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.24s ease, visibility 0.24s;
  z-index: 60;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-header__drawer-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* Was 96px on top — that space used to clear the real header peeking
     above the drawer. The drawer now carries its own logo/close row
     instead, so it just needs normal breathing room. */
  padding: 28px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100%;
}
body.menu-open .site-header__drawer {
  visibility: visible;
  opacity: 1;
}
/* No longer trying to raise .site-header above the drawer via z-index —
   on a real mobile browser that combination (position:sticky header +
   z-index over a position:fixed overlay) didn't reliably paint on top,
   so the drawer's own logo/close row (below) is the only source of
   those controls: guaranteed, since it's simply part of the drawer's own
   DOM, no cross-element stacking involved. The header just stays
   covered underneath, same as any other content on the page. */
.site-header__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.site-header__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-paper);
  border: 1px solid var(--line-soft);
  color: var(--brand-ink);
  cursor: pointer;
}
.site-header__drawer-close:hover { background: var(--cream-deep); }
.site-header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.site-header__drawer-nav a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 22px 4px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--brand-ink);
  position: relative;
  transition: padding 0.16s ease, color 0.16s ease;
  opacity: 0;
  transform: translateY(8px);
}
body.menu-open .site-header__drawer-nav a {
  animation: drawerItemIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
body.menu-open .site-header__drawer-nav a:nth-child(1) { animation-delay: 0.08s; }
body.menu-open .site-header__drawer-nav a:nth-child(2) { animation-delay: 0.14s; }
body.menu-open .site-header__drawer-nav a:nth-child(3) { animation-delay: 0.20s; }
body.menu-open .site-header__drawer-nav a:nth-child(4) { animation-delay: 0.26s; }
@keyframes drawerItemIn {
  to { opacity: 1; transform: translateY(0); }
}
.site-header__drawer-nav a:active {
  padding-left: 10px;
  color: var(--brand-primary);
}
.drawer-link__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  grid-column: 1;
  grid-row: 1;
}
.drawer-link__sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-top: 6px;
  grid-column: 1;
  grid-row: 2;
  line-height: 1.4;
}
.site-header__drawer-nav a::after {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-paper);
  border: 1px solid var(--line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a0e16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  transition: transform 0.18s, background-color 0.18s;
}
.site-header__drawer-nav a:hover::after,
.site-header__drawer-nav a:active::after {
  transform: translateX(3px);
  background-color: var(--brand-bg);
}
.site-header__drawer-nav a.is-active .drawer-link__title { color: var(--brand-primary); }

.site-header__drawer-cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-header__drawer-cta .btn { align-self: stretch; }
.site-header__drawer-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.site-header__drawer-foot .hero__stars {
  font-size: 14px;
  letter-spacing: 3px;
}

body.menu-open .look-fab,
body.menu-open .look-popover,
body.menu-open .tweaks-panel { display: none; }
@media (min-width: 900px) { .site-header__drawer { display: none; } }

/* ══════════════════════════════════════════════
   LOOK PICKER — botón flotante para personalizar tema
   ══════════════════════════════════════════════ */
.look-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--brand-ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-3);
  transition: transform 0.16s, background 0.16s;
}
.look-fab:hover { transform: translateY(-2px); }
.look-fab__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--brand-bg);
}

.look-popover {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 46;
  width: min(340px, calc(100vw - 36px));
  background: var(--brand-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  padding: 22px 22px 18px;
  display: none;
  flex-direction: column;
  gap: 16px;
  animation: lookPopIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.look-popover.is-open { display: flex; }
@keyframes lookPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.look-popover__head {
  display: flex; align-items: center; justify-content: space-between;
}
.look-popover__head h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.look-popover__close {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-bg);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.look-row {
  display: flex; flex-direction: column; gap: 8px;
}
.look-row__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.look-palettes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.look-pal {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-2);
  display: flex;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform 0.14s, border-color 0.14s;
  padding: 0;
}
.look-pal:hover { transform: translateY(-2px); }
.look-pal.is-active { border-color: var(--brand-ink); }
.look-pal__band {
  flex: 1;
  height: 100%;
}
.look-select {
  width: 100%;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--brand-bg);
  font-size: 13px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231d140e' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.look-radio {
  display: flex; gap: 6px;
  background: var(--brand-bg);
  border-radius: var(--r-pill);
  padding: 4px;
  border: 1px solid var(--line);
}
.look-radio button {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all 0.14s;
}
.look-radio button.is-active {
  background: var(--brand-ink);
  color: var(--paper);
}

/* ══════════════════════════════════════════════
   RESPONSIVE — mobile (<720px) ajustes generales
   ══════════════════════════════════════════════ */
@media (max-width: 720px) {
  body { font-size: 15px; }
  :root { --pad-section: var(--s-7); --pad-card: var(--s-5); --gap-grid: var(--s-4); }

  .site-header__inner { padding: 12px 0; }
  .site-header__cta { gap: 8px; }

  .hero { padding: 48px 0 32px; }
  .hero__grid { gap: 32px; }
  .hero__title { font-size: clamp(40px, 11vw, 60px); margin: 14px 0 18px; }
  .hero__lead { font-size: 16px; margin-bottom: 24px; }
  .hero__visual { aspect-ratio: 5 / 4; max-width: 100%; }
  .hero__card { width: 58%; }
  .hero__card--1 { transform: rotate(-9deg) translate(-18%, 4%); }
  .hero__card--2 { transform: rotate(4deg) translate(14%, -6%); }
  .hero__card--3 { transform: rotate(-2deg) translate(-2%, 12%); width: 62%; }
  .hero__proof { margin-top: 22px; font-size: 12px; gap: 10px; flex-wrap: wrap; }

  .section-head h2 { font-size: clamp(28px, 8vw, 40px); }
  .section-head p { font-size: 15px; }

  .acts { gap: 16px; }
  .act { padding: 26px 22px 22px; min-height: 0; }
  .act__num { font-size: 70px; top: 10px; right: 16px; }
  .act__title { font-size: 28px; }
  .act__desc { font-size: 14px; }
  .act__visual { height: 180px !important; }
  /* Step 1's visual is a full <x-storefront.loteria-card> (band + 4x4 grid +
     footer) rotated at 70% width — it renders ~300px tall there, well past
     the generic 180px slot above, and with no overflow clip it bled upward
     over act__desc's text. Give it a height that actually fits its content
     instead of clipping or overlapping. */
  .act--1 .act__visual { height: 320px !important; }
  .act__visual--phone { height: 260px !important; }

  .magic-section { padding: 44px 22px; border-radius: 20px; }
  .magic-section__grid { gap: 32px; }
  .magic-section__copy h2 { font-size: clamp(34px, 9vw, 46px); }
  .magic-section__lead { font-size: 16px; margin-bottom: 22px; }

  .cta-block { padding: 44px 24px; border-radius: 20px; }
  .cta-block h2 { font-size: clamp(28px, 8vw, 40px); }
  .cta-block p { font-size: 15px; }

  .qr-pass { padding: 28px 22px 22px; }
  .qr-pass__event { font-size: 24px; }
  .qr-pass__divider { margin: 16px -22px 14px; }

  .preview-pane { padding: 28px 18px; min-height: 360px; border-radius: 18px; }
  .preview-pane__sheet { width: min(100%, 280px); }

  .panel { padding: 22px 18px; }
  .panel h3 { font-size: 11px; }
  .qty-grid { gap: 6px; row-gap: 16px; }
  .qty-btn { padding: 12px 4px; }
  .qty-btn b { font-size: 18px; }
  .qty-btn__tag { font-size: 8px; padding: 3px 7px; }

  .summary-bar { padding: 10px 10px 10px 18px; gap: 10px; }
  .summary-bar__amount { font-size: 20px; }
  .summary-bar__sub { font-size: 10px; }
  .summary-bar .btn { padding: 12px 16px; font-size: 13px; }

  .confirm-hero { padding: 56px 0 16px; }
  .confirm-hero h1 { font-size: clamp(36px, 10vw, 52px); }
  .confirm-hero p { font-size: 16px; }
  .confirm-grid { margin: 36px 0 24px; gap: 24px; }
  .download-card { padding: 28px 22px; }
  .download-card h2 { font-size: 26px; }

  .design-card { padding: 18px 18px 16px; }
  .design-card__name { font-size: 20px; }

  .testimonial { padding: 22px; }
  .testimonial__quote { font-size: 18px; }

  .faq__q { font-size: 16px; gap: 12px; }
  .faq__a { font-size: 15px; }

  .btn--big { padding: 16px 24px; font-size: 15px; }

  .site-footer { padding: 56px 0 28px; margin-top: 56px; }
  .site-footer__grid { gap: 32px; }

  .look-fab { right: 12px; bottom: 12px; padding: 10px 14px; font-size: 12px; }
  .look-popover { right: 12px; bottom: 60px; padding: 18px 18px 16px; }
}

/* ══════════════════════════════════════════════
   TWEAKS PANEL (toolbar-toggle) · 3 controles expresivos
   ══════════════════════════════════════════════ */
.tweaks-panel {
  position: fixed;
  right: 16px; top: 76px;
  z-index: 2147483646;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 100px);
  background: rgba(250, 248, 244, .94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(80, 40, 20, .22),
              0 1px 0 rgba(255, 255, 255, .6) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: #1a0e16;
  animation: tweaksIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes tweaksIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tweaks-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.tweaks-panel__head strong { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.tweaks-panel__x {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tweaks-panel__x:hover { background: rgba(0, 0, 0, .06); color: #111; }
.tweaks-panel__body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}
.tweak-section { display: flex; flex-direction: column; gap: 10px; }
.tweak-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .58);
  display: flex; justify-content: space-between; align-items: baseline;
}
.tweak-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
}
.tweak-hint {
  font-size: 11px;
  color: rgba(0, 0, 0, .48);
  line-height: 1.4;
  text-wrap: pretty;
}

/* Vibe cards */
.tweak-vibes { display: flex; flex-direction: column; gap: 8px; }
.vibe-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: white;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  text-align: left;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.vibe-card:hover { transform: translateY(-1px); border-color: rgba(0, 0, 0, .18); }
.vibe-card.is-active {
  border-color: #1a0e16;
  box-shadow: 0 0 0 2px rgba(26, 14, 22, .08);
}
.vibe-card__sw {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}
.vibe-card__sw > span {
  width: 16px; height: 16px;
  border-radius: 50%;
  margin-left: -5px;
  box-shadow: 0 0 0 2px white;
}
.vibe-card__sw > span:first-child { margin-left: 0; }
.vibe-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vibe-card__name {
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.vibe-card__desc {
  font-size: 10.5px;
  color: rgba(0, 0, 0, .55);
  font-weight: 500;
}

/* Slider */
.tweak-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(90deg,
    var(--brand-primary) 0%,
    var(--brand-primary) calc(var(--fiesta, .6) * 100%),
    rgba(0, 0, 0, .1) calc(var(--fiesta, .6) * 100%),
    rgba(0, 0, 0, .1) 100%);
  border-radius: 999px;
  outline: none;
}
.tweak-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  background: var(--brand-primary);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.tweak-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--brand-primary);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Segmented radio */
.tweak-radio {
  display: flex; gap: 4px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 999px;
  padding: 3px;
}
.tweak-radio button {
  flex: 1; padding: 8px 6px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: rgba(0, 0, 0, .55);
  transition: all .14s;
}
.tweak-radio button.is-active {
  background: #1a0e16; color: white;
}

@media (max-width: 720px) {
  .tweaks-panel { right: 12px; left: 12px; width: auto; top: 72px; }
}

/* ══════════════════════════════════════════════
   FIESTA — variables expresivas que reescriben el feel
   ══════════════════════════════════════════════ */
:root {
  --fiesta: .6;
  --fiesta-confetti: .65;
  --fiesta-tilt: .6;
  --fiesta-script: .85;
  --fiesta-speed: 1.36;
}

.confetti {
  opacity: var(--fiesta-confetti);
  transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.hero__card--1 { transform: rotate(calc(-9deg * var(--fiesta-tilt))) translate(-22%, 4%); }
.hero__card--2 { transform: rotate(calc(4deg  * var(--fiesta-tilt))) translate(18%, -8%); }
.hero__card--3 { transform: rotate(calc(-2deg * var(--fiesta-tilt))) translate(-3%, 16%); width: 70%; }

.hero__title em,
.magic-section__copy h2 em,
.confirm-hero h1 em {
  font-size: calc(0.92em * var(--fiesta-script));
  transform: rotate(calc(-2deg * var(--fiesta-tilt)));
  transition: font-size .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.float { animation-duration: calc(5s / max(var(--fiesta-speed), 0.2)); }

/* Vibe-specific feel tweaks */
body.vibe-elegante .confetti { opacity: calc(var(--fiesta-confetti) * 0.35); }
body.vibe-elegante .eyebrow::before { background: var(--brand-secondary); }
body.vibe-elegante .hero__title em,
body.vibe-elegante .magic-section__copy h2 em,
body.vibe-elegante .confirm-hero h1 em {
  font-family: "Caveat", cursive;
  letter-spacing: 0;
}

body.vibe-pop .confetti { opacity: calc(var(--fiesta-confetti) * 1.1); filter: saturate(1.2); }
body.vibe-pop .hero__card--1 { transform: rotate(calc(-12deg * var(--fiesta-tilt))) translate(-22%, 4%); }
body.vibe-pop .hero__card--2 { transform: rotate(calc(7deg   * var(--fiesta-tilt))) translate(18%, -8%); }
body.vibe-pop .hero__title em,
body.vibe-pop .magic-section__copy h2 em,
body.vibe-pop .confirm-hero h1 em {
  font-family: "Boldonse", system-ui, sans-serif;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Forma — además de cambiar los --r-* tokens, ajustamos otros radios pequeños */
body.forma-cuadrada .btn,
body.forma-cuadrada .chip,
body.forma-cuadrada .occasion__icon,
body.forma-cuadrada .site-header__cart,
body.forma-cuadrada .site-header__menu-toggle {
  border-radius: 6px !important;
}
body.forma-cuadrada .loteria,
body.forma-cuadrada .loteria__cell,
body.forma-cuadrada .qr-pass__qr-frame,
body.forma-cuadrada .download-card__file-icon {
  border-radius: 2px;
}
body.forma-cuadrada .wordmark__type em::after {
  border-radius: 2px;
}

body.forma-redonda .panel,
body.forma-redonda .design-card,
body.forma-redonda .testimonial,
body.forma-redonda .occasion,
body.forma-redonda .step,
body.forma-redonda .download-card,
body.forma-redonda .magic-section,
body.forma-redonda .cta-block,
body.forma-redonda .act {
  border-radius: 28px;
}
body.forma-redonda .loteria,
body.forma-redonda .loteria__cell,
body.forma-redonda .qr-pass,
body.forma-redonda .qr-pass__qr-frame {
  border-radius: 18px;
}

/* ── Crop modal overlay ──
   display:flex MUST come from a class, not an inline style: Alpine's
   x-show clears the element's inline `display` value when toggling
   visibility (it doesn't preserve an inline flex you set yourself), so a
   flex declared only inline silently reverts to the browser's default
   `display:block` for a <div> the moment x-show shows it again. */
.crop-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 10, 10, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Card picker modal — select a card from the deck, then upload/replace its
   photo. Shares .crop-modal-overlay's backdrop, styles its own card. */
.card-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--brand-paper);
  border-radius: var(--r-3);
  padding: 28px 24px 24px;
  box-shadow: var(--sh-3);
}
.card-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-bg);
  border: 1px solid var(--line-soft);
  color: var(--brand-ink);
  cursor: pointer;
  transition: background 0.14s;
}
.card-modal__close:hover { background: var(--cream-deep); }
.card-modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 8px 0 20px;
  padding-right: 32px;
}
.card-modal__select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background:
    var(--brand-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23786a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center / 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--brand-ink);
  appearance: none;
  cursor: pointer;
}
.card-modal__select:focus {
  outline: 2px solid color-mix(in oklab, var(--brand-primary) 50%, transparent);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}
.card-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* ── Global toast — same reasoning: display:flex from a class, not inline,
   since this element also toggles via x-show. ── */
.toast-box {
  background: var(--brand-ink);
  color: var(--paper);
  padding: 14px 20px;
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  display: flex;
  align-items: center;
  gap: 10px;
}