/* ==========================================================================
   Operação Fecha Negócio 2ª edição · Vigorito Volkswagen
   Layout fiel ao frame do Figma "Landing-Page-Fecha_Negocio_Desktop" (1920px).
   Todas as medidas estão em px do Figma; o canvas de 1920px é escalado para a
   largura da tela via --z (ver js/main.js).
   ========================================================================== */

/* VW Head e Nissan Brand são fontes proprietárias. Se os arquivos estiverem
   instalados na máquina ou colocados em /fonts, são usados; senão cai no
   fallback do Google Fonts com métricas mais próximas. */
@font-face { font-family: "VW Head"; font-weight: 400; font-display: swap;
  src: local("VW Head"), local("VWHead"), local("VWHead-Regular"), url("../fonts/VWHead-Regular.woff2") format("woff2"), url("../fonts/VWHeadRegular.otf") format("opentype"); }
@font-face { font-family: "VW Head"; font-weight: 700; font-display: swap;
  src: local("VW Head Bold"), local("VWHead-Bold"), url("../fonts/VWHead-Bold.woff2") format("woff2"), url("../fonts/VWHeadBold.otf") format("opentype"); }
@font-face { font-family: "Nissan Brand"; font-weight: 400; font-display: swap;
  src: local("Nissan Brand"), local("NissanBrand-Regular"), url("../fonts/NissanBrand-Regular.woff2") format("woff2"), url("../fonts/NissanBrand-Regular.woff") format("woff"); }
@font-face { font-family: "Nissan Brand"; font-weight: 700; font-display: swap;
  src: local("Nissan Brand Bold"), local("NissanBrand-Bold"), url("../fonts/NissanBrand-Bold.woff2") format("woff2"), url("../fonts/NissanBrand-Bold.woff") format("woff"); }

:root {
  --navy: #001f53;
  --navy-btn: #031e48;
  --azul: #0c96ee;
  --ciano: #00b3f6;
  --laranja: #dd9c20;
  --cinza: #f0f0f0;
  --gold: linear-gradient(90deg, #f0c700 0%, #db9823 100%);
  --vw: "VW Head", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --nissan: "Nissan Brand", "Montserrat", Arial, sans-serif;
  --mont: "Montserrat", Arial, sans-serif;
  --z: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; overflow-x: hidden; font-family: var(--vw);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: none; }
h1, h2, h3, p, ul, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
b { font-weight: 700; }
a { color: inherit; }

/* Canvas */
.lp { width: 1920px; zoom: var(--z); }
.sec { position: relative; width: 1920px; overflow: hidden; margin-bottom: -1px; }
.sec > * { position: absolute; }

/* Botão dourado (pílula) */
.btn { display: block; border: 0; padding: 0; cursor: pointer; text-decoration: none; font-family: var(--vw);
  background: var(--gold); border-radius: 249.25px; color: var(--navy-btn);
  transition: filter .2s ease, transform .2s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn .btn-txt { position: absolute; white-space: nowrap; font-weight: 700; text-align: center;
  left: var(--tx); transform: translateX(-50%); }
.btn .btn-arrow { position: absolute; left: var(--ax); }
.btn-md { height: 70px; }
.btn-md .btn-txt { top: 24px; font-size: 22.613px; line-height: 21.2px; letter-spacing: -0.0353px; }
.btn-md .btn-arrow { top: 23.33px; width: 24px; height: 24px; }
.btn-xl { height: 82.252px; }
.btn-xl .btn-txt { top: 28.25px; font-size: 26.587px; line-height: 24.925px; letter-spacing: -0.0415px; }
.btn-xl .btn-arrow { top: 28.25px; width: 26.59px; height: 26.59px; }

/* ========== 1. HERO ========== */
.s-hero { height: 1133px; background: #fff; }
.hero-bg { left: 0; top: 0; width: 1920px; height: 1133px; }
.hero-carros { left: 606.75px; top: 416.71px; width: 1220.25px; height: 490.07px; }
.topbar { left: 0; top: 0; width: 1920px; height: 81px; background: #fff; border-bottom: 1px solid #e5e5e5; }
.topbar img { position: absolute; left: 800px; top: 0; width: 320px; height: 80px; }
.hero-logo { left: 604px; top: 129.86px; width: 611.154px; height: 255.695px; }
.hero-selo { left: 1143.82px; top: 118.84px; width: 172.839px; height: 123.057px; }

.hero-copy { left: 109px; top: 313px; width: 519px; display: flex; flex-direction: column; gap: 27px; color: #fff; }
.hero-copy h1 { width: 463px; font-size: 57.094px; line-height: 53.526px; letter-spacing: -0.0351px; font-weight: 700; }
.hero-dates { width: 500.691px; margin-top: 1.78px; font-size: 24.747px; line-height: 31.049px; letter-spacing: -0.6029px; }
.hero-dates .hl { display: inline-block; background: #0153b7; font-weight: 700; font-size: 31.182px;
  padding: 0.78px 6px 4.48px 8.5px; margin: -0.78px 0 -4.48px -2px; }
.hero-dates .hl .c { font-weight: 400; font-size: 24.747px; }

.countdown { position: relative; display: flex; gap: 7px; height: 116px; }
.cd-box { position: relative; width: 116px; height: 116px; background: var(--azul); text-align: center; font-family: var(--nissan); }
.cd-1 { border-top-left-radius: 40px; }
.cd-3 { border-bottom-right-radius: 40px; }
.cd-box b { position: absolute; left: 0; right: 0; top: 18px; font-weight: 700; font-size: 54.26px; line-height: 52.424px;
  letter-spacing: -1.0922px; font-variant-numeric: tabular-nums;
  background: linear-gradient(89.35deg, #074a9b 0%, #002453 99.626%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-box span { position: absolute; left: 0; right: 0; top: 71px; font-size: 19.835px; line-height: 24.794px; letter-spacing: -0.8265px; color: #03326c; }

.ganchos { left: 288px; top: 855px; display: flex; align-items: flex-start; gap: 19.879px; }
.g { position: relative; height: 107.628px; width: 314.157px; background: url("../assets/gancho-padrao.svg") no-repeat 0 0 / 100% 100%; color: #fff; }
.g1 { width: 312.58px; height: 107.088px; background-image: url("../assets/gancho-descontos.svg"); }
.g3 { width: 343.246px; background-image: url("../assets/gancho-nf.svg"); }
.g-ico { position: absolute; left: 27.8px; top: 17.65px; width: 70.95px; height: 70.95px; border-radius: 50%;
  background: #fefcfe url("../assets/check.svg") no-repeat 17.16px 17.16px / 36px 36px; }
.g1 .g-ico { left: 27.66px; top: 17.56px; width: 70.6px; height: 70.6px; background-position: 17.04px 17.08px; }
.g2 .g-ico { left: 25.79px; top: 18.21px; }
.g3 .g-ico { left: 26.67px; top: 18.05px; }
.g p { position: absolute; white-space: nowrap; text-transform: uppercase; font-weight: 400; }
.g p > span, .g p > b { display: block; }
.g1 p { left: 108.09px; top: 18.6px; line-height: 34.422px; }
.g1 p > span { font-size: 17.18px; }
.g1 p > b { margin-top: -10px; font-size: 38.655px; }
.g2 p, .g4 p { left: 107.54px; top: 22px; }
.g4 p { left: 109.64px; top: 22.45px; }
.g2 p > b, .g4 p > b { font-size: 33.29px; line-height: 30.968px; }
.g2 p > span, .g4 p > span { margin-top: 4px; font-size: 24.236px; line-height: 32.219px; }
.g4 p > span { margin-top: 3px; }
.g3 p { left: 108.33px; top: 21.84px; line-height: 30.067px; }
.g3 p > span { font-size: 26.401px; }
.g3 b { font-size: 29.334px; }
.g3 p > b { margin-top: 1px; }
.g .ast { display: inline; margin-left: 1px; font-size: 22px; line-height: 1; font-weight: 700; vertical-align: top; }

.hero-cta { left: 656px; top: 983.35px; width: 609px; --tx: 288px; --ax: 535.43px; }

/* ========== 2. UNIDADES ========== */
.s-unidades { height: 792px; background: #fff; }
.t-unidades { left: 452px; top: 77px; width: 1016px; font-size: 48px; line-height: 55px; font-weight: 700; color: var(--navy); text-align: center; }
.oval { position: relative; white-space: nowrap; }
.oval::before { content: ""; position: absolute; left: -13px; right: -15px; top: 0; height: 60px; border: 3px solid var(--navy); border-radius: 40px; }
.sub-unidades { left: 393px; top: 209px; width: 1134px; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; color: #000; text-align: center; }

.carro { position: absolute; top: 0; width: 0; height: 0; }
.carro .card { position: absolute; top: 383.17px; width: 405.956px; height: 219.458px; background: var(--cinza); border-radius: 24.116px; }
.carro img { position: absolute; }
.carro h3 { position: absolute; top: 519.83px; transform: translateX(-50%); white-space: nowrap; font-size: 25.724px; line-height: 47.248px;
  letter-spacing: -0.4922px; font-weight: 700; color: #000; }
.c1 .card { left: 130px; }    .c1 img { left: 127px; top: 287px; width: 430px; height: 238px; }  .c1 h3 { left: 333.51px; }
.c2 .card { left: 548.01px; } .c2 img { left: 550px; top: 314px; width: 400px; height: 277px; }  .c2 h3 { left: 751.53px; }
.c3 .card { left: 966px; }    .c3 img { left: 969px; top: 314px; width: 399px; height: 266px; }  .c3 h3 { left: 1169.5px; }
.c4 .card { left: 1384.04px; } .c4 img { left: 1384px; top: 304px; width: 406px; height: 241px; } .c4 h3 { left: 1587.06px; }

.unidades-cta { left: 743px; top: 642px; width: 434px; --tx: 203.5px; --ax: 377px; }

/* ========== 3. VANTAGENS ========== */
.s-vantagens { height: 752px; background: var(--navy); color: #fff; text-align: center; }
.t-vantagens { left: 959.5px; top: 88px; transform: translateX(-50%); white-space: nowrap; font-size: 48px; line-height: 48px; font-weight: 700; }
.sub-vantagens { left: 960.5px; top: 142px; transform: translateX(-50%); white-space: nowrap; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
.vant-row { left: 369px; top: 227px; display: flex; gap: 16px; }
.vant { position: relative; width: 283.444px; height: 349.704px; border-radius: 30px; background: var(--ciano);
  box-shadow: 7px 8px 8.6px rgba(0, 0, 0, .29); }
.vant::after { content: ""; position: absolute; left: 7.36px; top: 154.61px; width: 268.72px; height: 186.815px; background: #fff;
  border-radius: 0 0 20px 20px; }
.v3::after { left: 7.82px; } .v4::after { left: 7.73px; }
.vant h3 { position: absolute; z-index: 1; top: 44.7px; font-size: 32px; line-height: 33px; letter-spacing: -0.05px; font-weight: 700; color: #fff; }
.vant p { position: absolute; z-index: 1; top: 192px; left: 28.53px; width: 227.308px; font-size: 21px; line-height: 24px; letter-spacing: -0.05px; color: #000; }
.v1 h3 { top: 29.7px; left: 32.86px; width: 217px; }
.v2 h3 { left: 40.77px; width: 202px; }
.v3 h3 { left: 41.68px; width: 200px; }
.v3 p { left: 17.11px; width: 248px; }
.v4 h3 { left: 14.59px; width: 256px; }
.v4 p { left: 27.73px; width: 227px; }

.vant-cta { left: 640px; top: 620px; width: 641px; background: linear-gradient(90deg, #f0c700 4.99%, #db9823 100%);
  --tx: 299.6px; --ax: 563px; }

/* ========== 4. LOTE ========== */
.s-lote { height: 707px; background: #fff; color: #fff; }
.lote-band { left: 0; top: 0; width: 1920px; height: 370px; background: var(--navy); }
.lote-banner { left: 109px; top: 54px; width: 1703px; height: 599px; border-radius: 32px;
  background: linear-gradient(216.87deg, #2c5496 7.8068%, #0e1e3d 93.948%); }
.t-lote { left: 244px; top: 125px; width: 595px; font-size: 56px; line-height: 55px; font-weight: 700; }
.lote-p1 { left: 239px; top: 258px; width: 663px; font-family: var(--mont); font-size: 20px; line-height: 41px; letter-spacing: -0.5px; }
.lote-p1 b { display: block; font-size: 32px; line-height: 41px; }
.lote-p2 { left: 239px; top: 347px; width: 605px; font-family: var(--mont); font-size: 20px; line-height: 25px; letter-spacing: -0.5px; }
.lote-p2 .gap { display: block; height: 33px; }
.lote-cta { left: 239px; top: 513px; width: 476px; --tx: 220.5px; --ax: 402px; }
.lote-foto { left: 1085px; top: 123px; width: 658px; height: 462px; border-radius: 18px; }
.lote-selo { left: 1001px; top: 123px; width: 167.402px; height: 167.402px; }

/* ========== 5. MOCHILA ========== */
.s-mochila { height: 676px; background: #fff; }
.t-mochila { left: 182px; top: 230px; width: 476px; font-size: 48px; line-height: 48px; font-weight: 700; color: var(--navy); }
.mochila-circ { left: 683px; top: 80px; width: 478px; height: 478px; border-radius: 50%; background: var(--azul); }
.mochila-img { left: 744px; top: 26px; width: 355px; height: 500px; }
.mochila-col { left: 1247px; top: 171px; width: 553px; display: flex; flex-direction: column; align-items: flex-start; color: #000; letter-spacing: -0.5px; }
.mochila-txt { font-size: 24px; line-height: 32px; }
.mochila-nota { margin-top: 14px; width: 443px; font-family: "Inter", Arial, sans-serif; font-size: 12px; line-height: 18px; }
.mochila-cta { position: relative; margin-top: 29px; width: 434px; --ax: 377px; letter-spacing: normal; }
.mochila-cta .btn-txt { left: 54px; top: 24px; transform: none; }

/* ========== 6. TEST-DRIVE ========== */
.s-testdrive { height: 1089px; background: #000; color: #fff; }
.td-bg { left: 0; top: 0; width: 1920px; height: 1089px; }
.td-band { left: 0; top: 853px; width: 1920px; height: 236px; background: var(--navy); }
.t-td { left: 960px; top: 149px; transform: translateX(-50%); white-space: nowrap; font-size: 48px; line-height: 48px; font-weight: 700; }
.sub-td { left: 534px; top: 221px; width: 853px; text-align: center; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
.td-cta { left: 715px; top: 323px; width: 491px; --tx: 226.5px; --ax: 410px; }
.td-cta .btn-txt { top: 24.03px; }

.loja { top: 584px; width: 560.452px; height: 335.894px; display: block; text-decoration: none; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.loja:hover { transform: translateY(-4px); filter: brightness(1.03); }
.l1 { left: 108px; } .l2 { left: 679.77px; } .l3 { left: 1251.55px; }
.loja-foto { position: absolute; left: 0; top: -76.39px; width: 560px; height: 412px; }
.loja-info { position: absolute; left: 0; top: 246.61px; width: 560px; height: 112px; background: var(--cinza); border-radius: 0 0 28.306px 28.306px; color: #171717; }
.loja-info img { position: absolute; left: 41.04px; top: 24.1px; width: 45px; height: 53px; }
.loja-info p { position: absolute; left: 108.5px; top: 25.39px; white-space: nowrap; font-size: 26px; line-height: 28px; letter-spacing: -0.5px; }
.l1 .loja-info { color: #000; }
.l1 .loja-info p { left: 109px; letter-spacing: -0.4718px; }
.l2 .loja-info p { left: 108.23px; }
.td-foot { left: 416px; top: 973px; white-space: nowrap; font-size: 30.193px; line-height: 35.854px; letter-spacing: -0.4718px; }
.td-foot a { color: var(--laranja); text-decoration: underline; text-underline-position: from-font; }

/* ========== 7. FORMULÁRIO ========== */
.s-form { height: 1088px; background: var(--navy); color: #fff; }
.t-form { left: 382px; top: 86px; width: 1155px; text-align: center; font-size: 48px; line-height: 48px; font-weight: 700; }
.t-form span { color: var(--laranja); }
.sub-form { left: 453px; top: 206px; width: 1013px; text-align: center; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }

.form-card { left: 487px; top: 311px; width: 945px; height: 650px; background: var(--cinza); border-radius: 32px; color: #000; }
.form-card > * { position: absolute; }
.campo { left: 72.79px; width: 799.417px; height: 71.261px; padding: 22.03px 27.21px 27.23px; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, .4); font: 400 20px/22px var(--vw); letter-spacing: -0.5px; color: #000; outline: none;
  transition: box-shadow .2s ease, background .2s ease; }
.campo::placeholder { color: #8a8a8a; opacity: 1; }
.campo:focus { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px var(--ciano); }
.campo.erro { box-shadow: 0 0 0 2px #c80205; }
select.campo { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 24px) center; background-size: 20px; }
select.campo:has(option[value=""]:checked), select.campo.is-placeholder { color: #8a8a8a; }
select.campo option { background: #fff; color: #000; font-size: 18px; }
select.campo option[value=""] { color: #8a8a8a; }
.f1 { top: 57px; width: 800.713px; } .f2 { top: 141.22px; } .f3 { top: 225.43px; } .f4 { top: 310px; }
.unidades { left: 0; top: 0; width: 945px; height: 0; border: 0; }
.unidades legend { position: absolute; left: 85.75px; top: 417.03px; font-size: 20px; line-height: 22px; letter-spacing: -0.5px; font-weight: 700; }
.unidades label { position: absolute; top: 462.37px; padding-left: 28.5px; white-space: nowrap; cursor: pointer;
  font-size: 20px; line-height: 22px; letter-spacing: -0.5px; font-weight: 700; }
.unidades .r1 { left: 85.75px; } .unidades .r2 { left: 426.5px; } .unidades .r3 { left: 685.63px; }
.unidades input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.unidades i { position: absolute; left: 0; top: 2.59px; width: 23.322px; height: 23.322px; border: 1px solid #000; border-radius: 50%; }
.unidades input:checked + i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--navy); }
.unidades input:focus-visible + i { box-shadow: 0 0 0 2px var(--ciano); }
.unidades.erro i { border-color: #c80205; }
.form-cta { left: 73px; top: 529px; width: 799px; --tx: 380.5px; --ax: 578px; }
.form-cta[disabled] { opacity: .7; cursor: wait; }

/* ========== 8. RODAPÉ ========== */
.s-footer { height: 213px; margin-bottom: 0; background: #fff; }
.f-vigorito { left: 836px; top: 51px; width: 126px; height: 111px; }
.f-vw { left: 988px; top: 51px; width: 96px; height: 95px; }

/* ========== MODAL (frame FORM-FEEDBACK) ========== */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .8); }
.modal[hidden] { display: none; }
.modal-box { position: relative; flex: none; width: 977px; height: 612px; border-radius: 32px; background: var(--cinza); color: #000; zoom: var(--z);
  text-align: center; letter-spacing: -0.4254px; animation: modal-in .25s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
.modal-box > * { position: absolute; }
.modal-x { left: 913px; top: 24px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.modal-ok { left: 444.69px; top: 47px; width: 87.812px; height: 87.812px; }
.modal-txt { left: 101px; top: 151.64px; width: 775px; }
.modal-txt h2 { font-size: 40.834px; line-height: 47.64px; font-weight: 400; color: var(--navy); }
.modal-txt p { margin-top: 18.5px; font-size: 20.417px; line-height: 27.223px; }
.modal-txt .l1 { display: block; }
.modal-alerta { left: 161.4px; top: 368.14px; width: 660.154px; height: 71.468px; border: 2.947px solid #c80205; border-radius: 19.156px; }
.modal-alerta p { position: absolute; left: 33.6px; top: 5.36px; width: 587.213px; font-size: 21.689px; line-height: 25.304px; letter-spacing: -0.2259px; color: #c80205; }
.modal-fim { left: 101px; top: 465.55px; width: 775px; font-size: 20.417px; line-height: 27.223px; }

/* Quebras de linha fixas iguais às do Figma: evita que o texto reflua com a escala */
.hero-copy h1, .hero-dates, .t-unidades, .sub-unidades, .vant h3, .vant p, .t-lote, .lote-p1, .lote-p2, .t-mochila,
.mochila-txt, .mochila-nota, .sub-td, .t-form, .sub-form, .modal-txt, .modal-alerta p, .modal-fim { white-space: nowrap; }

/* ==========================================================================
   MOBILE / TABLET (até 1023px)
   O Figma só tem o frame desktop; este layout empilha as seções mantendo
   cores, fontes, imagens e componentes do desktop. Acima de 1023px nada muda.
   ========================================================================== */
@media (max-width: 1023px) {
  .lp { width: 100%; zoom: 1; }
  .lp br.d, .modal br.d { display: none; }
  .sec { width: 100%; height: auto; margin: 0; --gut: max(20px, calc((100% - 640px) / 2));
    padding: 48px var(--gut); display: flex; flex-direction: column; align-items: center; text-align: center; }
  .sec > * { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; max-width: 100%; }
  .hero-copy h1, .hero-dates, .t-unidades, .sub-unidades, .vant h3, .vant p, .t-lote, .lote-p1, .lote-p2, .t-mochila,
  .mochila-txt, .mochila-nota, .sub-td, .t-form, .sub-form, .t-vantagens, .sub-vantagens, .t-td, .td-foot,
  .modal-txt, .modal-alerta p, .modal-fim { white-space: normal; text-wrap: balance; }

  /* Botões */
  .btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 440px;
    height: 58px; padding: 0 20px; background: var(--gold); }
  .btn .btn-txt, .mochila-cta .btn-txt { position: static; transform: none; font-size: 16px; line-height: 1.1; letter-spacing: 0; white-space: normal; }
  .btn .btn-arrow { position: static; width: 20px; height: 20px; flex: none; }
  .btn-xl { height: 62px; }
  .btn-xl .btn-txt { font-size: 17px; }

  /* 1. Hero */
  .s-hero { padding-top: 0; padding-bottom: 40px; background: #0b1d3d; }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 50%; }
  .s-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,15,40,.2) 0%, rgba(0,15,40,.62) 32%, rgba(0,15,40,.55) 55%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.35) 100%); }
  .topbar { order: 0; } .hero-logo { order: 1; } .hero-copy { order: 2; } .hero-carros { order: 3; } .ganchos { order: 4; } .hero-cta { order: 5; }
  .s-hero > * { z-index: 1; }
  .s-hero .hero-bg { z-index: 0; } .s-hero::after { z-index: 0; } .s-hero .hero-selo { z-index: 2; }
  .topbar { position: relative; width: 100vw; max-width: none; height: 64px; margin: 0 calc(50% - 50vw); }
  .topbar img { left: 50%; transform: translateX(-50%); width: 256px; height: 64px; }
  .hero-logo { width: min(100%, 420px); height: auto; margin-top: 28px; }
  .hero-selo { position: absolute; top: 84px; left: auto; right: max(8px, calc(50% - 230px)); width: clamp(78px, 22vw, 120px); height: auto; }
  .hero-copy { width: 100%; align-items: center; gap: 20px; margin-top: 20px; }
  .hero-copy h1 { width: auto; font-size: clamp(32px, 9vw, 48px); line-height: .94; }
  .hero-dates { width: auto; margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -0.3px; }
  .hero-dates .hl { font-size: 21px; line-height: 1.3; padding: 2px 6px 3px 8px; margin: 0 0 2px; }
  .hero-dates .hl .c { font-size: 17px; }
  .countdown { gap: 6px; height: auto; }
  .cd-box { width: 92px; height: 92px; }
  .cd-1 { border-top-left-radius: 30px; } .cd-3 { border-bottom-right-radius: 30px; }
  .cd-box b { top: 13px; font-size: 44px; line-height: 44px; }
  .cd-box span { top: 58px; font-size: 15px; line-height: 20px; letter-spacing: -0.5px; }
  .hero-carros { width: calc(100% + 40px); max-width: 640px; height: auto; margin: 16px -20px 0; }
  .ganchos { flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
  .g { zoom: .6; }
  @media (max-width: 359px) { .g { zoom: .54; } }
  .hero-cta { margin-top: 28px; }

  /* 2. Unidades */
  .t-unidades { width: auto; font-size: clamp(25px, 7vw, 36px); line-height: 1.3; }
  .oval { white-space: nowrap; padding: 0 .25em; }
  .oval::before { left: 0; right: 0; top: -.08em; height: 1.25em; border-width: 2px; }
  .sub-unidades { width: auto; margin-top: 16px; font-size: 17px; line-height: 1.45; }
  .s-unidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 14px; justify-items: center; }
  .t-unidades, .sub-unidades, .unidades-cta { grid-column: 1 / -1; }
  .sub-unidades { margin-bottom: 14px; }
  .carro { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; padding-bottom: 12px; }
  .carro .card, .c1 .card, .c2 .card, .c3 .card, .c4 .card { left: 0; right: 0; top: 34%; bottom: 0; width: auto; height: auto; border-radius: 16px; }
  .carro img, .c1 img, .c2 img, .c3 img, .c4 img { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 430 / 250; object-fit: contain; }
  /* cada foto tem respiro transparente diferente: escala pelo contorno do carro para todos ficarem do mesmo tamanho */
  .c1 img, .c2 img, .c3 img, .c4 img { max-width: none; aspect-ratio: auto; align-self: flex-start; }
  .c1 img { width: 96.04%; margin: -9.38% 0 -3.02% 3.43%; }
  .c2 img { width: 93.99%; margin: -5.18% 0 -19.15% 3.18%; }
  .c3 img { width: 91.56%; margin: -1.57% 0 -18.70% 5.66%; }
  .c4 img { width: 94.27%; margin: -4.98% 0 -10.22% 3.45%; }
  .carro h3, .c1 h3, .c2 h3, .c3 h3, .c4 h3 { position: relative; left: auto; top: auto; transform: none; margin-top: 2px; white-space: normal;
    font-size: 16px; line-height: 1.2; letter-spacing: -0.3px; }
  .unidades-cta { margin-top: 18px; }

  /* 3. Vantagens */
  .t-vantagens { white-space: normal; font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
  .sub-vantagens { margin-top: 10px; font-size: 17px; line-height: 1.4; }
  .vant-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 28px; }
  .vant { width: auto; height: auto; display: flex; flex-direction: column; border-radius: 22px; box-shadow: 4px 5px 8px rgba(0,0,0,.29); }
  .vant::after { content: none; }
  .vant h3, .v1 h3, .v2 h3, .v3 h3, .v4 h3 { position: static; width: auto; padding: 18px 10px 14px; font-size: 19px; line-height: 21px;
    min-height: 92px; display: flex; align-items: center; justify-content: center; }
  .vant p, .v3 p, .v4 p { position: static; width: auto; flex: 1; margin: 0 5px 5px; padding: 16px 10px; background: #fff;
    border-radius: 0 0 17px 17px; font-size: 14.5px; line-height: 19px; }
  .vant-cta { margin-top: 32px; }

  /* 4. Lote */
  .s-lote { padding: 28px 16px; text-align: left; align-items: stretch; }
  .lote-band { position: absolute; inset: 0 0 45% 0; width: auto; height: auto; max-width: none; }
  .lote-banner { position: absolute; inset: 28px 16px; width: auto; height: auto; max-width: none; border-radius: 24px; }
  .s-lote > :not(.lote-band):not(.lote-banner) { margin-left: 22px; margin-right: 22px; }
  .t-lote { width: auto; margin-top: 32px; font-size: clamp(32px, 9vw, 44px); line-height: 1; }
  .lote-p1 { width: auto; margin-top: 18px; font-size: 16px; line-height: 1.45; }
  .lote-p1 b { margin-top: 6px; font-size: 22px; line-height: 1.2; }
  .lote-p2 { width: auto; margin-top: 14px; font-size: 15px; line-height: 1.45; }
  .lote-p2 .gap { height: 12px; }
  .lote-cta { margin-top: 24px; width: auto; }
  .lote-foto { width: auto; height: auto; margin-top: 24px; margin-bottom: 28px; border-radius: 14px; }
  .lote-selo { position: absolute; left: auto; right: 22px; top: auto; bottom: 28px; width: 104px; height: auto; transform: translateY(-62%); }

  /* 5. Mochila */
  .t-mochila { width: auto; font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
  .mochila-circ { display: none; }
  .mochila-img { width: min(78%, 320px); height: auto; margin-top: 24px; padding: 6% 4% 0;
    background: radial-gradient(circle at 50% 58%, var(--azul) 0 50%, transparent 50.4%); }
  .mochila-col { width: 100%; align-items: center; margin-top: 20px; letter-spacing: -0.3px; }
  .mochila-txt { font-size: 18px; line-height: 1.45; }
  .mochila-nota { width: auto; margin-top: 12px; font-size: 12px; line-height: 1.5; }
  .mochila-cta { margin-top: 24px; width: 100%; }

  /* 6. Test-drive */
  .s-testdrive { background: var(--navy); }
  .td-bg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 640px; max-width: none; object-fit: cover; object-position: 30% 30%;
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .td-band { display: none; }
  .t-td { white-space: normal; font-size: clamp(26px, 7.4vw, 40px); line-height: 1.08; }
  .sub-td { width: auto; margin-top: 14px; font-size: 17px; line-height: 1.45; }
  .td-cta { margin-top: 24px; }
  .td-cta .btn-txt { top: auto; }
  .loja { width: 100%; height: auto; margin-top: 20px; text-align: left; }
  .s-testdrive .loja:first-of-type { margin-top: 36px; }
  .loja-foto { position: relative; top: auto; width: 100%; height: auto; max-width: 100%; }
  .loja-info { position: relative; top: auto; width: 100%; height: auto; margin-top: -15.7%; display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-radius: 0 0 22px 22px; }
  .loja-info img { position: static; width: 34px; height: 40px; flex: none; }
  .loja-info p, .l1 .loja-info p, .l2 .loja-info p { position: static; white-space: normal; font-size: 18px; line-height: 1.3; }
  .td-foot { width: auto; margin-top: 28px; font-size: 18px; line-height: 1.45; }

  /* 7. Formulário */
  .t-form { width: auto; font-size: clamp(25px, 7vw, 38px); line-height: 1.1; }
  .sub-form { width: auto; margin-top: 14px; font-size: 17px; line-height: 1.45; }
  .form-card { width: 100%; height: auto; margin-top: 28px; padding: 24px 18px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
  .form-card > * { position: relative; }
  .campo, .f1, .f2, .f3, .f4 { left: auto; top: auto; width: 100%; height: 56px; padding: 0 16px; font-size: 17px; line-height: 22px; }
  .unidades { left: auto; top: auto; width: 100%; height: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
  .unidades legend { position: static; float: left; width: 100%; margin-bottom: 4px; font-size: 17px; }
  .unidades label, .unidades .r1, .unidades .r2, .unidades .r3 { position: relative; left: auto; top: auto; font-size: 17px; line-height: 26px; padding-left: 34px; }
  .unidades i { top: 1px; }
  .form-cta { left: auto; top: auto; width: 100%; max-width: none; margin-top: 10px; }

  /* 8. Rodapé */
  .s-footer { flex-direction: row; justify-content: center; gap: 32px; padding: 36px 20px; }
  .f-vigorito { width: 96px; height: auto; }
  .f-vw { width: 72px; height: auto; }

  /* Modal */
  .modal { padding: 16px; }
  .modal-box { zoom: 1; width: 100%; max-width: 560px; height: auto; max-height: 100%; overflow-y: auto; padding: 44px 20px 28px;
    display: flex; flex-direction: column; align-items: center; gap: 16px; border-radius: 24px; }
  .modal-box > * { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .modal-x { position: absolute; top: 12px; right: 12px; left: auto; width: 36px; height: 36px; }
  .modal-x img { width: 36px; height: 36px; }
  .modal-ok { width: 64px; height: 64px; }
  .modal-txt h2 { font-size: 24px; line-height: 1.2; }
  .modal-txt p, .modal-fim { font-size: 16px; line-height: 1.45; }
  .modal-txt .l1 { display: inline; line-height: inherit; }
  .modal-txt p { margin-top: 12px; }
  .modal-alerta { padding: 10px 14px; border-width: 2px; border-radius: 14px; }
  .modal-alerta p { position: static; width: auto; font-size: 16px; line-height: 1.35; }
}