/* =========================================================================
   SpeakPlus — site público
   Sistema visual "sinal": grafite, um acento na cor primária da marca e a
   forma de onda como único material gráfico.

   Regras travadas neste arquivo:
   - Três tons, não um arco-íris: azul (--sig), ciano (--ceu) e âmbar (--calor).
     O padrão do azul é #2e6bff. /site/cor.css pisa só --sig com cfg.site.cor.
     O escuro continua grafite; as três cores entram em brilhos, ícones e lavagens.
   - UM tema por vez. Nenhuma seção inverte claro/escuro no meio do scroll.
   - Raio documentado: painéis 18px, campos 12px, botões e chips pílula.
   - Toda cor nasce no :root claro. Escuro só redefine token, nunca inventa.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --bg:        #f1f3f6;
  --bg-2:      #e7eaef;
  --surf:      #ffffff;
  --surf-2:    #f7f8fa;
  --ink:       #0d1117;
  --ink-2:     #39414f;
  --mut:       #606a7e;
  --line:      #dbe0e8;
  --line-2:    #c4cbd7;

  --sig:       #0066ff;   /* azul elétrico da marca */
  --sig-ink:   #0047d6;
  --sig-soft:  rgba(0, 102, 255, .24);
  --sig-line:  rgba(0, 102, 255, .48);
  --sig-fill:  #0057ff;

  --ceu:       #00b8f0;   /* ciano vivo */
  --ceu-ink:   #0078a8;
  --ceu-soft:  rgba(0, 184, 240, .26);
  --ceu-fill:  #00a3e0;

  --calor:     #ff7a00;   /* laranja vivo */
  --calor-ink: #c24100;
  --calor-soft: rgba(255, 122, 0, .28);
  --calor-fill: #ff6a00;

  --voz-m:      #eef4ff;
  --voz-m-line: #d3e2fb;
  --voz-m-ink:  #1d4e9f;
  --voz-f:      #fff0f5;
  --voz-f-line: #f6d0de;
  --voz-f-ink:  #9a3058;

  --sombra:    0 1px 2px rgba(13, 17, 23, .04), 0 18px 40px -22px rgba(13, 17, 23, .22);
  --sombra-f:  0 2px 4px rgba(13, 17, 23, .06), 0 28px 60px -24px rgba(13, 17, 23, .30);

  --r:    26px;
  --r-s:  14px;
  --r-p:  999px;

  --f:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fm:  ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --faixa: 1240px;
  --pad:   clamp(20px, 5vw, 40px);
  --sec:   clamp(76px, 9vw, 132px);

  --ease:  cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .marca-nome { color: #fff; }
  :root:not([data-tema="light"]) .marca .marca-logo--claro { display: none; }
  :root:not([data-tema="light"]) .marca .marca-logo--escuro { display: block; }
  :root:not([data-tema="light"]) {
    color-scheme: dark;
    --bg:       #0b0e16;
    --bg-2:     #0f131d;
    --surf:     #141925;
    --surf-2:   #101520;
    --ink:      #e8edf5;
    --ink-2:    #b2bccb;
    --mut:      #808b9d;
    --line:     #1f2736;
    --line-2:   #2b3448;
    --sig:      #4d8bff;
    --sig-ink:  #9ec2ff;
    --sig-soft: rgba(77, 139, 255, .32);
    --sig-line: rgba(77, 139, 255, .55);
    --sig-fill: #3b7bff;
    --ceu:      #2ad4ff;
    --ceu-ink:  #8aebff;
    --ceu-soft: rgba(42, 212, 255, .32);
    --ceu-fill: #00c2f0;
    --calor:     #ffb020;
    --calor-ink: #ffe0a3;
    --calor-soft: rgba(255, 176, 32, .34);
    --calor-fill: #ff8c1a;
    --voz-m:      #172033;
    --voz-m-line: #31486f;
    --voz-m-ink:  #c5d9ff;
    --voz-f:      #2a1822;
    --voz-f-line: #5c3548;
    --voz-f-ink:  #ffc6da;
    --sombra:   0 1px 2px rgba(0, 0, 0, .40), 0 18px 40px -22px rgba(0, 0, 0, .70);
    --sombra-f: 0 2px 4px rgba(0, 0, 0, .45), 0 28px 60px -24px rgba(0, 0, 0, .80);
  }
}

:root[data-tema="dark"] {
  color-scheme: dark;
  --bg:       #0b0e16;
  --bg-2:     #0f131d;
  --surf:     #141925;
  --surf-2:   #101520;
  --ink:      #e8edf5;
  --ink-2:    #b2bccb;
  --mut:      #808b9d;
  --line:     #1f2736;
  --line-2:   #2b3448;
  --sig:      #4d8bff;
  --sig-ink:  #9ec2ff;
  --sig-soft: rgba(77, 139, 255, .32);
  --sig-line: rgba(77, 139, 255, .55);
  --sig-fill: #3b7bff;
  --ceu:      #2ad4ff;
  --ceu-ink:  #8aebff;
  --ceu-soft: rgba(42, 212, 255, .32);
  --ceu-fill: #00c2f0;
  --calor:     #ffb020;
  --calor-ink: #ffe0a3;
  --calor-soft: rgba(255, 176, 32, .34);
  --calor-fill: #ff8c1a;
  --voz-m:      #172033;
  --voz-m-line: #31486f;
  --voz-m-ink:  #c5d9ff;
  --voz-f:      #2a1822;
  --voz-f-line: #5c3548;
  --voz-f-ink:  #ffc6da;
  --sombra:   0 1px 2px rgba(0, 0, 0, .40), 0 18px 40px -22px rgba(0, 0, 0, .70);
  --sombra-f: 0 2px 4px rgba(0, 0, 0, .45), 0 28px 60px -24px rgba(0, 0, 0, .80);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* O menu sai do fluxo (position: fixed). Este respiro evita que o
     primeiro bloco fique por baixo da barra de 68px. */
  padding-top: calc(68px + env(safe-area-inset-top, 0px));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
p { margin: 0; }

::selection { background: var(--sig); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r-p);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { transform: none; }

.faixa {
  width: 100%;
  max-width: var(--faixa);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Playhead: progresso de leitura ---------- */
.playhead {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  top: env(safe-area-inset-top, 0px);
  height: 2px;
  z-index: 90;
  pointer-events: none;
  background: var(--line);
}
.playhead-fill {
  display: block;
  height: 100%;
  background: var(--sig);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* Progresso dirigido pelo scroll do documento, sem listener de scroll. */
@supports (animation-timeline: scroll()) {
  .playhead { display: block; }
  .playhead-fill {
    animation: playhead linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes playhead { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .playhead { display: none; }
}

/* ---------- Topo ---------- */
.topo {
  position: fixed;
  inset-inline: 0;
  top: 0;
  width: 100%;
  z-index: 80;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.topo[data-topo="preso"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .topo { background: var(--bg); }
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.marca img {
  height: 42px;
  width: auto;
  max-width: min(210px, 46vw);
  object-fit: contain;
}
.marca .marca-icone {
  width: 34px;
  max-width: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
/* Wordmark SpeakPlus. Plus é a cor fechada da marca (#0089F4),
   independente do acento configurável (--sig). Speak segue o tema. */
.marca-nome {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
  color: #000;
}
.marca-plus { color: #0089F4; }
:root[data-tema="dark"] .marca-nome { color: #fff; }
.marca .marca-logo--escuro { display: none; }
:root[data-tema="dark"] .marca .marca-logo--claro { display: none; }
:root[data-tema="dark"] .marca .marca-logo--escuro { display: block; }

.topo-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.topo-nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--r-p);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.topo-nav a:hover { color: var(--ink); background: var(--sig-soft); }
.topo-nav a[aria-current="page"] { color: var(--ink); }
.topo-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--sig);
}

/* --- Dropdown Institucional (Sobre nós) --- */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 1280px) {
  /* A área do botão desce até o painel. O ponteiro não cai no vão e o menu não fecha. */
  .nav-dropdown {
    padding-bottom: 16px;
    margin-bottom: -16px;
  }
}
.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-p);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-dropdown-btn:hover,
.nav-dropdown[data-aberto] .nav-dropdown-btn {
  color: var(--ink);
  background: var(--sig-soft);
}
.nav-dropdown-btn.ativo {
  color: var(--ink);
  position: relative;
}
.nav-dropdown-btn.ativo::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--sig);
}
.nav-dropdown-ico {
  font-size: 13px;
  transition: transform .2s var(--ease);
}
.nav-dropdown[data-aberto] .nav-dropdown-ico {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 290px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-f);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 100;
}
/* Ponte invisível: o vão entre o botão e o painel continua dentro do menu,
   então o ponteiro desce até o clique sem o painel sumir. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}
.nav-dropdown[data-aberto] .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: var(--r-s) !important;
  text-decoration: none;
  color: var(--ink-2) !important;
  transition: background-color .16s var(--ease), color .16s var(--ease);
  text-align: left;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.ativo {
  background: var(--sig-soft) !important;
  color: var(--ink) !important;
}
.nav-dropdown-item::after {
  content: none !important;
}
.nav-dropdown-item-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  color: var(--sig);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.nav-dropdown-item-icone i {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}
.nav-dropdown-item:hover .nav-dropdown-item-icone,
.nav-dropdown-item.ativo .nav-dropdown-item-icone {
  background: var(--sig);
  color: #fff;
  border-color: var(--sig);
  transform: scale(1.04);
}
/* Aliases de icones Tabler v1/v2 para compatibilidade */
.ti-help-circle:before { content: '\eabf'; }
.ti-broadcast:before { content: '\ee07'; }
.ti-sparkles:before { content: '\ed39'; }
.nav-dropdown-item-corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-item-titulo {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.nav-dropdown-item-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--mut);
  line-height: 1.35;
  white-space: normal;
}
.topo-nav .so-mobile { display: none; }

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.btn-tema, .btn-menu {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-p);
  background: var(--surf);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-tema:hover, .btn-menu:hover { color: var(--ink); border-color: var(--line-2); }
.btn-tema:active, .btn-menu:active { transform: scale(.94); }
.btn-tema i {
  grid-area: 1 / 1;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
}
.btn-tema .ti-moon { display: none; }
:root[data-tema="dark"] .btn-tema .ti-sun { display: none; }
:root[data-tema="dark"] .btn-tema .ti-moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .btn-tema .ti-sun { display: none; }
  :root:not([data-tema="light"]) .btn-tema .ti-moon { display: inline-block; }
}
.btn-menu { display: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-p);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-solido {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig) 88%, #fff), var(--sig));
  color: #fff;
  box-shadow: 0 8px 22px -12px var(--sig);
}
.btn-solido:hover {
  background: color-mix(in srgb, var(--sig) 88%, #000);
  box-shadow: 0 12px 28px -12px var(--sig);
}

.btn-fantasma {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-fantasma:hover { border-color: var(--ink); background: var(--surf); }

.btn-g { padding: 15px 28px; font-size: 16px; }

.btn-texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--sig-ink);
  text-decoration: none;
}
.btn-texto i { transition: transform .2s var(--ease); }
.btn-texto:hover i { transform: translateX(3px); }

/* ---------- Forma de onda ---------- */
.wave {
  display: block;
  width: 100%;
  height: 100%;
}
.wave-base rect { fill: var(--line-2); }
.wave-fill rect { fill: var(--sig); }
.regua-marcas rect { fill: var(--line-2); }

/* ---------- Tipografia de seção ---------- */
.secao { padding-block: var(--sec); background: var(--bg); }
.secao-alt { background: var(--bg-2); }

.olho {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--fm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sig-ink);
}

.titulo {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  max-width: 19ch;
}
.titulo-g {
  font-size: clamp(2.6rem, 7vw, 4.7rem);
  letter-spacing: -.045em;
  line-height: 1.02;
}
.sub {
  margin-top: 18px;
  max-width: 58ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--mut);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- Reveal ---------- */
.rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rev.vis { opacity: 1; transform: none; }
.rev-2 { transition-delay: .07s; }
.rev-3 { transition-delay: .14s; }
.rev-4 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 92px);
}
.hero-grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 13ch; }
.hero .sub {
  max-width: 46ch;
  color: var(--ink-2);
  font-weight: 500;
}
.hero .fatos span { color: var(--ink-2); }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-2);
  align-items: center;
}
.hero-garantias span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.hero-garantias span i {
  color: var(--sig);
  font-size: 16px;
}

/* Console: o painel de audio do hero. Onda real, nao screenshot falso. */
.console-pagina { margin-top: 28px; max-width: 560px; }
.console {
  position: relative;
  padding: 22px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra-f);
}
.console-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.console-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
.console-selo {
  padding: 4px 10px;
  border-radius: var(--r-p);
  background: var(--sig-soft);
  border: 1px solid var(--sig-line);
  color: var(--sig-ink);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.console-onda { height: 108px; margin-bottom: 16px; }
.console-pe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.console-dados {
  display: flex;
  gap: 18px;
  margin-left: auto;
  font-family: var(--fm);
  font-size: 12px;
  color: var(--mut);
}
.console-dados b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }

.tocar {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: 0;
  border-radius: var(--r-p);
  background: var(--sig);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 8px 20px -10px var(--sig);
}
.tocar:hover { transform: scale(1.06); }
.tocar:active { transform: scale(.95); }
.tocar .ti-player-pause,
.tocar .voz-play-ico--pause { display: none; }
.tocar[data-tocando] .ti-player-play,
.tocar[data-tocando] .voz-play-ico--play { display: none; }
.tocar[data-tocando] .ti-player-pause { display: block; }
.tocar[data-tocando] .voz-play-ico--pause { display: grid; }
.tocar .voz-play-ico {
  display: grid;
  place-items: center;
  line-height: 0;
}
.tocar .voz-play-ico svg { display: block; }
.tocar .voz-play-ico--play { transform: translateX(1px); }
.tocar[disabled] { background: var(--line-2); box-shadow: none; cursor: not-allowed; }

.tocar-s { width: 38px; height: 38px; font-size: 16px; }

/* =========================================================================
   FATOS (strip sob o hero)
   ========================================================================= */
.fatos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.fatos > div {
  padding: 28px 0 0;
  padding-right: 24px;
}
.fatos > div + div {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.fatos b {
  display: block;
  font-family: var(--fm);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fatos span {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--mut);
  max-width: 30ch;
}

/* =========================================================================
   BENTO DE TIPOS
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  margin-top: 48px;
}
.bento-cel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento-cel:hover {
  border-color: var(--sig-line);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}
.bento-cel--grande {
  grid-column: 1;
  grid-row: span 2;
  justify-content: flex-end;
  min-height: 340px;
  background: linear-gradient(155deg, var(--surf) 30%, var(--sig-soft));
}
.bento-onda {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  opacity: .5;
  pointer-events: none;
}
.bento-cel--grande .bento-onda { height: 54%; opacity: .75; }
.bento-cel > * { position: relative; }

.bento-icone {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-s);
  background: var(--sig-soft);
  color: var(--sig-ink);
  font-size: 21px;
}
.bento-cel h3 { font-size: 1.28rem; }
.bento-cel--grande h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.bento-linha {
  margin-top: 4px;
  font-weight: 500;
  color: var(--mut);
  font-size: 13px;
}
.bento-cel p.txt {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--mut);
  line-height: 1.6;
  max-width: 42ch;
}
.bento-preco {
  margin-top: 18px;
  font-family: var(--fm);
  font-size: 13px;
  color: var(--ink-2);
}
.bento-preco b { color: var(--sig-ink); font-size: 15px; }
.bento-ouvir {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.bento-ouvir .bento-preco { margin-top: 0; }

/* =========================================================================
   VOZES
   ========================================================================= */
.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 340px);
  gap: 16px;
  margin-top: 40px;
  padding-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  /* sangra ate a borda da viewport para o trilho parecer infinito */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.trilho > * { scroll-snap-align: start; }

.grade-vozes {
  display: grid;
  /* auto-fit, nao auto-fill: com 3 vozes no catalogo as colunas vazias
     colapsam em vez de deixar um buraco na direita da grade. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 36px;
}

.voz {
  display: flex;
  height: 100%;
  padding: 4px 12px 4px 4px;
  overflow: hidden;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 22px;
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.voz[data-sexo="m"] {
  background: var(--voz-m);
  border-color: var(--voz-m-line);
}
.voz[data-sexo="f"] {
  background: var(--voz-f);
  border-color: var(--voz-f-line);
}
.voz:hover { box-shadow: var(--sombra); }
.voz:has([data-tocando]),
.voz.is-ouvindo {
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .16);
}
.voz[data-sexo="m"]:has([data-tocando]),
.voz[data-sexo="m"].is-ouvindo { box-shadow: 0 0 0 3px rgba(29, 78, 159, .22); }
.voz[data-sexo="f"]:has([data-tocando]),
.voz[data-sexo="f"].is-ouvindo { box-shadow: 0 0 0 3px rgba(154, 48, 88, .22); }
.voz-corpo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 2.7em auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 132px;
}
.voz-lado {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: 148px;
  height: 148px;
}
.trilho .voz-lado {
  width: 96px;
  height: 96px;
}
.voz-id { min-width: 0; flex: 1; }
.voz-id h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voz-foto {
  display: block;
  width: 100%;
  height: 100%;
  flex: none;
  border-radius: 18px;
  object-fit: cover;
  background: var(--bg-2);
  border: 0;
  overflow: hidden;
}
/* A listagem mostra o PNG. Enquanto a demo toca, o SVG vivo ocupa o mesmo círculo. */
.cv-voz-rosto {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.cv-voz-rosto > .cv-voz-rosto-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}
.cv-voz-rosto > .cv-voz-rosto-vivo {
  display: none;
  position: absolute;
  inset: 0;
  background: #0f172a;
}
.cv-voz-rosto.is-locutando > .cv-voz-rosto-still {
  visibility: hidden;
}
.cv-voz-rosto.is-locutando > .cv-voz-rosto-vivo {
  display: block;
}
.cv-voz-rosto > .cv-voz-rosto-vivo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.voz-inicial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  flex: none;
  border-radius: 18px;
  background: var(--sig-soft);
  color: var(--sig-ink);
  font-weight: 800;
  font-size: 28px;
  border: 0;
  overflow: hidden;
}
.voz-miolo {
  display: contents;
}
.voz-topo {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.voz-id { min-width: 0; flex: 1; }
.voz h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  line-height: 1.15;
  height: 1.15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voz-selos {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-top: 4px;
  overflow: hidden;
}
.voz-selo {
  flex: none;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--surf) 78%, transparent);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.voz[data-sexo="m"] .voz-selo { color: var(--voz-m-ink); }
.voz[data-sexo="f"] .voz-selo { color: var(--voz-f-ink); }
.voz[data-tier="premium"] .voz-selo--tier {
  background: #e8c56a;
  color: #3d2808;
}
.voz-selo--nome {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voz-n {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--surf) 78%, transparent);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.voz-n.is-varios {
  background: color-mix(in srgb, var(--sig) 22%, var(--surf));
  color: var(--sig-ink);
  box-shadow: inset 0 0 0 1px var(--sig-line);
}
.voz-play {
  position: static;
  flex: none;
  width: 42px;
  height: 42px;
  font-size: 18px;
  background: var(--sig);
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--sig);
}
.voz-play:hover {
  background: var(--sig-fill);
  color: #fff;
}
.voz[data-sexo="m"] .voz-play,
.voz[data-sexo="f"] .voz-play {
  color: #fff;
}
.voz-play .voz-play-ico {
  display: grid;
  place-items: center;
  line-height: 0;
}
.voz-play .voz-play-ico svg { display: block; }
.voz-play .voz-play-ico--play { transform: translateX(1px); }
.voz-play .ti-player-pause,
.voz-play .voz-play-ico--pause { display: none; }
.voz-play[data-tocando] .voz-play-ico--play,
.voz.is-ouvindo .voz-play .voz-play-ico--play { display: none; }
.voz-play[data-tocando] .voz-play-ico--pause,
.voz.is-ouvindo .voz-play .voz-play-ico--pause { display: grid; }
.voz-play[data-tocando],
.voz.is-ouvindo .voz-play {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(13, 17, 23, .4);
}
.voz-lado > .voz-sem-demo {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: var(--r-p);
  background: rgba(255, 255, 255, .92);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
}
.voz p.txt {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  height: 2.7em;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.voz-base {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-top: 0;
}
.voz-pedir {
  margin-left: auto;
  margin-top: 0;
  font-size: 13px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-p);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.chip-sig { background: var(--sig-soft); border-color: var(--sig-line); color: var(--sig-ink); }

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--sig-line);
  border-radius: var(--r-s);
  background: var(--sig-soft);
  font-size: 14.5px;
  color: var(--ink-2);
}
.aviso i { color: var(--sig-ink); font-size: 19px; flex: none; }

/* =========================================================================
   PASSOS (faixa de tempo)
   ========================================================================= */
.regua { width: 100%; height: 16px; margin-bottom: 8px; opacity: .6; }

.passos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  border-top: 0;
  align-items: stretch;
}
.passo {
  position: relative;
  padding: 22px 18px 20px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--sombra);
}
.passo + .passo { padding-left: 18px; }
.passo::before { content: none; }
.passo-n {
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-ink);
  letter-spacing: .1em;
}
.passo h3 { margin-top: 10px; font-size: 1.12rem; }
.passo p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--mut);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .passo::before { transition: none; }
}

/* =========================================================================
   CALCULADORA DE PREÇO
   ========================================================================= */
.calc {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
  margin-top: 44px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.calc-entrada { padding: clamp(22px, 3vw, 34px); }
.calc-saida {
  padding: clamp(22px, 3vw, 34px);
  background: var(--surf-2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.campo { display: block; margin-bottom: 18px; }
/* Grupo de radios/checkbox dentro de um card de formulário. Reset do fieldset
   para o <legend> ocupar o lugar do antigo <span>. */
fieldset.campo { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
fieldset.campo > legend {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.campo > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.campo > small {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mut);
}
.campo textarea,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.campo textarea:focus,
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--sig);
  box-shadow: 0 0 0 3px var(--sig-soft);
}
.campo ::placeholder { color: var(--mut); opacity: 1; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcao span {
  display: block;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-p);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  transition: all .18s var(--ease);
}
.opcao input:checked + span {
  background: var(--sig);
  border-color: var(--sig);
  color: #fff;
}
.opcao input:focus-visible + span { outline: 2px solid var(--sig); outline-offset: 3px; }

.calc-total {
  font-family: var(--fm);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.calc-rot {
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 10px;
}
.calc-linhas {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 11px;
}
.calc-linhas div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--mut);
}
.calc-linhas b { font-family: var(--fm); color: var(--ink); font-weight: 600; }
.calc-nota {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.55;
}
.calc-saida .btn { margin-top: 22px; }

/* =========================================================================
   PACOTES
   ========================================================================= */
.pacotes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 48px;
}
.pacote {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  max-width: 100%;
  padding: 24px 20px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.pacote:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pacote--destaque {
  border-color: var(--sig);
  box-shadow: 0 0 0 1px var(--sig), var(--sombra);
}
.pacote-nome {
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut);
}
.pacote-valor {
  margin-top: 14px;
  font-family: var(--fm);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.pacote-bonus {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sig-ink);
}
.pacote-uso {
  margin-top: 12px;
  font-size: 14px;
  color: var(--mut);
  line-height: 1.55;
  flex: 1;
}
@media (min-width: 640px) {
  .pacote {
    flex-basis: calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
}
@media (min-width: 900px) {
  .pacote {
    flex-basis: calc((100% - 42px) / 4);
    max-width: calc((100% - 42px) / 4);
  }
}

/* =========================================================================
   SEGMENTOS
   ========================================================================= */
.segmento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.segmento + .segmento { margin-top: clamp(56px, 8vw, 104px); }
.segmento:nth-child(even) .segmento-txt { order: 2; }
.segmento-foto {
  border-radius: var(--r);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--bg-2);
}
.lista { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lista li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-2);
}
.lista i { color: var(--sig-ink); font-size: 18px; flex: none; margin-top: 1px; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { margin-top: 48px; max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 32px 20px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  letter-spacing: -.02em;
  list-style: none;
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sig-ink); }
.faq summary::after {
  content: "\ea61"; /* ti-plus */
  font-family: "tabler-icons";
  position: absolute;
  right: 0;
  top: 50%;
  margin-left: 0;
  font-size: 18px;
  color: var(--sig-ink);
  transform: translateY(-50%);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-resp {
  padding: 0 40px 24px 0;
  font-size: 15px;
  color: var(--mut);
  line-height: 1.7;
  max-width: 68ch;
}

/* =========================================================================
   BLOG
   ========================================================================= */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  margin-top: 44px;
}
.post {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post:hover {
  border-color: var(--sig-line);
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}
.post-meta .chip-sig { text-transform: none; letter-spacing: 0; font-family: var(--f); }
.post h3 {
  margin-top: 16px;
  font-size: 1.32rem;
  line-height: 1.22;
}
.post p {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--mut);
  line-height: 1.6;
  flex: 1;
}
.post .btn-texto { margin-top: 20px; }

.posts-relacionados {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
}
.relacionados-titulo {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -.03em;
}
.relacionados-pe {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}
.relacionados-pe .btn { gap: 8px; }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.paginacao-info {
  margin: 0;
  font-size: 14px;
  color: var(--mut);
}
.paginacao-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.paginacao-nav a,
.paginacao-nav span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.paginacao-nav a:hover { border-color: var(--ink); }
.paginacao-nav .is-atual {
  background: var(--sig);
  border-color: var(--sig);
  color: #fff;
}
.paginacao-nav .is-off { opacity: .35; }

/* ---------- Artigo e páginas de texto ----------
   Mesma largura da faixa do site. O texto não fica numa coluna mais estreita. */
.artigo { width: 100%; max-width: none; }
.artigo-cabeca { padding-block: clamp(48px, 7vw, 84px) 0; }
.prosa { margin-top: 36px; font-size: 17px; line-height: 1.78; color: var(--ink-2); }
.prosa > * + * { margin-top: 1.35em; }
.prosa h2 {
  margin-top: 2.2em;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.prosa h3 { margin-top: 1.9em; font-size: 1.2rem; color: var(--ink); }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .5em; }
.prosa a { color: var(--sig-ink); text-underline-offset: 3px; }
.prosa strong { color: var(--ink); }
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prosa th, .prosa td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}
.prosa th { color: var(--ink); font-weight: 700; }
.tabela-rolagem { overflow-x: auto; }

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.cta {
  position: relative;
  padding-block: clamp(70px, 9vw, 120px);
  overflow: hidden;
  background: var(--surf);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-onda {
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  opacity: .30;
  pointer-events: none;
}
.cta .faixa { position: relative; }
.cta h2 { max-width: 16ch; }
.cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* =========================================================================
   PROVA SOCIAL
   ========================================================================= */
.prova-fatos {
  margin-top: 48px;
}
.prova-fatos b {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prova-ico {
  font-size: .62em;
  color: var(--sig);
}
.depo-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}
.depo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}
.depo blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.depo blockquote::before {
  content: "“";
  display: block;
  font-family: var(--fm);
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--sig);
}
.depo figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.depo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--fm);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--sig) 0%, var(--sig-ink) 100%);
}
.depo-quem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.depo-quem b {
  font-size: 14px;
  color: var(--ink);
}
.depo-quem span {
  font-size: 12.5px;
  color: var(--mut);
}
@media (max-width: 900px) {
  .depo-grade { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONTATO
   ========================================================================= */
.contato-grade {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 44px;
}
.form-painel {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}
.form-erro {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-ink);
}
.form-aviso {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-s);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--bg);
}
.form-aviso[data-tipo="ok"] { border-color: var(--sig-line); background: var(--sig-soft); color: var(--sig-ink); }
.form-aviso[data-tipo="erro"] { border-color: var(--line-2); color: var(--ink); }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.canais { display: grid; gap: 14px; }
.canal {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.canal:hover { border-color: var(--sig-line); }
.canal i { font-size: 21px; color: var(--sig-ink); flex: none; margin-top: 2px; }
.canal b { display: block; font-size: 15px; }
.canal span { display: block; margin-top: 3px; font-size: 14px; color: var(--mut); }

/* =========================================================================
   404
   ========================================================================= */
.erro-404 {
  padding-block: clamp(80px, 14vw, 180px);
  text-align: center;
}
.erro-404 .titulo-g { margin-inline: auto; }
.erro-404 .sub { margin-inline: auto; }
.erro-404 .hero-ctas { justify-content: center; }
.erro-onda { height: 90px; max-width: 520px; margin: 44px auto 0; opacity: .5; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.rodape-grade {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
}
.rodape-marca p {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--mut);
  line-height: 1.6;
}
.rodape-social { display: flex; gap: 8px; margin-top: 20px; }
.rodape-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-p);
  color: var(--ink-2);
  font-size: 18px;
  text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.rodape-social a:hover { color: var(--sig-ink); border-color: var(--sig-line); }

.rodape-col { display: flex; flex-direction: column; gap: 11px; }
.rodape-col h2 {
  font-family: var(--fm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 4px;
}
.rodape-col a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  width: fit-content;
  transition: color .18s var(--ease);
}
.rodape-col a:hover { color: var(--sig-ink); }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--mut);
}
.rodape-base a { color: var(--ink-2); text-decoration: none; }
.rodape-base a:hover { color: var(--sig-ink); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 1080px) {
  .hero-grade { grid-template-columns: 1fr; }
  .console { max-width: 620px; }
  .calc { grid-template-columns: 1fr; }
  .calc-saida { border-left: 0; border-top: 1px solid var(--line); margin-top: 4px; }
  .contato-grade { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}

/* Sete links mais Entrar e Criar conta só cabem por volta de 1280px.
   Abaixo disso o menu fica no painel, senão Criar conta sai da tela. */
@media (max-width: 1279px) {
  .topo-nav {
    position: fixed;
    inset: calc(68px + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 14px var(--pad) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sombra-f);
    max-height: calc(100vh - 68px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .topo-nav[data-aberto] { opacity: 1; transform: none; visibility: visible; }
  html.menu-aberto,
  html.menu-aberto body { overflow: hidden; }
  .topo-nav a { padding: 13px 14px; font-size: 16px; border-radius: var(--r-s); }
  .topo-nav a[aria-current="page"]::after { left: 14px; right: auto; width: 18px; bottom: 8px; }
  .nav-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dropdown-btn {
    width: 100%;
    justify-content: space-between;
    padding: 13px 14px;
    font-size: 16px;
    border-radius: var(--r-s);
  }
  .nav-dropdown-btn.ativo::after {
    left: 14px; right: auto; width: 18px; bottom: 8px;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none !important;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line-2);
    border-radius: 0;
    margin: 2px 0 6px 14px;
    padding: 4px 0 4px 10px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .nav-dropdown[data-aberto] .nav-dropdown-menu {
    display: flex;
  }
  .nav-dropdown-item {
    padding: 10px 12px !important;
    font-size: 14px;
  }
  .topo-nav .so-mobile { display: block; }
  .topo-nav a.nav-entrar,
  .topo-nav a.nav-criar {
    margin-top: 8px;
    text-align: center;
  }
  .topo-nav a.nav-entrar { color: var(--ink); }
  .topo-nav a.nav-entrar:hover { color: var(--ink); background: var(--sig-soft); }
  .topo-nav a.nav-criar,
  .topo-nav a.nav-criar:hover { color: #fff; }
  .topo-nav a.nav-criar:hover { background: color-mix(in srgb, var(--sig) 88%, #000); }
  .btn-menu { display: inline-grid; }
  .so-desktop { display: none; }
  /* Com o menu fora do fluxo, as ações voltavam a colar na marca. */
  .topo-acoes { margin-left: auto; }
}

@media (max-width: 1279px) {
  .passos { grid-template-columns: repeat(2, 1fr); }
  .passo { padding: 20px 18px; }
  .passo:nth-child(odd) { padding-left: 18px; }
  .passos:not(.passos-3) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Entre 720 e 1279 ainda cabe o Entrar ao lado de Criar conta.
   Abaixo disso ele fica só no menu. */
@media (min-width: 720px) and (max-width: 1279px) {
  .topo-acoes .so-desktop { display: inline-flex; }
  .topo-nav .nav-entrar { display: none; }
}
@media (min-width: 481px) {
  .topo-nav .nav-criar { display: none; }
}
@media (max-width: 480px) {
  .topo-acoes .btn-conta { display: none; }
}

@media (max-width: 860px) {
  .posts-lista .post { gap: 14px; padding: 16px 18px; }
  .posts-relacionados { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 7fr 5fr; }
  .bento-cel--grande { grid-column: 1; grid-row: span 2; min-height: 280px; }
  .segmento { grid-template-columns: 1fr; }
  .segmento:nth-child(even) .segmento-txt { order: 0; }
}

@media (max-width: 680px) {
  .topo-linha { height: 60px; }
  body { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  html { scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  .topo-nav {
    inset-block-start: calc(60px + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
  }
  .fatos { grid-template-columns: 1fr; }
  .fatos > div + div { margin-top: 0; }
  .bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bento-cel--grande { grid-column: auto; grid-row: auto; }
  .passos { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
  .passo { padding: 20px 18px; }
  .passo + .passo { margin-top: 0; }
  .passos:not(.passos-3) > :last-child:nth-child(odd) { grid-column: auto; }
  .rodape-grade { grid-template-columns: 1fr; }
  .console-pe { flex-wrap: wrap; }
  .console-dados { margin-left: 0; width: 100%; }
  .hero-ctas .btn,
  .cta-ctas .btn { flex: 1 1 auto; }
  /* No 404 o último botão ficava sozinho na linha e esticava a faixa inteira. */
  .erro-404 .hero-ctas { flex-direction: column; align-items: stretch; }
  .erro-404 .hero-ctas .btn { flex: none; width: 100%; }
}

/* =========================================================================
   CABEÇALHO DE PÁGINA INTERNA
   ========================================================================= */
.mais { margin-top: 34px; }

.cabeca {
  padding-top: clamp(46px, 6vw, 82px);
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.cabeca .titulo-g { max-width: none; font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.cabeca .sub { max-width: none; }

.migalha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
.migalha a { color: var(--mut); text-decoration: none; }
.migalha a:hover { color: var(--sig-ink); }
.migalha i { font-size: 13px; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

/* Blocos de duas colunas usados em jingles e rádios */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.duo > .painel { align-self: stretch; }
.painel {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.painel h3 { font-size: 1.22rem; }
.painel p { margin-top: 12px; color: var(--mut); font-size: 15px; line-height: 1.65; }

.preco-destaque {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 20px;
  font-family: var(--fm);
}
.preco-destaque b {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  white-space: nowrap;
}
.preco-destaque span {
  flex: 1 1 12em;
  min-width: min(100%, 12em);
  font-size: 13.5px;
  color: var(--mut);
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
}

/* =========================================================================
   TABELAS
   ========================================================================= */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 620px;
}
.tabela th, .tabela td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabela thead th {
  font-family: var(--fm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  border-bottom-color: var(--line-2);
}
.tabela tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.tabela tbody th small {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mut);
  white-space: normal;
}
.tabela td { color: var(--mut); }
.tabela td b { font-family: var(--fm); color: var(--sig-ink); font-weight: 700; }
.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .tabela-rolagem { overflow-x: visible; }
  .tabela {
    display: block;
    min-width: 0;
  }
  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  .tabela tbody { display: block; }
  .tabela tr {
    display: block;
    margin-top: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surf);
  }
  .tabela tbody th,
  .tabela td {
    display: block;
    width: auto;
    padding: 10px 0 0;
    border: 0;
    white-space: normal;
  }
  .tabela tbody th {
    padding-top: 0;
    font-size: 1.05rem;
  }
  .tabela td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    font-family: var(--fm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut);
  }
}

/* Título de card de post: o markup usa h2 na listagem e h3 nos relacionados */
.post h2, .post .post-titulo {
  margin-top: 16px;
  font-size: 1.32rem;
  line-height: 1.22;
}
.post .post-meta .chip { flex: none; }

/* Listagem: um artigo por linha, dez por página. Os três parecidos continuam em grade. */
.posts-lista {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 36px;
}
.posts-lista .post {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
}
.posts-lista .post:hover { transform: none; }
.posts-lista .chip {
  flex: none;
  box-sizing: border-box;
  width: 6.75rem;
  text-align: center;
}
.posts-lista .post-titulo,
.posts-lista h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lista-acao {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: none;
  margin-left: 8px;
}
.lista-leitura {
  font-size: 13.5px;
  color: var(--mut);
  white-space: nowrap;
}
.posts-lista .btn-texto { margin: 0; }

@media (max-width: 860px) {
  .posts-lista .post-titulo,
  .posts-lista h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
@media (max-width: 680px) {
  .posts-lista .post {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .lista-acao { margin-left: 0; }
}

/* =========================================================================
   DOCUMENTO JURÍDICO
   O texto vem do painel, com marcação Bootstrap. Aqui ele veste a tipografia
   do site sem precisar de uma segunda cópia do documento.
   ========================================================================= */
.juridico h5,
.juridico .card-title {
  margin-top: 2.2em;
  margin-bottom: .6em;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
}
.juridico .termos-conteudo { font-size: inherit; }
.juridico .small { font-size: inherit; }
.juridico .fw-semibold {
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
}
.juridico .text-uppercase { text-transform: none; }
.juridico b, .juridico strong { color: var(--ink); }
.juridico br + br { line-height: 1.9; }

/* =========================================================================
   CORREÇÕES DA RODADA DE INSPEÇÃO
   ========================================================================= */

/* Sem JS a página aparece inteira. O .rev só esconde quando tema.js marcou
   <html class="js">, senão um erro de script deixaria o site em branco. */
.rev { opacity: 1; transform: none; }
.js .rev { opacity: 0; transform: translateY(20px); }
.js .rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}

/* Filhos de grid/flex não seguram largura mínima de conteúdo: sem isto,
   uma célula larga estica a faixa inteira e vaza a viewport no celular. */
.hero-grade > *,
.duo > *,
.segmento > *,
.calc > *,
.contato-grade > *,
.bento-cel,
.passo,
.fatos > div,
.voz,
.post { min-width: 0; }

.console { max-width: 100%; }
.console-dados { flex-wrap: wrap; }
html { overflow-x: clip; }

/* A onda é o objeto principal do hero: no claro precisava de mais presença. */
:root { --onda: #a9b2c2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) { --onda: #39435e; }
}
:root[data-tema="dark"] { --onda: #39435e; }
.wave-base rect { fill: var(--onda); }
.regua-marcas rect { fill: var(--onda); }

/* Quarta célula do bento: faixa larga que fecha a grade sem deixar buraco. */
.bento-cel--largo {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.bento-cel--largo .bento-icone { margin-bottom: 0; }
.bento-cel--largo h3 { flex: none; }
.bento-cel--largo .bento-linha { flex: none; color: var(--mut); }
.bento-cel--largo p.txt { flex: 1 1 320px; margin-top: 0; max-width: none; }
.bento-cel--largo .bento-preco { margin-top: 0; margin-left: auto; white-space: nowrap; }

/* Voz sem demonstração publicada. */
.voz-sem-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
}
.voz-sem-demo i { font-size: 16px; }

@media (max-width: 680px) {
  .bento-cel--largo { flex-direction: column; align-items: flex-start; gap: 0; }
  .bento-cel--largo .bento-icone { margin-bottom: 16px; }
  .bento-cel--largo p.txt { margin-top: 10px; }
  .bento-cel--largo .bento-preco { margin-left: 0; margin-top: 18px; }
}

/* =========================================================================
   AJUSTES DA SEGUNDA RODADA
   ========================================================================= */

/* FAQ na mesma faixa das outras páginas de conteúdo. */
.faq { max-width: none; }
.faq-resp { max-width: none; }

/* Barra de recado, ligada e escrita em /config/site */
.recado {
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  padding-block: 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  text-align: center;
}
.recado a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.recado a:hover { text-decoration: underline; }
.recado i { transition: transform .2s var(--ease); }
.recado a:hover i { transform: translateX(3px); }

/* Com a barra de recado no topo, o header gruda abaixo dela e não por cima. */
.recado + .playhead + .topo { top: 0; }

/* Espaçamento pontual entre um painel e a grade que vem depois. */
.mb-4 { margin-bottom: 28px; }

/* =========================================================================
   AVISO DE CONSENTIMENTO
   Barra fixa no rodapé. O ícone e a cópia são os mesmos em qualquer página;
   só aparece quando ainda não houve escolha (js/consent.js).
   ========================================================================= */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surf);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -18px 40px -24px rgba(13, 17, 23, .35);
}
.consent[hidden] { display: none; }
.consent-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding-block: 16px;
}
.consent-txt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent-txt i { color: var(--sig-ink); font-size: 19px; flex: none; margin-top: 1px; }
.consent-txt a { color: var(--sig-ink); font-weight: 600; }
.consent-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-consent { padding: 11px 20px; font-size: 15px; }

@media (max-width: 640px) {
  .consent-acoes { width: 100%; }
  .btn-consent { flex: 1 1 0; justify-content: center; }
}

/* Filtro de categoria do blog. Cada recorte tem URL própria. */
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-p);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.chip-filtro span {
  font-family: var(--fm);
  font-size: 11.5px;
  color: var(--mut);
}
.chip-filtro:hover { border-color: var(--ink); color: var(--ink); }
.chip-filtro--ativo {
  background: var(--sig);
  border-color: var(--sig);
  color: #fff;
}
.chip-filtro--ativo span { color: rgba(255, 255, 255, .78); }

/* Escala do hero calibrada para o título de 8 palavras.
   Titular longo com corpo de 4.7rem quebrava em 3 linhas no desktop: a coluna
   de texto ganha espaço e o corpo cede um pouco, para fechar em 2 linhas. */
@media (min-width: 1081px) {
  .hero-grade { grid-template-columns: 1.18fr .82fr; }
}
.hero h1 {
  max-width: 22ch;
  font-size: clamp(2.35rem, 5.1vw, 3.75rem);
}

/* =========================================================================
   COREOGRAFIA (GSAP + Web Audio) — ver js/anim.js e js/onda.js

   Contrato com o JS:
   - Quando o GSAP está ativo, ele controla hero/cascatas com inline style
     e ESTE css não pode brigar: por isso os alvos da coreografia recebem
     <html data-gsap> e o .rev deles é neutralizado (o GSAP assume).
   - O tema.js marca <html class="js">; sem JS, nada esconde.
   - reduced-motion: os dois módulos nem inicializam — regras de segurança
     abaixo garantem conteúdo visível mesmo se algo escorregar.
   ========================================================================= */

/* Barras da waveform se movem por atributo (onda.js) sem transição CSS.
   A transição aqui cria o lag entre bandas que lê como "áudio de verdade". */
.wave-base rect { transition: y .09s linear, height .09s linear; }
@media (prefers-reduced-motion: reduce) {
  .wave-base rect { transition: none; }
}

/* Coreografia ativa: o GSAP assumiu hero/cascatas (anim.js marca data-gsap
   antes do primeiro paint e remove .rev dos alvos dele). Esta regra é a
   defesa em profundidade: nenhum alvo da coreografia transiciona opacity
   pelo CSS, porque duas mãos na mesma propriedade congelam o valor. */
[data-gsap] .hero .olho,
[data-gsap] .hero .titulo-g,
[data-gsap] .hero .sub,
[data-gsap] .hero-ctas .btn,
[data-gsap] .console,
[data-gsap] .bento-cel,
[data-gsap] .pacote,
[data-gsap] .depo,
[data-gsap] .canal,
[data-gsap] .passo {
  transition: none !important;
}

/* Cartões sob tilt 2D precisam de profundidade real no hover. */
.bento-cel, .pacote, .depo, .voz { will-change: transform; transform-style: preserve-3d; }

/* Botão tocando: anel de sinal pulsando com a cor do acento. */
@keyframes cvz-pulso {
  0%   { box-shadow: 0 0 0 0 var(--sig-soft), 0 0 0 1px var(--sig-line); }
  70%  { box-shadow: 0 0 0 14px transparent, 0 0 0 1px var(--sig-line); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 1px var(--sig-line); }
}
.tocar[data-tocando] { animation: cvz-pulso 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tocar[data-tocando] { animation: none; }
}

/* =========================================================================
   PALCO — o produto no centro, no mesmo sistema (grafite + um azul)
   ========================================================================= */
:root { --sec: clamp(56px, 7vw, 96px); }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  padding-bottom: clamp(28px, 4vw, 52px);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Não vazar para a seção seguinte — o inset negativo embaixo gerava faixa dupla. */
  inset: -18% -10% 0;
  background:
    radial-gradient(ellipse at 80% 18%, color-mix(in srgb, var(--sig) 62%, transparent), transparent 48%),
    radial-gradient(ellipse at 4% 48%, color-mix(in srgb, var(--ceu) 55%, transparent), transparent 46%),
    radial-gradient(ellipse at 42% 72%, color-mix(in srgb, var(--calor) 42%, transparent), transparent 40%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(var(--line-2) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 74% 22%, #000 0%, transparent 62%);
  pointer-events: none;
  opacity: .55;
}

.palco { position: relative; }
.palco-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 14px;
}
.palco-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--surf) 86%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--sombra);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.palco-chip i { font-size: 15px; }
.palco-chip:nth-child(1) { background: color-mix(in srgb, var(--sig-fill) 22%, var(--surf)); border-color: var(--sig-line); }
.palco-chip:nth-child(1) i { color: var(--sig-fill); }
.palco-chip:nth-child(2) { background: color-mix(in srgb, var(--ceu-fill) 24%, var(--surf)); border-color: color-mix(in srgb, var(--ceu) 55%, transparent); }
.palco-chip:nth-child(2) i { color: var(--ceu-fill); }
.palco-chip:nth-child(3) { background: color-mix(in srgb, var(--calor-fill) 26%, var(--surf)); border-color: color-mix(in srgb, var(--calor) 60%, transparent); }
.palco-chip:nth-child(3) i { color: var(--calor-fill); }

.console {
  border-radius: 36px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--ceu-fill) 26%, var(--surf)) 0%, var(--surf) 52%);
  box-shadow: var(--sombra-f), 0 0 0 1px color-mix(in srgb, var(--sig) 22%, transparent);
}

.fatos {
  margin-top: 52px;
  gap: 14px;
  border-top: 0;
}
.fatos > div {
  padding: 22px 22px 20px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--sombra);
}
.fatos > div:nth-child(3n+1) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--sig-fill) 10%, var(--surf)), var(--surf));
  border-color: var(--sig-line);
}
.fatos > div:nth-child(3n+2) {
  margin-top: 0;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ceu-fill) 6%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--ceu) 55%, var(--line));
}
.fatos > div:nth-child(3n) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--calor-fill) 8%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--calor) 58%, var(--line));
}
.hero .fatos > div:nth-child(odd),
.secao .fatos > div,
.secao .fatos > div:nth-child(odd),
.secao .fatos > div + div { margin-top: 0; }
.fatos > div + div { padding-left: 22px; }
.hero .fatos b {
  font-size: clamp(1.15rem, 1.55vw, 1.42rem);
  white-space: nowrap;
}
.fatos > div > i {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sig-fill);
  color: #fff;
  font-size: 18px;
}
.fatos > div:nth-child(3n+2) > i { background: var(--ceu-fill); color: #041820; }
.fatos > div:nth-child(3n) > i { background: var(--calor-fill); color: #1a1200; }

.voz-foto,
.voz-inicial { border-radius: 18px; }

/* Catálogo da página /vozes: busca, recorte e grade mais densa. */
.cabeca-catalogo { padding-bottom: 8px; border-bottom: 0; }
.cabeca-catalogo .titulo-g { font-size: clamp(2.05rem, 4.2vw, 2.9rem); max-width: 14ch; }
.cabeca-catalogo .sub { margin-top: 12px; max-width: 48ch; }
.cabeca-catalogo + .secao { padding-top: 4px; }
.banco-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.banco-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: min(100%, 200px);
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--r-p);
  color: var(--mut);
}
.banco-busca i { font-size: 18px; flex: none; }
.banco-busca input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.banco-busca input:focus { outline: none; }
.banco-busca input::-webkit-search-cancel-button { cursor: pointer; }
.banco-busca:focus-within {
  border-color: var(--sig);
  box-shadow: 0 0 0 3px var(--sig-soft);
}
.banco-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
button.chip-filtro {
  background: var(--surf);
  font-family: inherit;
  cursor: pointer;
}
button.chip-filtro.chip-filtro--ativo {
  background: var(--sig);
  border-color: var(--sig);
  color: #fff;
}
.banco .grade-vozes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  margin-top: 18px;
}
@media (max-width: 980px) {
  .banco .grade-vozes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .banco .grade-vozes { grid-template-columns: 1fr; }
}
.banco-vazio {
  margin-top: 18px;
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-2);
  background: var(--surf);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}
.banco-vazio .btn-texto {
  display: inline-flex;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* Modal de estilos e demos da voz */
.voz-dialog {
  width: min(480px, calc(100vw - 28px));
  max-height: min(86vh, 720px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surf);
  color: var(--ink);
  box-shadow: var(--sombra-f);
  overflow: hidden;
}
.voz-dialog::backdrop {
  background: rgba(13, 17, 23, .46);
  backdrop-filter: blur(5px);
}
.voz-dialog-cartao {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
}
.voz-dialog-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 12px 8px 8px;
}
.voz-dialog-topo[data-sexo="m"] { background: var(--voz-m); }
.voz-dialog-topo[data-sexo="f"] { background: var(--voz-f); }
.voz-dialog-rosto {
  width: auto;
  height: 148px;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surf);
}
.voz-dialog-foto,
.voz-dialog-inicial {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  background: var(--surf);
}
.voz-dialog-rosto > .voz-dialog-foto,
.voz-dialog-rosto > .cv-voz-rosto-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.voz-dialog-inicial {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 26px;
}
.voz-dialog-topo[data-sexo="m"] .voz-dialog-inicial { color: var(--voz-m-ink); }
.voz-dialog-topo[data-sexo="f"] .voz-dialog-inicial { color: var(--voz-f-ink); }
.voz-dialog-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.voz-dialog-topo[data-sexo="m"] .voz-dialog-kicker { color: var(--voz-m-ink); }
.voz-dialog-topo[data-sexo="f"] .voz-dialog-kicker { color: var(--voz-f-ink); }
.voz-dialog-topo h2 {
  margin: 2px 0 0;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.voz-dialog-topo p.txt {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.voz-dialog-x {
  align-self: start;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--surf) 70%, transparent);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.voz-dialog-corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}
.voz-dialog-amostra,
.voz-dialog-estilo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}
.voz-dialog-estilo.is-padrao { border-color: var(--sig-line); }
.voz-dialog-amostra .tocar,
.voz-dialog-demos .tocar { box-shadow: none; }
.voz-dialog-rotulo { min-width: 0; }
.voz-dialog-rotulo strong { display: block; font-size: 14.5px; }
.voz-dialog-rotulo span,
.voz-dialog-estilo p {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.voz-dialog-secao {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mut);
}
.voz-dialog-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voz-dialog-estilo { align-items: flex-start; background: var(--surf); }
.voz-dialog-estilo i.ti {
  flex: none;
  margin-top: 2px;
  font-size: 18px;
  color: var(--sig-ink);
}
.voz-dialog-estilo .miolo { min-width: 0; flex: 1; }
.voz-dialog-estilo .nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.voz-dialog-marca {
  padding: 1px 7px;
  border-radius: var(--r-p);
  background: var(--sig-soft);
  color: var(--sig-ink);
  font-size: 11px;
  font-weight: 700;
}
.voz-dialog-demos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.voz-dialog-demo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.voz-dialog-demo .tocar { width: 32px; height: 32px; font-size: 15px; }
.voz-dialog-demo span { font-size: 13px; color: var(--ink-2); }
.voz-dialog-pe {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}
.voz-dialog-pe .btn { width: 100%; }

.lista-banco { max-width: 62ch; }

.passo { border-radius: 28px; }
.passo:nth-child(3n+1) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig-fill) 10%, var(--surf)), var(--surf));
}
.passo:nth-child(3n+2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ceu-fill) 6%, var(--surf)), var(--surf));
}
.passo:nth-child(3n) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--calor-fill) 8%, var(--surf)), var(--surf));
}
.passo-n {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-p);
  background: var(--sig-fill);
  border: 0;
  color: #fff;
  letter-spacing: .06em;
}
.passo:nth-child(3n+2) .passo-n { background: var(--ceu-fill); color: #041820; }
.passo:nth-child(3n) .passo-n { background: var(--calor-fill); color: #1a1200; }

.cabeca { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; }
.cabeca::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--sig) 55%, transparent), transparent 52%),
    radial-gradient(ellipse at 6% 100%, color-mix(in srgb, var(--ceu) 42%, transparent), transparent 48%);
  mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
  pointer-events: none;
}

.cta {
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--sig) 18%, transparent), transparent 50%),
    var(--surf);
}

.topo-nav a[aria-current="page"] { background: var(--sig-soft); }
.topo-nav a[aria-current="page"]::after { content: none; }

.painel-vis {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--sig) 20%, transparent), transparent 56%),
    var(--surf);
  box-shadow: var(--sombra-f);
}
.painel-vis-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
.painel-vis-barra i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
}
.painel-vis-barra i:nth-child(3) { background: var(--sig); }
.painel-vis-barra span { margin-left: 8px; color: var(--ink-2); }
.painel-vis-metro {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 108px;
  padding: 12px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
}
.painel-vis-metro span {
  flex: 1;
  height: 42%;
  border-radius: 6px;
  transform-origin: center bottom;
  background: linear-gradient(180deg, var(--sig), color-mix(in srgb, var(--sig) 28%, var(--onda)));
  animation: cvz-metro 1.7s ease-in-out infinite;
}
.painel-vis-metro span:nth-child(1) { height: 30%; animation-delay: 0s; }
.painel-vis-metro span:nth-child(2) { height: 62%; animation-delay: .12s; }
.painel-vis-metro span:nth-child(3) { height: 44%; animation-delay: .24s; }
.painel-vis-metro span:nth-child(4) { height: 86%; animation-delay: .08s; }
.painel-vis-metro span:nth-child(5) { height: 54%; animation-delay: .2s; }
.painel-vis-metro span:nth-child(6) { height: 70%; animation-delay: .16s; }
.painel-vis-metro span:nth-child(7) { height: 36%; animation-delay: .28s; }
.painel-vis-metro span:nth-child(8) { height: 58%; animation-delay: .04s; }
.painel-vis[data-painel="musica"] .painel-vis-metro span { border-radius: 3px 3px 0 0; }
@keyframes cvz-metro {
  0%, 100% { transform: scaleY(.82); }
  50% { transform: scaleY(1); }
}
.painel-vis-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.painel-vis-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 14px;
}
.painel-vis-lista b { font-weight: 700; letter-spacing: -.02em; }
.painel-vis-lista em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--r-p);
  white-space: nowrap;
  background: var(--bg-2);
  color: var(--mut);
  border: 1px solid var(--line);
}
.painel-vis-ok,
.painel-vis-anda {
  background: var(--sig-soft);
  color: var(--sig-ink);
  border-color: var(--sig-line);
}

.secao-alt {
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--ceu) 32%, transparent), transparent 48%),
    radial-gradient(ellipse at 100% 80%, color-mix(in srgb, var(--sig) 26%, transparent), transparent 44%),
    var(--bg-2);
}
/* Após o hero: um só plano de fundo — evita sobreposição de brilhos na dobra. */
.hero + .secao-alt {
  background:
    radial-gradient(ellipse at 100% 40%, color-mix(in srgb, var(--sig) 22%, transparent), transparent 50%),
    var(--bg-2);
}
.bento { gap: 18px; grid-template-rows: 1fr 1fr; }
.bento-cel { border-radius: 30px; }
.bento-icone { border-radius: 50%; color: #fff; background: var(--sig-fill); }
.bento-cel:nth-child(1),
.bento-cel--grande {
  border-radius: 36px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sig-fill) 32%, var(--surf)), color-mix(in srgb, var(--sig-fill) 8%, var(--surf)) 72%);
}
.bento-cel:nth-child(2) {
  border-radius: 30px 30px 12px 30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ceu-fill) 30%, var(--surf)), var(--surf) 78%);
}
.bento-cel:nth-child(2) .bento-icone { background: var(--ceu-fill); color: #041820; }
.bento-cel:nth-child(3) {
  border-radius: 12px 30px 30px 30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--calor-fill) 32%, var(--surf)), var(--surf) 78%);
}
.bento-cel:nth-child(3) .bento-icone { background: var(--calor-fill); color: #1a1200; }
.bento-cel:nth-child(4) .bento-icone { background: var(--sig-fill); }

.calc {
  gap: 12px;
  padding: 12px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sig-fill) 28%, var(--surf)), color-mix(in srgb, var(--ceu-fill) 24%, var(--surf)));
}
.calc-entrada,
.calc-saida {
  border-radius: 26px;
  border: 0;
  background: var(--surf);
}
.calc-saida {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--ceu) 48%, transparent), transparent 62%),
    var(--surf);
}

.pacote { border-radius: 28px; }
.pacote:nth-child(3n+2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ceu-fill) 6%, var(--surf)), var(--surf));
}
.pacote:nth-child(3n) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--calor-fill) 8%, var(--surf)), var(--surf));
}
.pacote--destaque {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig-fill) 10%, var(--surf)), var(--surf));
}

.depo { border-radius: 30px 30px 30px 12px; }
.depo:nth-child(2) { border-radius: 12px 30px 30px 30px; margin-top: 18px; }
.depo:nth-child(3) { border-radius: 30px 12px 30px 30px; }
.depo:nth-child(2) blockquote::before { color: var(--ceu-fill); }
.depo:nth-child(3) blockquote::before { color: var(--calor-fill); }
.depo:nth-child(2) .depo-avatar { background: linear-gradient(135deg, var(--ceu-fill), #086e88); color: #041820; }
.depo:nth-child(3) .depo-avatar { background: linear-gradient(135deg, var(--calor-fill), #c47a00); }

.painel-vis { border-radius: 32px; }
.painel-vis-metro {
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ceu-soft) 70%, var(--bg)), color-mix(in srgb, var(--sig-soft) 40%, var(--bg)));
}
.painel-vis-metro span {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ceu-fill), var(--sig-fill));
}
.painel-vis-metro span:nth-child(3n) { background: linear-gradient(180deg, var(--calor-fill), var(--ceu-fill)); }
.painel-vis-lista li { border-radius: 999px; }

.cta {
  background:
    radial-gradient(ellipse at 12% 80%, color-mix(in srgb, var(--ceu) 46%, transparent), transparent 48%),
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--sig) 50%, transparent), transparent 52%),
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--calor) 36%, transparent), transparent 42%),
    var(--surf);
}

@media (max-width: 1023px) {
  .passo:nth-child(2),
  .passo:nth-child(4),
  .depo:nth-child(2) { margin-top: 0; }
}
@media (max-width: 680px) {
  .fatos > div,
  .fatos > div + div,
  .fatos > div:nth-child(odd) {
    padding: 22px;
    margin-top: 0;
  }
  .palco-chips { margin-left: 0; justify-content: flex-start; }
  .hero .fatos b { white-space: normal; }
  .passo:nth-child(2),
  .passo:nth-child(4) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .painel-vis-metro span { animation: none; }
}

/* =========================================================================
   PÁGINAS INTERNAS — troca de marca e convite do locutor
   O brilho do .cabeca fica dentro do header. Estas peças não herdam stagger.
   ========================================================================= */
.passos.passos-3 { grid-template-columns: repeat(3, 1fr); }
.duo-igual { align-items: stretch; }
.duo-igual > .painel,
.duo-igual > .demo-casca { height: 100%; }

.painel-tom-sig {
  background: linear-gradient(165deg, color-mix(in srgb, var(--sig-fill) 22%, var(--surf)), var(--surf) 72%);
  border-color: var(--sig-line);
}
.painel-tom-ceu {
  background: linear-gradient(165deg, color-mix(in srgb, var(--ceu-fill) 22%, var(--surf)), var(--surf) 72%);
  border-color: color-mix(in srgb, var(--ceu) 50%, var(--line));
}

.marcas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: stretch;
}
.marcas + .titulo { margin-top: 92px; }
.marca-placa {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  min-height: 300px;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 36px);
  border-radius: 32px;
  border: 1px solid var(--line);
  background-color: var(--surf);
  box-shadow: var(--sombra);
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.marca-placa .olho { margin-bottom: 0; }
.marca-placa p {
  max-width: 34ch;
  margin: 14px auto 0;
  color: var(--ink-2);
  font-size: 15.5px;
}
.marca-placa--antiga {
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, #0084ff 28%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, #0084ff 10%, var(--surf)), var(--surf) 70%);
}
.marca-placa--nova {
  background:
    radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--sig) 46%, transparent), transparent 56%),
    radial-gradient(ellipse at 10% 100%, color-mix(in srgb, var(--ceu) 32%, transparent), transparent 48%),
    var(--surf);
}
.marca-palco {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  margin-block: 6px;
}
.marca-palco > img { grid-area: 1 / 1; }
.marca-logo-antiga,
.marca-logo-nova {
  width: auto;
  height: auto;
  justify-self: center;
  align-self: center;
}
.marca-logo-antiga { width: min(68%, 228px); }
:root[data-tema="dark"] .marca-placa--antiga .marca-palco {
  width: min(100%, 280px);
  min-height: 96px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 18px;
}
.marca-logo-nova { width: min(100%, 430px); }
.marca-placa .marca-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: inherit;
}
.marca-lockup img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  flex: none;
}
.marca-logo--escuro { display: none; }
:root[data-tema="dark"] .marca-logo--claro { display: none; }
:root[data-tema="dark"] .marca-logo--escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .marca-logo--claro { display: none; }
  :root:not([data-tema="light"]) .marca-logo--escuro { display: block; }
  :root:not([data-tema="light"]) .marca-placa--antiga .marca-palco {
    width: min(100%, 280px);
    min-height: 96px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 18px;
  }
}
.marca-placa .marca-word {
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .95;
  color: #000;
}
:root[data-tema="dark"] .marca-placa .marca-word { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .marca-placa .marca-word { color: #fff; }
}
.marcas-uniao {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: 108px;
  pointer-events: none;
}
.uniao-svg--h { display: block; width: 100%; height: 100%; }
.uniao-svg--v { display: none; }
.uniao-fio { fill: none; }
.uniao-ondas {
  position: absolute;
  left: 50%;
  top: 46%;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  transform: translate(-50%, -50%);
}
.uniao-ondas i {
  display: block;
  width: 3px;
  height: 38%;
  border-radius: 2px;
  background: #0089F4;
  transform-origin: center;
}
.uniao-ondas i:nth-child(2),
.uniao-ondas i:nth-child(6) { height: 62%; }
.uniao-ondas i:nth-child(3),
.uniao-ondas i:nth-child(5) { height: 82%; }
.uniao-ondas i:nth-child(4) { height: 100%; }
.uniao-pulso,
.uniao-cauda {
  position: absolute;
  left: 50%;
  top: 16%;
  border-radius: 50%;
  background: #0089F4;
}
.uniao-pulso { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.uniao-cauda { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #00c2ff; }
.ganhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
  align-items: stretch;
}
.ganho {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--surf);
  box-shadow: var(--sombra);
}
.ganho:nth-child(3n+1) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--sig-fill) 10%, var(--surf)), var(--surf));
  border-color: var(--sig-line);
}
.ganho:nth-child(3n+2) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--ceu-fill) 6%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--ceu) 45%, var(--line));
}
.ganho:nth-child(3n) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--calor-fill) 8%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--calor) 45%, var(--line));
}
.ganho > i {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sig-fill);
  color: #fff;
  font-size: 18px;
}
.ganho:nth-child(3n+2) > i { background: var(--ceu-fill); color: #041820; }
.ganho:nth-child(3n) > i { background: var(--calor-fill); color: #1a1200; }
.ganho h3 { margin: 0; font-size: 1.12rem; }
.ganho p { margin: 10px 0 0; color: var(--mut); font-size: 14.5px; line-height: 1.6; }
.marcas-nota {
  margin: 28px 0 0;
  color: var(--mut);
  font-size: 15px;
}
.metro-regua input {
  width: 100%;
  margin: 0;
  accent-color: var(--sig-fill);
  cursor: pointer;
}
.metro {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin-top: 28px;
  padding: 18px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sig-fill) 26%, var(--surf)), color-mix(in srgb, var(--ceu-fill) 20%, var(--surf)));
}
.metro-copia h3 { margin: 0; font-size: 1.25rem; }
.metro-copia p { margin: 8px 0 0; color: var(--mut); font-size: 14.5px; }
.metro-copia,
.metro-regua,
.metro-saida {
  background: var(--surf);
  border-radius: 22px;
  padding: 18px 20px;
}
.metro-regua span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 700;
}
.metro-saida { margin: 0; text-align: right; }
.metro-saida b {
  display: block;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -.03em;
}
.metro-saida span { color: var(--mut); font-size: 13px; }

.demo-casca {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 32px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--calor-fill) 28%, var(--surf)), color-mix(in srgb, var(--sig-fill) 22%, var(--surf)));
  box-shadow: var(--sombra);
}
.demo-onda {
  height: 54px;
  margin: 6px 12px 0;
  opacity: .85;
}
.demo-casca .form-painel {
  border: 0;
  box-shadow: none;
  border-radius: 24px;
}
.demo-casca h3 { margin: 0 0 16px; font-size: 1.25rem; }
#no-ar,
#enviar-demo { scroll-margin-top: 88px; }

@media (max-width: 900px) {
  .passos.passos-3,
  .metro,
  .ganhos,
  .marcas { grid-template-columns: 1fr; }
  .marcas { gap: 28px; }
  .marcas-uniao {
    left: 50%;
    right: auto;
    top: 8%;
    bottom: 8%;
    width: 108px;
    height: auto;
    transform: translateX(-50%);
  }
  .uniao-svg--h { display: none; }
  .uniao-svg--v { display: block; width: 100%; height: 100%; }
  .metro-saida { text-align: left; }
}

/* Contraste: branco em cima de ciano ou de azul claro não segura texto pequeno.
   No escuro o botão sólido também não pode clarear em direção ao branco. */
:root[data-tema="dark"] .passo:nth-child(3n+1) .passo-n,
:root[data-tema="dark"] .opcao input:checked + span,
:root[data-tema="dark"] .paginacao-nav .is-atual,
:root[data-tema="dark"] .chip-filtro--ativo,
:root[data-tema="dark"] .tocar,
:root[data-tema="dark"] .fatos > div > i,
:root[data-tema="dark"] .bento-icone {
  background: #0057ff;
  border-color: #0057ff;
  color: #fff;
}
:root[data-tema="dark"] .chip-filtro--ativo span { color: #fff; }
:root[data-tema="dark"] .btn-solido,
:root[data-tema="dark"] .topo-nav a.nav-criar:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig) 72%, #000), color-mix(in srgb, var(--sig) 55%, #000));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .passo:nth-child(3n+1) .passo-n,
  :root:not([data-tema="light"]) .opcao input:checked + span,
  :root:not([data-tema="light"]) .paginacao-nav .is-atual,
  :root:not([data-tema="light"]) .chip-filtro--ativo,
  :root:not([data-tema="light"]) .tocar,
  :root:not([data-tema="light"]) .fatos > div > i,
  :root:not([data-tema="light"]) .bento-icone {
    background: #0057ff;
    border-color: #0057ff;
    color: #fff;
  }
  :root:not([data-tema="light"]) .chip-filtro--ativo span { color: #fff; }
  :root:not([data-tema="light"]) .btn-solido,
  :root:not([data-tema="light"]) .topo-nav a.nav-criar:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sig) 72%, #000), color-mix(in srgb, var(--sig) 55%, #000));
  }
}

/* =========================================================================
   ASSISTENTE (widget flutuante — mesmo espírito do painel, tokens do site)
   ========================================================================= */
.cv-chat {
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  z-index: 90;
  font-size: 14px;
}
.cv-chat-launcher {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig) 88%, #fff), var(--sig));
  color: #fff;
  box-shadow: var(--sombra-f);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s var(--ease);
}
.cv-chat-launcher:hover { transform: scale(1.04); }
.cv-chat-launcher .ti { font-size: 1.5rem; }
.cv-chat-ico-fechar { display: none; }
.cv-chat.is-open .cv-chat-ico-abrir { display: none; }
.cv-chat.is-open .cv-chat-ico-fechar { display: inline; }
.cv-chat-launcher.has-mascote:hover { transform: none; }
.cv-chat.has-mascote .cv-chat-panel {
  bottom: calc(100% + 12px);
}
.cv-chat-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--surf);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra-f);
  overflow: hidden;
}
.cv-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sig) 88%, #fff), var(--sig));
  color: #fff;
}
.cv-chat-head strong { display: block; line-height: 1.2; font-size: 15px; }
.cv-chat-estado { display: block; opacity: .88; font-size: 12px; font-weight: 500; }
.cv-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cv-chat-iconbtn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: var(--r-p);
  cursor: pointer;
}
.cv-chat-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
}
.cv-chat-chip {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  border-radius: var(--r-p);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.cv-chat-chip:hover { border-color: var(--sig-line); background: var(--sig-soft); }
.cv-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}
.cv-chat-saudacao { color: var(--ink-2); margin: 0; line-height: 1.55; }
.cv-chat-row { display: flex; margin-bottom: 10px; }
.cv-chat-row.is-cliente { justify-content: flex-end; }
.cv-chat-bubble {
  max-width: 88%;
  border-radius: 18px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.cv-chat-row.is-cliente .cv-chat-bubble {
  background: var(--sig);
  color: #fff;
  border-color: transparent;
}
.cv-chat-row.is-sistema { justify-content: center; }
.cv-chat-row.is-sistema .cv-chat-bubble {
  background: transparent;
  border: 0;
  color: var(--mut);
  font-size: 12.5px;
  text-align: center;
  max-width: 100%;
}
.cv-chat-bubble p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.cv-chat-bubble p.is-revelando::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: cvChatCaret 0.85s steps(1) infinite;
}
@keyframes cvChatCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cv-chat-bubble p.is-revelando::after { animation: none; }
}
.cv-chat-autor { display: block; font-size: 11px; margin-bottom: 4px; opacity: .85; }
.cv-chat-typing {
  display: flex;
  gap: 4px;
  padding: 0 16px 8px;
}
.cv-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sig);
  animation: cv-chat-dot 1s infinite ease-in-out;
}
.cv-chat-typing span:nth-child(2) { animation-delay: .15s; }
.cv-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cv-chat-dot {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}
.cv-chat-form {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
}
.cv-chat-campo { display: block; margin: 0; }
.cv-chat-campo textarea {
  width: 100%;
  min-height: 72px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}
.cv-chat-campo textarea:focus {
  outline: none;
  border-color: var(--sig);
  box-shadow: 0 0 0 3px var(--sig-soft);
}
.cv-chat-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cv-chat-form-actions .btn { font-size: 13px; padding: 10px 16px; }
.cv-chat-form-actions .btn-solido { margin-left: auto; }
.cv-chat-wa-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.cv-chat-wa-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mut);
  line-height: 1;
  cursor: pointer;
}
.cv-chat-wa-info:hover,
.cv-chat-wa-info:focus-visible {
  color: var(--sig);
  background: var(--sig-soft);
}
.cv-chat-wa-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(280px, calc(100vw - 48px));
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  box-shadow: var(--sombra-f);
}
.cv-chat-wa-pop-status {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 13px;
}
.cv-chat-wa-pop-dica {
  margin: 0 0 10px;
  color: var(--mut);
}
.cv-chat-wa-pop-grade {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.cv-chat-wa-pop-grade li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.cv-chat-wa-pop-grade li:last-child { border-bottom: 0; }
.cv-chat-wa-pop-dia { font-weight: 500; }
.cv-chat-wa-pop-hora { color: var(--mut); text-align: right; }
.cv-chat-wa-pop-fuso {
  margin: 0;
  font-size: 11px;
  color: var(--mut);
}

.cv-btn-whatsapp,
.cv-chat-wa.cv-btn-whatsapp {
  background: #128c7e;
  border: 1px solid #0f7a6e;
  color: #fff;
}
.cv-btn-whatsapp.is-aberto,
.cv-chat-wa.cv-btn-whatsapp.is-aberto {
  background: #25d366;
  border-color: #1ebe5d;
}
.cv-btn-whatsapp.is-fora,
.cv-chat-wa.cv-btn-whatsapp.is-fora {
  background: #6b9f7a;
  border-color: #5d8c6b;
  opacity: 0.95;
}
.cv-btn-whatsapp:hover,
.cv-chat-wa.cv-btn-whatsapp:hover,
.cv-btn-whatsapp.is-aberto:hover,
.cv-chat-wa.cv-btn-whatsapp.is-aberto:hover {
  background: #1ebe5d;
  border-color: #1aab54;
  color: #fff;
}
.cv-btn-whatsapp.is-fora:hover,
.cv-chat-wa.cv-btn-whatsapp.is-fora:hover {
  background: #5d8c6b;
  border-color: #517a5e;
  color: #fff;
}
@media (max-width: 680px) {
  .cv-chat-panel {
    width: calc(100vw - 24px);
    right: -4px;
    height: min(70vh, 520px);
  }
}

/* =========================================================================
   CARDS DE JINGLES REINVENTADOS (Visual vibrante e rico como no painel)
   ========================================================================= */
.jingle-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .jingle-showcase-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.card-jingle-showcase {
  position: relative;
  border-radius: 24px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.card-jingle-showcase:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

/* Temas por modo */
.card-jingle-showcase.modo-comercial {
  background: linear-gradient(175deg, #f0fdf4 0%, #ffffff 65%);
  border-color: #bbf7d0;
}
.card-jingle-showcase.modo-comercial:hover {
  border-color: #22c55e;
  box-shadow: 0 16px 36px rgba(34, 197, 94, 0.15);
}
.card-jingle-showcase.modo-comercial .card-jingle-icone-circulo {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.35);
}
.card-jingle-showcase.modo-comercial .card-jingle-badge {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.card-jingle-showcase.modo-comercial .card-jingle-vantagens i {
  color: #16a34a;
}
.card-jingle-showcase.modo-comercial .btn-jingle-acao {
  background: #16a34a;
  color: #ffffff;
}
.card-jingle-showcase.modo-comercial .btn-jingle-acao:hover {
  background: #15803d;
}

.card-jingle-showcase.modo-politico {
  background: linear-gradient(175deg, #fefce8 0%, #ffffff 65%);
  border-color: #fef08a;
}
.card-jingle-showcase.modo-politico:hover {
  border-color: #eab308;
  box-shadow: 0 16px 36px rgba(234, 179, 8, 0.18);
}
.card-jingle-showcase.modo-politico .card-jingle-icone-circulo {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(234, 179, 8, 0.35);
}
.card-jingle-showcase.modo-politico .card-jingle-badge {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
}
.card-jingle-showcase.modo-politico .card-jingle-vantagens i {
  color: #ca8a04;
}
.card-jingle-showcase.modo-politico .btn-jingle-acao {
  background: #ca8a04;
  color: #ffffff;
}
.card-jingle-showcase.modo-politico .btn-jingle-acao:hover {
  background: #a16207;
}

.card-jingle-showcase.modo-letra {
  background: linear-gradient(175deg, #fdf2f8 0%, #ffffff 65%);
  border-color: #fbcfe8;
}
.card-jingle-showcase.modo-letra:hover {
  border-color: #ec4899;
  box-shadow: 0 16px 36px rgba(236, 72, 153, 0.16);
}
.card-jingle-showcase.modo-letra .card-jingle-icone-circulo {
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.35);
}
.card-jingle-showcase.modo-letra .card-jingle-badge {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #f472b6;
}
.card-jingle-showcase.modo-letra .card-jingle-vantagens i {
  color: #db2777;
}
.card-jingle-showcase.modo-letra .btn-jingle-acao {
  background: #db2777;
  color: #ffffff;
}
.card-jingle-showcase.modo-letra .btn-jingle-acao:hover {
  background: #be185d;
}

.card-jingle-showcase.modo-preco {
  background: linear-gradient(175deg, #f0f9ff 0%, #ffffff 65%);
  border-color: #bae6fd;
}
.card-jingle-showcase.modo-preco:hover {
  border-color: #0284c7;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.18);
}
.card-jingle-showcase.modo-preco .card-jingle-icone-circulo {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.35);
}
.card-jingle-showcase.modo-preco .card-jingle-badge {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #7dd3fc;
}
.card-jingle-showcase.modo-preco .card-jingle-vantagens i {
  color: #0284c7;
}
.card-jingle-showcase.modo-preco .btn-jingle-acao {
  background: #0066ff;
  color: #ffffff;
}
.card-jingle-showcase.modo-preco .btn-jingle-acao:hover {
  background: #004ecc;
}

/* Elementos internos dos cards */
.card-jingle-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.card-jingle-icone-circulo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.85);
}

.card-jingle-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-jingle-titulo {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}

.card-jingle-sub {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 12px;
  line-height: 1.4;
}

.card-jingle-desc {
  font-size: 0.92rem;
  color: var(--mut);
  line-height: 1.55;
  margin-bottom: 20px;
}

.card-jingle-preco-box {
  background: rgba(2, 132, 199, 0.06);
  border: 1px dashed #bae6fd;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.card-jingle-valor {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0369a1;
  letter-spacing: -0.02em;
}

.card-jingle-valor-detalhe {
  font-size: 0.86rem;
  color: #0c4a6e;
  font-weight: 600;
}

.card-jingle-vantagens {
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-jingle-vantagens li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.4;
}

.card-jingle-vantagens li i {
  font-size: 1.15rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

.card-jingle-rodape {
  margin-top: auto;
  padding-top: 16px;
}

.btn-jingle-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-jingle-acao:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Dark mode suporte para os cards de jingles */
:root[data-tema="dark"] .card-jingle-showcase {
  background: #151a23 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
:root[data-tema="dark"] .card-jingle-showcase.modo-comercial {
  border-color: rgba(34, 197, 94, 0.3);
}
:root[data-tema="dark"] .card-jingle-showcase.modo-politico {
  border-color: rgba(234, 179, 8, 0.3);
}
:root[data-tema="dark"] .card-jingle-showcase.modo-letra {
  border-color: rgba(236, 72, 153, 0.3);
}
:root[data-tema="dark"] .card-jingle-showcase.modo-preco {
  border-color: rgba(2, 132, 199, 0.3);
}
:root[data-tema="dark"] .card-jingle-titulo {
  color: #f1f5f9;
}
:root[data-tema="dark"] .card-jingle-sub {
  color: #cbd5e1;
}
:root[data-tema="dark"] .card-jingle-desc {
  color: #94a3b8;
}
:root[data-tema="dark"] .card-jingle-vantagens li {
  color: #cbd5e1;
}
:root[data-tema="dark"] .card-jingle-preco-box {
  background: rgba(2, 132, 199, 0.15);
  border-color: rgba(125, 211, 252, 0.3);
}
:root[data-tema="dark"] .card-jingle-valor {
  color: #38bdf8;
}
:root[data-tema="dark"] .card-jingle-valor-detalhe {
  color: #bae6fd;
}

/* =========================================================================
   PACOTES DE PREÇO VISUAIS E CTAS
   ========================================================================= */
.pacote-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pacote-badge-popular {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--sig);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}
.pacote-badge-bonus {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
:root[data-tema="dark"] .pacote-badge-bonus {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}
.btn-pacote {
  margin-top: 18px;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.btn-pacote:hover {
  transform: translateY(-2px);
}
.pacote-bonus--vazio {
  color: var(--mut);
  font-weight: 500;
}

/* =========================================================================
   LANDING DE TRÁFEGO PAGO — /mkt e /mkt-locutores
   Peças que só existem nestas duas páginas: realce do hero,
   painel de 24h do locutor, matriz antes/depois e o pacote de clonagem.
   Tudo nasce dos tokens do :root — nenhuma cor nova, nenhum tema paralelo.
   ========================================================================= */

/* Âncoras das landings param abaixo do header fixo. */
#demos, #oferta, #ajuda, #como-funciona, #enviar-voz { scroll-margin-top: 88px; }

/* ---------- Realce dentro do título do hero ---------- */
.lp-realce {
  position: relative;
  isolation: isolate;
  color: var(--sig-ink);
  white-space: nowrap;
}
.lp-realce::after {
  content: "";
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .06em;
  height: .34em;
  border-radius: var(--r-p);
  background: var(--sig-soft);
  z-index: -1;
}

/* ---------- Hero do locutor ---------- */
.lp-loc-hero { padding-bottom: clamp(56px, 8vw, 104px); }

/* ---------- Painel "sua voz trabalhando 24h" ---------- */
.lp-loc-painel { padding-bottom: 18px; }
.lp-loc-linhas {
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
}
.lp-loc-linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf-2);
}
.lp-loc-hora {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--mut);
}
.lp-loc-pedido {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lp-loc-tag {
  padding: 3px 9px;
  border-radius: var(--r-p);
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-loc-tag--ok {
  color: #15803d;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .32);
}
:root[data-tema="dark"] .lp-loc-tag--ok {
  color: #4ade80;
  background: rgba(34, 197, 94, .2);
  border-color: rgba(74, 222, 128, .4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .lp-loc-tag--ok {
    color: #4ade80;
    background: rgba(34, 197, 94, .2);
    border-color: rgba(74, 222, 128, .4);
  }
}
.lp-loc-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lp-loc-pe-rot {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
.lp-loc-pe-val {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.lp-loc-pe-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-ink);
}
.lp-loc-nota {
  margin: 12px 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mut);
}

/* ---------- Matriz antes / depois ---------- */
.lp-loc-vira {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}
.lp-loc-vira-col {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surf);
}
.lp-loc-vira-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}
.lp-loc-vira-col h3 i { font-size: 20px; }
.lp-loc-vira-col--antes { background: var(--surf-2); }
.lp-loc-vira-col--antes h3 i,
.lp-loc-vira-col--antes .lista i { color: var(--mut); }
.lp-loc-vira-col--depois {
  border-color: var(--sig-line);
  background: linear-gradient(170deg, var(--sig-soft), var(--surf) 72%);
}
.lp-loc-vira-col--depois h3 i { color: var(--sig-ink); }

/* ---------- Pacote de clonagem: envia / recebe ---------- */
.lp-loc-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}
.lp-loc-card {
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surf);
}
.lp-loc-card--claro {
  border-color: var(--sig-line);
  background: linear-gradient(170deg, var(--sig-soft), var(--surf) 72%);
}
.lp-loc-card-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: var(--r-s);
  background: var(--sig-soft);
  border: 1px solid var(--sig-line);
  color: var(--sig-ink);
  font-size: 22px;
}
.lp-loc-card h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.lp-loc-card .lista { margin-top: 16px; }

@media (max-width: 860px) {
  .lp-loc-vira,
  .lp-loc-duplo { grid-template-columns: 1fr; }
  .lp-realce { white-space: normal; }
}