/* 🎁 MELHORIAS DO GPT (06/10/2026), camadas V04 a V30 na ordem em que ele entregou. Montado por rascunho de bancada:
   esta folha NAO se edita a mao; o que a casa corrige mora no fim, depois da marca CORRECAO DA CASA. */
/* ── V4 · Nocturne Atelier ───────────────────────────────────────────────
   Camada editorial. Mantém todos os ganchos do app e troca a leitura de
   dashboard por uma boutique noturna: fotos maiores, ritmo de revista e
   detalhes metálicos usados como joia. */
:root {
  --s-ink: #100809;
  --s-ink-soft: #1b0e10;
  --s-paper: #fff8ed;
  --s-ruby: #8d1f32;
  --s-ruby-bright: #c13d53;
  --s-gold-hi: #f5d89c;
  --s-space-1: 8px; --s-space-2: 12px; --s-space-3: 18px; --s-space-4: 26px;
  --s-space-5: 40px; --s-space-6: 64px; --s-space-7: 96px;
  --s-radius: 8px;
  --s-radius-sm: 5px;
  --s-shadow: 0 28px 80px -38px rgba(0,0,0,.95);
}

html { background: var(--s-bg); }
body {
  font-size: 15px; line-height: 1.72;
  background:
    radial-gradient(90rem 50rem at 120% -20%, rgba(142,22,34,.20), transparent 58%),
    radial-gradient(60rem 50rem at -22% 65%, rgba(214,178,110,.07), transparent 52%),
    var(--s-bg);
}
body::after {
  content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 99;
  background: linear-gradient(90deg, transparent 0 49.9%, rgba(235,207,147,.025) 50% 50.1%, transparent 50.2%);
  opacity: .65;
}
h1, h2, h3 { letter-spacing: -.028em; }
h1 { font-size: clamp(42px, 6vw, 78px); }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-size: clamp(20px, 2vw, 28px); }
.wrap { width: min(1360px, 100%); padding-bottom: clamp(72px, 10vw, 144px); }
.wrap > h1:first-child, .wrap > .kicker + h1 { max-width: 11ch; }

/* Navegação: uma faixa baixa de hotel, não uma barra de produto. */
.topbar {
  min-height: 78px; padding-block: 13px;
  background: rgba(15, 8, 9, .88); backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 1px 0 rgba(245,216,156,.06), 0 16px 34px -28px #000;
}
.topbar::after { content: ""; position: absolute; inset: auto clamp(16px,4vw,48px) 0; height: 1px; background: linear-gradient(90deg, transparent, var(--s-line-2), transparent); }
.logo .logotipo { width: 150px; filter: drop-shadow(0 4px 16px rgba(214,178,110,.13)); }
.nav { gap: 4px; }
.nav a, .nav button.linklike { padding: 11px 12px; font-size: 10px; }
.nav a::after, .nav button.linklike::after { bottom: 3px; }
.nav a.btn, .btn { min-height: 43px; border-radius: 999px; box-shadow: 0 10px 24px -18px rgba(235,207,147,.85); }
.nav a.btn { padding: 11px 19px; }
.btn {
  position: relative; overflow: hidden; padding: 15px 25px;
  background: linear-gradient(135deg, var(--s-brand-2), var(--s-brand));
  border-color: rgba(255,239,205,.48);
}
.btn::before { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.27) 48%, transparent 67%); transform:translateX(-130%); transition:transform .6s var(--s-ease); }
.btn:hover::before { transform:translateX(130%); }
.btn.hot { background: linear-gradient(135deg, var(--s-ruby-bright), var(--s-accent)); border-color: rgba(255,203,203,.28); }
.btn.ghost { border-color: rgba(235,207,147,.42); background: rgba(255,248,237,.025); }
.btn.ghost:hover { background: rgba(235,207,147,.10); }

/* Utilitários inseridos por JavaScript, sem tocar em links ou formulários existentes. */
.oh-controls { display:inline-flex; align-items:center; gap:6px; margin-inline: 3px; }
.oh-controls select, .oh-theme {
  width:auto; min-height:34px; margin:0; padding:6px 9px; border-radius:999px;
  color:var(--s-muted); background:rgba(255,248,237,.035); border:1px solid var(--s-line);
  font:500 9px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase;
}
.oh-theme { cursor:pointer; color:var(--s-brand-2); }
.oh-theme:hover { border-color:var(--s-brand); color:var(--s-heading); }

/* Grade com respiro; cada criadora vira uma capa de editorial. */
.grid { gap: clamp(14px, 2vw, 28px); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
.mcard { transform: translateZ(0); }
.mcard .cover {
  border-radius: 11px; border-color: rgba(245,216,156,.18);
  box-shadow: 0 20px 38px -30px rgba(0,0,0,.95); isolation:isolate;
  background-image: linear-gradient(150deg, var(--s-wine), var(--s-bg-2) 72%);
}
.mcard .cover::before { content:""; position:absolute; z-index:1; inset:10px; border:1px solid rgba(255,248,237,.17); border-radius:6px; pointer-events:none; opacity:0; transition:opacity .45s var(--s-ease); }
.mcard:hover .cover::before, .mcard:focus-visible .cover::before { opacity:1; }
.mcard .cover::after { z-index:1; background: linear-gradient(180deg, rgba(11,7,6,0) 30%, rgba(11,7,6,.20) 55%, rgba(11,7,6,.98) 100%); }
.mcard .seals { left:18px; top:18px; z-index:3; }
.mcard .legenda { left:23px; right:21px; bottom:20px; z-index:3; }
.mcard .legenda h3 { font-size:clamp(25px,2.2vw,34px); line-height:.92; }
.mcard .legenda .meta { margin-top:8px; color:rgba(243,233,218,.78); font-size:9px; }
.mcard:hover .cover { border-color:rgba(235,207,147,.68); box-shadow:0 32px 48px -32px rgba(0,0,0,.98), 0 0 0 1px rgba(235,207,147,.12); }
.mcard:hover .cover img { transform:scale(1.065); filter:saturate(1.09) contrast(1.03); }

.seal { border-radius:999px; padding:6px 10px; font-size:8.5px; backdrop-filter:blur(8px); }
.seal-ai { background:rgba(19,11,12,.66); border-color:rgba(245,216,156,.68); color:#fff2d8; }
.seal-verified { background:linear-gradient(135deg,var(--s-gold-hi),var(--s-brand)); box-shadow:0 4px 12px -8px var(--s-brand); }
.seal-paid { background:linear-gradient(135deg,var(--s-ruby-bright),var(--s-accent)); }

/* Estrutura editorial. Painéis ganham borda interna e deixam de ser cards SaaS. */
.secao { gap:14px; padding-bottom:18px; margin:0 0 clamp(24px,3vw,38px); border-bottom-color:rgba(214,178,110,.32); }
.secao .num { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--s-line-2); border-radius:50%; font-size:14px; }
.secao .mais { color:var(--s-brand-2); padding-bottom:2px; border-bottom:1px solid currentColor; }
.panel {
  overflow:hidden; border-color:rgba(214,178,110,.20); border-radius:12px;
  background:linear-gradient(145deg, rgba(34,18,19,.84), rgba(18,10,10,.9));
  box-shadow: var(--s-shadow);
}
.panel::before { content:""; position:absolute; pointer-events:none; inset:8px; border:1px solid rgba(235,207,147,.065); border-radius:7px; }
.panel > * { position:relative; }
.stat { padding:26px 25px; }
.stat .n { font-size:clamp(38px,4vw,58px); color:var(--s-brand-2); }
.tabs { gap: 8px; border:0; margin-bottom:38px; }
.tabs a { padding:9px 14px; border:1px solid transparent; border-radius:999px; background:rgba(255,248,237,.025); }
.tabs a.on, .tabs a:hover { border-color:var(--s-line-2); background:rgba(214,178,110,.10); color:var(--s-brand-2); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], select, textarea {
  padding:14px 15px; border-radius:8px; background:rgba(6,3,3,.44); border-color:rgba(214,178,110,.23);
}
input:hover, select:hover, textarea:hover { border-color:rgba(235,207,147,.5); }
input:focus, select:focus, textarea:focus { border-color:var(--s-brand-2); box-shadow:0 0 0 4px rgba(235,207,147,.1); }
label { color:var(--s-brand-2); }
.flash { border-radius:8px; background:rgba(142,22,34,.13); }

/* Home: cenário cheio e um bloco de texto que parece capa de revista. */
.hero { min-height:min(84vh,820px); border-bottom:0; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(11,7,6,.9),transparent 58%); }
.hero .texto { max-width:690px; padding:clamp(25px,4vw,48px); border-left:1px solid rgba(235,207,147,.58); background:linear-gradient(90deg,rgba(11,7,6,.22),transparent); }
.hero h1 { font-size:clamp(54px,8.4vw,108px); text-shadow:0 12px 35px rgba(0,0,0,.45); }
.hero p { font-size:18px; max-width:46ch; }
.faixa { margin:0 0 clamp(60px,8vw,108px); border-top:1px solid var(--s-line); }
.faixa > div { padding:35px 30px 34px 0; }
.faixa .t { font-size:27px; }

/* Perfil e posts: enquadramento de capa de moda. */
.perfil-capa { border-radius:14px 14px 0 0; height:clamp(220px,31vw,460px); border-color:rgba(235,207,147,.22); }
.perfil-cab { margin-top:26px; }
.perfil-cab > .avatar { border:4px solid var(--s-bg); box-shadow:0 0 0 1px var(--s-brand),0 18px 38px -18px #000; }
.perfil-bio { max-width:1140px; }
.posts { gap:8px; }
.post { border-radius:6px; }
.post:hover { box-shadow:0 0 0 1px var(--s-brand); z-index:1; }

/* Moeda: pacotes com sensação de coleção e hierarquia no preço. */
.hc-topo { margin-bottom:42px; }
.hc-saldo-box { background:radial-gradient(90% 130% at 100% 0,rgba(214,178,110,.18),transparent 64%),linear-gradient(145deg,rgba(63,20,27,.78),rgba(17,9,10,.92)); }
.hc-saldo-linha { font-size:clamp(48px,5vw,68px); }
.hc-faixa { border-radius:10px; border-color:rgba(235,207,147,.54); background:linear-gradient(100deg,rgba(142,22,34,.50),rgba(68,24,22,.20)); }
.hc-loja { gap:clamp(12px,1.7vw,22px); }
.hc-pack { min-height:340px; border-radius:13px; padding:30px 18px 18px; border-color:rgba(214,178,110,.2); background:radial-gradient(70% 42% at 50% 15%,rgba(214,178,110,.10),transparent 80%),var(--s-bg-2); box-shadow:0 18px 40px -34px #000; }
.hc-pack:hover { transform:translateY(-7px); box-shadow:0 28px 48px -34px #000,0 0 0 1px rgba(235,207,147,.38); }
.hc-pack.t7 { min-height:340px; background:radial-gradient(56% 90% at 50% 0,rgba(235,207,147,.22),transparent 72%),linear-gradient(145deg,rgba(79,34,25,.88),var(--s-bg-2)); }
.hc-nome { color:var(--s-brand-2); }
.hc-total { font-size:42px; }
.hc-preco { margin-top:12px; }

/* Conversas e backoffice continuam rápidos, mas na mesma família visual. */
.chat { gap:18px; }
.chat .list a { border-radius:8px; border-bottom:0; margin:2px 0; padding:14px 11px; }
.chat .list a.on, .chat .list a:hover { background:linear-gradient(90deg,rgba(142,22,34,.34),rgba(214,178,110,.045)); }
.bubble { border-radius:12px 12px 12px 3px; box-shadow:0 9px 19px -16px #000; }
.bubble.me { border-radius:12px 12px 3px 12px; }
table { border-collapse:separate; border-spacing:0 7px; }
th { border:0; padding-bottom:4px; }
td { border-top:1px solid rgba(214,178,110,.12); border-bottom:1px solid rgba(214,178,110,.12); background:rgba(255,248,237,.018); }
td:first-child { border-left:1px solid rgba(214,178,110,.12); border-radius:6px 0 0 6px; }
td:last-child { border-right:1px solid rgba(214,178,110,.12); border-radius:0 6px 6px 0; }
.foot { border-top-color:rgba(214,178,110,.27); background:linear-gradient(180deg,transparent,rgba(59,12,18,.17)); }

/* Tema claro pronto para o seletor do cabeçalho; contraste de leitura preservado. */
html[data-theme="light"] {
  --s-bg:#fff8ed; --s-bg-2:#fffdf8; --s-bg-3:#f5e9d8; --s-wine:#571522; --s-wine-2:#742435;
  --s-text:#321a1d; --s-heading:#321218; --s-muted:rgba(50,26,29,.68); --s-faint:rgba(50,26,29,.46);
  --s-line:rgba(101,54,35,.20); --s-line-2:rgba(112,67,37,.42); --s-on-brand:#211006;
  --s-shadow:0 26px 55px -35px rgba(72,38,22,.34);
}
html[data-theme="light"] body { background:radial-gradient(70rem 42rem at 105% -5%,rgba(222,186,118,.34),transparent 55%),var(--s-bg); }
html[data-theme="light"] .topbar { background:rgba(255,250,241,.88); }
html[data-theme="light"] .panel, html[data-theme="light"] .hc-pack { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,237,219,.94)); }
html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] input[type=password], html[data-theme="light"] input[type=date], html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=url], html[data-theme="light"] select, html[data-theme="light"] textarea { background:rgba(255,255,255,.75); }
html[data-theme="light"] .mcard .cover::after { background:linear-gradient(180deg,transparent 30%,rgba(34,11,12,.10) 55%,rgba(34,11,12,.92)); }

@media (max-width: 820px) {
  .topbar { min-height:66px; }
  .logo .logotipo { width:124px; }
  .oh-controls { margin:5px 0 3px; order:-1; }
  .oh-controls select { flex:1; }
  .nav.right .oh-controls { width:100%; }
  .hero { min-height:calc(100svh - 66px); padding:28px 18px 42px; }
  .hero .texto { padding:22px 0 22px 18px; }
  .hero h1 { font-size:clamp(52px,16vw,74px); }
  .wrap { padding-inline:18px; }
  .grid.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .mcard .legenda { left:14px; right:12px; bottom:14px; }
  .mcard .legenda h3 { font-size:23px; }
  .mcard .seals { top:10px; left:10px; }
  .seal { padding:5px 7px; font-size:7.4px; letter-spacing:.12em; }
  .tabs { gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; }
  .tabs a { flex:none; }
  .perfil-cab, .perfil-bio { padding-inline:0; }
  .hc-loja { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hc-pack { min-height:292px; padding:24px 10px 12px; }
  .hc-pack.t7 { min-height:286px; }
  .hc-vitrine { height:85px; }
  .hc-total { font-size:31px; }
  .panel { border-radius:10px; }
  .chat { grid-template-columns:1fr; }
}

/* ── V5 · THE HOUSE AFTER DARK ───────────────────────────────────────────
   Reforma agressiva de art direction: a interface deixa de organizar blocos
   e passa a conduzir o olhar como uma publicação de moda noturna. */
body {
  background-color:#090405;
  background-image:
    linear-gradient(115deg, rgba(0,0,0,.48), transparent 30%),
    radial-gradient(72rem 44rem at 104% 8%, rgba(151,33,51,.28), transparent 58%),
    radial-gradient(42rem 34rem at -10% 74%, rgba(214,178,110,.12), transparent 66%),
    linear-gradient(180deg, #13090b 0%, #090405 42%, #100608 100%);
}
body::before { opacity:.075; mix-blend-mode:screen; }
main.wrap { position:relative; }
main.wrap > :first-child { position:relative; }
main.wrap > .kicker:first-child, main.wrap > h1:first-child { z-index:1; }
main.wrap > h1:first-child, .wrap > .kicker + h1 {
  font-size:clamp(52px,7vw,112px); line-height:.84; max-width:10ch; margin-bottom:36px;
  text-wrap:balance;
}
main.wrap > h1:first-child::after, .wrap > .kicker + h1::after {
  content:""; display:block; width:clamp(62px,8vw,126px); height:2px; margin-top:24px;
  background:linear-gradient(90deg,var(--s-brand-2),transparent);
}
.kicker { gap:12px; color:var(--s-gold-hi); text-shadow:0 1px 15px rgba(245,216,156,.20); }
.kicker::before { width:48px; background:linear-gradient(90deg,transparent,var(--s-brand)); }

/* Header vira assinatura discreta, com a navegação em segundo plano. */
.topbar { border-bottom:0; }
.topbar::before { content:"ONLY HOT"; position:absolute; pointer-events:none; left:50%; transform:translateX(-50%); top:8px; color:rgba(235,207,147,.10); font:500 8px/1 var(--font-body); letter-spacing:1.1em; }
.topbar .nav.left, .topbar .nav.right { z-index:1; }
.topbar .nav.left { gap:0; }
.nav a, .nav button.linklike { color:rgba(243,233,218,.71); }
.nav a:hover, .nav button.linklike:hover, .nav a.on { color:#fff6e9; }
.nav a.on::after, .nav a:hover::after, .nav button.linklike:hover::after { box-shadow:0 0 12px var(--s-brand); }

/* Capas: index editorial, frame dourado em movimento e fotos mais vivas. */
.grid.cols-4 { counter-reset: hot-creator; }
.grid.cols-4 .mcard { counter-increment:hot-creator; position:relative; padding-top:17px; }
.grid.cols-4 .mcard::before {
  content:counter(hot-creator, decimal-leading-zero); position:absolute; z-index:4; left:15px; top:0;
  color:var(--s-brand-2); font:italic 500 15px/1 var(--font-display); letter-spacing:.06em;
  text-shadow:0 2px 12px #000;
}
.grid.cols-4 .mcard::after {
  content:""; position:absolute; z-index:3; left:42px; top:7px; width:calc(100% - 55px); height:1px;
  background:linear-gradient(90deg,var(--s-brand),transparent); opacity:.66;
}
.mcard .cover { border-radius:0 18px 0 18px; clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.mcard .cover::before {
  content:""; opacity:1; inset:10px; border-color:rgba(255,241,210,.24); border-radius:0;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 22%,transparent 72%,rgba(214,178,110,.16));
}
.mcard:hover .cover::before { opacity:1; inset:7px; border-color:rgba(245,216,156,.70); }
.mcard .cover img { filter:saturate(.86) contrast(1.08) brightness(.92); }
.mcard:hover .cover img { filter:saturate(1.12) contrast(1.06) brightness(1.02); }
.mcard .legenda { padding-right:10px; }
.mcard .legenda h3 { font-family:'Bodoni Moda',var(--font-display); font-style:italic; font-weight:500; }
.mcard .legenda .meta::before { content:"— "; color:var(--s-brand); }

/* Superfícies ganham assinatura de material, não cartão de dashboard. */
.panel {
  border-radius:0 16px 0 16px; border-top-color:rgba(245,216,156,.38); border-left-color:rgba(245,216,156,.31);
  background:
    linear-gradient(124deg,rgba(255,244,222,.055),transparent 24%),
    linear-gradient(145deg,rgba(63,19,27,.76),rgba(14,7,8,.94) 62%);
}
.panel::after { content:""; position:absolute; pointer-events:none; width:80px; height:1px; right:24px; bottom:20px; background:linear-gradient(90deg,transparent,var(--s-brand)); opacity:.45; }
.panel > h2:first-child { padding-bottom:17px; border-bottom:1px solid rgba(214,178,110,.22); }
.grid.cols-2 > .panel:nth-child(even) { transform:translateY(18px); }
.stat { background:linear-gradient(135deg,rgba(214,178,110,.08),transparent 62%); }
.stat .n { font-family:'Bodoni Moda',var(--font-display); font-style:italic; }
.stat .l { margin-top:9px; color:var(--s-brand-2); }

/* Entrada, cadastro e idade: um pequeno salão, e não formulário solto. */
section.narrow {
  isolation:isolate; padding:clamp(46px,10vh,120px) clamp(24px,6vw,72px)!important;
  background:linear-gradient(135deg,rgba(142,22,34,.32),rgba(12,6,7,.94) 58%); border:1px solid rgba(235,207,147,.25);
  border-radius:0 26px 0 26px; box-shadow:0 42px 82px -52px #000;
}
section.narrow::before { content:"18+"; position:absolute; z-index:-1; left:50%; top:47%; transform:translate(-50%,-50%); color:rgba(235,207,147,.055); font:italic 500 clamp(170px,28vw,360px)/.7 var(--font-display); }
section.narrow h1 { font-size:clamp(54px,7vw,90px); }
section.narrow .btn { min-width:178px; }

/* Home: abre como campanha de moda, com título de alto impacto. */
.hero { min-height:min(90vh,960px); padding-bottom:clamp(54px,10vw,118px); }
.hero::after { content:"SCROLL TO DISCOVER"; position:absolute; right:max(24px,calc(50vw - 650px)); bottom:30px; color:rgba(255,246,233,.58); font:500 9px/1 var(--font-body); letter-spacing:.35em; writing-mode:vertical-rl; }
.hero .texto { border-left:0; padding:0; max-width:760px; background:none; }
.hero .texto > .kicker { padding-left:58px; }
.hero h1 { max-width:8ch; font-family:'Bodoni Moda',var(--font-display); font-style:italic; letter-spacing:-.06em; }
.hero h1 em { font-family:var(--font-display); font-style:normal; color:#fff4df; }
.hero p { border-left:1px solid var(--s-brand); padding-left:20px; max-width:42ch; color:rgba(255,246,233,.80); }
.hero .acoes { margin-top:36px; }
.faixa { position:relative; }
.faixa::before { content:"THE HOUSE OF CREATORS"; position:absolute; left:0; top:-15px; color:rgba(235,207,147,.25); font:500 9px/1 var(--font-body); letter-spacing:.28em; }
.faixa > div { min-height:170px; background:linear-gradient(145deg,rgba(255,248,237,.035),transparent); }
.faixa > div:hover { background:linear-gradient(145deg,rgba(214,178,110,.10),transparent); }

/* Perfil como página de capa: imagem, biografia e exclusividade em camadas. */
.perfil-capa { clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%); border-radius:0; }
.perfil-capa::before { content:"ONLY HOT / PRIVATE EDITION"; position:absolute; z-index:2; top:22px; left:25px; color:rgba(255,248,237,.85); font:500 9px/1 var(--font-body); letter-spacing:.25em; }
.perfil-capa img { filter:saturate(.94) contrast(1.10); }
.perfil-cab { border-bottom:1px solid rgba(214,178,110,.25); padding-bottom:28px; }
.perfil-cab h1 { font-family:'Bodoni Moda',var(--font-display); font-style:italic; font-size:clamp(48px,6vw,90px); }
.perfil-bio .bio { font-size:clamp(23px,2.4vw,33px); line-height:1.34; max-width:27ch; }
.posts { gap:10px; }
.post { clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%); }
.post::after { content:"VIEW"; position:absolute; opacity:0; display:grid; place-items:center; inset:0; color:#fff8ed; background:rgba(68,10,18,.54); font:500 10px/1 var(--font-body); letter-spacing:.25em; transition:opacity .3s var(--s-ease); }
.post:hover::after { opacity:1; }

/* Hot Coins como vitrine de colecionáveis. */
.hc-topo { position:relative; padding:clamp(26px,4vw,52px) 0 30px; border-bottom:1px solid rgba(214,178,110,.22); }
.hc-topo::before { content:"HOT / 100 HC = US$ 1"; position:absolute; top:0; right:0; color:var(--s-brand); font:500 10px/1 var(--font-body); letter-spacing:.2em; }
.hc-saldo-box { border-radius:0 18px 0 18px; }
.hc-saldo-box::after { content:"CURRENT BALANCE"; position:absolute; right:24px; bottom:17px; color:rgba(235,207,147,.38); font:500 8px/1 var(--font-body); letter-spacing:.18em; }
.hc-pack { border-radius:0 18px 0 18px; min-height:360px; }
.hc-pack::before { content:""; position:absolute; inset:7px; border:1px solid rgba(245,216,156,.10); pointer-events:none; }
.hc-pack:hover::before { border-color:rgba(245,216,156,.50); }
.hc-pack.t1 { background:linear-gradient(140deg,rgba(93,27,34,.74),#170b0d 70%); }
.hc-pack.t2 { background:linear-gradient(140deg,rgba(121,38,32,.76),#170b0d 70%); }
.hc-pack.t3 { background:linear-gradient(140deg,rgba(141,52,28,.78),#170b0d 70%); }
.hc-pack.t4 { background:linear-gradient(140deg,rgba(154,45,38,.82),#1b0a0d 70%); }
.hc-pack.t5 { background:linear-gradient(140deg,rgba(108,34,32,.90),#160a0c 70%); }
.hc-pack.t6 { background:linear-gradient(140deg,rgba(134,80,33,.82),#1c100b 70%); }
.hc-pack.t7 { background:linear-gradient(140deg,rgba(163,117,49,.66),rgba(58,17,22,.92) 63%,#13090a); }
.hc-pack.t7 .hc-total { text-shadow:0 0 24px rgba(245,216,156,.42); }
.hc-vitrine { transform:scale(1.10); margin:8px 0; }
.hc-fita { letter-spacing:.25em; }

/* Chat e operação: editorial no primeiro nível; operacional em segundo. */
.chat .list { border-radius:0 15px 0 15px; }
.chat .list a { border-left:2px solid transparent; }
.chat .list a.on, .chat .list a:hover { border-left-color:var(--s-brand); }
.thread { padding:16px 8px; background:linear-gradient(180deg,rgba(255,248,237,.018),transparent); }
.bubble { background:linear-gradient(145deg,rgba(255,248,237,.06),rgba(32,14,17,.82)); }
.bubble.me { background:linear-gradient(145deg,rgba(142,22,34,.72),rgba(72,12,23,.95)); }
table { border-spacing:0 10px; }
td { background:linear-gradient(90deg,rgba(214,178,110,.07),rgba(255,248,237,.018)); }
tr:hover td { background:linear-gradient(90deg,rgba(142,22,34,.25),rgba(255,248,237,.04)); }

@media (max-width:820px) {
  .grid.cols-2 > .panel:nth-child(even) { transform:none; }
  .topbar::before { display:none; }
  .hero::after { right:13px; bottom:18px; font-size:7px; }
  .hero h1 { letter-spacing:-.075em; }
  .grid.cols-4 .mcard { padding-top:12px; }
  .grid.cols-4 .mcard::before { left:9px; font-size:12px; }
  .grid.cols-4 .mcard::after { left:31px; top:5px; width:calc(100% - 39px); }
  .mcard .cover { border-radius:0 11px 0 11px; clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%); }
  section.narrow { border-radius:0 18px 0 18px; }
  .hc-topo::before { position:static; display:block; margin-bottom:20px; }
  .hc-pack { min-height:302px; border-radius:0 12px 0 12px; }
  .hc-vitrine { transform:scale(.95); margin:0; }
  .perfil-capa::before { left:14px; top:14px; font-size:7px; }
}

/* ── V6 · COUTURE RHYTHM ─────────────────────────────────────────────────
   Hierarquia, cadência e profundidade. A estética usa luz, corte e material
   para criar personalidade — sem acrescentar nenhum conteúdo ao produto. */
:root {
  --oh-ivory: #fff3dc;
  --oh-ruby: #ad2641;
  --oh-ember: #e3635c;
  --oh-black: #080304;
  --oh-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%);
}
body { overflow-x:hidden; }
body::after { background-image:radial-gradient(circle at 50% 50%,rgba(255,244,222,.065) 0 1px,transparent 1.4px); background-size:17px 17px; opacity:.14; }
main.wrap::before {
  content:""; position:absolute; width:clamp(280px,42vw,640px); aspect-ratio:1; right:-25vw; top:15vh;
  border:1px solid rgba(235,207,147,.11); border-radius:50%; box-shadow:0 0 0 44px rgba(235,207,147,.022),0 0 0 96px rgba(235,207,147,.012);
  pointer-events:none;
}
main.wrap > section, main.wrap > .grid, main.wrap > .tabs, main.wrap > .hc-topo { position:relative; z-index:1; }

/* Títulos como uma assinatura de capa: cada nível é visualmente inequívoco. */
h1, h2, h3 { text-wrap:balance; }
h1 { text-shadow:0 18px 36px rgba(0,0,0,.28); }
h2 { letter-spacing:-.04em; }
h2 em, h1 em { background:var(--oh-metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
.secao { position:relative; align-items:center; min-height:64px; }
.secao::before { content:""; align-self:stretch; width:2px; background:var(--oh-metal); box-shadow:0 0 16px rgba(235,207,147,.28); }
.secao .num { order:-1; margin-left:-45px; margin-right:4px; background:var(--s-bg); color:var(--s-brand-2); box-shadow:0 0 0 5px var(--s-bg); }
.secao h2 { margin-bottom:0; }
.secao .mais { position:relative; overflow:hidden; padding:10px 0; }
.secao .mais::before { content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--oh-metal); transform:scaleX(.48); transform-origin:left; transition:transform .35s var(--s-ease); }
.secao .mais:hover::before { transform:scaleX(1); }

/* As capas têm relação de profundidade com o cursor, sem virar efeito de template. */
.mcard { perspective:900px; }
.mcard .cover { transition:transform .65s cubic-bezier(.16,.75,.22,1), border-color .4s var(--s-ease), box-shadow .4s var(--s-ease); }
.mcard:hover .cover { transform:translateY(-7px) rotateX(1.5deg); }
.mcard:nth-child(3n + 2) .cover { border-radius:18px 0 18px 0; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%); }
.mcard:nth-child(3n) .cover { border-radius:18px 18px 0 0; clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px)); }
.mcard .cover::after { background:linear-gradient(180deg,transparent 23%,rgba(8,3,4,.08) 46%,rgba(8,3,4,.97) 100%); }
.mcard .seals { filter:drop-shadow(0 5px 10px rgba(0,0,0,.28)); }
.mcard .legenda { transition:transform .45s var(--s-ease); }
.mcard:hover .legenda { transform:translateY(-4px); }
.mcard .legenda h3 { text-shadow:0 6px 16px rgba(0,0,0,.55); }
.mcard .legenda .meta { display:flex; align-items:center; gap:7px; }
.mcard .legenda .meta::after { content:""; height:1px; flex:1; max-width:34px; background:var(--s-brand); opacity:.7; }

/* Botões e chips: laca, metal e estados de interação mais ricos. */
.btn {
  isolation:isolate; letter-spacing:.19em; transform:translateZ(0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 13px 24px -18px rgba(0,0,0,.95);
}
.btn::after { content:""; position:absolute; z-index:-1; inset:1px; border-radius:inherit; border-top:1px solid rgba(255,255,255,.20); pointer-events:none; }
.btn:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 20px 30px -18px rgba(0,0,0,.98); }
.btn:active { transform:translateY(1px); }
.btn.ghost { box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
.seal { box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 6px 13px -10px #000; }
.hc-chip { border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }

/* Campos e tabelas são linhas de atelier, com leitura rápida e acabamento fino. */
label { position:relative; padding-left:12px; }
label::before { content:""; position:absolute; left:0; top:.42em; width:4px; height:4px; border:1px solid var(--s-brand); transform:rotate(45deg); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], select, textarea {
  border-left-color:rgba(235,207,147,.52); box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
input:focus, select:focus, textarea:focus { background:rgba(76,20,29,.28); }
th { color:var(--s-brand-2); }
tbody tr { transition:transform .25s var(--s-ease),filter .25s var(--s-ease); }
tbody tr:hover { transform:translateX(4px); filter:brightness(1.08); }

/* A home sustenta o ritmo entre a campanha e as coleções abaixo. */
.hero { box-shadow:inset 0 -100px 80px -70px var(--oh-black); }
.hero::before { background:linear-gradient(95deg,rgba(8,3,4,.92),rgba(8,3,4,.50) 43%,rgba(8,3,4,.03) 75%); }
.hero .texto { animation:oh-reveal .95s cubic-bezier(.16,.8,.22,1) both; }
.hero h1 { text-shadow:0 18px 55px rgba(0,0,0,.72); }
.hero .acoes .btn:first-child { min-width:196px; }
.faixa > div { position:relative; overflow:hidden; }
.faixa > div::after { content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--oh-metal); transition:width .45s var(--s-ease); }
.faixa > div:hover::after { width:100%; }

/* Módulos de conteúdo e perfis usam uma linguagem de "porta entreaberta". */
.panel:hover { border-color:rgba(245,216,156,.45); }
.panel:hover::after { width:112px; opacity:.85; }
.perfil-cab .acoes .btn:first-child { min-width:156px; }
.perfil-bio { position:relative; }
.perfil-bio::before { content:""; position:absolute; left:0; top:-12px; width:92px; height:1px; background:var(--oh-metal); }
.avatar { box-shadow:inset 0 0 0 2px rgba(255,248,237,.08),0 8px 16px -13px #000; }
.post { transform:translateZ(0); }
.post:hover img { transform:scale(1.08); filter:saturate(1.06); }
.post::after { backdrop-filter:blur(2px); }

/* A loja ganha leitura de coleção: cada pacote é uma peça com peso próprio. */
.hc-loja { align-items:stretch; }
.hc-pack { isolation:isolate; transition:transform .42s cubic-bezier(.16,.75,.22,1),box-shadow .42s var(--s-ease),border-color .42s var(--s-ease); }
.hc-pack .hc-nome { position:relative; padding-bottom:11px; }
.hc-pack .hc-nome::after { content:""; position:absolute; left:50%; bottom:0; width:34px; height:1px; transform:translateX(-50%); background:var(--oh-metal); }
.hc-pack .hc-total { letter-spacing:-.045em; }
.hc-pack .btn { border-radius:7px; }
.hc-pack.t7 { box-shadow:0 28px 55px -33px rgba(235,207,147,.48); }
.hc-pack.t7:hover { box-shadow:0 36px 68px -35px rgba(235,207,147,.60); }
.hc-uso { transition:transform .35s var(--s-ease),border-color .35s var(--s-ease); }
.hc-uso:hover { transform:translateY(-5px); }

/* Conversas: separação sutil de planos para não parecer backoffice. */
.chat > .panel { min-height:460px; }
.chat .list { background:linear-gradient(180deg,rgba(71,19,28,.39),rgba(11,5,6,.82)); }
.chat .list a { position:relative; }
.chat .list a::after { content:""; position:absolute; right:11px; width:5px; height:5px; border:1px solid transparent; transform:rotate(45deg); transition:border-color .25s var(--s-ease); }
.chat .list a:hover::after, .chat .list a.on::after { border-color:var(--s-brand-2); }
.bubble { border-color:rgba(235,207,147,.16); }
.bubble.me { border-color:rgba(235,207,147,.36); }

@keyframes oh-reveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .hero .texto { animation:none; } .mcard:hover .cover,.btn:hover,tbody tr:hover,.hc-uso:hover { transform:none; } }
@media (max-width:820px) {
  main.wrap::before { width:270px; right:-170px; top:9vh; }
  .secao .num { margin-left:0; }
  .secao::before { display:none; }
  .mcard:hover .cover { transform:translateY(-3px); }
  .mcard:nth-child(3n + 2) .cover,.mcard:nth-child(3n) .cover { border-radius:0 11px 0 11px; clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%); }
  .hero .acoes .btn:first-child { min-width:0; }
  .faixa > div { min-height:0; }
  .chat > .panel { min-height:auto; }
}

/* ── V7 · ONLY HOT DESIGN SYSTEM ─────────────────────────────────────────
   Fonte única da pele. Componentes usam intenções (canvas, surface, action)
   em vez de valores soltos: os temas e futuros ajustes são feitos aqui. */
:root {
  /* Color roles · dark */
  --ds-canvas: #090405;
  --ds-canvas-elevated: #13090b;
  --ds-surface: #1b0e10;
  --ds-surface-raised: #291417;
  --ds-surface-input: rgba(6,3,3,.44);
  --ds-text: #f3e9da;
  --ds-text-strong: #fff4df;
  --ds-text-muted: rgba(243,233,218,.66);
  --ds-text-faint: rgba(243,233,218,.42);
  --ds-brand: #d6b26e;
  --ds-brand-strong: #ebcf93;
  --ds-brand-highlight: #f5d89c;
  --ds-accent: #8e1622;
  --ds-accent-strong: #b3202f;
  --ds-positive: #a9c99a;
  --ds-warning: #e2b66b;
  --ds-danger: #e58a80;
  --ds-on-brand: #160d08;
  --ds-line-subtle: rgba(214,178,110,.22);
  --ds-line-default: rgba(214,178,110,.45);
  --ds-line-strong: rgba(245,216,156,.52);

  /* Surface recipes */
  --ds-surface-editorial: linear-gradient(145deg, rgba(63,19,27,.76), rgba(14,7,8,.94) 62%);
  --ds-surface-raised-editorial: linear-gradient(124deg, rgba(255,244,222,.055), transparent 24%), var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg, rgba(255,248,237,.06), rgba(32,14,17,.82));
  --ds-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%);
  --ds-noise-opacity: .075;
  --ds-noise-opacity-subtle: .0615;

  /* Spacing scale */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-space-fluid-1: clamp(14px, 2vw, 28px);
  --ds-space-fluid-2: clamp(24px, 5vw, 56px);
  --ds-space-fluid-3: clamp(72px, 10vw, 144px);

  /* Shape, depth and motion */
  --ds-radius-none: 0;
  --ds-radius-xs: 5px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 26px;
  --ds-radius-round: 999px;
  --ds-border-hairline: 1px solid var(--ds-line-subtle);
  --ds-border-emphasis: 1px solid var(--ds-line-default);
  --ds-shadow-none: none;
  --ds-shadow-float: 0 13px 24px -18px rgba(0,0,0,.95);
  --ds-shadow-card: 0 28px 80px -38px rgba(0,0,0,.95);
  --ds-shadow-lift: 0 36px 68px -35px rgba(0,0,0,.98);
  --ds-shadow-brand: 0 0 24px rgba(245,216,156,.42);
  --ds-blur-sm: blur(2px);
  --ds-blur-md: blur(8px);
  --ds-blur-lg: blur(18px) saturate(135%);
  --ds-duration-fast: 160ms;
  --ds-duration-base: 300ms;
  --ds-duration-slow: 650ms;
  --ds-ease-out: cubic-bezier(.16,.75,.22,1);
  --ds-ease-standard: cubic-bezier(.2,.7,.2,1);

  /* Type scale */
  --ds-font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --ds-font-editorial: 'Bodoni Moda', var(--ds-font-display);
  --ds-font-body: 'Jost', 'Futura', 'Avenir Next', 'Segoe UI', sans-serif;
  --ds-text-caption: 9px;
  --ds-text-label: 10px;
  --ds-text-body: 15px;
  --ds-text-lead: 18px;
  --ds-text-h3: clamp(20px,2vw,28px);
  --ds-text-h2: clamp(30px,3.6vw,48px);
  --ds-text-h1: clamp(52px,7vw,112px);

  /* Layer scale */
  --ds-z-base: 0;
  --ds-z-content: 1;
  --ds-z-raised: 4;
  --ds-z-nav: 20;
  --ds-z-overlay: 60;
  --ds-z-grain: 100;

  /* Compatibility aliases: legacy hooks consume the design system too. */
  --s-bg: var(--ds-canvas);
  --s-bg-2: var(--ds-canvas-elevated);
  --s-bg-3: var(--ds-surface);
  --s-wine: var(--ds-surface-raised);
  --s-wine-2: var(--ds-accent);
  --s-text: var(--ds-text);
  --s-heading: var(--ds-text-strong);
  --s-muted: var(--ds-text-muted);
  --s-faint: var(--ds-text-faint);
  --s-line: var(--ds-line-subtle);
  --s-line-2: var(--ds-line-default);
  --s-brand: var(--ds-brand);
  --s-brand-2: var(--ds-brand-strong);
  --s-accent: var(--ds-accent);
  --s-accent-2: var(--ds-accent-strong);
  --s-on-brand: var(--ds-on-brand);
  --s-radius: var(--ds-radius-sm);
  --s-radius-sm: var(--ds-radius-xs);
  --s-ok: var(--ds-positive);
  --s-warn: var(--ds-warning);
  --s-err: var(--ds-danger);
  --s-shadow: var(--ds-shadow-card);
  --s-ease: var(--ds-ease-standard);
  --font-display: var(--ds-font-display);
  --font-body: var(--ds-font-body);
  --oh-ivory: var(--ds-text-strong);
  --oh-ruby: var(--ds-accent-strong);
  --oh-ember: #e3635c;
  --oh-black: var(--ds-canvas);
  --oh-metal: var(--ds-metal);
}

html[data-theme="light"] {
  --ds-canvas: #fff8ed;
  --ds-canvas-elevated: #fffdf8;
  --ds-surface: #f5e9d8;
  --ds-surface-raised: #fff4e6;
  --ds-surface-input: rgba(255,255,255,.78);
  --ds-text: #321a1d;
  --ds-text-strong: #321218;
  --ds-text-muted: rgba(50,26,29,.68);
  --ds-text-faint: rgba(50,26,29,.46);
  --ds-line-subtle: rgba(101,54,35,.20);
  --ds-line-default: rgba(112,67,37,.42);
  --ds-line-strong: rgba(112,67,37,.56);
  --ds-surface-editorial: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,237,219,.94));
  --ds-surface-raised-editorial: linear-gradient(124deg, rgba(255,255,255,.76), transparent 24%), var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg, rgba(255,255,255,.95), rgba(249,237,219,.88));
  --ds-shadow-card: 0 26px 55px -35px rgba(72,38,22,.34);
  --ds-shadow-lift: 0 28px 45px -30px rgba(72,38,22,.45);
  --s-bg: var(--ds-canvas);
  --s-bg-2: var(--ds-canvas-elevated);
  --s-bg-3: var(--ds-surface);
  --s-wine: var(--ds-surface-raised);
  --s-wine-2: #742435;
  --s-text: var(--ds-text);
  --s-heading: var(--ds-text-strong);
  --s-muted: var(--ds-text-muted);
  --s-faint: var(--ds-text-faint);
  --s-line: var(--ds-line-subtle);
  --s-line-2: var(--ds-line-default);
  --s-brand: var(--ds-brand);
  --s-brand-2: var(--ds-brand-strong);
  --s-accent: var(--ds-accent);
  --s-accent-2: var(--ds-accent-strong);
  --s-on-brand: var(--ds-on-brand);
}

/* Component contracts — the source of truth for shared visual behavior. */
body { color:var(--ds-text); font:300 var(--ds-text-body)/1.72 var(--ds-font-body); }
body::before { z-index:var(--ds-z-grain); opacity:var(--ds-noise-opacity); }
body::after { z-index:var(--ds-z-raised); }
.topbar { z-index:var(--ds-z-nav); backdrop-filter:var(--ds-blur-lg); }
.wrap { padding:var(--ds-space-fluid-2); padding-bottom:var(--ds-space-fluid-3); }
.grid { gap:var(--ds-space-fluid-1); }
.panel { padding:clamp(20px,3vw,var(--ds-space-6)); border:var(--ds-border-hairline); box-shadow:var(--ds-shadow-card); }
.btn { border-radius:var(--ds-radius-round); transition:transform var(--ds-duration-base) var(--ds-ease-out),box-shadow var(--ds-duration-base) var(--ds-ease-standard),background var(--ds-duration-base) var(--ds-ease-standard),border-color var(--ds-duration-base) var(--ds-ease-standard); }
.seal,.hc-chip { border-radius:var(--ds-radius-round); }
.mcard .cover { box-shadow:var(--ds-shadow-card); transition:transform var(--ds-duration-slow) var(--ds-ease-out),border-color var(--ds-duration-base) var(--ds-ease-standard),box-shadow var(--ds-duration-base) var(--ds-ease-standard); }
.post::after { backdrop-filter:var(--ds-blur-sm); }
.hc-pack { box-shadow:var(--ds-shadow-card); transition:transform var(--ds-duration-base) var(--ds-ease-out),box-shadow var(--ds-duration-base) var(--ds-ease-standard),border-color var(--ds-duration-base) var(--ds-ease-standard); }
.hc-estouro { z-index:var(--ds-z-overlay); }
.hero .texto { animation-timing-function:var(--ds-ease-out); }

/* ── V8 · DEPTH ARCHITECTURE ──────────────────────────────────────────────
   Cinco planos explícitos: canvas → superfície → card → elemento elevado →
   overlay. A luz nasce do topo e muda de intensidade a cada plano. */
:root {
  --ds-depth-canvas: linear-gradient(155deg,#120708 0%,#090405 38%,#100507 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(150,28,47,.24),transparent 62%),radial-gradient(42rem 34rem at 0 78%,rgba(214,178,110,.11),transparent 65%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,245,226,.055) 0%,rgba(255,245,226,.012) 17%,transparent 42%),linear-gradient(160deg,#1d0e11 0%,#110708 100%);
  --ds-depth-card: linear-gradient(145deg,rgba(255,245,226,.085) 0%,rgba(255,245,226,.018) 18%,transparent 40%),linear-gradient(160deg,#281215 0%,#17090c 100%);
  --ds-depth-elevated: linear-gradient(145deg,rgba(255,245,226,.13) 0%,rgba(255,245,226,.025) 22%,transparent 44%),linear-gradient(160deg,#341419 0%,#1a090c 100%);
  --ds-depth-overlay: linear-gradient(155deg,rgba(53,12,20,.96),rgba(10,4,5,.98));
  --ds-highlight-top: inset 0 1px 0 rgba(255,248,237,.15);
  --ds-highlight-edge: inset 1px 0 0 rgba(255,248,237,.055),inset -1px 0 0 rgba(0,0,0,.22);
  --ds-shadow-surface: 0 18px 45px -35px rgba(0,0,0,.88),0 1px 0 rgba(255,248,237,.035);
  --ds-shadow-card-deep: 0 34px 70px -44px rgba(0,0,0,.98),0 12px 18px -18px rgba(0,0,0,.72),0 1px 0 rgba(255,248,237,.06);
  --ds-shadow-elevated: 0 28px 60px -36px rgba(0,0,0,.98),0 8px 20px -14px rgba(0,0,0,.86),0 0 0 1px rgba(245,216,156,.12);
  --ds-shadow-overlay: 0 48px 120px -45px #000,0 0 0 1px rgba(245,216,156,.20);
  --ds-glow-brand: 0 0 34px -11px rgba(235,207,147,.52);
  --ds-glow-accent: 0 0 46px -16px rgba(179,32,47,.62);
  --ds-overlay-scrim: rgba(5,2,3,.78);
}

html[data-theme="light"] {
  --ds-depth-canvas: linear-gradient(155deg,#fffaf2 0%,#fff7ea 42%,#f5e9d8 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(214,178,110,.30),transparent 62%),radial-gradient(42rem 34rem at 0 78%,rgba(142,22,34,.08),transparent 65%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.52) 22%,transparent 50%),linear-gradient(160deg,#fffdf8,#f9eddf);
  --ds-depth-card: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.68) 25%,transparent 54%),linear-gradient(160deg,#fffdfb,#f5e6d3);
  --ds-depth-elevated: linear-gradient(145deg,#fff 0%,rgba(255,255,255,.68) 28%,transparent 54%),linear-gradient(160deg,#fffdf9,#f1dfc9);
  --ds-depth-overlay: linear-gradient(155deg,rgba(255,252,246,.98),rgba(246,232,213,.99));
  --ds-highlight-top: inset 0 1px 0 rgba(255,255,255,.95);
  --ds-highlight-edge: inset 1px 0 0 rgba(255,255,255,.82),inset -1px 0 0 rgba(80,45,30,.08);
  --ds-shadow-surface: 0 18px 45px -35px rgba(72,38,22,.30),0 1px 0 rgba(255,255,255,.9);
  --ds-shadow-card-deep: 0 28px 58px -40px rgba(72,38,22,.34),0 9px 14px -16px rgba(72,38,22,.22),0 1px 0 #fff;
  --ds-shadow-elevated: 0 24px 48px -30px rgba(72,38,22,.38),0 7px 16px -14px rgba(72,38,22,.22),0 0 0 1px rgba(137,92,46,.14);
  --ds-shadow-overlay: 0 42px 96px -42px rgba(72,38,22,.42),0 0 0 1px rgba(137,92,46,.18);
  --ds-glow-brand: 0 0 32px -12px rgba(179,126,52,.32);
  --ds-glow-accent: 0 0 42px -18px rgba(179,32,47,.34);
  --ds-overlay-scrim: rgba(61,32,23,.48);
}

/* Level 0 — ambient canvas */
html,body { background:var(--ds-depth-canvas); }
body { background-image:var(--ds-depth-canvas-light),var(--ds-depth-canvas); }
body::before { opacity:var(--ds-noise-opacity-subtle); }
main.wrap::before { box-shadow:0 0 0 var(--ds-space-7) rgba(235,207,147,.018),0 0 0 calc(var(--ds-space-9) + var(--ds-space-2)) rgba(235,207,147,.008); }

/* Level 1 — persistent surfaces */
.topbar {
  background:linear-gradient(180deg,rgba(24,10,12,.94),rgba(12,5,7,.86));
  box-shadow:var(--ds-highlight-top),0 1px 0 rgba(245,216,156,.12),0 18px 38px -30px rgba(0,0,0,.88);
}
html[data-theme="light"] .topbar { background:linear-gradient(180deg,rgba(255,253,248,.94),rgba(255,248,237,.86)); }
.foot { background:var(--ds-depth-surface); box-shadow:inset 0 1px 0 rgba(245,216,156,.10); }
.tabs { position:relative; }
.tabs::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--ds-line-default),transparent 78%); }

/* Level 2 — cards and working surfaces */
.panel {
  background:var(--ds-depth-surface); border-color:var(--ds-line-subtle);
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-surface);
}
.panel::before { border-color:rgba(245,216,156,.075); }
.panel:hover { background:var(--ds-depth-card); box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-card-deep); }
.hc-pack, .mcard .cover {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-card-deep);
  border-color:var(--ds-line-subtle);
}
.hc-pack:hover, .mcard:hover .cover {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-elevated),var(--ds-glow-brand);
  border-color:var(--ds-line-strong);
}
.chat .list { box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-surface); }
.chat .list a { background:transparent; }
.chat .list a:hover,.chat .list a.on { box-shadow:inset 0 1px 0 rgba(255,248,237,.065),0 9px 20px -21px #000; }
td { box-shadow:inset 0 1px 0 rgba(255,248,237,.025),inset 0 -1px 0 rgba(0,0,0,.18); }

/* Level 3 — controls and featured elements */
.btn,.hc-chip,.seal-verified,.seal-paid {
  box-shadow:var(--ds-highlight-top),0 10px 22px -17px rgba(0,0,0,.94);
}
.btn:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),var(--ds-glow-brand); }
.btn.hot:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),var(--ds-glow-accent); }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea {
  background:var(--ds-surface-input); box-shadow:inset 0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,248,237,.035);
}
html[data-theme="light"] input[type=text],html[data-theme="light"] input[type=email],html[data-theme="light"] input[type=password],html[data-theme="light"] input[type=date],html[data-theme="light"] input[type=number],html[data-theme="light"] input[type=url],html[data-theme="light"] select,html[data-theme="light"] textarea { background:var(--ds-surface-input); }
input:focus,select:focus,textarea:focus { box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 4px rgba(235,207,147,.13),var(--ds-glow-brand); }
.hc-saldo-box,.hc-pack.t7 { background:var(--ds-depth-elevated); box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-elevated),var(--ds-glow-brand); }
.perfil-cab > .avatar { box-shadow:0 0 0 1px var(--ds-brand),0 0 0 6px var(--s-bg),var(--ds-shadow-elevated); }

/* Level 4 — immersive media and overlays */
.hero { box-shadow:inset 0 1px 0 rgba(255,248,237,.08),inset 0 -170px 110px -100px var(--ds-canvas),0 28px 60px -50px #000; }
.hero::before { background:linear-gradient(95deg,var(--ds-overlay-scrim),rgba(8,3,4,.47) 45%,rgba(8,3,4,.02) 76%); }
.post.locked { background:var(--ds-depth-overlay); box-shadow:inset 0 1px 0 rgba(255,248,237,.11),inset 0 0 0 1px rgba(245,216,156,.08); }
.post::after { background:var(--ds-overlay-scrim); }
.hc-modal { background:var(--ds-depth-overlay); box-shadow:var(--ds-shadow-overlay),var(--ds-glow-brand); border-color:var(--ds-line-strong); }
.hc-modal::backdrop { background:var(--ds-overlay-scrim); backdrop-filter:blur(var(--ds-space-2)); }
.hc-estouro { background:radial-gradient(circle,rgba(235,207,147,.07),transparent 34%); }

@media (max-width:820px) {
  .topbar { box-shadow:var(--ds-highlight-top),0 1px 0 rgba(245,216,156,.12),0 12px 28px -24px rgba(0,0,0,.88); }
  .panel,.hc-pack,.mcard .cover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-surface); }
  .hc-pack:hover,.mcard:hover .cover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-card-deep); }
}

/* ── V9 · NATURAL ELEVATION ───────────────────────────────────────────────
   Sombras em três partes: contato (próximo), penumbra (média) e ambiente
   (difusa). Sem halo preto genérico; cada altura tem uma assinatura própria. */
:root {
  --ds-shadow-contact-1: 0 1px 1px rgba(0,0,0,.30);
  --ds-shadow-contact-2: 0 2px 3px rgba(0,0,0,.23);
  --ds-shadow-ambient-1: 0 11px 24px -21px rgba(0,0,0,.58);
  --ds-shadow-ambient-2: 0 18px 42px -31px rgba(0,0,0,.65);
  --ds-shadow-ambient-3: 0 30px 70px -46px rgba(0,0,0,.74);
  --ds-shadow-tint-gold: 0 14px 31px -27px rgba(214,178,110,.30);
  --ds-shadow-tint-ruby: 0 17px 36px -30px rgba(142,22,34,.36);
  --ds-shadow-flat: var(--ds-shadow-contact-1),var(--ds-shadow-ambient-1);
  --ds-shadow-resting: var(--ds-shadow-contact-1),var(--ds-shadow-contact-2),var(--ds-shadow-ambient-1);
  --ds-shadow-raised-natural: var(--ds-shadow-contact-2),0 7px 12px -11px rgba(0,0,0,.36),var(--ds-shadow-ambient-2);
  --ds-shadow-floating-natural: var(--ds-shadow-contact-2),0 10px 19px -16px rgba(0,0,0,.42),var(--ds-shadow-ambient-3);
  --ds-shadow-overlay-natural: 0 3px 6px rgba(0,0,0,.28),0 21px 42px -24px rgba(0,0,0,.56),0 50px 100px -56px rgba(0,0,0,.78);
  --ds-shadow-focus-natural: 0 0 0 4px rgba(235,207,147,.11),var(--ds-shadow-tint-gold);
  --ds-shadow-surface: var(--ds-shadow-flat);
  --ds-shadow-card-deep: var(--ds-shadow-resting);
  --ds-shadow-elevated: var(--ds-shadow-raised-natural);
  --ds-shadow-overlay: var(--ds-shadow-overlay-natural);
  --ds-glow-brand: var(--ds-shadow-tint-gold);
  --ds-glow-accent: var(--ds-shadow-tint-ruby);
}

html[data-theme="light"] {
  --ds-shadow-contact-1: 0 1px 1px rgba(72,38,22,.08);
  --ds-shadow-contact-2: 0 2px 3px rgba(72,38,22,.07);
  --ds-shadow-ambient-1: 0 11px 24px -21px rgba(72,38,22,.19);
  --ds-shadow-ambient-2: 0 18px 42px -31px rgba(72,38,22,.23);
  --ds-shadow-ambient-3: 0 30px 70px -46px rgba(72,38,22,.28);
  --ds-shadow-tint-gold: 0 14px 31px -27px rgba(179,126,52,.22);
  --ds-shadow-tint-ruby: 0 17px 36px -30px rgba(142,22,34,.20);
}

/* The page and persistent shell stay close to their plane. */
.topbar { box-shadow:var(--ds-highlight-top),0 1px 0 rgba(245,216,156,.12),var(--ds-shadow-contact-1),0 12px 27px -25px rgba(0,0,0,.44); }
.foot { box-shadow:inset 0 1px 0 rgba(245,216,156,.10),0 -1px 0 rgba(0,0,0,.08); }
.hero { box-shadow:inset 0 1px 0 rgba(255,248,237,.08),inset 0 -118px 90px -76px var(--ds-canvas),0 18px 34px -35px rgba(0,0,0,.54); }

/* Resting surfaces get contact plus a short environmental falloff. */
.panel,.chat .list {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-resting);
}
.panel:hover { box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-raised-natural); }
td { box-shadow:inset 0 1px 0 rgba(255,248,237,.025),inset 0 -1px 0 rgba(0,0,0,.14); }
tbody tr:hover td { box-shadow:inset 0 1px 0 rgba(255,248,237,.055),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 13px -16px rgba(0,0,0,.40); }

/* Content cards lift more, but their softest shadow is intentionally tinted. */
.mcard .cover,.hc-pack {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-resting),var(--ds-shadow-tint-ruby);
}
.mcard:hover .cover,.hc-pack:hover {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-gold);
}
.hc-pack.t7,.hc-saldo-box {
  box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-gold);
}
.hc-pack.t7:hover { box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-floating-natural),var(--ds-shadow-tint-gold); }

/* Controls only cast contact until interaction gives them altitude. */
.btn,.hc-chip,.seal-verified,.seal-paid { box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--ds-shadow-contact-2),0 7px 13px -13px rgba(0,0,0,.58); }
.btn:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-gold); }
.btn.hot:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-ruby); }
.avatar { box-shadow:inset 0 0 0 2px rgba(255,248,237,.08),var(--ds-shadow-contact-2),0 8px 15px -14px rgba(0,0,0,.62); }
.perfil-cab > .avatar { box-shadow:0 0 0 1px var(--ds-brand),0 0 0 6px var(--s-bg),var(--ds-shadow-raised-natural); }
input:focus,select:focus,textarea:focus { box-shadow:inset 0 2px 5px rgba(0,0,0,.16),var(--ds-shadow-focus-natural); }

/* Overlays are the sole plane allowed a long diffuse falloff. */
.hc-modal { box-shadow:var(--ds-shadow-overlay-natural),var(--ds-shadow-tint-gold); }
.post.locked { box-shadow:inset 0 1px 0 rgba(255,248,237,.10),inset 0 0 0 1px rgba(245,216,156,.08),var(--ds-shadow-contact-1); }
.bubble { box-shadow:var(--ds-shadow-contact-1),0 8px 15px -15px rgba(0,0,0,.46); }
.bubble.me { box-shadow:var(--ds-shadow-contact-2),0 10px 18px -16px rgba(70,12,24,.56); }

@media (max-width:820px) {
  .topbar { box-shadow:var(--ds-highlight-top),0 1px 0 rgba(245,216,156,.12),0 9px 18px -18px rgba(0,0,0,.38); }
  .panel,.chat .list,.mcard .cover,.hc-pack { box-shadow:var(--ds-highlight-top),var(--ds-shadow-flat); }
  .mcard:hover .cover,.hc-pack:hover,.panel:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-resting); }
}

/* ── V10 · AMBIENT CANVAS ─────────────────────────────────────────────────
   Fundo vivo, mas quase silencioso: luzes localizadas, textura de filme e
   superfícies que herdam discretamente o ambiente ao redor. */
:root {
  --ds-bg-glow-ruby: radial-gradient(48rem 36rem at 102% -8%,rgba(143,29,48,.25),transparent 66%);
  --ds-bg-glow-gold: radial-gradient(34rem 29rem at -10% 77%,rgba(214,178,110,.10),transparent 70%);
  --ds-bg-glow-center: radial-gradient(42rem 28rem at 50% 36%,rgba(104,28,38,.075),transparent 72%);
  --ds-bg-thread: linear-gradient(112deg,transparent 0 46%,rgba(245,216,156,.025) 50%,transparent 54%);
  --ds-bg-speckle: radial-gradient(circle at 20% 30%,rgba(255,248,237,.050) 0 1px,transparent 1.3px);
  --ds-bg-vignette: radial-gradient(ellipse at center,transparent 44%,rgba(0,0,0,.22) 100%);
  --ds-surface-light-top: linear-gradient(180deg,rgba(255,248,237,.055),transparent 26%);
  --ds-surface-light-side: linear-gradient(98deg,rgba(255,248,237,.032),transparent 28%,transparent 74%,rgba(142,22,34,.065));
  --ds-texture-opacity: .16;
}

html[data-theme="light"] {
  --ds-bg-glow-ruby: radial-gradient(48rem 36rem at 102% -8%,rgba(142,22,34,.105),transparent 66%);
  --ds-bg-glow-gold: radial-gradient(34rem 29rem at -10% 77%,rgba(214,178,110,.20),transparent 70%);
  --ds-bg-glow-center: radial-gradient(42rem 28rem at 50% 36%,rgba(214,178,110,.10),transparent 72%);
  --ds-bg-thread: linear-gradient(112deg,transparent 0 46%,rgba(137,92,46,.045) 50%,transparent 54%);
  --ds-bg-speckle: radial-gradient(circle at 20% 30%,rgba(91,53,35,.06) 0 1px,transparent 1.3px);
  --ds-bg-vignette: radial-gradient(ellipse at center,transparent 46%,rgba(108,66,36,.07) 100%);
  --ds-surface-light-top: linear-gradient(180deg,rgba(255,255,255,.78),transparent 28%);
  --ds-surface-light-side: linear-gradient(98deg,rgba(255,255,255,.42),transparent 28%,transparent 74%,rgba(214,178,110,.07));
}

html { background:var(--ds-canvas); }
body {
  background-image:var(--ds-bg-thread),var(--ds-bg-glow-ruby),var(--ds-bg-glow-gold),var(--ds-bg-glow-center),var(--ds-depth-canvas);
  background-attachment:fixed;
}
body::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity:var(--ds-noise-opacity-subtle); mix-blend-mode:soft-light;
}
body::after {
  background-image:var(--ds-bg-speckle); background-size:29px 29px;
  opacity:var(--ds-texture-opacity); mix-blend-mode:soft-light;
}
main.wrap::before {
  border-color:rgba(235,207,147,.09);
  background:radial-gradient(circle at 50% 50%,rgba(235,207,147,.035),transparent 58%);
}
main.wrap::after {
  content:""; position:absolute; z-index:var(--ds-z-base); pointer-events:none;
  width:min(78vw,980px); height:clamp(230px,35vw,480px); left:50%; top:clamp(220px,24vw,390px); transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0,rgba(142,22,34,.095),transparent 66%);
  filter:blur(2px);
}

/* Surface variation is deliberately low-contrast so content always wins. */
.panel { background-image:var(--ds-surface-light-top),var(--ds-surface-light-side),var(--ds-depth-surface); }
.panel:nth-child(even),.grid > .panel:nth-child(even) { background-image:var(--ds-surface-light-top),linear-gradient(98deg,rgba(142,22,34,.07),transparent 34%,transparent 74%,rgba(235,207,147,.038)),var(--ds-depth-surface); }
.hc-pack { background-image:var(--ds-surface-light-top),var(--ds-depth-card); }
.hc-pack:nth-child(even) { background-image:var(--ds-surface-light-top),linear-gradient(145deg,rgba(142,22,34,.12),transparent 46%),var(--ds-depth-card); }
.chat .list { background-image:var(--ds-surface-light-top),linear-gradient(180deg,rgba(71,19,28,.39),rgba(11,5,6,.82)); }
.hero { background-blend-mode:normal,normal,normal; }
.hero::after { text-shadow:0 1px 8px rgba(0,0,0,.72); }

@media (max-width:820px) {
  body { background-attachment:scroll; }
  body::after { background-size:33px 33px; opacity:.10; }
  main.wrap::after { width:110vw; left:44%; top:190px; opacity:.72; }
}

/* ── V11 · TYPOGRAPHIC HIERARCHY ──────────────────────────────────────────
   Escala editorial com papéis claros: display para desejo, títulos para
   orientação, corpo para leitura, labels para navegação e captions para meta. */
:root {
  --ds-weight-light: 300;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-leading-display: .88;
  --ds-leading-title: 1.02;
  --ds-leading-subtitle: 1.18;
  --ds-leading-body: 1.68;
  --ds-leading-compact: 1.35;
  --ds-tracking-display: -.055em;
  --ds-tracking-title: -.032em;
  --ds-tracking-body: 0;
  --ds-tracking-label: .18em;
  --ds-tracking-caption: .12em;
  --ds-type-display-xl: clamp(4.25rem, 9.4vw, 8.75rem);
  --ds-type-display-lg: clamp(3.35rem, 7vw, 6.75rem);
  --ds-type-display-md: clamp(2.65rem, 5vw, 4.8rem);
  --ds-type-h2: clamp(2rem, 3.3vw, 3.15rem);
  --ds-type-h3: clamp(1.35rem, 2vw, 1.78rem);
  --ds-type-lead: clamp(1.05rem, 1.2vw, 1.22rem);
  --ds-type-body: 1rem;
  --ds-type-small: .875rem;
  --ds-type-caption: .69rem;
  --ds-type-label: .625rem;
  --ds-measure-tight: 26ch;
  --ds-measure-reading: 64ch;
  --ds-measure-wide: 74ch;
}

body {
  font-family:var(--ds-font-body); font-weight:var(--ds-weight-light);
  font-size:var(--ds-type-body); line-height:var(--ds-leading-body); letter-spacing:var(--ds-tracking-body);
  text-rendering:optimizeLegibility;
}
p { max-width:var(--ds-measure-reading); margin-block:0 var(--ds-space-4); }
p + p { margin-top:calc(var(--ds-space-2) * -1); }
strong { font-weight:var(--ds-weight-medium); color:var(--ds-text-strong); }
small,.small { font-size:var(--ds-type-small); line-height:var(--ds-leading-compact); }

/* Display and headings */
h1,h2,h3 {
  color:var(--ds-text-strong); font-family:var(--ds-font-display); font-weight:var(--ds-weight-medium);
  text-wrap:balance; hyphens:auto;
}
h1 { font-size:var(--ds-type-display-md); line-height:var(--ds-leading-display); letter-spacing:var(--ds-tracking-display); }
h2 { font-size:var(--ds-type-h2); line-height:var(--ds-leading-title); letter-spacing:var(--ds-tracking-title); }
h3 { font-size:var(--ds-type-h3); line-height:var(--ds-leading-subtitle); letter-spacing:-.018em; }
main.wrap > h1:first-child,.wrap > .kicker + h1 { font-size:var(--ds-type-display-lg); max-width:var(--ds-measure-tight); }
.hero h1 { font-family:var(--ds-font-editorial); font-size:var(--ds-type-display-xl); line-height:.80; letter-spacing:-.07em; }
.perfil-cab h1 { font-family:var(--ds-font-editorial); font-size:var(--ds-type-display-lg); line-height:.84; letter-spacing:-.06em; }
.mcard .legenda h3 { font-size:clamp(1.55rem,2.2vw,2.13rem); line-height:.92; letter-spacing:-.04em; }
.hc-total,.hc-saldo-linha,.stat .n { font-family:var(--ds-font-editorial); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.045em; }

/* Reading styles */
.hero p,.hc-lede { font-size:var(--ds-type-lead); line-height:1.58; max-width:48ch; }
.perfil-bio .bio { font-size:clamp(1.42rem,2.4vw,2.08rem); line-height:1.40; max-width:var(--ds-measure-tight); }
.panel > p:not(.small),.flash,.bubble { font-size:var(--ds-type-small); line-height:1.58; }
.foot p { max-width:42ch; font-size:var(--ds-type-small); line-height:1.62; }

/* Labels and metadata never compete with reading copy. */
.kicker,label,th,.seal,.btn,.nav a,.nav button.linklike,.tabs a,.hc-nome,.hc-saldo-rot,.stat .l {
  font-family:var(--ds-font-body); font-weight:var(--ds-weight-medium); text-transform:uppercase;
  letter-spacing:var(--ds-tracking-label); line-height:1.2;
}
.kicker { font-size:var(--ds-type-label); }
label,th,.stat .l,.hc-saldo-rot { font-size:var(--ds-type-label); }
.nav a,.nav button.linklike,.tabs a,.btn { font-size:var(--ds-type-label); }
.seal { font-size:calc(var(--ds-type-caption) - .02rem); letter-spacing:var(--ds-tracking-caption); }
.mcard .legenda .meta,.hc-nome,.hc-fita { font-size:var(--ds-type-caption); letter-spacing:var(--ds-tracking-caption); }
.muted { font-weight:var(--ds-weight-regular); }

/* Inputs, tables and messages use numbers that scan cleanly. */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea {
  font-family:var(--ds-font-body); font-size:var(--ds-type-small); font-weight:var(--ds-weight-regular); line-height:var(--ds-leading-compact); letter-spacing:0;
}
table { font-size:var(--ds-type-small); line-height:var(--ds-leading-compact); }
td { font-variant-numeric:tabular-nums; }
.bubble .meta,.small time,time[data-local] { font-size:var(--ds-type-caption); letter-spacing:.02em; }

/* Clamp down only where space is deliberately compact. */
@media (max-width:820px) {
  :root {
    --ds-type-display-xl: clamp(3.6rem,16vw,4.8rem);
    --ds-type-display-lg: clamp(3rem,13vw,4.25rem);
    --ds-type-display-md: clamp(2.5rem,11vw,3.65rem);
    --ds-type-h2: clamp(1.78rem,8vw,2.35rem);
    --ds-type-h3: 1.35rem;
    --ds-type-body: .97rem;
  }
  .hero p,.hc-lede { font-size:1rem; }
  .mcard .legenda h3 { font-size:1.38rem; }
  .perfil-bio .bio { font-size:1.35rem; }
}

/* ── V12 · VISUAL PRIORITY MAP ───────────────────────────────────────────
   Ordem de leitura declarada em toda viewport: P1 promessa/decisão, P2
   contexto/ação, P3 navegação e meta. Espaço e contraste fazem o trabalho. */
:root {
  --ds-priority-1: var(--ds-text-strong);
  --ds-priority-2: var(--ds-brand-strong);
  --ds-priority-3: var(--ds-text-muted);
  --ds-priority-4: var(--ds-text-faint);
  --ds-emphasis-line: var(--ds-metal);
  --ds-space-section: clamp(68px, 10vw, 148px);
  --ds-space-section-tight: clamp(34px, 5vw, 72px);
  --ds-content-focus: min(760px, 100%);
}

/* P3 — chrome stays quiet until it is needed. */
.topbar .nav a,.topbar .nav button.linklike { color:var(--ds-priority-3); }
.topbar .nav a:not(.btn):hover,.topbar .nav a.on,.topbar .nav button.linklike:hover { color:var(--ds-priority-1); }
.topbar .nav.right > :not(.oh-controls) { opacity:.88; }
.topbar .nav.right > :not(.oh-controls):hover { opacity:1; }
.oh-controls { opacity:.72; transition:opacity var(--ds-duration-fast) var(--ds-ease-standard); }
.oh-controls:focus-within,.oh-controls:hover { opacity:1; }

/* P1 — the page's first message becomes the dominant visual anchor. */
main.wrap > .kicker:first-child { margin-bottom:var(--ds-space-4); }
main.wrap > .kicker + h1,main.wrap > h1:first-child {
  position:relative; z-index:var(--ds-z-content); color:var(--ds-priority-1);
  margin-bottom:var(--ds-space-6);
}
main.wrap > .kicker + h1::before,main.wrap > h1:first-child::before {
  content:""; position:absolute; width:clamp(70px,10vw,150px); height:2px; left:0; top:calc(100% + var(--ds-space-4));
  background:var(--ds-emphasis-line);
}
main.wrap > .tabs { margin-top:calc(var(--ds-space-6) + var(--ds-space-2)); margin-bottom:var(--ds-space-7); }
.tabs a { color:var(--ds-priority-4); }
.tabs a.on { color:var(--ds-priority-1); }
.tabs a:not(.on):hover { color:var(--ds-priority-2); }

/* P1 / P2 — the hero has a deliberate, staged reading path. */
.hero .texto { display:grid; justify-items:start; }
.hero .texto .kicker { order:0; color:var(--ds-priority-2); }
.hero h1 { order:1; color:var(--ds-priority-1); margin-top:var(--ds-space-3); }
.hero p { order:2; color:rgba(255,246,233,.82); margin-top:var(--ds-space-5); }
.hero .acoes { order:3; margin-top:var(--ds-space-6); }
.hero .acoes .btn:first-child { position:relative; z-index:var(--ds-z-content); }
.hero .acoes .btn.ghost { color:var(--ds-priority-3); }
.hero .acoes .btn.ghost:hover { color:var(--ds-priority-1); }
.hero .texto::before { content:""; position:absolute; width:min(58vw,700px); height:1px; left:0; bottom:calc(var(--ds-space-6) * -1); background:linear-gradient(90deg,var(--ds-brand),transparent); opacity:.72; }

/* P1 — profile name and shop balance own their frames; support content recedes. */
.perfil-cab { align-items:center; }
.perfil-cab h1 { color:var(--ds-priority-1); }
.perfil-cab .muted,.perfil-cab .small { color:var(--ds-priority-3); }
.perfil-cab .acoes { position:relative; z-index:var(--ds-z-content); }
.hc-topo > div:first-child h1 { color:var(--ds-priority-1); }
.hc-lede { color:var(--ds-priority-3); }
.hc-saldo-box { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.hc-saldo-linha { color:var(--ds-priority-2); }

/* Repeated sections: heading / collection / auxiliary action always resolve in this order. */
section { scroll-margin-top:calc(var(--ds-space-8) + var(--ds-space-4)); }
.wrap > section + section { margin-top:var(--ds-space-section); }
.wrap > .faixa + section { margin-top:var(--ds-space-section-tight); }
.secao { margin-bottom:var(--ds-space-6); }
.secao h2 { color:var(--ds-priority-1); }
.secao .num { color:var(--ds-priority-2); }
.secao .mais { color:var(--ds-priority-3); }
.secao .mais:hover { color:var(--ds-priority-1); }
.grid + .secao { margin-top:var(--ds-space-section); }

/* Cards: image/name lead, badge explains, count only supports. */
.mcard .seals { z-index:var(--ds-z-raised); }
.mcard .legenda h3 { color:var(--ds-priority-1); }
.mcard .legenda .meta { color:var(--ds-priority-3); opacity:.88; }
.mcard:hover .legenda .meta { color:var(--ds-priority-2); opacity:1; }
.seal { color:var(--ds-priority-2); }
.seal-verified { color:var(--ds-on-brand); }
.seal-paid { color:#fff5ec; }

/* Inside working screens, decisions hold contrast; supporting data remains quiet. */
.panel > h2:first-child,.panel > h3:first-child { color:var(--ds-priority-1); }
.panel > p:not(.small),.panel .muted { color:var(--ds-priority-3); }
.stat .n { color:var(--ds-priority-1); }
.stat .l { color:var(--ds-priority-3); }
.chat .list a { color:var(--ds-priority-3); }
.chat .list a.on,.chat .list a:hover { color:var(--ds-priority-1); }
.bubble.me { color:#fff8ee; }
th { color:var(--ds-priority-4); }
td { color:var(--ds-priority-3); }
tbody tr:hover td { color:var(--ds-priority-1); }

/* P1 actions are unmistakable; secondary choices intentionally step back. */
.btn.ghost { color:var(--ds-priority-3); }
.btn.ghost:hover { color:var(--ds-priority-1); }
.btn.block { min-height:48px; }
.hc-pack .hc-total { color:var(--ds-priority-1); }
.hc-pack .hc-detalhe { color:var(--ds-priority-3); }
.hc-pack .hc-preco { margin-top:var(--ds-space-3); }

@media (max-width:820px) {
  :root { --ds-space-section: clamp(52px,16vw,84px); --ds-space-section-tight: var(--ds-space-6); }
  .topbar .nav.right > :not(.oh-controls) { opacity:1; }
  main.wrap > .kicker + h1,main.wrap > h1:first-child { margin-bottom:var(--ds-space-5); }
  main.wrap > .tabs { margin-top:var(--ds-space-6); margin-bottom:var(--ds-space-6); }
  .hero p { margin-top:var(--ds-space-4); }
  .hero .acoes { margin-top:var(--ds-space-5); width:100%; }
  .hero .acoes .btn:first-child { flex:1 1 180px; }
  .hero .texto::before { width:42vw; bottom:calc(var(--ds-space-5) * -1); }
  .perfil-cab { gap:var(--ds-space-3); }
  .perfil-cab .acoes { width:100%; }
  .perfil-cab .acoes .btn { flex:1 1 auto; }
  .secao { margin-bottom:var(--ds-space-5); }
  .wrap > section + section { margin-top:var(--ds-space-section); }
}

/* ── V13 · SPATIAL RHYTHM ─────────────────────────────────────────────────
   Proximidade é linguagem: micro para elementos inseparáveis, componente
   para grupos, seção para mudança de assunto e página para mudança de ato. */
:root {
  --ds-space-micro: var(--ds-space-1);
  --ds-space-inline: var(--ds-space-2);
  --ds-space-related: var(--ds-space-3);
  --ds-space-component: var(--ds-space-5);
  --ds-space-block: var(--ds-space-7);
  --ds-inset-xs: var(--ds-space-3);
  --ds-inset-sm: var(--ds-space-4);
  --ds-inset-md: var(--ds-space-5);
  --ds-inset-lg: var(--ds-space-6);
  --ds-inset-fluid: clamp(20px,3vw,36px);
  --ds-gap-grid: clamp(14px,2vw,28px);
  --ds-gap-section: clamp(28px,5vw,72px);
  --ds-gap-page: clamp(68px,10vw,148px);
}

/* Shell and page rhythm */
.topbar { gap:var(--ds-space-4); padding:var(--ds-space-3) clamp(16px,4vw,48px); }
.nav { gap:var(--ds-space-micro); }
.wrap { padding-inline:clamp(18px,4vw,48px); padding-top:var(--ds-gap-section); padding-bottom:var(--ds-gap-page); }
main.wrap > :first-child { margin-top:0; }
.wrap > section + section { margin-top:var(--ds-gap-page); }
.wrap > .grid + section,.wrap > .tabs + section { margin-top:var(--ds-gap-page); }
.wrap > .faixa { margin-top:var(--ds-gap-section); margin-bottom:var(--ds-gap-page); }

/* Layout groups */
.grid { gap:var(--ds-gap-grid); }
.row { gap:var(--ds-space-related); }
.grid.cols-2 { gap:clamp(18px,3vw,40px); }
.grid.cols-3,.grid.cols-4 { gap:var(--ds-gap-grid); }
.secao { gap:var(--ds-space-related); padding-bottom:var(--ds-space-4); margin-bottom:var(--ds-space-6); }
.secao .mais { margin-left:auto; }
.tabs { gap:var(--ds-space-inline); margin-bottom:var(--ds-space-7); }
.tabs a { padding:var(--ds-space-2) var(--ds-space-3); }

/* Components: generous interior, compact relationships. */
.panel { padding:var(--ds-inset-fluid); }
.panel > h2:first-child,.panel > h3:first-child { margin-bottom:var(--ds-space-4); }
.panel > h2:first-child + p,.panel > h3:first-child + p { margin-top:calc(var(--ds-space-2) * -1); margin-bottom:var(--ds-space-5); }
.panel > p:last-child { margin-bottom:0; }
.mcard .seals { gap:var(--ds-space-micro); }
.mcard .legenda { display:grid; gap:var(--ds-space-micro); }
.mcard .legenda h3 { margin:0; }
.mcard .legenda .meta { margin:0; }
.seal { padding:5px 9px; }

/* Forms follow a vertical rhythm rather than arbitrary per-field gaps. */
form { --ds-form-gap: var(--ds-space-4); }
form > label { margin:var(--ds-form-gap) 0 var(--ds-space-inline); }
form > label:first-of-type { margin-top:0; }
form > :is(input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea) { margin-bottom:var(--ds-space-related); }
form > :is(input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea):last-child { margin-bottom:0; }
.check { gap:var(--ds-space-inline); margin:var(--ds-space-related) 0; }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea { padding:13px var(--ds-inset-sm); }
.flash { margin-bottom:var(--ds-space-component); padding:var(--ds-space-related) var(--ds-inset-sm); }

/* Editorial screens */
.hero .texto { gap:0; }
.hero .texto .kicker { margin-bottom:var(--ds-space-related); }
.hero h1 { margin-bottom:0; }
.hero p { margin-bottom:0; }
.hero .acoes { gap:var(--ds-space-related); }
.faixa > div { padding:var(--ds-space-6) var(--ds-space-6) var(--ds-space-6) 0; }
.faixa > div + div { padding-left:var(--ds-space-6); }
.perfil-cab { gap:clamp(16px,3vw,32px); margin-top:var(--ds-space-5); padding-bottom:var(--ds-space-6); }
.perfil-bio { gap:clamp(24px,4vw,48px); margin:var(--ds-space-7) 0 var(--ds-gap-page); }
.posts { gap:var(--ds-space-inline); }

/* Commerce, chat and data density. */
.hc-topo { gap:clamp(24px,4vw,44px); margin-bottom:var(--ds-space-7); }
.hc-loja { gap:var(--ds-gap-grid); margin-bottom:var(--ds-gap-page); }
.hc-pack { gap:var(--ds-space-related); padding:var(--ds-inset-lg) var(--ds-inset-sm) var(--ds-inset-sm); }
.hc-vitrine { margin:var(--ds-space-inline) 0; }
.hc-detalhe { gap:var(--ds-space-inline); }
.hc-usos { margin-bottom:var(--ds-gap-page); }
.hc-mimo { margin-bottom:var(--ds-gap-page); }
.chat { gap:var(--ds-space-component); }
.chat .list a { gap:var(--ds-space-related); padding:var(--ds-space-related) var(--ds-space-3); }
.thread { gap:var(--ds-space-related); padding:var(--ds-space-related); }
.bubble { padding:var(--ds-space-related) var(--ds-space-4); }
th,td { padding:var(--ds-space-related) var(--ds-space-3); }
.foot .cols { gap:clamp(28px,5vw,64px); }

@media (max-width:820px) {
  :root {
    --ds-inset-fluid: var(--ds-space-4);
    --ds-gap-grid: var(--ds-space-3);
    --ds-gap-section: var(--ds-space-6);
    --ds-gap-page: clamp(52px,16vw,84px);
  }
  .topbar { padding-block:var(--ds-space-2); }
  .wrap { padding-inline:var(--ds-space-3); }
  .secao { gap:var(--ds-space-inline); padding-bottom:var(--ds-space-3); margin-bottom:var(--ds-space-5); }
  .tabs { margin-bottom:var(--ds-space-6); }
  .panel { padding:var(--ds-inset-sm); }
  .faixa > div,.faixa > div + div { padding:var(--ds-space-5) 0; }
  .perfil-bio { margin:var(--ds-space-6) 0 var(--ds-gap-page); gap:var(--ds-space-5); }
  .hc-topo { margin-bottom:var(--ds-space-6); }
  .hc-pack { padding:var(--ds-space-5) var(--ds-space-3) var(--ds-space-3); gap:var(--ds-space-inline); }
  .chat { gap:var(--ds-space-3); }
  th,td { padding:var(--ds-space-inline); }
}

/* ── V14 · COMPOSITIONAL CONTAINERS ───────────────────────────────────────
   Largura segue intenção: mídia pode respirar, coleções ocupam o palco e
   leitura usa uma coluna precisa. Nenhuma centralização automática sem função. */
:root {
  --ds-layout-bleed: max(var(--ds-space-3), calc((100vw - 1440px) / 2));
  --ds-layout-wide: 1440px;
  --ds-layout-content: 1240px;
  --ds-layout-grid: 1180px;
  --ds-layout-reading: 68ch;
  --ds-layout-reading-tight: 48ch;
  --ds-layout-side: 340px;
  --ds-layout-gutter: clamp(18px,4vw,56px);
}

/* One page axis: the layout itself is broad; individual content chooses a track. */
.wrap {
  width:min(100%,var(--ds-layout-wide)); margin-inline:auto;
  padding-inline:var(--ds-layout-gutter);
}
.wrap > :not(.hero) { width:min(100%,var(--ds-layout-content)); margin-inline:auto; }
.wrap > .grid.cols-4,.wrap > .grid.cols-3,.wrap > .faixa,.wrap > .hc-topo,.wrap > .chat { width:min(100%,var(--ds-layout-grid)); }
.wrap > .grid.cols-2 { width:min(100%,var(--ds-layout-content)); }

/* Entry headings align left to the content rail instead of floating in a broad canvas. */
main.wrap > .kicker:first-child,main.wrap > .kicker + h1,main.wrap > h1:first-child,main.wrap > .tabs {
  margin-inline:0; max-width:var(--ds-layout-reading-tight);
}
main.wrap > .tabs { width:auto; }
.secao { width:100%; }
.secao h2 { max-width:20ch; }

/* Reading lives in a typographic column. Support content uses a deliberate side rail. */
p,.panel > p,.flash { max-width:var(--ds-layout-reading); }
.narrow { width:min(100%,560px); margin-inline:auto; }
section.narrow { max-width:620px; }
.perfil-bio { grid-template-columns:minmax(0,var(--ds-layout-reading)) minmax(260px,var(--ds-layout-side)); max-width:var(--ds-layout-content); }
.perfil-bio .bio { max-width:var(--ds-layout-reading-tight); }
.perfil-cab { max-width:var(--ds-layout-content); margin-inline:auto; }

/* Collections are not stretched: maximum card count and optical gutters stay intentional. */
.grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mcard .legenda { max-width:calc(100% - var(--ds-space-2)); }
.posts { width:100%; max-width:var(--ds-layout-content); margin-inline:auto; }

/* Wide composition for media, constrained copy for conversion. */
.hero { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hero .texto { width:min(100%,680px); margin-left:max(var(--ds-layout-gutter),calc((100vw - var(--ds-layout-content)) / 2)); }
.hero p { max-width:44ch; }
.faixa { margin-inline:auto; }
.hc-topo { grid-template-columns:minmax(0,600px) minmax(280px,380px); justify-content:space-between; }
.hc-topo > div:first-child { max-width:var(--ds-layout-reading-tight); }
.hc-loja { max-width:var(--ds-layout-grid); margin-inline:auto; }
.chat { grid-template-columns:minmax(270px,var(--ds-layout-side)) minmax(0,1fr); }
.chat > .panel:last-child { max-width:none; }
.table-wrap { max-width:100%; }
table { min-width:640px; }

/* Footer and navigation use the same wide rail, not unrelated padding. */
.topbar { padding-inline:max(var(--ds-layout-gutter),calc((100vw - var(--ds-layout-wide)) / 2)); }
.foot .cols,.foot .legal { width:min(calc(100% - (var(--ds-layout-gutter) * 2)),var(--ds-layout-content)); margin-inline:auto; }

@media (max-width:1240px) {
  .grid.cols-4 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hc-topo { grid-template-columns:minmax(0,1fr) minmax(280px,360px); }
}
@media (max-width:820px) {
  :root { --ds-layout-gutter: var(--ds-space-3); }
  .wrap > :not(.hero),.wrap > .grid.cols-4,.wrap > .grid.cols-3,.wrap > .faixa,.wrap > .hc-topo,.wrap > .chat,.wrap > .grid.cols-2 { width:100%; }
  .grid.cols-4,.grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid.cols-2,.perfil-bio,.hc-topo,.chat { grid-template-columns:1fr; }
  .hero .texto { width:auto; margin-left:0; }
  .perfil-cab { width:100%; }
  .hc-topo > div:first-child { max-width:none; }
  table { min-width:580px; }
  .foot .cols,.foot .legal { width:100%; }
}

/* ── V15 · EDITORIAL LAYOUT ENGINE ────────────────────────────────────────
   As grades ganham papéis: coleção ritmada, comparação com coluna dominante,
   informação operacional compacta e assimetria controlada nas telas largas. */
:root {
  --ds-grid-major: minmax(0,1.32fr);
  --ds-grid-minor: minmax(280px,.68fr);
  --ds-grid-rail: minmax(260px,.78fr);
  --ds-grid-stage: minmax(0,1.22fr);
  --ds-grid-gap-editorial: clamp(18px,3vw,42px);
  --ds-grid-offset: clamp(14px,2.6vw,38px);
}

/* Collecting creators: even rhythm, but not a sterile catalogue. */
.grid.cols-4 { align-items:start; }
.grid.cols-4 > .mcard { min-width:0; }
@media (min-width:1241px) {
  .grid.cols-4 > .mcard:nth-child(4n + 2) { margin-top:var(--ds-grid-offset); }
  .grid.cols-4 > .mcard:nth-child(4n + 4) { margin-top:calc(var(--ds-grid-offset) * .46); }
  .grid.cols-4 > .mcard:nth-child(8n + 5) { margin-top:calc(var(--ds-grid-offset) * -.28); }
  .grid.cols-4 > .mcard:nth-child(8n + 6) { margin-top:calc(var(--ds-grid-offset) * .74); }
}

/* Two-column modules: decision/context on the left, supporting detail on a rail. */
@media (min-width:921px) {
  .grid.cols-2 { grid-template-columns:var(--ds-grid-major) var(--ds-grid-minor); align-items:start; }
  .grid.cols-2 > .panel:nth-child(even) { align-self:start; }
  .hc-mimo-grade { grid-template-columns:var(--ds-grid-rail) var(--ds-grid-stage); align-items:start; }
  .hc-adm-vendas { grid-template-columns:var(--ds-grid-major) var(--ds-grid-minor); align-items:start; }
  .perfil-bio { align-items:start; }
  .perfil-bio > :last-child { padding-top:var(--ds-space-4); }
}

/* Three-column content has an intentional central anchor rather than three equal boxes. */
@media (min-width:921px) {
  .grid.cols-3 { grid-template-columns:minmax(0,.88fr) minmax(0,1.16fr) minmax(0,.88fr); align-items:start; }
  .grid.cols-3 > :nth-child(3n + 2) { transform:translateY(calc(var(--ds-grid-offset) * -.18)); }
  .faixa { grid-template-columns:minmax(0,1.08fr) minmax(0,.86fr) minmax(0,1.06fr); align-items:stretch; }
  .faixa > div:nth-child(2) { background:linear-gradient(180deg,rgba(214,178,110,.055),transparent); }
}

/* Hero / profile / commerce all share a clear stage-and-rail composition. */
.hero .texto { max-width:min(68vw,760px); }
.perfil-cab { grid-template-columns:auto minmax(0,1.25fr) minmax(260px,.75fr); }
.perfil-cab .acoes { align-self:center; }
.hc-topo { grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); align-items:center; }
.hc-saldo-box { min-height:100%; }
.chat { grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); align-items:stretch; }
.chat .list { position:sticky; top:calc(var(--ds-space-8) + var(--ds-space-3)); align-self:start; }

/* Dense operational layouts stay tidy — no decorative offsets where speed matters. */
table { table-layout:auto; }
.table-wrap { display:block; }
.hc-loja { align-items:stretch; }
.hc-loja > .hc-pack { height:100%; }
.hc-pack .hc-preco { margin-top:auto; }
.sf-meus { grid-template-columns:repeat(2,minmax(0,1fr)); }
.foot .cols { grid-template-columns:minmax(0,1.65fr) minmax(150px,.65fr) minmax(150px,.65fr); align-items:start; }

/* Flex groups are deliberate rows; controls never drift from their related action. */
.row > .spacer { min-width:var(--ds-space-2); }
.perfil-cab .acoes,.hero .acoes,.hc-modal-acoes { justify-content:flex-start; }
.hc-gorjetas,.hc-adm-decide { align-items:stretch; }
.hc-gorjetas .btn,.hc-adm-decide .btn { flex:0 0 auto; }

@media (max-width:1240px) and (min-width:821px) {
  .grid.cols-4 > .mcard:nth-child(3n + 2) { margin-top:var(--ds-space-5); }
  .grid.cols-4 > .mcard:nth-child(3n) { margin-top:var(--ds-space-3); }
  .perfil-cab { grid-template-columns:auto minmax(0,1fr); }
  .perfil-cab .acoes { grid-column:2; justify-content:flex-start; }
  .chat { grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr); }
}
@media (max-width:920px) {
  .grid.cols-2,.grid.cols-3,.hc-mimo-grade,.hc-adm-vendas,.perfil-cab,.hc-topo,.chat { grid-template-columns:1fr; }
  .grid.cols-3 > :nth-child(3n + 2) { transform:none; }
  .perfil-bio > :last-child { padding-top:0; }
  .chat .list { position:static; }
  .sf-meus { grid-template-columns:1fr; }
  .foot .cols { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .grid.cols-4 > .mcard { margin-top:0!important; }
  .hero .texto { max-width:none; }
}

/* ── V16 · SURFACE DISCIPLINE ─────────────────────────────────────────────
   Fim do card hell: superfície só contém uma decisão, uma transação, uma
   conversa ou um formulário. O resto se organiza por proximidade e divisores. */
:root {
  --ds-divider: 1px solid var(--ds-line-subtle);
  --ds-divider-strong: 1px solid var(--ds-line-default);
  --ds-surface-contained: var(--ds-depth-surface);
  --ds-surface-contained-emphasis: var(--ds-depth-elevated);
}

/* Default panel becomes a semantic group, not automatically a card. */
.panel {
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:var(--ds-space-5) 0; position:relative;
}
.panel::before,.panel::after { display:none; }
.panel:hover { background:transparent; border-color:transparent; box-shadow:none; }
.panel + .panel { border-top:var(--ds-divider); }

/* Actual containment: account decisions, forms, balances, chat, and admin work. */
.wrap > .panel,
.grid.cols-2 > .panel,
.chat > .panel,
.hc-saldo-box,
.sf-cartao,
.sf-meus-painel,
.hc-adm-vendas > .panel,
.hc-mimo-grade > .panel,
.panel:has(form),
.panel:has(.table-wrap) {
  background:var(--ds-surface-contained); border:var(--ds-border-hairline); border-radius:var(--ds-radius-md);
  padding:var(--ds-inset-fluid); box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-resting);
}
.wrap > .panel:hover,
.grid.cols-2 > .panel:hover,
.chat > .panel:hover,
.hc-saldo-box:hover,
.sf-cartao:hover,
.sf-meus-painel:hover,
.hc-adm-vendas > .panel:hover,
.hc-mimo-grade > .panel:hover,
.panel:has(form):hover,
.panel:has(.table-wrap):hover {
  background:var(--ds-surface-contained); border-color:var(--ds-line-default); box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-raised-natural);
}

/* Informational collections become an editorial list with dividers, not mini dashboards. */
.grid.cols-3 > .panel,
.grid.cols-4 > .panel,
.grid.hc-adm-totais > .panel,
.hc-usos .panel,
.grid > .panel.hc-uso {
  min-height:0; padding:var(--ds-space-5) 0; background:transparent; border:0; border-top:var(--ds-divider); border-radius:0; box-shadow:none;
}
.grid.cols-3 > .panel::before,.grid.cols-4 > .panel::before,.grid.hc-adm-totais > .panel::before,.hc-usos .panel::before { display:none; }
.grid.cols-3 > .panel:hover,.grid.cols-4 > .panel:hover,.grid.hc-adm-totais > .panel:hover,.hc-usos .panel:hover { background:transparent; border-color:var(--ds-line-default); box-shadow:none; }
.hc-uso h3 { margin-top:var(--ds-space-inline); }
.hc-uso-ico { color:var(--ds-priority-2); }

/* Statistics read as a typographic strip, while commerce/media remain true cards. */
.stat { padding:var(--ds-space-4) 0; }
.stat + .stat { border-left:var(--ds-divider); padding-left:var(--ds-space-5); }
.stat .n { margin:0; }
.stat .l { margin-top:var(--ds-space-2); }
.hc-pack,.mcard .cover,.post,.hc-modal { isolation:isolate; }
.hc-pack,.mcard .cover { border:var(--ds-border-hairline); }

/* Each kind of grouping gets an honest cue: divider, media edge, or contained surface. */
.faixa > div { border-bottom:var(--ds-divider); }
.faixa > div + div { border-left:0; }
.faixa > div:last-child { border-bottom:0; }
.sf-meu { background:transparent; border:0; border-top:var(--ds-divider); border-radius:0; padding:var(--ds-space-related) 0; }
.sf-meu:first-child { border-top:var(--ds-divider-strong); }
.sf-meu:hover { background:transparent; border-color:var(--ds-line-default); }
.hc-mural-item,.sf-doador,.sf-top-lista li { background:transparent; box-shadow:none; }

@media (min-width:921px) {
  .grid.cols-3 > .panel:nth-child(3n + 2),.grid.cols-4 > .panel:nth-child(4n + 2) { padding-inline:var(--ds-space-4); border-left:var(--ds-divider); }
  .grid.hc-adm-totais { gap:var(--ds-space-5); }
  .hc-usos .grid { gap:var(--ds-space-5); }
}
@media (max-width:920px) {
  .grid.cols-3 > .panel,.grid.cols-4 > .panel,.grid.hc-adm-totais > .panel,.hc-usos .panel { padding:var(--ds-space-4) 0; }
  .stat + .stat { border-left:0; border-top:var(--ds-divider); padding-left:0; padding-top:var(--ds-space-4); }
}

/* ── V17 · PREMIUM CARD LANGUAGE ──────────────────────────────────────────
   Cards restantes viram componentes de verdade: moldura, luz, conteúdo,
   meta e ação obedecem a mesma gramática — sem devolver caixas desnecessárias. */
:root {
  --ds-card-radius-media: 0 var(--ds-radius-lg) 0 var(--ds-radius-lg);
  --ds-card-radius-surface: var(--ds-radius-md);
  --ds-card-border: 1px solid var(--ds-line-subtle);
  --ds-card-border-active: 1px solid var(--ds-line-strong);
  --ds-card-padding: var(--ds-inset-fluid);
  --ds-card-padding-compact: var(--ds-space-4);
  --ds-card-header-gap: var(--ds-space-2);
  --ds-card-content-gap: var(--ds-space-4);
  --ds-card-action-gap: var(--ds-space-3);
  --ds-card-light: linear-gradient(135deg,rgba(255,248,237,.12),transparent 24%,transparent 72%,rgba(214,178,110,.06));
}

/* Universal contained card frame. */
.wrap > .panel,.grid.cols-2 > .panel,.chat > .panel,.hc-saldo-box,.sf-cartao,.sf-meus-painel,.hc-adm-vendas > .panel,.hc-mimo-grade > .panel,.panel:has(form),.panel:has(.table-wrap) {
  overflow:hidden; border:var(--ds-card-border); border-radius:var(--ds-card-radius-surface);
  background-image:var(--ds-card-light),var(--ds-surface-contained); padding:var(--ds-card-padding);
}
.wrap > .panel::after,.grid.cols-2 > .panel::after,.chat > .panel::after,.hc-saldo-box::after,.sf-cartao::after,.sf-meus-painel::after,.hc-adm-vendas > .panel::after,.hc-mimo-grade > .panel::after,.panel:has(form)::after,.panel:has(.table-wrap)::after {
  content:""; display:block; position:absolute; left:var(--ds-card-padding); right:var(--ds-card-padding); top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ds-brand-strong),transparent); opacity:.38; pointer-events:none;
}
.wrap > .panel:focus-within,.grid.cols-2 > .panel:focus-within,.chat > .panel:focus-within,.hc-saldo-box:focus-within,.sf-cartao:focus-within,.sf-meus-painel:focus-within,.hc-adm-vendas > .panel:focus-within,.hc-mimo-grade > .panel:focus-within,.panel:has(form):focus-within,.panel:has(.table-wrap):focus-within {
  border-color:var(--ds-brand); box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-gold);
}

/* Card internals: heading, context, data, and action never compete. */
.wrap > .panel > :is(h2,h3):first-child,.grid.cols-2 > .panel > :is(h2,h3):first-child,.chat > .panel > :is(h2,h3):first-child,.hc-saldo-box > :is(h2,h3):first-child,.sf-cartao > :is(h2,h3):first-child,.sf-meus-painel > :is(h2,h3):first-child {
  margin-bottom:var(--ds-card-header-gap); padding-right:var(--ds-space-7);
}
.wrap > .panel > :is(h2,h3):first-child + p,.grid.cols-2 > .panel > :is(h2,h3):first-child + p,.chat > .panel > :is(h2,h3):first-child + p,.sf-cartao > :is(h2,h3):first-child + p,.sf-meus-painel > :is(h2,h3):first-child + p { margin-bottom:var(--ds-card-content-gap); }
.panel :is(.row,.acoes):last-child { margin-top:var(--ds-card-action-gap); }
.panel .small,.panel .muted { color:var(--ds-priority-3); }

/* Media card: image first, name second, label third; its border is an active frame. */
.mcard .cover { border:var(--ds-card-border); border-radius:var(--ds-card-radius-media); }
.mcard .cover::before { inset:var(--ds-space-2); border-radius:0 var(--ds-radius-md) 0 var(--ds-radius-md); }
.mcard .seals { left:var(--ds-space-4); top:var(--ds-space-4); }
.mcard .legenda { left:var(--ds-space-5); right:var(--ds-space-4); bottom:var(--ds-space-4); gap:var(--ds-space-micro); }
.mcard .legenda .meta { padding-top:var(--ds-space-micro); }
.mcard:hover .cover,.mcard:focus-visible .cover { border:var(--ds-card-border-active); }
.mcard:active .cover { transform:translateY(-2px) scale(.995); }

/* Commerce card: name/header, visual object, amount, metadata, action. */
.hc-pack { position:relative; overflow:hidden; border:var(--ds-card-border); border-radius:var(--ds-card-radius-surface); padding:var(--ds-space-6) var(--ds-card-padding-compact) var(--ds-card-padding-compact); }
.hc-pack::after { content:""; position:absolute; inset:var(--ds-space-2); border:1px solid rgba(245,216,156,.08); border-radius:calc(var(--ds-card-radius-surface) - var(--ds-space-2)); pointer-events:none; }
.hc-pack .hc-nome { position:relative; z-index:var(--ds-z-content); }
.hc-pack .hc-vitrine { position:relative; z-index:var(--ds-z-content); margin-block:var(--ds-space-2) var(--ds-space-3); }
.hc-pack .hc-total { position:relative; z-index:var(--ds-z-content); margin-top:var(--ds-space-micro); }
.hc-pack .hc-detalhe { position:relative; z-index:var(--ds-z-content); min-height:var(--ds-space-5); }
.hc-pack .hc-preco { position:relative; z-index:var(--ds-z-content); border-radius:var(--ds-radius-sm); min-height:42px; }
.hc-pack:hover { border:var(--ds-card-border-active); }
.hc-pack:focus-within { border-color:var(--ds-brand-strong); box-shadow:var(--ds-highlight-top),var(--ds-shadow-raised-natural),var(--ds-shadow-tint-gold); }
.hc-pack:focus-within::after { border-color:rgba(245,216,156,.27); }

/* Chat rows work as selectable cards without becoming a grid of boxes. */
.chat .list a { position:relative; border:1px solid transparent; border-radius:var(--ds-radius-sm); }
.chat .list a:hover,.chat .list a.on { border-color:var(--ds-line-subtle); box-shadow:inset 0 1px 0 rgba(255,248,237,.06),var(--ds-shadow-contact-1); }
.chat .list a.on { border-color:var(--ds-line-default); }
.bubble { border:var(--ds-card-border); border-radius:var(--ds-radius-md) var(--ds-radius-md) var(--ds-radius-md) var(--ds-radius-xs); }
.bubble.me { border-color:rgba(235,207,147,.36); border-radius:var(--ds-radius-md) var(--ds-radius-md) var(--ds-radius-xs) var(--ds-radius-md); }

/* State language. */
.btn:focus-visible,.hc-pack:focus-within,.mcard:focus-visible,.chat .list a:focus-visible { outline:2px solid var(--ds-brand-strong); outline-offset:3px; }
.btn[disabled],.hc-pack:has(.btn[disabled]) { filter:saturate(.45); opacity:.62; box-shadow:none; }
@media (max-width:820px) {
  .wrap > .panel,.grid.cols-2 > .panel,.chat > .panel,.hc-saldo-box,.sf-cartao,.sf-meus-painel,.hc-adm-vendas > .panel,.hc-mimo-grade > .panel,.panel:has(form),.panel:has(.table-wrap) { padding:var(--ds-card-padding-compact); }
  .wrap > .panel::after,.grid.cols-2 > .panel::after,.chat > .panel::after,.hc-saldo-box::after,.sf-cartao::after,.sf-meus-painel::after,.hc-adm-vendas > .panel::after,.hc-mimo-grade > .panel::after,.panel:has(form)::after,.panel:has(.table-wrap)::after { left:var(--ds-card-padding-compact); right:var(--ds-card-padding-compact); }
  .mcard .legenda { left:var(--ds-space-3); right:var(--ds-space-3); bottom:var(--ds-space-3); }
  .hc-pack { padding:var(--ds-space-5) var(--ds-space-3) var(--ds-space-3); }
}

/* ── V18 · ACTION SYSTEM ──────────────────────────────────────────────────
   Quatro intenções: Primary decide, Secondary oferece alternativa, Ghost
   preserva contexto e Icon Button age sem disputar texto. Todos têm estados. */
:root {
  --ds-action-height: 46px;
  --ds-action-height-sm: 36px;
  --ds-action-height-icon: 42px;
  --ds-action-padding: 0 var(--ds-space-5);
  --ds-action-padding-sm: 0 var(--ds-space-3);
  --ds-action-radius: var(--ds-radius-round);
  --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand));
  --ds-action-primary-fg: var(--ds-on-brand);
  --ds-action-secondary-bg: rgba(142,22,34,.78);
  --ds-action-secondary-fg: #fff5ec;
  --ds-action-ghost-bg: transparent;
  --ds-action-ghost-fg: var(--ds-priority-2);
  --ds-action-focus: 0 0 0 4px rgba(235,207,147,.17),0 0 0 6px rgba(11,7,6,.88);
  --ds-action-loading: 700ms;
}

/* Shared mechanism */
.btn,.menu-toggle,.oh-theme {
  appearance:none; min-height:var(--ds-action-height); display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-space-inline);
  padding:var(--ds-action-padding); border:1px solid transparent; border-radius:var(--ds-action-radius); cursor:pointer;
  font-family:var(--ds-font-body); font-size:var(--ds-type-label); font-weight:var(--ds-weight-semibold); line-height:1; letter-spacing:var(--ds-tracking-label); text-transform:uppercase;
  transition:transform var(--ds-duration-fast) var(--ds-ease-out),background var(--ds-duration-base) var(--ds-ease-standard),border-color var(--ds-duration-base) var(--ds-ease-standard),color var(--ds-duration-base) var(--ds-ease-standard),box-shadow var(--ds-duration-base) var(--ds-ease-standard),opacity var(--ds-duration-fast) var(--ds-ease-standard);
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible,.menu-toggle:focus-visible,.oh-theme:focus-visible { outline:0; box-shadow:var(--ds-action-focus); }
.btn:active,.menu-toggle:active,.oh-theme:active { transform:translateY(1px) scale(.985); transition-duration:70ms; }

/* Primary — default `.btn` */
.btn { background:var(--ds-action-primary-bg); border-color:rgba(255,239,205,.52); color:var(--ds-action-primary-fg); }
.btn:hover { background:linear-gradient(135deg,#fff0ca,var(--ds-brand-highlight)); border-color:#fff0ca; color:var(--ds-on-brand); transform:translateY(-2px); }
.btn .seta { transition:transform var(--ds-duration-fast) var(--ds-ease-out); }
.btn:hover .seta { transform:translateX(4px); }

/* Secondary — alternative paid/committal route. Existing `.hot` maps here. */
.btn.secondary,.btn.hot { background:var(--ds-action-secondary-bg); border-color:rgba(255,216,216,.30); color:var(--ds-action-secondary-fg); }
.btn.secondary:hover,.btn.hot:hover { background:linear-gradient(135deg,var(--ds-accent-strong),var(--ds-accent)); border-color:rgba(255,232,232,.48); color:#fff; transform:translateY(-2px); }

/* Ghost — contextual action with no unnecessary fill. */
.btn.ghost { background:var(--ds-action-ghost-bg); border-color:var(--ds-line-default); color:var(--ds-action-ghost-fg); box-shadow:none; }
.btn.ghost:hover { background:rgba(235,207,147,.10); border-color:var(--ds-brand); color:var(--ds-priority-1); transform:translateY(-1px); }
.btn.ghost:active { background:rgba(235,207,147,.16); }

/* Icon Button — applies to explicit icons and the existing menu/theme controls. */
.btn.icon,.menu-toggle,.oh-theme {
  width:var(--ds-action-height-icon); min-width:var(--ds-action-height-icon); height:var(--ds-action-height-icon); min-height:var(--ds-action-height-icon); padding:0;
  border-radius:50%; background:rgba(255,248,237,.035); border-color:var(--ds-line-subtle); color:var(--ds-priority-2);
  letter-spacing:0;
}
.btn.icon:hover,.menu-toggle:hover,.oh-theme:hover { background:rgba(235,207,147,.11); border-color:var(--ds-line-default); color:var(--ds-priority-1); transform:translateY(-1px); }
.btn.icon[aria-pressed="true"],.menu-toggle[aria-expanded="true"],.oh-theme[aria-pressed="true"] { background:rgba(214,178,110,.16); border-color:var(--ds-brand); color:var(--ds-brand-strong); }

/* Compact control family */
.btn.sm { min-height:var(--ds-action-height-sm); padding:var(--ds-action-padding-sm); font-size:calc(var(--ds-type-label) - .02rem); }
.nav a.btn { min-height:var(--ds-action-height-sm); padding:var(--ds-action-padding-sm); }
.hc-pack .hc-preco { width:100%; }

/* Disabled and loading are visual contracts for server-rendered and async actions. */
.btn[disabled],.btn[aria-disabled="true"],.menu-toggle[disabled],.oh-theme[disabled] {
  pointer-events:none; cursor:not-allowed; opacity:.42; filter:saturate(.35); box-shadow:none;
}
.btn.is-loading,.btn[aria-busy="true"],.btn[data-loading="true"],.menu-toggle.is-loading,.menu-toggle[aria-busy="true"],.oh-theme.is-loading,.oh-theme[aria-busy="true"] {
  pointer-events:none; color:transparent!important; position:relative;
}
.btn.is-loading::after,.btn[aria-busy="true"]::after,.btn[data-loading="true"]::after,.menu-toggle.is-loading::after,.menu-toggle[aria-busy="true"]::after,.oh-theme.is-loading::after,.oh-theme[aria-busy="true"]::after {
  content:""; position:absolute; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  color:var(--ds-on-brand); animation:oh-action-spin var(--ds-action-loading) linear infinite;
}
.btn.ghost.is-loading::after,.btn.ghost[aria-busy="true"]::after { color:var(--ds-brand-strong); }
@keyframes oh-action-spin { to { transform:rotate(360deg); } }

/* Text-only command buttons remain quiet, with a shared accessible focus style. */
.nav button.linklike { min-height:var(--ds-action-height-sm); border-radius:var(--ds-radius-round); }
.nav button.linklike:focus-visible { outline:0; box-shadow:var(--ds-action-focus); }

/* The icon system does not change the menu's responsive visibility contract. */
.menu-toggle { display:none; }

@media (max-width:820px) {
  .menu-toggle { display:inline-flex; }
  .btn { min-height:44px; padding-inline:var(--ds-space-4); }
  .btn.sm,.nav a.btn { min-height:var(--ds-action-height-sm); padding-inline:var(--ds-space-3); }
  .menu-toggle,.oh-theme,.btn.icon { width:40px; min-width:40px; height:40px; min-height:40px; }
}

/* ── V19 · BORDER RESTRAINT ───────────────────────────────────────────────
   Linha só comunica limite real. Todo o resto se separa por luz, superfície,
   profundidade e espaço — sem contornos de interface genérica. */
:root {
  --ds-hairline-subtle: rgba(235,207,147,.13);
  --ds-hairline-default: rgba(235,207,147,.28);
  --ds-hairline-strong: rgba(235,207,147,.52);
  --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent);
}
html[data-theme="light"] {
  --ds-hairline-subtle: rgba(101,54,35,.14);
  --ds-hairline-default: rgba(101,54,35,.28);
  --ds-hairline-strong: rgba(101,54,35,.46);
}

/* Shell and sections separate by surface and air, not boxed outlines. */
.topbar { border-bottom:0; }
.topbar::after { background:var(--ds-divider-fade); opacity:.70; }
.foot { border-top:0; position:relative; }
.foot::before { content:""; position:absolute; top:0; left:max(var(--ds-layout-gutter),calc((100% - var(--ds-layout-content)) / 2)); right:max(var(--ds-layout-gutter),calc((100% - var(--ds-layout-content)) / 2)); height:1px; background:var(--ds-divider-fade); }
.secao { border-bottom:0; position:relative; }
.secao::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--ds-hairline-default),transparent 78%); }
.tabs::after { background:linear-gradient(90deg,var(--ds-hairline-default),transparent 72%); }

/* Contained cards use tonal edge + light, not a hard perimeter. */
.wrap > .panel,.grid.cols-2 > .panel,.chat > .panel,.hc-saldo-box,.sf-cartao,.sf-meus-painel,.hc-adm-vendas > .panel,.hc-mimo-grade > .panel,.panel:has(form),.panel:has(.table-wrap) {
  border-color:transparent; box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),0 0 0 1px var(--ds-hairline-subtle),var(--ds-shadow-resting);
}
.wrap > .panel:hover,.grid.cols-2 > .panel:hover,.chat > .panel:hover,.hc-saldo-box:hover,.sf-cartao:hover,.sf-meus-painel:hover,.hc-adm-vendas > .panel:hover,.hc-mimo-grade > .panel:hover,.panel:has(form):hover,.panel:has(.table-wrap):hover {
  border-color:transparent; box-shadow:var(--ds-highlight-top),var(--ds-highlight-edge),0 0 0 1px var(--ds-hairline-default),var(--ds-shadow-raised-natural);
}
.wrap > .panel:focus-within,.grid.cols-2 > .panel:focus-within,.chat > .panel:focus-within,.hc-saldo-box:focus-within,.sf-cartao:focus-within,.sf-meus-painel:focus-within,.hc-adm-vendas > .panel:focus-within,.hc-mimo-grade > .panel:focus-within,.panel:has(form):focus-within,.panel:has(.table-wrap):focus-within { border-color:transparent; }

/* Media and commerce retain a hairline only because the boundary is interactive. */
.mcard .cover,.hc-pack { border-color:var(--ds-hairline-subtle); }
.mcard:hover .cover,.mcard:focus-visible .cover,.hc-pack:hover,.hc-pack:focus-within { border-color:var(--ds-hairline-strong); }
.hc-pack::after { border-color:rgba(245,216,156,.055); }
.hc-pack:focus-within::after { border-color:var(--ds-hairline-default); }
.post { box-shadow:inset 0 0 0 1px rgba(255,248,237,.045); }
.post:hover { box-shadow:inset 0 0 0 1px var(--ds-hairline-strong); }

/* Informational groups are separated with one quiet hairline or a surface shift. */
.grid.cols-3 > .panel,.grid.cols-4 > .panel,.grid.hc-adm-totais > .panel,.hc-usos .panel { border-top-color:var(--ds-hairline-subtle); }
.grid.cols-3 > .panel:hover,.grid.cols-4 > .panel:hover,.grid.hc-adm-totais > .panel:hover,.hc-usos .panel:hover { border-top-color:var(--ds-hairline-default); }
.faixa > div { border-bottom:0; background-image:linear-gradient(180deg,rgba(255,248,237,.025),transparent 65%); }
.faixa > div + div { border-left:0; }
.faixa > div + div::before { content:""; position:absolute; left:0; top:var(--ds-space-5); bottom:var(--ds-space-5); width:1px; background:linear-gradient(180deg,transparent,var(--ds-hairline-default),transparent); }
.sf-meu,.stat + .stat { border-color:var(--ds-hairline-subtle); }

/* Forms and actions preserve only the affordance boundary required for use. */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea { border-color:var(--ds-hairline-default); }
input:hover,select:hover,textarea:hover { border-color:var(--ds-hairline-strong); }
input:focus,select:focus,textarea:focus { border-color:var(--ds-brand); }
.btn.ghost,.menu-toggle,.oh-theme,.btn.icon { border-color:var(--ds-hairline-default); }
.btn.ghost:hover,.menu-toggle:hover,.oh-theme:hover,.btn.icon:hover { border-color:var(--ds-hairline-strong); }
.chat .list a { border-color:transparent; }
.chat .list a:hover,.chat .list a.on { border-color:var(--ds-hairline-subtle); }
.chat .list a.on { border-color:var(--ds-hairline-default); }

/* Data table becomes a continuous surface with lightweight row rhythm. */
table { border-collapse:collapse; border-spacing:0; }
td { border:0; background:transparent; box-shadow:inset 0 -1px 0 var(--ds-hairline-subtle); }
td:first-child,td:last-child { border-radius:0; border-left:0; border-right:0; }
tbody tr:last-child td { box-shadow:none; }
tbody tr:hover td { background:rgba(214,178,110,.045); box-shadow:inset 0 -1px 0 var(--ds-hairline-default); }

@media (max-width:920px) {
  .faixa > div + div::before { display:none; }
  .faixa > div + div { box-shadow:inset 0 1px 0 var(--ds-hairline-subtle); }
}

/* ── V20 · SHAPE DISCIPLINE ───────────────────────────────────────────────
   Três escalas reais: controle, componente e superfície. Círculos ficam só
   em ícones/avatares; o recorte editorial continua exclusivo da mídia. */
:root {
  --ds-radius-control: 8px;
  --ds-radius-component: 12px;
  --ds-radius-surface: 18px;
  --ds-radius-media: 0 var(--ds-radius-surface) 0 var(--ds-radius-surface);
  --ds-radius-media-inset: 0 var(--ds-radius-component) 0 var(--ds-radius-component);

  /* Legacy aliases now resolve to the same deliberate shape scale. */
  --ds-radius-xs: 4px;
  --ds-radius-sm: var(--ds-radius-control);
  --ds-radius-md: var(--ds-radius-component);
  --ds-radius-lg: var(--ds-radius-surface);
  --ds-radius-xl: var(--ds-radius-surface);
  --s-radius: var(--ds-radius-component);
  --s-radius-sm: var(--ds-radius-control);
  --ds-card-radius-surface: var(--ds-radius-surface);
  --ds-card-radius-media: var(--ds-radius-media);
  --ds-action-radius: var(--ds-radius-control);
}

/* Controls are tactile rectangles — never generic capsules. */
.btn,.nav a.btn,.nav button.linklike,.tabs a,
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea,
.flash,.chat .list a,.hc-pack .btn,.hc-pack .hc-preco,.sf-doador,.sf-top-lista li,.seal,.hc-chip {
  border-radius:var(--ds-radius-control);
}
.btn.icon,.menu-toggle,.oh-theme { border-radius:50%; }

/* Containers always exceed their children by one scale step. */
.wrap > .panel,.grid.cols-2 > .panel,.chat > .panel,.hc-saldo-box,.sf-cartao,.sf-meus-painel,.hc-adm-vendas > .panel,.hc-mimo-grade > .panel,.panel:has(form),.panel:has(.table-wrap),
.hc-pack,.hc-modal,.chat .list,section.narrow {
  border-radius:var(--ds-radius-surface);
}
.panel::before { border-radius:var(--ds-radius-component); }
.hc-pack::after { border-radius:var(--ds-radius-component); }

/* The asymmetrical crop is an image signature, not a random radius variant. */
.mcard .cover,.mcard:nth-child(3n + 2) .cover,.mcard:nth-child(3n) .cover {
  border-radius:var(--ds-radius-media);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ds-radius-surface)),calc(100% - var(--ds-radius-surface)) 100%,0 100%);
}
.mcard .cover::before { border-radius:var(--ds-radius-media-inset); }
.perfil-capa { border-radius:0; }

/* Nested communication pieces follow the component → control relationship. */
.post { border-radius:var(--ds-radius-component); }
.bubble { border-radius:var(--ds-radius-component) var(--ds-radius-component) var(--ds-radius-component) var(--ds-radius-xs); }
.bubble.me { border-radius:var(--ds-radius-component) var(--ds-radius-component) var(--ds-radius-xs) var(--ds-radius-component); }

@media (max-width:820px) {
  .wrap > .panel,.grid.cols-2 > .panel,.chat > .panel,.hc-saldo-box,.sf-cartao,.sf-meus-painel,.hc-adm-vendas > .panel,.hc-mimo-grade > .panel,.panel:has(form),.panel:has(.table-wrap),.hc-pack,.hc-modal,.chat .list,section.narrow { border-radius:var(--ds-radius-component); }
  .mcard .cover,.mcard:nth-child(3n + 2) .cover,.mcard:nth-child(3n) .cover { border-radius:0 var(--ds-radius-component) 0 var(--ds-radius-component); clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ds-radius-component)),calc(100% - var(--ds-radius-component)) 100%,0 100%); }
  .mcard .cover::before { border-radius:0 var(--ds-radius-control) 0 var(--ds-radius-control); }
}

/* ── V21 · COLOR GOVERNANCE ───────────────────────────────────────────────
   Funções, não coleção: neutros fazem a leitura; ouro conduz; rubi pontua;
   cores de estado só comunicam estado. A identidade noturna continua intacta. */
:root {
  /* Neutral depth: canvas → surface → raised surface */
  --ds-canvas: #0a0607;
  --ds-canvas-elevated: #13090b;
  --ds-surface: #1c0f12;
  --ds-surface-raised: #2a1519;
  --ds-surface-input: #160b0e;

  /* Reading hierarchy: all body levels remain legible on the dark stack. */
  --ds-text-strong: #fff8ec;
  --ds-text: #f2e7d6;
  --ds-text-muted: #cbbcad;
  --ds-text-faint: #9c8f87;

  /* Brand roles: gold leads; ruby is reserved for emphasis and urgency. */
  --ds-brand: #d6ae67;
  --ds-brand-strong: #f2d49a;
  --ds-brand-highlight: #ffe9b5;
  --ds-accent: #8e2633;
  --ds-accent-strong: #bd3e4b;
  --ds-positive: #b7d19a;
  --ds-warning: #f1c56f;
  --ds-danger: #ef9b93;
  --ds-on-brand: #1a1008;
  --ds-on-accent: #fff5ef;

  --ds-line-subtle: rgba(242,212,154,.16);
  --ds-line-default: rgba(242,212,154,.31);
  --ds-line-strong: rgba(255,233,181,.48);
  --ds-state-positive-bg: rgba(183,209,154,.12);
  --ds-state-warning-bg: rgba(241,197,111,.12);
  --ds-state-danger-bg: rgba(239,155,147,.12);

  --ds-surface-editorial: linear-gradient(145deg,rgba(62,20,29,.72),rgba(16,7,9,.96) 64%);
  --ds-surface-raised-editorial: linear-gradient(124deg,rgba(255,248,236,.065),transparent 25%),var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg,rgba(255,248,236,.055),#160b0e);
  --ds-depth-canvas: linear-gradient(155deg,#15090b 0%,var(--ds-canvas) 42%,#100608 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(142,38,51,.20),transparent 63%),radial-gradient(42rem 34rem at 0 78%,rgba(214,174,103,.09),transparent 66%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,248,236,.055),transparent 42%),linear-gradient(160deg,#1f1013,#12080a);
  --ds-depth-card: linear-gradient(145deg,rgba(255,248,236,.08),transparent 40%),linear-gradient(160deg,#2a1418,#180a0d);
  --ds-depth-elevated: linear-gradient(145deg,rgba(255,248,236,.11),transparent 43%),linear-gradient(160deg,#35171d,#1c0a0e);
  --ds-depth-overlay: linear-gradient(155deg,rgba(57,16,25,.97),rgba(10,4,5,.99));
  --ds-card-light: linear-gradient(135deg,rgba(255,248,236,.105),transparent 25%,transparent 72%,rgba(214,174,103,.05));
  --ds-glow-brand: 0 0 30px -13px rgba(242,212,154,.40);
  --ds-glow-accent: 0 0 36px -17px rgba(189,62,75,.40);
  --ds-hairline-subtle: rgba(242,212,154,.11);
  --ds-hairline-default: rgba(242,212,154,.24);
  --ds-hairline-strong: rgba(255,233,181,.46);
  --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent);

  --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand));
  --ds-action-primary-fg: var(--ds-on-brand);
  --ds-action-secondary-bg: linear-gradient(135deg,var(--ds-accent-strong),var(--ds-accent));
  --ds-action-secondary-fg: var(--ds-on-accent);
  --ds-action-ghost-fg: var(--ds-text-muted);
  --ds-action-focus: 0 0 0 3px rgba(242,212,154,.23),0 0 0 5px rgba(10,6,7,.92);
}

html[data-theme="light"] {
  --ds-canvas: #fff9ef;
  --ds-canvas-elevated: #fffdf8;
  --ds-surface: #f4e7d7;
  --ds-surface-raised: #fff3e5;
  --ds-surface-input: #fffdf9;
  --ds-text-strong: #281315;
  --ds-text: #3c2425;
  --ds-text-muted: #68514e;
  --ds-text-faint: #856e69;
  --ds-brand: #9a681c;
  --ds-brand-strong: #754b12;
  --ds-brand-highlight: #e9bd68;
  --ds-accent: #8b2632;
  --ds-accent-strong: #6e1721;
  --ds-positive: #356744;
  --ds-warning: #935f13;
  --ds-danger: #963c39;
  --ds-on-brand: #211206;
  --ds-on-accent: #fff7f3;
  --ds-line-subtle: rgba(92,57,38,.16);
  --ds-line-default: rgba(92,57,38,.30);
  --ds-line-strong: rgba(92,57,38,.48);
  --ds-state-positive-bg: rgba(53,103,68,.10);
  --ds-state-warning-bg: rgba(147,95,19,.11);
  --ds-state-danger-bg: rgba(150,60,57,.10);
  --ds-surface-editorial: linear-gradient(145deg,#fffefa,#f8e9d8);
  --ds-surface-raised-editorial: linear-gradient(124deg,rgba(255,255,255,.76),transparent 25%),var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg,#fffefa,#faeee0);
  --ds-depth-canvas: linear-gradient(155deg,#fffdf7 0%,var(--ds-canvas) 44%,#f4e5d3 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(139,38,50,.09),transparent 63%),radial-gradient(42rem 34rem at 0 78%,rgba(154,104,28,.13),transparent 67%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,255,255,.92),transparent 50%),linear-gradient(160deg,#fffdf9,#f8eadb);
  --ds-depth-card: linear-gradient(145deg,rgba(255,255,255,.98),transparent 54%),linear-gradient(160deg,#fffefa,#f5e4d0);
  --ds-depth-elevated: linear-gradient(145deg,#fff 0%,transparent 56%),linear-gradient(160deg,#fffdf9,#f0dcc2);
  --ds-depth-overlay: linear-gradient(155deg,rgba(255,253,248,.98),rgba(247,232,212,.99));
  --ds-card-light: linear-gradient(135deg,rgba(255,255,255,.76),transparent 27%,transparent 72%,rgba(154,104,28,.05));
  --ds-glow-brand: 0 0 28px -14px rgba(154,104,28,.28);
  --ds-glow-accent: 0 0 34px -18px rgba(139,38,50,.24);
  --ds-hairline-subtle: rgba(92,57,38,.12);
  --ds-hairline-default: rgba(92,57,38,.24);
  --ds-hairline-strong: rgba(92,57,38,.42);
  --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent);
  --ds-action-primary-bg: linear-gradient(135deg,#f0cc83,var(--ds-brand));
  --ds-action-secondary-bg: linear-gradient(135deg,#b84652,var(--ds-accent));
  --ds-action-focus: 0 0 0 3px rgba(154,104,28,.18),0 0 0 5px rgba(255,253,248,.96);
  --s-bg: var(--ds-canvas); --s-bg-2: var(--ds-canvas-elevated); --s-bg-3: var(--ds-surface); --s-wine: var(--ds-surface-raised); --s-wine-2: var(--ds-accent);
  --s-text: var(--ds-text); --s-heading: var(--ds-text-strong); --s-muted: var(--ds-text-muted); --s-faint: var(--ds-text-faint); --s-line: var(--ds-line-subtle); --s-line-2: var(--ds-line-default); --s-brand: var(--ds-brand); --s-brand-2: var(--ds-brand-strong); --s-ok: var(--ds-positive); --s-warn: var(--ds-warning); --s-err: var(--ds-danger);
}

/* State color never replaces body contrast; it supplies only a concise signal. */
body { color:var(--ds-text); }
a:not(.btn) { color:var(--ds-brand-strong); text-decoration-color:var(--ds-line-default); text-underline-offset:.16em; }
a:not(.btn):hover { color:var(--ds-brand-highlight); text-decoration-color:currentColor; }
label { color:var(--ds-brand-strong); }
.flash { color:var(--ds-text); background:linear-gradient(90deg,rgba(214,174,103,.11),transparent 68%),var(--ds-surface-raised); border-left-color:var(--ds-brand); }
.flash.ok { color:var(--ds-text); border-left-color:var(--ds-positive); background:linear-gradient(90deg,var(--ds-state-positive-bg),transparent 68%),var(--ds-surface-raised); }
.flash.warn { color:var(--ds-text); border-left-color:var(--ds-warning); background:linear-gradient(90deg,var(--ds-state-warning-bg),transparent 68%),var(--ds-surface-raised); }
.flash.err { color:var(--ds-text); border-left-color:var(--ds-danger); background:linear-gradient(90deg,var(--ds-state-danger-bg),transparent 68%),var(--ds-surface-raised); }
.seal,.hc-chip { color:var(--ds-brand-strong); background:rgba(214,174,103,.10); }
::selection { background:var(--ds-brand); color:var(--ds-on-brand); }

/* ── V22 · ACCENT GOVERNANCE ──────────────────────────────────────────────
   Ouro chama para agir ou escolher; rubi sinaliza compra, conteúdo pago e
   urgência. Todo o resto usa neutros, para que cada acento conserve potência. */
:root {
  --ds-attention-gold: var(--ds-brand-strong);
  --ds-attention-gold-wash: rgba(242,212,154,.10);
  --ds-attention-gold-line: rgba(242,212,154,.42);
  --ds-attention-ruby: var(--ds-accent-strong);
  --ds-attention-ruby-wash: rgba(189,62,75,.14);
  --ds-interaction-hover: rgba(255,248,236,.065);
  --ds-interaction-selected: rgba(242,212,154,.075);
}
html[data-theme="light"] {
  --ds-attention-gold: var(--ds-brand-strong);
  --ds-attention-gold-wash: rgba(154,104,28,.09);
  --ds-attention-gold-line: rgba(117,75,18,.40);
  --ds-attention-ruby: var(--ds-accent);
  --ds-attention-ruby-wash: rgba(139,38,50,.10);
  --ds-interaction-hover: rgba(60,36,37,.05);
  --ds-interaction-selected: rgba(154,104,28,.07);
}

/* Quiet by default: a link earns gold only through hover, focus, or selection. */
a:not(.btn) { color:inherit; text-decoration-color:var(--ds-line-default); }
a:not(.btn):hover,a:not(.btn):focus-visible { color:var(--ds-attention-gold); text-decoration-color:currentColor; }
label,.stat .l,.secao .mais,.hc-nome { color:var(--ds-text-muted); }
.secao .mais:hover,.secao .mais:focus-visible { color:var(--ds-attention-gold); }

/* Navigation and tabs stay neutral until the current destination is explicit. */
.topbar .nav a,.topbar .nav button.linklike { color:var(--ds-text-muted); }
.topbar .nav a:not(.btn):hover,.topbar .nav a.on,.topbar .nav button.linklike:hover { color:var(--ds-text-strong); }
.topbar .nav a.on::after,.topbar .nav a:hover::after,.topbar .nav button.linklike:hover::after { box-shadow:none; background:var(--ds-attention-gold); }
.tabs a { color:var(--ds-text-muted); background:transparent; border-color:transparent; }
.tabs a:not(.on):hover { color:var(--ds-text); background:var(--ds-interaction-hover); border-color:transparent; }
.tabs a.on { color:var(--ds-text-strong); background:transparent; border-color:transparent; box-shadow:inset 0 -2px 0 var(--ds-attention-gold); }

/* Informational labels no longer compete with conversion or status. */
.seal,.seal-ai,.seal-free,.seal-bonus { color:var(--ds-text-muted); background:rgba(255,248,236,.035); border-color:var(--ds-line-default); box-shadow:none; }
.seal-verified { color:var(--ds-text-strong); background:var(--ds-state-positive-bg); border-color:var(--ds-positive); box-shadow:none; }
.seal-pending { color:var(--ds-warning); background:var(--ds-state-warning-bg); border-color:var(--ds-warning); }
.seal-paid { color:var(--ds-on-accent); background:linear-gradient(135deg,var(--ds-attention-ruby),var(--ds-accent)); border-color:var(--ds-attention-ruby); }
.nav a.hc-chip,.hc-chip { color:var(--ds-text-muted); background:transparent; border-color:var(--ds-line-subtle); box-shadow:none; }
.nav a.hc-chip:hover,.hc-chip:hover { color:var(--ds-text-strong); background:var(--ds-interaction-hover); border-color:var(--ds-line-default); }
.nav a.hc-chip[aria-current] { color:var(--ds-attention-gold); background:var(--ds-attention-gold-wash); border-color:var(--ds-attention-gold-line); }

/* Gold is reserved for monetary value, the current choice, and a true CTA. */
.kicker,.kicker::before { color:var(--ds-attention-gold); }
.kicker::before { background:var(--ds-attention-gold); }
.secao .num { color:var(--ds-text-faint); border-color:var(--ds-line-default); }
.stat .n { color:var(--ds-text-strong); }
.hc-saldo-linha,.hc-total,.hc-modal-total,.hc-presente-preco,.hc-cadeado-preco,.hc-gasto-valor,.sf-alvo,.sf-prioridade,.sf-meu-pts { color:var(--ds-attention-gold); }
.btn,.nav a.btn { box-shadow:none; }
.btn:hover,.nav a.btn:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),0 0 24px -16px rgba(242,212,154,.55); }
.btn.hot:hover,.btn.secondary:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),0 0 24px -16px rgba(189,62,75,.58); }

/* Interaction gets one precise signal, instead of a gold/ruby wash everywhere. */
.chat .list a:hover { background:var(--ds-interaction-hover); }
.chat .list a.on { color:var(--ds-text-strong); background:var(--ds-interaction-selected); box-shadow:inset 2px 0 0 var(--ds-attention-gold); }
.chat .list a:hover::after,.chat .list a.on::after { border-color:transparent; }
.chat .list a.on::after { border-color:var(--ds-attention-gold); }
.mcard:hover .legenda h3 { color:var(--ds-attention-gold); }
.hc-barra-v { background:linear-gradient(180deg,var(--ds-attention-gold),var(--ds-brand)); }
.bubble.hc-gasto { border-color:var(--ds-attention-ruby); background:radial-gradient(120% 120% at 100% 0%,var(--ds-attention-gold-wash),transparent 60%),var(--ds-attention-ruby-wash); }

/* ── V23 · ICON LANGUAGE ──────────────────────────────────────────────────
   Ícones de interface obedecem uma única escala óptica e alvo de toque.
   Presentes e emoji permanecem conteúdo do produto, não “ícones” de UI. */
:root { --ds-icon-xs:12px; --ds-icon-sm:16px; --ds-icon-md:20px; --ds-icon-lg:28px; --ds-icon-touch:44px; --ds-icon-gap:8px; --ds-icon-ease:var(--ds-duration-fast) var(--ds-ease-out); }

/* Theme control: consistent vector sun, never a fallback text glyph. */
.oh-theme { width:var(--ds-icon-touch); min-width:var(--ds-icon-touch); height:var(--ds-icon-touch); min-height:var(--ds-icon-touch); }
.oh-theme-glyph { display:block; width:var(--ds-icon-sm); height:var(--ds-icon-sm); background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2.5v2.25M12 19.25v2.25M21.5 12h-2.25M4.75 12H2.5M18.72 5.28l-1.6 1.6M6.88 17.12l-1.6 1.6M18.72 18.72l-1.6-1.6M6.88 6.88l-1.6-1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2.5v2.25M12 19.25v2.25M21.5 12h-2.25M4.75 12H2.5M18.72 5.28l-1.6 1.6M6.88 17.12l-1.6 1.6M18.72 18.72l-1.6-1.6M6.88 6.88l-1.6-1.6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* All icon actions meet the same accessible touch target. */
.btn.icon,.menu-toggle,.oh-theme { width:var(--ds-icon-touch); min-width:var(--ds-icon-touch); height:var(--ds-icon-touch); min-height:var(--ds-icon-touch); display:inline-grid; place-items:center; }
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after { width:var(--ds-icon-md); height:2px; border-radius:2px; transform-origin:center; transition:transform var(--ds-icon-ease),opacity var(--ds-icon-ease),background-color var(--ds-icon-ease); }
.menu-toggle[aria-expanded="true"] span { background-color:transparent; }
.menu-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }

/* Inline symbols sit on a shared center instead of wandering across baselines. */
.btn .seta,.hc-ico,.sf-selo-emoji { display:inline-grid; place-items:center; flex:0 0 auto; vertical-align:middle; line-height:1; }
.btn .seta { width:var(--ds-icon-sm); height:var(--ds-icon-sm); margin-inline-start:2px; font-family:ui-sans-serif,"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif; font-size:var(--ds-icon-sm); font-weight:500; }
.hc-ico { width:var(--ds-icon-sm); height:var(--ds-icon-sm); font-size:var(--ds-icon-sm); vertical-align:middle; }
.hc-ico.lg { width:var(--ds-icon-lg); height:var(--ds-icon-lg); font-size:var(--ds-icon-lg); }
.hc-chip { gap:var(--ds-icon-gap); min-height:40px; }
.hc-total .hc-ico { width:var(--ds-icon-md); height:var(--ds-icon-md); font-size:var(--ds-icon-md); }
.hc-saldo-linha .hc-ico,.hc-modal-total .hc-ico { width:var(--ds-icon-lg); height:var(--ds-icon-lg); font-size:var(--ds-icon-lg); }
.sf-selo-emoji { width:var(--ds-icon-xs); height:var(--ds-icon-xs); font-family:ui-sans-serif,"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif; font-size:var(--ds-icon-xs); }

/* The four product-use cues become one 1.8px line icon family. */
.hc-uso-ico { display:grid; place-items:center; width:40px; height:40px; color:var(--ds-priority-2); font-size:0; line-height:1; }
.hc-uso-ico::before { content:""; display:block; width:var(--ds-icon-md); height:var(--ds-icon-md); background-color:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.hc-uso:nth-child(1) .hc-uso-ico::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4.5 7 7.5 5 7.5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4.5 7 7.5 5 7.5-5'/%3E%3C/svg%3E"); }
.hc-uso:nth-child(2) .hc-uso-ico::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3.5 2.6 5.27 5.82.85-4.21 4.1.99 5.8L12 16.78l-5.2 2.74.99-5.8-4.21-4.1 5.82-.85z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3.5 2.6 5.27 5.82.85-4.21 4.1.99 5.8L12 16.78l-5.2 2.74.99-5.8-4.21-4.1 5.82-.85z'/%3E%3C/svg%3E"); }
.hc-uso:nth-child(3) .hc-uso-ico::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M12 10v10M4 13h16M6.5 10V7a2.5 2.5 0 0 1 5 0v3M17.5 10V7a2.5 2.5 0 0 0-5 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M12 10v10M4 13h16M6.5 10V7a2.5 2.5 0 0 1 5 0v3M17.5 10V7a2.5 2.5 0 0 0-5 0'/%3E%3C/svg%3E"); }
.hc-uso:nth-child(4) .hc-uso-ico::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E"); }

@media (max-width:820px) { .btn.icon,.menu-toggle,.oh-theme { width:var(--ds-icon-touch); min-width:var(--ds-icon-touch); height:var(--ds-icon-touch); min-height:var(--ds-icon-touch); } }

/* ── V24 · FORM ATELIER ───────────────────────────────────────────────────
   Controles de formulário deixam de ser campos genéricos: label contextual,
   placeholder calmo, ícone de orientação e estados nítidos sem ruído. */
:root {
  --ds-field-height: 50px;
  --ds-field-padding-x: 16px;
  --ds-field-padding-y: 13px;
  --ds-field-gap: 8px;
  --ds-field-bg: linear-gradient(145deg,rgba(255,248,236,.055),transparent 58%),var(--ds-surface-input);
  --ds-field-hover-bg: linear-gradient(145deg,rgba(255,248,236,.075),transparent 58%),var(--ds-surface-input);
  --ds-field-focus-bg: linear-gradient(145deg,rgba(242,212,154,.085),transparent 62%),var(--ds-surface-input);
  --ds-field-success: var(--ds-positive);
  --ds-field-error: var(--ds-danger);
  --ds-field-focus-ring: 0 0 0 3px rgba(242,212,154,.16),0 0 0 5px rgba(10,6,7,.88);
}
html[data-theme="light"] {
  --ds-field-bg: linear-gradient(145deg,rgba(255,255,255,.92),transparent 64%),var(--ds-surface-input);
  --ds-field-hover-bg: linear-gradient(145deg,rgba(255,255,255,1),transparent 64%),var(--ds-surface-input);
  --ds-field-focus-bg: linear-gradient(145deg,rgba(233,189,104,.16),transparent 64%),var(--ds-surface-input);
  --ds-field-focus-ring: 0 0 0 3px rgba(154,104,28,.15),0 0 0 5px rgba(255,253,248,.95);
}

form > label:not(.check) { display:flex; align-items:center; gap:var(--ds-field-gap); margin:var(--ds-space-4) 0 var(--ds-field-gap); padding:0; color:var(--ds-text-muted); font-family:var(--ds-font-body); font-size:var(--ds-type-label); font-weight:var(--ds-weight-semibold); letter-spacing:var(--ds-tracking-label); line-height:1.25; text-transform:uppercase; transition:color var(--ds-duration-fast) var(--ds-ease-standard); }
form > label:not(.check)::before { content:""; position:static; display:block; width:var(--ds-icon-xs); height:var(--ds-icon-xs); flex:0 0 var(--ds-icon-xs); border:0; transform:none; background-color:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E"); }
label[for*="email"]::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4.5 7 7.5 5 7.5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4.5 7 7.5 5 7.5-5'/%3E%3C/svg%3E"); }
label[for*="password"]::before,label[for*="-cur"]::before,label[for*="-new"]::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E"); }
label[for*="name"]::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5.5 19c.7-3.2 3-5 6.5-5s5.8 1.8 6.5 5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5.5 19c.7-3.2 3-5 6.5-5s5.8 1.8 6.5 5'/%3E%3C/svg%3E"); }
label[for*="dob"]::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='1.5'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='1.5'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E"); }
label[for*="bio"]::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 18.5 1.2-4.2L15.8 4.7a1.8 1.8 0 0 1 2.5 2.5l-9.6 9.6zM13.8 6.7l3.5 3.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 18.5 1.2-4.2L15.8 4.7a1.8 1.8 0 0 1 2.5 2.5l-9.6 9.6zM13.8 6.7l3.5 3.5'/%3E%3C/svg%3E"); }

form > :is(input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea) { width:100%; min-height:var(--ds-field-height); margin:0 0 var(--ds-space-related); padding:var(--ds-field-padding-y) var(--ds-field-padding-x); border:1px solid var(--ds-hairline-default); border-radius:var(--ds-radius-control); background:var(--ds-field-bg); color:var(--ds-text); box-shadow:inset 0 1px 0 rgba(255,248,236,.055),inset 0 -1px 0 rgba(0,0,0,.12); font-family:var(--ds-font-body); font-size:var(--ds-type-small); font-weight:var(--ds-weight-regular); line-height:var(--ds-leading-compact); transition:background var(--ds-duration-base) var(--ds-ease-standard),border-color var(--ds-duration-base) var(--ds-ease-standard),box-shadow var(--ds-duration-base) var(--ds-ease-standard),color var(--ds-duration-base) var(--ds-ease-standard),opacity var(--ds-duration-fast) var(--ds-ease-standard); }
form > textarea { min-height:132px; resize:vertical; line-height:1.55; }
form > :is(input,select,textarea)::placeholder { color:var(--ds-text-faint); opacity:1; }
form > :is(input,select,textarea):hover:not(:disabled) { border-color:var(--ds-hairline-strong); background:var(--ds-field-hover-bg); }
form > :is(input,select,textarea):focus { outline:0; border-color:var(--ds-attention-gold); background:var(--ds-field-focus-bg); box-shadow:inset 0 1px 0 rgba(255,248,236,.085),var(--ds-field-focus-ring); }
form > :is(input,select,textarea):focus::placeholder { color:var(--ds-text-muted); }
form > :is(input,select,textarea)[data-oh-state="filled"] { color:var(--ds-text-strong); }
form > :is(input,select,textarea)[data-oh-state="success"],form > :is(input,select,textarea).is-success,form > :is(input,select,textarea)[aria-invalid="false"] { border-color:var(--ds-field-success); background:linear-gradient(90deg,var(--ds-state-positive-bg),transparent 58%),var(--ds-field-bg); }
form > :is(input,select,textarea)[data-oh-state="error"],form > :is(input,select,textarea).is-error,form > :is(input,select,textarea)[aria-invalid="true"],form > :is(input,select,textarea):user-invalid { border-color:var(--ds-field-error); background:linear-gradient(90deg,var(--ds-state-danger-bg),transparent 58%),var(--ds-field-bg); box-shadow:inset 2px 0 0 var(--ds-field-error); }
form > :is(input,select,textarea):disabled,form > :is(input,select,textarea)[aria-disabled="true"] { cursor:not-allowed; color:var(--ds-text-faint); background:rgba(255,248,236,.025); border-color:var(--ds-hairline-subtle); opacity:.62; box-shadow:none; }
form > label:not(.check):has(+ :is(input,select,textarea):focus) { color:var(--ds-attention-gold); }
form > label:not(.check):has(+ :is(input,select,textarea)[data-oh-state="error"]),form > label:not(.check):has(+ :is(input,select,textarea).is-error),form > label:not(.check):has(+ :is(input,select,textarea)[aria-invalid="true"]) { color:var(--ds-field-error); }
form > label:not(.check):has(+ :is(input,select,textarea)[data-oh-state="success"]),form > label:not(.check):has(+ :is(input,select,textarea).is-success) { color:var(--ds-field-success); }

.check { position:relative; gap:var(--ds-space-inline); padding:var(--ds-space-3); border-radius:var(--ds-radius-control); color:var(--ds-text-muted); background:rgba(255,248,236,.025); transition:background var(--ds-duration-base) var(--ds-ease-standard),color var(--ds-duration-base) var(--ds-ease-standard); }
.check:has(input:focus) { color:var(--ds-text); background:var(--ds-interaction-hover); }
.check input[type=checkbox] { inline-size:18px; block-size:18px; flex:0 0 18px; margin:1px 0 0; accent-color:var(--ds-brand); }
.check input[type=checkbox]:user-invalid { outline:2px solid var(--ds-field-error); outline-offset:2px; }
.field-help,.field-error,.field-success { display:block; margin-top:calc(var(--ds-field-gap) * -1); margin-bottom:var(--ds-space-related); padding-inline:var(--ds-space-1); font-size:var(--ds-type-caption); line-height:1.45; }
.field-help { color:var(--ds-text-faint); }.field-error { color:var(--ds-field-error); }.field-success { color:var(--ds-field-success); }

@media (max-width:820px) { form > :is(input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=url],select,textarea) { min-height:52px; font-size:max(var(--ds-type-small),16px); } }

/* ── V25 · COVER DIRECTION ────────────────────────────────────────────────
   A home lê como capa: marca discreta, promessa em primeiro plano e uma
   única decisão dominante. A ação secundária continua disponível, sem competir. */
:root {
  --ds-cover-ink: rgba(7,3,4,.94);
  --ds-cover-mid: rgba(7,3,4,.61);
  --ds-cover-quiet: rgba(255,248,236,.73);
  --ds-cover-measure: 8.2ch;
  --ds-cover-action-height: 54px;
}
html[data-theme="light"] {
  --ds-cover-ink: rgba(255,250,243,.94);
  --ds-cover-mid: rgba(255,250,243,.60);
  --ds-cover-quiet: rgba(60,36,37,.76);
}

/* The header becomes a quiet masthead whenever a campaign cover is present. */
body:has(.hero) .topbar { background:linear-gradient(180deg,rgba(12,5,7,.88),rgba(12,5,7,.66)); box-shadow:inset 0 -1px 0 rgba(255,248,236,.06); }
html[data-theme="light"] body:has(.hero) .topbar { background:linear-gradient(180deg,rgba(255,253,248,.90),rgba(255,250,243,.68)); box-shadow:inset 0 -1px 0 rgba(60,36,37,.08); }
body:has(.hero) .topbar .nav:not(.right) a,body:has(.hero) .topbar .nav.right > :not(.btn,.oh-controls) { opacity:.82; }
body:has(.hero) .topbar .nav a.btn { min-height:36px; padding-inline:var(--ds-space-3); color:var(--ds-text-muted); background:transparent; border-color:var(--ds-line-default); box-shadow:none; }
body:has(.hero) .topbar .nav a.btn:hover { color:var(--ds-text-strong); background:var(--ds-interaction-hover); border-color:var(--ds-line-strong); transform:none; }

/* Cover composition: the image is scenery; the promise is the subject. */
.hero { display:grid; align-items:end; min-height:clamp(680px,92vh,980px); padding-top:clamp(112px,16vh,180px); padding-bottom:clamp(72px,11vw,144px); background-position:center; }
.hero::before { z-index:0; background:linear-gradient(90deg,var(--ds-cover-ink) 0%,var(--ds-cover-mid) 38%,rgba(7,3,4,.10) 69%,transparent 100%); }
.hero::after { z-index:1; opacity:.78; }
.hero .texto { position:relative; z-index:2; width:min(100%,760px); max-width:760px; padding:0; animation:oh-reveal .95s var(--ds-ease-out) both; }
.hero .texto > .kicker { margin-bottom:var(--ds-space-4); padding-left:0; color:var(--ds-attention-gold); text-shadow:none; }
.hero .texto > .kicker::before { width:42px; background:var(--ds-attention-gold); }
.hero h1 { max-width:var(--ds-cover-measure); margin:0 0 var(--ds-space-5); color:var(--ds-text-strong); font-size:clamp(62px,8.8vw,128px); line-height:.82; letter-spacing:-.075em; text-wrap:balance; text-shadow:0 18px 58px rgba(0,0,0,.66); }
.hero h1 em { color:inherit; }
.hero p { width:min(100%,46ch); max-width:46ch; margin:0; padding:0; border:0; color:var(--ds-cover-quiet); font-size:clamp(17px,1.35vw,20px); line-height:1.6; text-wrap:pretty; }
.hero .acoes { align-items:center; gap:var(--ds-space-3); margin-top:var(--ds-space-6); }
.hero .acoes .btn:first-child { min-width:220px; min-height:var(--ds-cover-action-height); padding-inline:var(--ds-space-5); font-size:var(--ds-type-label); box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),0 16px 38px -23px rgba(242,212,154,.52); }
.hero .acoes .btn:first-child:hover { box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated),0 20px 44px -22px rgba(242,212,154,.68); }
.hero .acoes .btn.ghost { min-height:42px; padding-inline:var(--ds-space-2); color:var(--ds-cover-quiet); background:transparent; border-color:transparent; box-shadow:none; }
.hero .acoes .btn.ghost:hover { color:var(--ds-text-strong); background:transparent; border-color:transparent; box-shadow:none; transform:none; text-decoration:underline; text-decoration-color:var(--ds-attention-gold); text-underline-offset:.45em; }

@media (max-width:820px) {
  .hero { min-height:calc(100svh - 66px); padding:clamp(92px,15svh,132px) var(--ds-layout-gutter) clamp(52px,9svh,84px); }
  .hero::before { background:linear-gradient(180deg,var(--ds-cover-ink) 0%,var(--ds-cover-mid) 47%,rgba(7,3,4,.14) 100%); }
  .hero .texto { max-width:100%; }
  .hero h1 { max-width:7.1ch; font-size:clamp(56px,16.6vw,82px); line-height:.84; }
  .hero p { max-width:34ch; font-size:17px; }
  .hero .acoes { align-items:flex-start; flex-direction:column; margin-top:var(--ds-space-5); }
  .hero .acoes .btn:first-child { width:100%; min-width:0; }
  .hero .acoes .btn.ghost { padding-left:0; }
  body:has(.hero) .topbar .nav a.btn { min-height:var(--ds-action-height-sm); }
}

/* ── V26 · MASTHEAD NAVIGATION ────────────────────────────────────────────
   Uma barra de navegação deve orientar, não disputar atenção: rotas em nível
   baixo, estado ativo inequívoco, ação de conta discreta e sticky responsivo. */
:root {
  --ds-nav-height: 74px;
  --ds-nav-height-compact: 62px;
  --ds-nav-control-height: 40px;
  --ds-nav-gap: 4px;
  --ds-nav-item-padding: 0 12px;
  --ds-nav-hover: rgba(255,248,236,.055);
  --ds-nav-active: rgba(242,212,154,.09);
  --ds-nav-focus: 0 0 0 2px rgba(242,212,154,.28),0 0 0 4px rgba(10,6,7,.86);
}
html[data-theme="light"] {
  --ds-nav-hover: rgba(60,36,37,.055);
  --ds-nav-active: rgba(154,104,28,.09);
  --ds-nav-focus: 0 0 0 2px rgba(117,75,18,.25),0 0 0 4px rgba(255,253,248,.94);
}

.topbar { position:sticky; top:0; min-height:var(--ds-nav-height); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:var(--ds-space-4); align-items:center; padding-inline:clamp(16px,4vw,48px); transition:min-height var(--ds-duration-base) var(--ds-ease-standard),background var(--ds-duration-base) var(--ds-ease-standard),box-shadow var(--ds-duration-base) var(--ds-ease-standard); }
.topbar[data-oh-scrolled="true"] { min-height:var(--ds-nav-height-compact); background:linear-gradient(180deg,rgba(13,6,8,.96),rgba(10,5,6,.93)); box-shadow:var(--ds-highlight-top),0 14px 28px -24px rgba(0,0,0,.80); }
html[data-theme="light"] .topbar[data-oh-scrolled="true"] { background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(255,249,240,.93)); box-shadow:var(--ds-highlight-top),0 13px 25px -23px rgba(72,38,22,.28); }
.topbar .logo { justify-self:center; display:inline-flex; align-items:center; min-height:var(--ds-nav-control-height); padding:4px 0; }
.topbar .logo .logotipo { width:clamp(124px,10vw,150px); transition:filter var(--ds-duration-base) var(--ds-ease-standard),transform var(--ds-duration-fast) var(--ds-ease-out); }
.topbar .logo:hover .logotipo { filter:drop-shadow(0 5px 15px rgba(242,212,154,.26)); transform:translateY(-1px); }
.topbar .nav { display:flex; align-items:center; gap:var(--ds-nav-gap); min-width:0; }
.topbar .nav.left { justify-self:start; }.topbar .nav.right { justify-self:end; }
.topbar .nav a:not(.btn,.hc-chip),.topbar .nav button.linklike { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:var(--ds-nav-control-height); padding:var(--ds-nav-item-padding); border:0; border-radius:var(--ds-radius-control); color:var(--ds-text-muted); background:transparent; font-size:var(--ds-type-label); font-weight:var(--ds-weight-medium); letter-spacing:var(--ds-tracking-label); line-height:1; text-decoration:none; transition:color var(--ds-duration-fast) var(--ds-ease-standard),background var(--ds-duration-fast) var(--ds-ease-standard),transform var(--ds-duration-fast) var(--ds-ease-out); }
.topbar .nav a:not(.btn,.hc-chip)::after,.topbar .nav button.linklike::after { content:""; position:absolute; left:var(--ds-space-3); right:var(--ds-space-3); bottom:5px; height:1px; border-radius:1px; background:var(--ds-attention-gold); box-shadow:none; transform:scaleX(0); transform-origin:center; transition:transform var(--ds-duration-fast) var(--ds-ease-out); }
.topbar .nav a:not(.btn,.hc-chip):hover,.topbar .nav button.linklike:hover { color:var(--ds-text); background:var(--ds-nav-hover); transform:translateY(-1px); }
.topbar .nav a:not(.btn,.hc-chip):hover::after,.topbar .nav button.linklike:hover::after { transform:scaleX(.45); }
.topbar .nav a.on:not(.btn,.hc-chip),.topbar .nav a[aria-current="page"]:not(.btn,.hc-chip) { color:var(--ds-text-strong); background:var(--ds-nav-active); }
.topbar .nav a.on:not(.btn,.hc-chip)::after,.topbar .nav a[aria-current="page"]:not(.btn,.hc-chip)::after { transform:scaleX(1); }
.topbar .nav a:not(.btn,.hc-chip):focus-visible,.topbar .nav button.linklike:focus-visible,.topbar .logo:focus-visible { outline:0; box-shadow:var(--ds-nav-focus); }
.topbar .nav a.btn { min-height:var(--ds-nav-control-height); padding-inline:var(--ds-space-4); letter-spacing:var(--ds-tracking-label); }
.topbar .nav .hc-chip { min-height:var(--ds-nav-control-height); margin-left:var(--ds-space-1); }
.topbar .oh-controls { min-height:var(--ds-nav-control-height); margin-inline:0 var(--ds-space-1); }
.topbar .oh-language { min-height:var(--ds-nav-control-height); }

@media (max-width:820px) {
  .topbar { min-height:66px; grid-template-columns:minmax(0,1fr) auto auto; column-gap:var(--ds-space-2); padding-inline:var(--ds-layout-gutter); }
  .topbar[data-oh-scrolled="true"] { min-height:60px; }
  .topbar .logo { justify-self:start; }.topbar .logo .logotipo { width:124px; }
  .menu-toggle { justify-self:end; }
  .topbar .nav.right { grid-column:1 / -1; justify-self:stretch; width:100%; gap:var(--ds-space-1); padding:var(--ds-space-2) 0 var(--ds-space-3); }
  .topbar .nav a:not(.btn,.hc-chip),.topbar .nav button.linklike { width:100%; min-height:44px; justify-content:flex-start; padding-inline:var(--ds-space-3); }
  .topbar .nav a:not(.btn,.hc-chip)::after,.topbar .nav button.linklike::after { left:var(--ds-space-3); right:auto; width:3px; height:18px; bottom:auto; top:50%; transform:translateY(-50%) scaleY(0); }
  .topbar .nav a:not(.btn,.hc-chip):hover::after { transform:translateY(-50%) scaleY(.48); }
  .topbar .nav a.on:not(.btn,.hc-chip)::after,.topbar .nav a[aria-current="page"]:not(.btn,.hc-chip)::after { transform:translateY(-50%) scaleY(1); }
  .topbar .nav a.btn,.topbar .nav .hc-chip { min-height:44px; }
}

/* ── V27 · NAVIGATION SURFACES ────────────────────────────────────────────
   Menus, abas e disclosures usam a mesma gramática: direção limpa, estado
   atual evidente e movimento curto, mantendo o conteúdo como protagonista. */
:root {
  --ds-nav-surface: linear-gradient(145deg,rgba(255,248,236,.08),transparent 45%),var(--ds-depth-elevated);
  --ds-nav-surface-line: var(--ds-hairline-default);
  --ds-tab-height: 42px;
  --ds-tab-pad-x: var(--ds-space-3);
  --ds-disclosure-pad: var(--ds-space-3);
  --ds-disclosure-icon: 18px;
  --ds-disclosure-ease: var(--ds-ease-out);
}
html[data-theme="light"] {
  --ds-nav-surface: linear-gradient(145deg,rgba(255,255,255,.94),transparent 58%),var(--ds-depth-elevated);
}

/* Tabs remain a route chooser, not a row of competing buttons. */
.tabs { align-items:center; gap:var(--ds-space-1); min-height:var(--ds-tab-height); padding:var(--ds-space-1); border:1px solid var(--ds-hairline-subtle); border-radius:var(--ds-radius-component); background:linear-gradient(90deg,rgba(255,248,236,.035),transparent 72%); }
.tabs::after { display:none; }
.tabs a { position:relative; display:inline-flex; align-items:center; min-height:calc(var(--ds-tab-height) - var(--ds-space-2)); padding:0 var(--ds-tab-pad-x); margin:0; border:0; border-radius:var(--ds-radius-control); color:var(--ds-text-muted); background:transparent; box-shadow:none; font-weight:var(--ds-weight-medium); text-decoration:none; white-space:nowrap; transition:color var(--ds-duration-fast) var(--ds-ease-standard),background var(--ds-duration-fast) var(--ds-ease-standard),box-shadow var(--ds-duration-fast) var(--ds-ease-standard),transform var(--ds-duration-fast) var(--ds-ease-out); }
.tabs a::before { content:""; position:absolute; left:var(--ds-space-3); right:var(--ds-space-3); bottom:5px; height:1px; border-radius:1px; background:var(--ds-attention-gold); transform:scaleX(0); transition:transform var(--ds-duration-fast) var(--ds-ease-out); }
.tabs a:not(.on):hover { color:var(--ds-text); background:var(--ds-interaction-hover); transform:translateY(-1px); }
.tabs a:not(.on):hover::before { transform:scaleX(.42); }
.tabs a.on,.tabs a[aria-current="page"] { color:var(--ds-text-strong); background:rgba(242,212,154,.09); box-shadow:inset 0 1px 0 rgba(255,248,236,.08); }
.tabs a.on::before,.tabs a[aria-current="page"]::before { transform:scaleX(1); }
.tabs a:focus-visible { outline:0; box-shadow:var(--ds-action-focus); }

/* The mobile navigation becomes a contained menu surface only while expanded. */
@keyframes oh-menu-enter { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes oh-disclosure-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:820px) {
  .tabs { width:100%; max-width:100%; overflow-x:auto; flex-wrap:nowrap; overscroll-behavior-inline:contain; scroll-snap-type:inline proximity; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs a { flex:0 0 auto; scroll-snap-align:start; }
  .topbar.aberto .nav.right { position:relative; margin-top:var(--ds-space-1); padding:var(--ds-space-2); border:1px solid var(--ds-nav-surface-line); border-radius:var(--ds-radius-component); background:var(--ds-nav-surface); box-shadow:var(--ds-highlight-top),var(--ds-shadow-elevated); animation:oh-menu-enter var(--ds-duration-base) var(--ds-ease-out) both; }
  .topbar.aberto .nav.right > * { animation:oh-menu-enter var(--ds-duration-base) var(--ds-ease-out) both; }
  .topbar.aberto .nav.right .oh-controls { order:0; margin:0 0 var(--ds-space-1); }
}

/* Native disclosures retain their semantics and become measured interactive surfaces. */
details.sf-como,details.hc-chat-mimo { position:relative; margin-top:var(--ds-space-4); overflow:hidden; border:1px solid var(--ds-hairline-subtle); border-radius:var(--ds-radius-component); background:rgba(255,248,236,.018); transition:background var(--ds-duration-base) var(--ds-ease-standard),border-color var(--ds-duration-base) var(--ds-ease-standard),box-shadow var(--ds-duration-base) var(--ds-ease-standard); }
details.sf-como { padding-top:0; }
details.sf-como[open],details.hc-chat-mimo[open] { border-color:var(--ds-hairline-default); background:linear-gradient(130deg,rgba(242,212,154,.075),transparent 54%),rgba(255,248,236,.026); box-shadow:inset 0 1px 0 rgba(255,248,236,.07); }
details.sf-como summary,details.hc-chat-mimo summary { display:flex; align-items:center; gap:var(--ds-space-2); min-height:44px; padding:0 var(--ds-disclosure-pad); cursor:pointer; color:var(--ds-text-muted); font-family:var(--ds-font-body); font-size:var(--ds-type-label); font-weight:var(--ds-weight-semibold); letter-spacing:var(--ds-tracking-label); line-height:1.2; text-transform:uppercase; list-style:none; transition:color var(--ds-duration-fast) var(--ds-ease-standard),background var(--ds-duration-fast) var(--ds-ease-standard); }
details.sf-como summary::-webkit-details-marker,details.hc-chat-mimo summary::-webkit-details-marker { display:none; }
details.sf-como summary::after,details.hc-chat-mimo summary::after { content:""; width:var(--ds-disclosure-icon); height:var(--ds-disclosure-icon); flex:0 0 var(--ds-disclosure-icon); margin-left:auto; background:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); transform:rotate(0); transition:transform var(--ds-duration-base) var(--ds-disclosure-ease); }
details.sf-como summary:hover,details.hc-chat-mimo summary:hover { color:var(--ds-text); background:var(--ds-interaction-hover); }
details.sf-como summary:focus-visible,details.hc-chat-mimo summary:focus-visible { outline:0; box-shadow:inset var(--ds-action-focus); }
details.sf-como[open] summary,details.hc-chat-mimo[open] summary { color:var(--ds-attention-gold); }
details.sf-como[open] summary::after,details.hc-chat-mimo[open] summary::after { transform:rotate(180deg); }
details.sf-como > :not(summary),details.hc-chat-mimo > :not(summary) { margin-inline:var(--ds-disclosure-pad); }
details.sf-como[open] > :not(summary),details.hc-chat-mimo[open] > :not(summary) { animation:oh-disclosure-enter var(--ds-duration-base) var(--ds-disclosure-ease) both; }
details.sf-como .sf-escada { margin-top:var(--ds-space-3); margin-bottom:var(--ds-space-3); }
details.hc-chat-mimo > .hc-presentes { margin-bottom:var(--ds-space-3); }

@media (prefers-reduced-motion:reduce) {
  .tabs a,details.sf-como,details.hc-chat-mimo,details.sf-como summary,details.hc-chat-mimo summary,details.sf-como summary::after,details.hc-chat-mimo summary::after { transition:none; }
  .topbar.aberto .nav.right,.topbar.aberto .nav.right > *,details.sf-como[open] > :not(summary),details.hc-chat-mimo[open] > :not(summary) { animation:none; }
}

/* ── V28 · MICROINTERACTION LANGUAGE ──────────────────────────────────────
   A resposta visual é curta e material: aproxima, confirma, retorna. Nenhum
   efeito vira espetáculo; cada mudança comunica disponibilidade ou intenção. */
:root {
  --ds-motion-fast: 140ms;
  --ds-motion-base: 220ms;
  --ds-motion-slow: 360ms;
  --ds-motion-ease: cubic-bezier(.2,.7,.2,1);
  --ds-motion-lift-1: -1px;
  --ds-motion-lift-2: -3px;
  --ds-motion-press: .985;
  --ds-motion-dim: .72;
  --ds-motion-line: var(--ds-hairline-strong);
  --ds-motion-highlight: rgba(242,212,154,.10);
  --ds-motion-shadow: 0 14px 28px -24px rgba(0,0,0,.86);
}
html[data-theme="light"] {
  --ds-motion-highlight: rgba(154,104,28,.09);
  --ds-motion-shadow: 0 14px 28px -25px rgba(72,38,22,.30);
}

/* Direct actions: a minimal lift, then a physical press. */
:is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador,.chat .list a) {
  transition:transform var(--ds-motion-fast) var(--ds-motion-ease),color var(--ds-motion-fast) var(--ds-motion-ease),background var(--ds-motion-base) var(--ds-motion-ease),border-color var(--ds-motion-base) var(--ds-motion-ease),box-shadow var(--ds-motion-base) var(--ds-motion-ease),opacity var(--ds-motion-fast) var(--ds-motion-ease);
}
:is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador,.chat .list a):active { transform:translateY(0) scale(var(--ds-motion-press)); transition-duration:70ms; }
.btn:focus-visible,.menu-toggle:focus-visible,.oh-theme:focus-visible,.hc-presente:focus-visible,.sf-conversa:focus-visible,.chat .list a:focus-visible { outline:0; box-shadow:var(--ds-action-focus); }

/* Text links gain direction without jumping the reading flow. */
main a[href]:not(.btn):not(.mcard):not(.tabs a):not(.nav a):not(.chat .list a):not(.hc-chip):not(.sf-conversa):not(.sf-doador),.foot a[href] {
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  transition:color var(--ds-motion-fast) var(--ds-motion-ease),text-decoration-color var(--ds-motion-fast) var(--ds-motion-ease),opacity var(--ds-motion-fast) var(--ds-motion-ease);
}
main a[href]:not(.btn):not(.mcard):not(.tabs a):not(.nav a):not(.chat .list a):not(.hc-chip):not(.sf-conversa):not(.sf-doador):hover,.foot a[href]:hover { color:var(--ds-text-strong); text-decoration-color:var(--ds-attention-gold); }
main a[href]:not(.btn):not(.mcard):not(.tabs a):not(.nav a):not(.chat .list a):not(.hc-chip):not(.sf-conversa):not(.sf-doador):focus-visible,.foot a[href]:focus-visible { outline:0; text-decoration-color:var(--ds-attention-gold); box-shadow:var(--ds-action-focus); }

/* Selectable visual content changes depth, not scale theatrics. */
.mcard .cover,.mcard .legenda,.post,.post img,.post video,.hc-pack,.sf-meu,.sf-top-lista li,.panel .table-wrap {
  transition:transform var(--ds-motion-base) var(--ds-motion-ease),border-color var(--ds-motion-base) var(--ds-motion-ease),box-shadow var(--ds-motion-base) var(--ds-motion-ease),filter var(--ds-motion-base) var(--ds-motion-ease),background var(--ds-motion-base) var(--ds-motion-ease),opacity var(--ds-motion-fast) var(--ds-motion-ease);
}
.mcard:hover .cover,.mcard:focus-visible .cover { transform:translateY(var(--ds-motion-lift-2)) rotateX(.65deg); box-shadow:var(--ds-highlight-top),var(--ds-motion-shadow); }
.mcard:focus-visible { outline:0; }
.mcard:focus-visible .cover { box-shadow:var(--ds-action-focus),var(--ds-motion-shadow); }
.mcard:hover .cover img { transform:scale(1.045); }
.post:hover { transform:translateY(var(--ds-motion-lift-1)); box-shadow:var(--ds-motion-shadow),0 0 0 1px var(--ds-motion-line); }
.post:hover img,.post:hover video { transform:scale(1.045); filter:saturate(1.035) contrast(1.015); }
.post:focus-within { box-shadow:var(--ds-action-focus); }
.hc-pack:hover { transform:translateY(var(--ds-motion-lift-2)); box-shadow:var(--ds-highlight-top),var(--ds-motion-shadow); }
.hc-pack:focus-within,.sf-meu:focus-within { border-color:var(--ds-motion-line); box-shadow:var(--ds-action-focus); }
.sf-meu:hover,.sf-top-lista li:hover { border-color:var(--ds-motion-line); background:var(--ds-motion-highlight); transform:translateY(var(--ds-motion-lift-1)); }

/* Controls acknowledge availability before focus, then settle on click. */
:is(input,select,textarea):not(:disabled) { transition:transform var(--ds-motion-fast) var(--ds-motion-ease),color var(--ds-motion-fast) var(--ds-motion-ease),background var(--ds-motion-base) var(--ds-motion-ease),border-color var(--ds-motion-base) var(--ds-motion-ease),box-shadow var(--ds-motion-base) var(--ds-motion-ease),opacity var(--ds-motion-fast) var(--ds-motion-ease); }
:is(input,select,textarea):not(:disabled):hover { border-color:var(--ds-motion-line); }
:is(input,select,textarea):not(:disabled):focus { transform:translateY(var(--ds-motion-lift-1)); }
label.check:not(:has(input:disabled)) { transition:transform var(--ds-motion-fast) var(--ds-motion-ease),color var(--ds-motion-fast) var(--ds-motion-ease),background var(--ds-motion-base) var(--ds-motion-ease),box-shadow var(--ds-motion-base) var(--ds-motion-ease); }
label.check:not(:has(input:disabled)):hover { color:var(--ds-text); background:var(--ds-interaction-hover); transform:translateX(2px); }

@media (hover:hover) and (pointer:fine) {
  :is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador):not([disabled]):not([aria-disabled="true"]):hover { transform:translateY(var(--ds-motion-lift-1)); }
  .hc-presente:hover { border-color:var(--ds-attention-gold); background:var(--ds-motion-highlight); box-shadow:var(--ds-highlight-top),var(--ds-shadow-contact); }
  .sf-doador:hover,.sf-conversa:hover { color:var(--ds-text-strong); border-color:var(--ds-motion-line); background:var(--ds-motion-highlight); }
  .chat .list a:hover { transform:translateX(2px); box-shadow:inset 2px 0 0 var(--ds-attention-gold); }
  .panel .table-wrap:hover { box-shadow:inset 0 1px 0 rgba(255,248,236,.055); }
}

@media (prefers-reduced-motion:reduce) {
  :is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador,.chat .list a,.mcard .cover,.mcard .legenda,.post,.post img,.post video,.hc-pack,.sf-meu,.sf-top-lista li,.panel .table-wrap,input,select,textarea,label.check) { transition:none; }
  :is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador,.chat .list a,.mcard .cover,.post,.hc-pack,.sf-meu,.sf-top-lista li,input,select,textarea,label.check):hover,:is(.btn,.menu-toggle,.oh-theme,.hc-presente,.sf-conversa,.sf-doador,.chat .list a):active { transform:none; }
}

/* ── V29 · MOTION SYSTEM ──────────────────────────────────────────────────
   Movimento só existe para orientar: entrada revela contexto, feedback
   confirma intenção e saída encerra uma camada. A página nunca se move por
   ornamento. */
:root {
  --ds-motion-instant: 0ms;
  --ds-motion-feedback: 120ms;
  --ds-motion-fast: 160ms;
  --ds-motion-base: 240ms;
  --ds-motion-enter: 380ms;
  --ds-motion-emphasis: 520ms;
  --ds-motion-exit: 180ms;
  --ds-motion-loop: 780ms;
  --ds-motion-distance-1: 2px;
  --ds-motion-distance-2: 8px;
  --ds-ease-feedback: cubic-bezier(.2,.8,.25,1);
  --ds-ease-enter: cubic-bezier(.16,.8,.22,1);
  --ds-ease-exit: cubic-bezier(.4,0,1,1);
  --ds-ease-standard: cubic-bezier(.2,.7,.2,1);
  --ds-ease-out: var(--ds-ease-enter);
}

@keyframes oh-motion-enter { from { opacity:0; transform:translateY(var(--ds-motion-distance-2)); } to { opacity:1; transform:translateY(0); } }
@keyframes oh-motion-exit { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(calc(var(--ds-motion-distance-1) * -1)); } }
@keyframes oh-feedback-pop { 0% { transform:scale(.96); opacity:.72; } 65% { transform:scale(1.02); opacity:1; } 100% { transform:scale(1); opacity:1; } }

/* Entry belongs only to a new context or a newly-opened layer. */
.hero .texto { animation:oh-motion-enter var(--ds-motion-enter) var(--ds-ease-enter) both; }
.hc-modal[open] { animation:oh-motion-enter var(--ds-motion-base) var(--ds-ease-enter) both; }
@media (max-width:820px) {
  .topbar.aberto .nav.right { animation:oh-motion-enter var(--ds-motion-base) var(--ds-ease-enter) both; }
  .topbar.aberto .nav.right > * { animation:none; }
  .topbar.oh-menu-leaving .nav.right { display:flex; animation:oh-motion-exit var(--ds-motion-exit) var(--ds-ease-exit) both; }
}

/* Feedback is immediate and restrained; no decorative bouncing on hover. */
.hc-presente-emoji { transition:transform var(--ds-motion-feedback) var(--ds-ease-feedback),filter var(--ds-motion-feedback) var(--ds-ease-feedback); }
.hc-presente:hover .hc-presente-emoji { animation:none; transform:translateY(-1px) scale(1.02); }
.bubble.hc-gasto .hc-gasto-emoji { animation:oh-feedback-pop var(--ds-motion-base) var(--ds-ease-feedback) both; }
.hc-ganho { animation:hc-sobe 1500ms var(--ds-ease-enter) forwards; }
.hc-estouro span { animation:hc-estoura 1600ms var(--ds-ease-enter) forwards; }

/* Passive content settles slowly; intentional controls react quickly. */
.mcard .cover,.mcard .cover img,.post img,.post video { transition-duration:var(--ds-motion-emphasis); transition-timing-function:var(--ds-ease-standard); }
.mcard .legenda,.hc-pack,.sf-meu,.sf-top-lista li,.panel,.post { transition-duration:var(--ds-motion-base); transition-timing-function:var(--ds-ease-standard); }
:is(.btn,.menu-toggle,.oh-theme,.tabs a,.nav a,.nav button.linklike,.hc-presente,.sf-conversa,.sf-doador,.chat .list a,details summary,input,select,textarea,label.check) { transition-duration:var(--ds-motion-fast); transition-timing-function:var(--ds-ease-feedback); }
:is(.btn,.menu-toggle,.oh-theme,.tabs a,.nav a,.nav button.linklike,.hc-presente,.sf-conversa,.sf-doador,.chat .list a):active { transition-duration:var(--ds-motion-feedback); }
tbody tr { transition-duration:var(--ds-motion-fast); transition-timing-function:var(--ds-ease-standard); }

/* State changes carry the motion; disabled and selected elements stay still. */
.tabs a.on,.tabs a[aria-current="page"],.chat .list a.on,.btn[disabled],.btn[aria-disabled="true"],:is(input,select,textarea):disabled { transform:none; }
.tabs a.on::before,.topbar .nav a.on:not(.btn,.hc-chip)::after { transition-duration:var(--ds-motion-fast); transition-timing-function:var(--ds-ease-feedback); }

@media (prefers-reduced-motion:reduce) {
  .hero .texto,.hc-modal[open],.topbar.aberto .nav.right,.topbar.oh-menu-leaving .nav.right,.bubble.hc-gasto .hc-gasto-emoji,.hc-ganho,.hc-estouro span { animation:none; }
  .hc-presente:hover .hc-presente-emoji { transform:none; }
}

/* ── V30 · COMPONENT-SPECIFIC HOVERS ──────────────────────────────────────
   O hover descreve a natureza do componente. Ações pressionam; rotas guiam;
   mídia aproxima o enquadramento; superfícies elevam pela luz — nunca por uma
   escala genérica repetida. */
:root {
  --ds-hover-line: var(--ds-attention-gold);
  --ds-hover-surface: rgba(242,212,154,.085);
  --ds-hover-surface-soft: rgba(255,248,236,.045);
  --ds-hover-media-filter: saturate(1.045) contrast(1.02) brightness(1.025);
  --ds-hover-card-shadow: 0 18px 32px -27px rgba(0,0,0,.88);
}
html[data-theme="light"] {
  --ds-hover-surface: rgba(154,104,28,.08);
  --ds-hover-surface-soft: rgba(85,52,40,.045);
  --ds-hover-card-shadow: 0 18px 32px -28px rgba(72,38,22,.26);
}

@media (hover:hover) and (pointer:fine) {
  /* Primary actions: more light and a slight physical rise. */
  .btn:not(.ghost):not(.icon):not([disabled]):not([aria-disabled="true"]):hover { transform:translateY(-1px); border-color:var(--ds-hover-line); box-shadow:var(--ds-highlight-top),0 15px 27px -20px rgba(0,0,0,.76); }
  .btn.ghost:not([disabled]):not([aria-disabled="true"]):hover { transform:none; color:var(--ds-text-strong); border-color:var(--ds-hover-line); background:var(--ds-hover-surface); box-shadow:inset 0 1px 0 rgba(255,248,236,.06); }
  .btn.icon:not([disabled]):not([aria-disabled="true"]):hover,.menu-toggle:hover,.oh-theme:hover { transform:rotate(3deg); color:var(--ds-text-strong); border-color:var(--ds-hover-line); background:var(--ds-hover-surface); box-shadow:inset 0 1px 0 rgba(255,248,236,.08); }

  /* Navigation: directional contrast, no spatial bounce. */
  .topbar .nav a:not(.btn,.hc-chip):hover,.topbar .nav button.linklike:hover { transform:none; color:var(--ds-text-strong); background:var(--ds-hover-surface-soft); }
  .topbar .nav a:not(.btn,.hc-chip):hover::after,.topbar .nav button.linklike:hover::after { transform:scaleX(.68); }
  .tabs a:not(.on):hover { transform:none; color:var(--ds-text-strong); background:var(--ds-hover-surface); box-shadow:inset 0 1px 0 rgba(255,248,236,.06); }
  .tabs a:not(.on):hover::before { transform:scaleX(.62); }
  .chat .list a:hover { transform:translateX(2px); color:var(--ds-text-strong); background:linear-gradient(90deg,var(--ds-hover-surface),transparent 86%); box-shadow:inset 2px 0 0 var(--ds-hover-line); }

  /* Media: sharpen the frame and reveal affordance, not a floating card. */
  .mcard:hover .cover,.mcard:focus-visible .cover { transform:translateY(-2px) rotateX(.4deg); border-color:var(--ds-hover-line); box-shadow:var(--ds-highlight-top),var(--ds-hover-card-shadow); }
  .mcard:hover .cover img { transform:scale(1.028); filter:var(--ds-hover-media-filter); }
  .mcard:hover .legenda { transform:translateY(-2px); }
  .post:hover { transform:none; box-shadow:inset 0 0 0 1px var(--ds-hover-line); }
  .post:hover img,.post:hover video { transform:scale(1.025); filter:var(--ds-hover-media-filter); }
  .post:hover::after { opacity:.92; }
  a:has(.avatar):hover .avatar { box-shadow:0 0 0 2px var(--ds-hover-line),0 10px 18px -14px rgba(0,0,0,.75); filter:brightness(1.04); }

  /* Commercial choices elevate through border, light and CTA contrast. */
  .hc-pack:hover { transform:translateY(-2px); border-color:var(--ds-hover-line); box-shadow:var(--ds-highlight-top),var(--ds-hover-card-shadow); }
  .hc-pack:hover::before { border-color:rgba(245,216,156,.42); }
  .hc-presente:hover { transform:none; border-color:var(--ds-hover-line); background:linear-gradient(145deg,var(--ds-hover-surface),transparent 70%); box-shadow:inset 0 1px 0 rgba(255,248,236,.08),var(--ds-shadow-contact); }
  .sf-meu:hover,.sf-top-lista li:hover { transform:none; border-color:var(--ds-hover-line); background:linear-gradient(90deg,var(--ds-hover-surface),transparent 72%); box-shadow:inset 2px 0 0 var(--ds-hover-line); }
  .sf-doador:hover,.sf-conversa:hover { transform:none; box-shadow:inset 0 -1px 0 var(--ds-hover-line); }

  /* Data and form controls stay grounded: readiness is a surface change. */
  tbody tr:hover { transform:none; background:var(--ds-hover-surface-soft); filter:none; }
  .panel .table-wrap:hover { transform:none; box-shadow:inset 0 1px 0 rgba(255,248,236,.065),inset 2px 0 0 rgba(242,212,154,.24); }
  :is(input,select,textarea):not(:disabled):hover { transform:none; border-color:var(--ds-hover-line); background:var(--ds-field-hover-bg); }
  :is(input,select,textarea):not(:disabled):focus { transform:none; }
  label.check:not(:has(input:disabled)):hover { transform:none; box-shadow:inset 2px 0 0 var(--ds-hover-line); }
  details.sf-como summary:hover,details.hc-chat-mimo summary:hover { background:linear-gradient(90deg,var(--ds-hover-surface),transparent 78%); }
}

@media (prefers-reduced-motion:reduce) {
  .btn:not(.ghost):not(.icon):not([disabled]):not([aria-disabled="true"]):hover,.btn.icon:not([disabled]):not([aria-disabled="true"]):hover,.menu-toggle:hover,.oh-theme:hover,.mcard:hover .cover,.mcard:hover .legenda,.mcard:hover .cover img,.post:hover img,.post:hover video,.hc-pack:hover,.chat .list a:hover { transform:none; }
}

/* ── CLARO DO APARELHO · o GPT so tratou o claro escolhido; aqui o mesmo vale pra quem nao escolheu tema ── */
@media (prefers-color-scheme: light) {
html:not([data-theme]) {--s-bg:#fff8ed; --s-bg-2:#fffdf8; --s-bg-3:#f5e9d8; --s-wine:#571522; --s-wine-2:#742435;
  --s-text:#321a1d; --s-heading:#321218; --s-muted:rgba(50,26,29,.68); --s-faint:rgba(50,26,29,.46);
  --s-line:rgba(101,54,35,.20); --s-line-2:rgba(112,67,37,.42); --s-on-brand:#211006;
  --s-shadow:0 26px 55px -35px rgba(72,38,22,.34);}
html:not([data-theme]) body {background:radial-gradient(70rem 42rem at 105% -5%,rgba(222,186,118,.34),transparent 55%),var(--s-bg);}
html:not([data-theme]) .topbar {background:rgba(255,250,241,.88);}
html:not([data-theme]) .panel, html:not([data-theme]) .hc-pack {background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,237,219,.94));}
html:not([data-theme]) input[type=text], html:not([data-theme]) input[type=email], html:not([data-theme]) input[type=password], html:not([data-theme]) input[type=date], html:not([data-theme]) input[type=number], html:not([data-theme]) input[type=url], html:not([data-theme]) select, html:not([data-theme]) textarea {background:rgba(255,255,255,.75);}
html:not([data-theme]) .mcard .cover::after {background:linear-gradient(180deg,transparent 30%,rgba(34,11,12,.10) 55%,rgba(34,11,12,.92));}
html:not([data-theme]) {--ds-canvas: #fff8ed;
  --ds-canvas-elevated: #fffdf8;
  --ds-surface: #f5e9d8;
  --ds-surface-raised: #fff4e6;
  --ds-surface-input: rgba(255,255,255,.78);
  --ds-text: #321a1d;
  --ds-text-strong: #321218;
  --ds-text-muted: rgba(50,26,29,.68);
  --ds-text-faint: rgba(50,26,29,.46);
  --ds-line-subtle: rgba(101,54,35,.20);
  --ds-line-default: rgba(112,67,37,.42);
  --ds-line-strong: rgba(112,67,37,.56);
  --ds-surface-editorial: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,237,219,.94));
  --ds-surface-raised-editorial: linear-gradient(124deg, rgba(255,255,255,.76), transparent 24%), var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg, rgba(255,255,255,.95), rgba(249,237,219,.88));
  --ds-shadow-card: 0 26px 55px -35px rgba(72,38,22,.34);
  --ds-shadow-lift: 0 28px 45px -30px rgba(72,38,22,.45);
  --s-bg: var(--ds-canvas);
  --s-bg-2: var(--ds-canvas-elevated);
  --s-bg-3: var(--ds-surface);
  --s-wine: var(--ds-surface-raised);
  --s-wine-2: #742435;
  --s-text: var(--ds-text);
  --s-heading: var(--ds-text-strong);
  --s-muted: var(--ds-text-muted);
  --s-faint: var(--ds-text-faint);
  --s-line: var(--ds-line-subtle);
  --s-line-2: var(--ds-line-default);
  --s-brand: var(--ds-brand);
  --s-brand-2: var(--ds-brand-strong);
  --s-accent: var(--ds-accent);
  --s-accent-2: var(--ds-accent-strong);
  --s-on-brand: var(--ds-on-brand);}
html:not([data-theme]) {--ds-depth-canvas: linear-gradient(155deg,#fffaf2 0%,#fff7ea 42%,#f5e9d8 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(214,178,110,.30),transparent 62%),radial-gradient(42rem 34rem at 0 78%,rgba(142,22,34,.08),transparent 65%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.52) 22%,transparent 50%),linear-gradient(160deg,#fffdf8,#f9eddf);
  --ds-depth-card: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.68) 25%,transparent 54%),linear-gradient(160deg,#fffdfb,#f5e6d3);
  --ds-depth-elevated: linear-gradient(145deg,#fff 0%,rgba(255,255,255,.68) 28%,transparent 54%),linear-gradient(160deg,#fffdf9,#f1dfc9);
  --ds-depth-overlay: linear-gradient(155deg,rgba(255,252,246,.98),rgba(246,232,213,.99));
  --ds-highlight-top: inset 0 1px 0 rgba(255,255,255,.95);
  --ds-highlight-edge: inset 1px 0 0 rgba(255,255,255,.82),inset -1px 0 0 rgba(80,45,30,.08);
  --ds-shadow-surface: 0 18px 45px -35px rgba(72,38,22,.30),0 1px 0 rgba(255,255,255,.9);
  --ds-shadow-card-deep: 0 28px 58px -40px rgba(72,38,22,.34),0 9px 14px -16px rgba(72,38,22,.22),0 1px 0 #fff;
  --ds-shadow-elevated: 0 24px 48px -30px rgba(72,38,22,.38),0 7px 16px -14px rgba(72,38,22,.22),0 0 0 1px rgba(137,92,46,.14);
  --ds-shadow-overlay: 0 42px 96px -42px rgba(72,38,22,.42),0 0 0 1px rgba(137,92,46,.18);
  --ds-glow-brand: 0 0 32px -12px rgba(179,126,52,.32);
  --ds-glow-accent: 0 0 42px -18px rgba(179,32,47,.34);
  --ds-overlay-scrim: rgba(61,32,23,.48);}
html:not([data-theme]) .topbar {background:linear-gradient(180deg,rgba(255,253,248,.94),rgba(255,248,237,.86));}
html:not([data-theme]) input[type=text], html:not([data-theme]) input[type=email], html:not([data-theme]) input[type=password], html:not([data-theme]) input[type=date], html:not([data-theme]) input[type=number], html:not([data-theme]) input[type=url], html:not([data-theme]) select, html:not([data-theme]) textarea {background:var(--ds-surface-input);}
html:not([data-theme]) {--ds-shadow-contact-1: 0 1px 1px rgba(72,38,22,.08);
  --ds-shadow-contact-2: 0 2px 3px rgba(72,38,22,.07);
  --ds-shadow-ambient-1: 0 11px 24px -21px rgba(72,38,22,.19);
  --ds-shadow-ambient-2: 0 18px 42px -31px rgba(72,38,22,.23);
  --ds-shadow-ambient-3: 0 30px 70px -46px rgba(72,38,22,.28);
  --ds-shadow-tint-gold: 0 14px 31px -27px rgba(179,126,52,.22);
  --ds-shadow-tint-ruby: 0 17px 36px -30px rgba(142,22,34,.20);}
html:not([data-theme]) {--ds-bg-glow-ruby: radial-gradient(48rem 36rem at 102% -8%,rgba(142,22,34,.105),transparent 66%);
  --ds-bg-glow-gold: radial-gradient(34rem 29rem at -10% 77%,rgba(214,178,110,.20),transparent 70%);
  --ds-bg-glow-center: radial-gradient(42rem 28rem at 50% 36%,rgba(214,178,110,.10),transparent 72%);
  --ds-bg-thread: linear-gradient(112deg,transparent 0 46%,rgba(137,92,46,.045) 50%,transparent 54%);
  --ds-bg-speckle: radial-gradient(circle at 20% 30%,rgba(91,53,35,.06) 0 1px,transparent 1.3px);
  --ds-bg-vignette: radial-gradient(ellipse at center,transparent 46%,rgba(108,66,36,.07) 100%);
  --ds-surface-light-top: linear-gradient(180deg,rgba(255,255,255,.78),transparent 28%);
  --ds-surface-light-side: linear-gradient(98deg,rgba(255,255,255,.42),transparent 28%,transparent 74%,rgba(214,178,110,.07));}
html:not([data-theme]) {--ds-hairline-subtle: rgba(101,54,35,.14);
  --ds-hairline-default: rgba(101,54,35,.28);
  --ds-hairline-strong: rgba(101,54,35,.46);}
html:not([data-theme]) {--ds-canvas: #fff9ef;
  --ds-canvas-elevated: #fffdf8;
  --ds-surface: #f4e7d7;
  --ds-surface-raised: #fff3e5;
  --ds-surface-input: #fffdf9;
  --ds-text-strong: #281315;
  --ds-text: #3c2425;
  --ds-text-muted: #68514e;
  --ds-text-faint: #856e69;
  --ds-brand: #9a681c;
  --ds-brand-strong: #754b12;
  --ds-brand-highlight: #e9bd68;
  --ds-accent: #8b2632;
  --ds-accent-strong: #6e1721;
  --ds-positive: #356744;
  --ds-warning: #935f13;
  --ds-danger: #963c39;
  --ds-on-brand: #211206;
  --ds-on-accent: #fff7f3;
  --ds-line-subtle: rgba(92,57,38,.16);
  --ds-line-default: rgba(92,57,38,.30);
  --ds-line-strong: rgba(92,57,38,.48);
  --ds-state-positive-bg: rgba(53,103,68,.10);
  --ds-state-warning-bg: rgba(147,95,19,.11);
  --ds-state-danger-bg: rgba(150,60,57,.10);
  --ds-surface-editorial: linear-gradient(145deg,#fffefa,#f8e9d8);
  --ds-surface-raised-editorial: linear-gradient(124deg,rgba(255,255,255,.76),transparent 25%),var(--ds-surface-editorial);
  --ds-surface-input-editorial: linear-gradient(145deg,#fffefa,#faeee0);
  --ds-depth-canvas: linear-gradient(155deg,#fffdf7 0%,var(--ds-canvas) 44%,#f4e5d3 100%);
  --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(139,38,50,.09),transparent 63%),radial-gradient(42rem 34rem at 0 78%,rgba(154,104,28,.13),transparent 67%);
  --ds-depth-surface: linear-gradient(145deg,rgba(255,255,255,.92),transparent 50%),linear-gradient(160deg,#fffdf9,#f8eadb);
  --ds-depth-card: linear-gradient(145deg,rgba(255,255,255,.98),transparent 54%),linear-gradient(160deg,#fffefa,#f5e4d0);
  --ds-depth-elevated: linear-gradient(145deg,#fff 0%,transparent 56%),linear-gradient(160deg,#fffdf9,#f0dcc2);
  --ds-depth-overlay: linear-gradient(155deg,rgba(255,253,248,.98),rgba(247,232,212,.99));
  --ds-card-light: linear-gradient(135deg,rgba(255,255,255,.76),transparent 27%,transparent 72%,rgba(154,104,28,.05));
  --ds-glow-brand: 0 0 28px -14px rgba(154,104,28,.28);
  --ds-glow-accent: 0 0 34px -18px rgba(139,38,50,.24);
  --ds-hairline-subtle: rgba(92,57,38,.12);
  --ds-hairline-default: rgba(92,57,38,.24);
  --ds-hairline-strong: rgba(92,57,38,.42);
  --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent);
  --ds-action-primary-bg: linear-gradient(135deg,#f0cc83,var(--ds-brand));
  --ds-action-secondary-bg: linear-gradient(135deg,#b84652,var(--ds-accent));
  --ds-action-focus: 0 0 0 3px rgba(154,104,28,.18),0 0 0 5px rgba(255,253,248,.96);
  --s-bg: var(--ds-canvas); --s-bg-2: var(--ds-canvas-elevated); --s-bg-3: var(--ds-surface); --s-wine: var(--ds-surface-raised); --s-wine-2: var(--ds-accent);
  --s-text: var(--ds-text); --s-heading: var(--ds-text-strong); --s-muted: var(--ds-text-muted); --s-faint: var(--ds-text-faint); --s-line: var(--ds-line-subtle); --s-line-2: var(--ds-line-default); --s-brand: var(--ds-brand); --s-brand-2: var(--ds-brand-strong); --s-ok: var(--ds-positive); --s-warn: var(--ds-warning); --s-err: var(--ds-danger);}
html:not([data-theme]) {--ds-attention-gold: var(--ds-brand-strong);
  --ds-attention-gold-wash: rgba(154,104,28,.09);
  --ds-attention-gold-line: rgba(117,75,18,.40);
  --ds-attention-ruby: var(--ds-accent);
  --ds-attention-ruby-wash: rgba(139,38,50,.10);
  --ds-interaction-hover: rgba(60,36,37,.05);
  --ds-interaction-selected: rgba(154,104,28,.07);}
html:not([data-theme]) {--ds-field-bg: linear-gradient(145deg,rgba(255,255,255,.92),transparent 64%),var(--ds-surface-input);
  --ds-field-hover-bg: linear-gradient(145deg,rgba(255,255,255,1),transparent 64%),var(--ds-surface-input);
  --ds-field-focus-bg: linear-gradient(145deg,rgba(233,189,104,.16),transparent 64%),var(--ds-surface-input);
  --ds-field-focus-ring: 0 0 0 3px rgba(154,104,28,.15),0 0 0 5px rgba(255,253,248,.95);}
html:not([data-theme]) {--ds-cover-ink: rgba(255,250,243,.94);
  --ds-cover-mid: rgba(255,250,243,.60);
  --ds-cover-quiet: rgba(60,36,37,.76);}
html:not([data-theme]) body:has(.hero) .topbar {background:linear-gradient(180deg,rgba(255,253,248,.90),rgba(255,250,243,.68)); box-shadow:inset 0 -1px 0 rgba(60,36,37,.08);}
html:not([data-theme]) {--ds-nav-hover: rgba(60,36,37,.055);
  --ds-nav-active: rgba(154,104,28,.09);
  --ds-nav-focus: 0 0 0 2px rgba(117,75,18,.25),0 0 0 4px rgba(255,253,248,.94);}
html:not([data-theme]) .topbar[data-oh-scrolled="true"] {background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(255,249,240,.93)); box-shadow:var(--ds-highlight-top),0 13px 25px -23px rgba(72,38,22,.28);}
html:not([data-theme]) {--ds-nav-surface: linear-gradient(145deg,rgba(255,255,255,.94),transparent 58%),var(--ds-depth-elevated);}
html:not([data-theme]) {--ds-motion-highlight: rgba(154,104,28,.09);
  --ds-motion-shadow: 0 14px 28px -25px rgba(72,38,22,.30);}
html:not([data-theme]) {--ds-hover-surface: rgba(154,104,28,.08);
  --ds-hover-surface-soft: rgba(85,52,40,.045);
  --ds-hover-card-shadow: 0 18px 32px -28px rgba(72,38,22,.26);}
}
/* ── ILHAS ESCURAS · capa, foto e selo seguem na pele escura tambem no claro ── */
html[data-theme="light"] .hero, html[data-theme="light"] .mcard .cover, html[data-theme="light"] .perfil-capa { --oh-ivory: #fff3dc; --oh-ruby: #ad2641; --oh-ember: #e3635c; --oh-black: #080304; --oh-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%); --ds-canvas: #090405; --ds-canvas-elevated: #13090b; --ds-surface: #1b0e10; --ds-surface-raised: #291417; --ds-surface-input: rgba(6,3,3,.44); --ds-text: #f3e9da; --ds-text-strong: #fff4df; --ds-text-muted: rgba(243,233,218,.66); --ds-text-faint: rgba(243,233,218,.42); --ds-brand: #d6b26e; --ds-brand-strong: #ebcf93; --ds-brand-highlight: #f5d89c; --ds-accent: #8e1622; --ds-accent-strong: #b3202f; --ds-positive: #a9c99a; --ds-warning: #e2b66b; --ds-danger: #e58a80; --ds-on-brand: #160d08; --ds-line-subtle: rgba(214,178,110,.22); --ds-line-default: rgba(214,178,110,.45); --ds-line-strong: rgba(245,216,156,.52); --ds-surface-editorial: linear-gradient(145deg, rgba(63,19,27,.76), rgba(14,7,8,.94) 62%); --ds-surface-raised-editorial: linear-gradient(124deg, rgba(255,244,222,.055), transparent 24%), var(--ds-surface-editorial); --ds-surface-input-editorial: linear-gradient(145deg, rgba(255,248,237,.06), rgba(32,14,17,.82)); --ds-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%); --ds-noise-opacity: .075; --ds-noise-opacity-subtle: .0615; --ds-border-hairline: 1px solid var(--ds-line-subtle); --ds-border-emphasis: 1px solid var(--ds-line-default); --ds-shadow-none: none; --ds-shadow-float: 0 13px 24px -18px rgba(0,0,0,.95); --ds-shadow-card: 0 28px 80px -38px rgba(0,0,0,.95); --ds-shadow-lift: 0 36px 68px -35px rgba(0,0,0,.98); --ds-shadow-brand: 0 0 24px rgba(245,216,156,.42); --ds-blur-sm: blur(2px); --ds-blur-md: blur(8px); --ds-blur-lg: blur(18px) saturate(135%); --ds-text-caption: 9px; --ds-text-label: 10px; --ds-text-body: 15px; --ds-text-lead: 18px; --ds-text-h3: clamp(20px,2vw,28px); --ds-text-h2: clamp(30px,3.6vw,48px); --ds-text-h1: clamp(52px,7vw,112px); --oh-ivory: var(--ds-text-strong); --oh-ruby: var(--ds-accent-strong); --oh-ember: #e3635c; --oh-black: var(--ds-canvas); --oh-metal: var(--ds-metal); --ds-depth-canvas: linear-gradient(155deg,#120708 0%,#090405 38%,#100507 100%); --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(150,28,47,.24),transparent 62%),radial-gradient(42rem 34rem at 0 78%,rgba(214,178,110,.11),transparent 65%); --ds-depth-surface: linear-gradient(145deg,rgba(255,245,226,.055) 0%,rgba(255,245,226,.012) 17%,transparent 42%),linear-gradient(160deg,#1d0e11 0%,#110708 100%); --ds-depth-card: linear-gradient(145deg,rgba(255,245,226,.085) 0%,rgba(255,245,226,.018) 18%,transparent 40%),linear-gradient(160deg,#281215 0%,#17090c 100%); --ds-depth-elevated: linear-gradient(145deg,rgba(255,245,226,.13) 0%,rgba(255,245,226,.025) 22%,transparent 44%),linear-gradient(160deg,#341419 0%,#1a090c 100%); --ds-depth-overlay: linear-gradient(155deg,rgba(53,12,20,.96),rgba(10,4,5,.98)); --ds-highlight-top: inset 0 1px 0 rgba(255,248,237,.15); --ds-highlight-edge: inset 1px 0 0 rgba(255,248,237,.055),inset -1px 0 0 rgba(0,0,0,.22); --ds-shadow-surface: 0 18px 45px -35px rgba(0,0,0,.88),0 1px 0 rgba(255,248,237,.035); --ds-shadow-card-deep: 0 34px 70px -44px rgba(0,0,0,.98),0 12px 18px -18px rgba(0,0,0,.72),0 1px 0 rgba(255,248,237,.06); --ds-shadow-elevated: 0 28px 60px -36px rgba(0,0,0,.98),0 8px 20px -14px rgba(0,0,0,.86),0 0 0 1px rgba(245,216,156,.12); --ds-shadow-overlay: 0 48px 120px -45px #000,0 0 0 1px rgba(245,216,156,.20); --ds-glow-brand: 0 0 34px -11px rgba(235,207,147,.52); --ds-glow-accent: 0 0 46px -16px rgba(179,32,47,.62); --ds-overlay-scrim: rgba(5,2,3,.78); --ds-shadow-contact-1: 0 1px 1px rgba(0,0,0,.30); --ds-shadow-contact-2: 0 2px 3px rgba(0,0,0,.23); --ds-shadow-ambient-1: 0 11px 24px -21px rgba(0,0,0,.58); --ds-shadow-ambient-2: 0 18px 42px -31px rgba(0,0,0,.65); --ds-shadow-ambient-3: 0 30px 70px -46px rgba(0,0,0,.74); --ds-shadow-tint-gold: 0 14px 31px -27px rgba(214,178,110,.30); --ds-shadow-tint-ruby: 0 17px 36px -30px rgba(142,22,34,.36); --ds-shadow-flat: var(--ds-shadow-contact-1),var(--ds-shadow-ambient-1); --ds-shadow-resting: var(--ds-shadow-contact-1),var(--ds-shadow-contact-2),var(--ds-shadow-ambient-1); --ds-shadow-raised-natural: var(--ds-shadow-contact-2),0 7px 12px -11px rgba(0,0,0,.36),var(--ds-shadow-ambient-2); --ds-shadow-floating-natural: var(--ds-shadow-contact-2),0 10px 19px -16px rgba(0,0,0,.42),var(--ds-shadow-ambient-3); --ds-shadow-overlay-natural: 0 3px 6px rgba(0,0,0,.28),0 21px 42px -24px rgba(0,0,0,.56),0 50px 100px -56px rgba(0,0,0,.78); --ds-shadow-focus-natural: 0 0 0 4px rgba(235,207,147,.11),var(--ds-shadow-tint-gold); --ds-shadow-surface: var(--ds-shadow-flat); --ds-shadow-card-deep: var(--ds-shadow-resting); --ds-shadow-elevated: var(--ds-shadow-raised-natural); --ds-shadow-overlay: var(--ds-shadow-overlay-natural); --ds-glow-brand: var(--ds-shadow-tint-gold); --ds-glow-accent: var(--ds-shadow-tint-ruby); --ds-bg-glow-ruby: radial-gradient(48rem 36rem at 102% -8%,rgba(143,29,48,.25),transparent 66%); --ds-bg-glow-gold: radial-gradient(34rem 29rem at -10% 77%,rgba(214,178,110,.10),transparent 70%); --ds-bg-glow-center: radial-gradient(42rem 28rem at 50% 36%,rgba(104,28,38,.075),transparent 72%); --ds-bg-thread: linear-gradient(112deg,transparent 0 46%,rgba(245,216,156,.025) 50%,transparent 54%); --ds-bg-speckle: radial-gradient(circle at 20% 30%,rgba(255,248,237,.050) 0 1px,transparent 1.3px); --ds-bg-vignette: radial-gradient(ellipse at center,transparent 44%,rgba(0,0,0,.22) 100%); --ds-surface-light-top: linear-gradient(180deg,rgba(255,248,237,.055),transparent 26%); --ds-surface-light-side: linear-gradient(98deg,rgba(255,248,237,.032),transparent 28%,transparent 74%,rgba(142,22,34,.065)); --ds-texture-opacity: .16; --ds-priority-1: var(--ds-text-strong); --ds-priority-2: var(--ds-brand-strong); --ds-priority-3: var(--ds-text-muted); --ds-priority-4: var(--ds-text-faint); --ds-emphasis-line: var(--ds-metal); --ds-content-focus: min(760px, 100%); --ds-inset-xs: var(--ds-space-3); --ds-inset-sm: var(--ds-space-4); --ds-inset-md: var(--ds-space-5); --ds-inset-lg: var(--ds-space-6); --ds-inset-fluid: clamp(20px,3vw,36px); --ds-grid-major: minmax(0,1.32fr); --ds-grid-minor: minmax(280px,.68fr); --ds-grid-rail: minmax(260px,.78fr); --ds-grid-stage: minmax(0,1.22fr); --ds-grid-offset: clamp(14px,2.6vw,38px); --ds-divider: 1px solid var(--ds-line-subtle); --ds-divider-strong: 1px solid var(--ds-line-default); --ds-surface-contained: var(--ds-depth-surface); --ds-surface-contained-emphasis: var(--ds-depth-elevated); --ds-card-border: 1px solid var(--ds-line-subtle); --ds-card-border-active: 1px solid var(--ds-line-strong); --ds-card-padding: var(--ds-inset-fluid); --ds-card-padding-compact: var(--ds-space-4); --ds-card-light: linear-gradient(135deg,rgba(255,248,237,.12),transparent 24%,transparent 72%,rgba(214,178,110,.06)); --ds-action-height: 46px; --ds-action-height-sm: 36px; --ds-action-padding: 0 var(--ds-space-5); --ds-action-padding-sm: 0 var(--ds-space-3); --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand)); --ds-action-primary-fg: var(--ds-on-brand); --ds-action-secondary-bg: rgba(142,22,34,.78); --ds-action-secondary-fg: #fff5ec; --ds-action-ghost-bg: transparent; --ds-action-ghost-fg: var(--ds-priority-2); --ds-action-focus: 0 0 0 4px rgba(235,207,147,.17),0 0 0 6px rgba(11,7,6,.88); --ds-action-loading: 700ms; --ds-hairline-subtle: rgba(235,207,147,.13); --ds-hairline-default: rgba(235,207,147,.28); --ds-hairline-strong: rgba(235,207,147,.52); --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent); --ds-canvas: #0a0607; --ds-canvas-elevated: #13090b; --ds-surface: #1c0f12; --ds-surface-raised: #2a1519; --ds-surface-input: #160b0e; --ds-text-strong: #fff8ec; --ds-text: #f2e7d6; --ds-text-muted: #cbbcad; --ds-text-faint: #9c8f87; --ds-brand: #d6ae67; --ds-brand-strong: #f2d49a; --ds-brand-highlight: #ffe9b5; --ds-accent: #8e2633; --ds-accent-strong: #bd3e4b; --ds-positive: #b7d19a; --ds-warning: #f1c56f; --ds-danger: #ef9b93; --ds-on-brand: #1a1008; --ds-on-accent: #fff5ef; --ds-line-subtle: rgba(242,212,154,.16); --ds-line-default: rgba(242,212,154,.31); --ds-line-strong: rgba(255,233,181,.48); --ds-state-positive-bg: rgba(183,209,154,.12); --ds-state-warning-bg: rgba(241,197,111,.12); --ds-state-danger-bg: rgba(239,155,147,.12); --ds-surface-editorial: linear-gradient(145deg,rgba(62,20,29,.72),rgba(16,7,9,.96) 64%); --ds-surface-raised-editorial: linear-gradient(124deg,rgba(255,248,236,.065),transparent 25%),var(--ds-surface-editorial); --ds-surface-input-editorial: linear-gradient(145deg,rgba(255,248,236,.055),#160b0e); --ds-depth-canvas: linear-gradient(155deg,#15090b 0%,var(--ds-canvas) 42%,#100608 100%); --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(142,38,51,.20),transparent 63%),radial-gradient(42rem 34rem at 0 78%,rgba(214,174,103,.09),transparent 66%); --ds-depth-surface: linear-gradient(145deg,rgba(255,248,236,.055),transparent 42%),linear-gradient(160deg,#1f1013,#12080a); --ds-depth-card: linear-gradient(145deg,rgba(255,248,236,.08),transparent 40%),linear-gradient(160deg,#2a1418,#180a0d); --ds-depth-elevated: linear-gradient(145deg,rgba(255,248,236,.11),transparent 43%),linear-gradient(160deg,#35171d,#1c0a0e); --ds-depth-overlay: linear-gradient(155deg,rgba(57,16,25,.97),rgba(10,4,5,.99)); --ds-card-light: linear-gradient(135deg,rgba(255,248,236,.105),transparent 25%,transparent 72%,rgba(214,174,103,.05)); --ds-glow-brand: 0 0 30px -13px rgba(242,212,154,.40); --ds-glow-accent: 0 0 36px -17px rgba(189,62,75,.40); --ds-hairline-subtle: rgba(242,212,154,.11); --ds-hairline-default: rgba(242,212,154,.24); --ds-hairline-strong: rgba(255,233,181,.46); --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent); --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand)); --ds-action-primary-fg: var(--ds-on-brand); --ds-action-secondary-bg: linear-gradient(135deg,var(--ds-accent-strong),var(--ds-accent)); --ds-action-secondary-fg: var(--ds-on-accent); --ds-action-ghost-fg: var(--ds-text-muted); --ds-action-focus: 0 0 0 3px rgba(242,212,154,.23),0 0 0 5px rgba(10,6,7,.92); --ds-attention-gold: var(--ds-brand-strong); --ds-attention-gold-wash: rgba(242,212,154,.10); --ds-attention-gold-line: rgba(242,212,154,.42); --ds-attention-ruby: var(--ds-accent-strong); --ds-attention-ruby-wash: rgba(189,62,75,.14); --ds-interaction-hover: rgba(255,248,236,.065); --ds-interaction-selected: rgba(242,212,154,.075); --ds-field-height: 50px; --ds-field-padding-x: 16px; --ds-field-padding-y: 13px; --ds-field-bg: linear-gradient(145deg,rgba(255,248,236,.055),transparent 58%),var(--ds-surface-input); --ds-field-hover-bg: linear-gradient(145deg,rgba(255,248,236,.075),transparent 58%),var(--ds-surface-input); --ds-field-focus-bg: linear-gradient(145deg,rgba(242,212,154,.085),transparent 62%),var(--ds-surface-input); --ds-field-success: var(--ds-positive); --ds-field-error: var(--ds-danger); --ds-field-focus-ring: 0 0 0 3px rgba(242,212,154,.16),0 0 0 5px rgba(10,6,7,.88); --ds-cover-ink: rgba(7,3,4,.94); --ds-cover-mid: rgba(7,3,4,.61); --ds-cover-quiet: rgba(255,248,236,.73); --ds-cover-action-height: 54px; --ds-tab-height: 42px; --ds-tab-pad-x: var(--ds-space-3); --ds-disclosure-pad: var(--ds-space-3); --ds-motion-fast: 140ms; --ds-motion-base: 220ms; --ds-motion-slow: 360ms; --ds-motion-lift-1: -1px; --ds-motion-lift-2: -3px; --ds-motion-press: .985; --ds-motion-dim: .72; --ds-motion-line: var(--ds-hairline-strong); --ds-motion-highlight: rgba(242,212,154,.10); --ds-motion-shadow: 0 14px 28px -24px rgba(0,0,0,.86); --ds-motion-instant: 0ms; --ds-motion-feedback: 120ms; --ds-motion-fast: 160ms; --ds-motion-base: 240ms; --ds-motion-enter: 380ms; --ds-motion-emphasis: 520ms; --ds-motion-exit: 180ms; --ds-motion-loop: 780ms; --ds-motion-distance-1: 2px; --ds-motion-distance-2: 8px; --ds-hover-line: var(--ds-attention-gold); --ds-hover-surface: rgba(242,212,154,.085); --ds-hover-surface-soft: rgba(255,248,236,.045); --ds-hover-media-filter: saturate(1.045) contrast(1.02) brightness(1.025); --ds-hover-card-shadow: 0 18px 32px -27px rgba(0,0,0,.88); }
@media (prefers-color-scheme: light) { html:not([data-theme]) .hero, html:not([data-theme]) .mcard .cover, html:not([data-theme]) .perfil-capa { --oh-ivory: #fff3dc; --oh-ruby: #ad2641; --oh-ember: #e3635c; --oh-black: #080304; --oh-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%); --ds-canvas: #090405; --ds-canvas-elevated: #13090b; --ds-surface: #1b0e10; --ds-surface-raised: #291417; --ds-surface-input: rgba(6,3,3,.44); --ds-text: #f3e9da; --ds-text-strong: #fff4df; --ds-text-muted: rgba(243,233,218,.66); --ds-text-faint: rgba(243,233,218,.42); --ds-brand: #d6b26e; --ds-brand-strong: #ebcf93; --ds-brand-highlight: #f5d89c; --ds-accent: #8e1622; --ds-accent-strong: #b3202f; --ds-positive: #a9c99a; --ds-warning: #e2b66b; --ds-danger: #e58a80; --ds-on-brand: #160d08; --ds-line-subtle: rgba(214,178,110,.22); --ds-line-default: rgba(214,178,110,.45); --ds-line-strong: rgba(245,216,156,.52); --ds-surface-editorial: linear-gradient(145deg, rgba(63,19,27,.76), rgba(14,7,8,.94) 62%); --ds-surface-raised-editorial: linear-gradient(124deg, rgba(255,244,222,.055), transparent 24%), var(--ds-surface-editorial); --ds-surface-input-editorial: linear-gradient(145deg, rgba(255,248,237,.06), rgba(32,14,17,.82)); --ds-metal: linear-gradient(120deg,#9f6f31 0%,#f9dfa4 22%,#b57d34 45%,#ffe9b8 72%,#9f6f31 100%); --ds-noise-opacity: .075; --ds-noise-opacity-subtle: .0615; --ds-border-hairline: 1px solid var(--ds-line-subtle); --ds-border-emphasis: 1px solid var(--ds-line-default); --ds-shadow-none: none; --ds-shadow-float: 0 13px 24px -18px rgba(0,0,0,.95); --ds-shadow-card: 0 28px 80px -38px rgba(0,0,0,.95); --ds-shadow-lift: 0 36px 68px -35px rgba(0,0,0,.98); --ds-shadow-brand: 0 0 24px rgba(245,216,156,.42); --ds-blur-sm: blur(2px); --ds-blur-md: blur(8px); --ds-blur-lg: blur(18px) saturate(135%); --ds-text-caption: 9px; --ds-text-label: 10px; --ds-text-body: 15px; --ds-text-lead: 18px; --ds-text-h3: clamp(20px,2vw,28px); --ds-text-h2: clamp(30px,3.6vw,48px); --ds-text-h1: clamp(52px,7vw,112px); --oh-ivory: var(--ds-text-strong); --oh-ruby: var(--ds-accent-strong); --oh-ember: #e3635c; --oh-black: var(--ds-canvas); --oh-metal: var(--ds-metal); --ds-depth-canvas: linear-gradient(155deg,#120708 0%,#090405 38%,#100507 100%); --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(150,28,47,.24),transparent 62%),radial-gradient(42rem 34rem at 0 78%,rgba(214,178,110,.11),transparent 65%); --ds-depth-surface: linear-gradient(145deg,rgba(255,245,226,.055) 0%,rgba(255,245,226,.012) 17%,transparent 42%),linear-gradient(160deg,#1d0e11 0%,#110708 100%); --ds-depth-card: linear-gradient(145deg,rgba(255,245,226,.085) 0%,rgba(255,245,226,.018) 18%,transparent 40%),linear-gradient(160deg,#281215 0%,#17090c 100%); --ds-depth-elevated: linear-gradient(145deg,rgba(255,245,226,.13) 0%,rgba(255,245,226,.025) 22%,transparent 44%),linear-gradient(160deg,#341419 0%,#1a090c 100%); --ds-depth-overlay: linear-gradient(155deg,rgba(53,12,20,.96),rgba(10,4,5,.98)); --ds-highlight-top: inset 0 1px 0 rgba(255,248,237,.15); --ds-highlight-edge: inset 1px 0 0 rgba(255,248,237,.055),inset -1px 0 0 rgba(0,0,0,.22); --ds-shadow-surface: 0 18px 45px -35px rgba(0,0,0,.88),0 1px 0 rgba(255,248,237,.035); --ds-shadow-card-deep: 0 34px 70px -44px rgba(0,0,0,.98),0 12px 18px -18px rgba(0,0,0,.72),0 1px 0 rgba(255,248,237,.06); --ds-shadow-elevated: 0 28px 60px -36px rgba(0,0,0,.98),0 8px 20px -14px rgba(0,0,0,.86),0 0 0 1px rgba(245,216,156,.12); --ds-shadow-overlay: 0 48px 120px -45px #000,0 0 0 1px rgba(245,216,156,.20); --ds-glow-brand: 0 0 34px -11px rgba(235,207,147,.52); --ds-glow-accent: 0 0 46px -16px rgba(179,32,47,.62); --ds-overlay-scrim: rgba(5,2,3,.78); --ds-shadow-contact-1: 0 1px 1px rgba(0,0,0,.30); --ds-shadow-contact-2: 0 2px 3px rgba(0,0,0,.23); --ds-shadow-ambient-1: 0 11px 24px -21px rgba(0,0,0,.58); --ds-shadow-ambient-2: 0 18px 42px -31px rgba(0,0,0,.65); --ds-shadow-ambient-3: 0 30px 70px -46px rgba(0,0,0,.74); --ds-shadow-tint-gold: 0 14px 31px -27px rgba(214,178,110,.30); --ds-shadow-tint-ruby: 0 17px 36px -30px rgba(142,22,34,.36); --ds-shadow-flat: var(--ds-shadow-contact-1),var(--ds-shadow-ambient-1); --ds-shadow-resting: var(--ds-shadow-contact-1),var(--ds-shadow-contact-2),var(--ds-shadow-ambient-1); --ds-shadow-raised-natural: var(--ds-shadow-contact-2),0 7px 12px -11px rgba(0,0,0,.36),var(--ds-shadow-ambient-2); --ds-shadow-floating-natural: var(--ds-shadow-contact-2),0 10px 19px -16px rgba(0,0,0,.42),var(--ds-shadow-ambient-3); --ds-shadow-overlay-natural: 0 3px 6px rgba(0,0,0,.28),0 21px 42px -24px rgba(0,0,0,.56),0 50px 100px -56px rgba(0,0,0,.78); --ds-shadow-focus-natural: 0 0 0 4px rgba(235,207,147,.11),var(--ds-shadow-tint-gold); --ds-shadow-surface: var(--ds-shadow-flat); --ds-shadow-card-deep: var(--ds-shadow-resting); --ds-shadow-elevated: var(--ds-shadow-raised-natural); --ds-shadow-overlay: var(--ds-shadow-overlay-natural); --ds-glow-brand: var(--ds-shadow-tint-gold); --ds-glow-accent: var(--ds-shadow-tint-ruby); --ds-bg-glow-ruby: radial-gradient(48rem 36rem at 102% -8%,rgba(143,29,48,.25),transparent 66%); --ds-bg-glow-gold: radial-gradient(34rem 29rem at -10% 77%,rgba(214,178,110,.10),transparent 70%); --ds-bg-glow-center: radial-gradient(42rem 28rem at 50% 36%,rgba(104,28,38,.075),transparent 72%); --ds-bg-thread: linear-gradient(112deg,transparent 0 46%,rgba(245,216,156,.025) 50%,transparent 54%); --ds-bg-speckle: radial-gradient(circle at 20% 30%,rgba(255,248,237,.050) 0 1px,transparent 1.3px); --ds-bg-vignette: radial-gradient(ellipse at center,transparent 44%,rgba(0,0,0,.22) 100%); --ds-surface-light-top: linear-gradient(180deg,rgba(255,248,237,.055),transparent 26%); --ds-surface-light-side: linear-gradient(98deg,rgba(255,248,237,.032),transparent 28%,transparent 74%,rgba(142,22,34,.065)); --ds-texture-opacity: .16; --ds-priority-1: var(--ds-text-strong); --ds-priority-2: var(--ds-brand-strong); --ds-priority-3: var(--ds-text-muted); --ds-priority-4: var(--ds-text-faint); --ds-emphasis-line: var(--ds-metal); --ds-content-focus: min(760px, 100%); --ds-inset-xs: var(--ds-space-3); --ds-inset-sm: var(--ds-space-4); --ds-inset-md: var(--ds-space-5); --ds-inset-lg: var(--ds-space-6); --ds-inset-fluid: clamp(20px,3vw,36px); --ds-grid-major: minmax(0,1.32fr); --ds-grid-minor: minmax(280px,.68fr); --ds-grid-rail: minmax(260px,.78fr); --ds-grid-stage: minmax(0,1.22fr); --ds-grid-offset: clamp(14px,2.6vw,38px); --ds-divider: 1px solid var(--ds-line-subtle); --ds-divider-strong: 1px solid var(--ds-line-default); --ds-surface-contained: var(--ds-depth-surface); --ds-surface-contained-emphasis: var(--ds-depth-elevated); --ds-card-border: 1px solid var(--ds-line-subtle); --ds-card-border-active: 1px solid var(--ds-line-strong); --ds-card-padding: var(--ds-inset-fluid); --ds-card-padding-compact: var(--ds-space-4); --ds-card-light: linear-gradient(135deg,rgba(255,248,237,.12),transparent 24%,transparent 72%,rgba(214,178,110,.06)); --ds-action-height: 46px; --ds-action-height-sm: 36px; --ds-action-padding: 0 var(--ds-space-5); --ds-action-padding-sm: 0 var(--ds-space-3); --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand)); --ds-action-primary-fg: var(--ds-on-brand); --ds-action-secondary-bg: rgba(142,22,34,.78); --ds-action-secondary-fg: #fff5ec; --ds-action-ghost-bg: transparent; --ds-action-ghost-fg: var(--ds-priority-2); --ds-action-focus: 0 0 0 4px rgba(235,207,147,.17),0 0 0 6px rgba(11,7,6,.88); --ds-action-loading: 700ms; --ds-hairline-subtle: rgba(235,207,147,.13); --ds-hairline-default: rgba(235,207,147,.28); --ds-hairline-strong: rgba(235,207,147,.52); --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent); --ds-canvas: #0a0607; --ds-canvas-elevated: #13090b; --ds-surface: #1c0f12; --ds-surface-raised: #2a1519; --ds-surface-input: #160b0e; --ds-text-strong: #fff8ec; --ds-text: #f2e7d6; --ds-text-muted: #cbbcad; --ds-text-faint: #9c8f87; --ds-brand: #d6ae67; --ds-brand-strong: #f2d49a; --ds-brand-highlight: #ffe9b5; --ds-accent: #8e2633; --ds-accent-strong: #bd3e4b; --ds-positive: #b7d19a; --ds-warning: #f1c56f; --ds-danger: #ef9b93; --ds-on-brand: #1a1008; --ds-on-accent: #fff5ef; --ds-line-subtle: rgba(242,212,154,.16); --ds-line-default: rgba(242,212,154,.31); --ds-line-strong: rgba(255,233,181,.48); --ds-state-positive-bg: rgba(183,209,154,.12); --ds-state-warning-bg: rgba(241,197,111,.12); --ds-state-danger-bg: rgba(239,155,147,.12); --ds-surface-editorial: linear-gradient(145deg,rgba(62,20,29,.72),rgba(16,7,9,.96) 64%); --ds-surface-raised-editorial: linear-gradient(124deg,rgba(255,248,236,.065),transparent 25%),var(--ds-surface-editorial); --ds-surface-input-editorial: linear-gradient(145deg,rgba(255,248,236,.055),#160b0e); --ds-depth-canvas: linear-gradient(155deg,#15090b 0%,var(--ds-canvas) 42%,#100608 100%); --ds-depth-canvas-light: radial-gradient(58rem 34rem at 100% 0,rgba(142,38,51,.20),transparent 63%),radial-gradient(42rem 34rem at 0 78%,rgba(214,174,103,.09),transparent 66%); --ds-depth-surface: linear-gradient(145deg,rgba(255,248,236,.055),transparent 42%),linear-gradient(160deg,#1f1013,#12080a); --ds-depth-card: linear-gradient(145deg,rgba(255,248,236,.08),transparent 40%),linear-gradient(160deg,#2a1418,#180a0d); --ds-depth-elevated: linear-gradient(145deg,rgba(255,248,236,.11),transparent 43%),linear-gradient(160deg,#35171d,#1c0a0e); --ds-depth-overlay: linear-gradient(155deg,rgba(57,16,25,.97),rgba(10,4,5,.99)); --ds-card-light: linear-gradient(135deg,rgba(255,248,236,.105),transparent 25%,transparent 72%,rgba(214,174,103,.05)); --ds-glow-brand: 0 0 30px -13px rgba(242,212,154,.40); --ds-glow-accent: 0 0 36px -17px rgba(189,62,75,.40); --ds-hairline-subtle: rgba(242,212,154,.11); --ds-hairline-default: rgba(242,212,154,.24); --ds-hairline-strong: rgba(255,233,181,.46); --ds-divider-fade: linear-gradient(90deg,transparent,var(--ds-hairline-default),transparent); --ds-action-primary-bg: linear-gradient(135deg,var(--ds-brand-highlight),var(--ds-brand)); --ds-action-primary-fg: var(--ds-on-brand); --ds-action-secondary-bg: linear-gradient(135deg,var(--ds-accent-strong),var(--ds-accent)); --ds-action-secondary-fg: var(--ds-on-accent); --ds-action-ghost-fg: var(--ds-text-muted); --ds-action-focus: 0 0 0 3px rgba(242,212,154,.23),0 0 0 5px rgba(10,6,7,.92); --ds-attention-gold: var(--ds-brand-strong); --ds-attention-gold-wash: rgba(242,212,154,.10); --ds-attention-gold-line: rgba(242,212,154,.42); --ds-attention-ruby: var(--ds-accent-strong); --ds-attention-ruby-wash: rgba(189,62,75,.14); --ds-interaction-hover: rgba(255,248,236,.065); --ds-interaction-selected: rgba(242,212,154,.075); --ds-field-height: 50px; --ds-field-padding-x: 16px; --ds-field-padding-y: 13px; --ds-field-bg: linear-gradient(145deg,rgba(255,248,236,.055),transparent 58%),var(--ds-surface-input); --ds-field-hover-bg: linear-gradient(145deg,rgba(255,248,236,.075),transparent 58%),var(--ds-surface-input); --ds-field-focus-bg: linear-gradient(145deg,rgba(242,212,154,.085),transparent 62%),var(--ds-surface-input); --ds-field-success: var(--ds-positive); --ds-field-error: var(--ds-danger); --ds-field-focus-ring: 0 0 0 3px rgba(242,212,154,.16),0 0 0 5px rgba(10,6,7,.88); --ds-cover-ink: rgba(7,3,4,.94); --ds-cover-mid: rgba(7,3,4,.61); --ds-cover-quiet: rgba(255,248,236,.73); --ds-cover-action-height: 54px; --ds-tab-height: 42px; --ds-tab-pad-x: var(--ds-space-3); --ds-disclosure-pad: var(--ds-space-3); --ds-motion-fast: 140ms; --ds-motion-base: 220ms; --ds-motion-slow: 360ms; --ds-motion-lift-1: -1px; --ds-motion-lift-2: -3px; --ds-motion-press: .985; --ds-motion-dim: .72; --ds-motion-line: var(--ds-hairline-strong); --ds-motion-highlight: rgba(242,212,154,.10); --ds-motion-shadow: 0 14px 28px -24px rgba(0,0,0,.86); --ds-motion-instant: 0ms; --ds-motion-feedback: 120ms; --ds-motion-fast: 160ms; --ds-motion-base: 240ms; --ds-motion-enter: 380ms; --ds-motion-emphasis: 520ms; --ds-motion-exit: 180ms; --ds-motion-loop: 780ms; --ds-motion-distance-1: 2px; --ds-motion-distance-2: 8px; --ds-hover-line: var(--ds-attention-gold); --ds-hover-surface: rgba(242,212,154,.085); --ds-hover-surface-soft: rgba(255,248,236,.045); --ds-hover-media-filter: saturate(1.045) contrast(1.02) brightness(1.025); --ds-hover-card-shadow: 0 18px 32px -27px rgba(0,0,0,.88); } }
/* ── CORRECAO DA CASA ── */
main.wrap::before { content: none; }
.topbar::before { content: none; }
:root, html[data-theme] { --ds-radius-control:2px; --ds-radius-component:2px; --ds-radius-surface:2px; --ds-radius-round:2px; --ds-radius-xs:2px; --ds-radius-sm:2px; --ds-radius-md:2px; --ds-radius-lg:2px; --ds-radius-xl:2px; --ds-radius-media:0; --ds-radius-media-inset:0; --ds-nav-item-padding: 0 7px; --ds-nav-gap: 2px; }
.logotipo, .topbar .logo .logotipo, .topbar .logo:hover .logotipo { filter: var(--s-logo); }
.topbar .nav a, .topbar .nav button.linklike { white-space: nowrap; }
@media (min-width: 821px) {
  .menu-toggle { display: none !important; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topbar .nav.right { flex-wrap: nowrap; }
}
@media (max-width: 820px) { .hero .acoes .btn { height: auto; min-height: 52px; align-self: flex-start; flex: 0 0 auto; } }
main.wrap:has(> .hero:first-child) { padding-top: 0; }
html body .hero .acoes .btn, html body .hero .acoes .btn:first-child { flex: 0 0 auto; }
html body .btn, html body .hc-chip, html body .menu-toggle, html body .seal, html body .tag { border-radius: 2px; }
/* o botao de entrar do topo: letra escura sobre o ouro */
.topbar .nav a.btn:not(.ghost):not(.hot) { color: #1A1008; }
html[data-theme="light"] .btn:not(.ghost):not(.hot):not(.hero .btn):not(.perfil-capa .btn) { color: #FFF8ED; }
@media (prefers-color-scheme: light) { html:not([data-theme]) .btn:not(.ghost):not(.hot):not(.hero .btn):not(.perfil-capa .btn) { color: #FFF8ED; } }
/* o selo em cima da foto se LE sempre (regra da casa: selo de IA em todo avatar) */
html body .mcard .seal { opacity: 1; visibility: visible; }
html body .mcard .seal-ai { background: rgba(19, 11, 12, .78); border-color: rgba(245, 216, 156, .72); color: #FFF2D8; }