/* =========================================================
   Sellum LP · componentes
   Cada bloco espelha um componente do Figma. Valores sempre via
   tokens.css; medidas do Figma que ainda não existem na escala de
   tokens ficam como variáveis locais do componente, documentadas.
   ========================================================= */

/* ---------- Base de reset dos componentes ---------- */
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; }

/* ---------- Ícone ----------
   Figma: Ícone/arrow-right (1236:5702). 20 px nos botões, traço na cor do texto. */
.icone {
  display: block;
  flex-shrink: 0;
}

/* ---------- Botão ----------
   Figma: set 1551:835. Base 56 px de altura (py 16 + linha 24),
   texto Web/Menu (aplicar .web-menu no elemento).
   Estilo: --primario, --branco, --preto, --contorno, --contorno-escuro,
   --sem-borda, --sem-borda-escuro.
   Formato: pill (padrão) ou --retangular (raio 12).
   Tipo: texto (padrão; o ícone segue a ordem do HTML, à direita ou à
   esquerda) ou --icone (56x56).
   No Figma o traço de 1.5 dos contornos fica por fora: esses botões
   medem 59 px, e o CSS reproduz isso somando a borda ao padding.

   Hover "barra de progresso": a cor de hover (--botao-hover) preenche o
   botão da esquerda para a direita e volta ao sair. O Figma não define
   estados de hover; as cores abaixo são a proposta para validar. */
.botao {
  --botao-padding-y: var(--espaco-16); /* 56 px de altura. Figma ainda em py 12 (48 px): atualizar o set 1551:835 */
  --botao-padding-x: 22px;  /* Figma: px 22 (fora da escala) */
  --botao-borda: 1.5px;     /* Figma: stroke 1.5 dos contornos */
  --botao-hover: var(--tema-superficie);
  --botao-hover-duracao: 0.45s;

  position: relative;
  isolation: isolate; /* o preenchimento fica atrás do texto e dentro do botão */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-8);
  padding: var(--botao-padding-y) var(--botao-padding-x);
  border: 0;
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--tema-texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--botao-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--botao-hover-duracao) cubic-bezier(0.65, 0, 0.35, 1);
}
.botao:hover::before,
.botao:focus-visible::before {
  transform: scaleX(1);
}
.botao:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--linha-espessura);
}
@media (prefers-reduced-motion: reduce) {
  .botao::before { transition: none; }
}

.botao--primario {
  --botao-hover: var(--cor-apoio-azul-vivo);
  background: var(--cor-marca-azul);
}
.botao--branco {
  --botao-hover: var(--tema-contraste-hover);
  background: var(--tema-contraste);
  color: var(--tema-contraste-texto);
}
.botao--preto {
  --botao-hover: var(--cor-neutro-800);
  background: var(--cor-neutro-preto);
}
.botao--contorno {
  --botao-hover: var(--tema-superficie);
  border: var(--botao-borda) solid var(--tema-borda-forte);
}
.botao--contorno-escuro {
  --botao-hover: var(--cor-neutro-200);
  border: var(--botao-borda) solid var(--cor-neutro-preto);
  color: var(--cor-neutro-preto);
}
/* Sem preenchimento: cor do menu (neutro/400) e branco no hover, com o
   mesmo fade dos logos de clientes. Não usa a barra de progresso. */
.botao--sem-borda {
  color: var(--tema-texto-2);
  transition: color 0.2s ease;
}
.botao--sem-borda:hover,
.botao--sem-borda:focus-visible {
  color: var(--tema-texto);
}
.botao--sem-borda::before { content: none; }
.botao--sem-borda-escuro {
  --botao-hover: var(--cor-neutro-200);
  color: var(--cor-neutro-preto);
}

.botao--retangular { border-radius: var(--raio-ui); }

.botao--icone {
  width: 56px;  /* mesma altura do botão de texto. Figma ainda em 48x48 */
  height: 56px;
  padding: 0;
}

/* ---------- Logo ----------
   Figma: set 1237:953. Nunca recolorir, distorcer ou aplicar sombra. */
.logo { display: inline-flex; color: var(--tema-texto); } /* o desenho usa currentColor: branco no escuro, preto no claro */
.logo svg { display: block; }

/* ---------- Título + subtítulo de seção (centralizado) ---------- */
.cabeca-secao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-16);
  text-align: center;
}
.cabeca-secao .corpo-m { color: var(--tema-texto-2); }
/* Etapas da venda (pill tab): Captação, Conversão, Retenção numa cápsula.
   A cápsula é filha direta de .jornada e, com JS (.is-ativa), fica presa
   na tela enquanto a jornada rola: menu lateral a partir de 960 px,
   cápsula deitada abaixo do header nas telas menores. O fundo branco
   (.etapas__indicador) desliza para o chip da etapa atual (aria-current);
   os outros chips ficam escuros e embaçados. Sem JS a cápsula fica parada
   e o próprio chip atual leva o fundo branco. Fora do Figma: teste. */
.etapas {
  --etapas-transicao: 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  position: relative;
  z-index: 40; /* abaixo do header (50), acima dos cards */
  display: flex;
  gap: var(--espaco-8);
  width: fit-content;
  max-width: calc(100% - 2 * var(--espaco-16)); /* em telas estreitas a cápsula rola de lado */
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  margin: var(--espaco-secao) auto 0;
  padding: var(--espaco-8);
  list-style: none;
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-pill);
}
.etapas.is-ativa {
  position: sticky;
  top: var(--altura-cabecalho);
}
.etapas::-webkit-scrollbar { display: none; }
.etapas + .secao { padding-top: var(--espaco-24); }

.etapas__chip {
  position: relative;
  z-index: 1; /* texto acima do fundo que desliza */
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--espaco-8);
  padding: var(--espaco-8) var(--espaco-16);
  white-space: nowrap;
  color: var(--tema-texto-3);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-pill);
  opacity: 0.6;
  filter: blur(1.5px);
}
.etapas__icone { flex-shrink: 0; } /* Figma: Ícone/user-plus, zap e activity, em currentColor */
.etapas__chip[aria-current] {
  color: var(--tema-contraste-texto);
  background: var(--tema-contraste);
  border-color: var(--tema-texto);
  opacity: 1;
  filter: none;
}
.etapas.is-ativa .etapas__chip[aria-current] {
  background: transparent;
  border-color: transparent;
}

.etapas__indicador {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--indicador-largura, 0);
  height: var(--indicador-altura, 0);
  background: var(--tema-contraste);
  border-radius: var(--raio-pill);
  transform: translate(var(--indicador-x, 0), var(--indicador-y, 0));
}
.etapas.is-pronta .etapas__indicador {
  transition: transform var(--etapas-transicao), width var(--etapas-transicao), height var(--etapas-transicao);
}
.etapas.is-pronta .etapas__chip {
  transition: color var(--etapas-transicao), opacity var(--etapas-transicao), filter var(--etapas-transicao), border-color var(--etapas-transicao);
}
@media (prefers-reduced-motion: reduce) {
  .etapas.is-pronta .etapas__indicador,
  .etapas.is-pronta .etapas__chip { transition: none; }
}

/* A partir de 960 px as etapas viram menu lateral: a jornada ganha duas
   colunas (menu de 240 + conteúdo) dentro da largura do site, e as seções
   ficam mais estreitas para caber ao lado do menu. O menu acompanha a
   rolagem (sticky) do começo da Captação ao fim da Retenção. Abaixo de
   960 px não há espaço ao lado do conteúdo: fica a cápsula deitada. */
@media (min-width: 960px) {
  .jornada {
    display: grid;
    grid-template-columns: var(--largura-indice) minmax(0, 1fr);
    column-gap: var(--espaco-32);
    max-width: calc(var(--largura-conteudo) + 2 * var(--margem-lateral));
    margin-inline: auto;
    padding-inline: var(--margem-lateral);
    box-sizing: border-box;
  }
  .jornada > .secao { grid-column: 2; }
  .jornada > .secao > .container { max-width: none; padding-inline: 0; }
  .etapas + .secao { padding-top: var(--espaco-secao); }

  .etapas,
  .etapas.is-ativa {
    grid-column: 1;
    grid-row: 1 / span 3; /* acompanha as três seções da jornada */
    align-self: start;
    flex-direction: column;
    width: auto;
    max-width: none;
    /* a margem de baixo desconta o respiro do fim da última seção: o menu
       para na altura do último card, sem encostar na seção seguinte */
    margin: var(--espaco-secao) 0;
    overflow: visible;
    border-radius: var(--raio-card);
  }
  .etapas.is-ativa { top: calc(var(--altura-cabecalho) + var(--espaco-24)); }
  .etapas__chip { padding: var(--espaco-12) var(--espaco-16); }

  .jornada .card-destaque { --card-recuo: var(--espaco-32); }
}

/* Menu lateral com pouca largura (960 a 1279): cards em uma coluna só. */
@media (min-width: 960px) and (max-width: 1279px) {
  .jornada .destaques__linha { grid-template-columns: minmax(0, 1fr); }
  .jornada .card-destaque--horizontal {
    flex-direction: column-reverse;
    height: auto;
  }
  .jornada .card-destaque--horizontal .card-destaque__texto {
    width: auto;
    padding: var(--espaco-32) var(--card-recuo) var(--card-recuo);
  }
  .jornada .card-destaque--horizontal .card-destaque__visual { flex: none; height: 420px; margin: 0; }
  .jornada .card-destaque--horizontal .card-destaque__visual img { object-position: 30% top; }

}

/* Menu lateral com largura cheia (1280 ou mais): cards lado a lado. */
@media (min-width: 1280px) {
  .jornada { column-gap: var(--espaco-48); }
  .jornada .card-destaque--horizontal { --card-texto-largura: 380px; }
  .jornada .card-destaque--horizontal .card-destaque__visual img { object-position: right top; }
}

/* ---------- Card de destaque ----------
   Figma: set 1526:753. Layout --vertical (628 x 640, dois por linha)
   ou --horizontal (1280 x 520). Tema escuro (padrão) ou --azul.
   O visual (tela de produto recortada + degradê) é um recorte do frame
   da LP no Figma, do tamanho exato da área Visual. A borda do card fica
   por dentro (como no Figma), e o visual avança 1 px sobre ela para
   coincidir pixel a pixel com o recorte, que já inclui a borda.
   Padrão dos cards (fora do Figma, a atualizar lá): sem botão; caixa de
   ícone no canto superior esquerdo; título e texto sempre no canto
   inferior esquerdo, com o mesmo recuo (--card-recuo). */
/* Cards com id são destino dos itens do menu de produtos. Ao chegar por um link, o card para 24 px abaixo
   da cápsula do header (a altura dela já é descontada no scroll-padding do html; a faixa de aviso some ao rolar). */
.card-destaque[id] { scroll-margin-top: var(--espaco-24); }
.card-destaque {
  --card-recuo: var(--espaco-48);
  --card-icone-caixa: 42px; /* Figma: Caixa de ícone, Tamanho=PP (set 1237:1014) */
  --card-icone: 21px;       /* ícone do PP: os 24 do P na mesma proporção (42/48) */

  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-box);
}
/* Regra de borda: só em superfície que quase não se distingue do fundo
   (neutro/900 sobre o preto). No azul a borda some: fica da cor do fundo,
   para não mudar a medida do card. Nos escuros, a borda é a linha sutil
   (branco a 8%), discreta como no site da Linear. */
.card-destaque--azul {
  background: var(--cor-marca-azul);
  border-color: var(--cor-marca-azul);
}
/* Os recortes de tela dos cards (azuis e escuros) trazem a borda antiga gravada
   na imagem; o clip-path esconde esse 1 px onde o visual encosta na borda. */
.card-destaque--horizontal .card-destaque__visual img { clip-path: inset(1px 1px 1px 0); }
.card-destaque--vertical .card-destaque__visual img { clip-path: inset(1px 1px 0 1px); }

.card-destaque__visual {
  overflow: hidden;
}

/* Caixa de ícone · Figma 1237:1014, Tamanho=PP (42 px, ícone 21, raio raio/ui).
   O Tamanho=P (48 px, ícone 24) continua no DS: basta redefinir as duas
   variáveis (--card-icone-caixa e --card-icone), como faz o card de integração.
   Estilo=Escuro (neutro/800) nos cards escuros. Nos cards azuis o fundo é
   apoio/azul-vivo: o Estilo=Azul do DS (marca/azul) sumiria no card azul. */
.card-destaque__icone {
  position: absolute;
  top: var(--card-recuo);
  left: var(--card-recuo);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--card-icone-caixa);
  height: var(--card-icone-caixa);
  background: var(--tema-superficie);
  border-radius: var(--raio-ui);
}
.card-destaque__icone img,
.card-destaque__icone svg {
  width: var(--card-icone);
  height: var(--card-icone);
}
.card-destaque--azul .card-destaque__icone { background: var(--cor-apoio-azul-vivo); }

/* Card com página de produto: o título é o link e cobre o card inteiro. */
.card-destaque__link {
  color: inherit;
  text-decoration: none;
}
.card-destaque__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.card-destaque__link:focus-visible { outline: none; }
.card-destaque__link:focus-visible::after {
  outline: var(--linha-espessura) solid var(--tema-texto);
  outline-offset: calc(-2 * var(--linha-espessura));
  border-radius: var(--raio-box);
}
.card-destaque__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.card-destaque__texto .web-corpo { color: var(--tema-texto-2); }
.card-destaque--azul .card-destaque__texto .web-corpo { color: var(--cor-apoio-azul-claro); }

/* Vertical: visual 380 no topo, texto encostado na base */
.card-destaque--vertical {
  flex-direction: column;
  height: 640px;
}
.card-destaque--vertical .card-destaque__visual {
  flex-shrink: 0;
  height: 380px;
  margin: calc(-1 * var(--linha-fina)) calc(-1 * var(--linha-fina)) 0;
}
.card-destaque--vertical .card-destaque__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espaco-16);
  padding: var(--espaco-8) var(--card-recuo) var(--card-recuo);
}

/* Compacto: sem visual. Ícone no topo, texto encostado na base.
   A altura mínima vem de --card-compacto-altura (definida pela seção). */
.card-destaque--compacto {
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--card-compacto-altura, 280px);
  padding: calc(2 * var(--card-recuo) + var(--card-icone-caixa)) var(--card-recuo) var(--card-recuo);
}
.card-destaque--compacto .card-destaque__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}

/* Horizontal: texto 520 à esquerda, encostado na base; visual ocupa o resto */
.card-destaque--horizontal {
  --card-texto-largura: 520px;

  height: 520px;
}
.card-destaque--horizontal .card-destaque__texto {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espaco-16);
  width: calc(var(--card-texto-largura) - var(--linha-fina));
  padding: 0 var(--espaco-32) var(--card-recuo) var(--card-recuo);
  box-sizing: border-box;
}
.card-destaque--horizontal .card-destaque__visual {
  flex: 1;
  margin: calc(-1 * var(--linha-fina)) calc(-1 * var(--linha-fina)) calc(-1 * var(--linha-fina)) 0;
}

/* Faixa: horizontal de largura inteira, embaixo de uma linha de dois verticais.
   A área de tela é igual à deles: metade da linha (menos meio vão) por 380 de
   altura, alinhada com o card da direita. Quando a linha vira uma coluna só,
   a faixa empilha como os outros horizontais, com a tela na altura dos verticais. */
.card-destaque--faixa { height: 380px; }
.card-destaque--faixa .card-destaque__texto { width: calc(50% + var(--espaco-24) / 2); }
@media (min-width: 960px) and (max-width: 1279px) {
  .jornada .card-destaque--horizontal.card-destaque--faixa .card-destaque__visual { height: 380px; }
}

/* ---------- Card de depoimento ----------
   Figma: set 1531:703. Altura 400, largura livre. Temas --clara e --azul.
   Citação no topo, autor na base (logo 40x40, divisória, nome e cargo). */
.card-depoimento {
  --citacao-fonte: 400 28px/1.3 var(--fonte-titulo); /* Figma: Sora 28 / 130% (sem estilo) */
  --padding-card: 40px; /* Figma: p 40 (fora da escala) */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 400px;
  padding: var(--padding-card);
  border-radius: var(--raio-box);
  overflow: hidden;
}
.card-depoimento__citacao { font: var(--citacao-fonte); }

/* Clara: mesmo fundo e borda dos cards (superfície do tema), acompanhando a
   página. No Figma (set 1531:703) o tema Clara ainda é apoio/azul-claro: atualizar. */
.card-depoimento--clara {
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  color: var(--tema-texto);
}
.card-depoimento--clara .card-depoimento__cargo { color: var(--tema-texto-2); }
/* o logo do cliente vem em preto no arquivo: no tema escuro vira branco */
:root:not([data-tema="claro"]) .card-depoimento--clara .card-depoimento__logo img { filter: invert(1); }

.card-depoimento--azul { background: var(--cor-marca-azul); color: var(--tema-texto); }
.card-depoimento--azul .card-depoimento__cargo { color: var(--cor-apoio-azul-claro); }
.card-depoimento--azul .card-depoimento__nome-cargo { gap: 2px; } /* Figma: gap 2 só no tema Azul */

.card-depoimento__autor {
  display: flex;
  align-items: center;
  gap: var(--espaco-16);
}
.card-depoimento__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.card-depoimento__divisoria {
  width: var(--linha-fina);
  height: 40px;
  background: var(--cor-apoio-azul-suave);
  opacity: 0.6;
}
.card-depoimento__nome-cargo {
  display: flex;
  flex-direction: column;
}

/* ---------- Link com seta ----------
   Figma: Link (1565:1724). Ação secundária dentro de seções. */
.link-seta {
  --link-gap: 10px; /* Figma: gap 10 (fora da escala) */

  display: inline-flex;
  align-items: center;
  gap: var(--link-gap);
  color: var(--tema-texto);
  text-decoration: none;
  white-space: nowrap;
}
.link-seta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Item de FAQ ----------
   Figma: set 1565:1669. <details>: Aberto (neutro/800, ícone branco "−")
   e Fechado (neutro/900, ícone com contorno "+").
   A caixa segue o Card de destaque: mesma superfície, borda de linha sutil e
   raio/box (no Figma o item ainda está sem borda e com raio/card: atualizar). */
.item-faq {
  --item-padding: var(--espaco-24) var(--espaco-24) var(--espaco-24) var(--espaco-32);
  --icone-tamanho: 40px;

  padding: var(--item-padding);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-box);
  transition: background-color 0.2s ease;
}
.item-faq[open] { background: var(--tema-superficie); }

.item-faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  color: var(--tema-texto);
  list-style: none;
  cursor: pointer;
}
.item-faq__pergunta::-webkit-details-marker { display: none; }
.item-faq__pergunta:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--espaco-8);
  border-radius: var(--raio-ui);
}

.item-faq__icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icone-tamanho);
  height: var(--icone-tamanho);
  border: var(--linha-fina) solid var(--tema-borda-forte);
  border-radius: var(--raio-pill);
  color: var(--tema-texto);
}
.item-faq__icone::before { content: "+"; }
.item-faq[open] .item-faq__icone {
  background: var(--tema-contraste);
  border-color: var(--tema-texto);
  color: var(--tema-contraste-texto);
}
.item-faq[open] .item-faq__icone::before { content: "−"; }

.item-faq__resposta {
  margin-top: var(--espaco-12);
  color: var(--tema-texto-2);
}


/* ---------- Card de plano ----------
   Figma: set 1432:511, variante Estilo=Web, Tema=Escuro (1590:1197).
   Topo preto (nome, contatos e preço), produtos inclusos em pílulas,
   divisória e lista de recursos (Item de plano, Estilo=Web 1590:10962).
   Ocultar preço = Sim: .card-plano__tarja (cadeado + texto) no lugar do valor. */
.card-plano {
  --card-plano-espaco-12: 12px;  /* Figma: espaco/12 (variável ainda não está em tokens.css) */
  --card-plano-gap-contatos: 6px; /* Figma: gap 6 (fora da escala) */
  --card-plano-contato: 46px;     /* Figma: Contato Tamanho=P, 46x46 */

  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  box-sizing: border-box;
  height: 100%;
  padding-bottom: var(--espaco-32);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-caixa);
}

.card-plano__topo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  margin: var(--espaco-8) var(--espaco-8) 0;
  padding: var(--espaco-24);
  background: var(--tema-fundo);
  border-radius: var(--raio-card);
}
.card-plano__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
}
.card-plano__nome {
  padding: var(--espaco-8) var(--espaco-16);
  background: var(--tema-contraste);
  border-radius: var(--raio-pill);
  color: var(--tema-contraste-texto);
}
.card-plano__contatos {
  display: flex;
  gap: var(--card-plano-gap-contatos);
}
.card-plano__contato {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--card-plano-contato);
  height: var(--card-plano-contato);
  background: var(--tema-fundo);
  border: var(--linha-espessura) solid var(--tema-borda);
  border-radius: var(--raio-pill);
  color: var(--tema-texto);
  transition: border-color 0.2s ease;
}
.card-plano__contato:hover { border-color: var(--tema-texto-2); }
.card-plano__contato { --tooltip-borda: var(--linha-espessura); } /* o tooltip mede a distância por fora da borda */
.card-plano__contato:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--linha-espessura);
}

.card-plano__preco {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-8);
}
.card-plano__valor { color: var(--tema-texto); }
.card-plano__periodo { color: var(--tema-texto-2); }
/* Tarja (Ocultar preço = Sim). Figma: frame Tarja, neutro/800, raio/ui,
   cadeado 20 + "Preço na demonstração" em Web/Menu, px 16, gap 8.
   Altura igual à linha do valor em Título/4 (58). */
.card-plano__tarja {
  --tarja-altura: 58px; /* Figma: altura da linha de Título/4 */

  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  height: var(--tarja-altura);
  padding-inline: var(--espaco-16);
  box-sizing: border-box;
  background: var(--tema-superficie);
  border-radius: var(--raio-ui);
  color: var(--tema-texto);
  white-space: nowrap;
}
/* Linha de base igual à do valor em Título/4, para o "/mês" ficar na mesma altura do Starter */
.card-plano__tarja::before {
  content: "\200b";
  width: 0;
  margin-right: calc(-1 * var(--espaco-8));
  font: 400 48px/58px var(--fonte-titulo); /* Título/4 */
}

.card-plano__produtos {
  display: flex;
  flex-direction: column;
  gap: var(--card-plano-espaco-12);
  padding-inline: var(--espaco-24);
}
.card-plano__rotulo { color: var(--tema-texto-2); }
.card-plano__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-8);
}
.card-plano__produto {
  --produto-padding: 8px 18px 8px 14px; /* Figma: Produto Tamanho=P (fora da escala) */

  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  padding: var(--produto-padding);
  background: var(--tema-fundo);
  border: var(--linha-espessura) solid var(--tema-borda);
  border-radius: var(--raio-pill);
  color: var(--tema-texto);
}
/* Texto no estilo do corpo da página (Web/Corpo, classe .web-corpo no HTML) e
   ícone do tamanho da fonte, como no Figma (Produto, Tamanho=P: proporção 1:1).
   Se o corpo mudar de tamanho, a pílula e o ícone acompanham. */
.card-plano__produto svg { width: 1em; height: 1em; }
.card-plano__produto svg,
.card-plano__item svg { flex-shrink: 0; }

/* Divisória (set 1267:63, Estilo=Clara) como borda superior da lista */
.card-plano__recursos {
  display: flex;
  flex-direction: column;
  gap: var(--card-plano-espaco-12);
  padding: var(--espaco-24) var(--espaco-24) 0;
  border-top: var(--linha-espessura) solid var(--tema-borda);
}
.card-plano__item {
  display: flex;
  align-items: center;
  gap: var(--card-plano-espaco-12);
  color: var(--tema-texto-suave);
}

/* ---------- Tooltip ----------
   Figma: set 1645:978 (Tema=Claro/Escuro x Posição=Acima/Abaixo).
   Dica curta ao passar o mouse ou focar um botão de ícone: basta pôr
   data-tooltip="texto" no elemento. Balão em Rótulo/UI, espaco/8 x espaco/12,
   raio/ui, com seta de 12 x 6, a espaco/8 do elemento. A cor é invertida em
   relação à página (preto no tema claro, branco no escuro), como os dois
   temas do componente. data-tooltip-posicao="abaixo" põe o balão embaixo. */
[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
  --tooltip-distancia: calc(100% + var(--tooltip-borda, 0px) + var(--espaco-8));

  position: absolute;
  left: 50%;
  z-index: 10;
  pointer-events: none;
  background: var(--tema-contraste);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
[data-tooltip]::before { /* seta */
  content: "";
  bottom: var(--tooltip-distancia);
  width: 12px;
  height: 6px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
[data-tooltip]::after { /* balão */
  content: attr(data-tooltip);
  bottom: calc(var(--tooltip-distancia) + 6px);
  padding: var(--espaco-8) var(--espaco-12);
  font: 500 14px/20px var(--fonte-corpo); /* Rótulo/UI */
  white-space: nowrap;
  color: var(--tema-contraste-texto);
  border-radius: var(--raio-ui);
}
[data-tooltip][data-tooltip-posicao="abaixo"]::before {
  top: var(--tooltip-distancia);
  bottom: auto;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
[data-tooltip][data-tooltip-posicao="abaixo"]::after {
  top: calc(var(--tooltip-distancia) + 6px);
  bottom: auto;
}
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
@media (hover: hover) {
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after { transition: none; }
}

/* ---------- Pílula ----------
   Figma: set 1565:1647. Texto Web/Menu (aplicar .web-menu), py 14 / px 28.
   Temas: --azul-claro, --azul, --branco, --azul-vivo, --cinza. */
.pilula {
  --pilula-padding: 14px 28px; /* Figma: py 14 / px 28 (fora da escala) */

  display: inline-flex;
  padding: var(--pilula-padding);
  border-radius: var(--raio-pill);
  white-space: nowrap;
}
.pilula--azul-claro { background: var(--cor-apoio-azul-claro); color: var(--cor-neutro-preto); }
.pilula--azul { background: var(--cor-marca-azul); color: var(--cor-neutro-branco); }
.pilula--branco { background: var(--cor-neutro-branco); color: var(--cor-neutro-preto); }
.pilula--azul-vivo { background: var(--cor-apoio-azul-vivo); color: var(--cor-neutro-branco); }
.pilula--cinza { background: var(--cor-neutro-700); color: var(--cor-neutro-branco); }

/* ---------- Caixa de info ----------
   Figma: Caixa de info (1599:919). Título/5 + Web/Corpo, p 32, gap 16,
   neutro/900 com borda 1 px neutro/800 (por dentro), raio/card. */
.caixa-info {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  box-sizing: border-box;
  padding: var(--espaco-32);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.caixa-info .web-corpo { color: var(--tema-texto-2); }

/* ---------- Índice lateral ----------
   Figma: Índice lateral (1599:939) + Item de índice (set 1599:926).
   Largura largura/indice (240). Item: py 8 / px 16, raio/ui, Web/Menu.
   Ativo (.is-ativo, tópico em leitura): fundo neutro/800 e texto branco. */
.indice {
  --indice-gap: var(--espaco-8);

  display: flex;
  flex-direction: column;
  gap: var(--indice-gap);
}
.indice__rotulo { color: var(--tema-texto-2); }
.indice__lista {
  display: flex;
  flex-direction: column;
  gap: var(--indice-gap);
}
.indice__item {
  display: block;
  padding: var(--espaco-8) var(--espaco-16);
  border-radius: var(--raio-ui);
  color: var(--tema-texto-2);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.indice__item:hover { color: var(--tema-texto); }
.indice__item.is-ativo {
  background: var(--tema-superficie);
  color: var(--tema-texto);
}
.indice__item:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--linha-espessura);
}

/* ---------- Meta do post ----------
   Figma: Meta do post (1599:953). Avatar 40 (neutro/800, iniciais em
   Rótulo/UI), autor em Web/Menu, data e tempo de leitura em Web/Corpo
   neutro/400, separadores neutro/500. Gap espaco/12. */
.meta-post {
  --meta-gap: 12px;    /* Figma: espaco/12 (variável ainda não está em tokens.css) */
  --meta-avatar: 40px; /* Figma: Avatar 40x40 */

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--meta-gap);
  color: var(--tema-texto-2);
}
.meta-post__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--meta-avatar);
  height: var(--meta-avatar);
  background: var(--tema-superficie);
  border-radius: var(--raio-pill);
  color: var(--tema-texto);
}
.meta-post__autor { color: var(--tema-texto); }
.meta-post__separador { color: var(--tema-texto-3); }
.meta-post__leitura {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
}

/* ---------- Barra de progresso de leitura ----------
   Figma: Barra de progresso de leitura (1599:956). Trilho neutro/800 de
   ponta a ponta, altura linha/progresso (4), preenchimento apoio/azul-vivo.
   Fica presa sob o header; a largura vem de --progresso (js/leitura.js). */
.barra-progresso {
  position: fixed;
  top: var(--altura-cabecalho);
  right: 0;
  left: 0;
  z-index: 49;
  height: var(--linha-progresso);
  background: var(--tema-superficie);
}
.barra-progresso__preenchimento {
  width: 100%;
  height: 100%;
  background: var(--cor-apoio-azul-vivo);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
}

/* ---------- Caixa de CTA ----------
   Figma: Caixa de CTA (1599:967). marca/azul, raio/caixa, p 64, gap 32;
   Título/4 + Corpo/M (apoio/azul-claro) centralizados e Botão Branco. */
.caixa-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
  box-sizing: border-box;
  padding: var(--espaco-64);
  background: var(--cor-marca-azul);
  border-radius: var(--raio-caixa);
  text-align: center;
}
.caixa-cta__textos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}
.caixa-cta .corpo-m { color: var(--cor-apoio-azul-claro); }

/* ---------- Seletor segmentado ----------
   Figma: set 1435:403 (variante Ativo). Cápsula neutro/preto, p 4, raio/pill;
   opções em Web/Menu (aplicar .web-menu), py 8 / px 18, texto branco; a opção
   ativa (aria-pressed="true") leva fundo branco e texto preto. Cores fixas: é
   igual nos dois temas.
   Um componente só para toda escolha entre poucas opções: filtro de categoria
   (js/filtro.js) e alternador de dois estados (calculadora). Serve em <ul>
   com <li><button> ou em <div role="group"> com os <button> direto. */
.seletor {
  --seletor-recuo: calc(var(--espaco-8) / 2); /* Figma: p 4 (fora da escala) */
  --seletor-opcao-padding: var(--espaco-8) 18px; /* Figma: py 8 / px 18 (fora da escala) */

  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--seletor-recuo);
  overflow-x: auto; /* em telas estreitas a cápsula rola de lado */
  scrollbar-width: none;
  list-style: none;
  background: var(--cor-neutro-preto);
  border-radius: var(--raio-pill);
}
.seletor::-webkit-scrollbar { display: none; }
.seletor[hidden] { display: none; }
.seletor > li { display: flex; flex-shrink: 0; }
.seletor__opcao {
  flex-shrink: 0;
  padding: var(--seletor-opcao-padding);
  white-space: nowrap;
  color: var(--cor-neutro-branco);
  background: transparent;
  border: 0;
  border-radius: var(--raio-pill);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.seletor__opcao:hover { background: var(--cor-neutro-800); }
.seletor__opcao[aria-pressed="true"] {
  color: var(--cor-neutro-preto);
  background: var(--cor-neutro-branco);
}
.seletor__opcao:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: calc(-1 * var(--linha-espessura));
}
@media (prefers-reduced-motion: reduce) {
  .seletor__opcao { transition: none; }
}

/* ---------- Card de case ----------
   Fora do Figma: referência da página Cases enviada em 05/10/2026.
   Capa na cor do cliente (--card-case-cor, um token --cor-cliente-*), com a
   tag da categoria no canto e o logo no centro; abaixo, título (Corpo/S) e o
   Link com seta, que estende o clique ao card inteiro.
   Capa escura: --escura (logo e nome em branco). Case sem página ainda:
   .card-case--a-publicar (sem link, título apagado e a etiqueta "a publicar"). */
.card-case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-16);
  width: 100%;
}
.card-case__capa {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card-case-cor, var(--tema-superficie));
  color: var(--cor-neutro-preto);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
  box-sizing: border-box;
}
.card-case__capa--escura { color: var(--cor-neutro-branco); }
.card-case__logo { display: block; width: 70%; height: auto; } /* os SVGs "completo" já trazem respiro em volta da marca */
.card-case__logo--selo { width: 36%; } /* logo sem respiro no arquivo (selo, símbolo): ocupa cerca de 60% da altura da capa */
.card-case__capa--escura .card-case__logo { filter: invert(1); } /* logos gravados em preto */
.card-case__tag {
  position: absolute;
  top: var(--espaco-16);
  right: var(--espaco-16);
  padding: calc(var(--espaco-8) / 2) var(--espaco-12);
  background: var(--cor-neutro-900-92);
  color: var(--cor-neutro-branco);
  border-radius: var(--raio-pill);
}
.card-case__titulo { margin-top: var(--espaco-8); color: var(--tema-texto); }
.card-case__link { color: var(--tema-texto-2); transition: color 0.2s ease; }
.card-case__link::after { content: ""; position: absolute; inset: 0; } /* o card inteiro leva ao case */
.card-case:hover .card-case__link,
.card-case__link:focus-visible { color: var(--tema-texto); }
.card-case__link:focus-visible { outline: 0; }
.card-case__link:focus-visible::after {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--linha-espessura);
  border-radius: var(--raio-card);
}
.card-case--a-publicar .card-case__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-12);
  color: var(--tema-texto-2);
}
.card-case__status {
  padding: 0 var(--espaco-8);
  color: var(--tema-texto-3);
  border: var(--linha-fina) solid var(--tema-borda);
  border-radius: var(--raio-pill);
}

/* ---------- Modal em tela cheia ----------
   <dialog class="modal"> aberto por js/modal.js. Ocupa a tela inteira, com
   fundo preto e rolagem própria. O botão fechar ([data-fecha-modal]) fica
   dentro do conteúdo de cada modal.
   Fora do Figma: teste. */
.modal {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--espaco-24) 0;
  overflow-y: auto;
  color: var(--tema-texto);
  background: var(--tema-fundo);
  border: 0;
}
.modal::backdrop { background: var(--cor-neutro-preto); }
.modal[open] { animation: modal-entrar 0.3s ease-out; }
@keyframes modal-entrar {
  from { opacity: 0; transform: translateY(var(--espaco-16)); }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}
.modal[open] {
  display: flex;
  flex-direction: column;
}
html:has(.modal[open]) { overflow: hidden; } /* a página não rola atrás do modal */

html { overflow-x: clip; } /* corta qualquer sobra lateral sem quebrar o sticky */

/* ---------- Texto pendente de confirmação (só no preview) ----------
   Marca textos [EDITAR]/[CONFIRMAR] do Figma. Não publicar com isto. */
.pendente {
  outline: 1px dashed var(--cor-status-sucesso);
  outline-offset: 4px;
}

/* ---------- Fade ao rolar (js/revelar.js) ----------
   O script põe .revelar só nos blocos abaixo da primeira tela e, quando eles
   entram na janela, .is-visivel. Só opacidade e transform: nada muda de
   medida. Sem JS a classe nunca entra e tudo aparece normalmente. */
.revelar {
  opacity: 0;
  transform: translateY(24px);
}
/* a transição fica só na entrada: ao esconder (fora da tela) a troca é imediata, sem fade de saída */
.revelar.is-visivel {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* mesma duração de DURACAO em js/revelar.js */
}
@media (prefers-reduced-motion: reduce), print {
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilitários de acessibilidade ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pular-conteudo:focus {
  position: fixed;
  top: var(--espaco-16);
  left: var(--espaco-16);
  z-index: 60;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
}

/* =========================================================
   Tema claro / escuro
   Os tokens --tema-* vêm do tokens.css. Aqui ficam as ilhas (blocos que
   mantêm um tema fixo por dentro, seja qual for o tema da página), os
   ajustes de imagem e o botão de alternar.
   ========================================================= */

/* Ilhas escuras: superfícies azuis da marca e o rodapé. Os cards com tela de
   produto saíram da lista quando as imagens de fundo escuro foram removidas:
   agora seguem o tema. */
.botao--primario,
.card-destaque--azul,
.card-depoimento--azul,
.caixa-cta,
.calculadora__coluna--resultado,
.calculadora__taxa,
.agendamento__caixa,
.chat__sugestao--destaque,
.chat__avatar,
.obrigado__avatar,
.pilula--azul,
.pilula--azul-vivo {
  color-scheme: dark;
  --tema-fundo: var(--cor-neutro-preto);
  --tema-superficie: var(--cor-neutro-900);
  --tema-superficie-92: var(--cor-neutro-900-92);
  --tema-borda: var(--cor-neutro-800);
  --tema-borda-forte: var(--cor-neutro-700);
  --tema-linha-sutil: var(--cor-linha-sutil);
  --tema-texto: var(--cor-neutro-branco);
  --tema-texto-suave: var(--cor-neutro-300);
  --tema-texto-2: var(--cor-neutro-400);
  --tema-texto-3: var(--cor-neutro-500);
  --tema-contraste: var(--cor-neutro-branco);
  --tema-contraste-texto: var(--cor-neutro-preto);
  --tema-contraste-hover: var(--cor-neutro-200);
  --tema-erro: var(--cor-status-erro);
  color: var(--tema-texto);
}
/* Dentro da caixa azul, só os campos acompanham o tema claro: campo branco
   sobre o azul. Rótulos e textos da caixa continuam claros. */
[data-tema="claro"] .agendamento__caixa .campo__entrada,
[data-tema="claro"] .agendamento__caixa .agendamento__opcao {
  color-scheme: light;
  --tema-fundo: var(--cor-neutro-branco);
  --tema-borda-forte: var(--cor-neutro-300);
  --tema-texto: var(--cor-neutro-preto);
  --tema-texto-suave: var(--cor-neutro-800);
  --tema-texto-3: var(--cor-neutro-500);
}

/* Ilhas claras: caixas de fundo claro fixo */
.rodape__conteudo,
.pergunta-rapida > .container,
.cabecalho.is-rolado .cabecalho__capsula { /* TESTE: menu com as cores do rodapé (css/secoes.css) */
  color-scheme: light;
  --tema-fundo: var(--cor-neutro-branco);
  --tema-superficie: var(--cor-neutro-50);
  --tema-borda: var(--cor-neutro-200);
  --tema-borda-forte: var(--cor-neutro-300);
  --tema-linha-sutil: rgba(0, 0, 0, 0.08);
  --tema-texto: var(--cor-neutro-preto);
  --tema-texto-suave: var(--cor-neutro-800);
  --tema-texto-2: var(--cor-neutro-700);
  --tema-texto-3: var(--cor-neutro-500);
  --tema-contraste: var(--cor-neutro-preto);
  --tema-contraste-texto: var(--cor-neutro-branco);
  --tema-contraste-hover: var(--cor-neutro-800);
}

/* Tema claro: ícones e logos em arquivo com o branco gravado viram pretos,
   fora das ilhas escuras. */
/* No header rolado a cápsula (e o menu dentro dela) usa as cores invertidas do
   tema: clara no tema escuro, escura no claro. Os ícones dos produtos são
   imagens brancas, então invertem junto com ela. */
.cabecalho.is-rolado .menu-produtos__icone img { filter: invert(1); }
[data-tema="claro"] .cabecalho.is-rolado .menu-produtos__icone img { filter: none; }
[data-tema="claro"] .menu-produtos__icone img,
[data-tema="claro"] .integracoes__logos img,
[data-tema="claro"] .card-destaque:not(.card-destaque--azul) .card-destaque__icone img { filter: invert(1); }

/* TESTE · Fundo do tema claro em Degradê/Prata (--degrade-prata): neutro/50
   no topo da página até o branco no fim (a página inteira, não a janela).
   A faixa do header no estado Topo usa --tema-fundo, que é a cor do início do
   degradê. A página Demo, de fundo azul, fica de fora.
   Fora do Figma. PARA DESFAZER: apague este bloco. */
[data-tema="claro"] body:not(.funil--azul) { background-image: var(--degrade-prata); }

/* Botão de alternar o tema: sol no escuro (vai para o claro), lua no claro */
.tema-alternar[hidden] { display: none; }
.tema-alternar__lua { display: none; }
[data-tema="claro"] .tema-alternar__sol { display: none; }
[data-tema="claro"] .tema-alternar__lua { display: block; }
.funil__topo-acoes { display: flex; align-items: center; gap: var(--espaco-16); }

/* ---------- Faixa de aviso (acima do menu) ----------
   Fora do Figma: estrutura da referência enviada em 03/10/2026 (tag, texto,
   botão e fechar, numa pílula clara). Fica dentro do header fixo, acima da
   cápsula do menu, só no estado Topo: ao rolar ela se recolhe e o header volta
   a ser só a cápsula. A página que tem a faixa leva <body class="com-aviso">,
   e o conteúdo desce a altura dela (--altura-aviso; js/aviso.js mede a real).
   Fechada (html.aviso-fechado), não ocupa espaço. */
:root { --altura-aviso: 52px; } /* 8 + botão 36 + 8 */
.com-aviso main { padding-top: calc(var(--altura-cabecalho) + var(--altura-aviso) + var(--espaco-12)); }
.aviso-fechado .com-aviso main { padding-top: var(--altura-cabecalho); }
.aviso-fechado .aviso-topo { display: none; }

.aviso-topo {
  max-height: var(--altura-aviso);
  margin-bottom: var(--espaco-12);
  overflow: hidden;
  transition:
    max-height var(--transicao-estado),
    margin-bottom var(--transicao-estado),
    opacity var(--transicao-estado),
    visibility var(--transicao-estado);
}
.cabecalho.is-rolado .aviso-topo {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
}
.aviso-topo__caixa {
  --aviso-fechar: 36px; /* área do botão de fechar */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: var(--espaco-8) calc(var(--aviso-fechar) + var(--espaco-16));
  background: var(--cor-apoio-azul-claro);
  color: var(--tema-texto);
  border-radius: var(--raio-pill);
}
.aviso-topo__conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-12);
  min-width: 0;
}
.aviso-topo__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  flex-shrink: 0;
  height: 28px;
  padding: 0 var(--espaco-12);
  background: var(--cor-neutro-branco);
  color: var(--cor-marca-azul);
  border-radius: var(--raio-pill);
}
.cabecalho .aviso-topo .aviso-topo__botao { /* seletor mais forte que o ".cabecalho .botao" (48 px) do secoes.css */
  --botao-padding-y: 6.5px; /* 36 px de altura com a borda de 1.5 e a linha de 20 */
  --botao-padding-x: var(--espaco-16);
  --botao-hover: var(--cor-neutro-100);

  flex-shrink: 0;
  background: var(--cor-neutro-branco);
}
.aviso-topo__fechar {
  position: absolute;
  top: 50%;
  right: var(--espaco-8);
  display: grid;
  place-items: center;
  width: var(--aviso-fechar);
  height: var(--aviso-fechar);
  padding: 0;
  background: transparent;
  color: var(--tema-texto-2);
  border: 0;
  border-radius: var(--raio-pill);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.2s ease;
}
.aviso-topo__fechar[hidden] { display: none; }
.aviso-topo__fechar:hover,
.aviso-topo__fechar:focus-visible { color: var(--tema-texto); }
.aviso-topo__fechar:focus-visible {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: calc(-1 * var(--linha-espessura));
}
@media (max-width: 767px) {
  /* celular: tudo num texto corrido, sem blocos empilhados. A tag vem na frente,
     o texto segue na mesma linha e o botão vira um link sublinhado no fim. */
  :root { --altura-aviso: 96px; } /* 12 + três linhas de 24 + 12 (js/aviso.js mede a altura real) */
  .aviso-topo__caixa {
    justify-content: flex-start;
    padding: var(--espaco-12) calc(var(--aviso-fechar) + var(--espaco-8)) var(--espaco-12) var(--espaco-16);
    border-radius: var(--raio-card);
  }
  .aviso-topo__conteudo { display: block; text-align: left; }
  .aviso-topo__tag {
    vertical-align: middle;
    height: 24px;
    margin-right: var(--espaco-8);
    padding: 0 var(--espaco-8);
    gap: 6px;
  }
  .aviso-topo__texto { display: inline; font: 500 14px/24px var(--fonte-corpo); } /* Rótulo/UI, com linha de 24 para a tag caber */
  .cabecalho .aviso-topo .aviso-topo__botao {
    display: inline;
    margin-left: 6px;
    padding: 0;
    overflow: visible;
    font: 500 14px/24px var(--fonte-corpo);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .cabecalho .aviso-topo .aviso-topo__botao::before { content: none; }
  .aviso-topo__fechar { top: var(--espaco-8); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-topo { transition: none; }
}

/* TESTE: faixa de aviso abaixo do menu (em vez de acima). O HTML não muda: o
   header vira uma coluna e a faixa passa para depois da cápsula, com o respiro
   de 12 px em cima. Continua sumindo ao rolar e ao fechar.
   Para desfazer o teste, apague este bloco. */
.cabecalho { display: flex; flex-direction: column; }
.cabecalho .aviso-topo {
  order: 1;
  margin-top: var(--espaco-12);
  margin-bottom: 0;
  transition-property: max-height, margin-top, opacity, visibility;
}
.cabecalho.is-rolado .aviso-topo { margin-top: 0; }