/* =========================================================
   THARSSYS AMOM — Landing Page
   Fase 1: estrutura das seções (layout base, sem acabamento)
   ========================================================= */

/* DM Sans — arquivos locais (pasta fonts/, licença OFL), só os pesos usados */
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-200-italic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-300.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-300-italic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-400-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-600-italic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-700-italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Cores — GUIDELINES.png */
  --white: #ffffff;
  --black: #000000;
  --black-soft: #151515;
  --ink: #1c1f24;
  --lime: #dde676;
  --olive: #656c12;
  --gray-3e: #3e3e3e;
  --gray-46: #464646;
  --gray-4b: #4b494a;
  --gray-5d: #5d5d5d;
  --gray-68: #686868;
  --gray-87: #878787;
  --grad-brand: linear-gradient(90deg, var(--olive), var(--lime));

  /* Aliases usados no layout */
  --bg: var(--ink);
  --bg-deep: var(--ink);
  --bg-footer: #3a3c42;
  --surface: var(--ink);
  --gray: var(--gray-87);
  --text: var(--white);
  --text-soft: var(--white);
  --text-muted: var(--gray-87);
  --line: rgba(255, 255, 255, .18);

  /* Tipografia — DM Sans em tudo */
  --font: "DM Sans", system-ui, sans-serif;
  --fs-title: 48px;     /* títulos: maiúscula, semibold */
  --fs-subtitle: 24px;  /* subtítulos: regular */
  --fs-button: 16px;
  --fs-tag: 16px;       /* tags das seções */
  --fs-footer: 14px;    /* tags do footer */

  /* Grid — no layout de 1920px o conteúdo vai de 300px a 1620px */
  --container: 1320px;
  --gutter: 24px;
  --section-y: clamp(80px, 9vw, 160px);
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* Transição entre páginas: entra com fade, sai com fade (js/page-transition.js).
   Só opacidade — transform no body quebraria o menu fixo. */
body { animation: page-in .7s cubic-bezier(.22, .61, .36, 1) both; }
body.is-leaving { animation: page-out .35s ease forwards; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving { animation: none; }
}
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ---------- Estrutura ---------- */
.section { position: relative; padding-block: var(--section-y); }
.ph {
  display: grid; place-items: center; text-align: center;
  min-height: 120px; padding: 12px;
  border: 1px dashed rgba(212, 228, 106, .45);
  background: rgba(255, 255, 255, .04);
  color: var(--text-muted); font-size: 13px;
  border-radius: 14px;
}

/* ---------- Componentes base ---------- */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--lime);
  border-radius: 999px;
  color: var(--lime);
  font-size: var(--fs-tag);
}
.eyebrow { color: var(--lime); font-size: var(--fs-tag); text-transform: uppercase; }

.section-head { display: grid; gap: 16px; margin-bottom: 64px; max-width: 980px; }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.section-title {
  font-size: clamp(32px, 2.5vw, var(--fs-title));
  font-weight: 500; line-height: 1.05; letter-spacing: -.01em; /* medium (um abaixo do semibold do guia, a pedido) */
  text-transform: uppercase;
}
.section-title--left { text-align: left; }
.section-title--mixed { text-transform: none; letter-spacing: -.03em; }
/* Subtítulo dos conjuntos tag + título + subtítulo (da seção Cases em diante): light e 75% de
   opacidade, para ficar um degrau abaixo do título (era regular 400 e 100%) */
.section-lead { color: var(--white); font-size: clamp(18px, 1.25vw, var(--fs-subtitle)); font-weight: 300; opacity: .75; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 8px;
  font-weight: 600; font-size: var(--fs-button);
  border: 1px solid transparent;
}
.btn--primary { background: var(--grad-brand); color: var(--white); border-color: var(--lime); }
.btn--ghost { border-color: var(--white); color: var(--white); }
.btn--outline { border-color: var(--lime); color: var(--lime); }
/* Contorno → no hover ganha o mesmo gradiente do "Entrar em contato" (entra em fade) */
.btn.btn--outline { position: relative; isolation: isolate; overflow: hidden; transition: color .35s ease, box-shadow .35s ease, transform .35s ease; }
.btn--outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand); opacity: 0; transition: opacity .35s ease;
}
.btn--outline:hover, .btn--outline:focus-visible { color: var(--white); }
.btn--outline:hover::before, .btn--outline:focus-visible::before { opacity: 1; }
.btn--sm { padding: 8px 24px; font-size: 14px; }

/* Brilho verde-claro (#DDE676) atrás do botão ao passar o mouse */
.btn { transition: box-shadow .35s ease, transform .35s ease; }
.btn:hover, .btn:focus-visible {
  box-shadow:
    0 0 14px rgba(221, 230, 118, .55),
    0 0 36px rgba(221, 230, 118, .32),
    0 0 70px rgba(221, 230, 118, .14);
  transform: translateY(-1px);
}
.btn:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: box-shadow .35s ease; } .btn:hover { transform: none; } }

/* ---------- Header ---------- */
/* Barra do menu: cantos arredondados (36px no SITE.jpg) e borda fina
   que fica mais forte em cima à esquerda e embaixo à direita */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-radius: 36px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(46, 47, 51, .35);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .75) 0%,
    rgba(255, 255, 255, .45) 30%,
    rgba(255, 255, 255, .45) 70%,
    rgba(255, 255, 255, .8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.nav { display: flex; justify-content: space-between; align-items: center; height: 78px; }
.nav__links { display: flex; gap: 50px; font-size: 14px; }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--lime); }

/* Botão de menu (só aparece em telas menores) — 3 traços que viram um X */
.nav__toggle {
  display: none; position: relative;
  width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; cursor: pointer; color: var(--white);
}
.nav__toggle span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform .3s ease, opacity .2s;
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.site-header.is-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 8px; }
/* Botões de idioma — no SITE.jpg: 65×30px, bandeira redonda de 20px */
.nav__lang { display: flex; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 5px 0 11px;
  font: 400 16px/1 var(--font); color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.lang:hover { border-color: var(--lime); }
.lang:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lang.is-active {
  background: rgba(101, 108, 18, .4); /* #656C12 a 40% */
  border-color: var(--lime);
}
.lang__flag { width: 20px; height: 20px; border-radius: 50%; flex: none; display: block; }

/* ---------- 01 Hero ---------- */
/* S1 · 151515 · 464646 · 1C1F24 · 656C12→DDE676 · FFFFFF */
/* No SITE.jpg (1920px) a área do Hero vai até y=987, onde começa a faixa.
   Medidas horizontais em % da largura e verticais em vw (1px do layout = 100vw/1920). */
.hero { padding: 0; display: flex; flex-direction: column; background: var(--gray-3e); }
.hero__main { position: relative; height: max(51.4vw, 620px); overflow: hidden; }

/* Camadas da foto: fundo do Figma → recorte nítido → degradê.
   Fundo e recorte ficam numa moldura com a proporção exata do render (1920×987),
   então continuam alinhados em qualquer largura de tela. */
.hero__visual {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; aspect-ratio: 1920 / 987;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Ondulação das camadas do espelho (js/hero-ripple.js) — aparece por cima da imagem parada */
.hero__ripple { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.hero__ripple.is-on { opacity: 1; }
/* Recorte — cabeça em y=120px e rosto centrado em x≈975px no layout de 1920 */
.hero__person { position: absolute; left: 35.5%; top: 12.16%; width: 34.4%; height: auto; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(62, 62, 62, 0) 48%,
    rgba(62, 62, 62, .7) 66%,
    rgba(62, 62, 62, .95) 80%,
    var(--gray-3e) 88%);
}

/* Cards em arco (medidas do SITE.jpg: 247×147px cada, centros em --x/--y no layout de 1920).
   Mesma moldura do fundo, então acompanham a foto em qualquer largura. */
.hero__cards {
  position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; aspect-ratio: 1920 / 987; pointer-events: none;
}
.hero__card {
  position: absolute;
  left: calc(var(--x) / 1920 * 100%);
  top: calc(var(--y) / 987 * 100%);
  width: calc(247 / 1920 * 100%);
  aspect-ratio: 247 / 147;
  min-height: 0;
  z-index: var(--z);
  transform: translate(-50%, -50%) rotate(var(--r));
  border-radius: 8px;
  overflow: hidden;
  background: rgba(28, 31, 36, .55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  font-size: 12px;
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cada lado é uma roda que gira sozinha em loop (js/hero-cards.js) */
.hero__wheel { position: absolute; inset: 0; }
.hero__wheel .hero__card { will-change: transform, opacity; }
/* Os cards de baixo vão apagando no escuro, como no layout */
.hero__card--dim { opacity: .72; }
.hero__card--hidden { opacity: 0; }
.hero__card--fade {
  opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 95%);
}
.hero__content {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 4.5vw;
  display: grid; justify-items: center; gap: 20px; text-align: center;
}
/* Texto do Hero como no SITE.jpg: headline em 2 linhas, subtítulo em 3 */
.hero__title { font-size: clamp(32px, 2.5vw, var(--fs-title)); font-weight: 600; line-height: 1.04; text-transform: uppercase; }
.hero__lead { font-size: clamp(18px, 1.25vw, var(--fs-subtitle)); font-weight: 400; line-height: 1.04; margin-top: -10px; }
.hero__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hero__actions .btn { padding: 13px 26px; gap: 10px; font-weight: 600; }
.btn__icon { width: 20px; height: 20px; flex: none; }
.hero__note { font-style: italic; font-weight: 300; color: var(--white); font-size: 16px; margin-top: -6px; }
/* No Windows o navegador desenha texto claro sobre fundo escuro mais grosso que o Figma
   (ClearType). Ali usamos um peso abaixo para o resultado visual ficar igual ao layout. */
.is-win .hero__lead { font-weight: 300; }
.is-win .hero__actions .btn { font-weight: 500; }
.is-win .hero__note { font-weight: 200; }
/* Quebras de linha que só valem em telas largas */
@media (max-width: 767px) { .br-lg { display: none; } }
/* Faixa como o frame do Figma: padding de 32px em cima/embaixo e texto em 18px.
   Vira um letreiro que passa da direita para a esquerda, em loop. */
.hero__strip {
  background: var(--gray-46); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.strip-marquee { display: flex; width: max-content; animation: strip-scroll 60s linear infinite; }
.hero__strip:hover .strip-marquee { animation-play-state: paused; }
.strip {
  display: flex; align-items: center; flex: none;
  padding: 32px 0; font-size: 18px; line-height: 1.3; color: var(--white); white-space: nowrap;
}
/* espaçamento do SITE.jpg: ~70px entre a palavra e o ✓ */
.strip li { display: flex; align-items: center; }
.strip li::after { content: "✓"; margin: 0 70px; color: var(--white); }
@keyframes strip-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-marquee { animation: none; } }

/* ---------- 02 Cases ---------- */
/* S2 · 656C12 · DDE676 · 1C1F24→3E3E3E · FFFFFF */
/* Título em 2 linhas com letras bem justas, como no SITE.jpg — a 1ª linha bate na largura do subtítulo */
.cases .section-head { max-width: 1000px; }
.cases .section-lead { max-width: 980px; } /* mantém a quebra do subtítulo como estava */
.cases__title { letter-spacing: -0.06em; }
.cases {
  background:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 100% / 36px 36px, /* ancorada embaixo: emenda com os pontinhos da seção 3 */
    linear-gradient(var(--ink), var(--gray-3e));
}
/* Carrossel de cases — medidas do SITE.jpg: imagem 968×533 + card 342×533, 2px entre eles.
   Só as imagens deslizam; o card fica parado e troca o conteúdo com um fade. */
.cases__slider {
  display: grid; grid-template-columns: 968fr 342fr; gap: 2px;
  --media: calc(968 / 1312 * 100%);
}
.cases__media {
  position: relative; overflow: hidden; aspect-ratio: 968 / 533;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .28);
  background: #111; touch-action: pan-y;
}
.cases__track { display: flex; height: 100%; transition: transform .7s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.case__media { flex: 0 0 100%; height: 100%; margin: 0; }
.case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Card de informações: os 5 ficam empilhados no mesmo lugar; só o ativo aparece */
.cases__info { display: grid; background: #1f2024; border-radius: 16px; overflow: hidden; }
.case__info {
  grid-area: 1 / 1;
  display: grid; align-content: center; justify-items: start; gap: 16px;
  padding: 40px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
.case__info.is-active {
  opacity: 1; visibility: visible; transform: none;
  /* o novo conteúdo entra logo depois do anterior sumir */
  transition: opacity .4s ease .28s, transform .4s ease .28s, visibility 0s;
}

/* Setas sobre a imagem: voltar (esquerda) e avançar (direita) */
.cases__arrow {
  position: absolute; z-index: 2; top: 50%;
  width: 48px; height: 72px; margin-top: -36px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, .55);
  transition: color .25s, transform .25s, filter .25s;
}
.cases__arrow--prev { left: 16px; }
.cases__arrow--next { right: 16px; }
.cases__arrow svg { width: 22px; height: 44px; }
.cases__arrow:hover, .cases__arrow:focus-visible {
  color: var(--lime);
  filter: drop-shadow(0 0 10px rgba(221, 230, 118, .6));
}
.cases__arrow--prev:hover, .cases__arrow--prev:focus-visible { transform: translateX(-3px); }
.cases__arrow--next:hover, .cases__arrow--next:focus-visible { transform: translateX(3px); }
.cases__arrow:focus-visible { outline: none; }
/* Card do case (guideline): número 14 / segmento 12 / título 32 / descrição 16 / botão 14 / palavras-chave 14 */
.case__index { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); font-size: 14px; }
.case__segment { font-size: 12px; }
.case__name { font-size: 32px; font-weight: 600; text-transform: uppercase; }
.case__desc { font-size: 16px; color: var(--white); }
.case__info .btn--sm { font-size: 14px; }
.case__services { font-size: 14px; color: var(--white); }
/* Bolinhas: pílula escura centralizada embaixo da imagem */
.cases__dots {
  grid-column: 1; justify-self: center;
  display: flex; gap: 6px; margin-top: 26px;
  padding: 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1);
}
.cases__dots button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: var(--gray); cursor: pointer; transition: background .3s, transform .3s;
}
.cases__dots button:hover { background: var(--lime); }
.cases__dots button[aria-selected="true"] { background: #fff; transform: scale(1.15); }

/* ---------- 03 No que eu acredito ---------- */
/* S3 · 656C12 · DDE676 · 4B494A · FFFFFF */
/* A seção é mais alta que a tela (--belief-step por passo) e o painel fica preso (sticky).
   js/belief.js troca o passo a cada rolagem; no toque/celular o passo segue a posição do scroll. */
.belief {
  --belief-step: 60vh; --belief-moves: 3;
  --pin-top: min(var(--section-y), 16vh); /* topo do conteúdo = padrão entre seções (160px em 1920) */
  position: relative; height: calc(100vh + var(--belief-moves) * var(--belief-step)); background: #4B494A;
}
.belief__pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: flex-start; padding-top: var(--pin-top);
  background: #4B494A;
}
/* Pontinhos da seção 2 continuando (a grade da seção 2 é ancorada embaixo, então emenda aqui) */
.belief__pin::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 36px 36px;
  -webkit-mask-image: linear-gradient(#000 0, #000 12%, transparent 45%);
  mask-image: linear-gradient(#000 0, #000 12%, transparent 45%);
}
/* Linha fina na divisa das seções 2 e 3: o mesmo espaço (--section-y) acima e abaixo dela */
.belief__pin::after {
  content: ""; position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--container), 100% - var(--gutter) * 2); height: 1px; background: var(--line);
}
/* Anel cromado: a imagem original, só ampliada (sem distorcer) e recortada como no Figma.
   No layout de 1920 ela tem 3272×1826, começa 512px acima dos cards e 706px à esquerda da tela.
   O elemento começa no topo do painel (a parte de cima fica sob o overlay da seção 2) e desce
   além dele, por trás do cabeçalho de Entregas (seção 4) — seções 2, 3 e 4 viram um fundo só. */
.belief__bg {
  --ring-y: calc(var(--pin-top) - 26.67vw);           /* topo da imagem em relação ao painel (negativo) */
  position: absolute; z-index: 0; left: 0; top: 0; width: 100%;
  /* +600px de #4B494A sólido depois da imagem: passa por baixo da faixa da seção 4 e não deixa vão
     (antes aparecia uma linha escura do fundo da página na borda da faixa) */
  height: calc(95.1vw + var(--ring-y) + 600px); overflow: hidden; /* corta o que ficaria por cima da seção 2 */
  background: url(../img/acredito/fundo-anel.webp) left -36.77vw top var(--ring-y) / 170.42vw auto no-repeat #4B494A;
  pointer-events: none;
}
/* Overlay de transição: em cima é a mesma cor com que a seção 2 termina (#3E3E3E) e vai se
   dissolvendo sobre o anel; embaixo fecha no #4B494A (cor da seção 3/4). Percentuais da imagem. */
.belief__bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--ring-y); height: calc(95.1vw + 6px); /* +6px cobre a última linha da imagem (arredondamento) */
  background:
    linear-gradient(#3E3E3E 0, #3E3E3E 28.9%, rgba(62, 62, 62, .9) 34.5%, rgba(62, 62, 62, .23) 50.4%, rgba(62, 62, 62, 0) 58.6%),
    linear-gradient(rgba(75, 73, 74, 0) 74%, rgba(75, 73, 74, .14) 78.9%, rgba(75, 73, 74, .62) 89.9%, #4B494A 98%);
}
.belief__pin > .container { position: relative; z-index: 2; }
.belief__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(718px, 56%); column-gap: 48px; align-items: start; padding-right: 34px; }

/* Textos: os 3 no mesmo lugar; o ativo aparece, o que sai some subindo */
.belief__text { display: grid; max-width: 470px; }
.belief__slide:first-child .belief__title { max-width: 400px; } /* quebra como no layout: O PROBLEMA / NÃO CABE NUM / BRIEFING. */
.belief__text p { max-width: 420px; }
.belief__slide {
  grid-area: 1 / 1; display: grid; gap: 14px; align-content: start;
  opacity: 0; transform: translateY(28px); visibility: hidden;
  transition: opacity .55s ease, transform .7s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .7s;
}
.belief__slide.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: .25s, .25s, 0s; }
.belief__slide.is-leaving { transform: translateY(-28px); }
/* Título e subtítulo no padrão do GUIDELINES (mesmos de .section-title e .section-lead):
   título maiúsculo semibold 48px · subtítulo regular 24px */
.belief__text p { color: var(--white); font-size: clamp(18px, 1.25vw, var(--fs-subtitle)); font-weight: 300; opacity: .75; line-height: 1.1; } /* mesmo padrão do .section-lead */
.belief__arrow { grid-area: 2 / 1; width: 46px; height: 66px; margin-top: 30px; animation: belief-float 2.4s ease-in-out infinite; }
/* Seta flutuando de leve: convida a rolar */
@keyframes belief-float {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: .75; }
}

/* Cards: 3 posições (slot 0 = grande, 1 = médio, 2 = fino); a troca anima left/width */
.belief__gallery { position: relative; aspect-ratio: 718 / 626; }
.belief__card {
  position: absolute; top: 0; bottom: 0; margin: 0; overflow: hidden;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35); background: #222;
  transition: left .9s cubic-bezier(.65, 0, .35, 1), width .9s cubic-bezier(.65, 0, .35, 1), border-color .6s;
}
.belief__card img { width: 100%; height: 100%; object-fit: cover; }
.belief__card[data-slot="0"] { left: 0; width: 67.13%; z-index: 2; border-color: rgba(221, 230, 118, .55); }
.belief__card[data-slot="1"] { left: 68.52%; width: 18.11%; z-index: 2; }
.belief__card[data-slot="2"] { left: 88.02%; width: 11.98%; z-index: 1; }
.belief__card.is-back { z-index: 0; } /* o que sai do grande passa por trás dos outros */
/* Degradê verde só no card grande; véu claro nos finos */
.belief__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease;
  background: linear-gradient(rgba(101, 108, 18, 0) 62%, rgba(101, 108, 18, .95) 100%);
  opacity: 0;
}
.belief__card[data-slot="0"]::after { opacity: 1; }
.belief__card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, .14); transition: opacity .6s ease;
}
.belief__card[data-slot="0"]::before { opacity: 0; }
.belief__num {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85); background: rgba(20, 20, 20, .25);
  font-size: 18px; color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  .belief__slide, .belief__card, .belief__card::after, .belief__card::before { transition: none; }
  .belief__arrow { animation: none; }
}
@media (max-width: 900px) {
  .belief { --belief-step: 70vh; --pin-top: 110px; }
  .belief__pin::after { display: none; }
  .belief__grid { grid-template-columns: 1fr; row-gap: 28px; padding-right: 0; }
  .belief__text { max-width: none; }
  .belief__arrow { display: none; }
  .belief__gallery { width: 100%; max-height: 52vh; aspect-ratio: 718 / 560; justify-self: center; }
  .belief__num { width: 36px; height: 36px; font-size: 14px; top: 8px; right: 8px; }
}

/* ---------- 04 Entregas ---------- */
/* S4 · 656C12 · DDE676 · 000000 · FFFFFF */
/* O cabeçalho fica sobre o fim do anel (fundo transparente: o anel vem do painel da seção 3);
   a partir da faixa ESTRATÉGIA / DESIGN o fundo é próprio */
/* Posição presa ao anel (não à altura da janela), medida no SITE.jpg em relação ao topo da imagem
   do anel: tag em 1360px e faixa da foto em 1806px (layout 1920). O painel da seção 3 termina em
   100vh; o topo do anel fica em (--pin-top − 26.67vw) → tag = --pin-top + 44.17vw a partir do painel. */
.deliveries {
  position: relative; z-index: 1; background: transparent; padding-top: 0; padding-bottom: 0;
  /* max(): em telas mais estreitas o texto nunca encosta nos cards da seção 3 (cards + 48px) */
  margin-top: max(
    calc(min(var(--section-y), 16vh) + 44.17vw - 100vh),
    calc(min(var(--section-y), 16vh) + min(718px, .56 * min(var(--container), 100vw - 48px)) * .8719 + 48px - 100vh)
  );
}
.deliveries .section-head { gap: 12px; margin-bottom: 0; padding-bottom: 0; max-width: 900px; height: 23.23vw; align-content: start; } /* tag → faixa = 446px em 1920 */
.deliveries .section-lead { max-width: 830px; }
.deliveries .tag { padding: 2px 12px; font-size: 14px; }
/* Faixa e caixa dos 3 itens na mesma célula do grid: a caixa começa sempre abaixo do queixo
   (420px da borda em 1920 = 21.875u) e, se o texto não couber, a faixa cresce para baixo —
   assim a caixa nunca sobe no rosto em notebook/tablet. */
.deliveries__stage { position: relative; display: grid; }
.deliveries__visual, .deliveries__box { grid-area: 1 / 1; }
/* Faixa com a foto: medidas do SITE.jpg em "u" (1u = 1/100 da largura do layout de 1920 = 19,2px).
   Faixa de 840px (43.75u); a foto inteira cobre a faixa (a imagem tem 51.5u, sobra embaixo se ela
   precisar crescer); o recorte (alinhado pixel a pixel com a foto inteira) sobe 181px acima dela. */
.deliveries__visual { --u: 1vw; --shift: 0px; position: relative; min-height: calc(43.75 * var(--u)); }
/* Fundo pronto do Figma (1920×840) já com ESTRA/TÉGIA, DES/IGN e a linha POINT A → B embutidos */
.deliveries__bg {
  position: absolute; inset: 0; overflow: hidden;
  background: url(../img/entregas/plano-fundo-s4.webp) var(--shift) 0 / calc(100 * var(--u)) auto no-repeat, #7d7a7e;
}
/* Recorte inteiro por cima do fundo (efeito de profundidade: a cabeça sai da faixa e a pessoa fica
   na frente da linha POINT A → B). Alinhado com o fundo: 885px de largura, 518px da esquerda e
   231px acima da borda, em 1920. Corta exatamente no fim da foto do fundo (43.75u). */
.deliveries__cut {
  position: absolute; left: 0; right: 0; top: calc(-20 * var(--u)); height: calc(63.75 * var(--u)); overflow: hidden; pointer-events: none;
}
.deliveries__cut img {
  position: absolute; max-width: none;
  left: calc(var(--shift) + 26.98 * var(--u)); top: calc(7.97 * var(--u)); width: calc(46.09 * var(--u)); height: auto;
}
.deliveries__words {
  position: absolute; inset: 4.4vw 0 auto; margin-inline: auto; z-index: 1; /* 84px abaixo da borda da faixa em 1920 */
  display: none; /* era flex — os textos estão no fundo pronto */ justify-content: space-between; pointer-events: none;
}
.big-word { font-size: clamp(64px, 6.5vw, 128px); font-weight: 400; line-height: .95; text-transform: uppercase; }
.big-word small { font-size: 14px; display: block; }
.deliveries__box {
  position: relative; z-index: 1; align-self: start;
  margin-top: 21.875vw; margin-bottom: 0; /* 420px da borda em 1920 (sem margem embaixo: não empurra a faixa) */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  padding: 56px 48px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(16px);
}
.delivery h3 { font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 18px; }
.delivery p { font-size: 16px; color: var(--white); }
/* Caixa no layout (SITE.jpg): 1280px de largura; cada item com o ícone à esquerda, alinhado com
   a descrição, e o texto numa coluna de ~260px (título em 2 linhas) */
.deliveries .deliveries__box {
  width: min(1280px, 100% - var(--gutter) * 2);
  grid-template-columns: 407fr 407fr 370fr; gap: 0; padding: 60px 48px 60px; border-radius: 16px;
}
/* Os 3 itens com a mesma estrutura: título sempre em 2 linhas (quebra fixa no HTML + altura de
   2 linhas), então descrições e ícones começam na mesma altura nos três. Ícones numa caixa igual
   (64×60), centralizados — mesmo tamanho visual e mesma linha. */
.delivery { display: grid; grid-template-columns: 64px minmax(0, 255px); column-gap: 22px; align-content: start; }
.delivery h3 { grid-column: 2; font-size: 19px; font-weight: 500; line-height: 1.2; min-height: 2.4em; margin-bottom: 14px; white-space: nowrap; }
.delivery p { grid-column: 2; line-height: 1.16; }
.delivery__icon { grid-column: 1; grid-row: 2; align-self: start; width: 64px; height: 60px; object-fit: contain; margin-top: -6px; }
/* Notebook (1025–1600px): a faixa encolhe com a tela e a caixa não — fica mais compacta e sobe
   um pouco (ainda abaixo do queixo, que está a 17.7u da borda) para caber inteira dentro da foto */
@media (min-width: 1025px) and (max-width: 1600px) {
  .deliveries .deliveries__box { margin-top: 19.4vw; padding: 32px 28px; }
  .delivery { grid-template-columns: 48px minmax(0, 255px); column-gap: 16px; padding-right: 12px; }
  .delivery h3 { font-size: 15px; margin-bottom: 10px; }
  .delivery p { font-size: 14px; line-height: 1.3; }
  .delivery__icon { width: 48px; height: 46px; margin-top: -4px; }
}

/* Neon percorrendo os cards do Método (js/method-neon.js — teste) */
.steps__neon {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(221, 230, 118, .95)) drop-shadow(0 0 12px rgba(221, 230, 118, .65));
}
@media (max-width: 900px) { .steps__neon { display: none; } }

/* Rastro luminoso do mouse (js/cursor-trail.js — reserva): por cima do conteúdo, abaixo do menu, sem bloquear cliques */
.cursor-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }

/* Ondinhas de água do mouse (js/cursor-ripple.js): anel de "lente" que distorce o conteúdo
   embaixo (desfoque + clareada leves), reflexo claro na borda de fora e sombra na de dentro */
.water-ripples { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; opacity: .55; } /* intensidade geral (era 100%) */
.water-ripple.is-fading::before, .water-ripple.is-fading::after { opacity: 0; transition: opacity .1s ease; } /* as de trás somem rápido */
.water-ripple {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(.15);
  animation-name: water-ripple; animation-timing-function: cubic-bezier(.2, .7, .3, 1); animation-fill-mode: both;
}
/* a "água": só num anel (máscara), o que está embaixo fica levemente borrado e mais claro */
.water-ripple::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  backdrop-filter: blur(1.6px) brightness(1.12) contrast(1.04); -webkit-backdrop-filter: blur(1.6px) brightness(1.12) contrast(1.04);
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 60%, #000 66%, transparent 74%);
  mask: radial-gradient(circle, transparent 48%, #000 60%, #000 66%, transparent 74%);
}
/* o reflexo: claro na crista (fora), sombra suave logo dentro */
.water-ripple::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle,
    transparent 50%, rgba(0, 0, 0, .10) 57%, transparent 62%,
    rgba(255, 255, 255, .38) 67%, rgba(255, 255, 255, .12) 70%, transparent 74%);
  opacity: var(--strength, 1);
}
@keyframes water-ripple {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- 05 Método ---------- */
/* S5 · DDE676 · 000000 · 1C1F24 · FFFFFF — o verde vem do lima sobre o preto */
/* Fundo (SITE.jpg): verde-escuro em cima → verde-claro embaixo, com as bolhas por cima.
   As bolhas (img/metodo/bolhas.webp) estão em cinza neutro e desfocadas; o "overlay" pinta elas
   com a cor do fundo — o mesmo efeito do gradient map do Figma. */
.method {
  position: relative; isolation: isolate; overflow: hidden; padding-top: 54px; padding-bottom: 90px;
  /* começo clareado a pedido (o layout começa em #2B2D17 — ficava escuro demais na tela) */
  background: linear-gradient(#41441F 0%, #4C5026 30%, #646838 62%, #90964E 100%);
}
.method::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/metodo/bolhas.webp) center / cover no-repeat;
  mix-blend-mode: overlay; opacity: .75;
}
/* Bolhas em movimento (js/method-blobs.js): o canvas substitui a imagem parada, mesmo overlay */
.method__blobs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: overlay; opacity: .75; }
.method.has-blobs::before { opacity: 0; }
.method .section-head { margin-bottom: 98px; }

/* Cards (medidas do SITE.jpg em 1920): 644×813, um a cada 699px (entram 114px no espaço do
   próximo), alternando esquerda (x=338) e direita (x=940). Tudo proporcional à largura do
   bloco (.steps) e, dentro do card, à largura do card (cqw) — fica igual em qualquer tela. */
.steps { display: grid; container-type: inline-size; }
.step { position: relative; aspect-ratio: 1320 / 810.5; }
.step + .step { margin-top: -8.636%; } /* 114px de 1320 */
.step__card {
  position: absolute; top: 0; left: 2.88%; width: 48.79%; height: 100%;
  container-type: inline-size; isolation: isolate;
  /* aqui o cqw ainda é do .steps (o card não mede a si mesmo): valores do card × 0.4879 */
  display: grid; grid-template-columns: 18.86cqw 19.7cqw; column-gap: 3.79cqw; align-items: start;
  padding: 12.65cqw 0 0 1.89cqw;
}
.step--reverse .step__card { left: auto; right: 2.73%; grid-template-columns: 21.97cqw 18.86cqw; column-gap: 3.56cqw; padding-left: 2.27cqw; }
.step--reverse .step__body { order: -1; }
/* Forma do card: fundo de vidro (máscara com o SVG da forma) + borda fina (SVG do contorno).
   No card 2 e 4 a forma é espelhada (flip horizontal); o conteúdo não. */
.step__shape { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.step__shape::before, .step__shape::after { content: ""; position: absolute; inset: 0; }
.step__shape::before {
  -webkit-mask: url(../img/metodo/card-forma.svg) 0 0 / 100% 100% no-repeat;
  mask: url(../img/metodo/card-forma.svg) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(rgba(16, 17, 8, .62), rgba(16, 17, 8, .38));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.step__shape::after { background: url(../img/metodo/card-borda.svg) 0 0 / 100% 100% no-repeat; transition: opacity .35s ease; }
.step--reverse .step__shape, .step--reverse .step__glow { transform: scaleX(-1); }
/* Hover (como nos cards de "Outros cases"): borda lima por cima da branca + o mesmo contorno
   desfocado fazendo o brilho verde */
.step__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.step__glow::before, .step__glow::after {
  content: ""; position: absolute; inset: 0;
  background: url(../img/metodo/card-borda-lima.svg) 0 0 / 100% 100% no-repeat;
}
.step__glow::before { filter: blur(8px); opacity: .85; }
/* O card sobe e cresce um pouco (mesmo movimento dos cases) */
.step__card { transition: transform .5s ease; } /* .is-lit = o card onde o neon está passando (js/method-neon.js) */
.step__card:hover, .step__card.is-lit { z-index: 2; transform: translateY(-4px) scale(1.02); }
.step__card:hover .step__shape::after, .step__card.is-lit .step__shape::after { opacity: 0; }
.step__card:hover .step__glow, .step__card.is-lit .step__glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .step__card:hover { transform: none; } }

.step__img { height: 68.79cqw; min-height: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .5); overflow: hidden; }
.step__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Duas imagens por card: a 2ª aparece em fade e volta, em loop de 10s; --d defasa os cards */
.step__img--duo { position: relative; }
.step__img--duo img { position: absolute; inset: 0; }
.step__img--duo img + img { animation: step-swap 10s ease-in-out var(--d, 0s) infinite; }
@keyframes step-swap {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .step__img--duo img + img { animation: none; opacity: 0; } }
.step__body { display: grid; align-content: start; margin-top: 2.33cqw; }
.step__num {
  justify-self: start; display: inline-flex; align-items: center; gap: .55em;
  height: 9cqw; padding: 0 3cqw; border-radius: 999px; background: #1c1d12; color: var(--lime); font-size: 3.42cqw;
}
.step__num::before { content: ""; width: .32em; height: .32em; border-radius: 50%; background: currentColor; }
.step__body h3 {
  margin-top: 4.6cqw; font-size: 5.6cqw; font-weight: 600; line-height: 1.17; text-transform: uppercase;
  padding-bottom: 2.6cqw; border-bottom: 1px solid rgba(255, 255, 255, .3);
}
/* Lista recuada e estreita como no layout: bolinha a 13px e texto a 30px da borda do título, ~190px de largura */
.step__body ul { display: grid; gap: 1.25cqw; margin-top: 2.2cqw; padding-left: 2cqw; max-width: 40cqw; } /* quebras do layout fixas no HTML (br-lg); a largura só segura o inglês */
.step__body li { position: relative; padding-left: 2.65cqw; font-size: 2.8cqw; line-height: 1.22; color: rgba(255, 255, 255, .82); }
.step__body li::before { content: "•"; position: absolute; left: 0; }
/* "ETAPA —01": 200px em 1920 (15.15% de 1320), no lado oposto ao card, centrado na altura dele */
.step__label {
  position: absolute; top: 50%; transform: translateY(-50%); right: 2.27%; width: 44%;
  font-size: 15.15cqw; font-weight: 400; line-height: 1.03; text-transform: uppercase; text-align: right;
}
.step--reverse .step__label { right: auto; left: 2.27%; text-align: left; }

/* ---------- 06 CTA ---------- */
/* S6 · 686868 · 1C1F24 · 656C12→DDE676 · FFFFFF */
/* Sem faixa verde própria: o card entra 38px por cima do fim da seção Método (como no SITE.jpg),
   então o verde em volta do topo do card é o próprio fundo do Método (com as bolhas) */
.cta { background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 36px 36px, var(--ink); padding-top: 0; display: flow-root; } /* pontinhos como no layout */
.cta__card { position: relative; z-index: 1; }
/* Card (SITE.jpg): 1350×560, um pouco mais largo que o conteúdo (1320); texto a 57px da borda;
   celular com 384px de largura a 907px da esquerda, encostado no topo e cortado embaixo */
.cta .container { width: min(1350px, 100% - var(--gutter) * 2); }
.cta__card {
  display: flex; align-items: center; isolation: isolate;
  min-height: 560px; padding: 0 0 0 57px; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14);
  /* topo igual ao layout (#1C1F24); embaixo um cinza mais escuro que o #686868 para o verde brilhar */
  background: linear-gradient(var(--ink) 0%, #2c2e32 60%, #3b3d3c 100%);
}
.cta__text { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; max-width: 760px; }
.cta__text p { color: var(--white); font-size: clamp(18px, 1.25vw, var(--fs-subtitle)); font-weight: 300; opacity: .75; max-width: 730px; } /* padrão dos subtítulos */
.cta__phone { position: absolute; z-index: 1; top: 5px; left: 67.2%; width: 28.45%; height: auto; pointer-events: none; }

/* Efeito de luz verde (referências: brilho saindo de baixo, raios verticais e granulado), só na
   metade de baixo e mais para a direita — o topo continua escuro e o botão não é ofuscado */
.cta__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cta__fx {
  background:
    radial-gradient(ellipse 20% 30% at 62% 104%, rgba(246, 250, 205, .7), transparent 70%),            /* núcleo quente */
    radial-gradient(ellipse 46% 60% at 60% 108%, rgba(221, 230, 118, .72), rgba(101, 108, 18, .38) 48%, transparent 76%),
    radial-gradient(ellipse 75% 42% at 50% 112%, rgba(101, 108, 18, .6), transparent 70%);
  animation: cta-glow 7s ease-in-out infinite alternate;
}
/* raios verticais de luz, mais fortes perto do brilho */
.cta__fx::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(221, 230, 118, .24) 37px 38px, transparent 38px 61px),
    repeating-linear-gradient(90deg, transparent 0 83px, rgba(240, 245, 200, .2) 83px 85px, transparent 85px 127px),
    repeating-linear-gradient(90deg, transparent 0 151px, rgba(221, 230, 118, .14) 151px 157px, transparent 157px 211px);
  -webkit-mask: radial-gradient(ellipse 55% 75% at 60% 100%, #000 10%, transparent 75%);
  mask: radial-gradient(ellipse 55% 75% at 60% 100%, #000 10%, transparent 75%);
}
/* granulado (ruído) por cima de tudo, bem leve */
.cta__fx::after {
  content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes cta-glow { from { opacity: .85; } to { opacity: 1; } }

/* Luz neon contornando o card POR FORA e POR TRÁS (referência: linhas de neon nos hexágonos):
   uma linha fina verde-clara, com brilho forte, correndo em volta sem parar. Fica atrás do card
   (z-index), 2px para fora da borda, então só aparece o lado de fora + o halo. */
@property --cta-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta__frame { position: relative; isolation: isolate; margin-top: -38px; }
.cta__frame .cta__card { margin-top: 0; }
.cta__neon {
  position: absolute; inset: -2px; z-index: 0; border-radius: 14px; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(221, 230, 118, .95)) drop-shadow(0 0 12px rgba(221, 230, 118, .7)) drop-shadow(0 0 28px rgba(221, 230, 118, .45));
}
/* Duas camadas para a "cauda" afinar como na referência:
   ::before = cauda longa e FINA, que vai apagando; ::after = cabeça curta e mais GROSSA e acesa.
   O brilho neon em volta vem do drop-shadow do .cta__neon. */
.cta__neon::before, .cta__neon::after {
  content: ""; position: absolute; border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-border 7s linear infinite;
}
.cta__neon::before {
  inset: .5px; padding: .8px;
  background: conic-gradient(from var(--cta-angle), transparent 0deg 285deg,
    rgba(221, 230, 118, .12) 310deg, rgba(221, 230, 118, .55) 340deg, #DDE676 354deg, transparent 360deg);
}
.cta__neon::after {
  inset: -.5px; padding: 2.4px; border-radius: 15px;
  background: conic-gradient(from var(--cta-angle), transparent 0deg 343deg,
    rgba(221, 230, 118, .7) 350deg, #fbffe6 357deg, transparent 360deg);
}
/* luz verde suave atrás do card, para destacar (sai pelas bordas, mais forte embaixo) */
.cta__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 14px;
  box-shadow: 0 10px 50px rgba(221, 230, 118, .22), 0 30px 120px rgba(150, 158, 60, .28);
}
@keyframes cta-border { to { --cta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cta__neon { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta__fx { animation: none; } }

/* ---------- 07 Trajetória ---------- */
/* S7 · DDE676 · FFFFFF */
/* Brilho verde atrás do topo dos cards (como no SITE.jpg) — os cards ficam a 160px + 582px do fim */
.clients {
  background:
    /* mais sutil e mais baixo: o centro fica atrás dos cards, só a borda aparece acima deles */
    radial-gradient(ellipse 50% 300px at 50% calc(100% - 560px), rgba(221, 230, 118, .38), rgba(150, 158, 60, .16) 50%, transparent 80%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 36px 36px,
    var(--ink);
}
.clients .section-lead { max-width: 600px; } /* quebra como no layout: "…experiências e com / quem trabalhei…" */
.clients .section-head { margin-bottom: 56px; }
/* Tag no tamanho do texto (num cabeçalho alinhado à esquerda ela esticava na largura toda) */
.section-head > .tag { justify-self: start; }
.section-head--center > .tag { justify-self: center; }

/* Faixa de cards (SITE.jpg): 430×580, 14px entre eles; foto ocupa o card todo e o texto fica
   numa faixa escura de vidro embaixo. Passa sozinha da direita para a esquerda
   (js/clients-marquee.js duplica os cards para a emenda não aparecer). Sem barra de rolagem. */
.clients__track { overflow: hidden; padding-block: 2px; }
.clients__belt { display: flex; gap: 14px; width: max-content; }
.clients__belt.is-moving { animation: clients-belt 60s linear infinite; }
.clients__track:hover .clients__belt { animation-play-state: paused; }
/* direita → esquerda: anda de 0 até metade (quando as cópias assumem o lugar dos originais) */
@keyframes clients-belt { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
.client {
  position: relative; flex: 0 0 430px; height: 580px; overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .45); background: var(--surface);
}
/* Enquadramento por card: --zoom amplia (a partir do topo) e --y sobe a foto, sem distorcer */
.client__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 0; transform: translateY(var(--y, 0%)) scale(var(--zoom, 1));
}
/* Faixa de texto com altura fixa (cabe o texto mais longo): títulos e textos começam na mesma
   altura em todos os cards */
.client__body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 232px;
  padding: 22px 30px 26px; display: grid; gap: 10px; align-content: start;
  background: rgba(28, 31, 36, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.client__body h3 { font-size: 32px; font-weight: 500; line-height: 1.15; }
/* tag curta acima do nome (o que a pessoa/empresa é) — só o texto, sem contorno */
.client__role {
  justify-self: start; margin-bottom: -4px;
  color: var(--lime); font-size: 13px; line-height: 1.4; white-space: nowrap;
}
.client__body p { font-size: 16px; line-height: 1.22; color: var(--white); font-weight: 300; opacity: .75; } /* padrão dos subtítulos */
@media (max-width: 600px) {
  .clients {
    background:
      radial-gradient(ellipse 90% 220px at 50% calc(100% - 400px), rgba(221, 230, 118, .34), rgba(150, 158, 60, .14) 50%, transparent 80%),
      radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 36px 36px,
      var(--ink);
  }
  .client { flex-basis: 300px; height: 440px; }
  .client__body { height: 196px; padding: 18px 20px 20px; }
  .client__body h3 { font-size: 24px; }
  .client__body p { font-size: 14px; }
}

/* ---------- 08 Sobre mim ---------- */
/* S8 · 878787 · 5D5D5D · 1C1F24 · DDE676 · FFFFFF */
/* Sobre mim — foto no centro e as informações em caixas de vidro (mesma linguagem dos cards
   dos cases/Clientes), com respiro entre os blocos. Versão anterior: .claude/backup/sobre-mim-antes.html */
/* Sobre mim + rodapé como uma seção só: o fundo do Sobre mim termina na mesma cor em que o
   rodapé começa (#2a2c31), e os pontinhos vão sumindo antes da emenda */
.about { position: relative; isolation: isolate; background: linear-gradient(var(--ink) 35%, #2a2c31 100%); }
.about::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 36px 36px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%);
}
.about__grid { display: grid; grid-template-columns: 1fr minmax(0, 480px) 1fr; gap: 40px; align-items: center; }
/* Coluna da esquerda na altura da foto: tag + título no topo, ferramentas na linha de baixo da foto */
.about__grid > .about__col--left { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.about__grid > .about__col--left > .about__motto { margin-top: auto; }
/* bloco da frase com a mesma altura da caixa de Referências (alinhadas lado a lado) */
.about__grid > .about__col--left > .about__motto { padding-bottom: calc((var(--about-refs-h, 176px) - 2.1em) / 2); } /* centro da frase = centro da caixa de Referências */
/* Coluna da direita também na altura da foto: Referências embaixo, alinhada com a frase da esquerda */
.about__grid > .about__col--right { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.about__col { display: grid; gap: 20px; align-content: start; }
.about__col--left { justify-items: start; }
.about__col > .tag { justify-self: start; }
.about__title { font-size: clamp(32px, 2.5vw, var(--fs-title)); font-weight: 500; line-height: 1.15; color: var(--white); margin-bottom: 4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } /* sublinhado como no layout */
.about__title span { display: block; text-transform: uppercase; }
.about__box {
  width: 100%; padding: 22px 24px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.about__box p + p { margin-top: 12px; }
.about__box p { font-size: 17px; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, .78); }
.about__box p strong { font-weight: 500; color: var(--white); }
.about__box-title { margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.about__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.about__tools li { padding: 6px 12px; background: rgba(255, 255, 255, .08); border-radius: 6px; color: var(--white); font-weight: 600; font-size: 15px; }

/* Foto (480×760, cantos de 24px) + selo "+5 anos de mercado" */
.about__figure { position: relative; margin: 0; justify-self: center; width: 100%; }
.about__photo { width: 100%; aspect-ratio: 480 / 760; height: auto; object-fit: cover; border-radius: 24px; display: block; }
.about__badge { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } /* sem caixa: só as tags, centralizadas */
/* tags neutras (sem cor), cada uma numa pílula de vidro */
.about__badge span {
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(28, 31, 36, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; color: var(--white); white-space: nowrap;
}

/* Linha do tempo: título curto em branco + detalhe menor; bolinhas na linha à esquerda */
.timeline { display: grid; gap: 14px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .2); }
.timeline li { position: relative; display: grid; gap: 2px; }
.timeline li::before {
  content: ""; position: absolute; left: -25px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #5d5d5d; box-shadow: 0 0 0 3px var(--ink);
}
.timeline li.is-now::before { background: var(--lime); box-shadow: 0 0 0 3px var(--ink), 0 0 10px rgba(221, 230, 118, .7); }
.timeline strong { font-size: 15px; font-weight: 500; color: var(--white); }
.timeline span { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .6); }

.about__motto { padding: 0 2px; font-size: clamp(22px, 1.6vw, 30px); font-weight: 500; line-height: 1.05; text-transform: uppercase; }
.about__motto em { color: var(--lime); }
.about__refs { display: flex; gap: 16px; font-size: 13px; font-weight: 500; }
.about__refs li { display: grid; gap: 8px; justify-items: center; }
.avatar { width: 72px; height: 72px; min-height: 0; padding: 0; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, .25); }


/* ---------- 09 Contato / Footer ---------- */
/* Medidas tiradas do SITE.jpg (frame de 1920px):
   linha 323→1597px · colunas em 323 / 728 / 1017 / 1357px
   linha de baixo centralizada com 163px entre os itens */
.footer {
  --footer-text: #b3b3b5;
  --footer-line: #888c8f;
  /* continua o fundo do Sobre mim; pontinhos como no resto da página, um pouco mais visíveis */
  position: relative; isolation: isolate;
  background: linear-gradient(#2a2c31, var(--bg-footer) 320px, #3e4148);
  padding: 120px 0 100px; /* embaixo era 240px */
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 36px 36px;
  -webkit-mask-image: linear-gradient(transparent 0, #000 140px); mask-image: linear-gradient(transparent 0, #000 140px); /* surgem aos poucos depois da emenda */
}
.footer__inner { width: min(1274px, 100% - var(--gutter) * 2); margin-inline: auto; }
.footer__grid {
  display: grid;
  grid-template-columns: 405fr 289fr 340fr 240fr;
  padding-top: 42px;
  border-top: 1px solid var(--footer-line);
}
.footer__name { font-size: 24px; font-weight: 600; line-height: 1.2; color: #edeef0; }
.footer__role { margin-top: 2px; max-width: 160px; font-size: 14px; line-height: 1.08; color: var(--footer-text); }
.footer__title { font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--footer-text); }
.footer__list { display: grid; gap: 12px; margin-top: 16px; font-size: var(--fs-footer); line-height: 17px; color: var(--footer-text); }
.footer__list a, .footer__bottom a { transition: color .2s; }
.footer__list a:hover, .footer__bottom a:hover { color: var(--lime); }
.footer__social { display: flex; gap: 29px; margin-top: 30px; }
.footer__social a { display: block; width: 36px; height: 36px; color: #fff; transition: color .2s, transform .2s; }
.footer__social a:hover { color: var(--lime); transform: translateY(-2px); }
.footer__social svg { width: 100%; height: 100%; display: block; }
.footer__bottom {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  column-gap: 163px; row-gap: 12px;
  margin-top: 73px;
  font-size: 13.5px; color: #e4e4e6;
}
.footer__copy { font-size: 12.2px; text-transform: uppercase; color: #d7d8dc; }

/* ---------- Responsivo (base) ---------- */
@media (max-width: 1024px) {
  /* Menu vira um painel de vidro que desce da barra */
  .nav { position: relative; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px;
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(28, 31, 36, .88);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    font-size: 16px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
  }
  .site-header.is-open .nav__links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav__links a { display: block; padding: 14px 18px; border-radius: 14px; }
  .nav__links a:hover, .nav__links a:focus-visible { background: rgba(255, 255, 255, .06); }
  .belief__grid, .case, .step, .step__card, .cta__card, .about__grid, .footer__grid { grid-template-columns: 1fr; }
  /* Carrossel: imagem em cima, bolinhas, card embaixo */
  .cases__slider { grid-template-columns: 1fr; }
  .cases__dots { margin: 16px 0; }
  .cases__info { order: 3; }
  .case__info { padding: 28px 24px; }
  .cases__arrow--prev { left: 4px; }
  .cases__arrow--next { right: 4px; }
  /* O texto começa logo abaixo do rosto (≈70% da altura da foto), sem o vão cinza que sobrava
     no tablet. A foto tem max(100vw, 1100px) de largura × 987/1920 de altura, a partir de 40px. */
  .hero__main { height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: calc(40px + max(100vw, 1100px) * 987 / 1920 * .7); }
  /* Celular/tablet: as duas rodas de cards continuam (mesma animação), numa moldura menor
     centrada no rosto — os cards ficam nas laterais, meio para fora da tela, sem cobrir o rosto.
     Largura da moldura: 740px num celular de 375 e ~1055px num tablet de 768. */
  .hero__cards { top: 20px; width: calc(80vw + 440px); }
  /* No celular a moldura mantém a proporção do render, centralizada no rosto */
  .hero__visual { top: 40px; width: max(100%, 1100px); }
  .hero__person {
    -webkit-mask-image: linear-gradient(#000 45%, transparent 72%);
    mask-image: linear-gradient(#000 45%, transparent 72%);
  }
  .hero__shade { background: linear-gradient(180deg, rgba(62, 62, 62, 0) 35%, rgba(62, 62, 62, .85) 58%, var(--gray-3e) 70%); }
  .hero__content { position: relative; bottom: auto; padding: 0 var(--gutter) 48px; }
  /* No celular o letreiro fica mais compacto */
  .strip { padding: 24px 0; font-size: 16px; }
  .strip li::after { margin: 0 32px; }
  .strip-marquee { animation-duration: 45s; }
  .deliveries__words, .deliveries__box { position: static; }
  .deliveries__stage { display: block; }
  .deliveries .deliveries__box { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; margin-top: 32px; margin-bottom: 0; }
  .delivery { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .delivery h3 { white-space: normal; }
  .delivery__icon { width: 52px; height: 48px; margin-top: -4px; }
  /* Celular: a mesma composição maior (2.4×) e centrada no rosto; textos e cards vêm abaixo */
  /* Celular/tablet: a faixa 1,4× maior, centrada nos textos (no fundo eles vão de x=300 a x=1520 → cabem inteiros) */
  .deliveries__visual { --u: 1.4vw; --shift: -16.4vw; }
  .deliveries { margin-top: 0; padding-top: 56px; }
  .deliveries .section-head { height: auto; padding-bottom: 72px; }
  .deliveries__stage { background: var(--gray-4b); padding-bottom: 48px; }
  /* Celular/tablet: um card embaixo do outro, "ETAPA" em cima de cada um; a forma estica na
     altura (a borda continua com 1px) e o conteúdo vira foto em cima + texto embaixo */
  .step { aspect-ratio: auto; display: grid; gap: 16px; }
  .step + .step { margin-top: 48px; }
  .step__label, .step--reverse .step__label {
    position: static; transform: none; width: auto; order: -1;
    font-size: clamp(56px, 14vw, 110px); text-align: left;
  }
  .step__card, .step--reverse .step__card {
    position: relative; left: auto; right: auto; width: 100%; max-width: 560px; height: auto;
    grid-template-columns: 1fr; row-gap: 24px; padding: 110px 24px 120px;
  }
  .step--reverse .step__body { order: 0; }
  .step__img { height: auto; aspect-ratio: 4 / 3; }
  .step__body { margin-top: 0; }
  .step__num { height: 40px; padding: 0 18px; font-size: 16px; }
  .step__body h3 { margin-top: 18px; font-size: 28px; padding-bottom: 14px; }
  .step__body ul { gap: 8px; margin-top: 14px; padding-left: 0; max-width: none; }
  .step__body li { font-size: 16px; padding-left: 16px; }
  /* Celular/tablet: texto em cima, celular embaixo (cortado pela borda do card) */
  .cta__card { flex-direction: column; align-items: stretch; min-height: 0; padding: 40px 24px 0; }
  .cta__phone { position: relative; top: auto; left: auto; width: min(78%, 340px); margin: 32px auto -30%; }
  .about__figure { max-width: 420px; }
  .timeline li::before { box-shadow: 0 0 0 3px #2a2c30; }
  .timeline { border-right: 0; border-left: 2px solid var(--gray); padding: 0 0 0 20px; }
  .footer { padding: 80px 0 64px; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 56px; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}