/* =========================================================================
   Karaokê Brasil · faixas de cor do site (v34)
   Paleta da bandeira, em tom de palco: escuro (base), creme (leitura), verde, amarelo e azul.
   Cada faixa troca as variáveis da página, então cartões, botões e textos acompanham sozinhos.
   Use na <section>: class="t-claro" | "t-verde" | "t-ouro" | "t-azul".
   Regra de ouro: duas faixas coloridas nunca ficam lado a lado; entre elas, escuro ou creme.
   ========================================================================= */
.t-claro,.t-verde,.t-ouro,.t-azul{background:var(--bg);color:var(--ink);border-block:0!important}

/* ---------- creme: seções de leitura ---------- */
.t-claro{--bg:#fbf7ee;--bg2:#f3ecdc;--panel:#ffffff;--panel2:#f6f0e3;--line:#e3d8c2;--ink:#141a22;--txt:#2a3441;--muted:#596472;
  --mint:#0b8a5a;--mint-d:#0b8a5a;--gold:#9a6b00;--red:#c0392b;--shadow:0 18px 44px rgba(70,50,10,.12);color-scheme:light;
  background:radial-gradient(1200px 400px at 85% -10%,#fff3cf 0,transparent 60%),radial-gradient(900px 380px at -10% 110%,#e3f6ec 0,transparent 60%),#fbf7ee}
.t-claro .btn-mint{background:#0e9f68;color:#fff!important}
.t-claro .btn-mint:hover{background:#0b8a5a}
.t-claro .btn-gold{background:#f5c518;color:#231b00!important}
.t-claro .btn-ghost{border-color:#cdbf9f;color:#141a22!important}
.t-claro .btn-ghost:hover{border-color:#0b8a5a;color:#0b8a5a}
.t-claro p a:not(.btn),.t-claro li a:not(.btn){color:#0b6e48}
.t-claro .muted{color:#596472}

/* ---------- verde: passos, números, cidades ---------- */
.t-verde{--bg:#0a5a3f;--bg2:#084d36;--panel:#0e6a4b;--panel2:#127556;--line:#2c8b68;--ink:#ffffff;--txt:#e6fff4;--muted:#c4ecdb;
  --mint:#a6f8d3;--mint-d:#a6f8d3;--gold:#ffd84a;--shadow:0 18px 44px rgba(0,30,18,.35);
  background:radial-gradient(900px 420px at 100% 0,#13875f 0,transparent 60%),linear-gradient(160deg,#0b6446 0%,#08503a 100%)}
.t-verde .btn-mint{background:#ffd84a;color:#231b00!important}
.t-verde .btn-ghost{border-color:#5fb894;color:#fff!important}
.t-verde .btn-ghost:hover{border-color:#ffd84a;color:#ffd84a}
.t-verde p a:not(.btn),.t-verde li a:not(.btn){color:#ffe57a}

/* ---------- amarelo: chamadas para agir ---------- */
.t-ouro{--bg:#f5c518;--bg2:#ecb80c;--panel:#fff8dc;--panel2:#fff2bf;--line:#d9a908;--ink:#1a1403;--txt:#2b2306;--muted:#5a4a10;
  --mint:#0b6b46;--mint-d:#0b6b46;--gold:#1a1403;--shadow:0 18px 44px rgba(90,60,0,.22);color-scheme:light;
  background:radial-gradient(900px 420px at 0 0,#ffe066 0,transparent 60%),linear-gradient(135deg,#f9d230 0%,#f5c518 45%,#f0b400 100%)}
.t-ouro .btn-mint,.t-ouro .btn-gold{background:#121821;color:#fff!important}
.t-ouro .btn-mint:hover,.t-ouro .btn-gold:hover{background:#000}
.t-ouro .btn-ghost{border-color:#1a1403;color:#1a1403!important}
.t-ouro .btn-ghost:hover{background:#1a1403;color:#f5c518!important}
.t-ouro p a:not(.btn),.t-ouro li a:not(.btn){color:#1a1403;text-decoration:underline}
.t-ouro .eyebrow{color:#0b5a3b}

/* ---------- azul: o app, o palco ---------- */
.t-azul{--bg:#0c2766;--bg2:#0a2156;--panel:#13317a;--panel2:#183a88;--line:#2d4f9e;--ink:#ffffff;--txt:#e4ecff;--muted:#bccbee;
  --mint:#3ee8a0;--mint-d:#3ee8a0;--gold:#ffd23f;--shadow:0 18px 44px rgba(0,10,40,.45);
  background:radial-gradient(900px 460px at 90% 0,#1d4cb8 0,transparent 60%),radial-gradient(700px 360px at 0 100%,#0f5a8a 0,transparent 60%),linear-gradient(170deg,#0e2e78 0%,#0a2156 100%)}
.t-azul .btn-ghost{border-color:#5574c0;color:#fff!important}
.t-azul .btn-ghost:hover{border-color:#ffd23f;color:#ffd23f}
.t-azul p a:not(.btn),.t-azul li a:not(.btn){color:#8ff2c6}

/* textos que algumas páginas deixaram fixos em cinza claro */
.t-claro p,.t-ouro p{color:var(--txt)}
.t-claro h1,.t-claro h2,.t-claro h3,.t-claro h4,.t-ouro h1,.t-ouro h2,.t-ouro h3,.t-ouro h4{color:var(--ink)}
.t-claro .muted,.t-claro small,.t-ouro small{color:var(--muted)}

/* ---------- ilha escura dentro de faixa clara (mockups, cartão em destaque) ---------- */
.t-escuro{--bg:#090d12;--bg2:#0e141c;--panel:#141c26;--panel2:#1b2532;--line:#28323f;--ink:#f4f7fa;--txt:#d3dbe4;--muted:#93a1b2;
  --mint:#3ee8a0;--mint-d:#1f7d57;--gold:#f5c518;color:var(--ink);color-scheme:dark}
.t-claro .t-escuro .btn-ghost,.t-ouro .t-escuro .btn-ghost{border-color:#28323f;color:#f4f7fa!important}

/* cartões com texto fixo em cinza claro: na faixa clara, seguem a cor de texto da faixa */
.t-claro .plano li,.t-claro .plano .p-txt,.t-claro .feat p,.t-claro .card p{color:var(--txt)}

/* faixa que ocupa a largura toda mesmo quando a seção está dentro de um contêiner estreito (mídia kit, blog) */
.t-cheio{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);background:var(--bg)!important;padding-top:44px!important;padding-bottom:48px!important;margin-top:44px;margin-bottom:0}
/* v36: faixas de planos e recursos com mais contraste: fundo areia mais escuro e cartões brancos com borda e sombra firmes */
.t-claro.t-contraste{--bg:#e8dbbd;--line:#c9b285;--muted:#4f5864;
  background:linear-gradient(180deg,#eadfc4 0%,#e3d3b0 100%);border-block:1px solid #cdb88c}
.t-contraste .card,.t-contraste .plano:not(.destaque),.t-contraste .precos4>.preco:not(.dest){background:#fff;border:1.5px solid #cbb68b;box-shadow:0 14px 34px rgba(70,48,0,.16),0 2px 0 rgba(70,48,0,.05)}
.t-contraste .card:hover,.t-contraste .plano:not(.destaque):hover,.t-contraste .precos4>.preco:not(.dest):hover{border-color:#0b8a5a}
.t-contraste .sec-head p,.t-contraste .sub{color:#3a4350}