/* ==========================================================================
   DOSSIER A DOIS — Folha de estilo única (pt-PT)
   --------------------------------------------------------------------------
   Estrutura do ficheiro (use Ctrl+F nos títulos para navegar):
     01. TOKENS ............ todas as cores, fontes e espaçamentos
     02. RESET / BASE
     03. LAYOUT ............ seções e containers
     04. TIPOGRAFIA ........ títulos, textos e utilitários
     05. BOTÕES
     06. BARRA DE TOPO
     07. HERO
     08. BLOCO DE TEXTO SOBRE IMAGEM
     09. GRADE DE CAPAS
     10. CARDS DE ETAPA
     11. BLOCOS DE ENTREGA
     12. LISTA DE ITENS (checklist)
     13. CARROSSEL DE DEPOIMENTOS
     14. PLANOS / PREÇOS
     15. FAQ
     16. RODAPÉ
     17. FORMULÁRIO (bônus, pronto para usar)
     18. ANIMAÇÕES
     19. RESPONSIVO (1024px e 480px)
     20. UTILITÁRIOS
     21. BLOCOS NOVOS (prova social, para-quem-é, pagamentos, contagem,
         3.º plano e banner de cookies) + o seu responsivo
   ========================================================================== */


/* ==========================================================================
   01. TOKENS — mude aqui e a página inteira muda junto
   ========================================================================== */
:root {

  /* ---------- Cores de ação (botão principal) ---------- */
  --primary:            #0CBF25;
  --primary-dark:       #0B5E16;
  --primary-border:     #73D94F;
  --primary-glow:       rgba(74, 252, 30, .694);
  --primary-glow-soft:  rgba(74, 252, 30, .208);

  /* ---------- Marca / destaque ---------- */
  --secondary:          #FCB004;   /* dourado dos títulos        */
  --secondary-alt:      #F7B105;   /* dourado do card destacado  */
  --accent-red:         #FF0000;
  --accent-red-cta:     #DA0909;
  --accent-red-soft:    #E43535;

  /* ---------- Superfícies ---------- */
  --background:         #0A0A0A;
  --background-soft:    #101010;
  --surface-glass:      rgba(255, 255, 255, .04);
  --surface-glass-2:    rgba(255, 255, 255, .07);
  --border:             #434343;
  --border-soft:        #333333;
  --border-green:       rgba(42, 216, 22, .27);

  /* ---------- Texto ---------- */
  --white:              #FFFFFF;
  --text:               #FFFFFF;
  --text-alt:           #FEFEFE;
  --text-muted:         #9A9A9A;   /* corrigido p/ contraste AA  */
  --text-muted-2:       #8A8A8A;
  --text-on-cta:        #000000;

  /* ---------- Gradientes ---------- */
  --gradient-cta:   linear-gradient(80deg, var(--primary) 0%, var(--primary-dark) 100%);
  --gradient-veil:  linear-gradient(rgba(42,216,22,.02) 38.28%, rgba(42,216,22,.10) 104.81%);
  --gradient-dark:  linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.92) 78%, #0A0A0A 100%);

  /* ---------- Sombras ---------- */
  --shadow-cta:       0 0 20.7683px -4.61389px var(--primary-glow);
  --shadow-cta-wide:  0 0 6.20573px 19.6571px  var(--primary-glow-soft);
  --shadow-cta-soft:  0 .790141px 1.58028px 10.6831px rgba(9, 88, 19, .067);
  --shadow-plan:      0 4px 98.8px 0 rgba(114, 85, 255, .2);
  --shadow-card:      0 18px 48px -24px rgba(0, 0, 0, .9);

  /* ---------- Tipografia ---------- */
  --font-sans:    "Instrument Sans", system-ui, sans-serif;  /* principal  */
  --font-display: "Poppins", system-ui, sans-serif;          /* checklists */
  --font-ui:      "Inter Tight", system-ui, sans-serif;      /* botões     */

  --fs-100:   16px;     --lh-100: 24px;
  --fs-200:   17.6px;   --lh-200: 26.4px;
  --fs-300:   18.72px;
  --fs-400:   19.2px;   --lh-400: 28.8px;
  --fs-500:   20.8px;   --lh-500: 31.2px;
  --fs-600:   22.4px;   --lh-600: 33.6px;
  --fs-700:   24px;     --lh-700: 28.8px;
  --fs-800:   30.4px;   --lh-800: 36.48px;
  --fs-900:   33.6px;
  --fs-1000:  41.6px;   --lh-1000: 46px;
  --fs-1100:  43.2px;
  --fs-price: 102.4px;
  --fs-price-sm: 88px;

  --ls-tight-xl: -2.9px;
  --ls-tight-lg: -1.3px;
  --ls-tight-md: -1.1px;
  --ls-tight-sm: -0.5px;
  --ls-tight-xs: -0.2px;
  --ls-wide-xs:   0.1px;
  --ls-wide-sm:   0.3px;
  --ls-wide-md:   0.4px;

  /* ---------- Layout ---------- */
  --container:       1140px;
  --container-wide:  1280px;
  --gutter:          16px;

  --space-10:  10px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;    /* ritmo vertical padrão */
  --space-64:  64px;
  --space-80:  80px;
  --space-112: 112px;

  /* ---------- Raios ---------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   15px;
  --radius-2xl:  22px;
  --radius-full: 100%;

  /* ---------- Movimento ---------- */
  --transition:  .3s ease-in-out;
  --transition-fast: .2s ease;
}


/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;   /* respiro ao pular por âncora */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  line-height: 1.5;
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--primary-border);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--secondary); color: #000; }


/* ==========================================================================
   03. LAYOUT — seção full-bleed + container centralizado
   ========================================================================== */

/* .section  = faixa de largura total (recebe cor ou imagem de fundo)
   .section__inner = padding vertical
   .container = conteúdo limitado a 1140px                                  */

.section {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section__inner {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-48) var(--gutter);
  position: relative;
  z-index: 1;
}

.section--tight   > .section__inner { padding-block: var(--space-24); }
.section--large   > .section__inner { padding-block: var(--space-80); }
.section--plans   > .section__inner { padding: var(--space-80) var(--gutter) var(--space-112); }
.section--flush   > .section__inner { padding-block: 0; }

/* Véu escuro por cima da imagem de fundo (garante leitura do texto branco) */
.section--veiled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.62) 50%, rgba(10,10,10,.92) 100%);
  z-index: 0;
}
.section--veil-green::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-veil);
  pointer-events: none;
  z-index: 0;
}

.container {
  width: 100%;
  max-width: min(100%, var(--container));
  margin-inline: auto;
}
.container--wide { max-width: min(100%, var(--container-wide)); }
.container--narrow { max-width: min(100%, 760px); }

/* Pilhas e grades genéricas */
.stack        { display: flex; flex-direction: column; gap: var(--space-24); }
.stack--sm    { gap: var(--space-16); }
.stack--lg    { gap: var(--space-32); }
.stack--xl    { gap: var(--space-48); }
.center       { align-items: center; text-align: center; }

.grid         { display: grid; gap: var(--space-32); }
.grid--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--split  { grid-template-columns: 1fr 1fr; align-items: center; }


/* ==========================================================================
   04. TIPOGRAFIA
   ========================================================================== */

/* Olho / eyebrow dourado acima do título */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-1000);
  line-height: var(--lh-1000);
  font-weight: 400;
  color: var(--secondary);
}

/* Título de seção */
.title {
  font-family: var(--font-sans);
  font-size: var(--fs-1000);
  line-height: var(--lh-1000);
  font-weight: 600;
  color: var(--text);
}
.title--gold   { color: var(--secondary); }
.title--xl     { font-size: var(--fs-1100); letter-spacing: var(--ls-tight-lg); }
.title--light  { font-weight: 400; }

/* Subtítulo / nome de plano */
.subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-900);
  line-height: 1.15;
  letter-spacing: var(--ls-tight-md);
  font-weight: 400;
  color: var(--text);
}

/* Títulos menores */
.heading-md {
  font-family: var(--font-sans);
  font-size: var(--fs-700);
  line-height: var(--lh-700);
  font-weight: 600;
  color: var(--text);
}
.heading-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-800);
  line-height: var(--lh-800);
  font-weight: 600;
  color: var(--accent-red);
}

/* Corpo de texto */
.text {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide-sm);
  font-weight: 400;
  color: var(--text);
}
.text--medium { font-weight: 500; }
.text--lead   { font-size: var(--fs-600); line-height: var(--lh-600); letter-spacing: var(--ls-wide-xs); }
.text--lg     { font-size: var(--fs-500); line-height: var(--lh-500); letter-spacing: normal; }
.text--md     { font-size: var(--fs-400); line-height: var(--lh-400); letter-spacing: normal; }
.text--sm     { font-size: var(--fs-100); line-height: var(--lh-100); letter-spacing: var(--ls-wide-md); }
.text--gold   { color: var(--secondary); }
.text--muted  { color: var(--text-muted); }
.text--legal  { font-family: var(--font-ui); color: var(--text-muted-2); }

/* Destaques dentro do texto */
mark, .mark {
  background: transparent;
  color: var(--secondary);
  font-weight: 600;
}
.mark--red   { color: var(--accent-red-soft); }
.mark--green { color: var(--primary-border); }
.mark--box {
  background: var(--secondary);
  color: #000;
  padding: 0 .25em;
  border-radius: var(--radius-xs);
  font-weight: 700;
}


/* ==========================================================================
   05. BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: 1;
  color: var(--text-on-cta);
  background-image: var(--gradient-cta);
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-xs);
  padding: 19.2px 38.4px;
  box-shadow: var(--shadow-cta);
  transition: box-shadow var(--transition), transform var(--transition-fast),
              filter var(--transition);
  cursor: pointer;
}
.btn:hover {
  box-shadow: var(--shadow-cta-wide);
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.btn:active { transform: translateY(0); }

/* Variações */
.btn--wide    { width: 100%; }
.btn--lg      { padding: 20.8px 64px; font-size: var(--fs-500); letter-spacing: var(--ls-tight-xs); }
.btn--sm      { padding: 12px 24px; font-size: var(--fs-100); border-radius: var(--radius-md); box-shadow: var(--shadow-cta-soft); }

.btn--red {
  background-image: none;
  background-color: var(--accent-red-cta);
  color: var(--white);
  border-color: transparent;
  box-shadow: none;
}
.btn--red:hover { background-color: var(--accent-red); box-shadow: 0 0 0 6px rgba(255,0,0,.14); }

.btn--ghost {
  background-image: none;
  background-color: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--primary-border); box-shadow: none; }

/* Linha de apoio abaixo do botão */
.btn-note {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  line-height: var(--lh-200);
  color: var(--text-muted-2);
  text-align: center;
}

/* Pulso opcional no CTA — tire a classe se não quiser */
.btn--pulse { animation: pulse 2.6s ease-in-out infinite; }


/* ==========================================================================
   06. BARRA DE TOPO (anúncio)
   ========================================================================== */
.topbar {
  width: 100%;
  background: var(--accent-red-cta);
  color: var(--white);
  padding: var(--space-10);
  text-align: center;
}
.topbar__text {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.3;
}
/* Deixe a barra fixa no topo trocando para .topbar.is-sticky no HTML */
.topbar.is-sticky { position: sticky; top: 0; z-index: 50; }


/* ==========================================================================
   07. HERO
   ========================================================================== */
/* O topo é o banner da marca, de margem a margem, e o texto por baixo.
   Nada de moldura, nada de cantos redondos, nada de preto à volta. */
.hero { display: block; }

.hero__banner {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Esbate a aresta de baixo do banner contra o fundo da página */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 0;
}

.hero__inner { padding-block: var(--space-48); }

.hero__copy {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
.hero__copy .paybar { justify-content: center; }


/* ==========================================================================
   08. BLOCO DE TEXTO SOBRE IMAGEM
   ========================================================================== */
.feature-over {
  min-height: 767px;
  display: flex;
  align-items: center;
  background-image: url("../img/fundo-casos.webp");
}
.feature-over__box {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: rgba(10, 10, 10, .55);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  backdrop-filter: blur(4px);
}


/* ==========================================================================
   09. GRADE DE CAPAS
   ========================================================================== */
.covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.cover {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: transform var(--transition-fast), border-color var(--transition);
}
.cover:hover { transform: translateY(-6px); border-color: var(--secondary); }
.cover img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* Título por cima da arte: fica nítido, com acentos certos, e muda-se aqui */
.cover__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-32) var(--space-16) var(--space-16);
  background: linear-gradient(to top, rgba(10,10,10,.94) 30%, rgba(10,10,10,0) 100%);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
}
.cover__num {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--secondary);
}
@media (max-width: 480px) {
  .cover__label { font-size: 14px; padding: var(--space-24) 10px 10px; }
  .cover__num { font-size: 10px; }
}


/* ==========================================================================
   10. CARDS DE ETAPA
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }

.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 250px;
  background: var(--surface-glass);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-16);
  transition: border-color var(--transition), background var(--transition), transform var(--transition-fast);
}
.step-card:hover {
  border-color: var(--primary-border);
  background: var(--surface-glass-2);
  transform: translateY(-4px);
}
.step-card__media { border-radius: var(--radius-lg); overflow: hidden; }
.step-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.step-card__number {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--gradient-cta);
  color: #000;
  font-family: var(--font-ui);
  font-weight: 700;
}


/* ==========================================================================
   11. BLOCOS DE ENTREGA ("O que você receberá")
   ========================================================================== */
.delivery { display: flex; flex-direction: column; gap: var(--space-48); }

.delivery__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  align-items: center;
}
/* Inverte a ordem imagem/texto — use em linhas alternadas */
.delivery__row--reverse .delivery__media { order: 2; }

.delivery__media { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-soft); }
.delivery__text  { display: flex; flex-direction: column; gap: var(--space-16); }

.divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  border: 0;
  margin: 0;
}


/* ==========================================================================
   12. LISTA DE ITENS (checklist)
   ========================================================================== */
.checklist { display: flex; flex-direction: column; gap: var(--space-16); }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.checklist__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 2px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--gradient-cta);
  color: #000;
  font-size: 14px; font-weight: 800;
}
.checklist__icon--red { background: var(--accent-red-cta); color: #fff; }
.checklist__title {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}


/* ==========================================================================
   13. CARROSSEL DE DEPOIMENTOS (sem biblioteca externa)
   ========================================================================== */
.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--space-24) * 2)) / 3);
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-16);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  scroll-snap-align: center;
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.carousel__slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.carousel__caption { padding: var(--space-16); display: flex; flex-direction: column; gap: 6px; }

.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
}
.carousel__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.carousel__arrow:hover { border-color: var(--primary-border); background: var(--surface-glass); }

.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: background var(--transition), width var(--transition);
}
.carousel__dot.is-active { background: var(--accent-red); width: 28px; border-radius: 999px; }


/* ==========================================================================
   14. PLANOS / PREÇOS
   ========================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: transparent;
  border: 1px solid var(--border-green);
  border-radius: var(--radius-2xl);
  padding: var(--space-24);
  transition: transform var(--transition-fast), box-shadow var(--transition);
}
.plan:hover { transform: translateY(-4px); }

.plan--featured {
  border-color: var(--secondary-alt);
  box-shadow: var(--shadow-plan);
  background: linear-gradient(180deg, rgba(252,176,4,.05) 0%, rgba(10,10,10,0) 55%);
}

.plan__badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: var(--secondary);
  color: #000;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan__media { border-radius: var(--radius-lg); overflow: hidden; }
.plan__name  { text-align: center; }
.plan__sub   { text-align: center; color: var(--text-muted); font-size: var(--fs-200); line-height: var(--lh-200); }

.plan__price {
  font-family: var(--font-sans);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight-xl);
  color: var(--text);
  text-align: center;
}
.plan--basic .plan__price { font-size: var(--fs-price-sm); letter-spacing: var(--ls-tight-lg); }

.plan__price-old {
  text-align: center;
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: var(--fs-400);
}
.plan__installment { text-align: center; color: var(--text-muted); font-size: var(--fs-200); }

.plan__features { display: flex; flex-direction: column; gap: 12px; padding-block: var(--space-16); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }

.plan__deadline {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  line-height: var(--lh-200);
  color: var(--text-muted-2);
}

/* Selo de garantia */
.guarantee {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-glass);
  padding: var(--space-24);
}
.guarantee__seal {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  border: 2px dashed var(--secondary);
  color: var(--secondary);
  font-family: var(--font-ui);
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  font-size: 15px;
}


/* ==========================================================================
   15. FAQ (usa <details>/<summary> nativo — zero JavaScript)
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: 12px; }

.faq__item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq__item[open] { border-color: var(--secondary-alt); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--text);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  font-size: 26px;
  line-height: 1;
  color: var(--secondary);
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }

.faq__answer {
  padding: 0 var(--space-24) var(--space-24);
  font-size: var(--fs-100);
  line-height: var(--lh-100);
  color: var(--text-muted);
}


/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
/* Fecho da página: carmesim escuro, no tom do logótipo, com a marca ao centro.
   Para voltar ao vermelho original, troque todo o background por
   background: var(--accent-red); */
.final-cta {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(155, 20, 20, .55), transparent 62%),
    linear-gradient(180deg, #2A0506 0%, #6E0C0C 48%, #2A0506 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}
.final-cta .title,
.final-cta .text { color: var(--white); }
.final-cta .btn  { border-color: #fff; }

.final-cta__logo {
  width: min(100%, 230px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .75);
}

@media (max-width: 480px) {
  .final-cta__logo { width: min(100%, 170px); }
}

.footer {
  background: var(--background);
  border-top: 1px solid var(--border-soft);
  padding: var(--space-32) var(--gutter);
}
.footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.footer__text {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide-sm);
  color: var(--text-muted-2);
}
.footer__links { display: flex; justify-content: center; gap: var(--space-16); flex-wrap: wrap; }
.footer__links a:hover { color: var(--secondary); }


/* ==========================================================================
   17. FORMULÁRIO (bônus — já no padrão do design)
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-16); }

.field-group { display: flex; flex-direction: column; gap: 8px; }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wide-md);
  font-weight: 600;
  color: var(--text);
}

.field {
  width: 100%;
  background: var(--surface-glass);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field::placeholder { color: var(--text-muted-2); }
.field:hover  { border-color: #5A5A5A; }
.field:focus  {
  outline: none;
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-glow-soft);
}
.field[aria-invalid="true"] {
  border-color: var(--accent-red-soft);
  box-shadow: 0 0 0 3px rgba(228, 53, 53, .2);
}
.field-help { font-size: var(--fs-200); color: var(--text-muted-2); }


/* ==========================================================================
   18. ANIMAÇÕES
   ========================================================================== */
@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-cta); }
  50%      { box-shadow: var(--shadow-cta-wide); }
}

/* Entrada suave ao rolar (ativada pelo js/app.js) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

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


/* ==========================================================================
   19. RESPONSIVO
   ========================================================================== */

/* -------- Tablet / desktop pequeno -------- */
@media (max-width: 1024px) {
  .hero          { min-height: 640px; }
  .feature-over  { min-height: 560px; }

  .grid--split,
  .delivery__row { grid-template-columns: 1fr; }
  .delivery__row--reverse .delivery__media { order: 0; }

  .steps         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel__track { grid-auto-columns: calc((100% - var(--space-24)) / 2); }

  .eyebrow, .title { font-size: var(--fs-900); line-height: 1.15; }
  .title--xl       { font-size: var(--fs-900); }
  .plan__price     { font-size: 64px; letter-spacing: var(--ls-tight-lg); }
}

/* -------- Mobile (o design nasceu aqui) -------- */
@media (max-width: 480px) {
  .section__inner        { padding: var(--space-48) var(--gutter); }
  .section--large > .section__inner { padding-block: var(--space-48); }
  .section--plans > .section__inner { padding: var(--space-48) var(--gutter) var(--space-64); }

  .hero          { min-height: auto; }
  .hero__inner   { padding-block: var(--space-32); row-gap: var(--space-24); }
  .hero__copy    { max-width: 100%; text-align: center; align-items: center; }
  .feature-over  { min-height: auto; }
  .feature-over__box { padding: var(--space-24); text-align: center; }

  /* Tudo centralizado, como no original */
  .container, .stack, .delivery__text, .plan { text-align: center; }
  .checklist__item { text-align: left; }

  .eyebrow       { font-size: 24px; line-height: 28.8px; }
  .title         { font-size: 21px; line-height: 28.8px; }
  .title--xl     { font-size: 29px; line-height: 33.44px; letter-spacing: var(--ls-tight-sm); }
  .subtitle      { font-size: var(--fs-900); line-height: 36.96px; }
  .heading-md    { font-size: var(--fs-400); line-height: 1.3; }
  .heading-lg    { font-size: var(--fs-700); line-height: 1.25; }

  .text          { font-size: var(--fs-100); line-height: 21px; font-weight: 500; }
  .text--lead    { font-size: var(--fs-400); line-height: 26.88px; letter-spacing: var(--ls-tight-xs); }
  .text--lg,
  .text--md      { font-size: var(--fs-100); line-height: var(--lh-100); }
  .checklist__title { font-size: 15px; }

  .btn           { width: 100%; font-size: var(--fs-200); line-height: var(--fs-200); padding: 17.6px; }
  .btn--lg       { padding: 18px; font-size: var(--fs-200); }

  .covers        { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  .steps,
  .plans         { grid-template-columns: 1fr; gap: var(--space-24); }
  .carousel__track { grid-auto-columns: 86%; }

  .plan__price   { font-size: 38.4px; letter-spacing: var(--ls-tight-md); }
  .plan--basic .plan__price { font-size: 38.4px; }

  .guarantee     { flex-direction: column; text-align: center; }
  .faq__question { font-size: var(--fs-100); padding: 14px 16px; }
  .faq__answer   { padding: 0 16px 16px; }
}


/* ==========================================================================
   20. UTILITÁRIOS
   ========================================================================== */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.mx-auto      { margin-inline: auto; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: var(--space-16); }
.mt-24        { margin-top: var(--space-24); }
.mt-32        { margin-top: var(--space-32); }
.mt-48        { margin-top: var(--space-48); }
.w-full       { width: 100%; }
.hidden       { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Rolagem horizontal de segurança */
.no-scroll-x { overflow-x: hidden; }


/* ==========================================================================
   21. BLOCOS NOVOS (não existiam na página de origem)
   ========================================================================== */

/* -------- Olho mais pequeno (etiqueta de secção) -------- */
.eyebrow--sm { font-size: var(--fs-700); line-height: 1.2; letter-spacing: var(--ls-wide-md); text-transform: uppercase; }

/* -------- Barra de meios de pagamento (texto, não imagem) -------- */
.paybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.paybar span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.paybar--wide { justify-content: center; }
@media (max-width: 480px) { .paybar { justify-content: center; } }

/* -------- Contagem decrescente na barra de topo -------- */
.countdown b {
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

/* -------- Para quem é / não é -------- */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
  align-items: start;
}
.fit__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
}
.fit__card--yes { border-color: var(--border-green); }
.fit__card--no  { border-color: rgba(228, 53, 53, .3); }
.fit__card--no .checklist__title { color: var(--text-muted); }

/* -------- Prova social (prints e vídeos) -------- */
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}
.proof__item {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-glass);
  border: 1px solid var(--border);
}
.proof__item img { width: 100%; object-fit: cover; }
.proof img { aspect-ratio: 1 / 1; }
.proof--video img { aspect-ratio: 2 / 3; }

/* Marca visual de "espaço por preencher" — some assim que trocar o ficheiro */
.slot { border-style: dashed; border-color: var(--border); }
.slot__note {
  padding: 10px var(--space-16);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-muted-2);
  text-align: center;
  border-top: 1px dashed var(--border);
}

/* -------- Planos: grelha de três -------- */
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* O preço nunca pode partir a linha entre o número e o € */
.plans--3 .plan__price,
.plans--3 .plan--basic .plan__price {
  white-space: nowrap;
  font-size: clamp(34px, 4.2vw, 62px);
  letter-spacing: var(--ls-tight-lg);
}
.plans--3 .plan--featured .plan__price { font-size: clamp(38px, 4.8vw, 70px); }
.plan--third { border-color: var(--border-green); }

/* Item que o plano NÃO inclui */
.plan__off { color: var(--text-muted-2); text-decoration: line-through; text-decoration-color: rgba(228,53,53,.6); }

/* Preço de referência: na UE tem de ser o preço mais baixo dos 30 dias
   anteriores (Diretiva Omnibus / DL 109-G/2021). Ver o LEIA-ME. */
.plan__price-old { text-decoration: line-through; }

/* -------- Rodapé legal -------- */
.footer__legal { font-size: 14px; line-height: 1.5; color: var(--text-muted-2); max-width: 820px; margin-inline: auto; }
.footer__links a { font-family: var(--font-ui); font-size: var(--fs-100); color: var(--text-muted); }

/* -------- Banner de cookies -------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 100;
  width: min(100% - 32px, 980px);
  background: #141414;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
}
.consent[hidden] { display: none; }
.consent__inner {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-24);
}
.consent__text {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  line-height: 1.45;
  color: var(--text-muted);
}
.consent__text a { color: var(--secondary); text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent__actions .btn { padding: 11px 22px; }


/* ==========================================================================
   21.1 RESPONSIVO DOS BLOCOS NOVOS
   ========================================================================== */
@media (max-width: 1024px) {
  .plans--3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .plans--3 .plan__price,
  .plans--3 .plan--basic .plan__price,
  .plans--3 .plan--featured .plan__price { font-size: 64px; }
  .plan--featured { order: -1; }     /* o destaque sobe para primeiro */
  .fit   { grid-template-columns: 1fr; }
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
}

@media (max-width: 640px) {
  .consent__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .consent__actions { flex-direction: row; }
  .consent__actions .btn { flex: 1; }
}

@media (max-width: 480px) {
  .proof { grid-template-columns: 1fr 1fr; gap: 12px; }
  .proof--video { grid-template-columns: 1fr 1fr; }
  .slot__note { font-size: 12px; padding: 8px; }
  .fit__card { padding: var(--space-24); text-align: left; }
  .fit__card .checklist__item { text-align: left; }
  .plans--3 .plan__price,
  .plans--3 .plan--basic .plan__price,
  .plans--3 .plan--featured .plan__price { font-size: 44px; letter-spacing: var(--ls-tight-md); }
  .paybar { width: 100%; }
  .topbar__text { font-size: 14px; font-weight: 700; }
  /* :not([hidden]) para a contagem não aparecer quando não há data real */
  .countdown:not([hidden]) { display: block; }
}


/* ==========================================================================
   22. MOLDURA DE DEPOIMENTO EM CONVERSA
   Só para palavras reais de clientes reais, com autorização escrita.
   ========================================================================== */
.chat {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface-glass);
}
.chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--space-16);
  border-bottom: 1px solid var(--border-soft);
}
.chat__avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px dashed var(--border);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-muted-2);
}
.chat__name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.chat__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-16);
  flex: 1 1 auto;
}
.chat__bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.chat__bubble--in  { align-self: flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius: 4px; }
.chat__bubble--out { align-self: flex-end; background: rgba(11,94,22,.45); border: 1px solid var(--border-green); border-bottom-right-radius: 4px; }

/* Enquanto o depoimento não for real, o texto fica esbatido */
.chat.slot .chat__bubble { color: var(--text-muted-2); font-style: italic; }

@media (max-width: 480px) {
  .chat__bubble { font-size: 12.5px; padding: 8px 11px; }
  .chat__head { padding: 10px; }
  .chat__name { font-size: 12px; }
  .chat__avatar { width: 26px; height: 26px; font-size: 12px; }
}


/* ==========================================================================
   23. TOPO COM O BANNER DA MARCA — responsivo
   No telemóvel o banner não pode ser fundo: o recorte corta a arte.
   Entra inteiro, por cima do texto.
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner { padding-block: var(--space-32); }
  .hero__copy { max-width: none; }
}