/* Componentes: botão, cartão, selo, ícone, lista e citação. Estado parado; o movimento mora em motion.css. */

/* Botão */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--toque);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ouro-claro), var(--accent) 60%);
  color: var(--texto-sobre-accent);
  font-weight: 600;
  box-shadow: var(--sombra-sm);
}

.btn-lg {
  min-height: 56px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-lg);
}

.btn-sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

/* Borda em órbita: aqui só o anel de 2px em volta do botão, recortado por máscara.
   A luz que corre nele é o ::before, em motion.css; sem movimento o anel fica vazio. */
.btn-orbita {
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: calc(var(--raio-sm) + 2px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Cartão: padding, borda, raio e sombra por token */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}

.card-titulo {
  font-size: var(--fs-xl);
}

.card-texto {
  color: var(--text-dim);
}

/* Borda no degradê da marca, em todo cartão e caixa da página: 1px, e 2px nos dois destaques
   (painel do hero e oferta do diagnóstico). É um anel recortado por máscara, por cima da borda de
   1px: o fundo translúcido do cartão não deixa usar background-clip, e assim nenhuma medida muda.
   A oferta corta o que passa da caixa, então lá a borda é a de verdade. */
.card,
.painel,
.faq-item {
  position: relative;
}

.card::before,
.painel::before,
.faq-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--degrade-marca);
  pointer-events: none;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.painel::before {
  padding: 2px;
}

/* Borda bem suave em todo cartão e no FAQ. O navegador não desenha menos de 1px em tela comum, então
   o fino vem da transparência do anel. Os destaques de 2px (hero e oferta) não mudam. */
.card::before,
.faq-item::before {
  opacity: 0.3;
}

/* Selo */
.selo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid var(--accent-borda);
  border-radius: var(--raio-full);
  color: var(--accent-hover);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Ícone: tamanho e cor por classe, nunca inline */
.icon {
  display: inline-flex;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
}

.icon-md {
  font-size: 1.25rem;
}

.icon-lg {
  font-size: 1.75rem;
}

.icon-accent {
  color: var(--accent-hover);
}

.icon-success {
  color: var(--success);
}

.icon-danger {
  color: var(--danger);
}

/* Caixa do ícone no topo de um cartão */
.icone-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--accent-soft);
  border: 1px solid var(--accent-borda);
  border-radius: var(--raio);
  color: var(--accent-hover);
}

/* Degradê da marca em texto */
.texto-ouro {
  background: linear-gradient(90deg, var(--ouro-claro), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Peças das seções ---------- */

.icon-accent,
.icon-success,
.icon-danger {
  flex: none;
}

.btn-pulso {
  isolation: isolate;
}

/* Cartão opaco: os que empilham ao rolar não podem deixar ver o de baixo */
.card-solida {
  background: var(--surface-solida);
}

.icone-caixa-alerta {
  background: var(--danger-soft);
  border-color: var(--danger-borda);
  color: var(--danger);
}

/* Sobretítulo de seção: caixa alta só aqui, em rótulo categorial */
.sobretitulo {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* Etiqueta do painel: "ilustrativo" no desenho do hero, "interativo" nos cartões do portfólio */
.rotulo {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
}

/* Ficha: pílula com ícone e nome (faixa de áreas e cartões da solução) */
.ficha,
.faixa-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--fs-sm);
  white-space: nowrap;
  color: var(--text-dim);
}

.ficha .icon,
.faixa-item .icon {
  color: var(--accent-hover);
}

/* Faixa de áreas atendidas. Parada, a lista quebra em linhas; o rolar contínuo mora em motion.css */
.faixa {
  overflow: hidden;
}

.faixa-trilho {
  display: flex;
  justify-content: center;
}

.faixa-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  padding-inline: clamp(16px, 4vw, 24px);
}

.faixa-copia {
  display: none;
}

/* Barra de progresso: a parte cheia desliza dentro do trilho, por transform */
.barra {
  display: block;
  height: 8px;
  overflow: hidden;
  background: var(--surface-forte);
  border-radius: var(--raio-full);
}

.barra-cheia {
  position: relative;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ouro-claro));
  border-radius: inherit;
  transform: translateX(calc((var(--v, 1) - 1) * 100%));
}

.barra-fina {
  flex: 1;
  min-width: 48px;
  height: 4px;
}

.barra-corre {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

/* Quanto de cada barra está cheio */
.v-18 { --v: 0.18; }
.v-28 { --v: 0.28; }
.v-50 { --v: 0.5; }

/* Painel do hero */
.painel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface-solida);
  border: 1px solid var(--accent-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.painel-nome {
  font-weight: 600;
}

.painel-topo .rotulo {
  align-self: center;
}

.painel-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.painel-kpi-rotulo {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.painel-kpi-valor {
  font-family: var(--font-titulo);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.painel-kpi-nota {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--success);
}

.painel-linhas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.painel-linha {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.painel-linha-nome {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
}

.painel-linha-nome .icon {
  color: var(--accent-hover);
}

.painel-linha-valor {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.painel-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.painel-status .icon {
  color: var(--accent-hover);
}

.painel-status-texto {
  white-space: nowrap;
}

/* Problema */
.dor {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
}

.dor-texto {
  font-size: var(--fs-lg);
}

/* Frase de destaque no fim da seção */
.citacao {
  max-width: var(--largura-texto);
  margin-inline: auto;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* Solução: texto de um lado, fichas do outro */
.entrega {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6);
}

.entrega-texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 58ch;
}

.fichas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  max-width: 320px;
}

/* Como funciona: número da etapa e o trecho da trilha até a próxima */
.etapa-numero {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--surface-solida);
  border: 1px solid var(--accent-borda);
  border-radius: var(--raio-full);
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-hover);
}

.etapa:not(:last-child)::before,
.etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: calc(-1 * var(--sp-5));
  left: 23px;
  width: 2px;
}

.etapa:not(:last-child)::before {
  background: var(--borda);
}

.etapa:not(:last-child)::after {
  background: linear-gradient(180deg, var(--accent), var(--ouro-claro));
  transform-origin: top;
}

.etapa-corpo {
  gap: var(--sp-2);
}

/* Portfólio: o cartão inteiro é o link para a página do painel; a capa é um print dele */
.projeto {
  padding: var(--sp-4);
}

.projeto-tipo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-hover);
}

.projeto-capa {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-solida);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.projeto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empurrado para o pé do cartão, para alinhar nos três mesmo com textos de tamanhos diferentes */
.projeto-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-hover);
}

/* Foco: com o mouse (ou o teclado) em um cartão, os irmãos recuam e ele fica nítido.
   Só onde existe mouse: no toque o "hover" gruda no cartão tocado. A transição mora em motion.css. */
@media (hover: hover) {
  .foco:has(.projeto:hover, .projeto:focus-visible) .projeto:not(:hover, :focus-visible) {
    filter: blur(3px);
    opacity: 0.5;
    transform: scale(0.95);
  }
}

/* Página do painel (/portfolio/<slug>): cabeçalho curto e o Power BI incorporado.
   A coluna inteira tem a largura da moldura, e a moldura cabe na tela abaixo da barra: a largura sai
   da altura livre, em 16:9. Em tela baixa não encolhe além de 36rem; em tela estreita, vale a página. */
.dash {
  gap: var(--sp-5);
  width: min(100% - 2 * clamp(16px, 4vw, 24px), var(--largura-larga),
    max(36rem, calc((100vh - var(--topbar-h) - var(--dash-barra) - var(--sp-7)) * 16 / 9)));
}

.dash-cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.dash-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--toque);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
}

.dash-voltar:hover {
  color: var(--text);
}

.dash-titulo {
  font-size: var(--fs-2xl);
  text-wrap: balance;
}

.dash-moldura {
  container-type: inline-size;
}

/* O relatório é 16:9 e o Power BI soma a barra dele embaixo, de altura fixa */
.dash-quadro {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--surface-solida);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

@supports (height: 1cqw) {
  .dash-quadro {
    aspect-ratio: auto;
    height: calc(56.25cqw + var(--dash-barra));
  }
}

/* Listas com marca (para quem é, diagnóstico) */
.lista-marcada {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.marcada {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}

.marcada .icon {
  padding-top: 2px;
}

.card-sim {
  border-color: var(--success-borda);
}

.card-nao {
  border-color: var(--danger-borda);
}

/* Sim e não seguem em verde e vermelho: a cor da borda é o que separa os dois cartões.
   Sem o anel do degradê, vale a borda de 1px do próprio cartão. */
.card-sim::before,
.card-nao::before {
  content: none;
}

/* Oferta do diagnóstico */
.oferta {
  background: linear-gradient(135deg, var(--bg-elev), var(--surface-solida) 70%) padding-box,
    var(--degrade-marca) border-box;
  border: 2px solid transparent;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.oferta-texto .secao-titulo {
  text-align: left;
}

.oferta-luz {
  position: absolute;
  right: -10%;
  bottom: -45%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--accent-brilho), transparent);
  opacity: 0.45;
  pointer-events: none;
}

.oferta-garantia {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* FAQ: a resposta abre e fecha pela linha da grade, de 1fr a 0fr.
   Sem JS fica tudo aberto; com JS (classe js no html) só abre o item com data-aberta="true". */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.faq-titulo {
  font-size: var(--fs-lg);
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  border-radius: var(--raio);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.faq-sinal {
  flex: none;
  color: var(--accent-hover);
}

.faq-resposta {
  display: grid;
  grid-template-rows: 1fr;
}

.faq-resposta-miolo {
  min-height: 0;
  overflow: hidden;
}

.faq-texto {
  max-width: 68ch;
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-dim);
}

.js .faq-item:not([data-aberta="true"]) .faq-resposta {
  grid-template-rows: 0fr;
}

.js .faq-item:not([data-aberta="true"]) .faq-resposta-miolo {
  visibility: hidden;
}

.faq-item[data-aberta="true"] .faq-sinal {
  transform: rotate(45deg);
}

@media (max-width: 720px) {
  .entrega {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }

  .fichas {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .dor-texto {
    font-size: var(--fs-base);
  }

  .etapa-numero {
    width: 40px;
    height: 40px;
  }

  .etapa:not(:last-child)::before,
  .etapa:not(:last-child)::after {
    top: 40px;
    left: 19px;
  }

  .painel-status-texto {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .btn-lg {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-base);
  }
}