/* ==========================================================================
   VOLTA PRA MARGEM - FOLHA DE ESTILOS PRINCIPAL
   Identidade visual náutica, mobile first, acessível (WCAG AA)
   ========================================================================== */

/* --- VARIÁVEIS DO SISTEMA DE DESIGN --- */
:root {
  /* Paleta oficial */
  --azul-rio: #0F2E3D;
  --azul-rio-profundo: #091D27;
  --verde-agua: #1F8A7A;
  --verde-agua-suave: #E6F3F1;
  --areia: #F6F1E7;
  --areia-escuro: #EAE3D2;
  --areia-card: #FAF7F0;
  --grafite: #1E1E1E;
  --grafite-suave: #333333;
  --grafite-claro: #555555;
  --laranja-colete: #F57C1F;
  --laranja-hover: #E0690E;
  --amarelo-semaforo: #F2C14E;
  --vermelho-semaforo: #D64545;
  --branco: #FFFFFF;

  /* Tipografia */
  --font-titulo: 'Barlow Condensed', sans-serif;
  --font-corpo: 'Inter', sans-serif;
  --tamanho-corpo: 1.0625rem; /* 17px - mínimo exigido */
  --altura-linha-corpo: 1.6;

  /* Dimensões e espaçamentos */
  --largura-maxima: 1100px;
  --raio-borda: 12px;
  --sombra-suave: 0 4px 16px rgba(15, 46, 61, 0.08);
  --sombra-card: 0 8px 24px rgba(15, 46, 61, 0.12);
  --sombra-destaque: 0 12px 32px rgba(245, 124, 31, 0.2);

  /* Transições */
  --transicao-rapida: 0.2s ease;
  --transicao-media: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RESET E NORMAS GERAIS --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-corpo);
  font-size: var(--tamanho-corpo);
  line-height: var(--altura-linha-corpo);
  color: var(--grafite);
  background-color: var(--areia);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Foco acessível */
:focus-visible {
  outline: 3px solid var(--verde-agua);
  outline-offset: 3px;
}

/* Respeito a preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Elementos estruturais */
img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

p {
  margin-bottom: 1.15rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Tipografia de Títulos */
h1, h2, h3, h4, .tipo-placa {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
}

.pre-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--verde-agua);
  display: inline-block;
  margin-bottom: 0.75rem;
}

.titulo-secao {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.subtitulo-secao {
  font-size: 1.125rem;
  color: var(--grafite-claro);
  margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .pre-titulo {
    font-size: 1.125rem;
    letter-spacing: 2px;
  }
  .titulo-secao {
    font-size: 2.75rem;
  }
}

/* --- BOTÕES DE COMPRA --- */
/* Regras estritas: Laranja-colete APENAS nos botões de compra e preço. Mínimo 52px de altura */
.btn-compra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  width: 100%; /* Largura total no celular */
  padding: 0.85rem 1.75rem;
  background-color: var(--laranja-colete);
  color: var(--azul-rio); /* Contraste AA garantido (~6.5:1) */
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-destaque);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.btn-compra:hover,
.btn-compra:focus-visible {
  background-color: var(--laranja-hover);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(245, 124, 31, 0.32);
}

.btn-compra:active {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .btn-compra.btn-auto {
    width: auto;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
}

/* --- CTAS INTERMEDIÁRIOS E SELOS DE SEGURANÇA --- */
.cta-intermediario {
  margin: 2rem auto 0 auto;
  text-align: center;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.cta-intermediario-frase {
  font-family: var(--font-corpo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--azul-rio);
  margin-bottom: 0;
  line-height: 1.4;
}

.secao-hero .cta-intermediario-frase,
.secao-mecanismo .cta-intermediario-frase,
.secao-kit .cta-intermediario-frase,
.secao-oferta .cta-intermediario-frase {
  color: #D6E2E6;
}

.selos-micro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--grafite-claro);
  opacity: 0.9;
}

.secao-hero .selos-micro,
.secao-mecanismo .selos-micro,
.secao-kit .selos-micro,
.secao-oferta .selos-micro {
  color: #A0B7C0;
}

.selos-micro span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.selos-micro svg {
  width: 14px;
  height: 14px;
  color: var(--verde-agua);
}

/* ==========================================================================
   1. BARRAS DE FIXAÇÃO (Desktop Topo / Mobile Rodapé)
   ========================================================================== */

/* Desktop Top Bar (apenas >= 769px) */
.barra-fixa-desktop {
  display: none;
}

@media (min-width: 769px) {
  .barra-fixa-desktop {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--azul-rio-profundo);
    border-bottom: 2px solid rgba(31, 138, 122, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  .barra-fixa-desktop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
  }

  .barra-fixa-desktop .logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .barra-fixa-desktop .logo-texto {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 1px;
    color: var(--areia);
    text-transform: uppercase;
  }

  .barra-fixa-desktop .logo-tag {
    font-family: var(--font-corpo);
    font-size: 0.85rem;
    color: var(--verde-agua);
    background-color: rgba(31, 138, 122, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
  }

  .barra-fixa-desktop .acoes-desktop {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .barra-fixa-desktop .preco-topo {
    font-family: var(--font-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--laranja-colete);
  }

  .barra-fixa-desktop .preco-topo span {
    font-family: var(--font-corpo);
    font-size: 0.9rem;
    color: var(--areia);
    font-weight: 400;
  }

  .barra-fixa-desktop .btn-compra {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font-size: 1.1rem;
    width: auto;
  }
}

/* Mobile Bottom Bar (apenas <= 768px, aparece após rolar além do hero) */
.barra-fixa-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--azul-rio-profundo);
  border-top: 2px solid var(--verde-agua);
  padding: 0.75rem 1rem;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(110%);
  transition: transform var(--transicao-media);
}

.barra-fixa-mobile.visivel {
  transform: translateY(0);
}

.barra-fixa-mobile .info-mobile {
  display: flex;
  flex-direction: column;
}

.barra-fixa-mobile .preco-mobile {
  font-family: var(--font-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--laranja-colete);
  line-height: 1;
}

.barra-fixa-mobile .texto-mobile {
  font-family: var(--font-corpo);
  font-size: 0.8rem;
  color: var(--areia);
  white-space: nowrap;
}

.barra-fixa-mobile .btn-compra {
  width: auto;
  flex-shrink: 0;
  padding: 0.65rem 1.2rem;
  font-size: 1.15rem;
  min-height: 48px;
}

@media (min-width: 769px) {
  .barra-fixa-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   2. SEÇÃO HERO (Fundo Azul-Rio, Texto Areia)
   ========================================================================== */
.secao-hero {
  background-color: var(--azul-rio);
  color: var(--areia);
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 4px solid var(--verde-agua);
  position: relative;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 900px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 3rem;
  }
}

.hero-conteudo .titulo-hero {
  font-size: 2.35rem;
  line-height: 1.08;
  color: var(--areia);
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .hero-conteudo .titulo-hero {
    font-size: 3.5rem;
  }
}

.hero-conteudo .subtitulo-hero {
  font-size: 1.15rem;
  line-height: 1.55;
  color: #D6E2E6;
  margin-bottom: 1.75rem;
}

.hero-cta {
  margin-bottom: 1.5rem;
}

.hero-beneficios {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

@media (min-width: 540px) {
  .hero-beneficios {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}

.item-beneficio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--areia);
}

.item-beneficio svg {
  width: 18px;
  height: 18px;
  color: var(--verde-agua);
  flex-shrink: 0;
}

.hero-imagem {
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  border: 1px solid rgba(31, 138, 122, 0.4);
}

/* ==========================================================================
   3. SEÇÃO A CENA (Fundo Areia)
   ========================================================================== */
.secao-cena {
  background-color: var(--areia);
  color: var(--grafite);
  padding: 3.5rem 0;
}

.cena-wrapper {
  max-width: 780px;
  margin: 0 auto;
}

.cena-wrapper .paragrafo-cena {
  font-size: 1.15rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  color: var(--grafite);
}

.cena-wrapper .paragrafo-destaque {
  font-weight: 600;
  color: var(--azul-rio);
  padding-left: 1rem;
  border-left: 4px solid var(--verde-agua);
}

/* ==========================================================================
   4. SEÇÃO POR QUE ACONTECE (Fundo Areia, Caixa Destacada)
   ========================================================================== */
.secao-porque {
  background-color: var(--areia);
  padding: 1rem 0 3.5rem 0;
}

.caixa-destaque-porque {
  background-color: var(--areia-card);
  border: 2px solid var(--areia-escuro);
  border-left: 6px solid var(--verde-agua);
  border-radius: var(--raio-borda);
  padding: 1.75rem;
  box-shadow: var(--sombra-suave);
  max-width: 780px;
  margin: 0 auto;
}

.caixa-destaque-porque h3 {
  font-size: 1.85rem;
  color: var(--azul-rio);
  margin-bottom: 1rem;
}

.caixa-destaque-porque p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--grafite-suave);
}

/* ==========================================================================
   5. SEÇÃO O MECANISMO (Fundo Azul-Rio)
   ========================================================================== */
.secao-mecanismo {
  background-color: var(--azul-rio);
  color: var(--areia);
  padding: 4rem 0;
}

.mecanismo-cabecalho {
  max-width: 820px;
  margin-bottom: 2.5rem;
}

.mecanismo-cabecalho .titulo-secao {
  color: var(--areia);
}

.mecanismo-cabecalho p {
  font-size: 1.15rem;
  color: #D6E2E6;
}

/* Três Cards Grandes */
.cards-tres-sinais {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 820px) {
  .cards-tres-sinais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.card-sinal {
  background-color: var(--azul-rio-profundo);
  border: 2px solid rgba(31, 138, 122, 0.4);
  border-radius: var(--raio-borda);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--transicao-rapida), border-color var(--transicao-rapida);
}

.card-sinal:hover {
  transform: translateY(-4px);
  border-color: var(--verde-agua);
}

.card-sinal-topo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.icone-sinal-svg {
  width: 44px;
  height: 44px;
  background-color: rgba(31, 138, 122, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-sinal-nome {
  font-family: var(--font-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--areia);
}

.card-sinal-pergunta {
  font-size: 1.05rem;
  color: #E2ECEF;
  line-height: 1.45;
  font-weight: 500;
}

.mecanismo-rodape-texto {
  max-width: 820px;
  font-size: 1.125rem;
  color: #D6E2E6;
  margin-bottom: 1.5rem;
}

/* Legenda do Semáforo */
.legenda-semaforo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: rgba(9, 29, 39, 0.75);
  padding: 1.25rem 1.5rem;
  border-radius: var(--raio-borda);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 820px;
}

@media (min-width: 640px) {
  .legenda-semaforo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

.pilula-semaforo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--areia);
}

.ponto-semaforo {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ponto-verde {
  background-color: var(--verde-agua);
  box-shadow: 0 0 8px rgba(31, 138, 122, 0.6);
}

.ponto-amarelo {
  background-color: var(--amarelo-semaforo);
  box-shadow: 0 0 8px rgba(242, 193, 78, 0.6);
}

.ponto-vermelho {
  background-color: var(--vermelho-semaforo);
  box-shadow: 0 0 8px rgba(214, 69, 69, 0.6);
}

/* ==========================================================================
   6. SEÇÃO TESTE RÁPIDO INTERATIVO (Fundo Areia)
   ========================================================================== */
.secao-teste {
  background-color: var(--areia);
  padding: 4rem 0;
}

.teste-container {
  max-width: 720px;
  margin: 0 auto;
}

.teste-card {
  background-color: var(--branco);
  border: 2px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  padding: 1.75rem;
  box-shadow: var(--sombra-card);
}

@media (min-width: 640px) {
  .teste-card {
    padding: 2.25rem;
  }
}

.teste-progresso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--areia-escuro);
}

.teste-progresso-texto {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--verde-agua);
  letter-spacing: 0.5px;
}

.teste-pergunta-texto {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--azul-rio);
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

.teste-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.opcao-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background-color: var(--areia-card);
  border: 2px solid #E2D9C5;
  border-radius: 8px;
  font-family: var(--font-corpo);
  font-size: 1.05rem;
  color: var(--grafite);
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-height: 52px;
  transition: border-color var(--transicao-rapida), background-color var(--transicao-rapida);
}

.opcao-btn:hover:not(:disabled) {
  border-color: var(--verde-agua);
  background-color: #F0ECE2;
}

.opcao-letra {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--azul-rio);
  flex-shrink: 0;
  width: 24px;
}

.opcao-btn.correta {
  border-color: var(--verde-agua);
  background-color: #EBF7F5;
  color: #0B4A40;
}

.opcao-btn.incorreta {
  border-color: var(--vermelho-semaforo);
  background-color: #FDF2F2;
  color: #7A1A1A;
}

.teste-explicacao {
  background-color: #F8F9FA;
  border-left: 4px solid var(--verde-agua);
  padding: 1.15rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  display: none;
}

.teste-explicacao.visivel {
  display: block;
  animation: fadeIn 0.3s ease;
}

.teste-explicacao-titulo {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.teste-explicacao-texto {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grafite-suave);
  margin-bottom: 0;
}

.btn-proxima {
  display: none;
  width: 100%;
  min-height: 52px;
  background-color: var(--azul-rio);
  color: var(--areia);
  border: none;
  border-radius: var(--raio-borda);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color var(--transicao-rapida);
}

.btn-proxima:hover {
  background-color: var(--azul-rio-profundo);
}

.btn-proxima.visivel {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tela final do teste */
.teste-conclusao {
  display: none;
  text-align: center;
  padding: 1rem 0;
}

.teste-conclusao.visivel {
  display: block;
}

.teste-conclusao-frase {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--azul-rio);
  line-height: 1.45;
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   7. SEÇÃO O QUE VEM NO KIT (Fundo Azul-Rio)
   ========================================================================== */
.secao-kit {
  background-color: var(--azul-rio);
  color: var(--areia);
  padding: 4rem 0;
}

.kit-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .kit-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 3rem;
  }
}

.kit-conteudo .titulo-secao {
  color: var(--areia);
}

.lista-itens-kit {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.item-kit {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.item-kit-icone {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: rgba(31, 138, 122, 0.2);
  border: 1px solid var(--verde-agua);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-agua);
  flex-shrink: 0;
  margin-top: 2px;
}

.item-kit-icone svg {
  width: 20px;
  height: 20px;
}

.item-kit-texto {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--areia);
}

.item-kit-texto strong {
  color: #FFFFFF;
  font-weight: 600;
}

.kit-frase-final {
  background-color: var(--azul-rio-profundo);
  border: 2px solid var(--verde-agua);
  border-radius: var(--raio-borda);
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  color: var(--areia);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kit-imagem {
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

/* ==========================================================================
   8. SEÇÃO MOTORES COBERTOS (Fundo Areia)
   ========================================================================== */
.secao-motores {
  background-color: var(--areia);
  padding: 4rem 0;
}

.motores-container {
  max-width: 860px;
  margin: 0 auto;
}

.chips-motores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.chip-motor {
  display: inline-flex;
  align-items: center;
  background-color: var(--branco);
  border: 1.5px solid var(--areia-escuro);
  border-radius: 20px;
  padding: 0.5rem 1.15rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--azul-rio);
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.texto-motores-aviso {
  background-color: var(--areia-card);
  border-left: 4px solid var(--verde-agua);
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grafite);
}

/* ==========================================================================
   9. SEÇÃO PARA QUEM É / NÃO É (Fundo Areia, Duas Colunas)
   ========================================================================== */
.secao-publico {
  background-color: var(--areia);
  padding: 1rem 0 4rem 0;
}

.publico-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .publico-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.card-publico {
  border-radius: var(--raio-borda);
  padding: 2rem 1.75rem;
  box-shadow: var(--sombra-suave);
}

.card-publico-sim {
  background-color: #EBF6F4;
  border: 2px solid var(--verde-agua);
}

.card-publico-nao {
  background-color: #FBF1F1;
  border: 2px solid #E4AAAA;
}

.card-publico-titulo {
  font-family: var(--font-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.card-publico-sim .card-publico-titulo {
  color: #0B4A40;
}

.card-publico-nao .card-publico-titulo {
  color: #8C2424;
}

.lista-publico {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.item-publico {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--grafite);
}

.item-publico-icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==========================================================================
   10. SEÇÃO OFERTA (id="oferta", Fundo Azul-Rio, 2 Kits lado a lado)
   ========================================================================== */
.secao-oferta {
  background-color: var(--azul-rio);
  padding: 4.5rem 0;
  position: relative;
}

.oferta-container {
  max-width: 980px;
  margin: 0 auto;
}

.oferta-cabecalho {
  text-align: center;
  margin-bottom: 2.5rem;
}

.oferta-cabecalho .titulo-secao {
  color: var(--areia);
  margin-bottom: 0.5rem;
}

.oferta-cabecalho .subtitulo-oferta {
  color: #D6E2E6;
  font-size: 1.15rem;
}

.grid-dois-kits {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .grid-dois-kits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
}

/* Card Comum a ambos os kits */
.card-kit {
  background-color: var(--areia);
  border-radius: var(--raio-borda);
  padding: 2.25rem 1.75rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

@media (min-width: 640px) {
  .card-kit {
    padding: 2.75rem 2rem;
  }
}

/* Card Kit Básico */
.card-kit-basico {
  border: 2px solid var(--areia-escuro);
}

/* Card Kit Premium (Destaque) */
.card-kit-premium {
  border: 3px solid var(--laranja-colete);
  background-color: #FAF7F0;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

@media (min-width: 768px) {
  .card-kit-premium {
    transform: translateY(-8px);
  }
}

.badge-kit-premium {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--laranja-colete);
  color: var(--azul-rio);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.35rem 1.25rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 124, 31, 0.4);
  white-space: nowrap;
}

.card-kit-topo {
  margin-bottom: 1.5rem;
}

.card-kit-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--azul-rio);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  line-height: 1.15;
}

.card-kit-subtitulo {
  font-size: 0.95rem;
  color: var(--grafite-claro);
  font-weight: 500;
}

.lista-itens-kit-oferta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  margin: 0 auto 2rem auto;
  width: 100%;
}

.item-kit-oferta {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--grafite);
}

.item-kit-oferta.item-bonus {
  background-color: rgba(31, 138, 122, 0.1);
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border-left: 3px solid var(--verde-agua);
}

.item-kit-oferta svg {
  width: 18px;
  height: 18px;
  color: var(--verde-agua);
  flex-shrink: 0;
  margin-top: 3px;
}

.item-kit-oferta.item-indisponivel {
  color: #999999;
  text-decoration: line-through;
}

.item-kit-oferta.item-indisponivel svg {
  color: #B0B0B0;
}

.bloco-preco-kit {
  margin-bottom: 1.25rem;
}

.preco-destaque-kit {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 3.25rem;
  color: var(--laranja-colete);
  line-height: 1;
  letter-spacing: -0.5px;
  margin-bottom: 0.35rem;
}

@media (min-width: 640px) {
  .preco-destaque-kit {
    font-size: 3.75rem;
  }
}

.detalhes-pagamento-kit {
  font-size: 0.95rem;
  color: var(--grafite-claro);
  font-weight: 500;
}

.card-kit .btn-compra {
  margin-bottom: 0.85rem;
}

/* ==========================================================================
   POP-UP MODAL DE DESCONTO EXCLUSIVO (KIT PREMIUM POR R$ 17,90)
   ========================================================================== */
.modal-desconto-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(9, 29, 39, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal-desconto-overlay.visivel {
  display: flex;
  opacity: 1;
}

.modal-desconto-container {
  background-color: var(--areia);
  border: 3px solid var(--laranja-colete);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 2.25rem 1.75rem 1.75rem 1.75rem;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: zoomInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomInModal {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.btn-fechar-modal {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--grafite-claro);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color var(--transicao-rapida);
}

.btn-fechar-modal:hover {
  color: var(--vermelho-semaforo);
}

.modal-badge-urgencia {
  display: inline-block;
  background-color: var(--laranja-colete);
  color: var(--azul-rio);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(245, 124, 31, 0.3);
}

.modal-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--azul-rio);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .modal-titulo {
    font-size: 2.15rem;
  }
}

.modal-subtitulo {
  font-size: 1.05rem;
  color: var(--grafite);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.modal-caixa-vantagens {
  background-color: var(--areia-card);
  border: 1.5px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.modal-destaque-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(31, 138, 122, 0.12);
  border: 1.5px dashed var(--verde-agua);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.preco-antigo {
  font-size: 1.1rem;
  color: var(--grafite-claro);
  text-decoration: line-through;
  font-weight: 600;
}

.preco-novo {
  font-family: var(--font-titulo);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--laranja-colete);
  line-height: 1;
  margin: 0.2rem 0;
}

.preco-diferenca {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--verde-agua);
}

.modal-lista-bonus {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.modal-lista-bonus li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--grafite);
}

.modal-lista-bonus li svg {
  width: 17px;
  height: 17px;
  color: var(--verde-agua);
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-modal-aceitar {
  width: 100%;
  font-size: 1.3rem;
  padding: 1rem 1.5rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 8px 24px rgba(245, 124, 31, 0.4);
}

.link-continuar-basico {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--grafite-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.5rem;
  transition: color var(--transicao-rapida);
}

.link-continuar-basico:hover {
  color: var(--azul-rio);
}

/* ==========================================================================
   11. SEÇÃO GARANTIA (Fundo Areia)
   ========================================================================== */
.secao-garantia {
  background-color: var(--areia);
  padding: 3.5rem 0;
}

.garantia-wrapper {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--areia-card);
  border: 2px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--sombra-suave);
}

.escudo-garantia-svg {
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
  color: var(--verde-agua);
}

.titulo-garantia {
  font-size: 2rem;
  color: var(--azul-rio);
  margin-bottom: 0.85rem;
}

.texto-garantia {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--grafite);
}

/* ==========================================================================
   12. SEÇÃO PERGUNTAS FREQUENTES (Acordeão, Fundo Areia)
   ========================================================================== */
.secao-faq {
  background-color: var(--areia);
  padding: 1rem 0 4rem 0;
}

.faq-container {
  max-width: 780px;
  margin: 0 auto;
}

.lista-faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background-color: var(--branco);
  border: 1.5px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-pergunta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-corpo);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--azul-rio);
  cursor: pointer;
  min-height: 52px;
}

.faq-pergunta-btn:hover {
  background-color: #FAF8F2;
}

.faq-icone-seta {
  width: 22px;
  height: 22px;
  color: var(--verde-agua);
  transition: transform var(--transicao-media);
  flex-shrink: 0;
}

.faq-item.aberto .faq-icone-seta {
  transform: rotate(180deg);
}

.faq-resposta-conteudo {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao-media), padding var(--transicao-media);
  padding: 0 1.5rem;
}

.faq-item.aberto .faq-resposta-conteudo {
  max-height: 300px;
  padding: 0 1.5rem 1.35rem 1.5rem;
}

.faq-resposta-conteudo p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grafite-suave);
  margin-bottom: 0;
}

/* ==========================================================================
   13. SEÇÃO CTA FINAL (Fundo Azul-Rio)
   ========================================================================== */
.secao-cta-final {
  background-color: var(--azul-rio);
  color: var(--areia);
  padding: 4.5rem 0;
  text-align: center;
  border-top: 4px solid var(--verde-agua);
}

.cta-final-wrapper {
  max-width: 720px;
  margin: 0 auto;
}

.cta-final-titulo {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: var(--areia);
}

@media (min-width: 768px) {
  .cta-final-titulo {
    font-size: 3rem;
  }
}

.cta-final-wrapper .btn-compra {
  max-width: 440px;
  margin: 0 auto;
}

/* ==========================================================================
   14. RODAPÉ (Fundo Grafite, Texto Pequeno)
   ========================================================================== */
.rodape-principal {
  background-color: var(--grafite);
  color: #CCCCCC;
  padding: 3rem 0 5rem 0; /* Espaço extra para a barra mobile fixa */
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (min-width: 769px) {
  .rodape-principal {
    padding-bottom: 3rem;
  }
}

.rodape-container {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rodape-dados {
  font-weight: 500;
  color: #E0E0E0;
}

.rodape-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.rodape-links a {
  color: var(--areia);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transicao-rapida);
}

.rodape-links a:hover {
  color: var(--verde-agua);
}

.rodape-avisos {
  color: #999999;
  font-size: 0.85rem;
  border-top: 1px solid #333333;
  padding-top: 1.25rem;
}

.rodape-avisos p {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   PÁGINAS INSTITUCIONAIS E DE OBRIGADO
   ========================================================================== */
.secao-institucional {
  background-color: var(--areia);
  padding: 3.5rem 0;
  min-height: 70vh;
}

.institucional-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--branco);
  border: 2px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  padding: 2.5rem 1.75rem;
  box-shadow: var(--sombra-card);
}

@media (min-width: 640px) {
  .institucional-container {
    padding: 3.5rem;
  }
}

.aviso-modelo {
  background-color: #FFF8E1;
  border: 1px solid #FFE082;
  border-left: 5px solid #FFA000;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  color: #5D4037;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.institucional-container h1 {
  font-size: 2.25rem;
  color: var(--azul-rio);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}

.institucional-container h2 {
  font-size: 1.5rem;
  color: var(--azul-rio);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.institucional-container p,
.institucional-container li {
  font-size: 1.05rem;
  color: var(--grafite);
  line-height: 1.6;
}

.institucional-container ul {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--azul-rio);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.btn-voltar:hover {
  color: var(--verde-agua);
}

/* Obrigado Page */
.card-obrigado {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.icone-sucesso-svg {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.5rem auto;
  color: var(--verde-agua);
}

.passos-obrigado {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 2rem 0;
}

.passo-item-obrigado {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--areia-card);
  border: 1.5px solid var(--areia-escuro);
  border-radius: var(--raio-borda);
  padding: 1.25rem 1.5rem;
}

.numero-passo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--azul-rio);
  color: var(--areia);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.texto-passo {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--grafite);
}

.texto-passo strong {
  color: var(--azul-rio);
}

/* Animações simples */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SEÇÃO DEPOIMENTOS (Abinhas Limpas sem Poluição)
   ========================================================================== */
.secao-depoimentos {
  background-color: var(--areia);
  padding: 4rem 0;
  border-top: 1.5px solid var(--areia-escuro);
}

.depoimentos-cabecalho {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2rem auto;
}

.depoimentos-cabecalho .titulo-secao {
  color: var(--azul-rio);
  margin-bottom: 0.35rem;
}

.depoimentos-cabecalho p {
  color: var(--grafite-claro);
  font-size: 1.1rem;
  line-height: 1.45;
  margin-bottom: 0;
}

.depoimentos-tabs-wrapper {
  max-width: 820px;
  margin: 0 auto;
}

.depoimentos-tabs-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.depoimento-tab-btn {
  background-color: var(--branco);
  border: 1.5px solid var(--areia-escuro);
  border-radius: 24px;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--grafite);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  outline: none;
}

.depoimento-tab-btn:hover {
  border-color: var(--azul-rio);
  color: var(--azul-rio);
}

.depoimento-tab-btn.ativo {
  background-color: var(--azul-rio);
  border-color: var(--azul-rio);
  color: var(--areia);
  box-shadow: 0 4px 12px rgba(15, 46, 61, 0.18);
}

.depoimento-tab-card {
  background-color: var(--branco);
  border: 1.5px solid var(--areia-escuro);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow: 0 4px 18px rgba(15, 46, 61, 0.05);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.depoimento-tab-painel {
  display: none;
}

.depoimento-tab-painel.ativo {
  display: block;
  animation: tabFadeIn 0.25s ease-out;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.depoimento-texto-limpo {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--grafite);
  margin: 0 0 1rem 0;
  font-style: italic;
}

.depoimento-autor-linha {
  font-family: var(--font-corpo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul-rio);
  text-align: right;
}

@media (max-width: 600px) {
  .depoimento-tab-card {
    padding: 1.5rem 1.25rem;
  }
  .depoimento-tab-btn {
    padding: 0.45rem 0.95rem;
    font-size: 0.9rem;
  }
  .depoimento-texto-limpo {
    font-size: 0.98rem;
    line-height: 1.55;
  }
}