/* =========================================================
   VGV NITRADO — Landing Page
   Paleta e tipografia extraídas do PSD original
   ========================================================= */
:root {
  --red: #e62335;        /* vermelho vivo */
  --wine: #a6051a;       /* vermelho escuro / botões */
  --cream: #e3ddcf;      /* creme */
  --offwhite: #f8f8eb;
  --black: #000;
  --white: #fff;

  /* 1u = 1px do PSD (1400px) — escala proporcional no desktop */
  /* --vw é a largura útil (sem scrollbar), definida em app.js; fallback 100vw */
  --u: min(1.15px, calc(var(--vw, 100vw) / 1400));
  --t: var(--u); /* unidade dos cards de ingresso */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #1a0005;
  color: var(--white);
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 125%;           /* Archivo Expanded */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
b, strong { font-weight: 800; }
button { font: inherit; }

/* ---------- estrutura ---------- */
.sec { position: relative; overflow: hidden; }
.stage {
  position: relative;
  width: calc(1400 * var(--u));
  height: 100%;
  margin: 0 auto;
}

/* ---------- botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: var(--cream);
  font-stretch: 100%;
  font-weight: 900;               /* Archivo Black */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  font-size: calc(40 * var(--u));
  background: transparent;
  isolation: isolate;
  transition: transform .2s ease, filter .2s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg, var(--wine));
}
.btn-skew::before { transform: skewX(-10deg); }
.btn-black { --btn-bg: var(--black); }
.btn-red { --btn-bg: var(--wine); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn:active { transform: translateY(0); }

.btn-glow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: .28em;
  width: 100%;
  min-height: calc(80 * var(--t));
  padding: 10px calc(16 * var(--t));
  border: 2px solid var(--red);
  border-radius: calc(12 * var(--t));
  background: var(--wine);
  box-shadow: 0 0 calc(32 * var(--t)) rgba(230, 35, 53, .35);
  color: var(--white);
  font-stretch: 100%;
  font-weight: 800;
  font-size: max(15px, calc(24.5 * var(--t)));
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.btn-glow em { font-style: normal; color: var(--cream); }
.btn-glow:hover {
  background: #c00a22;
  box-shadow: 0 0 calc(44 * var(--t)) rgba(230, 35, 53, .65);
  transform: translateY(-2px);
}

/* ---------- caixa de data ---------- */
.datebox {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  padding-left: calc(45 * var(--u));
  isolation: isolate;
}
.datebox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: skewX(-9deg);
}
.datebox img { width: calc(71 * var(--u)); flex: none; }
.datebox p { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.datebox strong {
  font-weight: 900;
  font-size: calc(35 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.datebox em {
  font-weight: 400;
  font-size: calc(35 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: calc(3 * var(--u));
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  height: calc(930 * var(--u));
  background: #b51d33 url("/assets/bg-hero.webp") center top / cover no-repeat;
}
.hero-logo { position: absolute; left: calc(117 * var(--u)); top: calc(107 * var(--u)); width: calc(441 * var(--u)); }
.hero-photo { position: absolute; left: calc(33 * var(--u)); top: calc(344 * var(--u)); width: calc(714 * var(--u)); }

.hero-title {
  position: absolute;
  right: calc(110 * var(--u));
  top: calc(108 * var(--u));
  text-align: right;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}
.hero-title span { display: block; }
.hero-title .t1 { font-weight: 400; font-size: calc(27.5 * var(--u)); letter-spacing: .2em; margin-right: -.2em; }
.hero-title .t2 { font-size: calc(45 * var(--u)); letter-spacing: .02em; margin-top: calc(8 * var(--u)); }
.hero-title .t3 { font-size: calc(65 * var(--u)); letter-spacing: -.04em; color: var(--cream); margin-top: calc(2 * var(--u)); }

.hero-date { position: absolute; left: calc(710 * var(--u)); top: calc(289 * var(--u)); width: calc(578 * var(--u)); height: calc(104 * var(--u)); }

.hero-p1 {
  position: absolute;
  right: calc(114 * var(--u));
  top: calc(424 * var(--u));
  width: calc(575 * var(--u));
  text-align: right;
  font-size: calc(20 * var(--u));
  line-height: calc(27.4 * var(--u));
  letter-spacing: -.01em;
}
.hero-line {
  position: absolute;
  left: calc(711 * var(--u));
  top: calc(537 * var(--u));
  width: calc(579 * var(--u));
  height: calc(5 * var(--u));
  margin: 0;
  border: 0;
  background: var(--red);
}
.hero-p2 {
  position: absolute;
  left: calc(712 * var(--u));
  top: calc(582 * var(--u));
  width: calc(545 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: -.01em;
}
.hero-p2 b { color: var(--offwhite); }
.hero-btn { position: absolute; left: calc(744 * var(--u)); top: calc(723 * var(--u)); width: calc(505 * var(--u)); height: calc(55 * var(--u)); }

.hero-next {
  position: absolute;
  left: calc(760 * var(--u));
  top: calc(813 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  color: var(--cream);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(27 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: .02em;
}
.hero-next .arrows {
  width: calc(62 * var(--u));
  height: calc(56 * var(--u));
  transform: rotate(-90deg);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(6 * var(--u)); } }

/* =========================================================
   2. BENEFÍCIOS + QUEM CONDUZ
   ========================================================= */
.s2 { height: calc(861 * var(--u)); background: #3a0610; }
.s2 .band { position: absolute; left: 0; right: 0; top: 0; height: calc(236 * var(--u)); background: var(--cream); }
.s2 .dark { position: absolute; left: 0; right: 0; top: calc(236 * var(--u)); height: calc(620 * var(--u)); background: #2a0309 url("/assets/bg-s2.webp") center / cover no-repeat; }
.s2 .redline { position: absolute; left: 0; right: 0; bottom: 0; height: calc(8 * var(--u)); background: var(--wine); z-index: 3; }

.setas-wrap {
  position: absolute;
  left: calc(1129 * var(--u));
  top: 0;
  width: calc(325 * var(--u));
  height: calc(236 * var(--u));
  overflow: hidden;
}
.setas-wrap img { width: calc(325 * var(--u)); height: calc(236 * var(--u)); max-width: none; }

.benefits {
  position: absolute;
  left: calc(110 * var(--u));
  top: calc(17 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, calc(182 * var(--u)));
  color: var(--black);
  text-align: center;
}
.benefits li { display: flex; flex-direction: column; align-items: center; }
.benefits img { height: calc(68 * var(--u)); width: auto; }
.benefits li:nth-child(2) img { height: calc(49 * var(--u)); margin: calc(10 * var(--u)) 0 calc(9 * var(--u)); }
.benefits h3 {
  margin-top: calc(18 * var(--u));
  font-weight: 900;
  font-size: calc(18.7 * var(--u));
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wine);
  line-height: 1;
}
.benefits p {
  margin-top: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: .02em;
  max-width: calc(170 * var(--u));
}

.rodrigo { position: absolute; left: calc(717 * var(--u)); top: calc(41 * var(--u)); width: calc(617 * var(--u)); z-index: 2; }

.who-title {
  position: absolute;
  left: calc(113 * var(--u));
  top: calc(294 * var(--u));
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}
.who-title span { display: block; font-size: calc(52.8 * var(--u)); letter-spacing: .02em; color: var(--cream); }
.who-title strong { display: block; font-weight: 900; font-size: calc(104 * var(--u)); letter-spacing: -.04em; color: var(--red); margin-top: calc(-2 * var(--u)); }
.who-bio {
  position: absolute;
  left: calc(116 * var(--u));
  top: calc(458 * var(--u));
  width: calc(575 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: .02em;
}
.who-bio b { color: var(--cream); letter-spacing: 0; }
.who-btn { position: absolute; left: calc(116 * var(--u)); top: calc(737 * var(--u)); width: calc(504 * var(--u)); height: calc(55 * var(--u)); }

/* =========================================================
   3. O QUE É
   ========================================================= */
.s3 { height: calc(695 * var(--u)); background: var(--cream); color: var(--black); }
.s3 .car {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc((100% - 1400 * var(--u)) / 2 + 582 * var(--u));
  background: #111 url("/assets/car-closeup-582.webp") right center / cover no-repeat;
  background-image: image-set(url("/assets/car-closeup-582.webp") 1x, url("/assets/car-closeup-1164.webp") 2x);
}
.about { position: absolute; left: calc(682 * var(--u)); top: calc(70 * var(--u)); width: calc(610 * var(--u)); }
.about-title { font-weight: 900; font-size: calc(48 * var(--u)); letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.about-logo { width: calc(599 * var(--u)); margin-top: calc(22 * var(--u)); }
.about p {
  width: calc(520 * var(--u));
  margin-top: calc(56 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: .02em;
}
.about p + p { margin-top: calc(32 * var(--u)); }

/* =========================================================
   4. PARA QUEM É
   ========================================================= */
.s4 { height: calc(1075 * var(--u)); background: #120204 url("/assets/bg-s4.webp") center / cover no-repeat; }
.forwho { position: absolute; left: calc(115 * var(--u)); top: calc(130 * var(--u)); width: calc(540 * var(--u)); }
.forwho-title { font-weight: 900; text-transform: uppercase; line-height: 1; }
.forwho-title span { display: block; font-size: calc(48 * var(--u)); letter-spacing: .02em; }
.forwho-title strong { display: block; font-weight: 900; font-size: calc(83 * var(--u)); letter-spacing: -.04em; color: var(--cream); margin-top: calc(4 * var(--u)); }

.checklist { margin: calc(46 * var(--u)) 0 0 calc(45 * var(--u)); }
.checklist li {
  position: relative;
  padding-left: calc(46 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: calc(32 * var(--u));
}
.checklist li + li { margin-top: calc(18 * var(--u)); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  transform: translateY(-50%);
  background: url("/assets/icon-check.svg") center / contain no-repeat;
}
.forwho-btn { width: calc(526 * var(--u)); height: calc(58 * var(--u)); margin-top: calc(66 * var(--u)); }

.tickets-s4 { position: absolute; left: calc(750 * var(--u)); top: calc(84 * var(--u)); width: calc(485 * var(--u)); display: flex; flex-direction: column; gap: calc(27 * var(--u)); }

/* ---------- cards de ingresso ---------- */
.ticket {
  position: relative;
  display: block;
  color: var(--white);
  text-decoration: none;
  background: rgba(0, 0, 0, .62);
  border-radius: calc(14 * var(--t));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.tickets-s4 .ticket { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.tickets-s4 .ticket:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(230, 35, 53, .7), 0 10px 40px rgba(0, 0, 0, .4); }
.ticket-vip { box-shadow: inset 0 0 0 2px rgba(230, 35, 53, .25); }

.tk-head { display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--t)); }
.tk-head h3 {
  font-stretch: 100%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: calc(47 * var(--t));
  line-height: calc(44 * var(--t));
}
.tk-head h3 span, .tk-head h3 strong { display: block; font-weight: 800; }
.tk-head h3 strong { color: var(--red); }
.tk-icon { flex: none; }

.ticket-free { padding: calc(27 * var(--t)) calc(27 * var(--t)) calc(28 * var(--t)); }
.ticket-free .tk-icon { width: calc(91 * var(--t)); }
.tk-box { border: 2px solid var(--cream); border-radius: calc(6 * var(--t)); }
.tk-box-free {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--t));
  margin-top: calc(19 * var(--t));
  padding: calc(17 * var(--t)) calc(10 * var(--t)) calc(18 * var(--t)) calc(17 * var(--t));
}
.tk-box-free img { width: calc(75 * var(--t)); flex: none; }
.tk-box-free p { font-size: calc(18 * var(--t)); line-height: calc(28 * var(--t)); }

.ticket-vip { padding: calc(15 * var(--t)) calc(27 * var(--t)) calc(22 * var(--t)); }
.tk-head-vip { justify-content: space-between; align-items: center;  padding: 0 calc(8 * var(--t)) 0 calc(13 * var(--t)); }
.tk-head-vip h3 strong { font-size: min(calc(147 * var(--t)), 26vw); line-height: calc(118 * var(--t)); letter-spacing: -.03em; margin-left: calc(-6 * var(--t)); }
.tk-side { width: calc(146 * var(--t)); flex: none; }
.tk-side .tk-icon { width: calc(117 * var(--t)); }
.tk-side small { display: block; margin-top: calc(14 * var(--t)); font-size: max(10px, calc(11 * var(--t))); line-height: 1.6; }

.tk-list { margin-top: calc(12 * var(--t)); padding: calc(18 * var(--t)) calc(22 * var(--t)) calc(20 * var(--t)) calc(46 * var(--t)); }
.tk-list li { display: grid; grid-template-columns: calc(49 * var(--t)) 1fr; column-gap: calc(21 * var(--t)); align-items: start; font-size: calc(18 * var(--t)); line-height: calc(32 * var(--t)); }
.tk-list li + li { margin-top: calc(17 * var(--t)); }
.tk-list li img { width: calc(49 * var(--t)); margin-top: calc(-2 * var(--t)); }
.tk-list li:last-child img { width: calc(48 * var(--t)); }
.tk-list b { color: var(--cream); }

.price {
  margin-top: calc(22 * var(--t));
  text-align: center;
  color: var(--red);
  font-stretch: 100%;
  font-weight: 900;
  font-size: calc(88 * var(--t));
  letter-spacing: -.02em;
  line-height: 1;
}
.price small { font-size: calc(54.7 * var(--t)); font-weight: 900; }

/* =========================================================
   5. FAQ + INGRESSOS + RODAPÉ
   ========================================================= */
.s5 { height: calc(1614 * var(--u)); background: #7b0516 url("/assets/bg-faq.webp") center calc(158 * var(--u)) / cover no-repeat; }
.faq-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(161 * var(--u));
  background: var(--cream);
}
.faq-head h2 {
  color: var(--wine);
  font-weight: 900;
  font-size: calc(49 * var(--u));
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1;
}
.s5 .stage { height: calc(1453 * var(--u)); }

.faq { position: absolute; left: calc(178 * var(--u)); top: calc(80 * var(--u)); width: calc(505 * var(--u)); color: var(--cream); }
.faq dl { font-size: calc(21 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: .02em; }
.faq dt { position: relative; padding-left: calc(42 * var(--u)); font-weight: 800; }
.faq dt span { position: absolute; left: 0; }
.faq dd { margin-bottom: calc(34 * var(--u)); }
.faq-quote { font-size: calc(21 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: .02em; font-weight: 800; font-style: italic; }

.tickets-s5 { position: absolute; left: calc(751 * var(--u)); top: calc(76 * var(--u)); width: calc(482 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.tk-group .ticket { border-radius: calc(14 * var(--t)) calc(14 * var(--t)) 0 0; }
.tk-group .btn-glow { margin-top: calc(-3 * var(--t)); position: relative; }

.foot hr { position: absolute; left: calc(116 * var(--u)); top: calc(1209 * var(--u)); width: calc(1174 * var(--u)); height: calc(4 * var(--u)); margin: 0; border: 0; background: var(--cream); }
.foot-logo { position: absolute; left: calc(116 * var(--u)); top: calc(1285 * var(--u)); width: calc(532 * var(--u)); }
.foot-date { position: absolute; left: calc(687 * var(--u)); top: calc(1271 * var(--u)); width: calc(577 * var(--u)); height: calc(105 * var(--u)); padding-left: calc(44 * var(--u)); }

/* =========================================================
   MODAL
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 0, 3, .78); backdrop-filter: blur(4px); animation: fade .2s ease; }
.modal-card {
  --t: 0.8px;
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 36px 30px 28px;
  border-radius: 16px;
  border: 2px solid rgba(230, 35, 53, .6);
  background: linear-gradient(160deg, #3b0510 0%, #120205 100%);
  box-shadow: 0 0 60px rgba(230, 35, 53, .35);
  animation: pop .25s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-x { position: absolute; top: 8px; right: 12px; width: 40px; height: 40px; border: 0; background: none; color: var(--cream); font-size: 32px; line-height: 1; cursor: pointer; }
.modal-logo { width: 150px; margin: 0 auto 18px; }
.modal-card h2 { text-align: center; font-weight: 900; font-size: 24px; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.modal-card h2 strong { display: block; color: var(--red); font-weight: 900; }
.modal-sub { margin-top: 10px; text-align: center; color: var(--cream); font-size: 13px; line-height: 1.5; }
#lead-form { display: grid; gap: 14px; margin-top: 22px; }
#lead-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
#lead-form input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 2px solid rgba(227, 221, 207, .35);
  border-radius: 8px;
  background: rgba(0, 0, 0, .45);
  color: var(--white);
  font: 400 16px/1 "Archivo", sans-serif;
  font-stretch: 110%;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#lead-form input::placeholder { color: rgba(227, 221, 207, .4); }
#lead-form input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(230, 35, 53, .25); }
#lead-form input[aria-invalid="true"] { border-color: #ff5a6a; }
#lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: #ff8b97; font-size: 13px; line-height: 1.4; }
.btn-submit { margin-top: 6px; font-size: 19px; min-height: 60px; }
.btn-submit[disabled] { opacity: .7; cursor: progress; }
.modal-legal { text-align: center; font-size: 11px; line-height: 1.5; color: rgba(227, 221, 207, .6); }
.ok-badge { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; background: rgba(230, 35, 53, .15); border: 2px solid var(--red); }
.ok-badge img { width: 54px; }
.upsell { margin-top: 24px; padding: 18px; border: 2px solid var(--cream); border-radius: 10px; text-align: center; }
.upsell p { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.upsell b { color: var(--cream); }
.upsell .btn-glow { font-size: 17px; min-height: 56px; }

/* =========================================================
   MOBILE / TABLET (< 1000px) — layout em coluna
   ========================================================= */
@media (max-width: 1099px) {
  :root { --u: 1px; --t: max(0.64px, min(1px, calc((var(--vw, 100vw) - 32px) / 440))); }
  .sec, .s2, .s3, .s4, .s5, .hero { height: auto; }
  .stage { width: auto; max-width: 560px; padding: 0 16px; }
  .stage > *, .hero-copy > *, .foot > *, .who > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }

  /* hero */
  .hero { background-position: 30% top; padding-top: 32px; }
  .hero .stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-logo { width: min(260px, 70%); order: 0; }
  .hero-copy { order: 1; display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
  .hero-photo { order: 2; width: 100%; max-width: 520px; margin-top: 8px; -webkit-mask-image: linear-gradient(#000 70%, transparent 93%); mask-image: linear-gradient(#000 70%, transparent 93%); }
  .hero-title { text-align: center; }
  .hero-title .t1 { font-size: clamp(13px, 3.8vw, 20px); letter-spacing: .16em; margin-right: -.16em; }
  .hero-title .t2 { font-size: clamp(20px, 6.9vw, 38px); margin-top: 6px; }
  .hero-title .t3 { font-size: clamp(28px, 9.6vw, 54px); }
  .hero-date { width: 100% !important; height: auto !important; margin-top: 22px; padding: 14px 18px 14px 26px; gap: 16px; }
  .datebox img { width: clamp(40px, 13vw, 56px); }
  .datebox strong, .datebox em { font-size: clamp(14px, 4.9vw, 30px); }
  .hero-p1 { width: auto; text-align: center; margin-top: 22px; font-size: 16px; line-height: 1.5; }
  .hero-line { width: 100%; height: 4px; margin: 22px 0; }
  .hero-p2 { width: auto; text-align: center; font-size: 15px; line-height: 1.55; }
  .btn { font-size: clamp(22px, 6.6vw, 32px); }
  .hero-btn { width: 92%; height: 54px; margin-top: 26px; }
  .hero-next { margin-top: 26px; font-size: 16px; line-height: 1.3; gap: 14px; text-align: left; }
  .hero-next .arrows { width: 40px; height: 36px; }

  /* s2 */
  .s2 .band, .s2 .dark { display: none; }
  .s2 .stage { max-width: none; padding: 0; display: flex; flex-direction: column; }
  .setas-wrap { display: none; }
  .benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 12px;
    padding: 36px 16px;
    background: var(--cream);
  }
  .benefits li { justify-self: center; }
  .benefits img { height: 56px; }
  .benefits li:nth-child(2) img { height: 40px; margin: 8px 0; }
  .benefits h3 { font-size: 17px; margin-top: 14px; }
  .benefits p { font-size: 14px; line-height: 1.35; margin-top: 8px; max-width: 170px; }
  .who { order: 1; padding: 44px 16px 0; background: #2a0309 url("/assets/bg-s2.webp") center / cover no-repeat; text-align: center; }
  .who-title span { font-size: clamp(22px, 7.2vw, 40px); }
  .who-title strong { font-size: clamp(48px, 15.5vw, 86px); }
  .who-bio { width: auto; max-width: 560px; margin: 18px auto 0; font-size: 15px; line-height: 1.8; text-align: left; }
  .who-btn { width: 92%; max-width: 504px; height: 54px; margin: 28px auto 0; }
  .rodrigo { order: 2; width: 100%; max-width: 460px; margin: 0 auto; padding-top: 16px; background: none; }
  .s2 { background: #2a0309; }
  .s2 .redline { position: relative; height: 6px; }

  /* s3 */
  .s3 { display: flex; flex-direction: column; }
  .s3 .car { position: relative; width: 100%; height: clamp(260px, 62vw, 420px); background-position: center 60%; background-image: url("/assets/car-closeup-1164.webp"); }
  .s3 .stage { padding: 40px 16px 48px; }
  .about { width: auto; }
  .about-title { font-size: clamp(26px, 8vw, 40px); }
  .about-logo { width: 100%; max-width: 480px; margin-top: 14px; }
  .about p { width: auto; margin-top: 28px; font-size: 16px; line-height: 1.6; }
  .about p + p { margin-top: 18px; }

  /* s4 */
  .s4 { padding: 48px 0 56px; background: #120204 linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.35)), url("/assets/bg-s4.webp") 70% center / cover no-repeat; background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.35)), url("/assets/bg-s4.webp"); }
  .forwho { width: auto; }
  .forwho-title span { font-size: clamp(24px, 7.4vw, 40px); }
  .forwho-title strong { font-size: clamp(44px, 14vw, 72px); }
  .checklist { margin: 28px 0 0 0; }
  .checklist li { font-size: 16px; line-height: 1.5; padding-left: 40px; }
  .checklist li + li { margin-top: 16px; }
  .checklist li::before { width: 28px; height: 28px; }
  .forwho-btn { width: 100%; height: 56px; margin-top: 34px; }
  .tickets-s4 { width: 100%; margin-top: 44px; gap: 20px; }

  /* s5 */
  .s5 { background-position: center 100px; background-size: auto 100%; }
  .faq-head { height: auto; padding: 30px 16px; }
  .faq-head h2 { font-size: clamp(20px, 6.4vw, 40px); text-align: center; }
  .s5 .stage { height: auto; padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; }
  .faq { order: 2; width: auto; margin-top: 48px; }
  .faq dl, .faq-quote { font-size: 15px; line-height: 1.65; }
  .faq dt { padding-left: 28px; }
  .faq dd { margin-bottom: 22px; }
  .tickets-s5 { order: 1; width: 100%; gap: 24px; }
  .foot { order: 3; margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .foot hr { width: 100%; height: 3px; }
  .foot-logo { width: min(340px, 90%); }
  .foot-date { width: 100% !important; height: auto !important; padding: 14px 18px 14px 26px; gap: 16px; }
}

@media (max-width: 1099px) and (min-width: 600px) {
  .benefits { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 0 auto; width: 100%; }
  .s2 .stage > .benefits { padding-left: max(16px, calc(50% - 450px)); padding-right: max(16px, calc(50% - 450px)); max-width: none; }
  .stage { max-width: 680px; }
  .s2 .stage { max-width: none; }
  .hero-title .t1 { font-size: 22px; }
  .hero-title .t2 { font-size: 44px; }
  .hero-title .t3 { font-size: 62px; }
  .datebox strong, .datebox em { font-size: 32px; }
  .hero-date { max-width: 560px; }
  .hero-p1, .hero-p2 { font-size: 18px; max-width: 600px; }
  .who-bio { font-size: 17px; max-width: 640px; }
  .about p, .checklist li, .faq dl, .faq-quote { font-size: 18px; }
  .s3 .car { height: 420px; }
  .tickets-s4, .tickets-s5 { max-width: 485px; margin-left: auto; margin-right: auto; }
}

/* ---------- TABLET (768–1099px): aproveita a largura com 2 colunas ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
  .stage { max-width: 980px; padding: 0 32px; }
  .hero .stage { max-width: 700px; }

  /* quem conduz: texto + foto lado a lado */
  .s2 { background: #2a0309 url("/assets/bg-s2.webp") center bottom / cover no-repeat; }
  .s2 .stage { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; max-width: 980px; }
  .s2 .stage > .benefits { margin-inline: calc(50% - var(--vw, 100vw) / 2); padding-inline: max(16px, calc(var(--vw, 100vw) / 2 - 450px)); max-width: none; }
  .s2 .stage > .benefits { grid-column: 1 / -1; }
  .who { order: 1; background: none; text-align: left; padding: 48px 0 56px 32px; align-self: center; }
  .who-bio { margin-left: 0; font-size: 16px; }
  .who-title span { font-size: clamp(22px, 3.6vw, 40px); }
  .who-title strong { font-size: clamp(44px, 8vw, 88px); }
  .who-btn { width: 100%; margin-left: 0; }
  .rodrigo { order: 2; max-width: none; width: 100%; padding: 24px 24px 0 0; background: none; }

  /* o que é: carro à esquerda, texto à direita */
  .s3 { flex-direction: row; }
  .s3 .car { width: 40%; height: auto; min-height: 100%; }
  .s3 .stage { flex: 1; padding: 56px 32px; }
  .about p { font-size: 17px; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  :root { --t: 0.9px; }
  .s4 .stage, .s5 .stage { display: grid; grid-template-columns: 1fr calc(485 * var(--t)); column-gap: 48px; align-items: start; }
  .tickets-s4, .tickets-s5 { margin-top: 0; max-width: none; width: 100%; }
  .forwho { padding-top: 8px; }
  .faq { order: 1; margin-top: 0; }
  .tickets-s5 { order: 2; }
  .foot { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .foot hr { flex-basis: 100%; }
  .foot-logo { width: 380px; }
  .foot-date { width: auto !important; flex: none; padding-right: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}