/* =============================================================================
   IMERSÃO INTELIGÊNCIA EM VENDAS — folha de estilo (fonte: px, base 1920/480)
   -----------------------------------------------------------------------------
   ⚠️  EDITE SOMENTE ESTE ARQUIVO. O imersao-iev.css é gerado automaticamente
       (px → vw) ao abrir a página em ambiente .local. Ver README.md.
   ============================================================================= */

:root {
  --ink: #181819; /* fundo escuro                     */
  --ink-2: #101011; /* fundo escuro mais profundo       */
  --ink-3: #201f1f; /* cartões sobre fundo escuro       */
  --cream: #f5f3ee; /* fundo das seções claras          */
  --sand: #f9e7be; /* moldura bege dos bônus           */
  --gold: #e8a000; /* dourado principal (botões)       */
  --gold-2: #edc35c; /* dourado claro (títulos/destaque) */
  --gold-3: #b9a179; /* dourado apagado (kickers)        */
  --cream-btn: #f9ecc9; /* fundo do botão em hover          */
  --txt-light: #f5f3ee; /* texto principal no escuro        */
  --txt-mut-d: #a8a296; /* texto secundário no escuro       */
  --txt-dark: #181819; /* texto principal no claro         */
  --txt-mut-l: #6f6b64; /* texto secundário no claro        */

  --font: "Inter", sans-serif; /* corpo de texto      */
  --font-title: "Gilroy", sans-serif; /* títulos e display   */
}

.iev {
  font-family: var(--font);
  color: var(--txt-light);
  background-color: var(--ink);
  overflow: hidden;
}

/* Gilroy nos títulos e nos elementos de "display" (números, botões, rótulos
   grandes). Todo o resto herda Inter do .iev — ver seção 9 do README. */
.iev h1,
.iev h2,
.iev h3,
.iev h4,
.cc-btn,
.cc-btn-sm,
.cc-btn-out,
.s00 p.p01,
.s00-timer .number,
.s00-timer .unit,
.s01-info p.p02,
.s01-info p.p03,
.s02-era p.p01,
.s02-now,
.s02-question,
.s03-card p.p01,
.s04-number,
.s05-claim,
.s08-title,
.s09-day,
.cc-acc-num,
.cc-acc-title,
.s11-title,
.s12-price,
.s14-brand {
  font-family: var(--font-title);
}

.iev h1,
.iev h2,
.iev h3,
.iev h4 {
  font-weight: 600;
}

/* Barra de rolagem */
html {
  font-size: 62.5%;
  scrollbar-color: rgb(232 160 2 / 40%) transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(232 160 2 / 40%);
  border-radius: 5.26vw;
}

body {
  font-size: 1.6rem; /* = 0.94vw */
  line-height: 1.3;
}

/* ==========================================================================
   Fundos das seções (grid sutil + brilhos dourados)
   Substitua/complemente por imagens reais quando elas chegarem.
   ========================================================================== */

.sec-dark {
  position: relative;
  background-color: var(--ink);
  z-index: 1;
}

.sec-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgb(232 160 2 / 4%) 0.06vw, transparent 0.06vw),
    linear-gradient(90deg, rgb(232 160 2 / 4%) 0.06vw, transparent 0.06vw);
  background-size: 7.02vw 7.02vw, 7.02vw 7.02vw;
  opacity: 0.5;
}

.sec-light {
  position: relative;
  color: var(--txt-dark);
  background-color: var(--cream);
  z-index: 1;
}

.sec-gold {
  position: relative;
  color: var(--txt-dark);
  background-color: var(--gold);
  z-index: 1;
}

/* Seções que recebem imagem de fundo: a imagem já traz o grid impresso,
   então o grid de CSS é desligado para não duplicar. */
.sec-dark.has-bg::before,
.sec-light.has-bg::before {
  display: none;
}

.sec-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgb(24 24 25 / 4%) 0.06vw, transparent 0.06vw),
    linear-gradient(90deg, rgb(24 24 25 / 4%) 0.06vw, transparent 0.06vw);
  background-size: 7.02vw 7.02vw, 7.02vw 7.02vw;
  opacity: 0.8;
}

/* ==========================================================================
   Componentes reutilizáveis
   ========================================================================== */

/* --- Botão principal (Component 2 do figma) ------------------------------- */
.cc-btn {
  width: fit-content;
  padding: 1.17vw 2.34vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.52vw;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--txt-dark);
  background-color: var(--gold);
  border-radius: 5.26vw;
  box-shadow: 0 0 2.34vw rgb(232 160 2 / 45%);
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

/* sobre fundo escuro o hover clareia (Component 2) */
.cc-btn:hover {
  color: var(--txt-dark);
  background-color: var(--cream-btn);
  box-shadow: 0 0 3.16vw rgb(232 160 2 / 60%);
}

/* sobre fundo claro o hover escurece (Component 3) */
.sec-light .cc-btn:hover {
  color: var(--gold);
  background-color: var(--ink);
  box-shadow: inset 0 0 0 0.06vw rgb(232 160 2 / 45%),
    0 0 3.16vw rgb(232 160 2 / 50%);
}

/* sobre fundo dourado o botão inverte: escuro com texto dourado */
.cc-btn-dark {
  color: var(--gold);
  background-color: var(--ink);
  box-shadow: 0 0 2.34vw rgb(24 24 25 / 22%);
}

.cc-btn-dark:hover {
  color: var(--gold-2);
  background-color: #232326;
  box-shadow: 0 0 3.16vw rgb(24 24 25 / 32%);
}

/* --- Botão pequeno com seta (Component 6) --------------------------------- */
.cc-btn-sm {
  display: flex;
  align-items: center;
  gap: 0.58vw;
  padding: 0.76vw 1.29vw;
  font-size: 0.94vw;
  font-weight: 600;
  line-height: 1;
  color: var(--txt-dark);
  background-color: var(--gold);
  border-radius: 5.26vw;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-btn-sm:hover {
  color: var(--txt-dark);
  background-color: var(--cream-btn);
  box-shadow: 0 0 1.75vw rgb(232 160 2 / 45%);
}

.cc-btn-sm svg {
  width: 1.05vw;
  height: 1.05vw;
  flex-shrink: 0;
}

/* --- Botão contornado (Component 5) --------------------------------------- */
.cc-btn-out {
  width: fit-content;
  padding: 0.99vw 1.75vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05vw;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  border: 0.1rem solid var(--gold);
  border-radius: 5.26vw;
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-btn-out:hover {
  color: var(--gold);
  background-color: rgb(232 160 2 / 12%);
  box-shadow: 0 0 1.52vw rgb(232 160 2 / 25%);
}

/* --- Acordeão (usado nos Módulos e no FAQ) --------------------------------- */
.cc-acc {
  width: 51.46vw;
}

.cc-acc-item {
  border-bottom: 0.06vw solid rgb(24 24 25 / 10%);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cc-acc-head {
  width: 100%;
  padding: 1.52vw 1.17vw;
  display: flex;
  align-items: center;
  gap: 1.29vw;
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

.cc-acc-num {
  font-size: 0.99vw;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}

.cc-acc-title {
  flex: 1;
  font-size: 1.29vw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--txt-dark);
}

/* sinal + / × */
.cc-acc-sign {
  position: relative;
  width: 1.05vw;
  height: 1.05vw;
  flex-shrink: 0;
}

.cc-acc-sign::before,
.cc-acc-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.94vw;
  height: 0.09vw;
  background-color: var(--txt-dark);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.cc-acc-sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.cc-acc-item.is-open .cc-acc-sign::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cc-acc-item.is-open .cc-acc-sign::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* painel */
.cc-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.cc-acc-panel-in {
  overflow: hidden;
}

/* a barra dourada da esquerda é inset para o item não "pular" ao abrir */
.cc-acc-item.is-open {
  border-bottom-color: transparent;
  background-color: #fff;
  box-shadow: inset 0.23vw 0 0 var(--gold), 0 0.58vw 1.99vw rgb(24 24 25 / 8%);
}

.cc-acc-item.is-open .cc-acc-panel {
  grid-template-rows: 1fr;
}

.cc-acc-body {
  padding: 0 1.17vw 1.75vw 3.63vw;
  font-size: 0.94vw;
  line-height: 1.7;
  color: var(--txt-mut-l);
}

/* sem numeração (FAQ), o painel alinha com o título */
.cc-acc-plain .cc-acc-body {
  padding-left: 1.17vw;
}

.cc-acc-body p + p,
.cc-acc-body ul {
  margin-top: 0.82vw;
}

.cc-acc-body p + ul {
  margin-top: 0.58vw;
}

.cc-acc-body ul {
  list-style: none;
}

.cc-acc-body li {
  position: relative;
  padding-left: 1.17vw;
  margin-bottom: 0.58vw;
}

.cc-acc-body li:last-child {
  margin-bottom: 0;
}

.cc-acc-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.64vw;
  width: 0.35vw;
  height: 0.35vw;
  transform: rotate(45deg);
  background-color: var(--gold);
}

.cc-acc-body strong {
  font-weight: 600;
  color: var(--txt-dark);
}

/* --- Filete dourado divisor ----------------------------------------------- */
.cc-rule {
  position: relative;
  width: 40.94vw;
  height: 0.06vw;
  margin: 0 auto;
}

.cc-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -0.18vw;
  width: 100%;
  height: 0.23vw;
  background-image: linear-gradient(90deg, transparent, #e9a30b, transparent);
}

/* --- Marcador de conteúdo pendente ---------------------------------------- */
.cc-pendente {
  display: inline-block;
  margin: 0 0 1.17vw;
  padding: 0.58vw 0.82vw;
  font-size: 0.82vw;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 0.1rem dashed rgb(232 160 2 / 70%);
  border-radius: 0.47vw;
  background-color: rgb(232 160 2 / 8%);
}

.sec-light .cc-pendente {
  color: #a8740a;
  background-color: rgb(232 160 2 / 12%);
}

/* ==========================================================================
   s00 · Barra de urgência + contador
   ========================================================================== */

.s00 {
  position: relative;
  background-color: var(--ink-2);
  border-bottom: 0.06vw solid rgb(232 160 2 / 25%);
}

.s00-wrap {
  padding: 0.82vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.52vw;
}

.s00 p.p01 {
  font-size: 0.99vw;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.s00-timer {
  display: flex;
  align-items: center;
  gap: 1.29vw;
  padding: 0.58vw 1.52vw 0.35vw;
  border: 0.1rem solid rgb(232 160 0 / 50%);
  border-radius: 0.82vw;
  background-color: rgb(232 160 0 / 8%);
}

.s00-timer .item {
  display: flex;
  align-items: baseline;
  gap: 0.18vw;
}

.s00-timer .number {
  font-size: 2.11vw;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.s00-timer .unit {
  font-size: 0.99vw;
  font-weight: 600;
  color: rgb(232 160 2 / 60%);
}

.s00-timer .sep {
  width: 0.06vw;
  height: 1.99vw;
  background-color: rgb(232 160 2 / 30%);
}

.s00-timer .is-hidden {
  display: none;
}

/* ==========================================================================
   s01 · Hero
   ========================================================================== */

.s01 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--ink);
}

.s01::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.5rem;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
  z-index: 2;
}

.s01-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.s01-wrap {
  width: 82.46vw;
  margin: 0 auto;
  min-height: 90vh;
  display: flex;
  align-items: center;
  gap: 4.09vw;
}

.s01-info {
  width: 30.99vw;
  padding: 5.26vw 0;
  flex-shrink: 0;
}

.s01-logo img {
  width: 23.98vw;
  margin: 0 0 1.52vw;
}

.s01-info p.p02 {
  font-size: 1.58vw;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--txt-light);
  opacity: 0.8;
}

.s01-info p.p03 {
  margin: 0.7vw 0 1.17vw;
  font-size: 2.46vw;
  font-weight: 700;
  line-height: 1.2;
  background: -webkit-linear-gradient(279deg, #dac69b, #d99500, #d99500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.s01-info p.p04 {
  width: 29.24vw;
  margin-bottom: 2.69vw;
  font-size: 1.05vw;
  line-height: 1.5;
  color: rgb(249 231 191 / 70%);
}

.s01-img {
  width: 51.46vw;
  padding: 7.02vw 0 0;
  flex-shrink: 0;
}

.s01-img-img {
  width: 100%;
}

/* ==========================================================================
   s02 · Linha do tempo das eras
   ========================================================================== */

.s02::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 9.94vw;
  background-image: linear-gradient(rgb(24 24 25 / 12%), transparent);
  z-index: -1;
}

.s02-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s02 h2 {
  font-size: 3.04vw;
  font-weight: 600;
  line-height: 1.24;
  text-align: center;
  color: var(--txt-dark);
}

.s02-timeline {
  width: 100%;
  margin: 4.09vw 0 5.85vw;
}

.s02-eras {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* faixa dourada atrás dos ícones */
.s02-eras::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4.56vw;
  transform: translateY(-50%);
  background-color: var(--gold);
  z-index: 0;
}

.s02-era {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}

.s02-era-top {
  align-self: end;
  padding-bottom: 1.29vw;
  text-align: center;
}

.s02-era-bottom {
  align-self: start;
  padding-top: 1.29vw;
  text-align: center;
}

.s02-era p.p01 {
  font-size: 0.94vw;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.s02-era h3 {
  margin-top: 0.12vw;
  font-size: 1.46vw;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--txt-dark);
}

.s02-era p.p02 {
  margin-top: 0.23vw;
  font-size: 0.7vw;
  color: var(--txt-mut-l);
}

.s02-now {
  display: inline-block;
  margin-top: 0.29vw;
  padding: 0.29vw 0.7vw;
  font-size: 0.76vw;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--txt-dark);
  border-radius: 5.26vw;
  background-color: var(--gold);
}

/* o SVG de cada era já vem com o círculo (creme, ou escuro na era 06) */
.s02-icon {
  width: 4.97vw;
  height: 4.97vw;
  display: flex;
}

.s02-icon img,
.s02-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s02-question {
  width: 35.09vw;
  margin: 2.69vw 0;
  font-size: 1.99vw;
  font-weight: 500;
  line-height: 1.32;
  text-align: center;
  color: var(--txt-dark);
}

.s02 .cc-btn {
  margin-top: 4.33vw;
}

/* ==========================================================================
   s03 · Canal único
   ========================================================================== */

.s03-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s03 h2 {
  font-size: 2.57vw;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--txt-light);
}

.s03 h2 span {
  display: block;
  margin-top: 1.52vw;
  color: var(--gold);
}

.s03-row {
  width: 100%;
  margin-top: 4.44vw;
  display: flex;
  gap: 1.4vw;
}

.s03-card {
  flex: 1;
  padding: 1.75vw 1.64vw 1.99vw;
  border: 0.1rem solid rgb(232 160 2 / 16%);
  border-radius: 0.94vw;
  background-image: linear-gradient(
    180deg,
    rgb(232 160 2 / 6%),
    rgb(232 160 2 / 0%)
  );
}

.s03-card p.p01 {
  font-size: 2.11vw;
  font-weight: 600;
  line-height: 1;
  color: rgb(232 160 0 / 60%);
}

.s03-card h3 {
  margin: 1.29vw 0 0.82vw;
  font-size: 1.29vw;
  font-weight: 500;
  line-height: 1.25;
  color: var(--txt-light);
}

.s03-card p.p02 {
  font-size: 0.88vw;
  line-height: 1.6;
  color: var(--txt-mut-d);
}

.s03 .cc-btn {
  margin-top: 4.44vw;
}

/* ==========================================================================
   s04 · Cases de sucesso
   ========================================================================== */

.s04-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s04 h2 {
  font-size: 2.69vw;
  font-weight: 600;
  text-align: center;
  color: var(--txt-light);
}

.s04-row {
  width: 100%;
  margin-top: 3.86vw;
  display: flex;
  gap: 1.4vw;
}

.s04-card {
  flex: 1;
  padding: 1.99vw 1.75vw 2.34vw;
  border: 0.1rem solid rgb(232 160 2 / 16%);
  border-radius: 1.05vw;
  background-image: linear-gradient(
    180deg,
    rgb(232 160 2 / 5%),
    rgb(232 160 2 / 0%)
  );
}

.s04-tag {
  display: inline-block;
  padding: 0.41vw 0.82vw;
  font-size: 0.7vw;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold);
  border: 0.1rem solid rgb(232 160 2 / 55%);
  border-radius: 5.26vw;
}

.s04-profile {
  display: flex;
  height: 4.91vw;
  margin: 1.17vw 0 0;
}

.s04-card h3 {
  margin: 1.29vw 0 0.7vw;
  font-size: 1.46vw;
  font-weight: 500;
  color: var(--txt-light);
}

.s04-card p.p01 {
  font-size: 0.82vw;
  line-height: 1.55;
  color: var(--txt-mut-d);
}

.s04-box {
  margin: 1.52vw 0 1.75vw;
  padding: 1.4vw 1.29vw 1.64vw;
  border-radius: 0.7vw;
  background-image: linear-gradient(
    180deg,
    rgb(232 160 2 / 10%),
    rgb(232 160 2 / 2%)
  );
}

.s04-box p.p02 {
  font-size: 0.82vw;
  line-height: 1.55;
  color: var(--txt-mut-d);
}

.s04-arrow {
  margin: 0.82vw 0;
  font-size: 1.17vw;
  line-height: 1;
  color: var(--gold);
}

.s04-number {
  margin: 0.7vw 0 0.82vw;
  font-size: 2.46vw;
  font-weight: 500;
  line-height: 1.05;
  color: var(--gold);
}

.s04-number-sm {
  font-size: 1.99vw;
}

.s04-box p.p03 {
  font-size: 0.88vw;
  line-height: 1.5;
  color: var(--txt-light);
}

.s04-card ul {
  list-style: none;
}

.s04-card li {
  position: relative;
  padding-left: 1.17vw;
  margin-bottom: 0.94vw;
  font-size: 0.82vw;
  line-height: 1.6;
  color: var(--txt-mut-d);
}

.s04-card li:last-child {
  margin-bottom: 0;
}

.s04-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.47vw;
  width: 0.35vw;
  height: 0.35vw;
  transform: rotate(45deg);
  background-color: var(--gold);
}

.s04 .cc-btn {
  margin-top: 4.09vw;
}

/* ==========================================================================
   s05 · Sistema de receita
   ========================================================================== */

.s05-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.s05-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s05 h2 {
  font-size: 2.69vw;
  font-weight: 600;
  line-height: 1.28;
  text-align: center;
  color: var(--txt-light);
}

.s05-img {
  width: 100%;
  margin: 4.44vw 0;
}

.s05-img img {
  width: 100%;
}

.s05-chips {
  display: flex;
  align-items: center;
  gap: 0.82vw;
  margin-bottom: 5.26vw;
}

.s05-chips p.p01 {
  margin-right: 0.47vw;
  font-size: 0.76vw;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--txt-mut-d);
}

.s05-chips span {
  padding: 0.64vw 1.17vw;
  font-size: 0.88vw;
  color: var(--txt-light);
  border: 0.1rem solid rgb(243 236 224 / 14%);
  border-radius: 5.26vw;
  background-color: rgb(243 236 224 / 5%);
}

.s05-claim {
  margin: 2.69vw 0;
  font-size: 2.22vw;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--txt-light);
}

.s05-claim span {
  color: var(--gold);
}

.s05 .cc-btn {
  margin-top: 4.68vw;
}

/* ==========================================================================
   s06 · Bônus
   ========================================================================== */
.s06 {
  overflow: hidden;
  background-color: var(--gold);
}

.s06::after {
  position: absolute;
  content: "";
  width: 81.87vw;
  height: 29.24vw;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(closest-side, #deba69, transparent);
  filter: blur(2.34vw);
  z-index: -1;
}

.s06-wrap {
  width: 61.99vw;
  margin: 0 auto;
  padding: 5.61vw 0 5.85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* losango + filete que emolduram o título */
.s06-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s06-dot {
  width: 0.58vw;
  height: 0.58vw;
  transform: rotate(45deg);
  background-color: var(--txt-dark);
}

.s06 h2 {
  margin: 1.17vw 0 1.87vw;
  font-size: 2.81vw;
  color: var(--txt-dark);
}

.s06-rule {
  width: 4.09vw;
  height: 0.06vw;
  background-color: rgb(24 24 25 / 30%);
}

.s06-box {
  width: 100%;
  margin: 3.51vw 0;
  display: flex;
  align-items: stretch;
  gap: 2.11vw;
}

.s06-card {
  flex: 1;
  padding: 2.34vw 2.34vw 2.57vw;
  border-radius: 1.17vw;
  background-color: var(--cream);
  box-shadow: 0 1.05vw 2.92vw rgb(24 24 25 / 12%);
}

/* cabeçalho: círculo com o número + rótulo "BÔNUS" */
.s06-head {
  display: flex;
  align-items: center;
  gap: 0.82vw;
  margin-bottom: 1.52vw;
}

.s06-num {
  width: 2.69vw;
  height: 2.69vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.94vw;
  font-weight: 600;
  color: var(--gold);
  border-radius: 50%;
  background-color: var(--ink);
}

.s06-label {
  font-size: 0.7vw;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #9b968d;
}

.s06-tag {
  display: inline-block;
  padding: 0.58vw 1.05vw;
  font-size: 0.7vw;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--gold);
  border-radius: 5.26vw;
  background-color: var(--ink);
}

.s06-card h3 {
  margin-top: 2.05vw;
  font-size: 1.75vw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--txt-dark);
}

.s06-card ul {
  margin-top: 1.29vw;
  list-style: none;
}

.s06-card li {
  position: relative;
  padding-left: 1.17vw;
  margin-bottom: 0.82vw;
  font-size: 0.88vw;
  line-height: 1.5;
  color: #4a4741;
}

.s06-card li:last-child {
  margin-bottom: 0;
}

.s06-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.47vw;
  width: 0.35vw;
  height: 0.35vw;
  transform: rotate(45deg);
  background-color: var(--gold);
}

/* ==========================================================================
   s07 · Mentoras
   ========================================================================== */

.s07-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 7.02vw 0 7.6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s07 h2 {
  font-size: 2.69vw;
  font-weight: 600;
  text-align: center;
  color: var(--txt-light);
}

.s07-row {
  width: 100%;
  margin-top: 4.44vw;
  display: flex;
  gap: 1.52vw;
}

.s07-card {
  position: relative;
  flex: 1;
  aspect-ratio: 380 / 470;
  overflow: hidden;
  border-radius: 1.05vw;
  border: 0.1rem solid rgb(232 160 2 / 14%);
}

.s07-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s07-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.51vw 1.52vw 1.52vw;
  background-image: linear-gradient(
    180deg,
    transparent,
    rgb(16 16 17 / 88%) 45%
  );
}

.s07-info h3 {
  font-size: 1.52vw;
  font-weight: 500;
  color: var(--txt-light);
}

.s07-info p.p01 {
  margin: 0.47vw 0 0.94vw;
  font-size: 0.76vw;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.s07-logo {
  width: 16.96vw;
}

.s07-logo img {
  width: 100%;
}

.s07 .cc-btn {
  margin-top: 4.68vw;
}

/* ==========================================================================
   s08 · Antes / depois do LAB
   ========================================================================== */
.s08 {
  overflow: hidden;
}

.s08::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.5rem;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
  z-index: 2;
}

.s08-wrap {
  width: 64.33vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s08-wrap::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 40vw;
  background-image: radial-gradient(closest-side, var(--gold), transparent);
  z-index: -1;
  filter: blur(11.7vw);
  opacity: 0.3;
}

.s08-cols {
  position: relative;
  width: 100%;
  display: flex;
  gap: 3.51vw;
}

/* divisória vertical entre as colunas */
.s08-cols::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6.43vw;
  bottom: -3.51vw;
  width: 0.06vw;
  background-image: linear-gradient(
    180deg,
    rgb(232 160 2 / 50%),
    rgb(232 160 2 / 8%)
  );
}

.s08-col {
  flex: 1;
}

.s08-title {
  margin-bottom: 2.34vw;
  font-size: 1.4vw;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.s08-before .s08-title {
  color: var(--txt-mut-d);
}

.s08-after .s08-title {
  color: var(--gold);
}

.s08-col ul {
  list-style: none;
}

.s08-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.82vw;
  padding: 1.17vw 1.4vw;
  margin-bottom: 0.94vw;
  font-size: 0.94vw;
  line-height: 1.5;
  border-radius: 0.7vw;
}

.s08-col li:last-child {
  margin-bottom: 0;
}

.s08-col li .ico {
  font-size: 0.94vw;
  line-height: 1.5;
  flex-shrink: 0;
}

.s08-before li {
  color: var(--txt-mut-d);
  border: 0.1rem solid rgb(243 236 224 / 10%);
  background-color: rgb(243 236 224 / 3%);
}

.s08-before li .ico {
  color: #7d776c;
}

.s08-after li {
  color: var(--txt-light);
  border: 0.1rem solid rgb(232 160 2 / 20%);
  background-image: linear-gradient(
    90deg,
    rgb(232 160 2 / 9%),
    rgb(232 160 2 / 2%)
  );
}

.s08-after li .ico {
  color: var(--gold);
}

.s08 .cc-btn {
  margin-top: 4.09vw;
}

/* ==========================================================================
   s09 · Dia 01 / Dia 02
   ========================================================================== */

.s09-wrap {
  width: 64.33vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  gap: 3.51vw;
}

.s09-col {
  flex: 1;
}

.s09-line {
  display: block;
  width: 100%;
  height: 0.12vw;
  background-color: var(--gold);
}

.s09-day {
  margin: 1.75vw 0 1.52vw;
  font-size: 3.63vw;
  font-weight: 700;
  line-height: 1;
  color: rgb(24 24 25 / 12%);
}

.s09-col h3 {
  margin-bottom: 1.75vw;
  font-size: 1.4vw;
  font-weight: 500;
  color: var(--txt-dark);
}

.s09-card {
  display: flex;
  align-items: flex-start;
  gap: 1.29vw;
  padding: 1.75vw 1.75vw 1.99vw;
  margin-bottom: 1.52vw;
  border-radius: 0.82vw;
  background-color: #fff;
  box-shadow: 0 0.35vw 1.52vw rgb(24 24 25 / 6%);
}

.s09-card:last-child {
  margin-bottom: 0;
}

.s09-card img,
.s09-card svg {
  width: 1.87vw;
  height: 1.87vw;
  flex-shrink: 0;
  object-fit: contain;
}

.s09-card h4 {
  margin-bottom: 0.58vw;
  font-size: 1.35vw;
  font-weight: 500;
  color: var(--txt-dark);
}

.s09-card p {
  font-size: 0.88vw;
  line-height: 1.6;
  color: var(--txt-mut-l);
}

/* ==========================================================================
   s10 · Módulos (acordeão)
   ========================================================================== */
.s10 h2 {
  padding: 0 0 1.75vw;
  font-size: 2.92vw;
  color: var(--txt-dark);
}

.s10-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 5.85vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s10 .cc-acc {
  margin-top: 4.68vw;
}

.s10 .cc-btn {
  margin-top: 4.68vw;
}

/* ==========================================================================
   x12 · FAQ (acordeão) — mesma casca visual da s10
   ========================================================================== */

.x12 h2 {
  padding: 0 0 1.75vw;
  font-size: 2.92vw;
  color: var(--txt-dark);
}

.x12-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 5.85vw 0 7.02vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.x12 .cc-acc {
  margin-top: 4.68vw;
}

.x12 .cc-btn {
  margin-top: 4.68vw;
}

/* ==========================================================================
   s11 · Para quem é / não é
   ========================================================================== */

.s11-wrap {
  position: relative;
  width: 70.18vw;
  margin: 0 auto;
  padding: 6.43vw 0 7.02vw;
  display: flex;
  gap: 3.51vw;
}

.s11-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3.51vw;
  bottom: 3.51vw;
  width: 0.06vw;
  background-image: linear-gradient(
    180deg,
    rgb(232 160 2 / 35%),
    rgb(232 160 2 / 5%)
  );
}

.s11-col {
  flex: 1;
}

.s11-title {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  margin-bottom: 1.99vw;
  font-size: 1.4vw;
  font-weight: 600;
  color: var(--txt-light);
}

.s11-yes .s11-title .ico {
  color: var(--gold);
}

.s11-no .s11-title .ico {
  color: var(--txt-mut-d);
}

.s11-col ul {
  list-style: none;
}

.s11-yes li {
  padding: 1.29vw 1.52vw;
  margin-bottom: 1.05vw;
  font-size: 0.99vw;
  line-height: 1.5;
  color: var(--txt-light);
  border: 0.1rem solid rgb(232 160 2 / 22%);
  border-radius: 0.7vw;
  background-image: linear-gradient(
    90deg,
    rgb(232 160 2 / 7%),
    rgb(232 160 2 / 1%)
  );
}

.s11-no li {
  padding: 0.23vw 0 0.23vw 1.17vw;
  margin-bottom: 1.4vw;
  font-size: 0.99vw;
  line-height: 1.5;
  color: var(--txt-mut-d);
  border-left: 0.06vw solid rgb(243 236 224 / 16%);
}

.s11-col li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   s12 · Oferta
   ========================================================================== */

.s12 {
  position: relative;
  padding: 7.02vw 0 7.6vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.s12-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.s12-card {
  width: 46.78vw;
  padding: 3.51vw 4.09vw 3.16vw;
  text-align: center;
  border: 0.1rem solid rgb(232 160 2 / 18%);
  border-radius: 1.29vw;
  background-color: rgb(16 16 17 / 88%);
  backdrop-filter: blur(0.47vw);
}

/* mesma logomarca do hero, menor */
.s12-logo {
  margin: 0 0 1.75vw;
}

.s12-logo img {
  width: 19.3vw;
  height: auto;
}

.s12 p.p02 {
  margin-bottom: 1.99vw;
  font-size: 0.88vw;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.s12 .cc-rule {
  width: 100%;
}

.s12 p.p03 {
  margin: 1.99vw 0 1.4vw;
  font-size: 0.82vw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: left;
  color: var(--txt-mut-d);
}

.s12-list {
  margin-bottom: 1.99vw;
  list-style: none;
  text-align: left;
}

.s12-list li {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  margin-bottom: 1.05vw;
  font-size: 0.99vw;
  line-height: 1.5;
  color: var(--txt-light);
}

.s12-list li .ico {
  color: var(--gold);
  flex-shrink: 0;
}

.s12-list li .tag {
  padding: 0.23vw 0.58vw;
  font-size: 0.7vw;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  border-radius: 0.35vw;
  background-color: rgb(232 160 0 / 24%);
}

.s12-list .cc-pendente {
  padding: 0.35vw 0.7vw;
  font-size: 0.76vw;
}

.s12-from {
  margin: 1.99vw 0 0.35vw;
  font-size: 1.17vw;
  color: rgb(249 231 191 / 40%);
}

.s12-price {
  margin-bottom: 1.99vw;
  font-size: 3.63vw;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
}

.s12-price .pre,
.s12-price .pos {
  font-size: 1.29vw;
  font-weight: 400;
  color: var(--txt-mut-d);
}

.s12 .cc-btn {
  width: 100%;
  padding: 1.4vw 2.34vw;
}

.s12-warranty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.53vw;
  margin-top: 1.52vw;
  font-size: 0.88vw;
  color: var(--txt-mut-d);
}

.s12-warranty svg {
  width: 1.05vw;
  height: 1.05vw;
}

/* ==========================================================================
   s13 · Dúvidas + garantia
   ========================================================================== */

.s13-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 5.85vw 0 6.43vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.27vw;
}

.s13-help {
  width: 50.29vw;
  padding: 1.99vw 2.34vw;
  display: flex;
  align-items: center;
  gap: 1.52vw;
  border: 0.1rem solid rgb(232 160 2 / 16%);
  border-radius: 1.05vw;
  background-image: linear-gradient(
    90deg,
    rgb(232 160 2 / 6%),
    rgb(232 160 2 / 1%)
  );
}

.s13-icon {
  width: 2.57vw;
  height: 2.57vw;
  flex-shrink: 0;
  object-fit: contain;
}

.s13-help-txt {
  flex: 1;
}

.s13-help h3 {
  margin-bottom: 0.7vw;
  font-size: 1.52vw;
  font-weight: 500;
  color: var(--txt-light);
}

.s13-help p {
  font-size: 0.88vw;
  line-height: 1.6;
  color: var(--txt-mut-d);
}

.s13-warranty {
  width: 50.29vw;
  padding: 1.99vw 2.34vw 2.34vw;
  border: 0.1rem solid rgb(232 160 2 / 30%);
  border-radius: 1.05vw;
}

.s13-warranty h3 {
  margin-bottom: 1.17vw;
  font-size: 1.52vw;
  font-weight: 500;
  color: var(--txt-light);
}

.s13-warranty p {
  width: 38.01vw;
  font-size: 0.88vw;
  line-height: 1.6;
  color: var(--txt-mut-d);
}

/* ==========================================================================
   s14 · Rodapé
   ========================================================================== */

.s14-wrap {
  width: 70.18vw;
  margin: 0 auto;
  padding: 4.09vw 0 4.68vw;
  display: flex;
  align-items: flex-start;
  gap: 4.68vw;
}

.s14-brand {
  width: 12.87vw;
  flex-shrink: 0;
  font-size: 0.88vw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: var(--txt-mut-d);
}

.s14-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.94vw;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(1.4vw);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Botão que também é .reveal: a transition do .reveal substituiria a do botão
   (mesma especificidade, e o .reveal vem depois), matando o hover. Aqui as duas
   são declaradas juntas — entrada em 0.7s, hover em 0.2s. */
.cc-btn.reveal,
.cc-btn-sm.reveal,
.cc-btn-out.reveal {
  transition: opacity 0.7s ease, transform 0.7s ease, color 0.2s ease,
    background-color 0.2s ease, box-shadow 0.2s ease;
}

.s03-card.reveal:nth-child(2),
.s04-card.reveal:nth-child(2),
.s07-card.reveal:nth-child(2),
.s08-col li.reveal:nth-child(2),
.s11-col li.reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.s03-card.reveal:nth-child(3),
.s04-card.reveal:nth-child(3),
.s07-card.reveal:nth-child(3),
.s08-col li.reveal:nth-child(3),
.s11-col li.reveal:nth-child(3) {
  transition-delay: 0.2s;
}

.s03-card.reveal:nth-child(4),
.s08-col li.reveal:nth-child(4),
.s11-col li.reveal:nth-child(4) {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hide-desktop {
  display: none;
}

/* ==========================================================================
   MOBILE — base 28.07vw
   (não havia layout mobile no Figma; adaptação a partir do desktop)
   ========================================================================== */

@media screen and (max-width: 600px) {
  .hide-desktop {
    display: block;
  }

  .hide-mobile {
    display: none;
  }

  .sec-dark::before,
  .sec-light::before {
    background-size: 16.67vw 16.67vw, 16.67vw 16.67vw;
  }

  /* --- componentes --- */
  .cc-btn {
    width: 100%;
    padding: 4.17vw 5vw;
    font-size: 4.58vw;
  }

  .cc-btn-sm {
    gap: 1.67vw;
    padding: 2.5vw 3.75vw;
    font-size: 2.92vw;
  }

  .cc-btn-sm svg {
    width: 3.33vw;
    height: 3.33vw;
  }

  .cc-btn-out {
    width: 100%;
    padding: 3.33vw 5vw;
    font-size: 3.33vw;
  }

  /* --- acordeão --- */
  .cc-acc {
    width: 100%;
  }

  .cc-acc-head {
    padding: 4.17vw 2.92vw;
    gap: 2.92vw;
  }

  .cc-acc-num {
    font-size: 3.13vw;
  }

  .cc-acc-title {
    font-size: 3.54vw;
  }

  .cc-acc-sign {
    width: 3.33vw;
    height: 3.33vw;
  }

  .cc-acc-sign::before,
  .cc-acc-sign::after {
    width: 2.92vw;
    height: 0.33vw;
  }

  .cc-acc-body {
    padding: 0 2.92vw 5vw 8.75vw;
    font-size: 3.13vw;
  }

  .cc-acc-plain .cc-acc-body {
    padding-left: 2.92vw;
  }

  .cc-acc-body li {
    padding-left: 3.75vw;
  }

  .cc-acc-body li::before {
    top: 2.08vw;
    width: 1.25vw;
    height: 1.25vw;
  }

  .cc-rule {
    width: 100%;
  }

  .cc-rule::after {
    top: -0.63vw;
    height: 0.83vw;
  }

  .cc-pendente {
    padding: 1.88vw 2.5vw;
    font-size: 2.5vw;
  }

  /* --- s00 --- */
  .s00-wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 2.92vw;
    padding: 2.08vw 4.17vw;
  }

  .s00 p.p01 {
    font-size: 2.71vw;
    text-align: center;
  }

  .s00-timer {
    gap: 2.92vw;
    padding: 2.08vw 3.33vw 1.25vw;
    border-radius: 2.5vw;
  }

  .s00-timer .item {
    gap: 0.42vw;
  }

  .s00-timer .number {
    font-size: 5.42vw;
  }

  .s00-timer .unit {
    font-size: 2.71vw;
  }

  .s00-timer .sep {
    height: 5vw;
  }

  /* --- s01 --- */
  .s01-wrap {
    width: 91.67vw;
    min-height: 0;
    padding: 0 5vw;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .s01-info {
    width: 100%;
    padding: 12.5vw 0 0;
    text-align: center;
  }

  .s01-logo img {
    width: 62.5vw;
    margin: 0 0 9.58vw;
  }

  .s01-info p.p02 {
    font-size: 3.75vw;
  }

  .s01-info p.p03 {
    margin: 2.08vw 0 5.42vw;
    font-size: 6.67vw;
  }

  .s01-info p.p04 {
    width: 100%;
    margin-bottom: 7.08vw;
    font-size: 3.13vw;
    line-height: 1.75;
  }

  .s01-img {
    width: 100vw;
    padding: 8.33vw 0 0;
  }

  /* --- s02 --- */
  .s02-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
  }

  .s02 h2 {
    font-size: 6.25vw;
  }

  .s02-timeline {
    margin: 10vw 0 11.25vw;
  }

  /* a linha do tempo vira vertical no mobile */
  .s02-eras {
    flex-direction: column;
    gap: 5.42vw;
  }

  /* a faixa dourada vira uma coluna atrás dos ícones (um pouco mais larga
     que eles, para as bordas aparecerem como no desktop) */
  .s02-eras::before {
    left: 0;
    right: auto;
    top: -2.08vw;
    bottom: 0;
    height: auto;
    width: 16.25vw;
    transform: none;
  }

  .s02-era {
    display: flex;
    align-items: center;
    gap: 4.17vw;
    row-gap: 0vw;
  }

  .s02-era-top,
  .s02-era-bottom {
    align-self: auto;
    padding: 0;
    text-align: left;
  }

  .s02-era-top:empty,
  .s02-era-bottom:empty {
    display: none;
  }

  .s02-icon {
    order: -1;
    width: 13.33vw;
    height: 13.33vw;
    margin-left: 1.46vw; /* centraliza o ícone na faixa de 16.25vw */
    flex-shrink: 0;
  }

  .s02-era p.p01 {
    font-size: 2.71vw;
  }

  .s02-era h3 {
    font-size: 4.38vw;
  }

  .s02-era h3 br {
    display: none;
  }

  .s02-era p.p02 {
    font-size: 2.29vw;
  }

  .s02-now {
    margin-top: 1.25vw;
    padding: 0.83vw 2.08vw;
    font-size: 2.29vw;
  }

  /* a era 06 tem os dois blocos de texto — empilha um sob o outro */
  .s02-era.is-now {
    flex-wrap: wrap;
  }

  .s02-era.is-now .s02-era-bottom {
    flex: 1 1 100%;
    margin-top: 2.08vw;
    padding-left: 18.96vw; /* ícone (64) + recuo (7) + gap (20) */
  }

  .s02-question {
    width: 68.75vw;
    margin: 6.25vw 0;
    font-size: 4.58vw;
  }

  .s02 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- s03 --- */
  .s03-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
  }

  .s03 h2 {
    width: 79.17vw;
    font-size: 5.42vw;
  }

  .s03 h2 span {
    margin-top: 3.75vw;
  }

  .s03-row {
    width: 75vw;
    margin-top: 8.33vw;
    flex-direction: column;
    gap: 2.92vw;
  }

  .s03-card {
    padding: 5vw 4.58vw 5.42vw;
    border-radius: 2.92vw;
  }

  .s03-card p.p01 {
    font-size: 5.83vw;
  }

  .s03-card h3 {
    margin: 2.92vw 0 2.08vw;
    font-size: 4.17vw;
  }

  .s03-card p.p02 {
    font-size: 3.13vw;
  }

  .s03 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- s04 --- */
  .s04-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
  }

  .s04 h2 {
    font-size: 5.83vw;
  }

  .s04-row {
    margin-top: 7.5vw;
    flex-direction: column;
    gap: 3.33vw;
  }

  .s04-card {
    padding: 5.42vw 4.58vw 6.25vw;
    border-radius: 3.33vw;
  }

  .s04-tag {
    padding: 1.25vw 2.5vw;
    font-size: 2.29vw;
  }

  .s04-profile {
    height: 15.42vw;
    margin: 4.17vw 0 0;
  }

  .s04-card h3 {
    margin: 3.75vw 0 2.08vw;
    font-size: 4.58vw;
  }

  .s04-card p.p01,
  .s04-box p.p02,
  .s04-card li {
    font-size: 2.92vw;
  }

  .s04-box {
    margin: 4.17vw 0 5vw;
    padding: 4.17vw 3.75vw 4.58vw;
  }

  .s04-card li {
    padding-left: 4.17vw;
    margin-bottom: 3.33vw;
  }

  .s04-arrow {
    margin: 2.5vw 0;
    font-size: 3.75vw;
  }

  .s04-number {
    margin: 2.08vw 0 2.5vw;
    font-size: 7.08vw;
  }

  .s04-number-sm {
    font-size: 5.83vw;
  }

  .s04-card li::before,
  .s06-card li::before {
    top: 1.46vw;
    width: 1.25vw;
    height: 1.25vw;
  }

  .s04-box p.p03 {
    font-size: 3.13vw;
  }

  .s04 .cc-btn {
    margin-top: 9.17vw;
  }

  /* --- s05 --- */
  .s05-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
  }

  .s05 h2 {
    width: 79.17vw;
    font-size: 5.83vw;
  }

  .s05-img {
    width: 70.83vw;
    margin: 8.33vw 0;
  }

  .s05-chips {
    margin-bottom: 10.42vw;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.08vw;
  }

  .s05-chips p.p01 {
    width: 100%;
    padding: 4.17vw 0 2.08vw;
    margin-right: 0;
    font-size: 2.5vw;
    text-align: center;
  }

  .s05-chips span {
    padding: 1.88vw 3.33vw;
    font-size: 2.92vw;
  }

  .s05-claim {
    margin: 6.25vw 0;
    font-size: 5vw;
  }

  .s05 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- s06 --- */
  .s06-wrap {
    width: 90vw;
    padding: 13.33vw 0 15.42vw;
  }

  .s06-dot {
    width: 1.88vw;
    height: 1.88vw;
  }

  .s06 h2 {
    margin: 3.33vw 0 4.58vw;
    font-size: 6.25vw;
  }

  .s06-rule {
    width: 11.67vw;
  }

  .s06-box {
    margin: 9.17vw 0 9.58vw;
    flex-direction: column;
    gap: 3.33vw;
  }

  .s06-card {
    padding: 5.83vw 5vw 6.67vw;
    border-radius: 3.33vw;
  }

  .s06-head {
    gap: 2.5vw;
    margin-bottom: 4.17vw;
  }

  .s06-num {
    width: 8.33vw;
    height: 8.33vw;
    font-size: 3.13vw;
  }

  .s06-label {
    font-size: 2.29vw;
  }

  .s06-tag {
    padding: 1.88vw 3.33vw;
    font-size: 2.29vw;
  }

  .s06-card h3 {
    margin-top: 5vw;
    font-size: 4.58vw;
  }

  .s06-card ul {
    margin-top: 3.75vw;
  }

  .s06-card li {
    padding-left: 4.17vw;
    margin-bottom: 2.92vw;
    font-size: 3.13vw;
  }

  .s06-card li::before {
    top: 1.46vw;
    width: 1.25vw;
    height: 1.25vw;
  }

  /* --- s07 --- */
  .s07-wrap {
    width: 90vw;
    padding: 13.33vw 0 15.42vw;
  }

  .s07 h2 {
    width: 75vw;
    font-size: 5.83vw;
  }

  .s07-row {
    width: 79.17vw;
    margin-top: 8.33vw;
    flex-direction: column;
    gap: 3.75vw;
  }

  .s07-card {
    aspect-ratio: 432 / 480;
    border-radius: 3.33vw;
  }

  .s07-info {
    padding: 12.5vw 4.58vw 5vw;
  }

  .s07-info h3 {
    font-size: 5vw;
  }

  .s07-info p.p01 {
    margin: 1.25vw 0 2.92vw;
    font-size: 2.5vw;
  }

  .s07-logo {
    width: 100%;
    gap: 2.5vw;
  }

  .s07 .cc-btn {
    margin-top: 10vw;
  }

  /* --- s08 --- */
  .s08-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
  }

  .s08-cols {
    flex-direction: column;
    gap: 9.17vw;
  }

  .s08-cols::before {
    display: none;
  }

  .s08-title {
    margin-bottom: 4.58vw;
    font-size: 3.96vw;
  }

  .s08-col li {
    gap: 2.5vw;
    padding: 3.33vw 3.75vw;
    margin-bottom: 2.5vw;
    font-size: 3.13vw;
    border-radius: 2.08vw;
  }

  .s08-col li .ico {
    font-size: 3.13vw;
  }

  .s08 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- s09 --- */
  .s09-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
    flex-direction: column;
    gap: 10.42vw;
  }

  .s09-line {
    height: 0.42vw;
  }

  .s09-day {
    margin: 4.58vw 0 3.75vw;
    font-size: 9.58vw;
  }

  .s09-col h3 {
    margin-bottom: 4.58vw;
    font-size: 4.38vw;
  }

  .s09-card {
    gap: 3.33vw;
    padding: 5vw 4.58vw 5.42vw;
    margin-bottom: 3.33vw;
    border-radius: 2.5vw;
  }

  .s09-card img,
  .s09-card svg {
    width: 5.83vw;
    height: 5.83vw;
  }

  .s09-card h4 {
    font-size: 4.17vw;
  }

  .s09-card p {
    font-size: 3.13vw;
  }

  /* --- s10 --- */
  .s10-wrap {
    width: 90vw;
    padding: 12.5vw 0 14.58vw;
  }

  .s10 .cc-acc {
    margin-top: 9.17vw;
  }

  .s10 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- x12 (FAQ) --- */
  .x12 h2 {
    padding: 0 0 4.17vw;
    font-size: 6.25vw;
  }

  .x12-wrap {
    width: 90vw;
    padding: 12.5vw 0 14.58vw;
  }

  .x12 .cc-acc {
    margin-top: 9.17vw;
  }

  .x12 .cc-btn {
    margin-top: 9.58vw;
  }

  /* --- s11 --- */
  .s11-wrap {
    width: 90vw;
    padding: 13.33vw 0 14.58vw;
    flex-direction: column;
    gap: 9.17vw;
  }

  .s11-wrap::before {
    display: none;
  }

  .s11-title {
    gap: 2.08vw;
    margin-bottom: 4.58vw;
    font-size: 4.17vw;
  }

  .s11-yes li {
    padding: 3.75vw 4.17vw;
    margin-bottom: 2.5vw;
    font-size: 3.33vw;
    border-radius: 2.08vw;
  }

  .s11-no li {
    padding: 0.83vw 0 0.83vw 3.33vw;
    margin-bottom: 3.75vw;
    font-size: 3.33vw;
  }

  /* --- s12 --- */
  .s12 {
    padding: 13.33vw 5vw 15.42vw;
  }

  .s12-card {
    width: 100%;
    padding: 7.5vw 5vw 7.08vw;
    border-radius: 3.75vw;
  }

  .s12-logo {
    margin: 0 0 4.17vw;
  }

  .s12-logo img {
    width: 54.17vw;
  }

  .s12 p.p02 {
    width: 50vw;
    margin: 0 auto 5vw;
    font-size: 2.5vw;
    letter-spacing: 0.16em;
  }

  .s12 p.p03 {
    margin: 5vw 0 3.75vw;
    font-size: 2.5vw;
  }

  .s12-list li {
    gap: 2.08vw;
    margin-bottom: 2.92vw;
    font-size: 3.13vw;
  }

  .s12-list li .tag {
    padding: 0.83vw 1.88vw;
    font-size: 2.29vw;
  }

  .s12-list .cc-pendente {
    padding: 1.25vw 2.08vw;
    font-size: 2.5vw;
  }

  .s12-from {
    margin: 5vw 0 1.25vw;
    font-size: 3.54vw;
  }

  .s12-price {
    margin-bottom: 5.42vw;
    font-size: 11.25vw;
  }

  .s12-price .pre,
  .s12-price .pos {
    font-size: 3.33vw;
  }

  .s12 .cc-btn {
    padding: 4.17vw 5vw;
  }

  .s12-warranty {
    gap: 1.67vw;
    margin-top: 4.17vw;
    font-size: 2.92vw;
  }

  .s12-warranty svg {
    width: 3.33vw;
    height: 3.33vw;
  }

  /* --- s13 --- */
  .s13-wrap {
    width: 90vw;
    padding: 12.5vw 0 13.75vw;
    gap: 7.5vw;
  }

  .s13-help {
    width: 100%;
    padding: 5.42vw 4.58vw 6.25vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.75vw;
    border-radius: 3.33vw;
  }

  .s13-icon {
    width: 8.33vw;
    height: 8.33vw;
  }

  .s13-help h3 {
    margin-bottom: 2.08vw;
    font-size: 4.58vw;
  }

  .s13-help p {
    font-size: 3.13vw;
  }

  .s13-warranty {
    width: 100%;
    padding: 5.42vw 4.58vw 6.25vw;
    border-radius: 3.33vw;
  }

  .s13-warranty h3 {
    margin-bottom: 3.33vw;
    font-size: 4.58vw;
  }

  .s13-warranty p {
    width: 100%;
    font-size: 3.13vw;
  }

  /* --- s14 --- */
  .s14-wrap {
    width: 90vw;
    padding: 9.17vw 0 11.25vw;
    flex-direction: column;
    gap: 5.42vw;
  }

  .s14-brand {
    width: 100%;
    font-size: 2.71vw;
  }

  .s14-info {
    gap: 2.5vw;
  }
}