:root {
  --hero-bg: #fbf1e6;
  --paper-bg: #fffaf4;
  --soft-bg: #f2edf7;
  --warm-bg: #f5ebdf;
  --surface: #fff;
  --accent: #693f76;
  --accent-wash: #f2e8f5;
  --highlight: #147631;
  --closing-bg: #a9361c;
  --cta-bg: #147631;
  --cta-hover: #0c6225;
  --cta-fg: #fff;
  --old-price: #a52a2c;
  --new-price: #147631;
  --feature-bg: #fff7f1;
  --feature-border: #dba58f;
  --bonus-bg: #fbece1;
  --bonus-ink: #843118;
}

.design-bar {
  position: sticky;
  z-index: 4;
  top: 0;
  color: #2c2234;
  background: #fffdfb;
  border-bottom: 1px solid #e2dce7;
  box-shadow: 0 3px 12px #2216290d;
}
.design-inner { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.design-inner > p { flex: none; font-size: .875rem; font-weight: 800; }
.design-options { display: flex; gap: 6px; min-width: 0; padding: 6px 4px; overflow-x: auto; scrollbar-width: thin; }
.design-options button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 12px;
  border: 1px solid #e2dce7;
  border-radius: 99px;
  background: #fff;
  color: inherit;
  font: 700 1rem/1.1 system-ui, sans-serif;
  cursor: pointer;
}
.design-options button:hover { background: #f4edf7; }
.design-options button[aria-pressed="true"] { border-color: #473352; color: #fff; background: #473352; }
.design-options button:focus-visible { outline: 2px solid #205bba; outline-offset: 2px; }
.design-options button span { width: 12px; height: 12px; border: 1px solid #a3a0aa; border-radius: 50%; background: var(--swatch, #fbf1e6); }
[data-design-option="mistica"] { --swatch: #81509a; }
[data-design-option="natural"] { --swatch: #6b966a; }
[data-design-option="lumina"] { --swatch: #617dd0; }
[data-design-option="atelier"] { --swatch: #bd7466; }
html { scroll-padding-top: var(--design-offset, 76px); }

em, .eyebrow { color: var(--highlight); }
.hero .eyebrow, .section > .wrap > .eyebrow { color: var(--accent); }
.orange { color: var(--orange); }
.paper { background: var(--paper-bg); }
.soft { background: var(--soft-bg); }
.warm { background: var(--warm-bg); }
.benefits article, .stories figure, .example, .previews figure, .bonus, .offer, .audience li, .faq details { background: var(--surface); }
.benefits article:nth-child(n) span { color: var(--accent); background: var(--accent-wash); }
.equation span { background: var(--warm-bg); }
.equation strong { color: var(--highlight); background: var(--soft-bg); border-color: var(--line); }
.offer.featured { background: var(--feature-bg); border-color: var(--feature-border); }
.featured .badge { background: var(--closing-bg); }
.included { background: var(--bonus-bg); border-color: var(--feature-border); }
.included h4, .included small, .included p { color: var(--bonus-ink); }
.included p { border-color: var(--feature-border); }
.closing { background: var(--closing-bg); }
.cta:not(.cta-white) { color: var(--cta-fg); background: var(--cta-bg); }
.cta:not(.cta-white):is(a, button:enabled):hover { background: var(--cta-hover); }
.cta:not(.cta-white):disabled { color: #fff; background: #3e6550; }
.hero-action .author, .hero-action .hero-cta { margin-inline: 0; }
.hero-action .assurance { justify-content: flex-start; }
.hero-cta svg { transition: transform 180ms ease; }
.hero-cta:hover svg { transform: translateX(4px); }
.previews img { aspect-ratio: 1.2; }
.previews figure:first-child img { object-position: center 38%; }
.previews figure:last-child img { object-position: center 57%; }

/* 2. Mística */
[data-design="mistica"] {
  color-scheme: dark;
  --ink: #fff1e8;
  --muted: #ded0e5;
  --green: #a0edb2;
  --orange: #ffc09c;
  --line: #594166;
  --cream: #211628;
  --hero-bg: #1c1125;
  --paper-bg: #26192f;
  --soft-bg: #30203a;
  --warm-bg: #211529;
  --surface: #352341;
  --accent: #edc591;
  --accent-wash: #4a3454;
  --highlight: #f1ca8e;
  --closing-bg: #573260;
  --cta-bg: #9ee5ae;
  --cta-hover: #bdf4c8;
  --cta-fg: #163621;
  --old-price: #ffaaa9;
  --new-price: #a3f2b8;
  --feature-bg: #392748;
  --feature-border: #a17c9e;
  --bonus-bg: #4a3154;
  --bonus-ink: #ffdfb0;
  --radius: 16px;
}
[data-design="mistica"] .hero { padding-block: clamp(26px, 4vw, 42px); background: radial-gradient(ellipse at 50% 26%, #41284c 0%, var(--hero-bg) 64%); text-align: center; }
[data-design="mistica"] .hero-layout { grid-template-columns: 1fr; grid-template-areas: "message" "art" "action"; max-width: 850px; }
[data-design="mistica"] .hero h1, [data-design="mistica"] h2 { font-family: Georgia, serif; letter-spacing: -.045em; }
[data-design="mistica"] .hero h1, [data-design="mistica"] .lead { margin-inline: auto; }
[data-design="mistica"] .hero-art { width: min(100%, 390px); margin-inline: auto; border: 3px double #bf9d6c; box-shadow: 0 0 46px #bd84d02d; --hero-radius: 14px; }
[data-design="mistica"] .hero-art figcaption { margin-inline: auto; }
[data-design="mistica"] .hero-action .author, [data-design="mistica"] .hero-action .hero-cta { margin-inline: auto; }
[data-design="mistica"] .hero-action .assurance { justify-content: center; }
[data-design="mistica"] .stories figure { border-top: 2px solid #b69474; }
[data-design="mistica"] .cta-white { color: #563260; }
[data-design="mistica"] footer { color: var(--muted); }

/* 3. Natural */
[data-design="natural"] {
  --ink: #252e22;
  --muted: #495145;
  --line: #d7e0d1;
  --cream: #f6f6ed;
  --hero-bg: #ecf1e5;
  --paper-bg: #faf8ef;
  --soft-bg: #e8eee4;
  --warm-bg: #f0ece0;
  --accent: #4d673a;
  --accent-wash: #e7efde;
  --highlight: #375c37;
  --orange: #933c27;
  --closing-bg: #365635;
  --feature-bg: #f6faef;
  --feature-border: #8daa83;
  --bonus-bg: #eaf1df;
  --bonus-ink: #415a33;
  --radius: 27px;
}
[data-design="natural"] .hero-layout { grid-template-areas: "art message" "art action"; }
[data-design="natural"] .hero-art { --hero-radius: 46% 46% 22px 22px; border: 5px solid #fffdf2; outline: 1px solid #8ea382; }
[data-design="natural"] .hero-art img { aspect-ratio: 1.03; }
[data-design="natural"] .hero-art figcaption { left: auto; background: #254c32; }
[data-design="natural"] h1, [data-design="natural"] h2 { font-family: Georgia, serif; font-weight: 700; }
[data-design="natural"] .cta { border-radius: 99px; }
[data-design="natural"] .benefits article { display: flex; align-items: center; gap: 11px; text-align: left; }
[data-design="natural"] .benefits span { flex: none; margin: 0; }
[data-design="natural"] .stories figure { border-left: 4px solid #95ad88; }
[data-design="natural"] .cta-white { color: #365635; }

/* 4. Lúmina */
[data-design="lumina"] {
  --ink: #142346;
  --muted: #414e6c;
  --line: #d6e1f5;
  --cream: #eef4ff;
  --hero-bg: #eaf0ff;
  --paper-bg: #f9fbff;
  --soft-bg: #e8f1fc;
  --warm-bg: #e9eeff;
  --accent: #433d9a;
  --accent-wash: #e6e8ff;
  --highlight: #403da0;
  --orange: #953b24;
  --closing-bg: #394496;
  --feature-bg: #f5f6ff;
  --feature-border: #a6b2ed;
  --bonus-bg: #e8edff;
  --bonus-ink: #37357f;
  --radius: 12px;
}
[data-design="lumina"] .hero { background-color: var(--hero-bg); background-image: radial-gradient(#6978ab45 1px, transparent 1px); background-size: 19px 19px; }
[data-design="lumina"] .hero-layout { grid-template-columns: 1.12fr 1fr; gap: 14px 26px; padding: clamp(14px, 3vw, 28px); border: 1px solid #c9d5f3; border-radius: 25px; background: #f8faff; box-shadow: 0 16px 38px #273d7220; }
[data-design="lumina"] .hero h1 { font-size: clamp(2rem, 5.3vw, 3.45rem); }
[data-design="lumina"] .hero-art { --hero-radius: 16px; border: 1px solid #9aaee8; }
[data-design="lumina"] .hero-art figcaption { background: #272e73; }
[data-design="lumina"] .cta { border-radius: 10px; }
[data-design="lumina"] .benefits article { box-shadow: inset 0 -3px #c4cff5; }
[data-design="lumina"] .stories figure { border-top: 3px solid #8e9cdf; }
[data-design="lumina"] .cta-white { color: #333d8c; }

/* 5. Atelier */
[data-design="atelier"] {
  --ink: #392723;
  --muted: #65504a;
  --line: #e8d5c8;
  --cream: #fdf3eb;
  --hero-bg: #f4e5da;
  --paper-bg: #fdf8f2;
  --soft-bg: #f6e9e5;
  --warm-bg: #f2e4d8;
  --accent: #873d32;
  --accent-wash: #f6e4db;
  --highlight: #913c2e;
  --orange: #933c27;
  --closing-bg: #873c31;
  --feature-bg: #fff6ef;
  --feature-border: #d79786;
  --bonus-bg: #f7e4d9;
  --bonus-ink: #793b2f;
  --radius: 8px;
}
[data-design="atelier"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 0; }
[data-design="atelier"] .hero-message, [data-design="atelier"] .hero-action { position: relative; z-index: 1; background: var(--paper-bg); padding-inline: clamp(18px, 4vw, 44px); }
[data-design="atelier"] .hero-message { padding-top: 25px; }
[data-design="atelier"] .hero-action { padding-bottom: 24px; }
[data-design="atelier"] .hero-layout { row-gap: 0; }
[data-design="atelier"] h1, [data-design="atelier"] h2 { font-family: Georgia, serif; font-weight: 700; }
[data-design="atelier"] h1 em { font-style: italic; }
[data-design="atelier"] .hero-art { --hero-radius: 4px; }
[data-design="atelier"] .hero-art figcaption { border-radius: 3px; }
[data-design="atelier"] .benefits { gap: 0; border: 1px solid var(--line); }
[data-design="atelier"] .benefits article { border-radius: 0; }
[data-design="atelier"] .stories figure { border-bottom: 3px solid #cb8b7c; }
[data-design="atelier"] .story-portrait { border-radius: 45% 45% 8px 8px; }
[data-design="atelier"] .cta { border-radius: 6px; }

@media (max-width: 760px) {
  .design-inner { display: block; width: 100%; min-height: 0; padding-top: 6px; }
  .design-inner > p { padding-inline: 16px; line-height: 1.3; }
  .design-options { padding-inline: 16px; }
}
@media (max-width: 620px) {
  .hero { padding-block: 26px 32px; }
  .hero .hero-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "message" "art" "action"; row-gap: 14px; text-align: center; }
  .hero h1, .hero .lead, .hero-action .author, .hero-action .hero-cta { margin-inline: auto; }
  .hero-action .assurance { justify-content: center; }
  .hero-art { width: min(100%, 435px); margin-inline: auto; }
  .hero-art img { aspect-ratio: 1.15; }
  [data-design="mistica"] .hero-art img { aspect-ratio: 1.08; }
  [data-design="atelier"] .hero-message, [data-design="atelier"] .hero-action { padding: 14px 8px; }
}
@media (max-width: 560px) {
  .design-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow-x: visible; }
  .design-options button { min-height: 36px; justify-content: center; padding: 5px 7px; }
}
@media (max-width: 380px) {
  .design-options button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta svg { transition: none; }
}