/* Tres pruebas cromáticas. Sólo cambian color, luz y sombra: la tarjeta 05 conserva estructura y contenido. */
html[data-theme] {
  color: var(--theme-ink);
  background: var(--theme-canvas);
}

html[data-theme] body {
  color: var(--theme-ink);
  background:
    radial-gradient(circle at 12% 15%, var(--theme-glow-a), transparent 31rem),
    radial-gradient(circle at 88% 82%, var(--theme-glow-b), transparent 34rem),
    var(--theme-canvas);
}

html[data-theme] .brand-lockup,
html[data-theme] .story__copy { color: var(--theme-muted); }
html[data-theme] .kicker { color: var(--theme-accent); }
html[data-theme] .principles span { border-color: var(--theme-line); color: var(--theme-ink); background: rgba(255,255,255,.22); }
html[data-theme] .disclaimer { color: var(--theme-soft); }
html[data-theme] .brand-lockup img { border-color: rgba(255,255,255,.68); background: var(--theme-avatar); box-shadow: 0 12px 34px var(--theme-shadow); }

html[data-theme] .phone-shell {
  border-color: rgba(255,255,255,.76);
  background: radial-gradient(circle at 72% 7%, var(--theme-phone-glow), transparent 18rem), var(--theme-phone);
  box-shadow: 0 50px 100px var(--theme-shadow), 0 0 0 9px rgba(255,255,255,.18), 0 0 70px var(--theme-halo);
}
html[data-theme] .phone-shell::before { background: var(--theme-phone-glow); opacity: .7; }
html[data-theme] .phone-top { color: var(--theme-muted); }
html[data-theme] .phone-top i { background: var(--theme-island); }
html[data-theme] .micro { color: var(--theme-soft); }
html[data-theme] .app-header h2 { color: var(--theme-ink); }
html[data-theme] .avatar { border-color: rgba(255,255,255,.76); color: var(--theme-avatar-ink); background: var(--theme-avatar); box-shadow: 0 8px 20px var(--theme-halo); }

html[data-theme] .credit-card {
  border-color: rgba(255,255,255,.68);
  color: var(--theme-card-ink);
  background: var(--theme-card);
  box-shadow: 0 30px 58px var(--theme-card-shadow), 0 13px 24px var(--theme-halo), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(111,54,38,.16);
}
html[data-theme] .credit-card::before { background: rgba(255,255,255,.42); }
html[data-theme] .card-glow { background: var(--theme-card-glow); opacity: .62; }
html[data-theme] .pastry { opacity: .34; filter: drop-shadow(0 7px 11px rgba(111,54,38,.2)); }
html[data-theme] .mini-brand img { border-color: rgba(255,255,255,.76); background: var(--theme-medallion); box-shadow: 0 10px 18px var(--theme-card-shadow), 0 0 22px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.5); }
html[data-theme] .tier { border-color: rgba(255,255,255,.58); background: rgba(255,255,255,.2); }

html[data-theme] .reward,
html[data-theme] .identity,
html[data-theme] .activity {
  border-color: var(--theme-panel-line);
  color: var(--theme-ink);
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.38));
  box-shadow: 0 18px 34px var(--theme-panel-shadow), inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme] .reward p,
html[data-theme] .identity p,
html[data-theme] .activity p,
html[data-theme] .activity__list time,
html[data-theme] .activity__list small { color: var(--theme-muted); }
html[data-theme] .reward p b { color: var(--theme-ink); }
html[data-theme] .progress { background: var(--theme-track); }
html[data-theme] .reward--first { --reward-glow: var(--theme-first-glow); }
html[data-theme] .reward--first::before { background: linear-gradient(var(--theme-accent), var(--theme-gold)); box-shadow: 0 0 15px var(--theme-halo); }
html[data-theme] .reward--first header > strong { color: var(--theme-accent); }
html[data-theme] .reward--first .progress i { background: linear-gradient(90deg, var(--theme-accent), var(--theme-peach) 68%, var(--theme-gold)); box-shadow: 0 0 16px var(--theme-halo); }

html[data-theme] .reward--second {
  --reward-glow: var(--theme-second-glow);
  border-color: var(--theme-second-line);
  background: var(--theme-second-panel);
}
html[data-theme] .reward--second::before { background: var(--theme-second-accent); box-shadow: 0 0 16px var(--theme-second-shadow); }
html[data-theme] .reward--second header > strong { color: var(--theme-second-ink); }
html[data-theme] .reward--second .progress { background: var(--theme-second-track); }
html[data-theme] .reward--second .progress i { background: var(--theme-second-accent); box-shadow: 0 0 16px var(--theme-second-shadow); }

html[data-theme] .reward--grand {
  --reward-glow: var(--theme-grand-glow);
  border-color: var(--theme-grand-line);
  background: var(--theme-grand-panel);
  box-shadow: 0 24px 46px var(--theme-panel-shadow), 0 0 28px var(--theme-grand-shadow), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme] .reward--grand::before { background: var(--theme-grand-accent); box-shadow: 0 0 20px var(--theme-grand-shadow); }
html[data-theme] .reward--grand .micro { color: var(--theme-grand-ink); }
html[data-theme] .reward--grand header > strong { color: var(--theme-grand-ink); text-shadow: 0 0 14px var(--theme-grand-shadow); }
html[data-theme] .reward--grand .progress { background: var(--theme-grand-track); }
html[data-theme] .reward--grand .progress i { background: var(--theme-grand-accent); box-shadow: 0 0 18px var(--theme-grand-shadow); }
html[data-theme] .reward__sparkles i { background: var(--theme-sparkle); opacity: .42; }

html[data-theme] .pastry-info {
  border-color: rgba(255,255,255,.72);
  color: var(--theme-info-ink);
  background: var(--theme-info);
  box-shadow: 0 24px 42px var(--theme-halo), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme] .pastry-info .micro,
html[data-theme] .pastry-info h3,
html[data-theme] .pastry-info p { color: var(--theme-info-ink); }
html[data-theme] .pastry-info .micro,
html[data-theme] .pastry-info p { opacity: .7; }
html[data-theme] .pastry-info__icon { border-color: color-mix(in srgb, var(--theme-info-ink), transparent 70%); background: rgba(255,255,255,.28); }
html[data-theme] .identity button { border-color: var(--theme-accent); color: var(--theme-accent); }
html[data-theme] .activity__head > span,
html[data-theme] .activity__points--earned { color: var(--theme-accent); }
html[data-theme] .activity__points--redeemed { color: var(--theme-gold); }
html[data-theme] .activity__list li { border-color: var(--theme-line); }
html[data-theme] .qr { background: var(--theme-paper); box-shadow: 0 12px 28px var(--theme-panel-shadow); }
html[data-theme] .qr i { background: var(--theme-ink); }
html[data-theme] .qr i:nth-child(2),
html[data-theme] .qr i:nth-child(4),
html[data-theme] .qr i:nth-child(8) { background: transparent; box-shadow: inset 0 0 0 3px var(--theme-ink); }
html[data-theme] .qr i:nth-child(5) { background: var(--theme-accent); }
html[data-theme] .bottom-nav { border-color: rgba(255,255,255,.78); background: rgba(255,250,241,.78); box-shadow: 0 18px 38px var(--theme-panel-shadow), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme] .bottom-nav a { color: var(--theme-muted); }
html[data-theme] .bottom-nav a.active { color: var(--theme-nav-ink); background: var(--theme-nav); box-shadow: 0 8px 18px var(--theme-halo); }

html[data-theme="crema"] {
  --theme-canvas: #f3ecdd; --theme-phone: #fbf6ec; --theme-paper: #fffaf1;
  --theme-ink: #3a2f28; --theme-muted: #806d61; --theme-soft: #a27667; --theme-line: rgba(181,84,63,.22);
  --theme-accent: #b5543f; --theme-peach: #dc8b73; --theme-gold: #c8a24b; --theme-card-ink: #fff9ee;
  --theme-glow-a: rgba(181,84,63,.2); --theme-glow-b: rgba(200,162,75,.18); --theme-phone-glow: rgba(230,155,132,.26);
  --theme-shadow: rgba(97,55,39,.18); --theme-panel-shadow: rgba(104,65,48,.14); --theme-halo: rgba(181,84,63,.2);
  --theme-island: #4b352e; --theme-avatar: linear-gradient(145deg,#b5543f,#dd8d74); --theme-avatar-ink: #fff9ee;
  --theme-card: linear-gradient(128deg,#a94735 0%,#c86a52 44%,#e29a7c 78%,#f0c5a6 112%); --theme-card-shadow: rgba(149,72,50,.3); --theme-card-glow: #ffe0bd; --theme-medallion: linear-gradient(145deg,#9f4635,#c76d52);
  --theme-panel-line: rgba(181,84,63,.2); --theme-track: #eadbd0; --theme-first-glow: rgba(181,84,63,.2);
  --theme-second-glow: rgba(207,131,105,.24); --theme-second-line: rgba(185,105,82,.24); --theme-second-panel: linear-gradient(145deg,rgba(249,218,204,.82),rgba(255,247,235,.58)); --theme-second-accent: linear-gradient(90deg,#bd624f,#e39a7d); --theme-second-shadow: rgba(181,84,63,.22); --theme-second-ink: #a54c3d; --theme-second-track: #ead6ca;
  --theme-grand-glow: rgba(200,162,75,.28); --theme-grand-line: rgba(183,137,47,.32); --theme-grand-panel: linear-gradient(135deg,rgba(247,225,172,.78),rgba(255,248,226,.7) 52%,rgba(243,206,157,.62)); --theme-grand-accent: linear-gradient(#b5543f,#d7a844 55%,#e9c66d); --theme-grand-shadow: rgba(200,162,75,.24); --theme-grand-ink: #8a6420; --theme-grand-track: #e9dcc1;
  --theme-sparkle: #b5543f; --theme-info: linear-gradient(125deg,#e9c97d,#f1b493 58%,#df8069); --theme-info-ink: #493124; --theme-nav: linear-gradient(110deg,#a64635,#cf735a); --theme-nav-ink: #fff9ee;
}

html[data-theme="glaseado"] {
  --theme-canvas: #f8dedb; --theme-phone: #fff7f2; --theme-paper: #fffaf7;
  --theme-ink: #493237; --theme-muted: #8d6870; --theme-soft: #b06f78; --theme-line: rgba(191,94,91,.22);
  --theme-accent: #c76062; --theme-peach: #ee9b91; --theme-gold: #d4a54d; --theme-card-ink: #fff9f3;
  --theme-glow-a: rgba(211,110,113,.22); --theme-glow-b: rgba(246,183,166,.28); --theme-phone-glow: rgba(233,128,130,.22);
  --theme-shadow: rgba(115,57,65,.17); --theme-panel-shadow: rgba(126,72,78,.14); --theme-halo: rgba(211,102,105,.2);
  --theme-island: #59373e; --theme-avatar: linear-gradient(145deg,#c45b63,#ef9b91); --theme-avatar-ink: #fff9f3;
  --theme-card: linear-gradient(128deg,#b64e58 0%,#d56d72 44%,#ec9a91 77%,#f8c8b6 112%); --theme-card-shadow: rgba(180,74,83,.28); --theme-card-glow: #ffe0d2; --theme-medallion: linear-gradient(145deg,#a94451,#cf6870);
  --theme-panel-line: rgba(199,96,98,.2); --theme-track: #f0d8d7; --theme-first-glow: rgba(216,103,105,.2);
  --theme-second-glow: rgba(208,132,156,.26); --theme-second-line: rgba(199,122,151,.25); --theme-second-panel: linear-gradient(145deg,rgba(246,211,223,.84),rgba(255,245,242,.58)); --theme-second-accent: linear-gradient(90deg,#bd6684,#e69aaf); --theme-second-shadow: rgba(194,98,132,.22); --theme-second-ink: #a74f70; --theme-second-track: #ecd3dc;
  --theme-grand-glow: rgba(212,165,77,.3); --theme-grand-line: rgba(194,146,55,.32); --theme-grand-panel: linear-gradient(135deg,rgba(249,226,174,.8),rgba(255,246,225,.72) 52%,rgba(244,202,183,.64)); --theme-grand-accent: linear-gradient(#d06c68,#d6a84f 55%,#f0c979); --theme-grand-shadow: rgba(212,165,77,.24); --theme-grand-ink: #8b6621; --theme-grand-track: #eadcc2;
  --theme-sparkle: #c76062; --theme-info: linear-gradient(125deg,#f1c780,#f3afa2 58%,#e98283); --theme-info-ink: #4d3034; --theme-nav: linear-gradient(110deg,#b74f59,#d97577); --theme-nav-ink: #fff9f3;
}

html[data-theme="pistacho"] {
  --theme-canvas: #f1ead8; --theme-phone: #fff9ee; --theme-paper: #fffdf5;
  --theme-ink: #354037; --theme-muted: #6f796e; --theme-soft: #798d7b; --theme-line: rgba(75,143,109,.22);
  --theme-accent: #b5543f; --theme-peach: #dd8d73; --theme-gold: #c8a24b; --theme-card-ink: #fffaf0;
  --theme-glow-a: rgba(75,143,109,.18); --theme-glow-b: rgba(200,162,75,.22); --theme-phone-glow: rgba(113,164,130,.2);
  --theme-shadow: rgba(69,79,60,.16); --theme-panel-shadow: rgba(73,87,66,.14); --theme-halo: rgba(75,143,109,.2);
  --theme-island: #3c493f; --theme-avatar: linear-gradient(145deg,#4b8f6d,#9ebf92); --theme-avatar-ink: #fffdf5;
  --theme-card: linear-gradient(128deg,#9c4738 0%,#bd624d 41%,#d79a70 73%,#d9c486 112%); --theme-card-shadow: rgba(128,76,49,.28); --theme-card-glow: #f9ddaa; --theme-medallion: linear-gradient(145deg,#814233,#aa6349);
  --theme-panel-line: rgba(75,143,109,.2); --theme-track: #dde4d8; --theme-first-glow: rgba(181,84,63,.18);
  --theme-second-glow: rgba(75,143,109,.28); --theme-second-line: rgba(75,143,109,.28); --theme-second-panel: linear-gradient(145deg,rgba(209,228,207,.86),rgba(255,250,234,.62)); --theme-second-accent: linear-gradient(90deg,#4b8f6d,#9bbd89); --theme-second-shadow: rgba(75,143,109,.24); --theme-second-ink: #3f795c; --theme-second-track: #d7e2d4;
  --theme-grand-glow: rgba(200,162,75,.32); --theme-grand-line: rgba(181,137,47,.34); --theme-grand-panel: linear-gradient(135deg,rgba(244,223,159,.82),rgba(255,249,222,.74) 52%,rgba(220,226,186,.68)); --theme-grand-accent: linear-gradient(#4b8f6d,#c8a24b 55%,#e3c466); --theme-grand-shadow: rgba(200,162,75,.26); --theme-grand-ink: #80621f; --theme-grand-track: #e2dcc0;
  --theme-sparkle: #4b8f6d; --theme-info: linear-gradient(125deg,#d7c86f,#b9c991 52%,#80ad89); --theme-info-ink: #304434; --theme-nav: linear-gradient(110deg,#3f7d5e,#75a57b); --theme-nav-ink: #fffdf5;
}

html.compare-mode body { min-height: 0; }
html.compare-mode .showcase { display: block; width: 100%; min-height: 0; padding: 10px; }
html.compare-mode .story { display: none; }
html.compare-mode .phone-shell { width: 100%; }
html.compare-mode .credit-card:focus,
html.compare-mode .reward:focus,
html.compare-mode .identity:focus,
html.compare-mode .activity:focus { transform: none; }

@supports not (color: color-mix(in srgb, white, black)) {
  html[data-theme] .pastry-info__icon { border-color: rgba(58,47,40,.25); }
}