/* ===========================================================================
   1. TOKENS — tema claro derivado do navy da marca
   ======================================================================== */
.cpp-faq *,
.cpp-faq *::before,
.cpp-faq *::after { box-sizing: border-box; }

.cpp-faq{
  /* superfícies: cinzas com viés de matiz para o navy da marca,
     não cinza neutro (que lê como "não escolhido") */
  --paper:  #eef1f5;
  --card:   #ffffff;
  --sunk:   #e4e9f0;

  /* tinta = navy exato da marca */
  --ink:    #0d1b2a;
  --ink-2:  #46586c;
  --ink-3:  #7d8b9b;

  --line:   #d9e0e9;
  --line-2: #e8edf3;

  /* dourado: fill e borda usam o tom da marca; TEXTO usa a versão
     escurecida, porque #d4a94e em branco dá ~1.9:1 e reprova contraste */
  --gd:      #d4a94e;
  --gd-ink:  #6f5310;
  --gd-wash: #fdf6e6;
  --gd-line: #e8d29a;

  --rd:     #cc1010;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 6px;

  --e: cubic-bezier(.22,1,.28,1);
  --px: clamp(18px, 4.6vw, 64px);

  position: relative;
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.cpp-faq h1, .cpp-faq h2, .cpp-faq .cpp-kicker{
  font-family: "Barlow Condensed", "Archivo", system-ui, sans-serif;
  font-weight: 700; line-height: 1.02;
  letter-spacing: -.005em;
  margin: 0; color: var(--ink);
  text-transform: uppercase;
}
.cpp-faq h3{ font-family: "Archivo", sans-serif; margin: 0; font-weight: 600; }
.cpp-faq p{ margin: 0; }
.cpp-faq a{ color: inherit; }
.cpp-faq button{ font: inherit; color: inherit; }

.cpp-shell{
  width: 100%; max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--px);
}

/* foco visível e consistente em tudo que é operável */
.cpp-faq :is(a, button, summary, input):focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ===========================================================================
   2. TOPO — a busca É a dobra principal
   ======================================================================== */
.cpp-top{
  position: relative;
  padding-top: clamp(46px, 6vw, 78px);
  padding-bottom: clamp(26px, 3.4vw, 40px);
  background:
    radial-gradient(ellipse 60% 120% at 88% -10%, #fbf3df 0%, rgba(251,243,223,0) 62%),
    var(--card);
  border-bottom: 1px solid var(--line);
}

.cpp-crumb{
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-3);
  margin-bottom: 20px;
}
.cpp-crumb a{ text-decoration: none; }
.cpp-crumb a:hover{ color: var(--ink); text-decoration: underline; }
.cpp-crumb span{ color: var(--line); }

.cpp-kicker{
  display: inline-block;
  font-size: 12.5px; letter-spacing: .18em;
  color: var(--gd-ink);
  margin-bottom: 12px;
}
.cpp-top h1{
  font-size: clamp(34px, 5.4vw, 60px);
  max-width: 22ch;
}
.cpp-lede{
  margin-top: 16px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
}
.cpp-lede b{ color: var(--ink); font-weight: 600; }

/* --- campo de busca --- */
.cpp-searchwrap{
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 640px;
}
.cpp-search{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 6px 5px 18px;
  box-shadow: 0 1px 2px rgba(13,27,42,.05), 0 8px 24px -14px rgba(13,27,42,.22);
  transition: border-color .35s var(--e), box-shadow .35s var(--e);
}
.cpp-search:focus-within{
  border-color: var(--gd);
  box-shadow: 0 0 0 4px rgba(212,169,78,.18), 0 8px 24px -14px rgba(13,27,42,.22);
}
.cpp-search svg.ico{
  width: 18px; height: 18px; flex: 0 0 auto;
  stroke: var(--ink-3); stroke-width: 1.7; fill: none;
}
.cpp-search input{
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 12px 0;
  font-size: 16.5px; color: var(--ink);
}
.cpp-search input::placeholder{ color: var(--ink-3); }
.cpp-clear{
  display: none;
  border: 0; background: var(--sunk);
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background-color .3s var(--e);
}
.cpp-clear.on{ display: inline-flex; }
.cpp-clear:hover{ background: var(--line); }
.cpp-clear svg{ width: 12px; height: 12px; stroke: var(--ink-2); stroke-width: 2; fill: none; }

/* atalhos de busca */
.cpp-hints{
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px;
  align-items: center;
}
.cpp-hints b{
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}
.cpp-hint{
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .3s var(--e), color .3s var(--e), background-color .3s var(--e);
}
.cpp-hint:hover{ border-color: var(--gd); color: var(--ink); background: var(--gd-wash); }

/* faixa de contagem */
.cpp-meta{
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: center;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-3);
}
.cpp-meta strong{ color: var(--ink); font-weight: 600; }

/* ===========================================================================
   3. CORPO — índice fixo + lista
   ======================================================================== */
.cpp-body{
  padding-block: clamp(30px, 4vw, 50px) clamp(60px, 7vw, 96px);
}
.cpp-grid{
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px);
  align-items: start;
}

/* --- índice lateral --- */
.cpp-nav{ position: sticky; top: 24px; }
.cpp-nav h2{
  font-size: 12.5px; letter-spacing: .18em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.cpp-navlist{ display: grid; gap: 2px; }
.cpp-navbtn{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  text-align: left;
  border: 0; background: transparent;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 14.5px; color: var(--ink-2);
  cursor: pointer;
  transition: background-color .3s var(--e), color .3s var(--e);
}
.cpp-navbtn i{
  font-style: normal;
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  transition: color .3s var(--e);
}
.cpp-navbtn:hover{ background: var(--sunk); color: var(--ink); }
.cpp-navbtn[aria-current="true"]{
  background: var(--ink); color: #fff;
}
.cpp-navbtn[aria-current="true"] i{ color: rgba(255,255,255,.6); }

/* --- grupos --- */
.cpp-group{ scroll-margin-top: 20px; }
.cpp-group + .cpp-group{ margin-top: clamp(34px, 4vw, 52px); }
.cpp-group.hide{ display: none; }
.cpp-grouphd{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.cpp-grouphd h2{ font-size: clamp(20px, 2vw, 26px); }
.cpp-grouphd i{
  flex: 1 1 auto; height: 1px; background: var(--line); font-style: normal;
}
.cpp-grouphd b{
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); font-weight: 600;
}

/* --- item de dúvida --- */
.cpp-q{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  scroll-margin-top: 18px;
  transition: border-color .3s var(--e), box-shadow .3s var(--e);
}
.cpp-q.hide{ display: none; }
.cpp-q:hover{ border-color: #c6d1de; }
.cpp-q[open]{
  border-color: var(--gd-line);
  box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 14px 34px -22px rgba(13,27,42,.28);
}
.cpp-q.hit{ border-color: var(--gd); }

.cpp-q summary{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-lg);
}
.cpp-q summary::-webkit-details-marker{ display: none; }
.cpp-qtext{
  flex: 1 1 auto;
  font-size: clamp(15.5px, 1.15vw, 17px);
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink);
}
.cpp-qtext mark{
  background: #fbe9b8; color: inherit;
  border-radius: 3px; padding: 0 2px;
}
.cpp-chev{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sunk);
  margin-top: 1px;
  transition: transform .4s var(--e), background-color .3s var(--e);
}
.cpp-chev svg{ width: 12px; height: 12px; stroke: var(--ink-2); stroke-width: 2; fill: none; }
.cpp-q[open] .cpp-chev{ transform: rotate(180deg); background: var(--gd); }
.cpp-q[open] .cpp-chev svg{ stroke: #241b06; }

/* marcador de vídeo no cabeçalho */
.cpp-hasvid{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gd-ink);
  background: var(--gd-wash);
  border: 1px solid var(--gd-line);
  padding: 4px 8px;
  border-radius: 999px;
  margin-top: 2px;
  white-space: nowrap;
}
.cpp-hasvid svg{ width: 9px; height: 9px; fill: currentColor; stroke: none; }

/* --- corpo da resposta --- */
.cpp-a{
  padding: 0 18px 18px;
  border-top: 1px solid var(--line-2);
  margin-top: -1px;
}
.cpp-q[open] .cpp-a{
  animation: cppIn .42s var(--e) both;
}
@keyframes cppIn{
  from{ opacity: 0; transform: translate3d(0, -5px, 0); }
  to{ opacity: 1; transform: none; }
}
.cpp-a > * + *{ margin-top: 13px; }
.cpp-a p{ color: var(--ink-2); }

/* resposta curta: 40–60 palavras, é o trecho que buscadores e
   assistentes extraem. Fica primeiro de propósito. */
.cpp-short{
  padding-top: 16px;
  font-size: 16px;
  color: var(--ink) !important;
  font-weight: 500;
}
.cpp-a b, .cpp-a strong{ color: var(--ink); font-weight: 600; }
.cpp-a ul{ margin: 0; padding-left: 20px; color: var(--ink-2); }
.cpp-a ul li + li{ margin-top: 5px; }
.cpp-a a:not(.cpp-vid):not(.cpp-mini){
  color: var(--gd-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.cpp-a a:not(.cpp-vid):not(.cpp-mini):hover{ color: var(--ink); }

/* tabela de dados (salários) */
.cpp-tablewrap{ overflow-x: auto; }
.cpp-table{
  width: 100%; border-collapse: collapse;
  font-size: 14.5px;
  min-width: 380px;
}
.cpp-table th, .cpp-table td{
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
}
.cpp-table th{
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line);
}
.cpp-table td:last-child{
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.cpp-table tr:last-child td{ border-bottom: 0; }

/* --- chip de base legal: a assinatura da página --- */
.cpp-fonte{
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  background: var(--gd-wash);
  border: 1px solid var(--gd-line);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: #5c4712;
  line-height: 1.5;
}
.cpp-fonte svg{
  width: 14px; height: 14px; flex: 0 0 auto;
  margin-top: 3px;
  stroke: currentColor; stroke-width: 1.6; fill: none;
}
.cpp-fonte b{ color: #4a390e !important; }

/* --- link de vídeo --- */
.cpp-vid{
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px 11px 12px;
  background: var(--ink);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color .35s var(--e), transform .35s var(--e);
}
.cpp-vid:hover{ background: #16283c; transform: translateY(-1px); }
.cpp-vid .play{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rd);
  transition: transform .35s var(--e);
}
.cpp-vid:hover .play{ transform: scale(1.07); }
.cpp-vid .play svg{ width: 12px; height: 12px; fill: #fff; stroke: none; margin-left: 2px; }
.cpp-vid .txt{ flex: 1 1 auto; min-width: 0; }
.cpp-vid .txt em{
  display: block; font-style: normal;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8fa1b5;
  margin-bottom: 3px;
}
.cpp-vid .txt span{
  display: block;
  font-size: 14.5px; font-weight: 600; color: #fff;
  line-height: 1.34;
}
.cpp-vid .go{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  transition: transform .35s var(--e);
}
.cpp-vid:hover .go{ transform: translate(2px,-2px); }
.cpp-vid .go svg{ width: 11px; height: 11px; stroke: #fff; stroke-width: 1.8; fill: none; }

/* slot de vídeo pendente */
.cpp-vidslot{
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: 13px; color: var(--ink-3);
}
.cpp-vidslot svg{
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke: var(--ink-3); stroke-width: 1.6; fill: none;
}

/* --- rodapé do item: links internos + copiar --- */
.cpp-qft{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 4px;
}
.cpp-mini{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 500;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .3s var(--e), color .3s var(--e), background-color .3s var(--e);
}
.cpp-mini:hover{ border-color: var(--ink); color: var(--ink); }
.cpp-mini svg{ width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.cpp-mini.ok{ border-color: var(--gd); background: var(--gd-wash); color: var(--gd-ink); }

/* --- estado vazio da busca --- */
.cpp-empty{
  display: none;
  padding: clamp(30px, 4vw, 46px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.cpp-empty.on{ display: block; }
.cpp-empty h3{
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(21px, 2.2vw, 28px);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cpp-empty p{ color: var(--ink-2); max-width: 46ch; margin-inline: auto; }
.cpp-empty .cpp-cta{ margin-top: 20px; display: inline-flex; }

/* ===========================================================================
   4. CTA FINAL
   ======================================================================== */
.cpp-cta{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 13px 13px 22px;
  background: var(--gd);
  color: #241b06;
  border: 0; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -14px rgba(212,169,78,.9);
  transition: transform .4s var(--e), background-color .4s var(--e);
}
.cpp-cta i{
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border-radius: 50%; background: rgba(0,0,0,.12);
  transition: transform .4s var(--e);
}
.cpp-cta svg{ width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.cpp-cta:hover{ background: #e0b85c; }
.cpp-cta:hover i{ transform: translate(3px,-2px); }
.cpp-cta:active{ transform: scale(.98); }
.cpp-cta.dark{
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 26px -16px rgba(13,27,42,.9);
}
.cpp-cta.dark:hover{ background: #16283c; }
.cpp-cta.dark i{ background: rgba(255,255,255,.13); }

.cpp-end{
  padding-block: clamp(48px, 6vw, 76px);
  background: var(--card);
  border-top: 1px solid var(--line);
}
.cpp-endin{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.cpp-end h2{ font-size: clamp(24px, 3vw, 38px); max-width: 26ch; }
.cpp-end p{ margin-top: 12px; color: var(--ink-2); max-width: 52ch; }
.cpp-endcta{ display: flex; flex-direction: column; gap: 10px; }

/* ===========================================================================
   5. RESPONSIVO
   ======================================================================== */
@media (max-width: 900px){
  .cpp-grid{ grid-template-columns: 1fr; gap: 20px; }
  .cpp-nav{
    position: static;
    margin-inline: calc(var(--px) * -1);
    padding-inline: var(--px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cpp-nav::-webkit-scrollbar{ display: none; }
  .cpp-nav h2{ display: none; }
  .cpp-navlist{
    display: flex; gap: 7px;
    width: max-content;
    padding-bottom: 4px;
  }
  .cpp-navbtn{
    width: auto; white-space: nowrap;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
  }
  .cpp-navbtn[aria-current="true"]{ border-color: var(--ink); }
  .cpp-endin{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .cpp-faq{ font-size: 16px; }
  .cpp-q summary{ padding: 15px 15px; gap: 11px; }
  .cpp-a{ padding: 0 15px 16px; }
  .cpp-hasvid span{ display: none; }
  .cpp-hasvid{ padding: 4px 6px; }
  .cpp-vid{ align-items: flex-start; }
  .cpp-endcta{ width: 100%; }
  .cpp-cta{ width: 100%; justify-content: space-between; }
  .cpp-hints b{ width: 100%; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce){
  .cpp-faq *{ animation: none !important; transition: none !important; }
  .cpp-q[open] .cpp-a{ animation: none !important; }
}

/* ===========================================================================
   6. BLINDAGEM CONTRA O TEMA E O ELEMENTOR
   ---------------------------------------------------------------------------
   Enquanto este CSS vivia dentro do widget HTML, ele vinha depois do tema no
   documento e ganhava no empate. Como arquivo enfileirado ele pode vir antes,
   e as regras globais de "Botões" e "Campos de formulário" do Elementor têm
   seletor pesado (.elementor-kit-N button, .elementor-kit-N input:not(...)),
   que passa por cima de .cpp-hint, .cpp-navbtn e do input da busca.

   Cada regra aqui repete a intenção da seção original com o prefixo
   .cpp-faq.cpp-faq — a mesma classe duas vezes conta duas vezes na
   especificidade sem exigir nada novo no HTML. Mudou a aparência de um
   botão lá em cima? Mude aqui também.
   ======================================================================== */

/* base comum: tira o que tema/kit costumam impor a <button> e <input> */
.cpp-faq.cpp-faq button,
.cpp-faq.cpp-faq input[type="search"]{
  -webkit-appearance: none; appearance: none;
  margin: 0;
  min-height: 0; min-width: 0; height: auto;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  background-image: none;
}
.cpp-faq.cpp-faq button:hover,
.cpp-faq.cpp-faq button:focus,
.cpp-faq.cpp-faq button:active{
  text-decoration: none;
  box-shadow: none;
  transform: none;
}

/* --- campo de busca --- */
.cpp-faq.cpp-faq .cpp-search input[type="search"]{
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0; border-radius: 0; outline: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 16.5px; font-weight: 400;
  color: var(--ink);
  box-shadow: none;
}
.cpp-faq.cpp-faq .cpp-search input[type="search"]:focus,
.cpp-faq.cpp-faq .cpp-search input[type="search"]:hover{
  border: 0; outline: 0; box-shadow: none; background: transparent;
}
.cpp-faq.cpp-faq .cpp-search input[type="search"]::-webkit-search-decoration,
.cpp-faq.cpp-faq .cpp-search input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none; appearance: none;
}
.cpp-faq.cpp-faq .cpp-search input::placeholder{ color: var(--ink-3); opacity: 1; }

/* --- botão de limpar --- */
.cpp-faq.cpp-faq .cpp-clear{
  display: none;
  border: 0; border-radius: 50%;
  background: var(--sunk);
  width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
}
.cpp-faq.cpp-faq .cpp-clear.on{ display: inline-flex; }
.cpp-faq.cpp-faq .cpp-clear:hover{ background: var(--line); border: 0; }

/* --- atalhos "mais buscadas" --- */
.cpp-faq.cpp-faq .cpp-hint{
  display: inline-block; width: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 13px; font-weight: 400;
  padding: 6px 12px;
  line-height: 1.5;
}
.cpp-faq.cpp-faq .cpp-hint:hover,
.cpp-faq.cpp-faq .cpp-hint:focus{
  border-color: var(--gd);
  color: var(--ink);
  background: var(--gd-wash);
}

/* --- índice de categorias --- */
.cpp-faq.cpp-faq .cpp-navbtn{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  padding: 9px 12px;
  font-size: 14.5px; font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}
.cpp-faq.cpp-faq .cpp-navbtn:hover,
.cpp-faq.cpp-faq .cpp-navbtn:focus{
  background: var(--sunk); color: var(--ink); border: 0;
}
.cpp-faq.cpp-faq .cpp-navbtn[aria-current="true"],
.cpp-faq.cpp-faq .cpp-navbtn[aria-current="true"]:hover{
  background: var(--ink); color: #fff; border: 0;
}
.cpp-faq.cpp-faq .cpp-navbtn i{
  font-style: normal; font-size: 12px; color: var(--ink-3);
}
.cpp-faq.cpp-faq .cpp-navbtn[aria-current="true"] i{ color: rgba(255,255,255,.6); }

/* --- botões pequenos do rodapé do item (link interno + copiar) --- */
.cpp-faq.cpp-faq .cpp-mini{
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 500;
  padding: 6px 11px;
  line-height: 1.5;
}
.cpp-faq.cpp-faq .cpp-mini:hover,
.cpp-faq.cpp-faq .cpp-mini:focus{
  border-color: var(--ink); color: var(--ink); background: var(--card);
}
.cpp-faq.cpp-faq .cpp-mini.ok,
.cpp-faq.cpp-faq .cpp-mini.ok:hover{
  border-color: var(--gd); background: var(--gd-wash); color: var(--gd-ink);
}

/* --- CTA dourado / escuro --- */
.cpp-faq.cpp-faq .cpp-cta{
  display: inline-flex; align-items: center; gap: 11px; width: auto;
  padding: 13px 13px 13px 22px;
  background: var(--gd);
  color: #241b06;
  border: 0; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -14px rgba(212,169,78,.9);
}
.cpp-faq.cpp-faq .cpp-cta:hover,
.cpp-faq.cpp-faq .cpp-cta:focus{ background: #e0b85c; color: #241b06; border: 0; }
.cpp-faq.cpp-faq .cpp-cta.dark{
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 26px -16px rgba(13,27,42,.9);
}
.cpp-faq.cpp-faq .cpp-cta.dark:hover,
.cpp-faq.cpp-faq .cpp-cta.dark:focus{ background: #16283c; color: #fff; }

/* --- as variantes responsivas precisam da mesma força, senão a versão
       desktop acima passa por cima delas no celular --- */
@media (max-width: 900px){
  .cpp-faq.cpp-faq .cpp-navbtn{
    width: auto; white-space: nowrap;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
  }
  .cpp-faq.cpp-faq .cpp-navbtn:hover,
  .cpp-faq.cpp-faq .cpp-navbtn:focus{ border: 1px solid var(--line); background: var(--sunk); }
  .cpp-faq.cpp-faq .cpp-navbtn[aria-current="true"],
  .cpp-faq.cpp-faq .cpp-navbtn[aria-current="true"]:hover{
    border: 1px solid var(--ink); background: var(--ink); color: #fff;
  }
}
@media (max-width: 620px){
  .cpp-faq.cpp-faq .cpp-cta{ width: 100%; justify-content: space-between; }
}