/* ==========================================================================
   SITE PROTEGIDO — Seções da página
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 940px);
  padding-top: calc(var(--header-h) + clamp(36px, 5vw, 64px));
  padding-bottom: clamp(56px, 6vw, 96px);
  overflow: hidden;
}

/* Atmosfera: uma composição de luz real (SVG) em vez de gradiente genérico */
/* A imagem ocupa um bloco definido à direita, em força total.
   O texto fica sobre preto puro — sem disputa de legibilidade. */
.hero__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 34% 88%;
  transform: translate3d(0, 0, 0) scale(1.12);
  transition: opacity 1.8s var(--ease-out), transform 1.8s var(--ease-out);
  will-change: transform;
  filter: saturate(1) contrast(1.02) brightness(1.42);
}

.js .hero__photo {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.12);
}

.js.is-loaded .hero__photo {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.06);
}

/* Escurecimento dirigido: preserva a leitura do texto à esquerda
   e deixa a luz do corredor respirar à direita. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      var(--bg-void) 0%,
      rgba(5, 5, 5, 0.88) 16%,
      rgba(5, 5, 5, 0.35) 34%,
      rgba(5, 5, 5, 0.04) 62%,
      rgba(5, 5, 5, 0.06) 100%
    ),
    linear-gradient(
      180deg,
      var(--bg-void) 0%,
      rgba(5, 5, 5, 0.35) 16%,
      transparent 38%,
      rgba(5, 5, 5, 0.4) 84%,
      var(--bg-void) 100%
    );
}

/* Véu inferior: costura o herói com a seção seguinte, sem corte seco */
.hero__veil {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, var(--bg-void) 88%);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}

.hero__copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.hero__title {
  font-size: var(--fs-display);
  margin-bottom: var(--sp-5);
}

.hero__title span {
  color: var(--accent-text);
}

.hero__lead {
  margin-bottom: var(--sp-7);
  max-width: 50ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-7);
  margin-bottom: var(--sp-8);
}

/* Microprovas */
.proofs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

.proofs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}

.proofs .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.3;
  color: var(--accent-text);
}

/* O painel não ocupa a coluna inteira: ele flutua sobre a borda esquerda
   da fotografia, deixando a imagem aparecer à direita. */
.hero__stage {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .hero__stage .panel {
    max-width: 420px;
    margin-left: -8%;
  }
}

@media (max-width: 1023px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vw, 56px);
  }

  .hero__lead {
    max-width: 62ch;
  }

  /* No mobile a imagem passa a ocupar toda a largura e é empurrada
     para trás do painel, na parte de baixo do herói. */
  .hero__art {
    inset: 0;
    width: 100%;
  }

  .hero__photo {
    object-position: 50% 50%;
  }

  .hero__scrim {
    background: linear-gradient(
      180deg,
      var(--bg-void) 0%,
      rgba(5, 5, 5, 0.97) 34%,
      rgba(5, 5, 5, 0.86) 52%,
      rgba(5, 5, 5, 0.72) 74%,
      rgba(5, 5, 5, 0.8) 100%
    );
  }
}

@media (max-width: 560px) {
  .hero__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   1b. HERÓI EM BLOCO — lâmina escura arredondada sobre o fundo da página
   ========================================================================== */
.hero--problem {
  display: block;
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(10px, 1.4vw, 18px));
  padding-bottom: clamp(56px, 6vw, 96px);
}

.hero__shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(22px, 2.4vw, 34px);
  background: #0a0a0c;
  margin-inline: clamp(12px, 1.4vw, 20px);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
  padding-bottom: 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.66fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  padding-top: clamp(56px, 6.4vw, 104px);
  padding-bottom: clamp(48px, 5.4vw, 88px);
}

.hero--problem .hero__art {
  inset: 0;
  width: 100%;
  z-index: 0;
}

/* Pílula do topo, no lugar do eyebrow com filete */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--wash-strong);
  border: 1px solid var(--line);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(253, 193, 1, 0.16);
}

/* Cards que flutuam sobre a fotografia */
.hero__floats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.4vw, 20px);
}

.float-card {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px 14px 14px;
  border-radius: var(--r-lg);
  background: rgba(12, 12, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9);
  animation: float-soft 8s ease-in-out infinite;
}

.float-card--accent {
  animation-delay: -3.4s;
  border-color: rgba(253, 193, 1, 0.34);
}

.float-card__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(253, 193, 1, 0.12);
  border: 1px solid rgba(253, 193, 1, 0.24);
  color: var(--accent);
}

.float-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.float-card__text strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.float-card__text span {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

@keyframes float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Barra de números fechando o bloco */
.hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__stats li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 34px);
}

.hero__stats li + li {
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.08);
}

.hero__stats .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  align-self: center;
}

.hero__stats b {
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}

.hero__stats span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex-basis: 100%;
  padding-left: 28px;
}

/* Riscos: agora fora do bloco, sobre o fundo da página */
.hero__below {
  padding-top: clamp(48px, 5.4vw, 84px);
}

@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__floats {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .float-card {
    flex: 1 1 240px;
  }

  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__stats li:nth-child(odd) {
    box-shadow: none;
  }

  .hero__stats li:nth-child(n + 3) {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  .hero__stats li:nth-child(4) {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08),
      -1px 0 0 rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 560px) {
  .hero__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__stats li + li {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  .float-card {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-card {
    animation: none;
  }
}

/* Empurra a cena para a direita: o alerta sai de trás do menu e o texto
   fica sobre preto limpo. */
.hero--problem .hero__photo {
  object-position: 52% 42%;
  filter: saturate(1) contrast(1.04) brightness(0.98);
  transform: translate3d(0, 0, 0) scale(1.04);
}

.js .hero--problem .hero__photo {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.1);
}

.js.is-loaded .hero--problem .hero__photo {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.04);
}

.hero--problem .hero__scrim {
  background: linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.96) 0%,
      rgba(5, 5, 5, 0.82) 26%,
      rgba(5, 5, 5, 0.5) 48%,
      rgba(5, 5, 5, 0.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 5, 5, 0.78) 0%,
      rgba(5, 5, 5, 0.34) 22%,
      rgba(5, 5, 5, 0.55) 52%,
      rgba(5, 5, 5, 0.9) 78%,
      var(--bg-void) 100%
    );
}

.hero--problem .hero__copy {
  max-width: 100%;
}

/* A pergunta é o argumento: ela ganha corpo */
.hero--problem .hero__title {
  font-size: clamp(2.3rem, 4.1vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: var(--sp-6);
}

.hero--problem .hero__lead {
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
}

/* Sombra no topo: o header flutua sobre a fotografia sem disputar com ela */
.hero--problem::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.9), transparent);
  z-index: 0;
  pointer-events: none;
}

.hero__risks-label {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__risks-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* Pista de rolagem */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 22px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  display: grid;
  place-items: start center;
  padding-top: 6px;
  z-index: 2;
  opacity: 0.6;
}

.hero__cue span {
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--accent);
  animation: cue 2.1s var(--ease) infinite;
}

@keyframes cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translateY(12px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue span {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .hero__cue {
    display: none;
  }
}

.hero--problem .hero__title span {
  display: block;
}

.hero--problem .hero__copy {
  margin-bottom: clamp(56px, 7vw, 110px);
}

.hero--problem .hero__actions {
  margin-bottom: 0;
}

/* Mais ar em cima e embaixo da primeira dobra */
.hero--problem {
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 118px));
  padding-bottom: clamp(72px, 8vw, 132px);
}

/* Os seis riscos: caixas compactas sobre a fotografia.
   Elas rompem o container e ocupam a largura cheia da tela. */
.hero__risks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
}

.hero__risk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 1.5vw, 22px);
  border-radius: var(--r-lg);
  background: rgba(9, 9, 11, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.hero__risk:hover {
  background: rgba(14, 14, 17, 0.82);
  border-color: rgba(253, 193, 1, 0.28);
  transform: translateY(-2px);
}

.hero__risk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.hero__risk-top .icon {
  width: 19px;
  height: 19px;
  color: var(--accent);
  stroke-width: 1.7;
}

.hero__risk-idx {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.hero__risk strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero__risk span:last-child {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .hero__risks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero__risks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* No mobile o alerta precisa caber inteiro: menos zoom, menos deslocamento */
@media (max-width: 1023px) {
  .hero--problem .hero__photo,
  .js .hero--problem .hero__photo,
  .js.is-loaded .hero--problem .hero__photo {
    object-position: 50% 26%;
    transform: translate3d(0, 4%, 0) scale(1.02);
  }

  .hero--problem .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(5, 5, 5, 0.86) 0%,
      rgba(5, 5, 5, 0.55) 14%,
      rgba(5, 5, 5, 0.82) 34%,
      rgba(5, 5, 5, 0.93) 58%,
      var(--bg-void) 92%
    );
  }
}


/* ==========================================================================
   2. COSTURA ENTRE ZONAS — a página muda de temperatura sem corte seco
   ========================================================================== */
/* Cada faixa nova entra como uma lâmina que desliza por cima da anterior.
   Evita a faixa cinza que um degradê entre preto e claro sempre produz. */
.zone-open {
  position: relative;
  z-index: 1;
  margin-top: clamp(-92px, -6vw, -46px);
  border-radius: clamp(26px, 3.2vw, 52px) clamp(26px, 3.2vw, 52px) 0 0;
  box-shadow: 0 -30px 60px -34px rgba(0, 0, 0, 0.55);
  background-color: var(--zone-bg);
}

/* Fio de luz na quina da lâmina — dá a sensação de camada física */
.zone-open::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253, 193, 1, 0.45),
    transparent
  );
  pointer-events: none;
  z-index: 2;
  transform: scaleX(0.15);
  opacity: 0;
  transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out);
}

.zone-open.is-lit::before {
  transform: scaleX(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .zone-open::before {
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   2b. A VIRADA — primeira seção clara, onde entra o painel
   ========================================================================== */
.solution {
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 90px);
}

.solution__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 120vw);
  height: min(700px, 80vw);
  background: radial-gradient(
    ellipse at center,
    rgba(253, 193, 1, 0.22),
    transparent 62%
  );
  pointer-events: none;
}

.solution .container {
  position: relative;
  z-index: 1;
}

.solution__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.solution__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin-bottom: var(--sp-5);
  max-width: 16ch;
}

.solution__copy .lead {
  margin-bottom: var(--sp-6);
  max-width: 46ch;
}

.solution__copy .proofs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--sp-7);
  border-top-color: var(--line);
}

.solution__stage {
  position: relative;
}

.solution__stage .panel {
  box-shadow: 0 50px 90px -40px rgba(20, 18, 10, 0.5),
    0 6px 18px -8px rgba(20, 18, 10, 0.25);
}

@media (max-width: 900px) {
  .solution__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vw, 52px);
  }
}

/* ==========================================================================
   3. PROBLEMA
   ========================================================================== */
.problem__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.problem__head h2 span {
  color: var(--text-3);
  display: block;
}

.risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--line-soft);
}

.risk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--t-base) var(--ease);
}

.risk:hover {
  background: var(--wash-weak);
}

.risk__idx {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-4);
  padding-top: 4px;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
}

.risk__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.risk__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.4;
}

.risk__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}

.problem__bridge {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.problem__bridge p {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.015em;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .problem__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .risks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   4. TUDO INCLUSO — bento
   ========================================================================== */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--sp-5);
}

.section-head--center p {
  margin-inline: auto;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

.bento__card {
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
}

.bento__card--host {
  grid-column: span 6;
  justify-content: space-between;
  gap: var(--sp-6);
}

/* O card da hospedagem é largo: o texto pode ocupar a linha inteira. */
.bento__card--host .card__text {
  max-width: none;
}

.bento__card--hours {
  grid-column: span 6;
  justify-content: space-between;
  gap: var(--sp-6);
}

.bento__card--tool {
  grid-column: span 3;
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--wash);
  border: 1px solid var(--line-soft);
  color: var(--accent-text);
  flex: none;
}

.card__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}

.card__text {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.62;
  max-width: 46ch;
}

/* Métrica grande */
.metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}

.metric__value {
  font-size: clamp(2.8rem, 4.2vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text);
  line-height: 0.86;
}

.metric__value em {
  font-style: normal;
  color: var(--accent-text);
}

.metric__unit {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  line-height: 1.4;
  padding-bottom: 4px;
}

.metric__note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}

/* Comparativo de valor da hospedagem. Ocupa a sobra do card em vez de
   deixar um vão entre o texto e a caixa. */
.host-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--r-md);
  background: var(--wash-weak);
  border: 1px solid var(--line-soft);
}

.host-value__num {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  line-height: 1;
  white-space: nowrap;
}

.host-value__txt {
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.45;
}

/* Licenças premium: quatro cards iguais fechando a grade. */
.tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool__logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-wash);
  border: 1px solid var(--line-accent);
  color: var(--accent-text);
}

.tool__name {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.tool__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}

/* Trilho de itens compactos */
.rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-1);
}

.rail__item {
  padding: clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color var(--t-base) var(--ease);
}

.rail__item + .rail__item {
  box-shadow: -1px 0 0 var(--line-soft);
}

.rail__item:hover {
  background: var(--surface-2);
}

.rail__item .icon {
  color: var(--accent-text);
}

.rail__name {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
}

.rail__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .bento__card--host,
  .bento__card--hours {
    grid-column: span 12;
    justify-content: flex-start;
    gap: var(--sp-6);
  }

  .bento__card--tool {
    grid-column: span 6;
  }

  .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rail__item {
    box-shadow: none !important;
    border-bottom: 1px solid var(--line-soft);
  }

  .rail__item:nth-child(odd) {
    border-right: 1px solid var(--line-soft);
  }

  .rail__item:last-child {
    grid-column: span 2;
    border-bottom: 0;
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail__item,
  .rail__item:nth-child(odd) {
    border-right: 0;
  }

  .rail__item:last-child {
    grid-column: span 1;
  }

  .bento__card--tool {
    grid-column: span 12;
  }

  .tool {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .tool__logo {
    flex: none;
  }

  .tool__name {
    align-self: center;
  }

  .tool__desc {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   5. ATUALIZAÇÕES — fluxo
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 4.6vw, 72px);
  align-items: center;
}

.flow__quote {
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  margin-bottom: var(--sp-5);
}

.flow__quote span {
  color: var(--accent-text);
  display: block;
}

.timeline {
  padding: clamp(22px, 2.4vw, 32px);
}

.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}

.timeline__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  position: relative;
}

.step::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 32px;
  bottom: -8px;
  width: 1px;
  background: var(--line);
}

.step:last-child::before {
  display: none;
}

.step__bullet {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  position: relative;
  z-index: 1;
}

.step__bullet .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.step--ok .step__bullet {
  color: var(--ok);
  border-color: var(--ok-line);
  background: var(--ok-wash);
}

.step--warn .step__bullet {
  color: var(--warn);
  border-color: rgba(232, 163, 61, 0.3);
  background: var(--warn-wash);
}

.step--work .step__bullet {
  color: var(--accent-text);
  border-color: var(--line-accent);
  background: var(--accent-wash);
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

.step__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.35;
}

.step__meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
}

.step--muted .step__label {
  color: var(--text-3);
}

.timeline__foot {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   6. BACKUPS
   ========================================================================== */
.backups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

.backup {
  padding: clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.backup__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.backup__id {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.backup__when {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.backup__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 4px;
}

.backup__bar {
  height: 3px;
  border-radius: 3px;
  background: var(--wash-strong);
  overflow: hidden;
}

.backup__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ok), rgba(63, 207, 142, 0.5));
  transition: width 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.is-visible .backup__bar i {
  width: 100%;
}

.backups__note {
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: none;
}

@media (max-width: 820px) {
  .backups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   7. COMPARATIVO
   ========================================================================== */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

.compare__col {
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
}

/* O lado sem plano permanece escuro mesmo na faixa clara: a comparação
   acontece também na cor. */
.compare__col--bad {
  background: #0d0d0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.compare__col--good {
  background: linear-gradient(
    170deg,
    rgba(253, 193, 1, 0.055),
    var(--surface-1) 58%
  );
  border: 1px solid var(--line-accent);
}

.compare__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: var(--sp-5);
}

.compare__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-3);
}

.compare__col--good .compare__label {
  color: var(--accent-text);
}

.compare__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cstep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--wash-weak);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}

.cstep .icon {
  width: 15px;
  height: 15px;
  color: var(--text-4);
  flex: none;
}

.compare__col--good .compare__steps {
  justify-content: center;
  gap: 12px;
}

.compare__col--good .cstep {
  background: var(--wash);
  color: var(--text-1);
  font-weight: 700;
  padding: 17px 15px;
}

.compare__col--good .cstep .icon {
  color: var(--accent-text);
}

.compare__result {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
}

.compare__col--good .compare__result {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 820px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   8. PREÇO / R$ 159
   ========================================================================== */
.pricing {
  position: relative;
  overflow: hidden;
}

.pricing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translateX(-50%);
  width: min(1100px, 96vw);
  height: 62%;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.5), transparent 64%);
  pointer-events: none;
}

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

/* Coluna A — o plano */
.plan {
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}

.plan__name {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-5);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.plan__times {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
}

.plan__value {
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
  color: var(--text);
}

.plan__value small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
  margin-right: 7px;
}

.plan__sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: var(--sp-6);
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  margin-bottom: var(--sp-7);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.9375rem;
  color: var(--text-1);
  line-height: 1.5;
}

.plan__list .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  color: var(--ok);
  margin-top: 4px;
}

.plan__cta {
  margin-top: auto;
}

/* Coluna B — a conta */
.math {
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    168deg,
    rgba(253, 193, 1, 0.06),
    var(--surface-1) 55%
  );
  border: 1px solid var(--line-accent);
}

/* Na faixa amarela a conta vira um bloco preto: é o clímax do argumento. */
.theme-accent .math {
  background: linear-gradient(168deg, #16151a, #0d0d10 60%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -30px rgba(60, 44, 0, 0.55);
}

.math__title {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-6);
}

.math__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.math__op {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--text-3);
  background: var(--wash-weak);
}

.math__op .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

/* Primeira linha da conta: ponto de partida, sem operador */
.math__op--start::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.math__label {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}

.math__label span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
}

.math__num {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.math__num--sub {
  color: var(--text-3);
}

.math__line {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

.math__result {
  margin-top: var(--sp-5);
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: rgba(253, 193, 1, 0.07);
  border: 1px solid var(--line-accent);
  text-align: center;
}

.math__result-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}

.math__result-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.math__result-value b {
  font-size: clamp(3.2rem, 6.4vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--accent-text);
  line-height: 0.86;
}

.math__result-value b small {
  font-size: 0.4em;
  color: var(--accent-text);
  opacity: 0.72;
  margin-right: 2px;
}

.math__result-value i {
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-2);
}

.math__result-text {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--text-1);
  line-height: 1.55;
  max-width: 40ch;
  margin-inline: auto;
}

.pricing__transparency {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--wash-weak);
}

.pricing__transparency .icon {
  color: var(--text-3);
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: none;
}

/* Dentro da caixa o texto usa a largura inteira */
.pricing__transparency .footnote {
  max-width: none;
  flex: 1;
}

@media (max-width: 940px) {
  .pricing__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   9. GARANTIA
   ========================================================================== */
.guarantee {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-void), #070707 45%, var(--bg-void));
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(96px, 12vw, 200px);
}

.guarantee__atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.guarantee__atmos::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(1000px, 120vw);
  height: min(620px, 80vw);
  background: radial-gradient(
    ellipse at center,
    rgba(253, 193, 1, 0.075),
    transparent 62%
  );
  filter: blur(8px);
}

.guarantee .container {
  position: relative;
  z-index: 1;
}

.guarantee__head {
  text-align: center;
  max-width: 1040px;
  margin-inline: auto;
}

.guarantee__q {
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-3);
  margin-bottom: 14px;
}

.guarantee__a {
  font-size: clamp(2.5rem, 6.6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: var(--text);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.guarantee__a span {
  color: var(--accent-text);
}

.guarantee__lead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 58ch;
  margin-inline: auto;
}

/* Sequência de recuperação */
.ladder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: clamp(36px, 4vw, 54px);
}

.ladder__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: var(--wash-weak);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  position: relative;
}

.ladder__step + .ladder__step::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--line);
  margin-left: -22px;
  margin-right: 8px;
}

.ladder__n {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-4);
  padding: 4px 7px;
  border-radius: var(--r-xs);
  background: var(--wash);
}

.ladder__step--last {
  color: var(--accent-text);
  border-color: var(--line-accent);
  background: var(--accent-wash);
}

.ladder__step--last .ladder__n {
  color: var(--accent-text);
  background: rgba(253, 193, 1, 0.14);
}

@media (max-width: 560px) {
  .ladder__step + .ladder__step::before {
    display: none;
  }

  .ladder {
    gap: 8px;
  }

  .ladder__step {
    font-size: 0.75rem;
    padding: 9px 14px 9px 9px;
  }
}

.guarantee__viz {
  margin: clamp(44px, 5.4vw, 76px) auto clamp(36px, 4vw, 56px);
  max-width: 660px;
}

.guarantee__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.guarantee__note {
  text-align: center;
  margin-inline: auto;
}

/* Visualização SVG da reconstrução */
.rebuild {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rebuild__frame {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.rebuild__block {
  fill: var(--wash);
  stroke: rgba(253, 193, 1, 0.55);
  stroke-width: 1;
  opacity: 0;
}

.is-visible .rebuild__block {
  animation: block-in 0.68s var(--ease-out) forwards;
}

@keyframes block-in {
  0% {
    opacity: 0;
    transform: translateY(9px) scaleY(0.86);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.rebuild__scan {
  fill: url(#scanGrad);
  opacity: 0;
}

.is-visible .rebuild__scan {
  animation: scan 2.6s var(--ease) 0.15s 1 forwards;
}

@keyframes scan {
  0% {
    opacity: 0.9;
    transform: translateX(-6%);
  }
  85% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rebuild__block {
    opacity: 1;
    animation: none;
  }

  .rebuild__scan {
    display: none;
  }
}

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.faq__list {
  border-top: 1px solid var(--line-soft);
}

.faq__item {
  border-bottom: 1px solid var(--line-soft);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--ease);
}

.faq__q:hover {
  color: var(--text);
}

.faq__q .icon {
  color: var(--text-3);
  transition: transform var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
  flex: none;
}

.faq__item.is-open .faq__q {
  color: var(--accent-text);
}

.faq__item.is-open .faq__q .icon {
  transform: rotate(180deg);
  color: var(--accent-text);
}

/* Sem JavaScript as respostas ficam abertas — o conteúdo nunca some.
   O main.js é quem recolhe os itens na inicialização. */
.faq__a {
  overflow: hidden;
  transition: height var(--t-base) var(--ease);
}

.faq__a-inner {
  padding: 0 4px 24px;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.68;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   11. CTA FINAL
   ========================================================================== */
.final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 10vw, 150px);
}

.final__atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.final__atmos::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -50%;
  transform: translateX(-50%);
  width: min(1200px, 130vw);
  height: min(760px, 90vw);
  background: radial-gradient(
    ellipse at center,
    rgba(253, 193, 1, 0.09),
    transparent 60%
  );
}

.final .container {
  position: relative;
  z-index: 1;
}

.final__inner {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}

.final__title {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: var(--sp-5);
}

.final__title span {
  color: var(--accent-text);
}

.final__lead {
  margin-inline: auto;
  margin-bottom: clamp(32px, 3.6vw, 46px);
  text-align: center;
}

.final__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(30px, 3.4vw, 42px);
  padding-block: clamp(26px, 3vw, 36px);
  border-block: 1px solid var(--line-soft);
}

.final__claim {
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}

.final__claim span {
  color: var(--accent-text);
}

.final__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.final__price b {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.final__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.final__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.final__reassure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.final__reassure .icon {
  width: 14px;
  height: 14px;
  color: var(--ok);
  stroke-width: 2.4;
}

@media (max-width: 560px) {
  .final__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(36px, 4vw, 52px);
  background: var(--bg-deep);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.footer__tag {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

/* ==========================================================================
   12b. NAVEGAÇÃO LATERAL POR SEÇÕES
   A página alterna faixas claras e escuras, então o ponto usa um cinza
   neutro que sobrevive aos dois fundos; o ativo vira amarelo.
   ========================================================================== */
.dotnav {
  position: fixed;
  right: clamp(16px, 1.8vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: none;
}

@media (min-width: 1140px) {
  .dotnav {
    display: block;
  }
}

.dotnav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  text-decoration: none;
}

.dotnav__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: rgba(134, 134, 140, 0.5);
  box-shadow: 0 0 0 1px rgba(134, 134, 140, 0.4);
  transition: background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.dotnav__link:hover .dotnav__dot,
.dotnav__link:focus-visible .dotnav__dot {
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(253, 193, 1, 0.5);
  transform: scale(1.3);
}

/* O anel escuro é o que mantém o ponto ativo visível também sobre a
   faixa amarela do investimento, onde só o amarelo desapareceria. */
.dotnav__link.is-active .dotnav__dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(20, 16, 2, 0.55), 0 0 0 5px rgba(253, 193, 1, 0.25);
  transform: scale(1.15);
}

.dotnav__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(12, 12, 14, 0.92);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.dotnav__link:hover .dotnav__label,
.dotnav__link:focus-visible .dotnav__label {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dotnav__dot,
  .dotnav__label {
    transition: none;
  }
}

/* ==========================================================================
   13. BOTÃO FLUTUANTE (mobile)
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  transform: translateY(140%);
  transition: transform var(--t-slow) var(--ease-out);
}

.sticky-cta.is-visible {
  transform: none;
}

@media (max-width: 720px) {
  .sticky-cta {
    display: block;
  }

  .sticky-cta .btn {
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.85),
      0 0 0 1px rgba(253, 193, 1, 0.28);
  }

  body {
    padding-bottom: 0;
  }
}

/* ======================================================================
   HERO — composição de conversão
   ====================================================================== */
.hero--problem {
  padding-top: calc(var(--header-h) + clamp(20px, 2vw, 32px));
  padding-bottom: clamp(54px, 6vw, 92px);
}

.hero__shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
  background: #09090b;
}

.hero--problem .hero__photo {
  object-position: 58% 50%;
  filter: saturate(.82) contrast(1.08) brightness(.78);
}

.hero--problem .hero__scrim {
  background:
    radial-gradient(circle at 78% 46%, rgba(253, 193, 1, .14), transparent 28%),
    linear-gradient(90deg, #09090b 0%, rgba(9, 9, 11, .96) 32%, rgba(9, 9, 11, .58) 62%, rgba(9, 9, 11, .36) 100%),
    linear-gradient(180deg, rgba(9, 9, 11, .7), transparent 36%, rgba(9, 9, 11, .74) 100%);
}

.hero__inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  min-height: 590px;
  padding-top: clamp(62px, 7vw, 112px);
  padding-bottom: clamp(54px, 6vw, 96px);
}

.hero--problem .hero__copy { margin-bottom: 0; }

.hero--problem .hero__title {
  max-width: 13ch;
  font-size: clamp(2.65rem, 4.5vw, 4.35rem);
  line-height: .98;
  margin-bottom: var(--sp-5);
}

.hero--problem .hero__lead { max-width: 48ch; }

.hero--problem .hero__actions { margin-bottom: var(--sp-7); }

.proofs { max-width: 590px; }

.hero__floats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.4vw, 20px);
  align-self: center;
}

.hero__floats > .float-card { display: inline-flex; }

.hero__coverage {
  width: min(100%, 440px);
  margin-left: auto;
  padding: clamp(22px, 2.3vw, 32px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(25, 25, 29, .92), rgba(10, 10, 12, .86));
  box-shadow: 0 32px 72px -30px rgba(0, 0, 0, .9), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}

.coverage__top, .coverage__footer, .coverage__list li, .coverage__list li > span {
  display: flex;
  align-items: center;
}

.coverage__top { justify-content: space-between; gap: 12px; }

.coverage__eyebrow {
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.coverage__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(113, 207, 139, .25);
  border-radius: var(--r-pill);
  background: rgba(83, 182, 105, .08);
  color: #b7e4bf;
  font-size: .69rem;
  font-weight: 700;
}

.coverage__status i { width: 6px; height: 6px; border-radius: 50%; background: #72d184; box-shadow: 0 0 0 4px rgba(114, 209, 132, .12); }

.coverage__title {
  margin: 22px 0 20px;
  color: #fff;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.coverage__list { border-top: 1px solid rgba(255, 255, 255, .09); }

.coverage__list li {
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-2);
  font-size: .83rem;
}

.coverage__list li > span { gap: 10px; }
.coverage__list .icon, .coverage__footer .icon { width: 17px; height: 17px; color: var(--accent); }
.coverage__list b { color: #fff; font-size: .72rem; }

.coverage__footer { gap: 10px; margin: 18px 0 0; color: var(--text-3); font-size: .76rem; line-height: 1.4; }
.coverage__footer strong { color: var(--text-2); }

.hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__stats li:nth-child(3) { display: none; }

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 36px; }
  .hero__coverage { margin-inline: 0 auto; }
  .hero--problem .hero__scrim { background: linear-gradient(180deg, rgba(9, 9, 11, .92), rgba(9, 9, 11, .72) 55%, rgba(9, 9, 11, .94)); }
}

@media (max-width: 560px) {
  .hero--problem { padding-top: calc(var(--header-h) + 10px); }
  .hero__inner { padding-top: 52px; padding-bottom: 48px; }
  .hero--problem .hero__title { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .hero__coverage { padding: 20px; border-radius: 20px; }
  .coverage__status { font-size: .62rem; }
  .hero__stats { grid-template-columns: 1fr; }
}

/* Hero com narrativa de dor: a fotografia sustenta a cena, enquanto a
   mensagem e os riscos seguem uma leitura única, de cima para baixo. */
.hero--problem .hero__photo {
  object-position: right center;
  filter: saturate(.8) contrast(1.08) brightness(.66);
}

.hero--problem { padding-top: 0; }

.hero--problem .hero__scrim {
  background:
    linear-gradient(180deg, rgba(5, 5, 6, .82) 0%, rgba(5, 5, 6, .56) 38%, rgba(5, 5, 6, .9) 100%),
    linear-gradient(90deg, rgba(5, 5, 6, .52), transparent 30%, transparent 70%, rgba(5, 5, 6, .52));
}

.hero__inner {
  display: block;
  min-height: 0;
  padding-top: clamp(86px, 10vw, 144px);
  padding-bottom: clamp(54px, 6vw, 86px);
}

.hero--problem .hero__copy {
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
}

.hero--problem .pill { margin-inline: auto; }

.hero--problem .hero__title {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(2.7rem, 4.6vw, 4.6rem);
  white-space: nowrap;
}

.hero--problem .hero__lead { max-width: 58ch; margin-inline: auto; }

.hero--problem .hero__actions { justify-content: center; }

.hero__points {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(24px, 4vw, 76px);
  width: min(250px, 20vw);
  transform: translateY(-34%);
  padding-left: 20px;
  border-left: 1px solid rgba(253, 193, 1, .62);
  text-align: left;
}

.hero__points-label {
  margin-bottom: 16px;
  color: var(--accent);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero__points ul { display: grid; gap: 15px; }

.hero__points li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  color: rgba(255, 255, 255, .86);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
}

.hero__points li span {
  color: rgba(253, 193, 1, .8);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.hero__floats,
.hero__stats,
.hero__cue { display: none; }

.hero__below {
  position: relative;
  z-index: 2;
  padding-top: clamp(20px, 2.2vw, 34px);
  padding-bottom: clamp(32px, 4vw, 60px);
}

.hero__risks-label {
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  margin-bottom: clamp(16px, 1.7vw, 24px);
}

.hero__risks-label::before {
  content: "";
  width: clamp(26px, 5vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}

.hero__risks-label::after { flex: 0 0 clamp(26px, 5vw, 68px); }

.hero__risks { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.hero__risk {
  min-height: 170px;
  padding: clamp(14px, 1.25vw, 18px);
  background: rgba(9, 9, 11, .7);
  border-color: rgba(255, 255, 255, .12);
}

.hero__risk strong { font-size: clamp(.8rem, 1vw, .93rem); }
.hero__risk span:last-child { font-size: clamp(.68rem, .78vw, .75rem); line-height: 1.45; }

@media (max-width: 1100px) {
  .hero__risks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__points { display: none; }
}

@media (max-width: 620px) {
  .hero__inner { padding-top: 74px; padding-bottom: 42px; }
  .hero--problem .hero__title {
    font-size: clamp(1.65rem, 7.5vw, 3.1rem);
    letter-spacing: -.055em;
  }
  .hero__actions { gap: 16px; }
  .hero__risks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero__risk { min-height: 0; padding: 14px 12px; }
  .hero__risk span:last-child { display: none; }
  .hero__risk strong { font-size: .77rem; }
}

/* ======================================================================
   RISCOS — seção bento após a Hero
   ====================================================================== */
.risk-section {
  --zone-bg: #08080a;
  margin-top: clamp(-62px, -4vw, -36px);
  padding: clamp(92px, 10vw, 148px) 0 clamp(74px, 8vw, 118px);
  background:
    radial-gradient(circle at 50% 0%, rgba(253, 193, 1, .1), transparent 29%),
    #08080a;
}

.risk-section__inner { text-align: center; }

.risk-section .eyebrow { color: var(--accent); }

.risk-section__title {
  max-width: 820px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.risk-section__lead {
  max-width: 650px;
  margin: 20px auto 0;
  color: var(--text-3);
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

.risk-section .hero__below {
  padding: clamp(38px, 5vw, 66px) 0 0;
}

.risk-section .hero__risks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "a a a a a b b b b c c c"
    "d d d e e e e f f f f f";
  gap: clamp(10px, 1.2vw, 18px);
}

.risk-section .hero__risk {
  min-height: 190px;
  padding: clamp(20px, 2vw, 30px);
  text-align: left;
  background: linear-gradient(145deg, rgba(28, 28, 32, .9), rgba(13, 13, 16, .9));
  border-color: rgba(255, 255, 255, .1);
}

.risk-section .hero__risk:nth-child(1) { grid-area: a; min-height: 250px; }
.risk-section .hero__risk:nth-child(2) { grid-area: b; }
.risk-section .hero__risk:nth-child(3) { grid-area: c; }
.risk-section .hero__risk:nth-child(4) { grid-area: d; }
.risk-section .hero__risk:nth-child(5) { grid-area: e; }
.risk-section .hero__risk:nth-child(6) { grid-area: f; min-height: 250px; }

.risk-section .hero__risk:nth-child(1),
.risk-section .hero__risk:nth-child(6) {
  background: linear-gradient(145deg, rgba(42, 36, 18, .9), rgba(18, 17, 13, .94));
  border-color: rgba(253, 193, 1, .25);
}

.risk-section .hero__risk strong { font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.risk-section .hero__risk span:last-child { font-size: clamp(.76rem, .92vw, .86rem); }

@media (max-width: 900px) {
  .risk-section .hero__risks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
  }

  .risk-section .hero__risk,
  .risk-section .hero__risk:nth-child(n) { grid-area: auto; min-height: 180px; }
}

@media (max-width: 560px) {
  .risk-section { padding-top: 84px; }
  .risk-section .hero__risks { grid-template-columns: 1fr; }
  .risk-section .hero__risk,
  .risk-section .hero__risk:nth-child(n) { min-height: 0; }
  .risk-section .hero__risk span:last-child { display: block; }
}

/* Hero fixa em 1080px: os pontos passam a ser a última camada de decisão
   antes da seção de riscos. */
.hero__shell { min-height: 1080px; }

.hero__inner {
  min-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__points {
  position: static;
  width: min(100%, 900px);
  margin: clamp(30px, 4vw, 48px) auto 0;
  padding: 0;
  border: 0;
  transform: none;
  text-align: center;
}

.hero__points-label { margin-bottom: 16px; }

.hero__points ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(16, 16, 19, .52);
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 16px 36px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  line-height: 1.35;
  text-align: left;
}

.points__icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(253, 193, 1, .3);
  border-radius: 10px;
  background: rgba(253, 193, 1, .1);
  color: var(--accent);
}

.points__icon .icon { width: 17px; height: 17px; }
.points__copy { display: grid; gap: 3px; }
.points__copy b { color: var(--accent); font-size: .62rem; letter-spacing: .11em; }

/* A transição para riscos é escura e contínua: sem filete ou brilho âmbar. */
.risk-section {
  background: radial-gradient(ellipse at center top, rgba(0, 0, 0, .86), transparent 55%), #08080a;
  box-shadow: 0 -32px 72px -34px rgba(0, 0, 0, .95);
}

.risk-section::before { display: none; }

/* O véu fecha a fotografia no mesmo preto da próxima faixa, evitando que a
   mudança de conteúdo pareça um corte entre duas seções. */
.hero__shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto -4% -5% -4%;
  height: clamp(240px, 24vw, 420px);
  background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 10, .4) 48%, #08080a 100%);
  filter: none;
  transform: none;
  pointer-events: none;
}

.risk-section {
  margin-top: clamp(-150px, -10vw, -100px);
  padding-top: clamp(150px, 14vw, 210px);
  border-radius: 0 !important;
  box-shadow: none;
  background: #08080a;
}

.hero--problem,
.hero--problem .hero__shell { border-radius: 0 !important; }

/* Os riscos pertencem à mesma cena da Hero: sem margem, lâmina ou troca de
   fundo. A fotografia termina no próprio fundo escuro do bloco. */
.hero--problem .risk-section {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: clamp(22px, 3vw, 48px);
  background: rgba(0, 0, 0, .2);
}

/* A imagem ocupa apenas a cena inicial. Abaixo dela, o mesmo bloco continua
   em preto, evitando que uma foto seja esticada para acompanhar o bento. */
.hero--problem .hero__art {
  inset: 0 0 auto;
  width: 100%;
  height: 1080px;
}

.hero--problem .hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.76) contrast(1.06) brightness(.72);
}

.hero--problem .hero__scrim {
  background:
    linear-gradient(90deg, rgba(5, 5, 6, .58), rgba(5, 5, 6, .1) 48%, rgba(5, 5, 6, .5)),
    linear-gradient(180deg, rgba(5, 5, 6, .7) 0%, rgba(5, 5, 6, .18) 32%, rgba(8, 8, 10, .5) 68%, #08080a 100%);
}

.hero__shell::after { display: none; }

@media (max-width: 900px) {
  .hero--problem .hero__art { height: 900px; }
}

@media (max-width: 560px) {
  .hero--problem .hero__art { height: 760px; }
  .hero--problem .hero__photo { object-position: 58% center; }
}

@media (max-width: 1100px) {
  .hero__points { display: block; }
}

@media (max-width: 900px) {
  .hero__shell,
  .hero__inner { min-height: 900px; }

  .hero__points { display: block; }
  .hero__points ul { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .hero__shell,
  .hero__inner { min-height: 0; }

  .hero__inner { padding-block: 94px 72px; }
  .hero__points li { min-height: 70px; }
  .risk-section { margin-top: -56px; padding-top: 100px; }
}