@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fontes/schibsted-grotesk-latin.woff2') format('woff2');
}

:root {
  --fundo: #0c131c;
  --sup: #131d29;
  --elev: #1c2a3a;
  --profundo: #070c12;
  --ardosia: #496580;
  --texto: #fff6ee;
  --sec: #a9b8c9;
  --linha: rgb(255 246 238 / .13);
  --pessego: #ffdbbb;
  --pessego-claro: #ffe6cf;
  --pessego-forte: #ffa95c;
  --pessego-txt: #1a1208;
  --pessego-sec: #5a4330;
  --ceu: #baddff;
  --menta: #bafff5;
  --creme: #fff6ee;
  --tinta: #13202e;
  --tinta-sec: #3d4b5c;
  --r-peq: 8px;
  --r-med: 16px;
  --r-vidro: 20px;
  --r-grande: 28px;
  --r-pilula: 999px;
  --sai: cubic-bezier(.16, 1, .3, 1);
  --fonte: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --foco: #bafff5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  scrollbar-color: var(--ardosia) var(--fundo);
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  overflow-x: clip;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--pessego);
  accent-color: var(--pessego);
}

::selection {
  background: var(--pessego);
  color: var(--pessego-txt);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  line-height: 1.6;
}

.nowrap {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

.cap-claro {
  --foco: #13202e;
  color: var(--tinta);
}

.cap-pessego {
  --foco: #13202e;
  background: var(--pessego);
  color: var(--pessego-txt);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.caixa {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .caixa {
    padding: 0 32px;
  }
}

.secao {
  position: relative;
  padding: 64px 0;
}

@media (min-width: 768px) {
  .secao {
    padding: 88px 0;
  }
}

@media (min-width: 960px) {
  .secao {
    padding: 112px 0;
  }
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */

.display {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.grande {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.58;
  color: var(--sec);
  max-width: 58ch;
}

.cap-claro .grande {
  color: var(--tinta-sec);
}

.cap-pessego .grande {
  color: var(--pessego-sec);
}

.peq {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--sec);
}

.cap-pessego .peq {
  color: var(--pessego-sec);
}

/* ==========================================================================
   BOTÕES E ETIQUETAS
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--r-pilula);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  isolation: isolate;
  transition: transform 0.25s var(--sai), opacity 0.25s var(--sai);
}

.btn:active {
  transform: scale(0.98);
}

.btn-pessego {
  background: var(--pessego);
  color: var(--pessego-txt);
}

.btn-sec {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--linha);
}

.btn-sec .seta {
  transition: transform 0.25s var(--sai);
}

@media (hover: hover) and (pointer: fine) {
  .btn-sec:hover .seta {
    transform: translateX(4px);
  }
}

.btn-escuro {
  background: var(--pessego-txt);
  color: var(--pessego);
}

.btn-rotulo {
  position: relative;
  z-index: 2;
}

.btn-bolha {
  position: absolute;
  left: var(--bx, 20%);
  top: var(--by, 50%);
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.7s var(--sai), opacity 0.4s var(--sai);
}

.btn-pessego .btn-bolha {
  background: var(--pessego-claro);
}

.btn-escuro .btn-bolha {
  background: #2f2110;
}

@media (hover: hover) and (pointer: fine) {
  .btn-preenche:hover .btn-bolha,
  .btn-menu:hover .btn-bolha {
    transform: scale(18);
    opacity: 1;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  padding: 5px 12px;
  border-radius: var(--r-peq);
}

.tag-breve {
  background: var(--sup);
  color: var(--sec);
}

.tag-autoral {
  background: var(--sup);
  color: var(--menta);
}

.tag-autoral i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta);
}

/* ==========================================================================
   0. MENU EM CÁPSULA
   ========================================================================== */

.topo-fixo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.menu-wrap {
  padding-top: 8px;
  transition: transform 0.45s var(--sai);
}

@media (min-width: 768px) {
  .menu-wrap {
    padding-top: 10px;
  }
}


.menu-capsula {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 54px;
  padding: 4px 5px 4px 10px;
  background: #1c2a3a;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--r-pilula);
  box-shadow: 0 12px 32px rgb(0 0 0 / .28);
  max-width: 100%;
}

@media (min-width: 768px) {
  .menu-capsula {
    gap: 12px;
    min-height: 68px;
    padding: 6px 8px 6px 20px;
  }
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--r-peq);
  flex: none;
}

.marca img {
  height: 44px;
  width: auto;
}

@media (min-width: 768px) {
  .marca {
    min-height: 56px;
  }

  .marca img {
    height: 56px;
  }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
}

@media (min-width: 960px) {
  .nav-desktop {
    display: flex;
  }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pilula);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sec);
  transition: color 0.2s var(--sai);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--texto);
}

.submenu-wrap {
  position: relative;
}

.ico-seta-menu {
  transition: transform 0.3s var(--sai);
}

.submenu-gatilho[aria-expanded="true"] .ico-seta-menu {
  transform: rotate(180deg);
}

.submenu-painel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 10px;
  background: var(--elev);
  border-radius: 20px;
  box-shadow: 0 20px 44px rgb(0 0 0 / .45);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.3s var(--sai), transform 0.3s var(--sai);
}

.submenu-wrap.aberto .submenu-painel,
.submenu-wrap:focus-within .submenu-painel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .submenu-wrap:hover .submenu-painel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .submenu-wrap:hover .ico-seta-menu {
    transform: rotate(180deg);
  }
}

.submenu-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto);
  transition: background-color 0.2s var(--sai), color 0.2s var(--sai);
}

.submenu-item:hover {
  background: var(--sup);
  color: var(--pessego);
}

.menu-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

@media (min-width: 768px) {
  .menu-acoes {
    gap: 8px;
  }
}

.btn-menu {
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .btn-menu {
    min-height: 48px;
    padding: 0 22px;
    font-size: 15px;
  }
}

/* Menu Mobile (< 960px) */
.menu-mobile {
  position: relative;
}

@media (min-width: 960px) {
  .menu-mobile {
    display: none;
  }
}

.btn-menu-m {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 9px;
  border-radius: var(--r-pilula);
  background: var(--sup);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

@media (min-width: 768px) {
  .btn-menu-m {
    gap: 6px;
    padding: 0 14px;
    font-size: 14px;
  }
}

.btn-menu-m::-webkit-details-marker {
  display: none;
}

.menu-mobile-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 12px;
  background: var(--elev);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgb(0 0 0 / .5);
  display: grid;
  gap: 4px;
}

.menu-mobile-grupo {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linha);
}

.menu-mobile-tit {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pessego);
}

.menu-mobile-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.menu-mobile-sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sec);
  border-radius: var(--r-peq);
}

.menu-mobile-sub a:hover {
  background: var(--sup);
  color: var(--texto);
}

.menu-mobile-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--r-peq);
}

.menu-mobile-link:hover {
  background: var(--sup);
}

.menu-mobile-cta {
  margin-top: 6px;
  width: 100%;
  min-height: 48px;
}

/* ==========================================================================
   1. TOPO COM ÓRBITA (HERO)
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;
  background: var(--fundo);
  padding: 116px 0 56px;
}

@media (min-width: 768px) {
  .hero {
    min-height: 860px;
    display: flex;
    align-items: center;
    padding: 104px 0 56px;
  }
}

.hero-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  width: 100%;
}

@media (min-width: 768px) {
  .hero-grade {
    max-width: 1360px;
    place-items: center;
    min-height: 760px;
  }
}

.hero-centro {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
}

@media (min-width: 960px) {
  .hero-centro {
    max-width: 380px;
  }
}

@media (min-width: 1200px) {
  .hero-centro {
    max-width: 450px;
  }
}

.hero-titulo {
  font-size: clamp(28px, 3.2vw, 44px);
  max-width: 19ch;
}

.hero-texto {
  margin-top: 12px;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  max-width: 42ch;
}

.hero-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.hero-nota {
  margin-top: 10px;
  opacity: 0.85;
}

/* Entrada do topo só em CSS: palavra por palavra, depois texto, botões e nota */
.dest {
  font-style: normal;
  color: var(--pessego-forte);
}

.hero-titulo .pal {
  display: inline-block;
  animation: entra-palavra 0.9s var(--sai) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.hero-texto {
  animation: entra-bloco 0.9s var(--sai) 0.62s both;
}

.hero-botoes {
  animation: entra-bloco 0.9s var(--sai) 0.76s both;
}

.hero-nota {
  animation: entra-bloco 0.9s var(--sai) 0.9s both;
}

@keyframes entra-palavra {
  from {
    opacity: 0;
    transform: translateY(0.55em);
  }
}

@keyframes entra-bloco {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes entra-orbita {
  from {
    opacity: 0;
  }
}

/* No celular (< 768px): faixa horizontal com scroll-snap abaixo dos botões (210×150 px) */
.orbita-palco {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.orbita-anel {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
}

.mini-site {
  flex: 0 0 252px;
  width: 252px;
  height: 180px;
  scroll-snap-align: start;
}

/* Computador / Tablet (>= 768px): 170×122 px em 768–1199 px; 210×150 px em >= 1200 px */
@media (min-width: 768px) {
  .orbita-palco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
  }

  .orbita-anel {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    padding: 0;
  }

  .mini-site {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 122px;
    margin-left: -85px;
    margin-top: -61px;
    pointer-events: auto;
    will-change: transform;
    transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0);
  }

  /* Posições elípticas estáticas (fallback sem JS e com reduzir movimento) */
  .mini-site[data-orbita-item="0"] { --ox: 321px; --oy: 0px; }
  .mini-site[data-orbita-item="1"] { --ox: 247px; --oy: 201px; }
  .mini-site[data-orbita-item="2"] { --ox: 0px; --oy: 262px; }
  .mini-site[data-orbita-item="3"] { --ox: -247px; --oy: 201px; }
  .mini-site[data-orbita-item="4"] { --ox: -321px; --oy: 0px; }
  .mini-site[data-orbita-item="5"] { --ox: -247px; --oy: -201px; }
  .mini-site[data-orbita-item="6"] { --ox: 0px; --oy: -262px; }
  .mini-site[data-orbita-item="7"] { --ox: 247px; --oy: -201px; }
}

@media (min-width: 960px) {
  .mini-site[data-orbita-item="0"] { --ox: 391px; --oy: 0px; }
  .mini-site[data-orbita-item="1"] { --ox: 300px; --oy: 203px; }
  .mini-site[data-orbita-item="2"] { --ox: 0px; --oy: 264px; }
  .mini-site[data-orbita-item="3"] { --ox: -300px; --oy: 203px; }
  .mini-site[data-orbita-item="4"] { --ox: -391px; --oy: 0px; }
  .mini-site[data-orbita-item="5"] { --ox: -300px; --oy: -203px; }
  .mini-site[data-orbita-item="6"] { --ox: 0px; --oy: -264px; }
  .mini-site[data-orbita-item="7"] { --ox: 300px; --oy: -203px; }
}

@media (min-width: 1200px) {
  .mini-site {
    width: 252px;
    height: 180px;
    margin-left: -126px;
    margin-top: -90px;
  }

  .mini-site[data-orbita-item="0"] { --ox: min(550px, calc(50vw - 150px)); --oy: 0px; }
  .mini-site[data-orbita-item="1"] { --ox: 422px; --oy: 250px; }
  .mini-site[data-orbita-item="2"] { --ox: 0px; --oy: 325px; }
  .mini-site[data-orbita-item="3"] { --ox: -422px; --oy: 250px; }
  .mini-site[data-orbita-item="4"] { --ox: max(-550px, calc(-50vw + 150px)); --oy: 0px; }
  .mini-site[data-orbita-item="5"] { --ox: -422px; --oy: -250px; }
  .mini-site[data-orbita-item="6"] { --ox: 0px; --oy: -325px; }
  .mini-site[data-orbita-item="7"] { --ox: 422px; --oy: -250px; }
}

/* Cada cartão da órbita mostra um hero completo (imagem 7:5) */
.mini-site-in {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--elev);
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 14px 32px rgb(0 0 0 / .4);
  transition: transform 0.45s var(--sai), border-color 0.3s var(--sai);
}

.mini-heroi {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .mini-site:hover .mini-site-in {
    transform: scale(1.07);
    border-color: rgb(255 219 187 / .7);
  }
}

@media (min-width: 768px) {
  .orbita-anel {
    animation: entra-orbita 1.6s var(--sai) 0.35s both;
  }
}

/* ==========================================================================
   2. SETORES (FAIXA FINA)
   ========================================================================== */

.setores {
  background: var(--sup);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 22px 0;
  overflow: clip;
  white-space: nowrap;
}

.setores-trilho {
  display: flex;
  width: max-content;
  animation: corre-metade 100s linear infinite;
}

.setores:hover .setores-trilho,
.setores.fora-tela .setores-trilho {
  animation-play-state: paused;
}

.setores-item {
  display: inline-block;
  padding-right: 18px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--sec);
}

@keyframes corre-metade {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   3. SERVIÇOS (GRADE DE VIDRO)
   ========================================================================== */

.servicos-secao {
  overflow: clip;
  background: var(--fundo);
}

.mancha {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.mancha-pessego {
  width: 380px;
  height: 380px;
  background: radial-gradient(closest-side, var(--pessego), rgb(255 219 187 / .5) 40%, transparent);
  left: -40px;
  top: 14%;
}

.mancha-ceu {
  width: 360px;
  height: 360px;
  background: radial-gradient(closest-side, var(--ceu), rgb(186 221 255 / .5) 40%, transparent);
  right: -40px;
  bottom: 8%;
}

@media (min-width: 960px) {
  .mancha-pessego {
    width: 460px;
    height: 460px;
    left: 4%;
  }

  .mancha-ceu {
    width: 420px;
    height: 420px;
    right: 4%;
  }
}

.servicos-conteudo {
  position: relative;
  z-index: 1;
}

.bento-grade {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(216px, auto);
  grid-auto-flow: dense;
  gap: 14px;
}

@media (min-width: 960px) {
  .bento-grade {
    margin-top: 48px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(236px, auto);
    gap: 16px;
  }
}

.bento-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-2x1 {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-1x2 {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-1x1 {
  grid-column: span 1;
  grid-row: span 1;
}

.vidro-cartao {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-vidro);
  background: var(--sup);
  border: 1px solid rgb(255 255 255 / .18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform 0.35s var(--sai), opacity 0.6s var(--sai);
}

.vidro-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--sai);
}

/* Degradê escuro só na metade de baixo por cima da foto */
.vidro-cartao::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgb(7 12 18 / .92) 0%,
    rgb(7 12 18 / .64) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Brilho radial suave que segue o cursor */
.vidro-cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--x, 50%) var(--y, 50%),
    rgb(255 219 187 / .24),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.3s var(--sai);
}

@media (hover: hover) and (pointer: fine) {
  .vidro-cartao:hover {
    transform: translateY(-4px);
  }

  .vidro-cartao:hover .vidro-foto,
  .vidro-cartao:hover .vidro-placa::before {
    transform: scale(1.04);
  }

  .vidro-cartao:hover::before {
    opacity: 1;
  }
}

/* Entrada em cascata (60 ms entre cartões) */
.js .bento-grade:not(.visivel) .vidro-cartao {
  opacity: 0;
  transform: translateY(20px);
}

.js .bento-grade.visivel .vidro-cartao {
  transition-delay: calc(var(--ordem, 0) * 60ms);
}

@media (hover: hover) and (pointer: fine) {
  .js .bento-grade.visivel .vidro-cartao:hover {
    transition-delay: 0ms;
  }
}

/* Placa de vidro na parte de baixo do cartão */
.vidro-placa {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 16px 18px;
  border-top: 1px solid rgb(255 255 255 / .18);
  overflow: hidden;
  isolation: isolate;
}

/* Vidro sem backdrop-filter: a foto já desfocada, do tamanho do cartão e alinhada por baixo (custo zero na rolagem) */
.vidro-placa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--altura-cartao, 100%);
  background: var(--desfoque) center / cover no-repeat;
  z-index: -2;
  transition: transform 0.6s var(--sai);
}

.vidro-placa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(12 19 28 / .6);
  z-index: -1;
}

@media (min-width: 768px) {
  .vidro-placa {
    padding: 18px 22px;
  }
}

.vidro-placa .h3 {
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 700;
  color: var(--texto);
}

.vidro-placa p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
}

@media (min-width: 768px) {
  .vidro-placa p {
    font-size: 15px;
  }
}

/* ==========================================================================
   4. CRESCER JUNTO (FUNDO CÉU)
   ========================================================================== */

.cap-ceu {
  background: var(--ceu);
}

.crescer-cabecalho {
  display: grid;
  gap: 20px;
}

@media (min-width: 960px) {
  .crescer-cabecalho {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: end;
    gap: 48px;
  }
}

.numeros-grade {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}

@media (min-width: 960px) {
  .numeros-grade {
    margin-top: 64px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.numero-bloco {
  position: relative;
  padding-top: 18px;
}

.numero-bloco::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--tinta);
  transform-origin: left center;
}

.js .numeros-grade:not(.visivel) .numero-bloco::before {
  transform: scaleX(0);
}

.js .numeros-grade.visivel .numero-bloco::before {
  transition: transform 1s var(--sai);
}

.js .numeros-grade.visivel .numero-bloco:nth-child(2)::before { transition-delay: 90ms; }
.js .numeros-grade.visivel .numero-bloco:nth-child(3)::before { transition-delay: 180ms; }
.js .numeros-grade.visivel .numero-bloco:nth-child(4)::before { transition-delay: 270ms; }

.odo-visual {
  display: inline-flex;
  align-items: baseline;
}

.numero-valor {
  display: flex;
  align-items: baseline;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--tinta);
}

.numero-legenda {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--tinta-sec);
}

/* Odômetro */
.odo-prefixo {
  white-space: pre;
}

.odo-janela {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  vertical-align: bottom;
}

.odo-fita {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s var(--sai);
}

.odo-fita span {
  display: block;
  height: 1.05em;
  line-height: 1.05;
}

/* ==========================================================================
   6. PROJETOS + TRANSIÇÃO CURVA
   ========================================================================== */

.projetos-secao {
  overflow: clip;
  background: var(--fundo);
  padding-bottom: 0;
}

.projetos-cabecalho {
  display: grid;
  gap: 12px;
}

.projetos-grade {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .projetos-grade {
    margin-top: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 960px) {
  .projetos-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proj-largo {
    grid-column: span 2;
  }

  .proj-estreito {
    grid-column: span 1;
  }
}

.projeto-cartao {
  background: var(--elev);
  border-radius: var(--r-med);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Moldura de navegador fina (28 px com 3 bolinhas) */
.projeto-barra {
  height: 28px;
  padding: 0 14px;
  background: #15212f;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.projeto-barra i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / .24);
}

/* Foto ocupando o cartão inteiro (300 px no celular, 420 px no computador/tablet) */
.projeto-palco {
  position: relative;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

@media (min-width: 768px) {
  .projeto-palco {
    height: 420px;
  }
}

.projeto-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--sai);
}

@media (hover: hover) and (pointer: fine) {
  .projeto-cartao:hover .projeto-foto {
    transform: scale(1.04);
  }
}

/* Degradê escuro atrás da placa para contraste AA garantido */
.projeto-palco::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(
    to top,
    rgb(7 12 18 / .96) 0%,
    rgb(7 12 18 / .82) 52%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Placa compacta embaixo, por cima da foto */
.projeto-placa {
  position: relative;
  z-index: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 960px) {
  .projeto-placa {
    padding: 22px 24px;
  }
}

.projeto-topo-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.projeto-placa .h3 {
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--texto);
}

.projeto-escopo {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.projeto-escopo-rotulo {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgb(255 219 187 / .16);
  color: var(--pessego);
}

.projeto-escopo-texto {
  color: var(--texto);
  font-size: 15px;
  line-height: 1.55;
}

/* No mouse (só computador com JS), a camada de escopo entra de lado em 0,5 s com etiquetas em cascata.
   No toque e sem JS fica sempre visível. */
@media (hover: hover) and (pointer: fine) {
  .js .projeto-cartao .projeto-escopo {
    opacity: 0.78;
    transform: translateX(-12px);
    transition: opacity 0.5s var(--sai), transform 0.5s var(--sai);
  }

  .js .projeto-cartao .projeto-escopo-rotulo {
    transform: translateX(-8px);
    transition: transform 0.5s var(--sai);
  }

  .js .projeto-cartao .projeto-escopo-texto {
    transform: translateX(-10px);
    transition: transform 0.5s var(--sai) 0.06s;
  }

  .js .projeto-cartao:hover .projeto-escopo,
  .js .projeto-cartao:focus-within .projeto-escopo {
    opacity: 1;
    transform: translateX(0);
  }

  .js .projeto-cartao:hover .projeto-escopo-rotulo,
  .js .projeto-cartao:focus-within .projeto-escopo-rotulo,
  .js .projeto-cartao:hover .projeto-escopo-texto,
  .js .projeto-cartao:focus-within .projeto-escopo-texto {
    transform: translateX(0);
  }
}

/* Transição curva para o capítulo menta */
.curva-transicao-wrap {
  margin-top: 64px;
  height: 88px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 960px) {
  .curva-transicao-wrap {
    margin-top: 96px;
    height: 120px;
  }
}

.curva-transicao {
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  transform: scaleY(var(--curva-escala, 1));
  will-change: transform;
}

/* ==========================================================================
   COMO TRABALHAMOS: FLUXOGRAMA QUE SE DESENHA (FUNDO MENTA)
   As linhas são montadas pelo site.js a partir da posição real das caixas.
   Sem JS: as caixas e os losangos aparecem prontos, só sem as linhas.
   ========================================================================== */

.cap-menta {
  background: var(--menta);
}

.fluxo-secao {
  --fluxo-degrau: 48px;
  padding-top: 48px;
}

@media (min-width: 960px) {
  .fluxo-secao {
    padding-top: 64px;
  }
}

.fluxo-cabecalho .grande {
  margin-top: 18px;
  max-width: 40ch;
}

.fluxo {
  position: relative;
  margin-top: 40px;
}

.fluxo-linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fluxo-linhas path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fluxo-linhas .fluxo-seta {
  opacity: 0;
  transition: opacity 0.25s var(--sai);
}

.fluxo-linhas .fluxo-seta.ativo {
  opacity: 1;
}

/* Ponta da caneta: acompanha a linha enquanto ela é desenhada */
.fluxo-ponta {
  fill: var(--tinta);
  opacity: 0;
  transition: opacity 0.2s linear;
}

.fluxo-lista {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  list-style: none;
}

.fluxo-passo {
  display: flex;
  flex-direction: column;
}

/* Caixa do passo */
.fluxo-no {
  position: relative;
  padding: 24px 22px 26px;
  border-radius: 20px;
  background: rgb(255 255 255 / .52);
}

.fluxo-contorno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fluxo-contorno rect {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.fluxo-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--menta);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.fluxo-no .h3 {
  margin-top: 16px;
  color: var(--tinta);
}

.fluxo-principio {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tinta);
}

.fluxo-texto {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-sec);
}

/* Portão de aprovação entre dois passos: losango + frase.
   No celular fica na vertical, alinhado ao centro do número (22 + 22 = 44 px). */
.fluxo-porta {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding-left: 30px;
}

.fluxo-losango {
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--menta);
  transform: rotate(45deg);
}

.fluxo-losango svg {
  display: block;
  transform: rotate(-45deg);
}

.fluxo-porta-txt,
.fluxo-ciclo {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta);
}

/* Depois do passo 4 a linha faz uma volta e retorna à caixa: o trabalho continua */
.fluxo-ciclo {
  margin-top: 62px;
  padding-left: 22px;
  max-width: 30ch;
}

/* Telas médias: título fixo à esquerda, fluxo descendo à direita */
@media (min-width: 860px) and (max-width: 1199px) {
  .fluxo-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .fluxo-cabecalho {
    position: sticky;
    top: 128px;
  }

  .fluxo {
    margin-top: 0;
  }
}

/* Computador: quatro caixas em degraus, ligadas por curvas */
@media (min-width: 1200px) {
  .fluxo {
    margin-top: 56px;
  }

  .fluxo-lista {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }

  .fluxo-passo {
    flex: 1 1 0;
    flex-direction: row;
    align-items: flex-start;
    min-width: 0;
  }

  /* os três primeiros levam o portão (108 px) junto: assim as quatro caixas ficam iguais */
  .fluxo-passo:not(:last-child) {
    flex-basis: 108px;
  }

  .fluxo-passo:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  .fluxo-no {
    flex: 1 1 0;
    min-width: 0;
    padding: 22px 18px 24px;
    min-height: 308px;
  }

  .fluxo-no .h3 {
    font-size: 22px;
  }

  .fluxo-passo:nth-child(even) .fluxo-no {
    margin-top: var(--fluxo-degrau);
  }

  /* o losango fica no meio da curva: centro do número (22 + 22) + meio degrau - meio losango */
  .fluxo-porta {
    flex: 0 0 108px;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 0 6px;
    margin-top: calc(44px + var(--fluxo-degrau) / 2 - 14px);
    text-align: center;
  }

  .fluxo-porta-txt {
    margin-top: calc(var(--fluxo-degrau) / 2 + 12px);
    font-size: 13px;
    max-width: 11ch;
  }
}

/* Estados de entrada (só com JS): a caixa surge, o contorno se desenha, o conteúdo sobe em sequência */
.js .fluxo-no {
  transition: opacity 0.35s linear;
}

.js .fluxo-contorno rect {
  transition: stroke-dashoffset 1s var(--sai);
}

.js .fluxo-no > :not(.fluxo-contorno) {
  transition: opacity 0.6s var(--sai), transform 0.7s var(--sai);
}

.js .fluxo-no > .fluxo-num { transition-delay: 0.1s; }
.js .fluxo-no > .h3 { transition-delay: 0.2s; }
.js .fluxo-no > .fluxo-principio { transition-delay: 0.28s; }
.js .fluxo-no > .fluxo-texto { transition-delay: 0.36s; }

.js .fluxo-no:not(.ativo) {
  opacity: 0;
}

.js .fluxo-no:not(.ativo) .fluxo-contorno rect {
  stroke-dashoffset: 1;
}

.js .fluxo-no:not(.ativo) > :not(.fluxo-contorno) {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}

.js .fluxo-no:not(.ativo) > .fluxo-num {
  transform: scale(0.5);
}

.js .fluxo-losango {
  transition: opacity 0.3s linear, transform 0.6s var(--sai);
}

.js .fluxo-porta-txt,
.js .fluxo-ciclo {
  transition: opacity 0.5s var(--sai) 0.12s, transform 0.6s var(--sai) 0.12s;
}

.js .fluxo-porta:not(.ativo) .fluxo-losango {
  opacity: 0;
  transform: rotate(45deg) scale(0.3);
}

.js .fluxo-porta:not(.ativo) .fluxo-porta-txt,
.js .fluxo-ciclo:not(.ativo) {
  opacity: 0;
  transform: translateY(8px);
}

@media (hover: hover) and (pointer: fine) {
  .fluxo-no.ativo,
  html:not(.js) .fluxo-no {
    transition: background-color 0.3s var(--sai), opacity 0.35s linear;
  }

  .fluxo-no:hover {
    background: rgb(255 255 255 / .82);
  }
}

/* ==========================================================================
   9. SER ENCONTRADO (FUNDO CREME)
   ========================================================================== */

.cap-creme {
  background: var(--creme);
}

.encontrado-grade {
  display: grid;
  gap: 36px;
}

@media (min-width: 960px) {
  .encontrado-grade {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 56px;
  }
}

.encontrado-texto .grande {
  margin-top: 20px;
}

.encontrado-palco {
  position: relative;
  display: grid;
  gap: 16px;
}

.encontrado-foto-wrap {
  border-radius: 24px;
  overflow: hidden;
  max-height: 320px;
}

.encontrado-foto {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.encontrado-visual {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .encontrado-palco {
    display: block;
    padding-bottom: 24px;
  }

  .encontrado-foto-wrap {
    width: 74%;
    max-height: 460px;
    margin-left: auto;
    box-shadow: 0 20px 44px rgb(19 32 46 / .14);
  }

  .encontrado-foto {
    max-height: 460px;
    aspect-ratio: 4 / 5;
  }

  .encontrado-visual {
    margin-top: -250px;
    max-width: 430px;
  }
}

.busca-camada {
  border-radius: var(--r-med);
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid rgb(19 32 46 / .12);
  box-shadow: 0 12px 28px rgb(19 32 46 / .1);
}

.busca-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}

.busca-ico {
  color: var(--ardosia);
}

.busca-resultado {
  display: flex;
  align-items: center;
  gap: 12px;
}

.busca-pino {
  width: 24px;
  height: 24px;
  color: var(--tinta);
  display: grid;
  place-items: center;
  flex: none;
}

.busca-resultado-txt strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--tinta);
}

.busca-ia {
  background: var(--tinta);
  color: var(--texto);
  border-color: var(--tinta);
}

.busca-ia p {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

/* As 3 camadas se montam em sequência ao aparecer (opacity + translateY, 150 ms entre elas) */
.js .encontrado-visual:not(.visivel) .busca-camada {
  opacity: 0;
  transform: translateY(16px);
}

.js .encontrado-visual.visivel .busca-camada {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--sai), transform 0.6s var(--sai);
}

.js .encontrado-visual.visivel .busca-camada:nth-child(1) {
  transition-delay: 0ms;
}

.js .encontrado-visual.visivel .busca-camada:nth-child(2) {
  transition-delay: 150ms;
}

.js .encontrado-visual.visivel .busca-camada:nth-child(3) {
  transition-delay: 300ms;
}

/* ==========================================================================
   10. QUEM ESTÁ POR TRÁS
   ========================================================================== */

.quem-secao {
  background: var(--sup);
}

.quem-conteudo {
  max-width: 820px;
  margin: 0;
}

@media (min-width: 768px) {
  .quem-conteudo {
    margin: 0 auto;
  }
}

.quem-texto {
  margin-top: 20px;
  color: var(--texto);
}

.assinatura-wrap {
  margin-top: 32px;
  width: min(420px, 100%);
}

.assinatura-img {
  width: 420px;
  max-width: 100%;
  height: auto;
}

.js .assinatura-wrap:not(.visivel) .assinatura-img {
  clip-path: inset(0 100% 0 0);
}

.js .assinatura-wrap.visivel .assinatura-img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s var(--sai);
}

/* ==========================================================================
   11. PERGUNTAS (FUNDO #070c12)
   ========================================================================== */

.faq-secao {
  background: var(--profundo);
  padding: 64px 0;
}

@media (min-width: 960px) {
  .faq-secao {
    padding: 96px 0;
  }
}

.faq-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 960px) {
  .faq-grade {
    grid-template-columns: 38fr 62fr;
    gap: 56px;
    align-items: start;
  }

  .faq-cabecalho {
    position: sticky;
    top: 120px;
  }
}

.faq-lista {
  width: 100%;
  border-top: 1px solid var(--linha);
}

.faq-item {
  border-bottom: 1px solid var(--linha);
}

.faq-pergunta {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

.faq-item:first-child .faq-pergunta {
  padding-top: 16px;
}

.faq-pergunta::-webkit-details-marker {
  display: none;
}

.faq-sinal {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--pessego);
  transition: transform 0.6s var(--sai);
}

.faq-sinal::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-sinal::after {
  transform: rotate(0deg);
}

.faq-corpo-in p {
  padding-bottom: 20px;
  color: var(--sec);
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  animation: abre-faq 0.6s var(--sai);
}

@keyframes abre-faq {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   12. CHAMADA FINAL (FUNDO PÊSSEGO + FOTO)
   ========================================================================== */

.cta-secao {
  position: relative;
  overflow: clip;
  padding: 72px 0;
}

@media (min-width: 960px) {
  .cta-secao {
    padding: 112px 0;
  }
}

.cta-foto-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cta-camada-pessego {
  position: absolute;
  inset: 0;
  background: rgb(255 219 187 / .88);
  z-index: 1;
}

.cta-grade {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
}

@media (min-width: 960px) {
  .cta-grade {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: end;
    gap: 48px;
  }
}

.cta-titulo {
  max-width: 16ch;
  color: #1a1208;
}

.cta-sub {
  margin-top: 20px;
  color: #2f2010;
}

.cta-horario {
  color: #2f2010;
}

.cta-acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (min-width: 960px) {
  .cta-acao {
    align-items: flex-end;
  }
}

/* ==========================================================================
   13. RODAPÉ
   ========================================================================== */

.rodape {
  background: var(--fundo);
  border-top: 1px solid var(--linha);
  padding: 56px 0 48px;
}

.rodape-grade {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .rodape-grade {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.rodape-logo-link {
  display: inline-block;
}

.rodape-logo-link img {
  height: 96px;
  width: auto;
}

.rodape-local {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sec);
}

.rodape-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.rodape-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sec);
}

.rodape-nav a:hover {
  color: var(--texto);
}

.rodape-base {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sec);
}

/* ==========================================================================
   REDUZIR MOVIMENTO (PREFERS-REDUCED-MOTION)
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .hero-centro,
  .js .bento-grade:not(.visivel) .vidro-cartao,
  .js .encontrado-visual:not(.visivel) .busca-camada,
  .js .projeto-cartao .projeto-escopo,
  .js .projeto-cartao .projeto-escopo-rotulo,
  .js .projeto-cartao .projeto-escopo-texto {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .assinatura-wrap:not(.visivel) .assinatura-img {
    clip-path: inset(0 0 0 0) !important;
  }
}

/* ==========================================================================
   REVISÃO DE 12/11/2026: barra de leitura, entradas, agentes de IA e acabamentos
   ========================================================================== */

/* Barra de leitura no alto da página */
.progresso-leitura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.progresso-leitura i {
  display: block;
  height: 100%;
  background: var(--pessego);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Menu: destaque para os agentes de IA */
.nav-ia::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--menta);
  flex: none;
}

.nav-opc {
  display: none;
}

@media (min-width: 1100px) {
  .nav-opc {
    display: inline-flex;
  }
}

.submenu-destaque {
  grid-column: 1 / -1;
  background: rgb(186 255 245 / .08);
  color: var(--menta);
}

.submenu-destaque:hover {
  background: rgb(186 255 245 / .16);
  color: var(--menta);
}

.menu-mobile-ia {
  color: var(--menta);
}

/* Entrada dos blocos ao rolar (uma vez só) */
.js [data-revela] {
  opacity: 0;
  transform: translateY(26px);
}

.js [data-revela].visivel {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--sai), transform 0.9s var(--sai);
}

/* Serviços: cabeçalho em duas colunas */
.servicos-cabecalho {
  display: grid;
  gap: 16px;
}

@media (min-width: 960px) {
  .servicos-cabecalho {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 48px;
  }
}

/* Ser encontrado: a busca de exemplo digita e troca de setor */
.encontrado-texto .h2 {
  font-size: clamp(34px, 5vw, 64px);
}

/* Dado do estudo: a parte mais quente do texto, com marca-texto pêssego atrás do número */
.encontrado-dado {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  color: var(--tinta);
}

.encontrado-dado-num {
  position: relative;
  z-index: 0;
  flex: none;
  font-size: clamp(64px, 7.4vw, 96px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.encontrado-dado-num::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -6px;
  right: -8px;
  bottom: 2px;
  height: 46%;
  border-radius: 6px;
  background: var(--pessego);
  transform-origin: left center;
}

.js .encontrado-texto .encontrado-dado-num::before {
  transform: scaleX(0);
}

.js .encontrado-texto.visivel .encontrado-dado-num::before {
  transform: none;
  transition: transform 0.9s var(--sai) 0.45s;
}

.encontrado-dado-txt {
  max-width: 30ch;
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 479px) {
  .encontrado-dado {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.encontrado-nota {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--tinta-sec);
}

.busca-caixa {
  min-height: 58px;
}

.busca-texto.digitando::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--tinta);
  animation: pisca 0.9s steps(2, jump-none) infinite;
}

@keyframes pisca {
  to {
    opacity: 0;
  }
}

.js .encontrado-visual.visivel .busca-camada.troca {
  opacity: 0;
  transform: translateY(10px);
  transition-duration: 0.35s;
  transition-delay: 0ms;
}

/* --------------------------------------------------------------------------
   AGENTES DE IA
   -------------------------------------------------------------------------- */

.agentes-secao {
  overflow: clip;
  background: var(--profundo);
}

/* Aura menta no alto: menta é a cor de "ligado" do sistema */
.agentes-aura {
  position: absolute;
  left: 50%;
  top: -260px;
  width: min(1200px, 150vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(186 255 245 / .17), transparent);
  pointer-events: none;
}

.agentes-conteudo {
  position: relative;
}

.agentes-cabecalho {
  display: grid;
  gap: 20px;
}

.agentes-cabecalho .h2 {
  max-width: 15ch;
}

@media (min-width: 960px) {
  .agentes-cabecalho {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 56px;
  }
}

.agentes-console {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 960px) {
  .agentes-console {
    margin-top: 64px;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 20px;
  }
}

.agentes-abas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px;
  margin: -3px;
}

.agentes-abas::-webkit-scrollbar {
  display: none;
}

@media (min-width: 960px) {
  .agentes-abas {
    flex-direction: column;
    overflow: visible;
  }
}

.agente-aba {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--sup);
  color: var(--sec);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  transition: background-color 0.3s var(--sai), color 0.3s var(--sai);
}

@media (min-width: 960px) {
  .agente-aba {
    min-height: 66px;
    padding: 0 22px;
    font-size: 18px;
  }
}

.agente-aba:hover {
  color: var(--texto);
}

.agente-aba[aria-selected="true"] {
  background: var(--elev);
  color: var(--texto);
}

.agente-aba[aria-selected="true"] .ico {
  color: var(--menta);
}

/* Linha menta embaixo da aba ativa; no modo automático ela mostra o tempo até a próxima */
.agente-aba::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--menta);
  transform-origin: left center;
  transform: scaleX(0);
}

.agente-aba[aria-selected="true"]::after {
  transform: scaleX(1);
}

.agentes-console.auto .agente-aba[aria-selected="true"]::after {
  animation: aba-tempo 6.5s linear both;
}

@keyframes aba-tempo {
  from {
    transform: scaleX(0);
  }
}

.agentes-tela {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 20px;
  border-radius: 24px;
  background: var(--sup);
  border: 1px solid var(--linha);
}

@media (min-width: 768px) {
  .agentes-tela {
    min-height: 470px;
    padding: 28px 32px 30px;
  }
}

.agentes-tela-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.pulso {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--menta);
  flex: none;
}

.pulso::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--menta);
  animation: pulso 2.2s var(--sai) infinite;
}

.agentes-secao.fora-tela .pulso::after {
  animation-play-state: paused;
}

@keyframes pulso {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

.agentes-status {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto);
}

.tag-demo {
  margin-left: auto;
  background: transparent;
  border: 1px dashed rgb(255 246 238 / .35);
  color: var(--sec);
}

.agente-painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 22px;
}

.agente-painel[hidden] {
  display: none;
}

.agente-painel .h3 {
  max-width: 24ch;
}

.agente-tarefas {
  margin-top: 14px;
}

.agente-tarefa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linha);
  font-size: clamp(16px, 1.45vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--texto);
}

.agente-check {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(186 255 245 / .14);
  color: var(--menta);
}

.agente-ganho {
  margin-top: auto;
  padding-top: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--pessego);
}

.agente-ganho strong {
  font-weight: 800;
}

/* As tarefas entram uma a uma, e o visto "carimba" logo depois */
.js .agente-painel .agente-tarefa,
.js .agente-painel .agente-ganho {
  opacity: 0;
  transform: translateY(12px);
}

.js .agente-painel.rodando .agente-tarefa,
.js .agente-painel.rodando .agente-ganho {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--sai), transform 0.55s var(--sai);
  transition-delay: calc(var(--i, 0) * 420ms + 150ms);
}

.js .agente-painel .agente-check svg {
  transform: scale(0);
}

.js .agente-painel.rodando .agente-check svg {
  transform: scale(1);
  transition: transform 0.45s var(--sai);
  transition-delay: calc(var(--i, 0) * 420ms + 420ms);
}

/* Três compromissos, separados por linhas (sem cartões) */
.agentes-pilares {
  margin-top: 48px;
  display: grid;
  border-top: 1px solid var(--linha);
}

.agentes-pilares li {
  padding: 22px 0;
  border-bottom: 1px solid var(--linha);
}

.agentes-pilares strong {
  display: block;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.agentes-pilares span {
  display: block;
  margin-top: 8px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sec);
}

@media (min-width: 768px) {
  .agentes-pilares {
    margin-top: 64px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agentes-pilares li {
    padding: 28px 28px 4px 0;
    border-bottom: 0;
  }

  .agentes-pilares li + li {
    padding-left: 28px;
    border-left: 1px solid var(--linha);
  }
}

.agentes-cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.agentes-cta .peq {
  max-width: 40ch;
}

/* Perguntas: abre e fecha com altura animada onde o navegador permite */
@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.5s var(--sai), content-visibility 0.5s allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* Chamada final: botão maior */
.btn-grande {
  min-height: 60px;
  padding: 0 30px;
  font-size: 17px;
}

/* Rodapé */
.rodape-lema {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--texto);
}

.rodape-lema + .rodape-local {
  margin-top: 6px;
}

/* Reduzir movimento: tudo no estado final */
@media (prefers-reduced-motion: reduce) {
  .js [data-revela],
  .js .agente-painel .agente-tarefa,
  .js .agente-painel .agente-ganho,
  .js .agente-painel .agente-check svg {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .numeros-grade:not(.visivel) .numero-bloco::before,
  .js .encontrado-texto .encontrado-dado-num::before {
    transform: none !important;
  }
}