/* Componentes. Laranja só em ação (WhatsApp) e no destaque do título; colchetes só em painéis de dados. */

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--altura-cabecalho);
  background: rgb(10 20 36 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho__interno {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.cabecalho__nome {
  font-family: var(--fonte-titulo);
  font-stretch: 82%;
  font-weight: 700;
  font-size: var(--texto-3);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* alvo de toque de 44 px */
}
.cabecalho__menu { display: none; gap: var(--espaco-5); }
.cabecalho__menu a {
  color: var(--cor-texto-suave);
  font-size: var(--texto-2);
  text-decoration: none;
  padding-block: var(--espaco-2);
  transition: color var(--duracao) var(--curva);
}
.cabecalho__menu a:hover { color: var(--cor-texto); }
@media (min-width: 60rem) {
  .cabecalho__menu { display: flex; }
}

/* ---------- Selo e rótulo ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 0.375rem 0.875rem 0.375rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: rgb(16 32 56 / 0.6);
  color: var(--cor-texto-suave);
  font-size: var(--texto-2);
}
.selo::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-ativo);
  box-shadow: 0 0 0 4px rgb(70 211 154 / 0.16);
}

/* Rótulo de dado: só dentro de painéis, diagramas e linhas do tempo. */
.rotulo-mono {
  font-family: var(--fonte-mono);
  font-size: var(--texto-1);
  font-weight: 500;
  color: var(--cor-texto-suave);
}

/* ---------- Painel de dados com cantos em colchete ---------- */
.painel {
  position: relative;
  padding: var(--espaco-4);
  background-color: rgb(16 32 56 / 0.78);
  border: 1px solid rgb(61 139 255 / 0.22);
  border-radius: var(--raio-1);
  box-shadow: 0 24px 60px -28px rgb(61 139 255 / 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.canto {
  --canto-cor: var(--cor-primaria);
  --canto-tam: 12px;
  --canto-esp: 1.5px;
  background-image:
    linear-gradient(var(--canto-cor), var(--canto-cor)), linear-gradient(var(--canto-cor), var(--canto-cor)),
    linear-gradient(var(--canto-cor), var(--canto-cor)), linear-gradient(var(--canto-cor), var(--canto-cor)),
    linear-gradient(var(--canto-cor), var(--canto-cor)), linear-gradient(var(--canto-cor), var(--canto-cor)),
    linear-gradient(var(--canto-cor), var(--canto-cor)), linear-gradient(var(--canto-cor), var(--canto-cor));
  background-repeat: no-repeat;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size:
    var(--canto-tam) var(--canto-esp), var(--canto-esp) var(--canto-tam),
    var(--canto-tam) var(--canto-esp), var(--canto-esp) var(--canto-tam),
    var(--canto-tam) var(--canto-esp), var(--canto-esp) var(--canto-tam),
    var(--canto-tam) var(--canto-esp), var(--canto-esp) var(--canto-tam);
}
.painel__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}
.painel__valor {
  font-family: var(--fonte-titulo);
  font-stretch: 82%;
  font-weight: 700;
  font-size: var(--texto-4);
}

/* Fluxo vertical dentro de painéis (diagramas dos casos). */
.fluxo { display: grid; gap: var(--espaco-3); padding: 0; margin: 0; list-style: none; }
.fluxo li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  background: var(--cor-fundo);
  font-size: var(--texto-2);
}
.fluxo li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 100%;
  height: var(--espaco-3);
  width: 1px;
  background: var(--cor-primaria);
}
.fluxo .icone { color: var(--cor-primaria); }
.fluxo__destaque { border-color: rgb(61 139 255 / 0.6) !important; background: var(--cor-primaria-suave) !important; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--raio-1);
  font: inherit;
  font-weight: 600;
  font-size: var(--texto-3);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao) var(--curva), border-color var(--duracao) var(--curva),
    color var(--duracao) var(--curva), transform var(--duracao) var(--curva);
}
.botao:active { transform: translateY(1px); }
.botao .icone { width: 1.25rem; height: 1.25rem; }

.botao--whatsapp {
  background-color: var(--cor-acento);
  color: var(--cor-sobre-acento);
}
.botao--whatsapp:hover { background-color: var(--cor-acento-forte); }

/* Botão de WhatsApp dentro de cards: contorno laranja, para não pesar ao lado de outros. */
.botao--whatsapp.botao--linha {
  background-color: transparent;
  border-color: rgb(255 154 77 / 0.55);
  color: var(--cor-acento);
}
.botao--whatsapp.botao--linha:hover { background-color: rgb(255 154 77 / 0.1); border-color: var(--cor-acento); }

.botao--secundario {
  background-color: transparent;
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}
.botao--secundario:hover { border-color: var(--cor-primaria); }

.botao--compacto { min-height: 2.75rem; padding: 0 1rem; font-size: var(--texto-2); }
.botao--largo { width: 100%; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--chip-cor, var(--cor-borda)) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-cor, var(--cor-borda)) 8%, transparent);
  color: var(--cor-texto);
  font-size: var(--texto-2);
  line-height: 1.5;
  white-space: nowrap;
}
.chip--dados { --chip-cor: var(--cor-cat-dados); }
.chip--midia { --chip-cor: var(--cor-cat-midia); }
.chip--dev { --chip-cor: var(--cor-cat-dev); }
.chip--ia { --chip-cor: var(--cor-cat-ia); }

/* ---------- Card de serviço (o problema, nas palavras do cliente) ---------- */
.card-servico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  padding: var(--espaco-6) var(--espaco-5);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
}
.card-servico__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio-2);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}
.card-servico h3 { quotes: '“' '”'; }
.card-servico h3::before { content: open-quote; }
.card-servico h3::after { content: close-quote; }
.card-servico p { color: var(--cor-texto-suave); }
.card-servico .botao { margin-top: auto; align-self: flex-start; }

/* ---------- Caso (linha larga: texto + diagrama) ---------- */
.card-caso {
  display: grid;
  gap: var(--espaco-6);
  padding-block: var(--espaco-7);
  border-top: 1px solid var(--cor-borda);
}
.card-caso__texto { display: grid; gap: var(--espaco-4); align-content: start; }
.card-caso dl { display: grid; gap: var(--espaco-4); margin: 0; }
.card-caso dt { font-weight: 650; color: var(--cor-texto); }
.card-caso dd { margin: var(--espaco-1) 0 0; color: var(--cor-texto-suave); }
.card-caso__decisao {
  padding-left: var(--espaco-4);
  border-left: 2px solid var(--cor-primaria);
}
.card-caso__decisao dd { color: var(--cor-texto); }
.card-caso__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  color: var(--cor-primaria);
  font-weight: 600;
  text-underline-offset: 4px;
}
@media (min-width: 56rem) {
  .card-caso { grid-template-columns: 1.05fr 1fr; gap: var(--espaco-7); align-items: center; }
}

/* ---------- Passos do processo (sequência real: numerados) ---------- */
.passos {
  --progresso: 1;
  position: relative;
  display: grid;
  gap: var(--espaco-6);
  padding: 0 0 0 var(--espaco-7);
  margin: 0;
  list-style: none;
}
.passos::before, .passos::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  transform-origin: top;
}
.passos::before { background: var(--cor-borda); }
.passos::after { background: var(--cor-primaria); transform: scaleY(var(--progresso)); }
.passo { position: relative; display: grid; gap: var(--espaco-2); }
.passo__numero {
  position: absolute;
  left: calc(-1 * var(--espaco-7) + 1.25rem);
  top: 0;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--cor-fundo);
  border: 2px solid var(--cor-primaria);
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-size: var(--texto-1);
  font-weight: 500;
  z-index: 1;
}
.passo p { color: var(--cor-texto-suave); }
@media (min-width: 56rem) {
  .passos { grid-template-columns: repeat(4, 1fr); padding: var(--espaco-7) 0 0; gap: var(--espaco-5); }
  .passos::before, .passos::after { left: 1.125rem; right: 1.125rem; top: 1.125rem; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .passos::after { transform: scaleX(var(--progresso)); }
  .passo__numero { left: 0; top: calc(-1 * var(--espaco-7)); translate: 0 0; }
}

/* ---------- Trajetória ---------- */
.trajetoria { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.item-trajetoria {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--espaco-4);
  padding-bottom: var(--espaco-5);
}
.item-trajetoria::before {
  content: '';
  position: absolute;
  left: calc(3.5rem + var(--espaco-4) / 2);
  top: 0.55rem;
  bottom: -0.35rem;
  width: 1px;
  background: var(--cor-borda);
}
.item-trajetoria:last-child::before { display: none; }
.item-trajetoria__ano { padding-top: 0.15rem; }
.item-trajetoria h3 { font-size: var(--texto-3); font-stretch: 100%; }
.item-trajetoria p { color: var(--cor-texto-suave); font-size: var(--texto-2); }

/* ---------- Perguntas (details/summary, sem JS) ---------- */
.pergunta { border-bottom: 1px solid var(--cor-borda); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: 3.5rem;
  padding-block: var(--espaco-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--texto-3);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--cor-primaria);
  border-bottom: 2px solid var(--cor-primaria);
  rotate: 45deg;
  translate: 0 -25%;
  transition: rotate var(--duracao) var(--curva);
}
.pergunta[open] summary::after { rotate: 225deg; translate: 0 25%; }
.pergunta p { padding-bottom: var(--espaco-5); color: var(--cor-texto-suave); max-width: var(--largura-texto); }

/* ---------- Barra fixa do WhatsApp (celular) ---------- */
.barra-whatsapp {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  height: calc(var(--altura-barra) + env(safe-area-inset-bottom));
  padding: 0.75rem var(--margem-lateral) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgb(7 16 29 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--cor-borda);
}
.barra-whatsapp .botao { width: 100%; height: 100%; }
@media (min-width: 60rem) {
  .barra-whatsapp { display: none; }
}

/* ---------- Banner de consentimento ---------- */
.banner-consentimento {
  position: fixed;
  inset-inline: var(--margem-lateral);
  bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom) + 0.75rem);
  z-index: 50;
  display: grid;
  gap: var(--espaco-3);
  max-width: 26rem;
  padding: var(--espaco-4);
  background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: 0 18px 50px -20px rgb(0 0 0 / 0.6);
  font-size: var(--texto-2);
}
.banner-consentimento p { color: var(--cor-texto-suave); }
.banner-consentimento__acoes { display: flex; gap: var(--espaco-2); }
.banner-consentimento__acoes .botao { flex: 1; }
.botao--aceitar { background-color: var(--cor-primaria); color: var(--cor-fundo-profundo); }
.botao--aceitar:hover { background-color: #6aa6ff; }
@media (min-width: 60rem) {
  .banner-consentimento { inset-inline: var(--espaco-5) auto; bottom: var(--espaco-5); }
}