/* ================= BASE / TOKENS ================ */
* { box-sizing: border-box; }
html, body { height: 100%; }

:root{
  /* largura / gutters */
  --container: min(96vw, 1120px);
  --gutter: clamp(12px, 3vw, 24px);

  /* escala de espaços */
  --space-1: clamp(6px, 0.8vw, 10px);
  --space-2: clamp(10px, 1.2vw, 14px);
  --space-3: clamp(16px, 1.6vw, 20px);
  --space-4: clamp(20px, 2.2vw, 28px);

  /* tipografia fluida */
  --fs-hero: clamp(28px, 3.6vw, 56px);
  --fs-sub:  clamp(16px, 1.4vw, 22px);
  --fs-body: clamp(14px, 1.1vw, 18px);

  /* espaço ENTRE a seção 1 e 2 (ajuste aqui) */
  --seam: 8px;
}

body{
  margin: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Coluna central “mobile no desktop” ===== */
/* desktop (>=768px): 33–40% até 560px, centralizado com margin auto */
@media (min-width: 768px){
  :where(.reserve-block, .offer){
    width: min(560px, 40vw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}
/* mobile: ocupa 100% e só tem gutter lateral */
@media (max-width: 767px){
  :where(.reserve-block, .offer){
    width: 100%;
    padding-inline: var(--gutter);
  }
}

/* ============== SEÇÃO 1 — HEADLINE + TIMER ============== */
/* usa GAP para espaçamento interno; margens dos filhos zeradas */
.reserve-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* respiro do bloco */
  padding-top: var(--space-3);
  padding-bottom: 0;          /* zero na junção */
  margin: 0;                  /* sem margem externa */
  gap: var(--space-2);        /* controla o espaço ENTRE os itens */
}

/* zera margens nativas dos elementos */
.reserve-title,
.reserve-sub,
.reserve-text,
.reserve-timer,
.reserve-foot { margin: 0; }

.reserve-title{
  font-size: var(--fs-hero);
  line-height: 1.06;
}
.reserve-sub{
  font-size: var(--fs-sub);
  font-weight: 700;
  color: #ff6666;
}
.reserve-text,
.reserve-foot{
  font-size: var(--fs-body);
  color: #f2b3b7;
}

.reserve-timer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: clamp(10px, 1.8vw, 14px) clamp(16px, 3vw, 22px);
  border-radius: clamp(10px, 1.6vw, 12px);
  background: #e74c3c;
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 7vw, 44px);
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(231,76,60,.35);
}

/* ============== SEÇÃO 2 — OFERTA (IMAGEM + CTAs) ============== */
/* começa exatamente com o “seam” acima */
.offer{
  padding-top: var(--seam);
  padding-bottom: var(--space-3);
  display: grid;
  place-items: center;
  gap: var(--space-2);
  margin: 0;                  /* sem margem externa em cima */
}

/* a imagem nunca adiciona espaço no topo */
.offer__img{
  width: 100%;
  height: auto;
  display: block;             /* evita gap inline */
  border-radius: clamp(8px, 1.2vw, 12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  margin-top: 0;
  padding-top: 0;
}

/* CTAs */
.offer__actions{
  width: 100%;
  max-width: min(860px, var(--container));
  text-align: center;
}

.btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn--accept{
  width: 100%;
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2.2vw, 18px);
  border-radius: 12px;
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 800;
  color: #fff;
  background: #22c55e;
  box-shadow: 0 10px 24px rgba(34,197,94,.35);
  transition: transform .06s ease, filter .2s ease;
}
.btn--accept:hover { filter: brightness(1.05); }
.btn--accept:active { transform: translateY(1px); }

.offer__decline,
.offer__decline:visited,
.offer__decline:focus,
.offer__decline:hover{
  display: inline-block;
  font-size: clamp(12px, 2vw, 14px);
  color: #ff4d4d;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: var(--space-1);
}
.offer__decline:hover{ color: #ff8080; }

/* FIX: centralizar a coluna no desktop (vence o margin:0 anterior) */
@media (min-width: 768px){
    .reserve-block,
    .offer{
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  
  /* Coluna central reaproveitando a mesma lógica das outras seções */
@media (min-width: 768px){
    .reasons{ width: min(560px, 40vw); margin-inline:auto; padding-inline: var(--gutter); }
  }
  @media (max-width: 767px){
    .reasons{ width:100%; padding-inline: var(--gutter); }
  }
  
  .reasons{
    padding-block: var(--space-3);
    display: grid;
    gap: var(--space-2);
    text-align: left; /* títulos continuam grandes, mas texto alinhado à esquerda */
  }
  
  .reasons__title{
    text-align: center;
    font-weight: 900;
    line-height: 1.1;
    font-size: clamp(20px, 2.8vw, 28px);
    margin: 0;
  }
  
  .reasons__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }
  
  .reason{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: start;
  }
  
  .badge{
    --badge-size: clamp(28px, 5vw, 34px);
    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: #ef4444;   /* vermelho */
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
  }
  
  .reason__heading{
    margin: 0 0 6px 0;
    font-size: clamp(16px, 2.1vw, 20px);
    font-weight: 800;
    color: #ffd166; /* amarelo quente como no print */
  }
  
  .reason__text{
    margin: 0;
    color: #e5e7eb;
    font-size: var(--fs-body);
    line-height: 1.55;
  }
  .reason__text strong{ color: #a7f3d0; font-weight: 800; } /* destaques esverdeados */
  
  .reasons__warn{
    text-align: center;
    background: #b91c1c;
    color: #fff;
    font-weight: 800;
    border-radius: 12px;
    padding: var(--space-2);
    box-shadow: 0 8px 24px rgba(185,28,28,.35);
  }
  
  /* CTA da seção (reaproveita o btn--accept) */
  .reasons__actions{
    display: grid;
    gap: var(--space-1);
    text-align: center;
  }
  .reasons__decline{
    color: #ff4d4d;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: clamp(12px, 2vw, 14px);
  }
  .reasons__decline:hover{ color: #ff8080; }
  

  /* Centraliza o footer na mesma coluna das outras seções */
@media (min-width: 768px){
    .legal{ width: min(560px, 40vw); margin-inline:auto; padding-inline: var(--gutter); }
  }
  @media (max-width: 767px){
    .legal{ width:100%; padding-inline: var(--gutter); }
  }
  
/* ===== Estilo do rodapé legal ===== */
.legal{
    padding-block: var(--space-3);
    /* escolha UMA das cores de fundo abaixo: */
  
    /* Azul marinho escuro */
    background: #0b1120; /* navy quase preto */
  
    /* Cinza chumbo bem escuro */
    /* background: #111827; */
  
    color: #cbd5e1; /* cinza claro */
    font-size: clamp(11px, 1vw, 13px);
    line-height: 1.65;
    text-align: left;
    display: grid;
    gap: var(--space-1);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  
  .legal p{ margin: 0; }
  
  .legal__warn{
    color: #ffb4b4;            
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: var(--space-1);
  }
  
  .legal__copy{
    color: #9aa4b2;
    margin-top: var(--space-2);
    text-align: center;
  }
  
  /* Container dos CTAs: empilha com espaçamento fixo */
.offer__actions,
.reasons__actions{
  display: grid;
  gap: var(--space-1);           /* ajuste se quiser mais/menos */
}

/* Torna o botão <a> um bloco e dá respiro */
.btn--accept{
  display: block;                /* <a> vira bloco */
  width: 100%;
  text-align: center;
  margin: 0;                     /* garante que não “cole” em nada */
}

/* Link de recusa em bloco, com margem no topo */
.offer__decline,
.reasons__decline{
  display: block;
  margin-top: var(--space-1);
}

/* Hover com “avanço” (efeito de empurrar pra frente) */
.btn--accept{
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--accept:hover{
  transform: translateY(-2px) scale(1.02);      /* avança/eleva */
  box-shadow: 0 16px 32px rgba(34,197,94,.45);  /* sombra mais forte */
  filter: brightness(1.05);
}
.btn--accept:active{
  transform: translateY(0) scale(0.995);        /* feedback no clique */
}
.btn--accept:focus-visible{
  outline: 2px solid #34d399;                   /* acessibilidade */
  outline-offset: 3px;
  filter: brightness(1.06);
}


/* ===== Downsell intro ===== */
.downsell-intro {
  text-align: center;
  padding-block: var(--space-4);
  padding-inline: var(--gutter);
}

.downsell-title {
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.downsell-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: #ff6666;
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.downsell-expire {
  font-size: var(--fs-body);
  color: #fff;
  margin-bottom: var(--space-1);
}

.downsell-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: clamp(10px, 1.8vw, 14px) clamp(16px, 3vw, 22px);
  border-radius: clamp(10px, 1.6vw, 12px);
  background: #e74c3c;
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 7vw, 44px);
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(231,76,60,.35);
  margin-bottom: var(--space-1);
}

.downsell-foot {
  font-size: clamp(13px, 1.2vw, 15px);
  color: #f2b3b7;
  margin-top: var(--space-1);
}


/* ===== Downsell Seção 2 ===== */
@media (min-width: 768px){
  .downsell-offer{ width: min(560px, 40vw); margin-inline:auto; padding-inline: var(--gutter); }
}
@media (max-width: 767px){
  .downsell-offer{ width:100%; padding-inline: var(--gutter); }
}

.downsell-offer{
  padding-block: var(--space-3);
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.downsell-offer__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.downsell-offer__title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
}

.muted{ color:#94a3b8; } /* cinza suave p/ preço antigo */

.downsell-offer__was{
  margin: 4px 0 0;
  font-size: clamp(13px, 1.3vw, 15px);
}

.downsell-offer__now{
  margin: 4px 0 var(--space-1);
  font-size: clamp(16px, 2vw, 20px);
  color:#fbbf24;           /* dourado */
  font-weight: 900;
}

/* A pilha dos CTAs (usa o mesmo padrão que já aplicamos) */
.downsell-offer__actions{
  display: grid;
  gap: var(--space-1);
}