/* ====================================================================
   NEXOS ENTERPRISE — ESTILOS
   --------------------------------------------------------------------
   ORGANIZAÇÃO DO ARQUIVO:
   1. Cores, fontes e medidas (EDITE AQUI)
   2. Base
   3. Botões
   4. Header
   5. Hero
   6. Quem somos
   7. Missão
   8. Soluções
   9. Projetos
   10. Contato
   11. Rodapé
   12. Responsivo (celular)
   ==================================================================== */


/* ====================================================================
   1. EDITE AQUI: CORES, FONTES E MEDIDAS
   Mudando os valores abaixo, o site inteiro muda junto.
   ==================================================================== */
:root {
  /* --- CORES --- */
  --cor-tinta:      #0B1B2B;   /* azul escuro: textos fortes e fundos escuros */
  --cor-azul:       #1C4E8C;   /* azul de ação: botões e links */
  --cor-azul-forte: #143A69;   /* azul no hover dos botões */
  --cor-destaque:   #E0452B;   /* vermelho-agulha: a ponta norte da bússola. Cor de destaque do site */
  --cor-destaque-texto: #B8361F; /* mesmo vermelho, mais escuro: use quando a cor for em TEXTO pequeno */
  --cor-erro:       #B42318;   /* mensagens de erro (diferente do destaque, para não confundir) */
  --cor-papel:      #FFFFFF;   /* fundo principal */
  --cor-nevoa:      #EDF1F6;   /* fundo das seções alternadas */
  --cor-texto:      #46586C;   /* textos de parágrafo */
  --cor-linha:      #D7DFE8;   /* bordas e divisórias */

  /* --- FONTES --- */
  --fonte: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- MEDIDAS --- */
  --largura-max: 1140px;       /* largura máxima do conteúdo */
  --raio: 10px;                /* arredondamento de cantos */
  --espaco-secao: 110px;       /* espaço vertical entre seções */
}


/* ====================================================================
   2. BASE
   ==================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--fonte);
  color: var(--cor-texto);
  background: var(--cor-papel);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--cor-azul); text-decoration: none; }

h1, h2, h3 { color: var(--cor-tinta); line-height: 1.15; letter-spacing: -0.02em; }

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
h3, .titulo-item { font-size: 1.15rem; font-weight: 700; }

p { max-width: 68ch; }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

.secao { padding: var(--espaco-secao) 0; }
.secao--nevoa { background: var(--cor-nevoa); }

.secao__topo { margin-bottom: 54px; max-width: 620px; }
.secao__topo p { margin-top: 14px; font-size: 1.05rem; }

:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ====================================================================
   3. BOTÕES  —  EDITE AQUI para mudar o formato dos botões
   ==================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.botao--primario {
  background: var(--cor-azul);
  color: #fff;
}
.botao--primario:hover { background: var(--cor-azul-forte); }

.botao--secundario {
  background: transparent;
  color: var(--cor-tinta);
  border-color: var(--cor-linha);
}
.botao--secundario:hover { border-color: var(--cor-tinta); }

.botao--largo { width: 100%; }


/* ====================================================================
   4. HEADER
   ==================================================================== */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.cabecalho.esta-rolado { border-bottom-color: var(--cor-linha); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.marca { display: flex; align-items: center; gap: 11px; }
.marca__simbolo { width: 34px; height: 34px; }
.marca__nome {
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--cor-tinta);
  letter-spacing: -0.02em;
}
.marca__sufixo {
  font-weight: 500;
  color: var(--cor-texto);
  margin-left: 6px;
  font-size: .95rem;
}

.menu { display: flex; align-items: center; gap: 30px; }
.menu a {
  color: var(--cor-tinta);
  font-size: .96rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--cor-destaque); }

.menu__destaque {
  background: var(--cor-tinta);
  color: #fff !important;
  padding: 11px 20px !important;
  border-radius: var(--raio);
  border-bottom: none !important;
}
.menu__destaque:hover { background: var(--cor-azul); }

.menu-botao {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.menu-botao span {
  width: 24px; height: 2px;
  background: var(--cor-tinta);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-botao.esta-aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao.esta-aberto span:nth-child(2) { opacity: 0; }
.menu-botao.esta-aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ====================================================================
   5. HERO
   ==================================================================== */
.hero { padding: 96px 0 104px; overflow: hidden; }

.hero__grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}

.hero__apoio {
  margin-top: 26px;
  font-size: 1.13rem;
  max-width: 52ch;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero__bussola { display: flex; justify-content: center; }
.bussola { width: 100%; max-width: 420px; height: auto; }

.bussola__anel { fill: none; stroke: var(--cor-linha); stroke-width: 1.5; }
.bussola__anel--fino { stroke-dasharray: 3 7; }
.bussola__ticks line { stroke: var(--cor-tinta); stroke-width: 1.5; opacity: .5; }
.bussola__letra {
  fill: var(--cor-tinta);
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 700;
  opacity: .55;
}
.bussola__agulha { transform-origin: 200px 200px; animation: apontar 2.4s cubic-bezier(.2,.9,.2,1) both; }
.bussola__agulha--norte { fill: var(--cor-destaque); }
.bussola__agulha--sul   { fill: var(--cor-tinta); opacity: .18; }
.bussola__centro { fill: var(--cor-papel); stroke: var(--cor-tinta); stroke-width: 2; }

@keyframes apontar {
  0%   { transform: rotate(-128deg); }
  55%  { transform: rotate(22deg); }
  78%  { transform: rotate(-9deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bussola__agulha { animation: none; }
  html { scroll-behavior: auto; }
}


/* ====================================================================
   6. QUEM SOMOS
   ==================================================================== */
.quem__grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.quem__midia img {
  width: 100%;
  border-radius: var(--raio);
  border: 1px solid var(--cor-linha);
}

.quem__texto h2 { margin-bottom: 22px; }
.quem__texto p + p { margin-top: 16px; }


/* ====================================================================
   7. MISSÃO
   ==================================================================== */
.missao {
  background: var(--cor-tinta);
  color: #C6D2DE;
  padding: var(--espaco-secao) 0;
}
.missao__titulo {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  max-width: 18ch;
}
.missao__pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  padding-top: 46px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.pilar h3 { color: #fff; margin-bottom: 10px; }
.pilar p { color: #A9B8C7; font-size: .99rem; }


/* ====================================================================
   8. SOLUÇÕES
   ==================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--cor-papel);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  padding: 32px 28px 30px;
  transition: border-color .18s ease;
}

.card__icone {
  width: 26px; height: 26px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--cor-azul);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3, .card .titulo-item { margin-bottom: 9px; }
.card p { font-size: .97rem; }


/* ====================================================================
   9. PROJETOS
   ==================================================================== */
.projetos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.projeto {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-papel);
  display: flex;
  flex-direction: column;
}
.projeto__imagem { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.projeto__corpo { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.projeto__tag {
  align-self: flex-start;
  font-size: .76rem;
  font-weight: 700;
  color: var(--cor-azul);
  background: var(--cor-nevoa);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.projeto h3, .projeto .titulo-item { margin-bottom: 8px; }
.projeto p { font-size: .96rem; flex: 1; }
.projeto__link {
  margin-top: 18px;
  font-weight: 600;
  font-size: .94rem;
  border-bottom: 2px solid var(--cor-linha);
  align-self: flex-start;
  padding-bottom: 2px;
}
.projeto__link:hover { border-bottom-color: var(--cor-azul); }


/* ====================================================================
   10. CONTATO
   ==================================================================== */
.contato__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.contato__chamada { margin-top: 18px; font-size: 1.08rem; }

.contato__lista { list-style: none; margin-top: 38px; }
.contato__lista li {
  padding: 16px 0;
  border-top: 1px solid var(--cor-linha);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contato__rotulo { font-size: .82rem; color: var(--cor-texto); }
.contato__lista a, .contato__lista span:last-child {
  color: var(--cor-tinta);
  font-weight: 600;
  font-size: 1.02rem;
}

.formulario {
  background: var(--cor-papel);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  padding: 32px;
}
.campo { margin-bottom: 20px; display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: .9rem; font-weight: 600; color: var(--cor-tinta); }
.campo input, .campo textarea, .campo select {
  font: inherit;
  font-size: .98rem;
  color: var(--cor-tinta);
  padding: 12px 14px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  background: var(--cor-papel);
  resize: vertical;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--cor-azul); }

.formulario__aviso {
  margin-top: 14px;
  font-size: .9rem;
  min-height: 1.2em;
  color: var(--cor-azul);
}
.formulario__aviso.e-erro { color: var(--cor-erro); font-weight: 600; }


/* ====================================================================
   11. RODAPÉ
   ==================================================================== */
.rodape { background: var(--cor-tinta); color: #A9B8C7; padding-top: 64px; }

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 44px;
  align-items: start;
  padding-bottom: 44px;
}
.rodape__logo { width: 38px; height: 38px; margin-bottom: 16px; }
.rodape__marca p { font-size: .98rem; max-width: 34ch; }

.rodape__links { display: flex; flex-direction: column; gap: 11px; }
.rodape__links a { color: #C6D2DE; font-size: .96rem; }
.rodape__links a:hover { color: #fff; }

.rodape__redes { display: flex; gap: 12px; }
.rodape__redes a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--raio);
  color: #C6D2DE;
}
.rodape__redes a:hover { border-color: var(--cor-destaque); color: #fff; }
.rodape__redes svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.rodape__base {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 24px;
}
.rodape__base p { font-size: .88rem; color: #7E8FA1; }


/* ====================================================================
   12. RESPONSIVO — CELULAR E TABLET
   ==================================================================== */
@media (max-width: 960px) {
  :root { --espaco-secao: 76px; }

  .menu-botao { display: flex; }

  .menu {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--cor-papel);
    border-bottom: 1px solid var(--cor-linha);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 26px;
    display: none;
  }
  .menu.esta-aberto { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--cor-linha); }
  .menu__destaque { margin-top: 16px; text-align: center; }

  .hero { padding: 56px 0 72px; }
  .hero__grade,
  .quem__grade,
  .contato__grade { grid-template-columns: 1fr; gap: 44px; }

  .hero__bussola { order: -1; }
  .bussola { max-width: 260px; }

  .missao__pilares { grid-template-columns: 1fr; gap: 28px; }
  .cards, .projetos { grid-template-columns: repeat(2, 1fr); }

  .rodape__grade { grid-template-columns: 1fr; gap: 34px; }
  .rodape__links { flex-direction: row; flex-wrap: wrap; gap: 18px; }
}

@media (max-width: 620px) {
  .cards, .projetos { grid-template-columns: 1fr; }
  .hero__acoes .botao { width: 100%; }
  .formulario { padding: 24px 20px; }
}


/* ====================================================================
   13. MOVIMENTO  (funciona junto com js/animacoes.js)
   ==================================================================== */
.vai-aparecer {
  opacity: 0;
  transform: translateY(14px);
  /* EDITE AQUI: 0.5s = duração da entrada */
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.apareceu { opacity: 1; transform: none; }

/* Item do menu na seção onde a pessoa está */
.menu a.esta-ativo { border-bottom-color: var(--cor-destaque); }
.menu__destaque.esta-ativo { border-bottom: none !important; }

@media (prefers-reduced-motion: reduce) {
  .vai-aparecer { opacity: 1; transform: none; transition: none; }
}


/* ====================================================================
   14. RAIO-X  (seção de diagnóstico)
   ==================================================================== */
.raiox {
  /* EDITE AQUI: quantas etapas do trilho ficam dentro do Raio-X */
  --etapas-raiox: 3;
  --etapas-total: 7;
  background: var(--cor-papel);
}

/* --- Abertura: título grande à esquerda, texto à direita --- */
.raiox__topo {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 72px;
}
.raiox__titulo {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: .95;
}
.raiox__chamada {
  font-size: 1.12rem;
  max-width: 56ch;
  padding-bottom: 6px;
}

/* --- Trilho: as sete etapas, com a faixa do Raio-X por cima --- */
.trilho {
  display: grid;
  grid-template-columns: repeat(var(--etapas-total), minmax(0, 1fr));
  row-gap: 18px;
  margin-bottom: 72px;
}

.trilho__faixa {
  grid-row: 1;
  grid-column: 1 / span var(--etapas-raiox);
  position: relative;
  padding-bottom: 16px;
}
/* a barra de destaque que marca o trecho do Raio-X */
.trilho__faixa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--cor-destaque);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.trilho__rotulo {
  font-size: .95rem;
  font-weight: 800;
  color: var(--cor-tinta);
}

/* A lista vira itens da grade do trilho */
.trilho__etapas { display: contents; list-style: none; }

.trilho__etapas li {
  grid-row: 2;
  position: relative;
  padding-top: 26px;
  padding-right: 12px;
  font-weight: 600;
  font-size: .98rem;
  color: var(--cor-texto);
}
/* linha que liga uma etapa à próxima */
.trilho__etapas li::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--cor-linha);
}
.trilho__etapas li:last-child::before { right: auto; width: 12px; }
/* marcador de cada etapa */
.trilho__etapas li::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--cor-papel);
  border: 1.5px solid var(--cor-texto);
}

/* Etapas dentro do Raio-X */
.trilho__etapas li.no-raiox { color: var(--cor-tinta); }
.trilho__etapas li.no-raiox::before { background: var(--cor-destaque); height: 2px; top: 4.5px; }
.trilho__etapas li.no-raiox:has(+ li:not(.no-raiox))::before { background: var(--cor-linha); }
.trilho__etapas li.no-raiox::after {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
}

/* Movimento: a faixa se desenha uma vez quando a seção entra na tela.
   Sem JavaScript ou com "reduzir movimento" ativo, ela já aparece pronta. */
.raiox__grade.vai-aparecer .trilho__faixa::after { transform: scaleX(0); }
.raiox__grade.apareceu .trilho__faixa::after { transform: scaleX(1); transition-delay: .25s; }

/* --- Base: o que analisamos + o que você recebe --- */
.raiox__base {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--cor-linha);
}
.raiox__base h3, .raiox__base .titulo-item { margin-bottom: 20px; }

.raiox__lista {
  list-style: none;
  columns: 2;
  column-gap: 40px;
}
.raiox__lista li {
  break-inside: avoid;
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--cor-linha);
  font-size: .98rem;
}
.raiox__lista li::before {
  content: "";
  position: absolute;
  left: 2px; top: 19px;
  width: 7px; height: 7px;
  border-top: 2px solid var(--cor-destaque);
  border-right: 2px solid var(--cor-destaque);
  transform: rotate(45deg);
}

.raiox__entrega .raiox__nota {
  margin-bottom: 28px;
  font-size: 1.05rem;
  color: var(--cor-tinta);
}

/* --- Tablet e celular: trilho vira vertical --- */
@media (max-width: 960px) {
  .raiox__topo { grid-template-columns: 1fr; margin-bottom: 52px; }

  .trilho {
    grid-template-columns: 26px minmax(0, 1fr);
    row-gap: 0;
    padding-top: 34px;
    margin-bottom: 52px;
  }
  .trilho__faixa {
    grid-column: 1;
    grid-row: 1 / span var(--etapas-raiox);
    padding: 0;
  }
  .trilho__faixa::after {
    left: 4px; right: auto; top: 4px; bottom: 4px;
    width: 3px; height: auto;
    transform-origin: center top;
  }
  .trilho__rotulo {
    position: absolute;
    top: -34px; left: 0;
    white-space: nowrap;
  }
  .raiox__grade.vai-aparecer .trilho__faixa::after { transform: scaleY(0); }
  .raiox__grade.apareceu .trilho__faixa::after { transform: scaleY(1); }

  .trilho__etapas li {
    grid-row: auto;
    grid-column: 2;
    padding: 11px 0 11px 24px;
  }
  .trilho__etapas li::before {
    top: 0; bottom: 0; left: 5px; right: auto;
    width: 1px; height: auto;
  }
  .trilho__etapas li:first-child::before { top: 50%; }
  .trilho__etapas li:last-child::before { bottom: 50%; width: 1px; }
  .trilho__etapas li::after { top: calc(50% - 5.5px); }
  .trilho__etapas li.no-raiox:has(+ li:not(.no-raiox))::before {
    background: linear-gradient(var(--cor-destaque) 50%, var(--cor-linha) 50%);
  }

  .raiox__base { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 620px) {
  .raiox__lista { columns: 1; }
  .raiox__entrega .botao { width: 100%; }
}


/* ====================================================================
   15. INTERAÇÕES  (elevação dos cards, varredura do Raio-X, clique)
   --------------------------------------------------------------------
   Os efeitos de passar o mouse só valem em dispositivos com mouse:
   no celular, o toque dispara "hover" por engano.
   ==================================================================== */
:root {
  /* EDITE AQUI: curva e sombra usadas nas interações */
  --curva-saida: cubic-bezier(.23, 1, .32, 1);
  --curva-movimento: cubic-bezier(.77, 0, .175, 1);
  --sombra-elevada: 0 18px 32px -16px rgba(11, 27, 43, .22),
                    0 2px 6px rgba(11, 27, 43, .05);
}

/* --- Botões: compressão curta ao clicar --- */
.botao {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .14s var(--curva-saida);
}
.botao:active { transform: scale(.97); }

/* --- Cards de solução e de projeto --- */
.card,
.projeto {
  transition: transform .22s var(--curva-saida),
              box-shadow .22s var(--curva-saida),
              border-color .22s ease;
}
/* durante a entrada na tela, vale a transição da seção 13 */
.card.vai-aparecer,
.projeto.vai-aparecer {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.card__icone { transition: stroke .22s ease, transform .22s var(--curva-saida); }
.projeto__imagem { transition: transform .5s var(--curva-saida); }

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .projeto:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-elevada);
    border-color: #C3CFDC;
  }
  .card:hover .card__icone {
    stroke: var(--cor-destaque);
    transform: translateY(-1px);
  }
  .projeto:hover .projeto__imagem { transform: scale(1.035); }
}

/* Teclado: o projeto sobe quando o link dele recebe foco */
.projeto:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-elevada);
}

/* --- Título Raio-X: varredura que revela o "esqueleto" da palavra --- */
@property --varredura {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -25%;
}

.raiox__titulo {
  position: relative;
  justify-self: start;
  cursor: default;
}

/* camada de contorno, visível só dentro da faixa que passa */
.raiox__titulo::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cor-destaque);
  background: var(--cor-papel);
  pointer-events: none;
  clip-path: inset(-15% calc(100% - var(--varredura)) -15% calc(var(--varredura) - 25%));
}

/* linha de leitura na borda da faixa */
.raiox__titulo::before {
  content: "";
  position: absolute;
  top: -6%; bottom: -6%;
  left: var(--varredura);
  width: 2px;
  background: var(--cor-destaque);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

@keyframes raiox-faixa {
  from { --varredura: -25%; }
  to   { --varredura: 125%; }
}
@keyframes raiox-linha {
  0%   { --varredura: -25%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { --varredura: 125%; opacity: 0; }
}

/* EDITE AQUI: 1.1s = duração da varredura */
.raiox__titulo.esta-escaneando::after { animation: raiox-faixa 1.1s var(--curva-movimento); }
.raiox__titulo.esta-escaneando::before { animation: raiox-linha 1.1s var(--curva-movimento); }

@media (hover: hover) and (pointer: fine) {
  .raiox__titulo:hover::after { animation: raiox-faixa 1.1s var(--curva-movimento); }
  .raiox__titulo:hover::before { animation: raiox-linha 1.1s var(--curva-movimento); }
}

/* --- Quem prefere menos movimento: nada se mexe --- */
@media (prefers-reduced-motion: reduce) {
  .card, .projeto, .projeto__imagem, .card__icone, .botao { transition: none; }
  .card:hover, .projeto:hover, .projeto:focus-within,
  .card:hover .card__icone { transform: none; }
  .projeto:hover .projeto__imagem { transform: none; }
  .botao:active { transform: none; }
  .raiox__titulo::before,
  .raiox__titulo::after { animation: none !important; }
}


/* ====================================================================
   16. PÁGINAS SEPARADAS  (menu da página atual e títulos internos)
   ==================================================================== */
/* item do menu da página em que a pessoa está */
.menu a[aria-current="page"] { border-bottom-color: var(--cor-destaque); }
.menu__destaque[aria-current="page"] { background: var(--cor-azul); }

/* título principal das páginas Soluções, Projetos e Contato */
.secao__topo h1,
.contato__info h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
}


/* ====================================================================
   17. EQUIPE  (duas fotos no "Quem somos")
   ==================================================================== */
.equipe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.equipe__pessoa { margin: 0; }

/* a segunda foto desce um pouco: composição menos rígida */
.equipe__pessoa:nth-child(2) { margin-top: 48px; }

.quem__midia .equipe__pessoa img {
  width: 100%;
  /* EDITE AQUI: formato das fotos (4 / 5 = retrato; 1 / 1 = quadrada) */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cor-nevoa);
}

.equipe__pessoa figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}
.equipe__pessoa strong { color: var(--cor-tinta); font-size: 1.02rem; }
.equipe__pessoa span { font-size: .9rem; }

@media (max-width: 620px) {
  .equipe { gap: 14px; }
  .equipe__pessoa:nth-child(2) { margin-top: 28px; }
}


/* ====================================================================
   18. LAPIDAÇÃO DAS PÁGINAS
   ==================================================================== */

/* Hero: título quebra de forma equilibrada, sem <br> */
.hero__titulo {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -0.03em;
  max-width: 17ch;
  text-wrap: balance;
}

/* --- Home: Por onde começar --- */
.caminhos h2 { margin-bottom: 40px; }
.caminhos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.caminho {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 8px 16px;
  padding: 26px 0 8px;
  border-top: 2px solid var(--cor-tinta);
  color: var(--cor-texto);
}
.caminho h3 { grid-column: 1; font-size: 1.3rem; }
.caminho p { grid-column: 1; font-size: .98rem; }
.caminho__seta {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-tinta);
  transition: transform .22s var(--curva-saida), color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .caminho:hover .caminho__seta { transform: translateX(5px); color: var(--cor-destaque); }
  .caminho:hover h3 { color: var(--cor-azul); }
}
.caminho h3 { transition: color .2s ease; }

/* --- Próximo passo (fim de Soluções e Projetos) --- */
.proximo { padding: 0 0 var(--espaco-secao); background: var(--cor-nevoa); }
.proximo--nevoa { padding-top: var(--espaco-secao); }
.proximo__interno {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
  padding-top: 56px;
  border-top: 1px solid var(--cor-linha);
}
.proximo--nevoa .proximo__interno { padding-top: 0; border-top: none; }
.proximo h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 10px; }
.proximo p { max-width: 52ch; }
.proximo__acoes { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* --- Contato: o que acontece depois --- */
.depois {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--cor-linha);
}
.depois__titulo { font-size: 1.1rem; margin-bottom: 16px; }
.depois__etapas {
  list-style: none;
  counter-reset: etapa;
  display: grid;
  gap: 12px;
}
.depois__etapas li {
  counter-increment: etapa;
  position: relative;
  padding-left: 28px;
  color: var(--cor-tinta);
}
.depois__etapas li::before {
  content: counter(etapa);
  position: absolute;
  left: 0; top: 0;
  font-weight: 800;
  color: var(--cor-destaque-texto);
}
.depois__etapas a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .caminhos__lista { grid-template-columns: 1fr; gap: 0; }
  .caminho { padding-bottom: 26px; }
  .proximo__interno { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .proximo__acoes { width: 100%; }
  .proximo__acoes .botao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .caminho__seta { transition: none; }
  .caminho:hover .caminho__seta { transform: none; }
}


/* ====================================================================
   19. PROJETOS — VITRINE VERTICAL
   Um projeto abaixo do outro. Para adicionar projetos, nada muda aqui.
   ==================================================================== */
.vitrine__topo { max-width: 640px; margin-bottom: clamp(72px, 9vw, 112px); }
.vitrine__topo h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing: -0.035em;
}
.vitrine__topo p { margin-top: 16px; font-size: 1.1rem; }

/* EDITE AQUI: espaço entre um projeto e outro */
.vitrine__lista { display: grid; gap: clamp(72px, 9vw, 112px); }

/* cada projeto: texto à esquerda, imagem à direita (sempre do mesmo lado) */
.vitrine__item {
  display: grid;
  /* EDITE AQUI: proporção texto / imagem. Aumente o segundo número para a imagem crescer */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr);
  gap: 32px 64px;
  align-items: start;
  padding-top: 36px;
  border-top: 1px solid var(--cor-linha);
}

.vitrine__cabeca { display: grid; gap: 32px; }

.vitrine__nome {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.vitrine__descricao { margin-top: 16px; font-size: 1.04rem; max-width: 42ch; }

/* ficha técnica: tipo, cliente, situação */
.vitrine__ficha { border-top: 1px solid var(--cor-linha); }
.vitrine__ficha > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cor-linha);
}
.vitrine__ficha > div:last-child { border-bottom: none; }
.vitrine__ficha dt { font-size: .84rem; }
.vitrine__ficha dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--cor-tinta); }

/* imagem do projeto */
.vitrine__midia {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  background: var(--cor-nevoa);
}
.vitrine__midia img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;   /* prints de site: o topo é o que importa */
}

/* Movimento: a imagem se revela de baixo para cima, uma vez.
   O recorte fica na IMAGEM, não na moldura: o navegador só detecta que algo
   entrou na tela se a área dele estiver visível, e a moldura precisa estar.
   Sem JavaScript ou com "reduzir movimento", a imagem já aparece pronta. */
.vitrine__midia.vai-aparecer { opacity: 1; transform: none; }
.vitrine__midia.vai-aparecer img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.04);
  transition: clip-path .8s var(--curva-movimento), transform 1.1s var(--curva-saida);
}
.vitrine__midia.apareceu img { clip-path: inset(0 0 0 0); transform: none; }


/* ====================================================================
   20. CONVITE  (chamada final da página de Projetos)
   ==================================================================== */
.convite {
  background: var(--cor-nevoa);
  padding: clamp(84px, 11vw, 136px) 0;
}
.convite__interno {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px 72px;
}
.convite__titulo {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 13ch;
  text-wrap: balance;
}
.convite__texto { margin-top: 20px; font-size: 1.15rem; }
.convite__botao { flex: none; padding: 17px 34px; font-size: 1rem; }

@media (max-width: 960px) {
  .vitrine__item { grid-template-columns: 1fr; gap: 28px; }
  .vitrine__cabeca { gap: 24px; }
  .convite__interno { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .vitrine__midia img { aspect-ratio: 16 / 11; }
  .convite__botao { width: 100%; }
}

/* ====================================================================
   15. EXTRAS: PULAR CONTEÚDO, WHATSAPP FLUTUANTE, VOLTAR AO TOPO
   ==================================================================== */
.pular-conteudo {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cor-tinta); color: #fff; padding: 10px 16px;
  border-radius: var(--raio); font-weight: 600;
  transition: top .15s ease;
}
.pular-conteudo:focus { top: 12px; }
main:focus { outline: none; }

.flutuantes {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.flutuante {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(11,27,43,.4);
  transition: transform .18s var(--curva-saida, ease), opacity .2s ease;
}
.flutuante:hover { transform: translateY(-2px); }
.flutuante svg { width: 26px; height: 26px; }
.flutuante--whats { background: #25D366; color: #fff; }
.flutuante--topo {
  width: 44px; height: 44px; background: var(--cor-tinta); color: #fff;
  opacity: 0; pointer-events: none;
}
.flutuante--topo.e-visivel { opacity: 1; pointer-events: auto; }
.flutuante--topo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) { .flutuantes { right: 14px; bottom: 14px; } }


/* ====================================================================
   16. HOME: PROCESSO, DESTAQUE DO RAIO-X E FAQ
   ==================================================================== */
.processo {
  list-style: none; display: grid; gap: 28px 24px;
  grid-template-columns: repeat(4, 1fr);
}
.processo__etapa { border-top: 2px solid var(--cor-linha); padding-top: 18px; }
.processo__etapa.no-raiox { border-top-color: var(--cor-destaque); }
.processo__num { font-size: .82rem; font-weight: 700; color: var(--cor-destaque-texto); }
.processo__etapa h3 { margin: 6px 0 6px; font-size: 1.1rem; }
.processo__etapa p { font-size: .95rem; }
.processo__legenda { margin-top: 30px; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.processo__legenda span { width: 28px; height: 2px; background: var(--cor-destaque); display: inline-block; }

.raiox-destaque__grade {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center;
}
.raiox-destaque h2 { margin-bottom: 14px; }
.raiox-destaque p { max-width: 520px; }
.raiox-destaque .hero__acoes { margin-top: 28px; }
.raiox-destaque__cartao {
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  padding: 30px; background: var(--cor-papel);
  box-shadow: 0 18px 32px -20px rgba(11,27,43,.25);
}
.raiox-destaque__cartao h3 { margin-bottom: 18px; }

.faq { max-width: 780px; }
.faq h2 { margin-bottom: 30px; }
.faq__item { border-top: 1px solid var(--cor-linha); }
.faq__item:last-child { border-bottom: 1px solid var(--cor-linha); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0;
  font-weight: 700; color: var(--cor-tinta); position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--cor-azul);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding: 0 36px 22px 0; }

@media (max-width: 960px) {
  .processo { grid-template-columns: repeat(2, 1fr); }
  .raiox-destaque__grade { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .processo { grid-template-columns: 1fr; }
}

.rodape__base a { color: #B9C6D4; text-decoration: underline; text-underline-offset: 3px; }
.rodape__base a:hover { color: #fff; }


/* ====================================================================
   17. SELO "EM DESENVOLVIMENTO" NOS PROJETOS
   ==================================================================== */
.vitrine__midia { position: relative; }
.vitrine__selo {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cor-tinta); color: #fff;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(11,27,43,.5);
}
.vitrine__selo::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-destaque); animation: selo-pulso 1.8s ease-in-out infinite;
}
.vitrine__aviso {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(255,255,255,.92); color: var(--cor-texto);
  font-size: .78rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--cor-linha);
}
@keyframes selo-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vitrine__selo::before { animation: none; } }


/* ====================================================================
   18. TEXTO LEGAL E CAMPO ANTI-ROBÔ
   (antes eram estilos soltos dentro do HTML; aqui permitem a política
   de segurança bloquear estilos inline)
   ==================================================================== */
.armadilha { position: absolute; left: -9999px; }
.texto-legal { max-width: 760px; }
.texto-legal__titulo { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--cor-tinta); }
.texto-legal__data { margin: 18px 0 32px; }
.texto-legal h2 { margin: 28px 0 8px; font-size: 1.25rem; }


/* ====================================================================
   19. FORMULÁRIO COMPLETO
   ==================================================================== */
.campos-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campo select {
  background: var(--cor-papel); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cor-texto) 50%),
                    linear-gradient(135deg, var(--cor-texto) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.obrigatorio { color: var(--cor-destaque-texto); }
.opcional { font-weight: 400; color: var(--cor-texto); font-size: .82rem; }
.consentimento {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .88rem; margin: 4px 0 22px; cursor: pointer;
}
.consentimento input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--cor-azul); }
.consentimento a { color: var(--cor-azul); text-decoration: underline; }
.botao:disabled { opacity: .6; cursor: wait; }
@media (max-width: 600px) { .campos-duplos { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .formulario__aviso { padding-right: 64px; } }