/* ============================================================
   Lottinet — Landing Page
   Tokens conforme lp-projeto/04-direcao-arte.md
   Mobile-first. Breakpoints: 360 · 390 · 768 · 1280
   ============================================================ */

:root{
  /* cor */
  --bg:        #FBF7F0;
  --surface:   #FFFFFF;
  --ink:       #01175D;
  --ink-70:    rgba(1,23,93,.72);
  --ink-55:    rgba(1,23,93,.66);  /* 4.5:1 sobre o creme — não reduzir */
  --ink-12:    rgba(1,23,93,.12);
  --ink-08:    rgba(1,23,93,.08);
  --action:    #EE7223;   /* EXCLUSIVO de CTA */
  --action-dk: #D4611A;
  --blue:      #0CA5FD;
  --yellow:    #FDD146;
  --on-dark:   #FFFFFF;
  --on-dark-70:rgba(255,255,255,.74);
  --on-dark-15:rgba(255,255,255,.15);

  /* espaço — múltiplos de 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  /* forma */
  --radius: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(1,23,93,.05), 0 8px 24px -12px rgba(1,23,93,.10);
  --shadow-2: 0 2px 4px rgba(1,23,93,.06), 0 16px 40px -16px rgba(1,23,93,.16);

  /* tipografia */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:700; letter-spacing:-.02em; }
h1{ font-size:34px; line-height:1.08; }
h2{ font-size:28px; line-height:1.12; }
h3{ font-size:20px; line-height:1.2; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s3); }
.section{ padding-block:var(--s6); }
.lede{ color:var(--ink-70); font-size:17px; }
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-55); margin-bottom:var(--s2);
}

/* ---------- BOTÕES — laranja só aqui ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 28px;
  font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1;
  border-radius:var(--radius-pill); border:0; cursor:pointer;
  text-decoration:none; transition:background-color .22s var(--ease), transform .12s var(--ease);
}
.btn--primary{ background:var(--action); color:#fff; box-shadow:var(--shadow-1); }
.btn--primary:hover{ background:var(--action-dk); }
.btn--primary:active{ transform:scale(.985); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink-12); }
.btn--ghost:hover{ background:var(--ink-08); }
.btn--ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:#f0ece4; }

:where(a,button,summary):focus-visible{
  outline:3px solid var(--blue); outline-offset:3px; border-radius:6px;
}

/* ---------- 00 HEADER ---------- */
.header{
  position:fixed; inset-inline:0; top:0; z-index:60;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header__in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  min-height:96px;
}
.header__logo{ display:flex; align-items:center; text-decoration:none; }
.wordmark{ display:none; }
.header__logo img{ height:76px; width:auto; }
/* O logo tem duas versões: a branca vive sobre o navy do hero, a navy
   assume quando o header vira uma faixa creme ao rolar a página. */
.header__logo--claro{ display:block; }
.header__logo--escuro{ display:none; }
.header.is-stuck .header__logo--claro{ display:none; }
.header.is-stuck .header__logo--escuro{ display:block; }
.header__nav{ display:none; }
.header.is-stuck{ background:var(--bg); box-shadow:0 1px 0 var(--ink-12); }
.header.is-stuck .header__nav a{ color:var(--ink-70); }

/* ---------- 01 HERO ---------- */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:640px; padding-top:120px; padding-bottom:var(--s6);
  background:var(--ink); overflow:hidden; isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(1,23,93,.72) 0%, rgba(1,23,93,.80) 45%, rgba(1,23,93,.94) 100%);
}

.hero h1{ color:#fff; max-width:16ch; text-wrap:balance; }
.hero__sub{ color:var(--on-dark-70); margin-top:var(--s3); max-width:52ch; font-size:17px; }
.hero__cta{ display:flex; flex-direction:column; gap:12px; margin-top:var(--s4); }
.hero__proof{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--on-dark-15);
  color:var(--on-dark-70); font-size:13px;
  display:flex; flex-wrap:wrap; gap:6px 14px;
}
.hero__proof b{ color:#fff; font-weight:600; }

/* ---------- 02 PROBLEMA ---------- */
.problema{ text-align:center; }
.problema h2{ max-width:18ch; margin-inline:auto; text-wrap:balance; }
.problema p{ max-width:56ch; margin:var(--s3) auto 0; color:var(--ink-70); }

/* ---------- 03 SOLUÇÃO ---------- */
.solucoes{ display:grid; gap:var(--s2); margin-top:var(--s5); }
.card{
  background:var(--surface); border-radius:var(--radius);
  padding:var(--s4) var(--s3); box-shadow:var(--shadow-1);
}
.card__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--ink-08); color:var(--ink); margin-bottom:var(--s3);
}
.card p{ margin-top:10px; color:var(--ink-70); font-size:15px; }
.card__list{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:10px; }
.card__list li{
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-70);
  background:var(--bg); border-radius:10px; padding:10px 12px;
}
.card__list svg{ color:var(--blue); flex:none; }
.section__cta{ margin-top:var(--s4); display:flex; justify-content:center; }

/* ---------- 04 LOGOS ---------- */
.logos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); margin-top:var(--s4);
}
.logos div{
  background:var(--surface); border-radius:var(--radius); min-height:82px;
  display:grid; place-items:center; color:var(--ink-55);
  font-weight:600; font-size:14px; letter-spacing:.04em;
  filter:grayscale(1); opacity:.72; transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.logos div:hover{ filter:none; opacity:1; }
.logos-note{ margin-top:var(--s3); text-align:center; font-size:14px; color:var(--ink-55); }

/* ---------- 05 MECANISMO ---------- */
.mecanismo__foto{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2); margin-top:var(--s4);
}
.mecanismo__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.mecanismo__list{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2); }
.mecanismo__list li{ display:flex; gap:12px; align-items:flex-start; }
.mecanismo__list b{ display:block; font-weight:600; }
.mecanismo__list span{ color:var(--ink-70); font-size:15px; }
.dot{ width:10px; height:10px; border-radius:50%; margin-top:7px; flex:none; }
.dot--blue{ background:var(--blue); }
.dot--navy{ background:var(--ink); }
.dot--yellow{ background:var(--yellow); }

/* ---------- 06 DEPOIMENTOS ---------- */
.depos{ display:grid; gap:var(--s2); margin-top:var(--s4); }
.depo{
  background:var(--surface); border-radius:var(--radius); padding:var(--s3);
  box-shadow:var(--shadow-1);
}
.depo p{ font-size:16px; }
.depo footer{ margin-top:var(--s2); font-size:14px; color:var(--ink-55); font-weight:600; }
.is-placeholder{ outline:2px dashed var(--ink-12); outline-offset:-2px; }
.is-placeholder p{ color:var(--ink-55); font-style:italic; }

/* ---------- 07 SOBRE ---------- */
.sobre__panel{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:var(--s5) var(--s3); overflow:hidden; position:relative;
}
.sobre__panel h2{ color:#fff; max-width:20ch; text-wrap:balance; }
.sobre__panel p{ color:var(--on-dark-70); margin-top:var(--s3); max-width:60ch; }
.sobre__foto{ border-radius:var(--radius); overflow:hidden; margin-top:var(--s4); }
.sobre__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.pilares{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
.pilares svg{ color:#fff; }
.pilares__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--on-dark-15); margin-bottom:var(--s2);
}
.pilares b{ display:block; font-weight:600; font-size:17px; }
.pilares span{ display:block; margin-top:6px; color:var(--on-dark-70); font-size:15px; }
.sobre__panel .btn{ margin-top:var(--s5); }

/* ---------- 08 OFERTA ---------- */
.oferta__grid{ display:grid; gap:var(--s2); margin-top:var(--s4); }
.oferta__item{
  background:var(--surface); border-radius:var(--radius); padding:var(--s3);
  box-shadow:var(--shadow-1);
}
.oferta__item svg{ color:var(--ink); }
.oferta__item b{ display:block; margin-top:var(--s2); font-weight:600; font-size:17px; }
.oferta__item span{ display:block; margin-top:6px; color:var(--ink-70); font-size:15px; }
.preco{
  margin-top:var(--s3); background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:var(--s3); text-align:center;
}
.preco b{ font-family:var(--font-display); font-size:26px; display:block; }
.preco span{ color:var(--on-dark-70); font-size:14px; }

/* ---------- 09 FAQ ---------- */
.faq{ margin-top:var(--s4); display:grid; gap:10px; }
.faq details{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding:var(--s3); font-weight:600; min-height:56px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--font-display); font-size:24px; line-height:1;
  color:var(--ink); flex:none; transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 var(--s3) var(--s3); color:var(--ink-70); font-size:15px; }

/* ---------- 10 CTA FINAL ---------- */
.final{
  position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff; text-align:center; padding:var(--s6) var(--s3);
}
.final img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.final::after{ content:""; position:absolute; inset:0; background:rgba(1,23,93,.86); z-index:-1; }
.final h2{ color:#fff; max-width:20ch; margin-inline:auto; text-wrap:balance; }
.final p{ color:var(--on-dark-70); max-width:48ch; margin:var(--s3) auto 0; }
.final .btn{ margin-top:var(--s4); }
.final small{ display:block; margin-top:var(--s3); color:var(--on-dark-70); font-size:13px; }

/* ---------- 11 FOOTER ---------- */
.footer{ padding-block:var(--s5) var(--s4); border-top:1px solid var(--ink-12); margin-top:var(--s6); }
.footer img{ height:96px; width:auto; }
/* Versículo no rodapé: fundo claro, então usa --ink-55, que o projeto
   já tem calibrado em 5,49:1 de contraste. */
.footer__versiculo{
  margin-top:var(--s3);
  color:var(--ink-55);
  font-size:16px; line-height:1.5; font-style:italic;
  max-width:48ch; text-wrap:pretty;
}
@media (min-width:768px){
  .footer__versiculo{ font-size:18px; }
}
.footer__versiculo span{ font-style:normal; white-space:nowrap; }

.footer__contato{ margin-top:var(--s3); display:grid; gap:10px; }
.footer__contato a{ display:inline-flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; min-height:44px; }
.footer__contato a:hover{ text-decoration:underline; }
.footer__contato svg{ color:var(--ink); flex:none; }
.footer nav{ margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.footer nav a{ color:var(--ink-70); text-decoration:none; font-size:15px; }
.footer nav a:hover{ color:var(--ink); }
.footer__base{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--ink-12);
  font-size:13px; color:var(--ink-55);
}

/* ---------- animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   ≥ 768px — tablet
   ============================================================ */
@media (min-width:768px){
  h1{ font-size:48px; }
  h2{ font-size:38px; }
  .section{ padding-block:var(--s7); }
  .hero{ min-height:720px; }
  .hero__cta{ flex-direction:row; align-items:center; }
  .hero__proof{ gap:6px 20px; }
  .solucoes{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .logos{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pilares{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
  .oferta__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sobre__panel{ padding:var(--s7) var(--s5); }
  .final{ padding:var(--s7) var(--s5); }
  .footer__contato{ grid-auto-flow:column; justify-content:start; gap:var(--s4); }
}

/* ============================================================
   ≥ 1024px — desktop
   ============================================================ */
@media (min-width:1024px){
  .depos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  h1{ font-size:60px; }
  h2{ font-size:44px; }
  .header__nav{ display:flex; gap:var(--s4); }
  .header__nav a{ color:rgba(255,255,255,.85); text-decoration:none; font-size:15px; font-weight:500; }
  .header__nav a:hover{ color:#fff; }
  .header.is-stuck .header__nav a:hover{ color:var(--ink); }
  /* no desktop cabe o logo grande sem espremer o menu e o botão */
  .header__in{ min-height:124px; }
  .header__logo img{ height:104px; }

  .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:center; }
  .mecanismo__foto{ margin-top:0; }
  .sobre__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s5); align-items:center; }
  .sobre__foto{ margin-top:0; }
  .preco{ display:flex; align-items:center; justify-content:center; gap:var(--s2); }
  .preco b{ display:inline; }
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__media{ display:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   AJUSTES — rodada de feedback 17/08/2026
   ============================================================ */

/* ---------- pílulas (chips) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; line-height:1.2;
}
.chip svg{ flex:none; }

/* chip sobre fundo escuro (hero) */
.chip--dark{
  background:rgba(255,255,255,.13); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.chip--dark svg{ color:var(--blue); }

/* chip sobre fundo claro (mecanismo) */
.chip--light{
  background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-1); padding:12px 16px; font-size:14px;
}
.chip--light svg{ color:var(--ink); }

.hero__proof{ border-top:0; padding-top:0; margin-top:var(--s4); }

/* ---------- hover invertido nos cards de solução ---------- */
.card{ transition:background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.card:hover{
  background:var(--ink); box-shadow:var(--shadow-2); transform:translateY(-3px);
}
.card:hover h3{ color:#fff; }
.card:hover p{ color:var(--on-dark-70); }
.card:hover .card__icon{ background:rgba(255,255,255,.16); color:#fff; }
.card:hover .card__list li{ background:rgba(255,255,255,.10); color:var(--on-dark-70); }
.card:hover .card__list svg{ color:var(--blue); }

/* ---------- caixa nos ícones da oferta ---------- */
.oferta__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--ink-08); color:var(--ink);
}
.oferta__item b{ margin-top:var(--s3); }

/* ---------- foto do Sobre: enquadramento ---------- */
.sobre__foto img{ aspect-ratio:4/3; object-fit:cover; object-position:center 42%; }

/* ---------- faixa azul com palavras rodando ---------- */
.faixa{
  background:var(--blue); color:var(--ink);
  overflow:hidden; padding-block:14px;
  border-block:1px solid rgba(1,23,93,.14);
}
.faixa__track{
  display:flex; width:max-content; animation:faixa-scroll 32s linear infinite;
}
.faixa__group{ display:flex; flex:none; align-items:center; }
.faixa__group span{
  display:inline-flex; align-items:center; gap:28px;
  padding-inline:14px; white-space:nowrap;
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase;
}
.faixa__group span::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--ink); opacity:.55; flex:none;
}
@keyframes faixa-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.faixa:hover .faixa__track{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .faixa__track{ animation:none; }
}

/* ---------- correção de especificidade dos ícones ----------
   `.pilares span` e `.oferta__item span` (0,1,1) venciam `.pilares__icon`
   e `.oferta__icon` (0,1,0), forçando display:block e jogando o SVG
   para o canto superior esquerdo da caixa. */
.pilares span.pilares__icon,
.oferta__item span.oferta__icon{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  margin-top:0; font-size:0;
}
.pilares span.pilares__icon{ background:var(--on-dark-15); color:#fff; margin-bottom:var(--s2); }
.oferta__item span.oferta__icon{ background:var(--ink-08); color:var(--ink); }

/* ============================================================
   REFINAMENTO GERAL — passe de polimento
   ============================================================ */

/* ---------- 1. escala tipográfica modular ----------
   Antes: 13·14·15·16·17·20·26·44·60 (15 e 17 colidiam com 16).
   Agora: 13·14·16·18·20·26·44·60 — degraus perceptíveis. */
.card p,
.mecanismo__list span,
.oferta__item span,
.faq details p,
.pilares span{ font-size:16px; }
.lede,
.hero__sub,
.pilares b,
.oferta__item b,
.depo p{ font-size:18px; }

/* Bricolage Grotesque é variável: trava o eixo óptico por tamanho */
h1{ font-variation-settings:'opsz' 72; }
h2{ font-variation-settings:'opsz' 48; }
h3,.faixa__group span{ font-variation-settings:'opsz' 20; }

/* ---------- 2. hero: headline mais equilibrada ---------- */
.hero h1{ max-width:19ch; }
.hero__sub{ max-width:50ch; }

/* ---------- 3. micro-interações que faltavam ---------- */
.faq summary{ transition:background-color .2s var(--ease), border-radius .2s var(--ease); }
.faq summary:hover{ background:var(--ink-08); border-radius:var(--radius); }
.faq details[open] summary{ padding-bottom:var(--s2); }

.logos div{ border:1px solid var(--ink-08); }
.logos div:hover{ border-color:var(--ink-12); transform:translateY(-2px); }
.logos div{ transition:opacity .25s var(--ease), filter .25s var(--ease),
            transform .25s var(--ease), border-color .25s var(--ease); }

.footer nav a{ transition:color .2s var(--ease); }
.footer__contato a{ transition:color .2s var(--ease); }
.footer__contato a:hover{ color:var(--action); text-decoration:none; }

.header__nav a{ position:relative; }
.header__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.header__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- 4. profundidade consistente ---------- */
.card, .oferta__item, .depo, .faq details{ border:1px solid var(--ink-08); }
.oferta__item{ transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.oferta__item:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }

/* ---------- 5. placeholders de depoimento ---------- */
.is-placeholder{ outline:0; border:1px dashed rgba(1,23,93,.28); background:transparent; box-shadow:none; }
.is-placeholder::before{
  content:"exemplo"; display:inline-block; margin-bottom:10px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-55); border:1px solid var(--ink-12);
  padding:3px 8px; border-radius:var(--radius-pill);
}

/* ---------- 6. detalhes de acabamento ---------- */
::selection{ background:var(--ink); color:#fff; }
section[id]{ scroll-margin-top:88px; }
.preco b{ font-variation-settings:'opsz' 32; letter-spacing:-.01em; }
.faixa__group span{ font-size:14px; }

/* respiro entre o painel escuro e o que vem antes */
.sobre__panel{ margin-top:var(--s2); }

/* evita viúva na headline do hero em telas médias */
@media (min-width:768px) and (max-width:1023px){
  .hero h1{ max-width:15ch; }
}

/* ---------- 7. desktop: hero com mais presença ---------- */
@media (min-width:1024px){
  .hero{ min-height:760px; }
  .hero h1{ letter-spacing:-.03em; }
}

/* fecha a escala: links de navegação alinhados ao corpo */
.header__nav a{ font-size:16px; }
.footer nav a{ font-size:16px; }

/* ============================================================
   LINHA DO TEMPO — o elemento que quebra a regularidade
   Contraste de escala: ano enorme, texto pequeno.
   ============================================================ */
.historia__topo{ max-width:640px; }
.historia__intro{ margin-top:var(--s3); }

.tl{ list-style:none; margin:var(--s5) 0 0; padding:0; position:relative; }

/* trilho vertical */
.tl::before{
  content:""; position:absolute; left:7px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg, var(--ink-12) 0%, var(--blue) 55%, var(--blue) 100%);
}

.tl__item{
  position:relative; padding-left:44px; padding-block:var(--s3);
  display:grid; gap:4px;
}
/* marcador */
.tl__item::before{
  content:""; position:absolute; left:0; top:calc(var(--s3) + 10px);
  width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:2px solid var(--ink-12);
}
.tl__ano{
  font-family:var(--font-display); font-weight:700;
  font-size:34px; line-height:.95; letter-spacing:-.03em;
  font-variation-settings:'opsz' 40;
  color:var(--ink);
}
.tl__ano--dec{ font-size:22px; line-height:1.05; font-variation-settings:'opsz' 24; }
.tl__mais{ color:var(--blue); }
.tl__txt{ font-size:16px; color:var(--ink-70); max-width:46ch; }
.tl__txt b{ color:var(--ink); font-weight:600; }

/* o hoje, destacado */
.tl__item--hoje::before{
  background:var(--blue); border-color:var(--blue);
  box-shadow:0 0 0 5px rgba(12,165,253,.18);
}
.tl__item--hoje .tl__ano{ color:var(--blue); }

@media (min-width:768px){
  .tl{ margin-top:var(--s6); }
  /* dois eixos: ano à esquerda, fato à direita — cria a irregularidade */
  .tl__item{
    grid-template-columns:170px minmax(0,1fr);
    align-items:baseline; gap:var(--s4);
    padding-left:56px; padding-block:var(--s4);
  }
  .tl::before{ left:9px; }
  .tl__item::before{ top:calc(var(--s4) + 12px); width:20px; height:20px; left:0; }
  .tl__ano{ font-size:52px; font-variation-settings:'opsz' 60; }
  .tl__ano--dec{ font-size:30px; font-variation-settings:'opsz' 32; }
  .tl__txt{ font-size:18px; }
}

@media (min-width:1024px){
  .tl__item{ grid-template-columns:220px minmax(0,1fr); }
  .tl__ano{ font-size:64px; font-variation-settings:'opsz' 72; }
}

/* ---------- depoimentos reais: texto longo pede corpo menor e caixa mais generosa ---------- */
.depo{ padding:var(--s4) var(--s3); display:flex; flex-direction:column; }
.depo p{ font-size:16px; line-height:1.65; }
.depo footer{ margin-top:auto; padding-top:var(--s3); color:var(--ink); font-weight:600; }
.depo footer::before{
  content:""; display:block; width:28px; height:2px; background:var(--blue);
  margin-bottom:12px;
}
@media (min-width:1024px){
  .depos{ gap:var(--s3); }
}

/* vídeo no CTA final, mesmo tratamento do hero */
.final__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
@media (prefers-reduced-motion:reduce){ .final__media{ display:none; } }

/* ============================================================
   TIPOGRAFIA — Sora (títulos) + Inter (corpo)
   Sora não é variável no eixo óptico: as regras de 'opsz' herdadas
   da Bricolage não se aplicam e são neutralizadas aqui.
   Sora também é mais larga e tem altura-x maior, então o
   tracking dos títulos precisa fechar um pouco mais.
   ============================================================ */
h1, h2, h3,
.faixa__group span,
.tl__ano, .tl__ano--dec,
.preco b{ font-variation-settings:normal; }

h1{ letter-spacing:-.035em; line-height:1.06; }
h2{ letter-spacing:-.03em; line-height:1.1; }
h3{ letter-spacing:-.02em; font-weight:600; }
.wordmark{ letter-spacing:-.01em; font-weight:700; }

.tl__ano{ letter-spacing:-.04em; }
.faixa__group span{ letter-spacing:.05em; font-weight:600; }
.preco b{ letter-spacing:-.02em; }

@media (min-width:1024px){
  .hero h1{ letter-spacing:-.04em; }
}

/* ---------- respiro entre os chips e a foto do mecanismo ----------
   A <figure> tinha margin:0 inline, que anulava a margem do CSS e
   colava a imagem nos chips. Margem agora controlada aqui. */
.mecanismo__foto{ margin:var(--s5) 0 0; }
.sobre__foto{ margin:var(--s4) 0 0; }

@media (min-width:1024px){
  .mecanismo__foto{ margin:0; }   /* lado a lado: não precisa de respiro vertical */
  .sobre__foto{ margin:0; }
}

/* ---------- estrelas dos depoimentos ---------- */
.estrelas{ display:flex; gap:3px; margin-bottom:var(--s2); }
.estrelas svg{ width:17px; height:17px; color:var(--yellow); flex:none; }

/* ============================================================
   LOGOS REAIS DOS CLIENTES
   Cards viraram <li> com <img>. Altura fixa e object-fit:contain
   normalizam marcas de proporções bem diferentes.
   ============================================================ */
.logos{ list-style:none; padding:0; }
.logos li{
  background:var(--surface); border:1px solid var(--ink-08); border-radius:var(--radius);
  min-height:104px; display:grid; place-items:center; padding:var(--s3);
  filter:grayscale(1); opacity:.7;
  transition:opacity .25s var(--ease), filter .25s var(--ease),
             transform .25s var(--ease), border-color .25s var(--ease);
}
.logos li:hover{ filter:none; opacity:1; transform:translateY(-2px); border-color:var(--ink-12); }
.logos li img{ max-height:52px; width:auto; max-width:100%; object-fit:contain; }

/* Metalbase é logo claro (feito p/ fundo escuro): sem um card escuro
   ele desapareceria no branco. */
.logos li.logos__escuro{ background:var(--ink); border-color:var(--ink); }
.logos li.logos__escuro:hover{ border-color:var(--ink); }

@media (min-width:768px){
  .logos{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .logos li{ min-height:120px; }
  .logos li img{ max-height:58px; }
}

/* ---------- fileira com 7 logos ----------
   Flex centrado em vez de grid: com 7 itens, a última fileira
   fica centralizada em vez de deixar um buraco à direita. */
.logos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2); grid-template-columns:none;
}
.logos li{ flex:1 1 calc(50% - var(--s1)); max-width:calc(50% - var(--s1)); }

@media (min-width:768px){
  .logos{ grid-template-columns:none; }
  .logos li{ flex:1 1 calc(25% - 12px); max-width:calc(25% - 12px); }
}

/* ---------- Metalbase adaptado: agora escuro, dispensa o card navy ---------- */
.logos li.logos__escuro{ background:var(--surface); border-color:var(--ink-08); }

/* ---------- linha do tempo com 3 marcos: textos mais longos pedem mais respiro ---------- */
.tl__txt{ max-width:52ch; }
@media (min-width:768px){
  .tl__item{ padding-block:var(--s5); }
}

/* ============================================================
   PATROCINADOR — bloco no amarelo da marca do Posto do Guerra,
   com o logo centralizado. O amarelo é #FFD101, tirado do próprio
   arquivo do cliente, e não a paleta da Lottinet.
   ============================================================ */
.patrocinador{
  margin-top:var(--s5);
  display:grid; place-items:center; gap:var(--s2);
  padding:var(--s3);
  background:#FFD101;
  border-radius:var(--radius);
  text-align:center;
}
.patrocinador__rotulo{
  font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
}
.patrocinador img{
  height:84px; width:auto; max-width:100%;
}
@media (min-width:768px){
  .patrocinador{ padding:var(--s4); }
  .patrocinador img{ height:104px; }
}

/* ============================================================
   MARCAS — duas fileiras estáticas de 4 logos

   Os logos têm proporções muito diferentes (de 1,73 no CEC a 5,38
   no Metalbase). Com altura igual para todos, o mais largo fica com
   o triplo da área do mais estreito e domina a fileira.

   Por isso cada logo tem sua própria altura em `--h`, calculada como
   1/proporção^0,45 — próximo de área igual, sem deixar os logos
   quadrados grandes demais. Isso aperta a variação de largura
   renderizada de 90–280px para 107–199px.

   `--esc` reescala o conjunto todo por breakpoint sem mexer nas
   proporções relativas entre eles.
   ============================================================ */
.marcas{
  margin-top:var(--s5);
  /* padrão herdado, não no seletor da img: `.marcas__grupo img` tem
     especificidade maior que `.m-cec` e anularia as alturas de cada marca */
  --h:46px;
  --esc:.72;
}
.marcas__grupo{
  display:grid;
  /* minmax(0,1fr) e não 1fr: com 1fr a coluna do logo mais largo estoura */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s3);
  place-items:center;
  list-style:none; margin:0; padding:0;
}
.marcas__grupo li{
  display:grid; place-items:center;
  min-height:calc(68px * var(--esc));  /* linha de base comum: as fileiras alinham */
  inline-size:100%;
}
.marcas__grupo img{
  max-height:calc(var(--h) * var(--esc));
  max-width:100%;
  width:auto; height:auto;            /* sem object-fit: a proporção se mantém sozinha */
  filter:grayscale(1); opacity:.6;
  transition:filter .35s var(--ease), opacity .35s var(--ease), transform .3s var(--ease);
}

/* altura óptica de cada marca, da mais quadrada para a mais alongada */
.m-cec      { --h:62px; }
.m-santarosa{ --h:54px; }
.m-apus     { --h:51px; }
.m-glb      { --h:47px; }
.m-kafer    { --h:46px; }
.m-affare   { --h:41px; }
.m-giongo   { --h:40px; }
.m-metalbase{ --h:37px; }

/* Os degraus abaixo seguem a largura que o Metalbase (o mais alongado,
   199px na escala 1) precisa. Se a coluna ficar menor que ele, `max-width`
   passa a mandar, ele encolhe sozinho e o equilíbrio se perde. */
@media (max-width:359px){
  .marcas{ --esc:.58; }
  .marcas__grupo{ gap:var(--s3) var(--s2); }
}
@media (min-width:600px){
  .marcas{ --esc:.85; }
  .marcas__grupo{ gap:var(--s5) var(--s4); }
}
@media (min-width:900px){
  .marcas__grupo{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1100px){
  .marcas{ --esc:1; }
  .marcas__grupo{ gap:var(--s5); }
}

/* ---------- hover individual: colore só a marca sob o cursor ---------- */
.marcas__grupo li:hover img{ filter:none; opacity:1; transform:scale(1.04); }

/* ============================================================
   RESPOSTAS DA PESQUISA — substitui os depoimentos
   Respostas curtas e reais. Sem estrela e sem nome inventado:
   a pergunta no título é que dá o contexto.
   ============================================================ */
.respostas__intro{ text-align:center; margin-top:var(--s3); }
.respostas{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2); margin-top:var(--s5);
}
.resposta{
  flex:1 1 260px; max-width:340px; margin:0;
  background:var(--surface); border:1px solid var(--ink-08);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:var(--s4) var(--s3);
  display:flex; flex-direction:column; gap:var(--s3);
}
.resposta p{ font-size:18px; line-height:1.45; }
.resposta footer{
  margin-top:auto; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55);
}
.resposta footer::before{
  content:""; display:block; width:24px; height:2px;
  background:var(--blue); margin-bottom:10px;
}
.respostas__nota{
  margin-top:var(--s4); text-align:center;
  font-size:13px; color:var(--ink-55);
}

/* ---------- duas fileiras estáticas ---------- */
.marcas{ display:grid; gap:var(--s5); }