/* ==========================================================================
   Desafio Vigorito Nissan — Landing Page
   Implementado a partir do Figma NISSAN_DESAFIO (node 221:51, desktop 1920px).
   O layout original é somente desktop; os breakpoints abaixo são adaptações.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonte da marca — Nissan Brand
   Os .woff2 foram gerados a partir dos .ttf originais (~70% menores).
   A ordem do src importa: o navegador para no primeiro formato que entende,
   então woff2 vem primeiro e woff fica como rede de segurança para navegadores
   antigos. O .eot da pasta original só servia para IE8-11 e foi deixado de
   fora — se você ainda precisar dar suporte a IE, me avise.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Nissan Brand";
  src: url("fonts/NissanBrand-Regular.woff2") format("woff2"),
    url("fonts/NissanBrand-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nissan Brand";
  src: url("fonts/NissanBrand-Bold.woff2") format("woff2"),
    url("fonts/NissanBrand-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nissan Brand";
  src: url("fonts/NissanBrand-Light.woff2") format("woff2"),
    url("fonts/NissanBrand-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores extraídas do Figma */
  --red: #e60626;
  --red-deep: #c50e2a;
  --red-bright: #ed0428;
  --red-dark: #7f0012;
  --ink: #0f0f11;
  --black: #000;
  --white: #fff;
  --grey-100: #f0f0f0;
  --grey-200: #d9d9d9;
  --grey-500: #8a8a8a;

  --grad-btn: linear-gradient(81.26deg, #ed0327 0%, #650010 104.11%);
  /* Raios e centro vindos da matriz do gradiente no Figma (elipse de ~1090
     por ~1450px centrada em 60%/41%). O valor anterior era largo demais e
     clareava a borda superior inteira, criando emenda dura com a seção
     anterior — nas bordas o correto é chegar em #7f0012. */
  --grad-red: radial-gradient(57% 213% at 60% 41%,
      #c50e2a 0%, #a2071e 32.9%, #7f0012 65.7%);

  /* Tipografia */
  --font: "Nissan Brand", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-h1: clamp(2.5rem, 3.75vw, 4.5rem);
  /*  72px */
  --fs-h2: clamp(1.75rem, 2.5vw, 3rem);
  /*  48px */
  --fs-body: clamp(1rem, 1.25vw, 1.5rem);
  /*  24px */
  --fs-lead: clamp(1.125rem, 1.45vw, 1.736rem);

  /* Layout */
  --wrap: 1703px;
  --gutter: clamp(1.25rem, 4vw, 6.5rem);
  --radius-lg: 32px;
  --radius-md: 30px;
  --radius-pill: 212px;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

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

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

/* Quebras de linha manuais, copiadas do Figma. Só valem na medida do
   desktop; abaixo de 901px o texto reflui sozinho. Sempre com um espaço
   antes no HTML, para a frase não colar quando a quebra some. */
.br-md {
  display: none;
}

@media (min-width: 901px) {
  .br-md {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   Tipografia compartilhada
   -------------------------------------------------------------------------- */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.h2--light {
  color: var(--white);
}

.h2--brand {
  color: var(--red-deep);
}

.h2--center {
  text-align: center;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.body--light {
  color: var(--white);
}

.body--center {
  text-align: center;
}

.body+.body {
  margin-top: 1.25em;
}

.is-red {
  color: var(--red);
}

.section-head {
  text-align: center;
}

.section-head__sub {
  margin-top: 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.33;
  letter-spacing: -0.02em;
  color: var(--black);
  text-wrap: balance;
}

.section-head__sub--light {
  color: var(--white);
}

.section-cta {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
/* No Figma todo botão tem o texto centralizado no corpo inteiro e a seta
   ancorada na direita — não é um par texto+seta centralizado junto. */
.btn {
  --btn-fs: clamp(0.9rem, 1.18vw, 1.414rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 1.5vw, 1.5rem) clamp(4rem, 5.5vw, 5.5rem) clamp(1rem, 1.5vw, 1.5rem) clamp(2.5rem, 3.5vw, 3.5rem);
  min-height: 70px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.0015em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(0 0 0 / .22);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.btn__arrow {
  position: absolute;
  right: clamp(1.25rem, 2.2vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  flex: none;
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--gradient {
  background: var(--grad-btn);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  color: var(--red-bright);
}

.btn--white .btn__arrow,
.btn--red .btn__arrow {
  filter: none;
}

.btn--xl {
  --btn-fs: clamp(1rem, 1.38vw, 1.662rem);
  min-height: 82px;
  width: min(609px, 100%);
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Unidade de medida das seções
   As coordenadas do Figma usam cqw (1% da largura da própria seção), não vw.
   vw inclui a barra de rolagem e % não — com a barra na tela os dois passam
   a divergir ~0.8%, e as caixas crescem em relação às posições. cqw mede a
   largura real do container e mantém tudo no mesmo referencial.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {

  .hero,
  .scarcity,
  .benefits,
  .tradein,
  .models,
  .testdrive,
  .samurai,
  .gifts,
  .form-section,
  .legal {
    container-type: inline-size;
  }

  /* O Figma quebra linha de forma gulosa — enche a linha e passa para a
     seguinte. `text-wrap: balance` redistribui as linhas para deixá-las
     parecidas, o que muda onde a quebra cai. Na medida do desktop seguimos
     o Figma; abaixo de 901px o balance volta, porque ali não há referência
     e ele melhora a leitura. */
  .h2,
  .section-head__sub,
  .hero__title,
  .hero__tagline,
  .samurai__title,
  .model__desc {
    text-wrap: wrap;
  }
}

/* ==========================================================================
   1. HERO

   O frame do Figma é 1920x1200 com tudo em coordenadas absolutas. Reproduzir
   isso em fluxo normal muda a distribuição vertical — foi o que aconteceu na
   primeira versão. Então o hero tem dois layouts:

   - base (abaixo de 901px): fluxo empilhado, para caber em tela estreita
   - desktop (901px pra cima): as mesmas coordenadas do Figma, em % e vw,
     dentro de um container com aspect-ratio 1920/1200

   Assim o desktop fica fiel ao pixel e o mobile continua legível.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background: #0d0d10;
  overflow: hidden;
  padding: clamp(13rem, 48vw, 18rem) 0 clamp(3rem, 6vw, 4rem);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .82) 100%);
}

.hero__scrim-bottom {
  display: none;
}

/* Empilhamento igual ao do Figma: Kicks atrás do logo, Kait por cima. */
.hero__car {
  position: absolute;
  height: auto;
  pointer-events: none;
  display: none;
}

.hero__car--kicks {
  z-index: 2;
}

.hero__car--kait {
  z-index: 4;
}

.hero__logo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 2rem;
  width: min(320px, 58%);
  transform: translateX(-50%);
}

.hero__inner {
  position: relative;
  z-index: 5;
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}

.hero__copy {
  width: 100%;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: .89;
  letter-spacing: -0.0007em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}

.hero__lead {
  margin: clamp(1.5rem, 2.4vw, 2.75rem) auto 0;
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.024em;
  color: var(--white);
  text-align: center;
  text-shadow: 0 11px 11px rgb(0 0 0 / .85);
}

.hero__lead strong {
  font-size: 1.4em;
  line-height: 1;
}

/* Contador ------------------------------------------------------------- */
.countdown {
  margin-top: clamp(1.5rem, 2.2vw, 2.25rem);
  display: flex;
  justify-content: center;
  gap: 7px;
}

.countdown__box {
  width: 92px;
  aspect-ratio: 1;
  background: var(--red);
  opacity: .9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  color: var(--white);
}

.countdown__num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: .97;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: .8rem;
  line-height: 1.25;
  letter-spacing: -0.042em;
  text-transform: uppercase;
}

.hero__tagline {
  max-width: 993px;
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -0.0014em;
  text-align: center;
  color: var(--white);
  text-wrap: balance;
}

/* Pills ----------------------------------------------------------------- */
.pills {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.pill {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1vw, 1.1rem);
  padding: clamp(.6rem, .8vw, .75rem) clamp(1rem, 1.3vw, 1.3rem);
  min-height: 84px;
  border-radius: 98px;
  background: rgb(255 255 255 / .5);
  border: 1px solid rgb(255 255 255 / .6);
  backdrop-filter: blur(2px);
}

.pill__icon {
  flex: none;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
}

.pill__icon img {
  width: 49%;
}

.pill__text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.001em;
  color: var(--ink);
}

.pill__l1 {
  font-size: 1.2rem;
}

.pill__l2 {
  font-size: 1.05rem;
}

.pill__big {
  font-size: 1.5em;
}

/* --------------------------------------------------------------------------
   Hero desktop — coordenadas do Figma (frame 1920x1200)
   Todos os valores vêm da divisão da medida original por 1920 (largura) ou
   1200 (altura), então a seção inteira escala junto com a janela.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero {
    aspect-ratio: 1920 / 1200;
    padding: 0;
    background: #d3d3d3;
  }

  .hero__scrim {
    background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0) 100%);
    opacity: .65;
  }

  /* Segundo scrim, subindo da base, que sustenta a tagline, as pills e o CTA */
  .hero__scrim-bottom {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    height: 56.17%;
    z-index: 1;
    background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 100%);
    opacity: .65;
  }

  .hero__car {
    display: block;
  }

  .hero__car--kicks {
    left: 31.35%;
    top: 37.08%;
    width: 39.84%;
  }

  /* 602,445  765w  */
  .hero__car--kait {
    left: 40.68%;
    top: 26.08%;
    width: 73.18%;
  }

  /* 781,313 1405w  */

  .hero__logo {
    left: 34.69%;
    /* 666      */
    top: 3.67%;
    /* 44       */
    width: 30.63%;
    /* 588      */
    transform: none;
  }

  .hero__inner {
    position: static;
    display: block;
    width: auto;
    margin: 0;
  }

  .hero__copy {
    position: static;
  }

  .hero__title {
    position: absolute;
    z-index: 5;
    left: 7.24%;
    /* 139      */
    top: 17.17%;
    /* 206      */
    width: 33.8%;
    /* 649      */
    font-size: 3.75cqw;
    /* 72       */
    line-height: 3.333cqw;
    /* 64       */
    text-align: left;
    text-wrap: nowrap;
  }

  .hero__lead {
    position: absolute;
    z-index: 5;
    left: 7.24%;
    /* 139      */
    top: 41.7%;
    /* 500      */
    width: 27.03%;
    /* 519      */
    margin: 0;
    max-width: none;
    font-size: 1.4467cqw;
    /* 27.78    */
    line-height: 1.815cqw;
    /* 34.85    */
    text-align: left;
  }

  .hero__lead strong {
    font-size: 2.0833cqw;
  }

  /* 40       */

  .countdown {
    position: absolute;
    z-index: 5;
    left: 7.24%;
    /* 139      */
    top: 54.17%;
    /* 650      */
    margin: 0;
    gap: .365cqw;
    /* 7        */
  }

  .countdown__box {
    width: 6.042cqw;
  }

  /* 116      */
  .countdown__num {
    font-size: 2.826cqw;
    /* 54.26    */
    line-height: 2.73cqw;
  }

  .countdown__label {
    font-size: 1.033cqw;
    /* 19.84    */
    line-height: 1.29cqw;
  }

  .hero__tagline {
    position: absolute;
    z-index: 5;
    left: 24.14%;
    /* centrado */
    top: 69.25%;
    /* 831      */
    width: 51.72%;
    /* 993      */
    max-width: none;
    font-size: 1.2533cqw;
    /* 24.06    */
    line-height: 1.3926cqw;
    /* 26.74    */
  }

  .pills {
    position: absolute;
    z-index: 5;
    left: 4.58%;
    /* 88       */
    top: 74.42%;
    /* 893      */
    width: 90.83%;
    /* até 1832 */
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  /* Medidas em vw, não em %: porcentagem de width/padding resolve contra o
     container (.pills, 1744px), o que encolhia a pill de 400 para 363. */
  .pill {
    width: 20.833cqw;
    /* 400      */
    min-height: 0;
    height: 5.677cqw;
    /* 109      */
    padding: 0 0 0 1.302cqw;
    /* 25       */
    gap: .849cqw;
    /* 16       */
    border-radius: 5.122cqw;
    /* 98.35    */
  }

  /* No Figma cada linha é um nó de texto próprio, sem quebra automática.
     Sem isto o texto reflui e desalinha as quatro pills entre si. */
  .pill__l1,
  .pill__l2 {
    white-space: nowrap;
  }

  .pill__icon {
    width: 3.632cqw;
  }

  /* 69.74    */
  .pill__icon img {
    width: 1.786cqw;
  }

  /* 34.29    */

  /* Corpos de texto individuais, como no Figma */
  .pill--taxa .pill__text {
    transform: translateY(-0.4cqw);
  }

  .pill--taxa .pill__l1 {
    font-size: 2.083cqw;
  }

  /* 40       */
  .pill--taxa .pill__l2 {
    font-size: 2.083cqw;
  }

  /* 40       */
  .pill--taxa .pill__big {
    font-size: 1.6em;
  }

  /* 64       */

  .pill--nf .pill__l1 {
    font-size: 1.667cqw;
  }

  /* 32       */
  .pill--nf .pill__l2 {
    font-size: 1.979cqw;
  }

  /* 38       */

  .pill--ipva .pill__l1 {
    font-size: 2.5cqw;
  }

  /* 48       */
  .pill--ipva .pill__l2 {
    font-size: 1.667cqw;
  }

  /* 32       */

  .pill--fipe .pill__l1 {
    font-size: 2.344cqw;
  }

  /* 45       */
  .pill--fipe .pill__l2 {
    font-size: 1.231cqw;
  }

  /* 23.64    */

  .hero .btn--xl {
    position: absolute;
    z-index: 5;
    left: 34.14%;
    /* centrado */
    top: 88%;
    /* 1056     */
    width: 31.72%;
    /* 609      */
    height: 4.28cqw;
    /* 82.25    */
    min-height: 0;
    /* Assimétrico, como no Figma: o texto é centralizado na área à esquerda
       da seta, não no corpo inteiro do botão. */
    padding: 0 4.19cqw 0 2.42cqw;
    /* 80.4 / 46.5 */
    font-size: 1.3847cqw;
    /* 26.59    */
    white-space: nowrap;
  }

  .hero .btn--xl .btn__arrow {
    right: 7.71%;
    width: 1.55cqw;
    height: 1.55cqw;
  }
}

/* ==========================================================================
   2. ESCASSEZ
   ========================================================================== */
/* Mesmo princípio do hero: frame de 1920x700 com coordenadas absolutas.
   Base empilhada para tela estreita, coordenadas do Figma no desktop. */
.scarcity {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 6.6vw, 8rem) 0;
  background: var(--grad-red);
  overflow: hidden;
}

.scarcity__cars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scarcity__car {
  position: absolute;
}

.scarcity__car--kicks {
  z-index: 1;
}

.scarcity__car--versa {
  z-index: 2;
}

.scarcity__car--kait {
  z-index: 3;
}

/* Versa e Kait entram recortados no Figma: a moldura define o enquadramento
   e a imagem é ampliada e deslocada dentro dela. */
.scarcity__car--versa,
.scarcity__car--kait {
  overflow: hidden;
}

.scarcity__car--versa img,
.scarcity__car--kait img {
  position: absolute;
  max-width: none;
  height: auto;
}

/* Os recortes são relativos à própria moldura, então valem em qualquer
   tamanho — ficam na base para servir mobile e desktop. */
.scarcity__car--versa img {
  width: 174.17%;
  left: -40.09%;
  top: -19.17%;
}

.scarcity__car--kait img {
  width: 194.12%;
  left: -48.84%;
  top: -46.71%;
}

.scarcity__inner {
  position: relative;
  z-index: 4;
}

.scarcity__text {
  margin-top: 1.5rem;
}

.scarcity__copy .btn {
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
}

/* Contorno arredondado em volta de "57 unidades". Feito com pseudo-elemento
   para não empurrar as linhas seguintes do título. */
/* O Figma usa espaço duplo antes de "57" para afastar o contorno da palavra
   anterior; aqui isso vira margem, que não colapsa nem depende do HTML. */
.hl-pill {
  position: relative;
  white-space: nowrap;
  margin-left: .22em;
}

/* Altura fixa em em (54/48 do Figma) e centrada na linha. Sem isso o
   contorno herda a caixa da fonte — bem mais alta que o texto — e invade
   a linha de baixo. */
.hl-pill::before {
  content: "";
  position: absolute;
  left: -0.3em;
  right: -0.3em;
  top: 50%;
  height: 1.125em;
  transform: translateY(-50%);
  border: 1px solid var(--white);
  border-radius: 40px;
  pointer-events: none;
}

@media (min-width: 901px) {
  .scarcity {
    aspect-ratio: 1920 / 700;
    padding: 0;
  }

  .scarcity__car--kicks {
    /* 221:121 */
    left: 33.70%;
    top: 12.14%;
    width: 42.71%;
    /* 647,85 820w */
  }

  .scarcity__car--versa {
    /* 221:122 */
    left: 68.22%;
    top: 27.57%;
    /* 1309.9,192.99 */
    width: 26.78%;
    aspect-ratio: 514.102 / 331.753;
  }

  .scarcity__car--versa img {
    width: 174.17%;
    height: auto;
    left: -40.09%;
    top: -19.17%;
  }

  .scarcity__car--kait {
    /* 221:123 */
    left: 55.60%;
    top: 24.47%;
    /* 1067.55,171.32 */
    width: 27.71%;
    aspect-ratio: 532.06 / 400.362;
  }

  .scarcity__car--kait img {
    width: 194.12%;
    height: auto;
    left: -48.84%;
    top: -46.71%;
  }

  .scarcity__inner {
    position: static;
    width: auto;
    margin: 0;
  }

  .scarcity__copy {
    position: absolute;
    z-index: 4;
    left: 8.125%;
    /* 156      */
    top: 18.14%;
    /* 127      */
    width: 47.66%;
    /* 915      */
  }

  .scarcity__copy .h2 {
    font-size: 2.5cqw;
    /* 48       */
    line-height: 2.5cqw;
    /* 48       */
  }

  .scarcity__text {
    width: 65.03%;
    /* 595      */
    margin-top: 1.979cqw;
    /* 38       */
  }

  .scarcity__text .body {
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.406cqw;
    /* 27       */
  }

  .scarcity__text .body+.body {
    margin-top: 1.406cqw;
  }

  .scarcity__copy .btn {
    margin-top: 1.719cqw;
    /* 33       */
    width: 15.625cqw;
    /* 300      */
    height: 3.646cqw;
    /* 70       */
    min-height: 0;
    padding: 0 2.97cqw 0 1.72cqw;
    font-size: 1.178cqw;
    /* 22.61    */
  }

  .scarcity__copy .btn .btn__arrow {
    right: 11%;
    width: 1.25cqw;
    height: 1.25cqw;
  }
}

/* ==========================================================================
   3. PACOTE DE VANTAGENS
   ========================================================================== */
.benefits {
  padding: clamp(3rem, 5.6vw, 5.4rem) 0 clamp(3rem, 5vw, 5rem);
}

.benefit-grid {
  margin-top: clamp(2.5rem, 5.3vw, 5.3rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.05vw, 1rem);
  max-width: 1181px;
  margin-inline: auto;
}

.benefit {
  background: var(--red);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1.6vw, 1.85rem) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.benefit__head {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 1vw, 1.1rem) 1rem clamp(1rem, 1.5vw, 1.6rem);
}

.benefit__head h3 {
  font-size: clamp(1.1rem, 1.46vw, 1.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.002em;
  text-align: center;
  color: var(--white);
}

.benefit__body {
  background: var(--white);
  border-radius: 20px;
  margin: 0 clamp(.4rem, .45vw, .5rem) clamp(.4rem, .45vw, .5rem);
  padding: clamp(1.5rem, 2vw, 2.4rem) clamp(1rem, 1.2vw, 1.3rem);
  min-height: 187px;
  display: grid;
  place-items: center;
}

.benefit__body p {
  font-size: clamp(.95rem, 1.15vw, 1.375rem);
  line-height: 1.1;
  letter-spacing: -0.002em;
  text-align: center;
  color: var(--black);
}

.benefits .section-cta {
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

/* ==========================================================================
   4. SEMINOVO
   ========================================================================== */
.tradein {
  padding: clamp(2rem, 3.4vw, 3.4rem) 0;
}

.tradein__banner {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--grad-red);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.5rem, 5.7vw, 6.3rem) clamp(1.5rem, 6.4vw, 7.2rem);
  min-height: 599px;
}

.tradein__copy {
  max-width: 595px;
}

.tradein__copy .body {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.tradein__copy .btn {
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
}

.tradein__media {
  display: grid;
  place-items: center;
}

.tradein__hand {
  width: min(636px, 100%);
}

/* Empilhado, o disco branco não tem como acompanhar a mão sem virar um
   cálculo frágil — e a mão sozinha sobre o vermelho lê bem. */
.tradein__disc {
  display: none;
}

/* ==========================================================================
   5. MODELOS
   ========================================================================== */
.models {
  padding: clamp(3rem, 5vw, 5rem) 0;
}

.model-grid {
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.2vw, 1.3rem);
}

.model {
  display: flex;
  flex-direction: column;
}

.model__media {
  display: grid;
  place-items: end center;
  height: clamp(170px, 15vw, 290px);
  padding-bottom: clamp(.5rem, 1vw, 1rem);
}

.model__media img {
  max-height: 100%;
  width: auto;
  max-width: min(92%, 422px);
  object-fit: contain;
}

.model__card {
  background: var(--grey-100);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.5vw, 2.6rem) clamp(1.5rem, 3vw, 3.4rem) clamp(1.75rem, 2.5vw, 2.5rem);
  text-align: center;
  flex: 1;
}

.model__name {
  font-size: clamp(1.25rem, 1.67vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.019em;
  margin-bottom: 1rem;
}

.model__desc {
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.019em;
  text-wrap: balance;
}

.models .section-cta {
  margin-top: clamp(2.5rem, 4.3vw, 4.3rem);
}

/* ==========================================================================
   6. TEST-DRIVE + UNIDADES
   ========================================================================== */
.testdrive {
  position: relative;
  isolation: isolate;
  background: var(--black);
  padding-top: clamp(3rem, 7.8vw, 9.3rem);
}

.testdrive__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 616px;
  z-index: -1;
  opacity: .5;
}

.testdrive__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.testdrive__lead {
  margin-top: clamp(1.25rem, 2vw, 2.25rem);
  margin-inline: auto;
  max-width: 853px;
}

.testdrive .section-cta {
  margin-top: clamp(2rem, 3.5vw, 3.6rem);
}

/* No Figma as fotos das unidades ficam sobre o preto e só a base delas
   invade a faixa branca. A faixa é desenhada como pseudo-elemento atrás
   dos cards, para o recorte acontecer na altura certa em qualquer largura. */
.stores-wrap {
  position: relative;
  margin-top: clamp(3rem, 7vw, 8.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.stores-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: var(--white);
  z-index: 0;
}

.stores {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.6vw, 1.75rem);
}

.store {
  border-radius: 28px;
  overflow: hidden;
  background: var(--grey-100);
}

.store__photo {
  aspect-ratio: 560 / 247;
}

/* As fotos vêm exportadas já com o recorte da máscara (560x412); a área
    visível é o topo delas, o resto fica atrás da barra cinza. */
.store__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.store__info {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.4vw, 1.5rem);
  padding: clamp(1rem, 1.5vw, 1.6rem) clamp(1.25rem, 2.2vw, 2.4rem);
  min-height: 112px;
}

.store__pin {
  width: 42px;
  flex: none;
}

.store__info h3 {
  font-size: clamp(1.05rem, 1.18vw, 1.415rem);
  font-weight: 700;
  letter-spacing: -0.021em;
}

.store__info p {
  font-size: clamp(.9rem, .98vw, 1.18rem);
  letter-spacing: -0.021em;
}

.stores__note {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 3.4vw, 3.4rem);
  text-align: center;
  font-size: clamp(1.1rem, 1.57vw, 1.887rem);
  letter-spacing: -0.025em;
  line-height: 1.19;
}

.stores__note a {
  color: var(--red);
  text-decoration: underline;
}

/* ==========================================================================
   7. BRINDES
   ========================================================================== */
.gifts {
  padding: clamp(3rem, 7vw, 8.5rem) 0;
  background: var(--grad-red);
}

/* A caixa cinza saiu na revisão: agora a seção inteira é vermelha e os
   blocos ficam soltos sobre ela. O elemento vira só o container de posição. */
.gifts__box {
  position: relative;
  background: none;
  border-radius: 0;
  padding: clamp(2.5rem, 4vw, 4.5rem) clamp(1.5rem, 3.8vw, 4.3rem);
  display: grid;
  grid-template-columns: 1.06fr 1fr 1.12fr;
  align-items: center;
  gap: clamp(1.25rem, 1.8vw, 1.9rem);
  min-height: 401px;
}

.gifts__copy .h2 {
  line-height: 1;
  text-wrap: nowrap;
}

.gifts__media {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 0;
}

.gifts__media img {
  width: 100%;
  max-width: 520px;
}

.gifts__side .body+.body {
  margin-top: 1rem;
}

.gifts__side .btn {
  margin-top: clamp(1.5rem, 2.4vw, 2.4rem);
}

/* ==========================================================================
   8. FORMULÁRIO
   ========================================================================== */
/* Na revisão do Figma esta seção inverteu: era degradê vermelho com texto
   branco, virou cinza claro com título vermelho e texto quase preto. */
.form-section {
  padding: clamp(3rem, 6.5vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background: var(--grey-100);
  /* #f0f0f0  */
}

.form-section .section-head__sub {
  margin-inline: auto;
  max-width: 945px;
  color: #111;
}

.lead-form {
  margin-top: clamp(2.5rem, 4.5vw, 4.5rem);
  margin-inline: auto;
  width: min(945px, 100%);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.5rem, 3.7vw, 4.2rem);
  display: grid;
  gap: clamp(.75rem, 1vw, .95rem);
}

.field input,
.field select {
  width: 100%;
  min-height: 71px;
  padding: 0 clamp(1.25rem, 1.7vw, 1.7rem);
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgb(217 217 217 / .4);
  font-family: inherit;
  font-size: clamp(1rem, 1.04vw, 1.25rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  appearance: none;
}

.field select {
  color: var(--grey-500);
}

.field select:valid {
  color: var(--ink);
}

.field input::placeholder {
  color: var(--grey-500);
}

.field input:focus,
.field select:focus {
  outline: 0;
  border-color: var(--red);
  background: rgb(217 217 217 / .55);
}

.unit-field {
  border: 0;
  padding: clamp(1rem, 1.4vw, 1.5rem) 0 0;
  margin: 0;
}

.unit-field legend {
  padding: 0;
  font-size: clamp(1rem, 1.04vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.unit-options {
  margin-top: clamp(1rem, 1.4vw, 1.45rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4.4vw, 5rem);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1rem, 1.04vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  cursor: pointer;
}

.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio__dot {
  width: 23px;
  height: 23px;
  border: 2px solid var(--grey-500);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color .15s ease;
}

.radio__dot::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform .15s ease;
}

.radio input:checked+.radio__dot {
  border-color: var(--red);
}

.radio input:checked+.radio__dot::after {
  transform: scale(1);
}

.radio input:focus-visible+.radio__dot {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.lead-form .btn {
  margin-top: clamp(1rem, 1.6vw, 1.7rem);
}

/* ==========================================================================
   9. LEGAL
   ========================================================================== */
.legal {
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(3rem, 5vw, 5rem);
  background: var(--white);
}

.legal__logo {
  width: 296px;
  margin: 0 auto clamp(2rem, 3vw, 3rem);
}

.legal__text {
  font-size: 16px;
  line-height: 1.125;
  letter-spacing: -0.03em;
  text-align: justify;
  color: var(--black);
}

/* ==========================================================================
   COORDENADAS DO FIGMA — seções 3 a 9

   As seções 1 e 2 já trazem seu próprio bloco desktop mais acima. Aqui vêm
   as demais, no mesmo princípio: cada seção recebe o aspect-ratio do frame
   original e os blocos são posicionados pelas coordenadas do Figma.

   Conversão: 1vw = 19.2px na largura de referência de 1920. Valores de
   `top` em % resolvem contra a altura da própria seção, por isso cada
   percentual está calculado sobre a altura do frame correspondente.

   Abaixo de 901px nada disto vale — o layout volta ao fluxo empilhado.
   ========================================================================== */
@media (min-width: 901px) {

  /* ---------- 3. PACOTE DE VANTAGENS — frame 1920x775 ---------- */
  .benefits {
    aspect-ratio: 1920 / 775;
    padding: 0;
    position: relative;
  }

  .benefits .container {
    position: static;
  }

  .benefits .section-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 11.10%;
    /* 86       */
  }

  .benefits .h2 {
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  /* 48/48    */
  .benefits .section-head__sub {
    margin-top: .3125cqw;
    /* 6        */
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.667cqw;
    /* 32       */
  }

  .benefit-grid {
    position: absolute;
    left: 19.27%;
    /* 370      */
    top: 29.03%;
    /* 225      */
    width: 61.50%;
    /* até 1550.7 */
    margin: 0;
    max-width: none;
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  .benefit {
    width: 14.763cqw;
    /* 283.4    */
    height: 18.214cqw;
    /* 349.7    */
    border-radius: 1.5625cqw;
    /* 30       */
    padding: 0;
  }

  .benefit__head {
    padding: .6cqw .8cqw;
  }

  .benefit__head h3 {
    font-size: 1.4583cqw;
    /* 28       */
    line-height: 1.71875cqw;
    /* 33       */
  }

  .benefit__body {
    margin: 0 2.6% .432cqw;
    /* 7.36 / 8.3 */
    height: 9.73cqw;
    /* 186.8    */
    min-height: 0;
    border-radius: 1.042cqw;
    /* 20       */
    padding: 0 7.7%;
  }

  .benefit__body p {
    font-size: 1.1458cqw;
    /* 22       */
    line-height: 1.25cqw;
    /* 24       */
  }

  .benefits .section-cta {
    position: absolute;
    left: 36.35%;
    /* 698      */
    top: 79.74%;
    /* 618      */
    margin: 0;
  }

  .benefits .section-cta .btn {
    width: 26.98cqw;
    /* 518      */
    height: 3.643cqw;
    /* 70       */
    min-height: 0;
    padding: 0 3.6cqw 0 2.1cqw;
    font-size: 1.178cqw;
    white-space: nowrap;
    /* 22.6     */
  }

  /* ---------- 4. SEMINOVO — frame 1920x653 ---------- */
  .tradein {
    aspect-ratio: 1920 / 653;
    padding: 0;
    position: relative;
  }

  .tradein .container {
    position: static;
  }

  .tradein__banner {
    position: absolute;
    left: 5.65%;
    /* 108.5    */
    top: 8.27%;
    /* 54       */
    width: 88.70%;
    /* 1703     */
    height: 91.73%;
    /* 599      */
    display: block;
    padding: 0;
    min-height: 0;
    border-radius: 1.667cqw;
    /* 32       */
    overflow: visible;
    /* a foto sai por cima */
  }

  .tradein__copy {
    position: absolute;
    left: 10.72%;
    /* 291      */
    top: 7.85%;
    /* 101      */
    width: 34.94%;
    /* 595      */
    max-width: none;
  }

  .tradein__copy .h2 {
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  .tradein__copy .body {
    margin-top: 1.25cqw;
    /* 269-101-144 */
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.406cqw;
    /* 27       */
  }

  .tradein__copy .btn {
    margin-top: 1.25cqw;
    /* 536-269-243 */
    width: 22.81cqw;
    /* 438      */
    height: 3.646cqw;
    /* 70       */
    min-height: 0;
    padding: 0 3.4cqw 0 2cqw;
    font-size: 1.178cqw;
  }

  /* Disco e mão têm coordenadas próprias no Figma, por isso a moldura cobre
     o banner inteiro e cada peça se posiciona dentro dela. */
  .tradein__media {
    position: absolute;
    inset: 0;
    width: auto;
    display: block;
    pointer-events: none;
  }

  .tradein__disc {
    display: block;
    position: absolute;
    left: 57.46%;
    /* 1087     */
    top: 7.18%;
    /* 97       */
    width: 30.48%;
    /* 519      */
    max-width: none;
  }

  .tradein__hand {
    position: absolute;
    left: 56.69%;
    /* 1074     */
    top: -10.02%;
    /* -6       */
    width: 37.35%;
    /* 636      */
    max-width: none;
  }

  /* ---------- 5. MODELOS — frame 1920x792 ---------- */
  .models {
    aspect-ratio: 1920 / 792;
    padding: 0;
    position: relative;
  }

  .models .container {
    position: static;
  }

  .models .section-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 10.23%;
    /* 81       */
  }

  .models .h2 {
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  .models .section-head__sub {
    margin-top: .3125cqw;
    font-size: 1.25cqw;
    line-height: 1.667cqw;
  }

  .model-grid {
    position: absolute;
    left: 5.68%;
    /* 109      */
    top: 40.55%;
    /* 321.14   */
    width: 88.59%;
    /* até 1810 */
    margin: 0;
    max-width: none;
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  .model {
    position: relative;
    width: 29.11cqw;
    /* 559      */
    height: 15.469cqw;
    /* 297      */
    display: block;
  }

  .model__card {
    position: absolute;
    inset: 0;
    border-radius: 1.5625cqw;
    /* 30       */
    /* % de padding resolve contra a LARGURA do container, não a altura:
       os 122px do Figma são 21.82% dos 559 de largura, não dos 297 de altura. */
    padding: 21.82% 6% 0;
    /* texto em 443 */
  }

  .model__name {
    font-size: 1.667cqw;
    /* 32       */
    line-height: 1.667cqw;
    margin-bottom: .833cqw;
    /* 16       */
  }

  .model__desc {
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.276cqw;
    /* 24.49    */
  }

  /* Os carros sobem para fora do card cinza, como no Figma. Kait e Kicks
     entram recortados; o Versa usa a imagem inteira. */
  .model__media {
    position: absolute;
    z-index: 1;
    height: auto;
    padding: 0;
  }

  /* max-height: none desfaz o teto da regra base — sem isso a imagem
     ampliada é cortada de volta na altura da moldura. */
  .model__media img {
    position: absolute;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .model--kait .model__media {
    left: 21.29%;
    top: -41.46%;
    width: 61.72%;
    /* 228,198 345w */
    aspect-ratio: 345 / 235;
    overflow: hidden;
  }

  .model--kait .model__media img {
    width: 174.36%;
    height: auto;
    left: -38.54%;
    top: -45%;
  }

  .model--kicks .model__media {
    left: 11.63%;
    top: -52.45%;
    width: 75.49%;
    /* 745,165 422w */
    aspect-ratio: 422 / 285.779;
    overflow: hidden;
  }

  .model--kicks .model__media img {
    width: 145.7%;
    height: auto;
    left: -29.03%;
    top: -16.42%;
  }

  .model--versa .model__media {
    left: -25.40%;
    top: -66.71%;
    width: 142.40%;
    /* 1109,123 796w */
    aspect-ratio: 796 / 448;
  }

  .model--versa .model__media img {
    left: 0;
    top: 0;
  }

  .models .section-cta {
    position: absolute;
    left: 33.85%;
    /* 650      */
    top: 83.21%;
    /* 659      */
    margin: 0;
  }

  .models .section-cta .btn {
    width: 32.29cqw;
    /* 620      */
    height: 3.646cqw;
    min-height: 0;
    padding: 0 3.6cqw 0 2.1cqw;
    font-size: 1.178cqw;
    white-space: nowrap;
  }

  /* ---------- 6. TEST-DRIVE — frame 1920x1048 ---------- */
  /* A faixa branca vai de -26px a 1946 no Figma; sem o clipe ela alarga
     a página inteira e cria barra de rolagem horizontal. */
  .testdrive {
    aspect-ratio: 1920 / 1048;
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  .testdrive .container {
    position: static;
  }

  .testdrive__bg {
    left: 0;
    top: -0.19%;
    /* -2       */
    width: 93.80%;
    /* 1801     */
    height: 58.78%;
    /* 616      */
    opacity: .5;
  }

  .testdrive__bg {
    overflow: hidden;
  }

  .testdrive__bg img {
    position: absolute;
    left: 0;
    top: -22.11%;
    width: 62.63%;
    height: 122.06%;
    object-fit: cover;
  }

  .testdrive__inner {
    position: static;
  }

  .testdrive .h2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 14.22%;
    /* 149      */
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  .testdrive__lead {
    position: absolute;
    left: 27.79%;
    /* 533.5    */
    top: 21.09%;
    /* 221      */
    width: 44.43%;
    /* 853      */
    max-width: none;
    margin: 0;
    font-size: 1.25cqw;
    line-height: 1.667cqw;
  }

  .testdrive .section-cta {
    position: absolute;
    left: 35.57%;
    /* 683      */
    top: 30.82%;
    /* 323      */
    margin: 0;
  }

  .testdrive .section-cta .btn {
    width: 28.91cqw;
    /* 555      */
    height: 3.646cqw;
    min-height: 0;
    padding: 0 3.6cqw 0 2.1cqw;
    font-size: 1.178cqw;
    white-space: nowrap;
  }

  .stores-wrap {
    position: static;
    margin: 0;
    padding: 0;
  }

  .stores-wrap::before {
    left: -1.35%;
    right: -1.35%;
    /* -26      */
    top: 81.39%;
    /* 853      */
    height: 21.56%;
    /* 226      */
    width: auto;
  }

  /* A altura útil do card não é a do nó (335.9): a foto é recortada por uma
     máscara que sobe 76.39px acima do topo do grupo, e a barra cinza desce
     22.7px abaixo dele. O card visível vai de 507.61 a 942.61 — 435px. */
  .stores {
    position: absolute;
    left: 5.625%;
    /* 108      */
    top: 48.44%;
    /* 507.61   */
    width: 88.75%;
    /* até 1812 */
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  .store {
    width: 29.19cqw;
    /* 560.45   */
    height: 22.656cqw;
    /* 435      */
    position: relative;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .store__photo {
    position: absolute;
    inset: 0 0 25.75% 0;
    /* 323      */
    aspect-ratio: auto;
    border-radius: 1.474cqw 1.474cqw 0 0;
    /* 28.3     */
    overflow: hidden;
  }

  .store__info {
    position: absolute;
    inset: 74.25% 0 0 0;
    /* 323      */
    background: var(--grey-100);
    border-radius: 0 0 1.474cqw 1.474cqw;
    padding: 0 0 0 7.58%;
    /* 42.46    */
    min-height: 0;
    gap: 4.26%;
    /* 23.9     */
  }

  .store__pin {
    width: 2.195cqw;
  }

  /* 42.1     */
  .store__info h3 {
    font-size: 1.179cqw;
    line-height: 1.179cqw;
  }

  /* 22.6     */
  .store__info p {
    font-size: .983cqw;
    line-height: 1.179cqw;
  }

  /* 18.9     */

  .stores__note {
    position: absolute;
    left: 0;
    right: 0;
    top: 92.84%;
    /* 973      */
    margin: 0;
    font-size: 1.573cqw;
    /* 30.2     */
    line-height: 1.867cqw;
    /* 35.9     */
  }

  /* ---------- 7. BRINDES — frame 1920x675 ---------- */
  .gifts {
    aspect-ratio: 1920 / 672;
    padding: 0;
    position: relative;
  }

  .gifts .container {
    position: static;
  }

  /* Sem a caixa cinza, tudo se posiciona direto sobre a seção. */
  .gifts__box {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: block;
    padding: 0;
    min-height: 0;
  }

  .gifts__copy {
    position: absolute;
    left: 9.479%;
    /* 182      */
    top: 36.61%;
    /* 246      */
    width: 24.79%;
    /* 476      */
  }

  .gifts__copy .h2 {
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  .gifts__media {
    position: absolute;
    left: 31.458%;
    /* 604      */
    top: 6.548%;
    /* 44       */
    width: 31.042%;
    /* 596      */
    display: block;
  }

  .gifts__media img {
    width: 100%;
    max-width: none;
  }

  .gifts__side {
    position: absolute;
    left: 65%;
    /* 1248     */
    top: 33.78%;
    /* 227      */
    width: 28.542%;
    /* 548      */
  }

  .gifts__side .body {
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.667cqw;
    /* 32       */
  }

  /* No Figma os dois parágrafos são um único bloco de texto corrido, com a
     mesma entrelinha de 32px e nenhum respiro entre eles. */
  .gifts__side .body+.body {
    margin-top: 0;
  }

  .gifts__side .btn {
    /* O Figma põe o texto em 1248 e o botão em 1251 — 3px de diferença
       dentro da mesma coluna. Seguindo o valor do próprio botão. */
    margin-left: .156cqw;
    /* 3        */
    margin-top: .417cqw;
    /* 395 - 387 */
    width: 27.135cqw;
    /* 521      */
    height: 3.646cqw;
    min-height: 0;
    padding: 0 3.6cqw 0 2.1cqw;
    font-size: 1.178cqw;
    white-space: nowrap;
  }

  /* ---------- 8. FORMULÁRIO — frame 1920x1083 ---------- */
  .form-section {
    aspect-ratio: 1920 / 1037;
    padding: 0;
    position: relative;
  }

  .form-section .container {
    position: static;
  }

  .form-section .section-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 7.811%;
    /* 81       */
  }

  .form-section .h2 {
    font-size: 2.5cqw;
    line-height: 2.5cqw;
  }

  .form-section .section-head__sub {
    margin-top: 1.25cqw;
    /* 232-208   */
    width: 49.22%;
    /* 945      */
    font-size: 1.25cqw;
    line-height: 1.667cqw;
  }

  .lead-form {
    position: absolute;
    left: 25.365%;
    /* 487      */
    top: 29.51%;
    /* 306      */
    width: 49.219%;
    /* 945      */
    height: 62.68%;
    /* 650      */
    margin: 0;
    padding: 0;
    display: block;
    border-radius: 1.667cqw;
  }

  .field {
    position: absolute;
    left: 7.76%;
    width: 84.73%;
  }

  /* 560.8 / 800.7 */
  .field:nth-of-type(1) {
    top: 8.77%;
  }

  /* 394      */
  .field:nth-of-type(2) {
    top: 21.73%;
  }

  /* 478.2    */
  .field:nth-of-type(3) {
    top: 34.68%;
  }

  /* 562.4    */
  .field:nth-of-type(4) {
    top: 47.69%;
  }

  /* 647      */
  .field input,
  .field select {
    height: 3.712cqw;
    /* 71.3     */
    min-height: 0;
    padding: 0 1.417cqw;
    /* 27.2     */
    font-size: 1.042cqw;
    /* 20       */
    border-radius: .3125cqw;
  }

  .unit-field {
    position: absolute;
    left: 9.13%;
    /* 573.75   */
    top: 64.16%;
    /* 754      */
    right: 7.76%;
    padding: 0;
  }

  .unit-field legend {
    font-size: 1.042cqw;
  }

  .unit-options {
    margin-top: .917cqw;
    gap: 0;
    display: block;
    position: relative;
    height: 1.6cqw;
  }

  /* Deslocamentos em vw: como % aqui resolveria contra .unit-options, e não
     contra a largura de referência, os dois últimos saíam para a direita. */
  .radio {
    position: absolute;
    font-size: 1.042cqw;
    gap: .77cqw;
  }

  .radio:nth-of-type(1) {
    left: 0;
  }

  /* 573.75   */
  .radio:nth-of-type(2) {
    left: 17.747cqw;
  }

  /* 914.5    */
  .radio:nth-of-type(3) {
    left: 31.244cqw;
  }

  /* 1173.6   */
  .radio__dot {
    width: 1.215cqw;
    height: 1.215cqw;
  }

  /* 23.3     */

  .lead-form .btn {
    position: absolute;
    left: 7.78%;
    /* 561      */
    top: 81.38%;
    /* 866      */
    width: 84.55%;
    /* 799      */
    height: 3.646cqw;
    min-height: 0;
    margin: 0;
    padding: 0 3.6cqw 0 2.1cqw;
    font-size: 1.178cqw;
    white-space: nowrap;
  }

  /* ---------- 9. LEGAL — frame 1920x556 ---------- */
  .legal {
    aspect-ratio: 1920 / 556;
    padding: 0;
    position: relative;
  }

  .legal .container {
    position: static;
  }

  .legal__logo {
    position: absolute;
    left: 50%;
    top: 9.17%;
    /* 51       */
    width: 15.42%;
    /* 296      */
    margin: 0;
    transform: translateX(-50%);
  }

  .legal__text {
    position: absolute;
    left: 5.68%;
    /* 109      */
    top: 32.37%;
    /* 180      */
    width: 88.70%;
    /* 1703     */
    font-size: .833cqw;
    /* 16       */
    line-height: .9375cqw;
    /* 18       */
  }
}

/* ==========================================================================
   7. CONCESSIONÁRIA SAMURAI — frame 1920x626

   Estrutura do Figma: fundo branco na metade de cima, faixa #7f0013 a partir
   de y=280, e por cima um card preto de 1724x570 com raio 64. Dentro do card,
   a foto de fundo a 60% de opacidade com um gradiente radial vermelho a 70%
   por cima, a arte do samurai saindo pelo topo, e os textos à esquerda.
   ========================================================================== */
.samurai {
  position: relative;
  isolation: isolate;
  background: var(--white);
  padding: clamp(2rem, 6vw, 3.5rem) 0;
}

/* Faixa vermelha que preenche a metade de baixo e some por trás do card.
   No Figma ela é #7f0013 chapado, o que cria um degrau contra o degradê da
   seção seguinte. Aqui ela recebe o MESMO degradê dos Brindes, deslocado
   para baixo de modo que o ponto onde a faixa termina seja exatamente o
   ponto onde a próxima seção começa — a emenda some. Desvio deliberado. */
.samurai::before {
  content: "";
  position: absolute;
  inset: 44.73% 0 0 0;
  /* 280      */
  background: radial-gradient(56.77% 419.08% at 59.97% 179.8%,
      #c50e2a 0%, #a2071e 32.9%, #7f0012 65.7%);
  z-index: 0;
}

.samurai__card {
  position: relative;
  z-index: 1;
  width: min(1724px, calc(100% - 2rem));
  margin-inline: auto;
  border-radius: clamp(24px, 3.333cqw, 64px);
  background: var(--black);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem);
}

.samurai__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.samurai__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}

/* Gradiente radial por cima da foto, como no Figma */
.samurai__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .7;
  background: radial-gradient(120% 100% at 50% 50%,
      rgb(172 0 2) 0%, rgb(121 0 2) 50%, rgb(70 0 1) 100%);
}

.samurai__art {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: none;
  pointer-events: none;
}

.samurai__copy {
  position: relative;
  z-index: 2;
}

.samurai__kicker {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(1.5rem, 3.022cqw, 3.627rem);
  /* 58.03    */
  line-height: 1;
  letter-spacing: -0.01em;
}

.samurai__title {
  margin-top: .35em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(1.125rem, 2.015cqw, 2.418rem);
  /* 38.69    */
  line-height: 1.188;
  /* 45.94    */
  letter-spacing: -0.01em;
}

.samurai__text {
  margin-top: clamp(1.25rem, 2.4cqw, 2.875rem);
}

.samurai__text .body {
  line-height: 1.334;
}

/* 32/24    */
.samurai__text .body+.body {
  margin-top: 1.334em;
}

/* 1 linha  */

@media (min-width: 901px) {
  .samurai {
    aspect-ratio: 1920 / 626;
    padding: 0;
  }

  .samurai__card {
    position: absolute;
    left: 5.104%;
    /* 98       */
    top: 8.63%;
    /* 54       */
    width: 89.79%;
    /* 1724     */
    height: 91.05%;
    /* 570      */
    padding: 0;
    border-radius: 3.333cqw;
    /* 64       */
  }

  .samurai__bg img {
    position: absolute;
    left: -9.34%;
    /* -161     */
    top: -62.28%;
    /* -355     */
    width: 111.37%;
    /* 1920     */
    height: 224.56%;
    /* 1280     */
    max-width: none;
  }

  .samurai__art {
    right: auto;
    bottom: auto;
    left: 60.32%;
    /* 1040     */
    top: -5.44%;
    /* -31      */
    width: 29.08%;
    /* 501.4    */
  }

  .samurai__copy {
    position: absolute;
    left: 6.26%;
    /* 108      */
    top: 14.74%;
    /* 84       */
    right: 4%;
  }

  .samurai__kicker {
    font-size: 3.022cqw;
    /* 58.03    */
    line-height: 3.022cqw;
  }

  .samurai__title {
    margin-top: .63cqw;
    /* 154.12 - 84 - 58.03 */
    font-size: 2.015cqw;
    /* 38.69    */
    line-height: 2.393cqw;
    /* 45.94    */
  }

  .samurai__text {
    margin-top: 1.823cqw;
    /* 281 - 154.12 - 91.88 */
    width: 47.34cqw;
    /* 909      */
  }

  .samurai__text .body {
    font-size: 1.25cqw;
    /* 24       */
    line-height: 1.667cqw;
    /* 32       */
  }

  .samurai__text .body+.body {
    margin-top: 1.667cqw;
  }
}

/* ==========================================================================
   RESPONSIVO
   O Figma entrega só o desktop de 1920px. Daqui para baixo são adaptações:
   as grades de 4 e 3 colunas viram 2 e depois 1, o hero passa a empilhar,
   e os carros decorativos saem de cena onde atrapalhariam a leitura.
   ========================================================================== */

/* ---- Laptop / tablet grande (≤ 1280px) ---- */
@media (max-width: 1280px) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Tablet (≤ 900px) ----
   O hero já tem seu próprio layout base para esta faixa (ver seção 1),
   então aqui só entram as demais seções. */
@media (max-width: 900px) {

  /* Empilhadas e ocupando a largura toda, as pills ficam com muito vazio à
     direita se o conteúdo continuar encostado à esquerda como no desktop. */
  .pill {
    justify-content: center;
  }

  .scarcity {
    padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(3rem, 6.6vw, 8rem);
  }

  /* O trio inteiro, no mesmo arranjo do desktop, só que reduzido. A moldura
     abaixo é o retângulo que envolve os três no Figma (1177x486.7, a partir
     de 647,85); as posições são frações dele, então o conjunto escala junto
     sem perder o encaixe entre os carros. */
  .scarcity__cars {
    position: relative;
    inset: auto;
    width: min(560px, calc(100% - 1.5rem));
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    aspect-ratio: 1177 / 486.68;
  }

  .scarcity__car--kicks {
    left: 0;
    top: 0;
    width: 69.67%;
    /* 820      */
  }

  .scarcity__car--versa {
    display: block;
    left: 56.32%;
    top: 22.19%;
    /* 1309.9,193 */
    width: 43.68%;
    aspect-ratio: 514.102 / 331.753;
  }

  .scarcity__car--kait {
    display: block;
    left: 35.73%;
    top: 17.74%;
    /* 1067.5,171 */
    width: 45.20%;
    aspect-ratio: 532.06 / 400.362;
  }

  .scarcity__copy {
    max-width: none;
  }

  .model-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
    margin-top: clamp(1.125rem, 5vw, 2rem);
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }

  /* As três fotos têm enquadramentos bem diferentes: o carro ocupa 90% da
     altura do arquivo no Kait, 66% no Kicks e 55% no Versa, e a faixa
     transparente na base vai de 0% a 30%. Usar a mesma largura nas três
     deixava os carros com tamanhos distintos e encostando no card em
     alturas distintas. As larguras abaixo igualam a altura aparente dos
     carros; a margem negativa desconta a sobra transparente de cada um,
     para a sobreposição no card ficar igual nos três. */
  .model {
    position: relative;
  }

  .model__media {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    margin-bottom: var(--puxa);
  }

  .model__media img {
    width: var(--larg);
    height: auto;
    max-width: none;
    max-height: none;
    margin-inline: auto;
  }

  /* O Kait é um 3/4 frontal quase quadrado; os outros dois são fotos largas,
     então em qualquer largura única ele lê como menor. A moldura abaixo corta
     exatamente as margens transparentes do arquivo (11% de cada lado, 10% no
     topo): o carro encosta nas bordas sem nenhum corte na carroceria.
     A margem negativa de cada modelo desconta a sombra, que é longa e quase
     invisível — no Kait ela ocupa 28% da altura do arquivo, contra 2% nos
     outros. Sem esse desconto o carro parece flutuar acima do card. */
  .model--kait .model__media {
    width: 65%;
    margin-inline: auto;
    aspect-ratio: 1.149;
    /* proporção do carro, já sem as margens */
    overflow: hidden;
  }

  .model--kait .model__media img {
    position: absolute;
    width: 128.75%;
    left: -14.35%;
    top: -10.96%;
  }

  .model--kait {
    --puxa: -23.6%;
  }

  .model--kicks {
    --larg: 73%;
    --puxa: -9.8%;
  }

  .model--versa {
    --larg: 97%;
    --puxa: -23.4%;
  }

  .model__card {
    padding-top: calc(6% + 1.5rem);
  }

  .tradein__banner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* O disco branco também entra no mobile. As proporções são as mesmas do
     desktop, mas relativas à mão (636x636) em vez do banner, para os dois
     ficarem presos um ao outro em qualquer largura. */
  .tradein__media {
    order: -1;
    position: relative;
    display: block;
    width: min(420px, 80%);
    margin-inline: auto;
    aspect-ratio: 1;
  }

  .tradein__disc {
    display: block;
    position: absolute;
    left: 2.04%;
    /* 13 de 636  */
    top: 16.2%;
    /* 103 de 636 */
    width: 81.6%;
    /* 519 de 636 */
    max-width: none;
  }

  .tradein__hand {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
  }

  .testdrive__bg {
    height: 420px;
  }

  .stores {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .stores-wrap {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2rem, 5vw, 3rem);
  }

  /* Empilhados, os cards não podem cavalgar a divisa preto/branco. */
  .stores-wrap::before {
    height: 100%;
  }

  .gifts__box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .gifts__box .h2 {
    text-align: center;
    text-wrap: balance;
  }

  .gifts__side .btn {
    margin-inline: auto;
  }

  .gifts__media img {
    width: min(420px, 80%);
  }

  .unit-options {
    gap: 1.25rem;
    flex-direction: column;
  }
}

/* ==========================================================================
   HERO MOBILE — frame iPhone 16 do Figma (377:256), 393x963

   Até aqui o hero mobile era adaptação minha. Agora existe comp do designer,
   então esta faixa reproduz as coordenadas dele, em cqw sobre a largura da
   própria seção — o conjunto escala junto com a tela, como no desktop.

   Diferenças do comp em relação ao desktop, todas intencionais no design:
   não há carros, não há botão de CTA, e o texto das pills fica alinhado à
   esquerda logo após o ícone (no desktop também, mas nós tínhamos
   centralizado a pedido).
   ========================================================================== */
@media (max-width: 1000px) {
  .hero {
    container-type: inline-size;
    aspect-ratio: 393 / 1051;
    min-height: 0;
    padding: 0;
    background: #111315;
  }

  /* ---- fundo ---- */
  .hero__bg {
    position: absolute;
    inset: auto;
    /* antes de left/top: inset reseta os dois */
    left: -119.34%;
    /* -469     */
    top: 0;
    width: 355.14%;
    /* 1395.7   */
    height: 72.17%;
    /* 695      */
    z-index: 0;
  }

  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__scrim {
    inset: auto;
    left: -87.02%;
    /* -342     */
    top: 0;
    width: 232.57%;
    /* 914      */
    height: 87.33%;
    /* 841      */
    z-index: 1;
    opacity: .65;
    background:
      linear-gradient(90deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / .3) 100%),
      linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0) 100%);
  }

  .hero__scrim-bottom {
    display: block;
    position: absolute;
    inset: auto;
    left: -87.02%;
    top: 38.88%;
    /* 374.38   */
    width: 233.86%;
    /* 919.06   */
    height: 33.29%;
    /* 320.62   */
    z-index: 1;
    opacity: .65;
    background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 100%);
  }

  .hero__car {
    display: none;
  }

  /* ---- logo ---- */
  .hero__logo {
    left: 50%;
    top: 1.661%;
    /* 16       */
    width: 61.58%;
    /* 242      */
    transform: translateX(-50%);
  }

  /* Os wrappers somem para os blocos se posicionarem direto na seção. */
  /* Os wrappers viram `contents`, o que descarta a caixa deles — e com ela o
     z-index que os blocos herdavam. Cada peça recebe o seu. */
  .hero__inner,
  .hero__copy {
    display: contents;
  }

  .hero__logo {
    z-index: 3;
  }

  .hero__title,
  .hero__lead,
  .countdown,
  .hero__tagline,
  .pills {
    z-index: 5;
  }

  .hero__title {
    position: absolute;
    left: 1.49%;
    /* 6        */
    top: 19.63%;
    /* 189      */
    width: 97.02%;
    /* 381.3    */
    font-size: 10.763cqw;
    /* 42.3     */
    line-height: 9.567cqw;
    /* 37.6     */
    text-align: center;
    text-wrap: wrap;
  }

  .hero__title br {
    display: inline;
  }

  .hero__lead {
    position: absolute;
    left: 1.53%;
    /* 6        */
    top: 37.59%;
    /* 362      */
    width: 96.95%;
    /* 381      */
    max-width: none;
    margin: 0;
    font-size: 4.153cqw;
    /* 16.32    */
    line-height: 5.21cqw;
    /* 20.48    */
    text-align: center;
    text-shadow: 0 1.69cqw 1.69cqw #000;
  }

  .hero__lead strong {
    font-size: 5.98cqw;
    line-height: 1;
  }

  /* 23.5     */

  /* ---- contador ---- */
  .countdown {
    position: absolute;
    left: 17.73%;
    /* 69.67    */
    top: 45.59%;
    /* 439      */
    margin: 0;
    gap: 1.247cqw;
    /* 4.9      */
  }

  .countdown__box {
    width: 20.656cqw;
    /* 81.18    */
    padding-top: 3.21cqw;
    /* 12.6     */
    justify-content: flex-start;
    gap: 0;
  }

  .countdown__num {
    font-size: 9.662cqw;
    /* 37.97    */
    line-height: 9.335cqw;
    /* 36.69    */
  }

  .countdown__label {
    font-size: 3.532cqw;
    /* 13.88    */
    line-height: 4.415cqw;
    /* 17.35    */
  }

  .hero__tagline {
    position: absolute;
    left: 15.01%;
    /* 59       */
    top: 55.91%;
    /* 538.4    */
    width: 69.97%;
    /* 275      */
    max-width: none;
    font-size: 4.097cqw;
    /* 16.1     */
    line-height: 4.552cqw;
    /* 17.89    */
  }

  /* ---- pills ---- */
  .pills {
    position: absolute;
    left: 9.16%;
    /* 36       */
    top: 63.65%;
    /* 613      */
    width: 81.93%;
    /* 322      */
    display: flex;
    flex-direction: column;
    gap: 2.545cqw;
    /* 10       */
  }

  .pill {
    width: 100%;
    height: 19.847cqw;
    /* 78       */
    min-height: 0;
    padding: 0 0 0 4.55%;
    /* 17.88    */
    gap: 2.86%;
    /* 79 - 17.88 - 49.86 */
    border-radius: 17.893cqw;
    /* 70.32    */
    border-width: .182cqw;
    /* 0.715    */
    justify-content: flex-start;
  }

  .pill__icon {
    width: 12.687cqw;
  }

  /* 49.86    */
  .pill__icon img {
    width: 6.24cqw;
  }

  /* 24.52    */
  .pill__text {
    line-height: 1.02;
    transform: translateY(-0.9cqw);
  }

  .pill--taxa .pill__l1 {
    font-size: 7.277cqw;
  }

  /* 28.6     */
  .pill--taxa .pill__l2 {
    font-size: 7.277cqw;
  }

  /* 28.6     */
  .pill--taxa .pill__big {
    font-size: 1.6em;
  }

  /* 45.76    */
  .pill--nf .pill__l1 {
    font-size: 5.822cqw;
  }

  /* 22.88    */
  .pill--nf .pill__l2 {
    font-size: 6.913cqw;
  }

  /* 27.17    */
  .pill--ipva .pill__l1 {
    font-size: 8.733cqw;
  }

  /* 34.32    */
  .pill--ipva .pill__l2 {
    font-size: 5.822cqw;
  }

  /* 22.88    */
  .pill--fipe .pill__l1 {
    font-size: 8.187cqw;
  }

  /* 32.18    */
  .pill--fipe .pill__l2 {
    font-size: 4.301cqw;
  }

  /* 16.9     */

  /* O comp não traz botão nesta seção. */
  .hero .btn--xl {
    display: none;
  }
}

/* ---- Celular (≤ 600px) ---- */
@media (max-width: 600px) {
  :root {
    --radius-lg: 22px;
    --radius-md: 22px;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .benefit__body {
    min-height: 0;
  }

  .btn {
    min-height: 62px;
    padding-inline: 3rem 3.25rem;
  }

  .btn__arrow {
    width: 20px;
    height: 20px;
    right: 1.25rem;
  }

  .btn--xl {
    min-height: 68px;
  }

  /* O contador vive no hero, e o hero mobile agora segue o comp do designer
     (bloco acima). As regras antigas ficavam por cima e encolhiam a caixa. */

  .legal__text {
    text-align: left;
    font-size: 13px;
  }

  .legal__logo {
    width: 200px;
  }

  .stores__note {
    font-size: 1.05rem;
  }
}

/* ---- Preferência por menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}