/* ==========================================================================
   OSC — Biblioteca de componentes
   --------------------------------------------------------------------------
   Avatar, grupos de botão, dock de ações, carrossel, upload de arquivo e
   campos de formulário.

   As referências que inspiraram cada um (Chakra UI, Base Web) são bibliotecas
   React. O site é HTML, CSS e JavaScript puros, então os padrões foram
   reescritos aqui — mesmo comportamento, sem framework e na paleta da OSC.

   01. Avatar          04. Carrossel
   02. Grupo de botões 05. Upload de arquivo
   03. Dock de ações   06. Campos de formulário
   ========================================================================== */

/* -------------------------------------------------------------------------
   00. O ATRIBUTO `hidden` PRECISA GANHAR

   `hidden` vale display:none só na folha do navegador, que perde para
   qualquer classe nossa com `display`. Um componente marcado com
   `display: flex` continuava ocupando a tela mesmo escondido — foi assim que
   o menu de celular virou uma camada invisível por cima da página inteira e
   que as sugestões do chat seguiram aparecendo depois de dispensadas.

   Esta regra fecha a porta para todos de uma vez. `until-found` fica de fora
   porque nesse modo o conteúdo precisa continuar no fluxo para o navegador
   achá-lo ao buscar na página.
   ---------------------------------------------------------------------- */
[hidden]:not([hidden='until-found']) { display: none !important; }

/* -------------------------------------------------------------------------
   01. AVATAR
   Imagem do usuário, com recuo para as iniciais quando não há foto ou
   quando ela falha ao carregar.
   ---------------------------------------------------------------------- */
.avt {
  --avt-tam: 40px;
  --avt-fonte: 0.95rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avt-tam);
  height: var(--avt-tam);
  border-radius: 999px;
  overflow: hidden;
  font-weight: 700;
  font-size: var(--avt-fonte);
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
  background: var(--mid);
  color: var(--cream);
}

.avt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.avt__img.is-carregada { opacity: 1; }

.avt__ini { position: relative; z-index: 0; }

.avt__icone { width: 58%; height: 58%; opacity: 0.85; }

/* Tamanhos */
.avt--2xs { --avt-tam: 22px; --avt-fonte: 0.6rem; }
.avt--xs  { --avt-tam: 28px; --avt-fonte: 0.68rem; }
.avt--sm  { --avt-tam: 34px; --avt-fonte: 0.8rem; }
.avt--md  { --avt-tam: 40px; --avt-fonte: 0.95rem; }
.avt--lg  { --avt-tam: 52px; --avt-fonte: 1.1rem; }
.avt--xl  { --avt-tam: 68px; --avt-fonte: 1.5rem; }
.avt--2xl { --avt-tam: 92px; --avt-fonte: 2rem; }
.avt--3xl { --avt-tam: 124px; --avt-fonte: 2.6rem; }

/* Variantes */
.avt--solido  { background: var(--growth); color: var(--deep); }
.avt--suave   { background: rgba(135, 208, 106, 0.18); color: var(--growth); }
.avt--contorno{ background: transparent; color: var(--growth); box-shadow: inset 0 0 0 2px currentColor; }

/* Formas */
.avt--quadrado  { border-radius: 8px; }
.avt--arredondado { border-radius: 14px; }

/* Anel em volta */
.avt--anel { outline: 2px solid var(--growth); outline-offset: 3px; }

/* Selo de status */
.avt__selo {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 2;
  width: 28%;
  height: 28%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 999px;
  background: var(--growth);
  box-shadow: 0 0 0 2px var(--deep);
}
.avt__selo--ausente { background: #C9A227; }
.avt__selo--offline { background: rgba(242, 239, 228, 0.4); }

/* Grupo empilhado */
.avt-grupo { display: inline-flex; align-items: center; }
.avt-grupo .avt {
  box-shadow: 0 0 0 2px var(--deep);
  margin-left: -10px;
}
.avt-grupo .avt:first-child { margin-left: 0; }
/* o primeiro por cima, em vez do último */
.avt-grupo--primeiro-na-frente .avt { position: relative; }
.avt-grupo--primeiro-na-frente .avt:nth-child(1) { z-index: 6; }
.avt-grupo--primeiro-na-frente .avt:nth-child(2) { z-index: 5; }
.avt-grupo--primeiro-na-frente .avt:nth-child(3) { z-index: 4; }
.avt-grupo--primeiro-na-frente .avt:nth-child(4) { z-index: 3; }
.avt-grupo--solto .avt { margin-left: 4px; box-shadow: none; }
.avt-grupo--solto .avt:first-child { margin-left: 0; }

/* Ficha de pessoa: avatar + nome + linha secundária */
.pessoa { display: flex; align-items: center; gap: 14px; }
.pessoa__nome { font-weight: 600; letter-spacing: -0.02em; color: var(--cream); line-height: 1.2; }
.pessoa__sub  { font-size: 0.85rem; color: rgba(242, 239, 228, 0.55); line-height: 1.3; }

/* -------------------------------------------------------------------------
   02. GRUPO DE BOTÕES
   Botões colados, dividindo a borda. Serve como seletor de opção também.
   ---------------------------------------------------------------------- */
.btn-grupo {
  display: inline-flex;
  border: 2px solid rgba(242, 239, 228, 0.22);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.btn-grupo::-webkit-scrollbar { display: none; }

.btn-grupo__item {
  flex: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(242, 239, 228, 0.7);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out);
}
.btn-grupo__item:hover { color: var(--cream); }
.btn-grupo__item.is-ativo,
.btn-grupo__item[aria-selected="true"],
.btn-grupo__item[aria-pressed="true"] {
  background: var(--growth);
  color: var(--deep);
}

/* Sobre fundo creme */
.btn-grupo--claro { border-color: var(--rule); }
.btn-grupo--claro .btn-grupo__item { color: rgba(18, 48, 31, 0.65); }
.btn-grupo--claro .btn-grupo__item:hover { color: var(--deep); }
.btn-grupo--claro .btn-grupo__item.is-ativo,
.btn-grupo--claro .btn-grupo__item[aria-selected="true"] { background: var(--deep); color: var(--cream); }

.btn-grupo--largo { display: flex; width: 100%; }
.btn-grupo--largo .btn-grupo__item { flex: 1; text-align: center; }

/* -------------------------------------------------------------------------
   03. DOCK DE AÇÕES
   Ação principal, secundárias e a de sair — na ordem certa em cada tela.
   ---------------------------------------------------------------------- */
.dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(242, 239, 228, 0.14);
}
.dock__secundarias { display: flex; flex-wrap: wrap; gap: 12px; }
.dock__dispensa { margin-left: auto; }

.btn--terciario {
  background: transparent;
  color: rgba(242, 239, 228, 0.6);
  border-color: transparent;
  padding-inline: 14px;
}
.btn--terciario::before { background: transparent; }
.btn--terciario:hover { color: var(--cream); }

/* No celular a ação principal vem primeiro e ocupa a linha inteira */
@media (max-width: 640px) {
  .dock { flex-direction: column; align-items: stretch; }
  .dock > .btn, .dock__secundarias > .btn { width: 100%; justify-content: center; }
  .dock__secundarias { flex-direction: column; }
  .dock__dispensa { margin-left: 0; order: 9; }
}

/* -------------------------------------------------------------------------
   04. CARROSSEL
   Rolagem com encaixe. Funciona no dedo sem JavaScript; o JS só acrescenta
   setas, marcadores e teclado.
   ---------------------------------------------------------------------- */
.carrossel { position: relative; }

.carrossel__trilho {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* deixa o card sangrar até a borda da tela no celular */
  margin-inline: calc(var(--carr-sangria, 0px) * -1);
  padding-inline: var(--carr-sangria, 0px);
}
.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__item {
  flex: 0 0 auto;
  width: var(--carr-larg, 300px);
  scroll-snap-align: start;
}

.carrossel__controles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.carrossel__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid rgba(242, 239, 228, 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), opacity 0.25s;
}
.carrossel__seta:hover:not(:disabled) { border-color: var(--growth); color: var(--growth); }
.carrossel__seta:disabled { opacity: 0.3; cursor: default; }
.carrossel__seta svg { width: 18px; height: 18px; }

.carrossel__pontos { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 4px; min-width: 0; }
.carrossel__ponto {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(242, 239, 228, 0.25);
  cursor: pointer;
  transition: background-color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.carrossel__ponto.is-ativo { background: var(--growth); transform: scale(1.3); }

.carrossel__contador {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(242, 239, 228, 0.45);
  font-variant-numeric: tabular-nums;
}

/* Carrossel no celular e tablet, grade no desktop.
   Oito cards empilhados é rolagem demais no telefone; em carrossel são
   duas passadas de dedo. No desktop a grade mostra tudo de uma vez. */
.carrossel--vira-grade { --carr-larg: min(78vw, 300px); }
.carrossel--vira-grade .carrossel__item { width: var(--carr-larg); }

@media (min-width: 1024px) {
  .carrossel--vira-grade .carrossel__trilho {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  /* Na grade, a célula já estica até a altura da linha; sem isto o cartão
     dentro dela mantinha a altura do próprio texto e a fileira ficava com as
     bordas desalinhadas — um cartão de título curto terminava 22 px acima do
     vizinho. */
  .carrossel--vira-grade .carrossel__item {
    width: auto;
    display: flex;
  }
  .carrossel--vira-grade .carrossel__item > * { flex: 1 1 auto; }
  .carrossel--vira-grade .carrossel__controles { display: none; }
}

/* Sobre fundo creme */
.carrossel--claro .carrossel__seta { border-color: var(--rule); color: var(--deep); }
.carrossel--claro .carrossel__seta:hover:not(:disabled) { border-color: var(--mid); color: var(--mid-ink); }
.carrossel--claro .carrossel__ponto { background: rgba(18, 48, 31, 0.2); }
.carrossel--claro .carrossel__ponto.is-ativo { background: var(--mid); }
.carrossel--claro .carrossel__contador { color: rgba(18, 48, 31, 0.5); }

/* -------------------------------------------------------------------------
   05. UPLOAD DE ARQUIVO
   ---------------------------------------------------------------------- */
.upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 30px 22px;
  border: 2px dashed rgba(242, 239, 228, 0.28);
  border-radius: 20px;
  background: rgba(15, 31, 20, 0.4);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.upload:hover, .upload:focus-within { border-color: var(--growth); }
.upload.is-arrastando { border-color: var(--growth); background: rgba(135, 208, 106, 0.1); }
.upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.upload__icone { width: 32px; height: 32px; color: var(--growth); }
.upload__titulo { font-weight: 600; letter-spacing: -0.02em; color: var(--cream); }
.upload__dica {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 239, 228, 0.45);
}

.upload-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.upload-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(242, 239, 228, 0.16);
  border-radius: 14px;
  padding: 12px 14px;
}
.upload-item__nome { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item__peso {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(242, 239, 228, 0.45);
  flex: none;
}
.upload-item__x {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: transparent;
  color: rgba(242, 239, 228, 0.5);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.upload-item__x:hover { color: var(--alert); background: rgba(172, 49, 42, 0.15); }
.upload-item--erro { border-color: rgba(172, 49, 42, 0.5); }
.upload-item__erro { font-size: 0.8rem; color: #E08A82; }

/* -------------------------------------------------------------------------
   06. CAMPOS DE FORMULÁRIO — complementos
   ---------------------------------------------------------------------- */
.field__ajuda {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(242, 239, 228, 0.45);
}
.field__erro {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #E08A82;
}
.field__obrig { color: var(--growth); }

.grupo-campos {
  border: 1px solid rgba(242, 239, 228, 0.16);
  border-radius: 20px;
  padding: 22px;
}
.grupo-campos > legend {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--growth);
  padding-inline: 8px;
}

/* Caixa de marcar */
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
/* Escondido dos olhos, mas ainda alcançável pelo Tab. Tamanho zero tira o
   campo da ordem de tabulação no Chrome — por isso 1px com clip. */
.check input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.check__caixa {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 2px solid rgba(242, 239, 228, 0.35);
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.check__caixa svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s var(--ease-out); color: var(--deep); }
.check input:checked + .check__caixa { background: var(--growth); border-color: var(--growth); }
.check input:checked + .check__caixa svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__caixa { outline: 2px solid var(--growth); outline-offset: 3px; }
.check__texto { font-size: 0.92rem; line-height: 1.5; color: rgba(242, 239, 228, 0.75); }

/* Chave liga/desliga */
.chave { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.chave input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.chave__trilho {
  width: 46px; height: 26px;
  border-radius: 999px;
  background: rgba(242, 239, 228, 0.2);
  padding: 3px;
  transition: background-color 0.28s var(--ease-out);
}
.chave__bolinha {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--cream);
  transition: transform 0.28s var(--ease-out);
}
.chave input:checked + .chave__trilho { background: var(--growth); }
.chave input:checked + .chave__trilho .chave__bolinha { transform: translateX(20px); }
.chave input:focus-visible + .chave__trilho { outline: 2px solid var(--growth); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   07. TELAS DE CONTA
   ---------------------------------------------------------------------- */

/* Avatar e nome no cabeçalho */
.conta-topo__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(242, 239, 228, 0.18);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.conta-topo__link:hover { border-color: var(--growth); background: rgba(135, 208, 106, 0.08); }
.conta-topo__nome {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) { .conta-topo__nome { display: none; } }

/* Entrar / criar conta */
.entrar-tela {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 60px;
}
.entrar-caixa {
  width: 100%;
  max-width: 560px;
  border: 1px solid rgba(242, 239, 228, 0.18);
  border-radius: 28px;
  background: rgba(15, 31, 20, 0.72);
  padding: clamp(26px, 4vw, 46px);
}

/* Área da conta */
.conta-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.conta-cabeca__txt { min-width: 0; flex: 1 1 320px; }

.conta-lateral {
  border: 1px solid rgba(242, 239, 228, 0.16);
  border-radius: 26px;
  background: rgba(15, 31, 20, 0.5);
  padding: clamp(22px, 3vw, 30px);
  align-self: start;
}

@media (max-width: 560px) {
  .conta-cabeca { flex-direction: column; align-items: flex-start; }
  .avt--3xl { --avt-tam: 96px; --avt-fonte: 2.1rem; }
}

/* -------------------------------------------------------------------------
   08. MEGA MENU
   Padrão de site de consultoria: o item do menu abre um painel largo com os
   caminhos agrupados e uma linha explicando cada um. Cabe mais navegação sem
   encher a barra de links soltos.
   ---------------------------------------------------------------------- */
.mega { position: relative; }

.mega__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(242, 239, 228, 0.76);
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}
.mega__gatilho:hover,
.mega__gatilho[aria-expanded="true"] { color: var(--cream); }

.mega__seta {
  width: 10px; height: 10px;
  transition: transform 0.3s var(--ease-out);
}
.mega__gatilho[aria-expanded="true"] .mega__seta { transform: rotate(180deg); }

.mega__painel {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--deeper);
  border-top: 1px solid rgba(242, 239, 228, 0.12);
  border-bottom: 1px solid rgba(242, 239, 228, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.mega__painel.is-aberto { opacity: 1; visibility: visible; transform: none; }

.mega__grade {
  margin-inline: auto;
  max-width: 1240px;
  padding: 36px 20px 40px;
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) { .mega__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 32px; } }

.mega__col > p:first-child {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--growth);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(242, 239, 228, 0.14);
}

.mega__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(242, 239, 228, 0.08);
  text-decoration: none;
  transition: padding-left 0.25s var(--ease-out);
}
.mega__link:hover { padding-left: 8px; }
.mega__link:last-child { border-bottom: 0; }
.mega__link strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--cream);
  transition: color 0.2s var(--ease-out);
}
.mega__link:hover strong { color: var(--growth); }
.mega__link span {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(242, 239, 228, 0.55);
}

/* Destaque dentro do painel */
.mega__destaque {
  /* coluna, e não block: os pedaços do cartão (.artigo__*) empilham sozinhos */
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(135, 208, 106, 0.35);
  border-radius: 20px;
  padding: 22px;
  background: rgba(18, 48, 31, 0.6);
  text-decoration: none;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.mega__destaque:hover { border-color: var(--growth); transform: translateY(-3px); }

.mega__fundo {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(4, 18, 10, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.mega__fundo.is-aberto { opacity: 1; visibility: visible; }

/* Grupos no menu do celular */
.mobile-menu__grupo {
  padding: 16px 0 6px;
  border-bottom: 1px solid rgba(242, 239, 228, 0.12);
}
.mobile-menu__grupo > p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--growth);
  margin-bottom: 4px;
}
.mobile-menu__sub {
  display: block;
  padding: 9px 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(242, 239, 228, 0.8);
  text-decoration: none;
}
.mobile-menu__sub:hover { color: var(--growth); }

/* -------------------------------------------------------------------------
   09. BARRA DE PROGRESSO DE LEITURA
   ---------------------------------------------------------------------- */
.progresso {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  height: 3px;
  width: 100%;
  background: transparent;
  pointer-events: none;
}
.progresso__barra {
  height: 100%;
  width: 0;
  background: var(--growth);
  transform-origin: left center;
  transition: width 0.1s linear;
}

/* -------------------------------------------------------------------------
   10. CARTÕES DE CONTEÚDO
   Cartão editorial: rótulo de categoria, título, resumo e tempo de leitura.
   ---------------------------------------------------------------------- */
.artigo {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(242, 239, 228, 0.16);
  border-radius: 24px;
  padding: 26px;
  text-decoration: none;
  background: rgba(15, 31, 20, 0.45);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.artigo:hover { border-color: var(--growth); transform: translateY(-5px); }

.artigo__cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--growth);
}
.artigo__titulo {
  margin-top: 16px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--cream);
}
.artigo__resumo {
  margin-top: 10px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(242, 239, 228, 0.65);
  flex: 1;
}
.artigo__rodape {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 239, 228, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 239, 228, 0.45);
}
.artigo__ir { color: var(--growth); display: inline-flex; align-items: center; gap: 7px; }
.artigo__ir span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform 0.28s var(--ease-out); }
.artigo:hover .artigo__ir span { transform: translateX(4px) scale(1.3); }

/* Destaque editorial: o artigo principal ocupa mais espaço */
.artigo--destaque { border-color: rgba(135, 208, 106, 0.4); background: rgba(18, 48, 31, 0.7); padding: clamp(28px, 4vw, 44px); }
.artigo--destaque .artigo__titulo { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 900; letter-spacing: -0.035em; }
.artigo--destaque .artigo__resumo { font-size: 1.02rem; }

/* Sobre creme */
.artigo--claro { background: transparent; border-color: var(--rule); }
.artigo--claro .artigo__titulo { color: var(--deep); }
.artigo--claro .artigo__resumo { color: rgba(18, 48, 31, 0.68); }
.artigo--claro .artigo__cat { color: var(--mid-ink); }
.artigo--claro .artigo__rodape { border-color: rgba(18, 48, 31, 0.14); color: rgba(18, 48, 31, 0.5); }
.artigo--claro .artigo__ir { color: var(--mid-ink); }
.artigo--claro:hover { border-color: var(--deep); }

/* -------------------------------------------------------------------------
   11. SETOR — bloco de segmento atendido
   ---------------------------------------------------------------------- */
.setor {
  border-top: 1px solid rgba(242, 239, 228, 0.16);
  padding-top: 32px;
  scroll-margin-top: 110px;
}
.setor + .setor { margin-top: 48px; }
.setor__topo { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.setor__n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--growth);
  flex: none;
}
.setor__nome {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--cream);
}
.setor__corpo { margin-top: 18px; display: grid; gap: 26px; }
@media (min-width: 860px) { .setor__corpo { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.setor__linha {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 228, 0.45);
  margin-bottom: 10px;
}

/* =========================================================================
   12. AJUSTE PARA TELA PEQUENA
   -------------------------------------------------------------------------
   Rótulo em IBM Plex Mono com espaçamento largo fica elegante no monitor e
   ilegível no telefone. Aqui todo texto miúdo sobe para um tamanho que se lê
   de braço esticado, e todo alvo de toque chega aos 44px que o dedo pede.
   Vale até 1023px: tablet e celular deitado são segurados na mão igual,
   e o texto ali é tão pequeno quanto no telefone em pé.
   ========================================================================= */
@media (max-width: 1023px) {

  /* ---- Texto miúdo ---- */
  .logo__desc        { font-size: 0.72rem; letter-spacing: 0.16em; }
  .logo--lg .logo__desc { font-size: 0.76rem; letter-spacing: 0.16em; }
  .descriptor        { font-size: 0.78rem; letter-spacing: 0.2em; }
  .label             { font-size: 0.76rem; letter-spacing: 0.14em; }
  .artigo__cat       { font-size: 0.78rem; letter-spacing: 0.2em; }
  .artigo__rodape    { font-size: 0.78rem; letter-spacing: 0.12em; }
  .card__num         { font-size: 0.78rem; letter-spacing: 0.2em; }
  .miniblock__n      { font-size: 0.78rem; letter-spacing: 0.2em; }
  .setor__linha      { font-size: 0.78rem; letter-spacing: 0.18em; }
  .setor__n          { font-size: 0.78rem; }
  .step__num         { font-size: 0.78rem; }
  .faq__n            { font-size: 0.78rem; }
  .gauge__step       { font-size: 0.78rem; letter-spacing: 0.2em; }
  .gauge__pct        { font-size: 0.9rem; }
  .linkcard__u       { font-size: 0.78rem; }
  .crumbs            { font-size: 0.78rem; letter-spacing: 0.12em; }
  .carrossel__contador { font-size: 0.76rem; }
  .rel__espera-sub   { font-size: 0.78rem !important; letter-spacing: 0.12em; }
  .upload__dica      { font-size: 0.78rem; letter-spacing: 0.1em; }
  .tbl th            { font-size: 0.78rem; letter-spacing: 0.12em; }
  .tbl td            { font-size: 0.95rem; }
  .step__tags li     { font-size: 0.78rem; letter-spacing: 0.12em; }
  .mega__col > p:first-child,
  .mobile-menu__grupo > p { font-size: 0.78rem; letter-spacing: 0.2em; }

  /* rótulo de campo: precisa ser lido antes de digitar */
  .field label       { font-size: 0.76rem; letter-spacing: 0.12em; }
  .field__ajuda,
  .field__erro       { font-size: 0.85rem; }
  .field__obrig      { font-size: 1em; }

  /* textos de apoio que o Tailwind deixa em 12px */
  .text-xs           { font-size: 0.82rem; line-height: 1.5; }

  /* ---- Alvos de toque ---- */
  /* Link solto numa célula ou numa lista precisa de área para o dedo.
     Link no meio de uma frase é exceção na própria norma de acessibilidade,
     então esse fica como está para não esticar a entrelinha do texto. */
  .crumbs a,
  .tbl a,
  .linkcard          { display: inline-block; padding-block: 11px; }
  .linkcard          { display: flex; padding-block: 16px; }

  .toclink           { padding-block: 14px; }
  .logo              { padding-block: 4px; }

  /* o marcador do carrossel continua pequeno aos olhos, mas ganha área
     invisível em volta para o dedo acertar */
  .carrossel__pontos { gap: 2px; }
  .carrossel__ponto  {
    width: 40px; height: 40px;
    background: transparent;
    display: grid;
    place-items: center;
  }
  .carrossel__ponto::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(242, 239, 228, 0.25);
    transition: background-color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
  }
  .carrossel__ponto.is-ativo { background: transparent; transform: none; }
  .carrossel__ponto.is-ativo::after { background: var(--growth); transform: scale(1.3); }
  .carrossel--claro .carrossel__ponto::after { background: rgba(18, 48, 31, 0.2); }
  .carrossel--claro .carrossel__ponto.is-ativo::after { background: var(--mid); }

  /* ---- Respiro ---- */
  .rel               { padding: 22px 18px; border-radius: 22px; }
  .rel__passos li    { gap: 6px; }
  .rel__prazo        { min-width: auto; }
  .entrar-caixa      { border-radius: 22px; }
}

/* Telefone bem estreito: o descritor do logo sai de cena para a marca
   não virar um amontoado. */
@media (max-width: 359px) {
  .logo__desc { display: none; }
  .logo__name { font-size: 1.35rem; }
}

/* =========================================================================
   13. PEÇAS DA HOME ENXUTA
   ========================================================================= */

/* Etiquetas de segmento, no lugar da faixa em movimento */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(18, 48, 31, 0.8);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 16px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.chips li:hover { border-color: var(--mid); color: var(--deep); }

/* Alerta de editais em uma faixa só */
.alerta { display: grid; gap: 26px; align-items: end; }
@media (min-width: 1024px) { .alerta { grid-template-columns: 0.9fr 1.35fr; gap: 44px; } }

.alerta__campos { display: grid; gap: 16px; }
@media (min-width: 560px) { .alerta__campos { grid-template-columns: 1.5fr 1.5fr 0.7fr; align-items: end; } }
@media (min-width: 560px) and (max-width: 1023px) { .alerta__botao { grid-column: 1 / -1; justify-content: center; } }
@media (min-width: 1024px) { .alerta__campos { grid-template-columns: 1.4fr 1.3fr 0.6fr auto; } }
.alerta__botao { white-space: nowrap; }
@media (max-width: 559px) { .alerta__botao { width: 100%; justify-content: center; } }
.alerta__aviso { grid-column: 1 / -1; margin-top: 4px; }

/* FAQ sobre fundo creme */
.faq--claro { border-top-color: rgba(18, 48, 31, 0.16); }
.faq--claro .faq__item { border-bottom-color: rgba(18, 48, 31, 0.16); }
.faq--claro .faq__q { color: var(--deep); }
.faq--claro .faq__q:hover { color: var(--mid-ink); }
.faq--claro .faq__n { color: var(--mid-ink); }
.faq--claro .faq__icon { border-color: rgba(18, 48, 31, 0.3); border-top-color: transparent; }
.faq--claro .faq__item.is-open .faq__icon { border-color: var(--mid); border-top-color: transparent; }
.faq--claro .faq__a > p { color: rgba(18, 48, 31, 0.72); }

/* Lista dentro do cartão em destaque: ocupa o vazio com o que interessa,
   em vez de esticar o cartão com espaço morto. */
.artigo__lista {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 22px;
  flex: 1;
}
.artigo__lista > span {
  position: relative;
  padding-left: 28px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: rgba(18, 48, 31, 0.7);
}
.artigo__lista > span::before {
  content: '';
  position: absolute;
  left: 0; top: 0.32em;
  width: 13px; height: 13px;
  border: 2.5px solid var(--mid);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.artigo__lista > span::after {
  content: '';
  position: absolute;
  left: 10px; top: 0.18em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--growth);
}
.artigo--destaque .artigo__resumo { flex: none; }

/* Ícone do FAQ sobre creme: precisa ter contraste para ser visto */
.faq--claro .faq__icon { border-color: rgba(18, 48, 31, 0.5); border-top-color: transparent; }
.faq--claro .faq__q:hover .faq__icon { border-color: var(--mid); border-top-color: transparent; }

/* =========================================================================
   14. ABAS E CONSULTOR EM CONVERSA
   A seção de diagnóstico tem dois caminhos: o formulário, que devolve o
   relatório inteiro de uma vez, e o consultor, que pergunta antes de concluir.
   ========================================================================= */

.abas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(242, 239, 228, 0.16);
}

.abas__btn {
  position: relative;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  background: none;
  color: rgba(242, 239, 228, 0.55);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.28s var(--ease-out);
}
.abas__btn::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px; bottom: -1px;
  height: 2px;
  background: var(--growth);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease-out);
}
.abas__btn:hover { color: var(--cream); }
.abas__btn.is-ativa { color: var(--cream); }
.abas__btn.is-ativa::after { transform: scaleX(1); }
.abas__btn:focus-visible { outline: 2px solid var(--growth); outline-offset: 2px; }

/* ---- Chat ---- */
.chat {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(242, 239, 228, 0.16);
  border-radius: 24px;
  background: rgba(242, 239, 228, 0.03);
  overflow: hidden;
}

.chat__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(242, 239, 228, 0.12);
}

.chat__fluxo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* altura fixa para a conversa rolar dentro da caixa, em vez de esticar a
     seção a cada resposta e empurrar o resto da página para baixo */
  height: clamp(340px, 46vh, 520px);
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 239, 228, 0.25) transparent;
}
.chat__fluxo::-webkit-scrollbar { width: 8px; }
.chat__fluxo::-webkit-scrollbar-thumb {
  background: rgba(242, 239, 228, 0.22);
  border-radius: 999px;
}

.chat__msg { display: flex; }
.chat__msg--pessoa { justify-content: flex-end; }

.chat__balao {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.chat__msg--ia .chat__balao {
  border: 1px solid rgba(242, 239, 228, 0.14);
  border-top-left-radius: 6px;
  background: rgba(242, 239, 228, 0.05);
  color: rgba(242, 239, 228, 0.86);
}
.chat__msg--pessoa .chat__balao {
  border-top-right-radius: 6px;
  background: var(--growth);
  color: var(--deep);
  font-weight: 500;
}

/* Markdown dentro da bolha do consultor */
.chat__balao > :first-child { margin-top: 0; }
.chat__balao > :last-child  { margin-bottom: 0; }
.chat__balao p { margin: 0 0 0.85em; }
.chat__balao h2,
.chat__balao h3,
.chat__balao h4 {
  margin: 1.3em 0 0.5em;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cream);
}
.chat__balao h2 { font-size: 1.1rem; }
.chat__balao h3 { font-size: 1rem; }
.chat__balao h4 { font-size: 0.95rem; }
.chat__balao ul,
.chat__balao ol { margin: 0 0 0.9em; padding-left: 1.25em; }
.chat__balao li { margin-bottom: 0.4em; }
.chat__balao strong { color: var(--cream); font-weight: 700; }
.chat__balao code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(242, 239, 228, 0.1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86em;
}
.chat__balao hr {
  margin: 1.1em 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 228, 0.16);
}

/* Três pontos enquanto o consultor escreve */
.chat__pontos { display: inline-flex; gap: 5px; padding: 3px 0; }
.chat__pontos i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--growth);
  opacity: 0.4;
  animation: chatPonto 1.1s infinite ease-in-out;
}
.chat__pontos i:nth-child(2) { animation-delay: 0.16s; }
.chat__pontos i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chatPonto {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat__pontos i { animation: none; opacity: 0.6; }
}

.chat__cta { display: flex; justify-content: flex-start; padding-top: 4px; }

.chat__sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 16px;
}
.chat__sug {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(242, 239, 228, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 239, 228, 0.72);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.26s var(--ease-out), color 0.26s var(--ease-out);
}
.chat__sug:hover { border-color: var(--growth); color: var(--cream); }
.chat__sug:focus-visible { outline: 2px solid var(--growth); outline-offset: 2px; }

.chat__barra {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid rgba(242, 239, 228, 0.12);
}
.chat__barra textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 11px 14px;
  border: 1px solid rgba(242, 239, 228, 0.18);
  border-radius: 14px;
  background: rgba(242, 239, 228, 0.04);
  color: var(--cream);
  /* 16px: abaixo disso o Safari do iPhone dá zoom ao tocar no campo */
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  transition: border-color 0.26s var(--ease-out);
}
.chat__barra textarea::placeholder { color: rgba(242, 239, 228, 0.35); }
.chat__barra textarea:focus {
  outline: none;
  border-color: var(--growth);
}

.chat__enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--growth);
  color: var(--deep);
  cursor: pointer;
  transition: background-color 0.26s var(--ease-out), opacity 0.26s;
}
.chat__enviar svg { width: 20px; height: 20px; }
.chat__enviar:hover:not(:disabled) { background: var(--light); }
.chat__enviar:disabled { opacity: 0.45; cursor: default; }
.chat__enviar:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.chat__erro { margin: 0 22px 4px; }

.chat__rodape {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(242, 239, 228, 0.42);
}

@media (max-width: 1023px) {
  .chat__balao      { max-width: 92%; font-size: 1rem; }
  .chat__sug        { font-size: 0.92rem; }
  .chat__rodape     { font-size: 0.85rem; }
  .chat__fluxo      { height: clamp(320px, 58vh, 460px); padding: 18px; }
  .chat__sugestoes,
  .chat__barra      { padding-left: 16px; padding-right: 16px; }
  .chat__erro       { margin-left: 16px; margin-right: 16px; }
  .chat__rodape     { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================================
   15. PAINEL DO DIAGNÓSTICO

   Antes isto era um `.form`, visualmente idêntico ao formulário de contato do
   rodapé — duas caixas iguais na mesma página, e a ferramenta de IA não se
   distinguia de um "fale conosco". Agora tem cromo de painel: barra de
   título com estado, corpo em grade e rodapé com a ação separada por filete.
   ========================================================================= */
.painel {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(242, 239, 228, 0.18);
  border-radius: 20px;
  background: rgba(15, 31, 20, 0.55);
  overflow: hidden;
}

.painel__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(242, 239, 228, 0.14);
  background: rgba(242, 239, 228, 0.045);
}

.painel__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid rgba(135, 208, 106, 0.45);
  border-radius: 6px;
  flex: none;
}
.painel__luz {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--growth);
  animation: painelPulso 2.4s infinite ease-in-out;
}
@keyframes painelPulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .painel__luz { animation: none; } }

.painel__titulo {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.painel__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(135, 208, 106, 0.16);
  color: var(--growth);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.painel__estado {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 239, 228, 0.42);
}

.painel__corpo { padding: 26px 22px 24px; }

.painel__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  border-top: 1px solid rgba(242, 239, 228, 0.14);
  background: rgba(242, 239, 228, 0.03);
}

.painel__nota {
  margin: 0;
  max-width: 34ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(242, 239, 228, 0.45);
}

/* Os campos dentro do painel herdam o visual dos campos do site, que já vive
   em `.field`; só o espaçamento muda, porque a caixa agora tem moldura. */
.painel .field label { color: rgba(242, 239, 228, 0.55); }

@media (max-width: 1023px) {
  /* os dois rótulos da barra de título ficavam abaixo de 11,5 px no telefone */
  .painel__tag    { font-size: 0.74rem; letter-spacing: 0.12em; }
  .painel__estado { font-size: 0.74rem; letter-spacing: 0.12em; }
}

@media (max-width: 639px) {
  .painel__corpo  { padding: 20px 16px; }
  .painel__topo,
  .painel__rodape { padding-inline: 16px; }
  .painel__rodape { flex-direction: column; align-items: stretch; }
  .painel__nota   { max-width: none; font-size: 0.85rem; }
  .painel__rodape .btn { width: 100%; justify-content: center; }
}