/* =========================================================
   Boleadora Semi Automática — Machinery Prime
   Tokens e medidas extraídos do Figma (frame HOME, 1700px).
   Container do layout: 1275px (x 213 → 1488).
   ========================================================= */

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+2C60-2C7F;
}

:root {
  --azul:         #24437B;
  --azul-card:    #2A3F65;
  --azul-claro:   #446CB4;
  --azul-suave:   #566C94;
  --azul-escuro:  #182640;
  --amarelo:      #E7BA3C;
  --vermelho:     #CC3118;
  --verde:        #6FC227;
  --cinza-bg:     #F0F0F0;
  --cinza-card:   #EEEEEE;
  --cinza-linha:  #E6E6E6;
  --texto:        #2A2A2A;
  --texto-suave:  #5E5E5E;
  --branco:       #FFFFFF;

  --w: 1275px;
  --pad: 32px;
  --r-card: 25px;
  --r-grande: 36px;
  --r-pill: 999px;
  --sombra: 0 4px 4px rgb(0 0 0 / .25);
}

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

/* clip (e não hidden) evita barra horizontal sem transformar o html em contêiner de rolagem */
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto);
  background: #F4F4F4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ico { flex: none; }

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

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amarelo); color: var(--azul); padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 57px; padding: 0 30px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn--amarelo { background: var(--amarelo); color: var(--azul); }
.btn--amarelo:hover { background: #f0c655; transform: translateY(-2px); box-shadow: 0 8px 20px rgb(231 186 60 / .35); }
.btn--linha { border: 1.5px solid var(--branco); color: var(--branco); font-weight: 600; }
.btn--linha:hover { background: var(--branco); color: var(--azul); transform: translateY(-2px); }
.btn--wa { padding: 0 34px; }
.btn--peq { min-height: 48px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.btn--grande { min-height: 76px; padding: 0 40px; border-radius: 10px; font-size: 15px; letter-spacing: .02em; }
.botoes { display: flex; flex-wrap: wrap; gap: 17px; }
.botoes .btn { min-width: 214px; }

/* títulos genéricos */
.t-secao { font-size: 32px; font-weight: 600; color: var(--azul); line-height: 1.4; }
.sobretitulo {
  margin: 0 0 8px; text-align: center;
  font-size: 16px; font-weight: 700; letter-spacing: 1em; text-indent: 1em;
  color: var(--amarelo); text-transform: uppercase;
}

/* listas de check / x */
.lista-check li, .lista-x li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: 16px; font-weight: 600;
}
.lista-check .ico { color: var(--verde); margin-top: 2px; }
.lista-x .ico { color: var(--vermelho); margin-top: 2px; }

/* botão de play circular */
.play {
  display: grid; place-items: center;
  width: 51px; height: 51px; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--branco);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.play--g { width: 78px; height: 78px; border-width: 2px; }
:is(button, a):hover > .play { transform: scale(1.08); background: var(--branco); color: var(--azul); }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 22px 0;
}
.topo.is-fixo { background: rgb(20 32 58 / .92); backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgb(0 0 0 / .25); padding: 12px 0; }
.topo__inner { display: flex; align-items: center; gap: 24px; }
.topo__logo img { width: 94px; height: auto; }

.topo__nav { display: flex; align-items: center; gap: 46px; margin-inline: auto; }
.topo__nav a {
  font-size: 15px; font-weight: 700; color: var(--branco); text-decoration: none;
  letter-spacing: .02em; position: relative; padding: 4px 0;
}
.topo__nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--amarelo); transition: width .25s ease;
}
.topo__nav a:hover::after { width: 100%; }
.topo__nav-wa { display: none; }

.topo__wa { color: var(--branco); display: grid; place-items: center; width: 40px; height: 40px; transition: transform .2s ease, color .2s ease; }
.topo__wa:hover { color: var(--amarelo); transform: scale(1.1); }

.topo__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 6px; }
.topo__burger span { display: block; height: 2px; background: var(--branco); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.topo__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — 1700x953 no Figma
   ========================================================= */
/* Conteúdo ancorado no topo como no Figma (título em y235), não centralizado. */
.hero { position: relative; min-height: 953px; display: flex; align-items: flex-start; overflow: hidden; background: #101B33; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Acima da largura do design, a seção cresce proporcionalmente para a foto nunca cortar. */
@media (min-width: 1701px) { .hero { min-height: 56vw; } }
.hero__inner { position: relative; z-index: 1; padding-top: 225px; }
.hero__texto { max-width: 480px; }
.hero h1 { display: flex; flex-direction: column; font-size: 40px; letter-spacing: -.02em; line-height: 1.15; }
.hero__t1 { font-weight: 400; color: var(--branco); }
.hero__t2 { font-weight: 700; color: var(--amarelo); }
.hero__p { margin: 43px 0 0; font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--branco); max-width: 460px; }
.hero__p strong { font-weight: 700; }
.hero .botoes { margin-top: 46px; }
.hero__video {
  position: relative; overflow: hidden;
  margin-top: 79px; width: 445px; max-width: 100%; height: 210px;
  border: 1.5px solid rgb(255 255 255 / .45); border-radius: 23px;
  display: grid; place-items: center;
  transition: border-color .25s ease, background-color .25s ease;
}
.hero__video:hover { border-color: var(--amarelo); background: rgb(255 255 255 / .05); }
.hero__video--vazio { pointer-events: none; }
.hero__video--vazio .play { opacity: .55; }
.hero__video-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__video--capa::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(15 25 55 / .32); transition: background-color .25s ease; }
.hero__video--capa:hover::after { background: rgb(15 25 55 / .15); }
.hero__video--capa .play { position: relative; z-index: 2; }

/* =========================================================
   MERCADO
   ========================================================= */
.mercado { background: var(--cinza-bg); padding: 260px 0 259px; }
.mercado__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.mercado__txt { max-width: 600px; }
.mercado__sub { margin-top: 30px; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--texto); }
.selos { display: flex; gap: 12px; flex-wrap: wrap; }
.selos img { width: 120px; height: auto; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 100px; }
.card { background: var(--cinza-card); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.card__img { width: 100%; height: 245px; object-fit: cover; }
.card__body { padding: 38px 26px 34px; position: relative; }
.card__ico {
  display: grid; place-items: center; width: 58px; height: 58px;
  background: var(--amarelo); color: var(--azul); border-radius: 12px; margin-bottom: 34px;
}
.card__body h3 { font-size: 24px; color: #000; }
.card__body p { margin-top: 16px; font-size: 15px; font-weight: 400; line-height: 1.45; color: #000; }

/* =========================================================
   DIAGNÓSTICO — split 836 / 864
   ========================================================= */
.diag { display: grid; grid-template-columns: 836fr 864fr; background: var(--azul); min-height: 976px; }
.diag__foto { position: relative; overflow: hidden; }
.diag__foto img { width: 100%; height: 100%; object-fit: cover; }
.diag__painel { display: flex; align-items: center; padding: 60px clamp(24px, 4vw, 70px); }
.diag__conteudo { max-width: 513px; }
.diag h2 { font-size: 36px; font-weight: 700; color: var(--amarelo); line-height: 1.25; }
.diag__lista { margin: 60px 0 0; }
.diag__lista li {
  display: flex; gap: 8px; padding: 16px 0;
  font-size: 20px; font-weight: 600; color: var(--branco); line-height: 1.25;
}
.diag__lista span { color: var(--amarelo); font-weight: 700; }
.diag .btn { margin-top: 48px; }

/* =========================================================
   COMPARATIVO
   ========================================================= */
/* Alturas do Figma: seção 1605px, cards em y591, tags em y1230. */
.comp { position: relative; padding: 177px 0 278px; background: #F7F7F8; overflow: hidden; }
.comp__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.comp > .w { position: relative; z-index: 1; }
.comp__titulo { text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--azul); }
.comp__titulo span { font-size: 32px; font-weight: 400; }
.comp__titulo strong { font-size: 32px; font-weight: 600; }

/* No Figma o card azul avança 26px sobre o cinza (x390+474 = 864 > 838). */
.comp__grid {
  display: grid; grid-template-columns: 474px 474px; justify-content: center; gap: 0;
  margin-top: 324px; align-items: end;
}
.comp__card--maquina { margin-left: -26px; z-index: 2; }
.comp__card { position: relative; border-radius: 54px; padding: 62px 42px 42px; }
.comp__card--manual { background: #EFEFEF; min-height: 441px; }
.comp__card--maquina { background: var(--azul); color: var(--branco); padding-bottom: 48px; min-height: 559px; }
/* No Figma a balança avança só ~45px sobre o topo do card. */
.comp__balanca { position: absolute; left: 50%; translate: -50% 0; bottom: calc(100% - 47px); width: 338px; z-index: 1; }
.comp__card--maquina .comp__balanca { width: 343px; bottom: calc(100% - 41px); }
.comp__selo {
  position: absolute; top: -52px; left: 26px; z-index: 2;
  display: grid; place-items: center; width: 106px; height: 106px; border-radius: 50%;
  color: var(--branco); box-shadow: var(--sombra);
}
.comp__selo--x { background: var(--vermelho); }
.comp__selo--check { background: var(--verde); left: auto; right: calc(100% - 66px); top: -76px; width: 109px; height: 109px; }
.comp__body h3 { font-size: 32px; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.comp__card--manual h3 { color: var(--vermelho); }
.comp__body > ul { margin-top: 24px; }
.comp__card--maquina .lista-check .ico { color: var(--verde); }
.comp__card--maquina .btn { margin-top: 32px; }
/* Figma: caixa de 322px em x1139,y3866 — avança 149px além da borda do card. */
.comp__garantia { position: absolute; right: -149px; top: 17px; width: 322px; z-index: 3; pointer-events: none; }

.comp__tags { display: flex; justify-content: center; gap: 23px; margin-top: 80px; flex-wrap: wrap; }
.comp__tags li {
  display: grid; place-items: center; min-width: 292px; min-height: 97px; padding: 12px 24px;
  background: var(--azul-claro); color: var(--branco); border-radius: 20px;
  font-size: 24px; font-weight: 600; text-align: center;
}

/* =========================================================
   RECURSOS (fundo escuro)
   ========================================================= */
/* Fundo é a própria arte do Figma (1042px de altura), não um gradiente aproximado. */
.rec { position: relative; padding: 81px 0 100px; min-height: 1042px; background: #101B33; color: var(--branco); overflow: hidden; }
.rec__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rec > .w { position: relative; z-index: 1; }
.rec__titulo { text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
/* Duas colunas de 617px com 32px de gap (= 1266px, medida do Figma).
   A máquina fica centralizada por cima, exatamente como no arquivo original. */
.rec__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 122px; align-items: start; position: relative; z-index: 1;
}
.rec__col { display: flex; flex-direction: column; gap: 15px; }
.rec__item {
  display: flex; gap: 22px; align-items: flex-start;
  min-height: 134px; padding: 30px 28px;
  background: var(--azul-card); border-radius: var(--r-card);
  transition: transform .22s ease, background-color .22s ease;
}
.rec__item:hover { transform: translateY(-3px); background: #34507D; }
.rec__ico { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--azul-suave); color: var(--branco); }
/* Largura do texto igual à do Figma (~350px): mantém a coluna livre da máquina ao centro. */
.rec__item > div { max-width: 355px; }
.rec__col--dir .rec__item > div { margin-left: auto; }
.rec__item h3 { font-size: 16px; font-weight: 700; color: var(--amarelo); }
.rec__item p { margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 1.5; }
.rec__col--dir .rec__item { flex-direction: row-reverse; text-align: right; }
.rec__maquina {
  position: absolute; left: 50%; translate: -50% 0; top: -34px;
  width: 361px; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / .35));
}

/* =========================================================
   MULTIPLIQUE
   ========================================================= */
/* A foto de fundo (953px no Figma) cobre o topo da seção; o texto corre por cima. */
.mult { position: relative; background: #F7F7F8; overflow: hidden; }
.mult__bg {
  position: absolute; inset: 0 0 auto; width: 100%; height: 953px;
  object-fit: cover; object-position: center top; z-index: 0;
}
.mult__corpo { position: relative; z-index: 1; padding: 265px 0 206px; }
/* Sem o card de vídeo (removido em 17/08/2026), o par de cards fica centralizado no container. */
.mult__intro { max-width: 620px; }
.mult__intro h2 { font-size: 32px; font-weight: 400; color: var(--azul); line-height: 1.3; }
.mult__intro h2 strong { font-weight: 700; }
.mult__intro p { margin-top: 24px; font-size: 16px; color: var(--texto); line-height: 1.45; }
.mult__intro strong { font-weight: 700; }

/* Proporções do Figma: 374 / 443 px, com o card azul avançando 15px sobre o cinza. */
.mult__grid {
  display: grid; grid-template-columns: 374px 443px; column-gap: 0;
  justify-content: center; margin-top: 160px; align-items: start;
}
/* overflow visível: os selos avançam para fora do card e não podem ser recortados.
   O arredondamento fica na foto e no corpo, cada um no seu canto. */
.mult__card { position: relative; border-radius: 26px; }
.mult__card--antes { margin-top: 42px; }
.mult__card--depois { margin-left: -15px; position: relative; z-index: 2; }
.mult__card--antes { background: #EFEFEF; }
.mult__card--depois { background: var(--azul); color: var(--branco); }
.mult__media { position: relative; border-radius: 26px 26px 0 0; overflow: hidden; }
.mult__media img { width: 100%; aspect-ratio: 374 / 223; object-fit: cover; display: block; }
.mult__card--depois .mult__media img { aspect-ratio: 443 / 264; }
/* Posições do Figma: vermelho x232/y6472 no card x213/y6514; verde x610/y6417 no card x572/y6467. */
.mult__selo {
  position: absolute; z-index: 3;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--branco); box-shadow: var(--sombra);
}
.mult__selo--x { top: -42px; left: 19px; width: 84px; height: 85px; background: var(--vermelho); }
.mult__selo--check { top: -50px; left: 38px; width: 99px; height: 101px; background: var(--verde); }
/* Espaçamento da lista conforme o Figma: 39px entre itens no card cinza, 48px no azul. */
.mult__body { padding: 38px 32px 46px; border-radius: 0 0 26px 26px; }
.mult__card--antes .lista-x li { padding: 9px 0; }
.mult__card--depois .lista-check li { padding: 13px 0; }
.mult__body h3 { font-size: 24px; font-weight: 600; }
.mult__card--antes h3 { color: var(--vermelho); }
.mult__card--depois h3 { color: var(--branco); font-weight: 700; }
.mult__body ul { margin-top: 22px; }
.mult__card--antes .lista-x li { font-size: 14px; font-weight: 400; color: #303030; }
.mult__card--depois .lista-check li { font-size: 16px; }

/* =========================================================
   VÍDEOS
   ========================================================= */
/* O fundo escuro tem 976px (Figma) e termina no meio da faixa azul, que avança
   sobre a área clara da seção seguinte. */
.vid { position: relative; padding: 101px 0 0; background: #F7F7F8; color: var(--branco); overflow: hidden; }
.vid__bg { position: absolute; inset: 0 0 auto; width: 100%; height: 976px; object-fit: cover; }
.vid .w { position: relative; z-index: 1; }
.vid__titulo { text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
/* Os celulares ficam por cima da faixa azul (ordem de pintura do Figma: faixa 31, celulares 111-113). */
.vid__lista { position: relative; z-index: 3; display: flex; justify-content: center; gap: 30px; margin-top: 70px; flex-wrap: wrap; }
.vid__item { position: relative; display: block; width: 304px; border-radius: 28px; overflow: hidden; }
.vid__item img { width: 100%; aspect-ratio: 304 / 630; object-fit: cover; }
.vid__item .play { position: absolute; inset: 0; margin: auto; }
/* Item com "formato": "horizontal" no content.json: cartão panorâmico 16:9 no lugar do celular.
   O fundo escuro encurta na mesma medida (630 − 396 = 234px) para a faixa azul continuar
   cavalgando a divisa escuro/claro como no Figma. Só no desktop: no mobile o fundo é 100%. */
.vid__item--h { width: 704px; max-width: 100%; }
.vid__item--h img { aspect-ratio: 16 / 9; }
@media (min-width: 861px) { .vid--h .vid__bg { height: 742px; } }

.faixa {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px;
  margin-top: -126px; padding: 60px 150px;
  background: var(--azul); border-radius: 48px; min-height: 374px;
}
.faixa__logo { width: 125px; }
.faixa p { font-size: 24px; font-weight: 600; color: var(--branco); line-height: 1.25; max-width: 380px; }

/* =========================================================
   ETAPAS
   ========================================================= */
.etapas { background: #F7F7F8; padding: 0 0 98px; text-align: center; }
.etapas .w { position: relative; padding-top: 0; }
/* Bolinha + linha vertical descendo até o título. A bola fica centrada na borda
   inferior da faixa azul da seção anterior (Figma: y8465). */
.etapas__ponto { position: relative; top: -27px; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 32px; margin: 0 auto; }
.etapas__ponto::before { content: ''; width: 32px; height: 32px; background: var(--amarelo); border-radius: 50%; }
.etapas__ponto::after { content: ''; width: 2px; height: 224px; background: var(--azul-suave); opacity: .35; }
.etapas__titulo { margin-top: 20px; font-size: 36px; font-weight: 400; }
.etapas__titulo strong { font-weight: 700; }

.etapas__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 69px; position: relative; }
.etapas__lista::before {
  content: ''; position: absolute; top: 73px; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--amarelo); opacity: .45; z-index: 0;
}
.etapas__lista li > * { position: relative; z-index: 1; }
.etapas__lista li { position: relative; display: flex; flex-direction: column; align-items: center; }
.etapas__circulo {
  display: grid; place-items: center; width: 147px; height: 147px; border-radius: 50%;
  background: var(--amarelo); padding: 5px;
}
.etapas__circulo img { width: 136px; height: 136px; border-radius: 50%; object-fit: cover; }
.etapas__rotulo { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--amarelo); letter-spacing: .04em; }
.etapas__lista h3 { margin-top: 6px; font-size: 20px; color: var(--azul); }
.etapas__lista p { margin-top: 12px; max-width: 200px; font-size: 13px; font-weight: 400; color: var(--texto); line-height: 1.35; }

/* =========================================================
   TABELA DE MODELOS
   ========================================================= */
.tabela { background: #F7F7F8; padding: 0 0 160px; }
.tabela__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela table { width: min(100%, 1050px); margin-inline: auto; border-collapse: collapse; table-layout: fixed; min-width: 620px; }
.tabela th, .tabela td { padding: 14px 12px; text-align: center; font-size: 15px; font-weight: 700; }
.tabela thead th { color: var(--branco); }
.tabela thead th:nth-child(odd) { background: var(--azul-claro); }
.tabela thead th:nth-child(even) { background: var(--azul-card); }
.tabela tbody th { background: var(--amarelo); color: var(--azul); }
.tabela tbody td { background: var(--cinza-linha); color: var(--azul); }
.tabela tbody tr + tr th, .tabela tbody tr + tr td { border-top: 1px solid rgb(255 255 255 / .6); }

/* =========================================================
   POR QUE A MACHINERY
   ========================================================= */
/* z-index acima da seção seguinte: a máquina desce para além do azul, como no Figma. */
.porque { background: var(--azul); color: var(--branco); position: relative; z-index: 2; }
/* No Figma os cards ocupam x774..1293 e sobra 195px à direita, onde entram máquina e selo. */
.porque__grid {
  display: grid; grid-template-columns: 1fr 519px; gap: 60px; align-items: start;
  padding: 110px 195px 120px 0; position: relative;
}
.porque__texto { max-width: 459px; }
.porque h2 { display: flex; flex-direction: column; font-size: 40px; letter-spacing: -.02em; }
.porque h2 span { font-weight: 400; }
.porque h2 strong { font-weight: 700; color: var(--amarelo); }
.porque__destaque { margin-top: 30px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.porque__texto > p { margin-top: 18px; font-size: 16px; font-weight: 400; line-height: 1.5; }
.porque__amarelo { color: var(--amarelo); }
.porque__amarelo strong { font-weight: 700; }
.porque__texto .botoes { margin-top: 40px; }

.porque__itens { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; position: relative; z-index: 2; }
/* Cards opacos: no Figma a máquina fica atrás deles, sem transparecer. */
.porque__itens li {
  display: flex; gap: 22px; align-items: flex-start;
  width: 476px; max-width: 100%; min-height: 119px; padding: 28px 26px;
  background: var(--azul-card); border-radius: var(--r-card);
  transition: transform .22s ease;
}
.porque__itens li:first-child { width: 100%; }
.porque__itens li:hover { transform: translateX(-4px); }
.porque__ico { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--azul-suave); }
.porque__itens h3 { font-size: 16px; font-weight: 700; color: var(--amarelo); }
.porque__itens p { margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 1.5; }

/* Máquina na frente dos cards e o selo na frente dela (ordem do Figma: cards 75-78, máquina 146, selo 178). */
.porque__maquina { position: absolute; right: 17px; top: 0; width: 351px; z-index: 4; pointer-events: none; }
.porque__selo { position: absolute; right: -48px; top: 138px; width: 215px; z-index: 5; pointer-events: none; }

/* =========================================================
   SEGMENTOS
   ========================================================= */
.segm { background: #F7F7F8; padding: 210px 0 190px; }
.segm__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.segm__card {
  background: var(--azul); color: var(--branco); border-radius: var(--r-grande);
  padding: 18px 20px 44px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.segm__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgb(36 67 123 / .3); }
.segm__media { background: #C4C4C4; border-radius: var(--r-grande); aspect-ratio: 375 / 268; overflow: hidden; }
.segm__media img { width: 100%; height: 100%; object-fit: cover; }
.segm__card :is(h3, p, .btn) { margin-inline: 24px; }
.segm__card h3 { margin-top: 69px; font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.segm__card p { margin: 14px 24px 30px; max-width: 242px; font-size: 15px; font-weight: 400; line-height: 1.5; }
/* botão sempre rente à base, como no Figma (todos alinhados em y=11107) */
.segm__card .btn { margin-top: auto; align-self: flex-start; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: #F7F7F8; padding: 0 0 250px; }
.faq__titulo { text-align: center; font-size: 32px; font-weight: 700; }
.faq__lista { width: min(100%, 1078px); margin: 94px auto 0; display: flex; flex-direction: column; gap: 5px; }
.faq__item { background: var(--cinza-card); border-radius: 9px; overflow: hidden; }
.faq__botao {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 79px; padding: 20px 46px; text-align: left;
  font-size: 20px; font-weight: 600; color: var(--texto-suave);
  transition: color .2s ease;
}
.faq__botao:hover { color: var(--azul); }
.faq__botao .ico { transition: transform .25s ease; color: var(--azul); }
.faq__botao[aria-expanded="true"] { color: var(--azul); }
.faq__botao[aria-expanded="true"] .ico { transform: rotate(180deg); }
.faq__resposta { padding: 0 46px 28px; }
.faq__resposta p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--texto); }
.faq__resposta em { color: var(--texto-suave); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--azul-escuro); color: var(--branco); }
.rodape .w { padding: 115px 0 90px; text-align: center; }
.rodape__logo { width: 173px; margin: 0 auto; }
.rodape h2 { margin-top: 35px; font-size: 32px; font-weight: 700; text-transform: uppercase; }
.rodape__acoes { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 64px; flex-wrap: wrap; }
.redes { display: flex; gap: 12px; }
.redes a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--branco); color: var(--azul);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.redes a:hover { transform: translateY(-3px); background: var(--amarelo); }
.rodape__barra { display: grid; place-items: center; min-height: 59px; padding: 12px var(--pad); background: var(--amarelo); }
.rodape__barra p { font-size: 14px; font-weight: 400; color: var(--azul); text-align: center; }
.rodape__barra strong { font-weight: 700; }

/* WhatsApp flutuante */
.wa-fixo {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: var(--branco); box-shadow: 0 8px 24px rgb(0 0 0 / .3);
  transition: transform .2s ease;
}
.wa-fixo:hover { transform: scale(1.08); }

/* Modal de vídeo */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(6 12 24 / .9); padding: 24px; }
.modal[hidden] { display: none; }
.modal__caixa { width: min(100%, 960px); aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
/* Shorts (9:16) abre em pé, como um story — a largura deriva da altura disponível pra nunca estourar a tela */
.modal__caixa--v { width: min(100%, calc((100vh - 48px) * 9 / 16), 430px); aspect-ratio: 9 / 16; }
.modal__caixa :is(iframe, video) { width: 100%; height: 100%; border: 0; display: block; }
.modal__fechar { position: absolute; top: 18px; right: 24px; font-size: 44px; line-height: 1; color: var(--branco); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1400px) {
  .rec__maquina { width: 320px; }
  .comp__garantia { right: -30px; width: 170px; }
  /* sem folga lateral: máquina e selo recolhem para dentro do container */
  .porque__grid { padding-right: 150px; }
  .porque__maquina { right: 0; width: 300px; }
  .porque__selo { right: 0; width: 180px; }
}

@media (max-width: 1100px) {
  .topo__nav { gap: 28px; }
  .mercado { padding: 150px 0; }
  .cards { gap: 16px; }
  .card__body { padding: 30px 20px 28px; }
  .card__body h3 { font-size: 21px; }

  .diag { grid-template-columns: 1fr; }
  .diag__foto { max-height: 420px; }
  .diag__painel { padding: 70px var(--pad); }
  .diag h2 { font-size: 30px; }
  .diag__lista { margin-top: 36px; }
  .diag__lista li { font-size: 18px; padding: 12px 0; }

  .comp { padding: 120px 0 140px; }
  .comp__grid { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 190px; }
  .comp__card--maquina { margin-left: 0; min-height: 0; }
  .comp__card--manual { min-height: 0; }
  .rec { min-height: 0; }
  .porque__grid { padding-right: 0; }
  .comp__card { padding: 80px 28px 34px; border-radius: 40px; }
  .comp__balanca { width: 260px; }
  .comp__card--maquina .comp__balanca { width: 265px; }
  .comp__body h3 { font-size: 26px; }
  .comp__garantia { display: none; }
  .comp__tags li { min-width: 0; font-size: 20px; }

  .rec__grid { gap: 20px; }
  .rec__maquina { position: static; translate: none; width: 240px; margin: 0 auto 24px; grid-column: 1 / -1; order: -1; }
  .rec__col--dir .rec__item { flex-direction: row; text-align: left; }

  .mult__bg { height: 620px; }
  .mult__corpo { padding: 190px 0 160px; }
  .mult__grid { grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 90px; align-items: start; }
  .mult__card--antes { margin-top: 42px; }
  .mult__card--depois { margin-left: 0; }

  .vid__lista { gap: 20px; margin-top: 80px; }
  .vid__item { width: 260px; }
  .vid__item--h { width: 620px; }
  .faixa { margin-top: 60px; grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 48px 32px; min-height: 0; border-radius: 36px; }
  .faixa p { max-width: none; }

  .etapas__lista { grid-template-columns: repeat(2, 1fr); gap: 56px 24px; }
  .etapas__lista::before { display: none; }
  .etapas__ponto { top: 0; margin-top: 40px; }
  .etapas__ponto::after { height: 110px; }

  .porque__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 90px 0 100px; }
  .porque__texto { max-width: none; }
  .porque__itens li, .porque__itens li:first-child { width: 100%; }
  .porque__maquina, .porque__selo { display: none; }

  .segm { padding: 140px 0 120px; }
  .segm__lista { grid-template-columns: 1fr; max-width: 520px; }
  .segm__card p + .btn { margin-top: 30px; }

  .faq { padding-bottom: 160px; }
  .faq__botao { padding: 20px 28px; font-size: 18px; }
  .faq__resposta { padding: 0 28px 24px; }
}

@media (max-width: 860px) {
  :root { --pad: 20px; }

  .topo { padding: 14px 0; background: rgb(20 32 58 / .92); }
  .topo__burger { display: flex; }
  .topo__wa { margin-left: auto; }
  .topo__nav {
    position: fixed; inset: 62px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--azul-escuro); padding: 8px 0 20px;
    box-shadow: 0 20px 40px rgb(0 0 0 / .4);
    clip-path: inset(0 0 100% 0); transition: clip-path .3s ease;
  }
  .topo__nav.is-aberto { clip-path: inset(0 0 0 0); }
  .topo__nav a { padding: 16px var(--pad); border-bottom: 1px solid rgb(255 255 255 / .08); }
  .topo__nav a::after { display: none; }
  .topo__nav-wa { display: block; color: var(--amarelo); }

  .hero { min-height: 0; padding: 130px 0 90px; align-items: flex-start; }
  .hero__inner { padding-top: 0; }
  .hero__bg { object-position: 72% center; opacity: .5; }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 27 51 / .55), rgb(16 27 51 / .85)); }
  .hero__inner { z-index: 2; }
  .hero h1 { font-size: 32px; }
  .hero__p { margin-top: 28px; }
  .hero .botoes { margin-top: 32px; }
  .botoes .btn { min-width: 0; flex: 1 1 auto; }
  .hero__video { margin-top: 44px; height: 170px; }

  .mercado { padding: 90px 0; }
  .mercado__topo { gap: 34px; }
  .t-secao { font-size: 26px; }
  .mercado__sub { margin-top: 20px; font-size: 17px; }
  .selos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
  .selos img { width: 100%; }
  .cards { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; max-width: 460px; }

  .comp { padding: 80px 0 100px; }
  .comp__titulo span, .comp__titulo strong { font-size: 24px; }
  .comp__grid { grid-template-columns: 1fr; gap: 130px; margin-top: 150px; max-width: 420px; margin-inline: auto; }
  .comp__balanca, .comp__card--maquina .comp__balanca { width: 230px; }
  .comp__selo--check { right: auto; left: 26px; top: -52px; width: 96px; height: 96px; }
  .comp__selo { width: 96px; height: 96px; }
  .comp__tags { gap: 12px; margin-top: 60px; }
  .comp__tags li { min-height: 72px; font-size: 17px; flex: 1 1 100%; }

  .rec { padding: 60px 0 80px; }
  .rec__titulo { font-size: 28px; }
  .rec__grid { grid-template-columns: 1fr; margin-top: 60px; max-width: 480px; margin-inline: auto; }
  .rec__item { min-height: 0; padding: 24px 20px; }

  .mult__bg { height: 420px; }
  /* véu claro à esquerda: no empilhado o texto corre sobre a foto da máquina */
  .mult::after {
    content: ''; position: absolute; inset: 0 0 auto; height: 420px; z-index: 0;
    background: linear-gradient(90deg, #F7F7F8 25%, rgb(247 247 248 / .6) 70%, rgb(247 247 248 / 0) 100%);
  }
  .mult__corpo { padding: 120px 0 100px; }
  .mult__intro h2 { font-size: 24px; }
  .mult__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 46px; }
  .mult__card--antes { margin-top: 0; }
  .mult__selo--x { width: 68px; height: 68px; top: -30px; left: 16px; }
  .mult__selo--check { width: 76px; height: 76px; top: -34px; left: 16px; }

  /* empilhado, o conteúdo passa dos 976px do fundo: escurece a seção toda */
  .vid { padding-top: 70px; background: #101B33; }
  .vid__bg { height: 100%; }
  .vid__titulo { font-size: 28px; }
  .sobretitulo { font-size: 13px; letter-spacing: .5em; text-indent: .5em; }
  .vid__lista { flex-direction: column; align-items: center; gap: 26px; margin-top: 50px; }
  .vid__lista li { display: flex; justify-content: center; width: 100%; }
  .vid__item { width: min(100%, 220px); }
  .vid__item--h { width: 460px; }
  .faixa p { font-size: 20px; }

  .etapas { padding-bottom: 110px; }
  .etapas__titulo { font-size: 26px; }
  .etapas__lista { grid-template-columns: 1fr; gap: 48px; margin-top: 70px; }
  .etapas__lista p { max-width: 300px; }

  .tabela { padding-bottom: 110px; }
  .porque h2 { font-size: 30px; }
  .segm { padding: 90px 0 80px; }
  .faq { padding-bottom: 100px; }
  .faq__lista { margin-top: 50px; }
  .faq__botao { min-height: 66px; padding: 18px 20px; font-size: 16px; }
  .faq__resposta { padding: 0 20px 22px; }

  .rodape .w { padding: 80px 0 60px; }
  .rodape h2 { font-size: 24px; }
  .rodape__acoes { margin-top: 42px; gap: 24px; }
  .btn--grande { min-height: 64px; }
  .wa-fixo { width: 54px; height: 54px; right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 27px; }
  .selos { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 300px; }
  .etapas__titulo { font-size: 24px; }
  .botoes { flex-direction: column; align-items: stretch; }
  .comp__card { padding: 70px 22px 30px; }
  .comp__body h3 { font-size: 22px; }
  .lista-check li, .lista-x li { font-size: 15px; }
  .card__body h3 { font-size: 20px; }
  .rodape__acoes .btn { width: 100%; }
}