/* ============================================================
   DEEP SYNC LAB · versao CLIVE (14/09/2026) · previa de duas secoes

   Uma gramatica so, a do template Clive. Nada de outra ref e
   nada do KV da marca.
     - sem regua entre secoes (15/09: rotulo, indice, ano e filete
       sairam, pedido do Eduardo)
     - selo claro com a cor do acento, titulo grosso centrado,
       apoio em cinza, pilula com circulo e seta
     - cartoes cinza-claro com raio grande, sem sombra
     - numero do passo + pontinhos de progresso no cartao
     - sem as formas ao fundo (cortadas em 14/09, pedido do Eduardo)
     - acento em dose minima: aqui o Sinal da marca faz o papel
       do vermelho da ref
   ============================================================ */

:root{
  --fundo:  #FFFFFF;   /* 16/09: o export do Figma e branco; a textura vem so do BG da secao */
  --card:   #F2F2F0;
  --card-2: #EDEDEA;
  --tinta:  #1C1C1C;
  --cinza:  #6B6B6B;
  --linha:  #E8E8E6;
  --ponto:  #D6D6D2;
  --sinal:       #2FD08A;
  --sinal-fundo: #E3F7EC;
  --papel:  #FFFFFF;
  --selo-fundo:  #F1F1F1;   /* o selo do topo e cinza, com o texto no verde escuro */
  --sinal-texto: #16784B;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:   18px;
  --w:   1280px;   /* largura do site, pedido 15/09 */
  --gut: clamp(20px, 4vw, 48px);
  --h-top: 130px;   /* altura do header no fluxo: 48 + 66 + 16 */
  --gap: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body{
  margin: 0; color: var(--tinta);
  /* 16/09: o pontilhado em CSS saiu. A textura agora e a arte dele (BG.avif),
     que entra como fundo no topo de cada secao e desvanece sozinha */
  background: var(--fundo);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, figure, ol, ul{ margin: 0; padding: 0; }
ol, ul{ list-style: none; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden]{ display: none !important; }
:focus-visible{ outline: 2px solid var(--sinal); outline-offset: 3px; border-radius: 6px; }

.w{ width: min(100% - 2 * var(--gut), var(--w)); margin-inline: auto; }
.grade{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
section{ position: relative; }
/* emenda de secao (16/09): o BG.avif que ele mandou. A arte ja nasce com o
   meio-tom no terco de cima e o desvanecimento para o branco na base, entao
   entra inteira, sem altura forcada. Fundo nunca cobre o conteudo. */
.mat, .sec, .rod{
  background-image: url("assets/img/fig-bg-secao.avif");
  background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto;
}
.abre__in{ position: relative; z-index: 1; }

/* ---- pecas ------------------------------------------------ */
.qd{ display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; }
.qd::before{ content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--sinal); }

.selo{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 20px; border-radius: 8px;
  background: var(--selo-fundo); color: var(--sinal-texto); font-size: .8125rem; font-weight: 500;
}
.selo .ds-mark{ width: 14px; }

.pil{
  display: inline-flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 20px 0 5px; border-radius: 999px;
  background: #FFFFFF; color: var(--tinta); font-size: .9375rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 10px 18px rgba(140,140,140,.12), 0 28px 44px rgba(140,140,140,.07);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pil i{
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 18px; background: var(--sinal); color: #FFFFFF;
}
.pil i svg{ width: 14px; height: 14px; }
.pil:hover{ background: var(--card-2); }
.pil:hover i{ transform: translateX(3px); }
.pil--sm{ height: 40px; gap: 10px; padding: 0 16px 0 4px; font-size: .875rem; }
.pil--sm i{ width: 32px; height: 32px; }

/* ---- topo ------------------------------------------------- */
/* header (16/09): uma capsula so, como no Figma do Eduardo */
/* 16/09 · geometria medida no export dele: capsula de 800x66 a 56px do topo,
   marca de 208, menu colado no botao (16px) e o ar todo entre marca e menu */
.top{ position: sticky; top: 0; z-index: 60; padding: 48px 0 16px; }
.top__in{
  width: min(100% - 2 * var(--gut), 800px); min-height: 66px; margin-inline: auto; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 11px 11px 23px; border-radius: 100px;
  background: #F5F5F5; border: 2px solid #FFFFFF;
  box-shadow: 0 16px 17.5px rgba(112,112,112,.16), 0 64px 32px rgba(112,112,112,.14), 0 144px 43.5px rgba(112,112,112,.08);
}
.top__logo{ flex: none; justify-self: start; color: var(--tinta); }
/* 208px e o tamanho do Figma dele; o 07-mark.css poe min-inline-size de 240
   no lockup (abaixo disso o LAB fecha), por isso o reset aqui */
.top__logo .ds-mark--lockup{ width: 208px; min-inline-size: 0; }
.top__logo .ds-mark--symbol{ display: none; width: 32px; }
/* nav e acao dentro da capsula */
/* 16/09: nada de item de menu quebrando em duas linhas dentro da capsula */
.top__nav{ display: flex; flex: none; margin-left: auto; gap: 16px; font-size: .9375rem; }
.top__nav a{ white-space: nowrap; transition: color .2s var(--ease); }
.top__nav a:hover{ color: var(--cinza); }
.top__cta{
  display: inline-flex; flex: none; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px 0 5px; border-radius: 999px;
  background: var(--tinta); color: #FFFFFF; font-size: .875rem; white-space: nowrap;
  transition: background .2s var(--ease);
}
.top__cta:hover{ background: #2B2B2B; }
.top__cta i{ display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 17px; background: #FFFFFF; color: var(--tinta); }
.top__cta i svg{ width: 14px; height: 14px; }
.top__menu{ display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); }
.top__menu svg{ width: 16px; height: 16px; }
/* a gaveta e a mesma capsula, aberta logo abaixo: mesma largura, fundo, borda e sombra.
   O CTA nao se repete aqui, ele ja esta no header. O resto da pagina escurece. */
.gaveta{
  position: fixed; z-index: 59; left: 0; right: 0; top: calc(var(--h-top) - 6px);
  width: min(100% - 2 * var(--gut), 800px); margin-inline: auto;
  padding: 6px 22px; border-radius: 28px;
  background: #F5F5F5; border: 2px solid #FFFFFF;
  box-shadow: 0 16px 17.5px rgba(112,112,112,.16), 0 64px 32px rgba(112,112,112,.14), 0 0 0 100vmax rgba(20,20,20,.22);
  animation: gaveta-abre .26s var(--ease);
}
@keyframes gaveta-abre{ from{ opacity: 0; transform: translateY(-8px); } }
.gaveta a{
  display: flex; align-items: center; justify-content: space-between; padding: 18px 0;
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -.02em;
}
.gaveta a + a{ border-top: 1px solid var(--linha); }
.gaveta a::after{ content: "\2192"; color: var(--cinza); font-weight: 400; transition: transform .2s var(--ease); }
.gaveta a:active::after{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .gaveta{ animation: none; } }

/* ============================================================
   1 · ABERTURA
   ============================================================ */
/* diagramacao pedida em 14/09: bloco alinhado a esquerda, garantia
   sob os botoes e os numeros fechando a direita. Sem altura de tela
   (pedido dele): o hero tem a altura do conteudo */
/* fundo cromado da abertura (arte do Eduardo, 15/09).
   16/09: a arte sobe ATRAS do header ate a beira da tela, como no Figma dele —
   antes o cromado comecava abaixo do menu e sobrava uma faixa branca no topo */
.abre{ position: relative; }
.abre::before{
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--h-top) * -1); bottom: 0;
  background: url("assets/img/hero-bg.webp") 50% 50% / cover no-repeat;
  z-index: 0; pointer-events: none;
}
/* a arte desmancha em branco na base, para nao cortar seco na proxima secao */
.abre::after{
  content: ""; position: absolute; inset: auto 0 0; height: clamp(80px, 12vw, 160px);
  background: linear-gradient(to bottom, rgba(255,255,255,0), #FFFFFF);
  pointer-events: none;
}
.abre__in{
  position: relative; z-index: 1;   /* acima do desmanche branco da base */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* no Figma a arte segue ~120px abaixo dos numeros antes da proxima secao */
  padding-block: clamp(32px, 3.1vw, 60px) clamp(64px, 6.25vw, 120px);
}
.abre__h{
  margin-top: 28px; max-width: none;
  font-size: clamp(2.8rem, 1rem + 4.6vw, 5.5rem);
  font-weight: 600; letter-spacing: -.02em; line-height: .98; /* -2% do Figma (pedido 14/09) */
}
.abre__lead{ margin-top: 32px; max-width: 30em; font-size: 1.125rem; line-height: 1.6; color: var(--cinza); text-wrap: pretty; }
.abre__cta{ margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pil--preta{ background: var(--tinta); color: #FFFFFF; }
.pil--preta:hover{ background: #2B2B2B; }
.pil--preta i{ background: #FFFFFF; color: var(--tinta); }
.pil--linha{ padding: 0 22px 0 24px; background: none; box-shadow: inset 0 0 0 1px var(--linha); }
.pil--linha svg{ width: 14px; height: 14px; transition: transform .25s var(--ease); }
.pil--linha:hover{ background: var(--card); }
.pil--linha:hover svg{ transform: translateX(3px); }

.abre__base{
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.abre__garantia{ padding-top: 14px; border-top: 1px solid var(--linha); font-size: .9375rem; }
.fatos{ display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.fatos div{ display: flex; align-items: baseline; gap: 10px; }
.fatos b{ font-size: 1.375rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fatos span{ font-size: .9375rem; color: var(--cinza); }

/* ============================================================
   2 · A MATRIZ
   ============================================================ */
.mat__intro{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.mat__intro h2{
  margin-top: 22px; max-width: 12em;
  font-size: clamp(2.4rem, 1rem + 4.4vw, 5rem); font-weight: 600;
  letter-spacing: -.05em; line-height: 1; text-wrap: balance;
}
.mat__intro p{ margin-top: 22px; max-width: 40em; font-size: 1.0625rem; line-height: 1.55; color: var(--cinza); text-wrap: pretty; }
.mat__intro .pil{ margin-top: 30px; }

.passos{ margin-top: clamp(56px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.passo{
  display: flex; flex-direction: column; gap: 26px;
  padding: 22px 22px 26px;
  border-radius: var(--r); background: var(--card);
}
.passo__top{ display: flex; justify-content: space-between; align-items: flex-start; }
.passo__n{ font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pontos{ display: flex; gap: 5px; padding-top: 8px; }
.pontos i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ponto); }
.pontos i.on{ background: var(--sinal); }
.passo p{ margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--cinza); text-wrap: pretty; }

/* beneficios: sem cartao, so o filete, para nao repetir os passos */
.bens{ margin-top: clamp(56px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.bem{ padding-top: 22px; border-top: 1px solid var(--linha); }
.ico{ display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--card); }
.ico svg{ width: 20px; height: 20px; }
.bem h3{ margin-top: 28px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.bem p{ margin-top: 10px; max-width: 24em; font-size: .9375rem; color: var(--cinza); text-wrap: pretty; }

/* ============================================================
   3 a 6 · SECOES DE MIOLO (14/09)
   ============================================================ */
/* 16/09 · o respiro das secoes e PADDING, nunca margin no primeiro filho:
   margin do primeiro filho colapsa para fora da secao e o titulo nasce colado
   no topo da faixa do BG, sem ar (foi o que ele apontou). No Figma dele a
   secao tem 110-210px de ar antes do titulo e outro tanto depois do conteudo. */
.mat, .sec{ padding-block: clamp(80px, 9vw, 140px); }
.h2{
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4rem); font-weight: 600;
  letter-spacing: -.05em; line-height: 1; text-wrap: balance;
}
.acoes{ display: flex; flex-wrap: wrap; gap: 10px; }
.intro{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro p{ margin-top: 20px; max-width: 40em; font-size: 1.0625rem; line-height: 1.55; color: var(--cinza); }

/* ---- 3 · experiencia -------------------------------------- */
/* os botoes no meio da altura do titulo, como no Figma dele */
.exp__top{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 64px; align-items: center; }
.exp__top .h2{ max-width: 7em; }
/* os botoes fecham na borda direita do conteudo, como no Figma dele */
.exp__lado .acoes{ justify-content: flex-end; }

.trilha{ margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r); background: var(--card); }
.etapa{ display: flex; flex-direction: column; min-height: 280px; padding: 22px 24px 26px; }
.etapa + .etapa{ border-left: 1px solid var(--papel); }
.etapa__top{ display: flex; align-items: center; gap: 14px; }
.etapa__n{ font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.barra{ flex: 1; height: 3px; border-radius: 3px; background: var(--ponto); overflow: hidden; }
.barra::after{ content: ""; display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--sinal); }
.etapa h3{ margin-top: 96px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.etapa p{ margin-top: 10px; font-size: .9375rem; line-height: 1.5; color: var(--cinza); text-wrap: pretty; }

/* ---- 4 · servicos ----------------------------------------- */
.servs{ margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
/* 15/09: sem imagem. O cartao se sustenta sozinho: superficie branca sobre o
   pontilhado, fio de contorno, rotulo em pilula e titulo maior */
.serv{ display: flex; padding: clamp(26px, 3vw, 40px); border-radius: var(--r); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--linha); }
.serv__tx{ display: flex; flex-direction: column; gap: 22px; }
.serv__k{
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px 0 4px; border-radius: 999px;
  background: var(--sinal-fundo); color: var(--sinal-texto); font-size: .875rem;
}
.serv__k .ico{ width: 24px; height: 24px; background: #FFFFFF; color: var(--sinal-texto); }
.serv__k .ico svg{ width: 14px; height: 14px; }
.serv h3{ font-size: clamp(1.375rem, 1rem + .9vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.serv p{ margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--cinza); text-wrap: pretty; }

.escuro{
  margin-top: var(--gap);
  /* 16/09: titulo e botoes no mesmo eixo, como ele alinhou no Figma */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px;
  /* o mesmo padding do cartao de servico, para o texto nascer no mesmo eixo */
  padding: clamp(26px, 3vw, 40px); border-radius: var(--r);
  background: var(--tinta); color: #FFFFFF;
}
.escuro h3{ max-width: 15em; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.escuro .pil{ background: #FFFFFF; color: var(--tinta); }
.escuro .pil:hover{ background: #F4F4F2; }
.escuro .pil--linha{ background: none; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.escuro .pil--linha:hover{ background: rgba(255,255,255,.08); }

/* ---- 5 · sobre -------------------------------------------- */
/* 16/09 · como o Eduardo desenhou no Figma: moldura clara com sombra funda,
   foto de 642x660 dentro, texto a direita e tres pilulas de numero embaixo */
.sobre{ display: grid; grid-template-columns: 662fr 505fr; gap: clamp(32px, 6vw, 107px); align-items: center; }
.sobre__moldura{
  padding: 10px; border-radius: 26px; background: var(--card);
  box-shadow: 0 55px 121px rgba(173,173,173,.26), 0 219px 219px rgba(173,173,173,.22);
}
.sobre__moldura img{ width: 100%; height: auto; aspect-ratio: 642 / 660; object-fit: cover; object-position: 50% 18%; border-radius: 18px; background: #D7D7D7; }
.sobre__tx{ display: flex; flex-direction: column; gap: 20px; }
.sobre__tx .h2{ font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; max-width: 12em; }
.sobre__tx p{ max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: var(--cinza); text-wrap: pretty; }
.sobre__tx .fatos{ margin-top: 2px; }
.citacao{ padding: 22px 24px 26px; border-radius: 18px; background: var(--card); }
.citacao blockquote{ margin: 0; font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.citacao figcaption{ margin-top: 20px; font-size: .875rem; }
.citacao b{ font-weight: 600; }

.selos{ margin-top: clamp(40px, 5vw, 52px); display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.selo-num{
  padding: 15px 20px; border-radius: 130px; background: var(--card);
  font-size: 1.25rem; font-weight: 500; color: var(--cinza); white-space: nowrap;
}
.selo-num b{ color: var(--tinta); font-weight: 600; }

/* 16/09: a secao de prova/depoimentos saiu inteira, a pedido dele */

/* ---- 6 · fecho escuro ------------------------------------- */
/* 16/09: era o bloco de dentro do rodape. Virou faixa preta de ponta a
   ponta, como no export dele. As imagens sairam (o arco); o unico brilho
   e um glow discreto na parte de baixo */
.fim{ padding-block: clamp(48px, 7vw, 120px); background: #070707; }
.fim__card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 7vw, 118px) clamp(24px, 4vw, 64px);
  border-radius: 18px; border: 1px solid #1B1B1B; color: #FFFFFF;
  background: linear-gradient(to bottom, #070707, #0C0C0C);
}
/* o glow: um so, subindo da base do cartao */
.fim__card::after{
  content: ""; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
  width: min(1300px, 140%); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.14), rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}
/* sobre preto, a sombra cinza da pilula vira um halo sujo */
.fim__card .pil, .escuro .pil{ box-shadow: none; }
.fim__card > *{ position: relative; z-index: 1; }
.fim__card h2{
  max-width: 14em; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance;
}
.fim__card p{ margin-top: 18px; max-width: 34em; font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,.82); text-wrap: pretty; }
.fim__card .pil{ margin-top: 32px; }

/* ---- rodape ----------------------------------------------- */
/* v4 (15/09), na dinamica da ref Graphy: bloco escuro de chamada,
   cartao claro com os links e a wordmark fantasma por tras dele.
   Superficie escura: o verde quase preto da marca (#0F1D17) */
/* o rodape vem logo depois da faixa preta: a vinheta cinza do export dele
   (fatia 07) e um gradiente, nao imagem */
.rod{ padding-block: clamp(56px, 7vw, 96px) var(--gut); overflow: hidden; }
.rod{
  background-image:
    url("assets/img/fig-bg-secao.avif"),
    radial-gradient(130% 90% at 50% 100%, #E3E3E3, rgba(227,227,227,0) 62%);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 0, 50% 100%;
  background-size: 100% auto, 100% 100%;
}
.rod .w{ position: relative; }
.rot{ font-size: .875rem; color: var(--cinza); }

.rod__card{
  position: relative; z-index: 2;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3.5vw, 48px) 20px;
  border-radius: var(--r); background: var(--card);
}
.rod__topo{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; }
.rod__marca{ grid-column: 1 / 5; }
.rod__logo{ display: block; color: var(--tinta); }
.rod__logo .ds-mark--lockup{ width: 168px; }
.rod__tag{ margin-top: 18px; max-width: 24em; font-size: .875rem; line-height: 1.55; color: var(--cinza); text-wrap: pretty; }
.rod__ic{ margin-top: 20px; display: flex; gap: 10px; }
.rod__ic a{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--papel); color: var(--tinta); transition: background .2s var(--ease); }
.rod__ic a:hover{ background: var(--sinal-fundo); color: var(--sinal-texto); }
.rod__ic svg{ width: 17px; height: 17px; }
.rod__col{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: .9375rem; }
.rod__nav{ grid-column: 6 / 8; }
.rod__soc{ grid-column: 8 / 10; }
.rod__ct{ grid-column: 10 / 13; }
.rod__col .rot{ margin-bottom: 6px; }
.rod__col a{ color: var(--cinza); transition: color .2s var(--ease); }
.rod__col a:hover{ color: var(--tinta); }
.rod__base{
  margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: .8125rem; color: var(--cinza);
}

/* ---- entrada ---------------------------------------------- */
.js [data-r]{ opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.js [data-r].is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js [data-r]{ opacity: 1; transform: none; transition: none; }
}

/* ---- responsivo ------------------------------------------- */
@media (max-width: 960px){
  .sobre{ grid-template-columns: 1fr; gap: 32px; }
  .sobre__moldura{ max-width: 520px; margin-inline: auto; }
  .sobre__tx .h2{ max-width: none; }
  .rod__marca{ grid-column: 1 / -1; }
  .rod__nav{ grid-column: 1 / 5; }
  .rod__soc{ grid-column: 5 / 9; }
  .rod__ct{ grid-column: 9 / 13; }

  .top__nav{ display: none; }
  .top__menu{ display: grid; }
  /* sem o nav, o CTA e o menu vao juntos para a direita; a marca fica sozinha na esquerda */
  .top__cta{ margin-left: auto; }
  .exp__top{ grid-template-columns: 1fr; }
  .trilha{ grid-template-columns: repeat(2, 1fr); }
  .etapa:nth-child(3){ border-left: 0; }
  .etapa:nth-child(n+3){ border-top: 1px solid var(--papel); }
  .servs{ grid-template-columns: 1fr; }

  .rod__tag{ max-width: 26em; }
}
@media (max-width: 720px){
  .selos{ flex-direction: column; align-items: center; gap: 12px; }
  .selo-num{ font-size: 1.0625rem; }
  .top{ padding: 12px 0; }
  .top__in{ padding: 8px 8px 8px 16px; gap: 8px; }
  .top__logo .ds-mark--lockup{ display: none; }
  .top__logo .ds-mark--symbol{ display: block; width: 28px; }
  .top__cta{ min-width: 0; }
  .top__cta span{ overflow: hidden; text-overflow: ellipsis; }
  /* botao e menu na mesma altura (40), com 4px de folga interna igual nos dois */
  .top__cta{ height: 40px; padding: 0 16px 0 4px; font-size: .8125rem; }
  .top__cta i{ width: 32px; height: 32px; }
  .top__menu{ background: #FFFFFF; }
  /* 16/09: as tres colunas empilhadas desciam demais. Navegar e Social lado a lado,
     Contato fecha em linha inteira embaixo */
  .rod__topo{ row-gap: 32px; }
  .rod__nav{ grid-column: 1 / 7; align-items: center; }
  .rod__soc{ grid-column: 7 / 13; align-items: center; }
  .rod__ct{ grid-column: 1 / -1; align-items: center; }
  .rod__marca{ display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rod__base{ flex-direction: column; align-items: center; gap: 6px; }
  :root{ --h-top: 90px; }
  .abre::before{ background-image: url("assets/img/hero-bg-mobile.webp"); }
  /* no celular a arte desmancha mais cedo: o cromado da base brigava com a garantia e os numeros */
  .abre::after{ height: 42%; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92) 55%, #FFFFFF); }
  .top__logo .ds-mark--lockup{ display: none; }
  .top__logo .ds-mark--symbol{ display: block; }
  .abre__in{ padding-block: 48px; }
  /* no celular 144px entre secoes vira buraco */
  .mat, .sec{ padding-block: 64px; }
  .passos, .bens, .trilha{ grid-template-columns: 1fr; }
  .passo{ gap: 26px; }
  .etapa{ min-height: 0; }
  .etapa + .etapa{ border-left: 0; border-top: 1px solid var(--papel); }
  .etapa h3{ margin-top: 40px; }

  /* celular centrado (pedido do Eduardo, 14/09): todo bloco de texto no eixo */
  .abre__in, .serv__tx, .escuro{ align-items: center; text-align: center; }
  .abre__cta, .acoes, .fatos{ justify-content: center; }
  .abre__base{ flex-direction: column; align-items: center; }
  /* abertura no celular: botoes da mesma largura, garantia e numeros em blocos
     separados, sem viuva no lead */
  /* no celular a quebra do Figma nao cabe: o texto volta a fluir */
  .abre__h br{ display: none; }
  .abre__h{ max-width: 9em; }
  .abre__lead{ margin-top: 24px; font-size: 1.0625rem; text-wrap: balance; }
  .abre__cta{ flex-direction: column; align-items: stretch; width: min(100%, 300px); }
  .abre__cta .pil{ justify-content: center; }
  /* o circulo fica preso na borda e o texto no eixo, igual ao botao de baixo */
  .abre__cta .pil:first-child{ position: relative; padding: 0 48px; }
  .abre__cta .pil:first-child i{ position: absolute; left: 5px; top: 5px; }
  .abre__cta .pil:first-child:hover i{ transform: translateX(3px); }
  .abre__base{ margin-top: 40px; gap: 28px; }
  .abre__garantia{ max-width: 17em; text-wrap: balance; color: var(--cinza); }
  .abre__base .fatos{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-self: stretch; }
  .abre__base .fatos div{ flex-direction: column; align-items: center; gap: 2px; }
  .abre__base .fatos div + div{ border-left: 1px solid var(--linha); }
  .exp__top{ justify-items: center; text-align: center; }
  .passo, .etapa, .bem, .sobre__tx, .citacao, .rod__card{ text-align: center; }
  .rod__tag{ text-wrap: balance; }
  .rod__base{ flex-direction: column; align-items: center; gap: 2px; }
  .passo__top{ justify-content: center; align-items: center; gap: 14px; }
  .pontos{ padding-top: 0; }
  .bem .ico, .bem p, .sobre__tx .h2, .sobre__tx p, .rod__tag{ margin-inline: auto; }
  .escuro{ flex-direction: column; }
    .rod__col{ align-items: center; }
}
@media (max-width: 400px){
  .top__dir .pil--sm{ padding-right: 12px; font-size: .8125rem; }
}