/* ==========================================================================
   SFD — Secret Flight Deals, página de vendas (produto de frente)

   Esta folha NÃO é um sistema próprio. A página carrega o /assets/style.css
   do EMA primeiro e usa as peças de lá — .secao, .container, .titulo,
   .efeito, .texto, .botao, .comparativo, .cartao, .icone-x, .viagens,
   .bonus, .oferta, .garantia, .sobre, .acordeao, .rodape, .delay.
   Aqui ficam só as seções que o SFD tem e o EMA não, e os poucos ajustes
   para os prints do aplicativo caberem nos cartões que já existem.

   ⚠ Os caminhos de imagem são ABSOLUTOS. No /assets/style.css eles são
   relativos ('img/…') porque a folha mora ao lado da pasta; esta mora em
   /sfd/assets/, então 'img/…' apontaria para o lugar errado.
   ========================================================================== */

/* ==========================================================================
   2. ABERTURA — o primeiro bloco depois do delay
   Mesma ideia da .intro do EMA: foto sangrando, texto em coluna à esquerda.
   ========================================================================== */
.sfd-abertura {
  background-color: #FFFFFF;
  background-image: url('/assets/img/IMG-EMA-NOVO-08.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sfd-abertura .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sfd-abertura__texto {
  width: 50%;
  font-size: 1rem;
  color: #000000;
}

.sfd-abertura .botao-wrap {
  width: 50%;
  justify-content: flex-start;
}

.sfd-abertura .botao-wrap .botao { width: 100%; }

/* ==========================================================================
   3. MECANISMO — seção preta com divisor de nuvens, como a .assentos
   ========================================================================== */
.sfd-mecanismo {
  padding-top: 500px;
  padding-bottom: 100px;
  background-color: #000;
  background-image: url('/assets/img/IMG-EMA-NOVO-01.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.sfd-mecanismo__titulo { margin-bottom: 20px; }
.sfd-mecanismo__texto { color: #FFFFFF; }

/* ==========================================================================
   4. PROVA — o comparativo do EMA, com print no lugar do logotipo

   Cada linha é o mesmo par de cartões: à esquerda o que o buscador comum
   mostra, à direita o que o radar encontrou, com o X verde entre os dois.
   O print é a evidência; quem carrega a mensagem é a rota e o preço em
   letra grande embaixo — exatamente como no EMA.
   ========================================================================== */
.sfd-prova {
  background-color: var(--cinza-claro);
  padding-left: 0;
  padding-right: 0;
}

.sfd-prova__titulo { margin-bottom: 10px; }

.sfd-prova__linha-fina {
  font-size: 1.1rem;
  text-align: center;
  color: #444;
  margin-bottom: 30px;
  padding: 0 10px;
}

.sfd-prova__intro {
  max-width: 820px;
  margin: 0 auto 30px;
  padding: 0 10px;
  text-align: center;
  color: var(--preto);
}

/* Os dois cartões do par ficam da mesma altura, porque os dois prints têm
   proporções diferentes e centralizados eles ficariam desencontrados. */
.sfd-prova .comparativo__linha { align-items: stretch; }
.sfd-prova .cartao { display: flex; flex-direction: column; }

/* ⚠ O .cartao img do EMA manda `width: 30%` — lá dentro do cartão vai um
   LOGOTIPO. Aqui vai a prova, e ela precisa da largura inteira. O seletor
   tem que incluir o `img` para ganhar de `.cartao img` na especificidade;
   só `.cartao__tela` perde e o print sai ilegível. */
.cartao img.cartao__tela {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 14px;
}

.cartao__rotulo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5A5A5A;
  margin-bottom: 12px;
}

.cartao--depois .cartao__rotulo { color: var(--verde); }

.cartao__cabine {
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
  margin-top: 2px;
}

/* Faixa de economia embaixo de cada par */
.sfd-prova__economia {
  background-color: #FFFFFF;
  border-radius: 15px;
  margin: 14px 10px 0;
  padding: 18px 20px;
  text-align: center;
}

.sfd-prova__economia strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--verde);
}

.sfd-prova__economia span {
  display: block;
  font-size: 1rem;
  color: var(--preto);
  margin-top: 6px;
}

.sfd-prova__fecho {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 0 10px;
  color: var(--preto);
}

/* ==========================================================================
   6. DEPOIMENTOS — seção preta
   ========================================================================== */
.sfd-depoimentos {
  background-color: #000;
}

.sfd-depoimentos__titulo { margin-bottom: 16px; }
.sfd-depoimentos__texto { color: #FFFFFF; text-align: center; margin-bottom: 34px; }

.sfd-depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.sfd-depoimento {
  margin: 0;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
}

.sfd-depoimento img { width: 100%; }

/* O da Janett é retrato e é o mais forte: ocupa a coluna inteira à esquerda. */
.sfd-depoimento--principal { grid-row: span 2; }

/* ==========================================================================
   7. O QUE TEM DENTRO — usa a .bonus do EMA (gradiente azul + grade)
   Só o print de celular precisa de ajuste: ele é muito mais alto que os
   quadrados do EMA, então mostramos o topo da tela.
   ========================================================================== */
/* O EMA tem 6 cartões quadrados em 3 colunas. Aqui só 4 dos 6 têm tela, e o
   print de celular é alto — em 3 colunas os dois cartões sem imagem ficariam
   sozinhos numa fileira desigual. Em 2 colunas as fileiras fecham certinho. */
.sfd-dentro .bonus__grid { grid-template-columns: repeat(2, 1fr); }

.bonus__card .bonus__tela {
  width: auto;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   8. ANCORAGEM — o número entra antes do preço
   ========================================================================== */
/* Fundo preto liso, sem foto — igual à .depoimentos do EMA.
   ⚠ Aqui já esteve a IMG-EMA-NOVO-11 e foi um erro: ela é uma foto de estúdio
   quase branca, e o texto desta seção é branco. Ficou ilegível. Se um dia
   entrar imagem aqui, ou ela é escura, ou vai com um véu escuro por cima.
   Fora isso, a seção é o momento do número: fundo limpo faz o valor bater. */
.sfd-ancoragem { background-color: #000; }

.sfd-ancoragem__titulo { margin-bottom: 20px; }
.sfd-ancoragem__texto { color: #FFFFFF; text-align: center; max-width: 820px; margin: 0 auto; }

.sfd-ancoragem__caixa {
  background: #FFFFFF;
  border-radius: 15px;
  max-width: 620px;
  margin: 34px auto 0;
  padding: 34px 26px;
  text-align: center;
}

.sfd-ancoragem__valor {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--verde);
}

.sfd-ancoragem__legenda {
  font-size: 1.2rem;
  color: var(--preto);
  margin-top: 10px;
}

.sfd-ancoragem__multiplica {
  font-size: 1.05rem;
  color: #444;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #E2E2E2;
}

/* A linha do que está incluso, dentro do cartão da oferta. */
.oferta__inclui {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  color: var(--preto);
  padding: 0 20px;
  margin-bottom: 6px;
}

/* ==========================================================================
   Responsivo — o EMA quebra em 1024 e 767; seguimos os mesmos pontos.
   ========================================================================== */
@media (max-width: 1024px) {
  .sfd-mecanismo { padding-top: 320px; }
}

@media (max-width: 767px) {
  .sfd-abertura__texto,
  .sfd-abertura .botao-wrap { width: 100%; }

  .sfd-mecanismo {
    padding-top: 180px;
    background-size: cover;
  }

  .sfd-depoimentos__grid { grid-template-columns: 1fr; }
  .sfd-dentro .bonus__grid { grid-template-columns: 1fr; }
  .sfd-depoimento--principal { grid-row: auto; }

  .sfd-prova__economia strong { font-size: 1.8rem; }
  .sfd-ancoragem__valor { font-size: 3.2rem; }

  .bonus__card .bonus__tela { height: 240px; }
}