/* ===================================================
   CORES E VARIÁVEIS GLOBAIS
   =================================================== */
:root {
  --cor-primaria: #024653;      /* Cor principal (azul escuro) */
  --cor-primaria-dark: #01323c; /* Variação mais escura da cor principal */
  --cor-dourado: #D4AF37;       /* Cor destaque (dourado) */
  --cor-preto: #121212;         /* Cor para fundos escuros */
  --cor-branco: #FFFFFF;        /* Cor para textos claros */
  
  /* Tamanhos de fonte personalizáveis */
  --font-titulo-grande: 35px;     /* Título principal (h1) */
  --font-titulo-medio: 30px;      /* Títulos de seção (h2) */
  --font-titulo-pequeno: 24px;    /* Subtítulos (h3) */
  --font-texto-grande: 18px;      /* Textos destacados, descrições */
  --font-texto-normal: 16px;      /* Texto principal do site */
  --font-texto-pequeno: 14px;     /* Texto de apoio, legendas */
  --font-texto-menor: 12px;       /* Notas de rodapé, detalhes */
}

/* ===================================================
   LOGO
   =================================================== */
.logo-container {
  /* Definir altura e largura máxima */
  height: 60px; /* Ajuste este valor conforme necessário */
  max-width: 200px; /* Ajuste conforme o tamanho da sua logo */
  display: flex;
  align-items: center;
}

.logo-image {
  /* Garantir que a imagem mantenha proporções */
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* Mantém a proporção sem cortar a imagem */
  height: auto; /* Importante para manter a proporção */
}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
  .logo-container {
    height: 40px; /* Logo menor em dispositivos móveis */
  }
}

/* ===================================================
   CLASSES DE TEXTO E CORES
   =================================================== */
/* Cores de texto */
.text-dourado {
  color: var(--cor-dourado); /* Usado em títulos e elementos de destaque */
}

.text-preto {
  color: var(--cor-preto); /* Usado em textos sobre fundos claros */
}

/* Cores de fundo */
.bg-dourado {
  background-color: var(--cor-dourado); /* Usado em botões e contêineres de ícones */
}

/* ===================================================
   ANIMAÇÕES E TRANSIÇÕES
   =================================================== */
/* Efeito de escala ao passar o mouse (botões e cards) */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Animação de pulsar (usado em badges e elementos de destaque) */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-pulse {
  animation: pulse 3s infinite;
}

/* Animação de background em movimento */
@keyframes moveBg {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}
.vagas-badge {
  position: static;
  margin: 16px auto;
  max-width: max-content;
  display: block;
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 10;
  font-size: var(--font-texto-pequeno);
  background-color: rgba(0, 0, 0, 0.7);
  /* Aplica o efeito de glow animado */
  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 1);
  }
}


/* ===================================================
   BACKGROUND E GRADIENTES
   =================================================== */
/* Gradiente do header principal */
.bg-hero {
  background: linear-gradient(135deg, #024653, #01323c);
  animation: bgAnimation 10s infinite alternate;
}

@keyframes bgAnimation {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.overlay-glass {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* Gradiente da seção de estatísticas */
.bg-stats {
  background: linear-gradient(to bottom, var(--cor-preto), var(--cor-primaria));
}

/* Gradiente da seção de preços */
.bg-pricing {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-dark) 100%);
}

/* Gradiente para botões CTA */
.btn-gradient {
  background: linear-gradient(to right, #d4af37, #b8971f);
}

/* Gradiente para botão do WhatsApp */
.whatsapp-gradient {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

/* Bordas translúcidas para cards */
.border-translucent {
  border: 1px solid rgba(255,255,255,0.1);
}

/* ===================================================
   COMPORTAMENTO DE SCROLL
   =================================================== */
html {
  scroll-behavior: smooth; /* Scroll suave para navegação */
}

/* ===================================================
   INDICADOR DE VAGAS DISPONÍVEIS
   =================================================== */
/* Badge de vagas limitadas - topo da página */



/* Barra de progresso das vagas */
/* Progresso das vagas */
.vagas-progress {
  height: 100%;
  width: 70%; /* Esta é a largura da barra que precisa ser ajustada */
  background: linear-gradient(90deg, #E53935, var(--cor-dourado));
}

/* ===================================================
   ELEMENTOS COM ÍCONES
   =================================================== */
/* Itens de lista com ícones (benefícios, features) */
.icon-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: var(--font-texto-normal); /* Ajustável */
}

/* Contêiner para ícones circulares */
.icon-container {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--cor-dourado);
}

/* Texto ao lado dos ícones */
.icon-text {
  flex: 1;
  font-size: var(--font-texto-normal); /* Ajustável */
}

/* ===================================================
   SEÇÃO DE OFERTA E PREÇO
   =================================================== */
/* Card principal da oferta */
.pricing-card {
  padding: 32px;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(128, 128, 128, 0.5);
  max-width: 100%;
  margin: 0 auto;
}

/* Contêiner de preço com moeda, valor e multiplicador */
.price-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* Símbolo da moeda (R$) */
.price-currency {
  font-size: var(--font-texto-grande); /* Ajustável */
  color: var(--cor-dourado);
  align-self: flex-start;
  margin-top: 12px;
}

/* Valor principal do preço (834) */
.price-main {
  font-size: 72px; /* Tamanho fixo ou use --font-titulo-grande */
  font-weight: bold;
  color: var(--cor-dourado);
  margin: 0 8px;
  line-height: 1;
}

/* Informações adicionais de preço (x3, à vista) */
.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-end;
  margin-bottom: 8px;
}

/* Multiplicador de preço (x3) */
.price-multiplier {
  color: var(--cor-dourado);
  font-size: var(--font-texto-grande); /* Ajustável */
}

/* Preço alternativo (à vista) */
.price-alt {
  font-size: var(--font-texto-pequeno); /* Ajustável */
  color: rgba(255, 255, 255, 0.6);
}

/* Badge de exclusividade para médicos */
.exclusive-badge {
  background-color: white;
  color: var(--cor-preto);
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 9999px;
  display: inline-block;
  margin-bottom: 32px;
  font-size: var(--font-texto-pequeno); /* Ajustável */
}

/* Contêiner de benefícios */
.benefits-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

/* Item de benefício individual */
.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-texto-normal); /* Ajustável */
}

/* Contêiner para o indicador de vagas restantes */
.vagas-container {
  margin-bottom: 32px;
}

/* Barra para indicador de vagas */
.vagas-bar {
  height: 8px;
  width: 100%;
  max-width: 400px;
  margin: 8px auto 0;
  background-color: rgba(75, 75, 75, 0.5);
  border-radius: 9999px;
  overflow: hidden;
}

/* Contêiner da garantia */
.garantia-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0 auto 32px;
  max-width: 400px;
}

/* Ícone da garantia */
.garantia-icon {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Texto da garantia */
.garantia-texto {
  flex: 1;
}

/* Título da garantia */
.garantia-titulo {
  font-weight: bold;
  color: var(--cor-dourado);
  font-size: var(--font-texto-normal); /* Ajustável */
}

/* Descrição da garantia */
.garantia-descricao {
  opacity: 0.8;
  font-size: var(--font-texto-pequeno); /* Ajustável */
}

/* Botão de chamada para ação */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  border-radius: 9999px;
  font-size: var(--font-texto-grande); /* Ajustável */
  font-weight: bold;
  color: white;
  background: linear-gradient(to right, var(--cor-dourado), var(--cor-dourado-dark, #b8971f));
  transition: transform 0.3s ease;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.cta-button:hover {
  transform: scale(1.05);
}

/* ===================================================
   CONTADOR REGRESSIVO
   =================================================== */
/* Contêiner do contador */
.countdown-container {
  max-width: 100%;
  margin: 0 auto;
}

/* Caixas do contador (dias, horas, minutos) */
.countdown-box {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  width: 64px;
}

/* Número do contador */
.countdown-number {
  font-size: var(--font-titulo-pequeno); /* Ajustável */
  font-weight: bold;
  color: var(--cor-dourado);
}

/* Texto do contador (Dias, Horas, etc) */
.countdown-label {
  font-size: var(--font-texto-menor); /* Ajustável */
  text-transform: uppercase;
}

/* Texto completo do contador */
.countdown-text {
  font-size: var(--font-texto-normal); /* Ajustável */
}

/* ===================================================
   RESPONSIVIDADE PARA MOBILE
   =================================================== */
@media (max-width: 768px) {
  /* Ajustando tamanhos de fonte para mobile */
  :root {
    --font-titulo-grande: 20px;   /* Menor em mobile */
    --font-titulo-medio: 16px;    /* Menor em mobile */
    --font-titulo-pequeno: 12px;  /* Menor em mobile */
    --font-texto-grande: 13px;    /* Menor em mobile */
    --font-texto-normal: 14px;    /* Menor em mobile */
    --font-texto-pequeno: 12px;   /* Menor em mobile */
    --font-texto-menor: 12px;     /* Menor em mobile */
  }
  
  /* Ajustar vagas badge para mobile */


  /* Melhorar alinhamento de itens com ícones em mobile */
  .icon-list-item {
    padding-left: 0;
    text-align: left;
  }
  
  /* Garantir que as imagens mantenham proporção */
  .aspect-square img {
    height: 100%;
    object-fit: cover;
  }
  
  /* Ajustes para contêiner de preço em mobile */
  .price-container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  /* Preço menor em mobile */
  .price-main {
    font-size: 60px;
  }
  
  /* Benefícios em coluna em mobile */
  .benefits-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Item de benefício ocupando largura total */
  .benefit-item {
    width: 100%;
    justify-content: flex-start;
  }
  
  /* Garantia centralizada em mobile */
  .garantia-container {
    text-align: center;
  }
  
  /* Melhorar espaçamento em mobile */
  .py-16 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  /* Garantir que os botões fiquem bons em telas pequenas */
  .btn-full-mobile {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  /* Ajuste para ícone da garantia em mobile */
  .garantia-icon {
    margin-bottom: 16px;
    margin-right: 0;
  }
}

/* Media query para tablets */
@media (min-width: 640px) {
  .garantia-container {
    flex-direction: row;
    text-align: left;
  }
  
  .garantia-icon {
    margin-bottom: 0;
    margin-right: 16px;
  }
}

/* ===================================================
   BOTÃO AMARELO CTA (CHAMADA PARA AÇÃO)
   =================================================== */
.botao-cta-amarelo {
  /* Cor do texto */
  color: white;
  
  /* Efeito de escala no hover */
  transition: all 0.3s ease;
  
  /* Fundo com gradiente amarelo-marrom */
  background: linear-gradient(to right, #CA8A04, #92400E); /* yellow-600 to yellow-800 */
  
  /* Flexbox para alinhamento */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* gap-3 equivale a aproximadamente 12px */
  
  /* Centralizar no contêiner */
  margin-left: auto;
  margin-right: auto;
  
  /* Estilos adicionais para boa aparência */
  padding: 15px 30px;
  border-radius: 50px; /* para botão arredondado */
  font-weight: bold;
  font-size: var(--font-texto-grande);
  border: none;
  cursor: pointer;
  text-decoration: none; /* caso seja usado em uma tag <a> */
}

/* Efeito de hover */
.botao-cta-amarelo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ===================================================
   BOTÕES DE CHAMADA PARA AÇÃO (CTA)
   =================================================== */

/* 1. Botão "Ver Oferta" (na navegação) */
.botao-ver-oferta {
  /* Cor do texto */
  color: white;
  
  /* Efeito de escala no hover */
  transition: all 0.3s ease;
  
  /* Fundo com MESMO gradiente amarelo-marrom */
  background: linear-gradient(to right, #CA8A04, #92400E); /* yellow-600 to yellow-800 */
  
  /* Flexbox para alinhamento */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* Estilos adicionais para boa aparência */
  padding: 8px 20px;
  border-radius: 50px; /* para botão arredondado */
  font-weight: bold;
  font-size: var(--font-texto-normal);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
@media (max-width: 768px) {
  /* Remova esta propriedade do botão de navegação */
  .botao-ver-oferta {
    /* Largura automática em vez de 100% */
    width: auto;
    
    /* Tamanho reduzido para caber melhor */
    font-size: 12px;
    padding: 6px 12px;
    
    /* Garantir que o botão não cresça demais */
    max-width: 100px;
    white-space: nowrap;
  }
.botao-ver-oferta:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.botao-quero-saber-mais {
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: bold;
  font-size: var(--font-texto-grande);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap; /* Impede quebra de linha */
  width: 100%; /* Para mobile */
  background: linear-gradient(to right, #CA8A04, #92400E);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .botao-quero-saber-mais {
    width: auto; /* Ajusta a largura no desktop */
  }
}


.botao-quero-saber-mais:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse {
  animation: pulse 2s infinite; /* Ajuste a duração (2s) a gosto */
}


/* Adaptações para mobile */
@media (max-width: 768px) {
    
  .botao-ver-oferta {
    font-size: 14px;
    padding: 8px 16px;
	width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#countdown-text {
  display: inline-block;
  animation: fadeInUp 2s ease-out;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}
/* --- Ajuste de fonte para os títulos "OFERTA EXCLUSIVA..." e "IMPACTO TANGÍVEL..." --- */
/* Essa regra sobrescreve as classes Tailwind se necessário */
h2.text-dourado {
  font-size: 1.4rem; /* Tamanho para mobile */
}
@media (min-width: 768px) {
  h2.text-dourado {
    font-size: 3rem; /* Tamanho para desktop */
  }
}

/* --- Efeito de digitação para o título "SEU SITE COMPLETO INCLUI" --- */
#features-title {
  overflow: hidden;            /* Esconde o texto que ainda não foi "digitado" */
   /*white-space: relative;*/         /* Garante que o texto fique em uma única linha */
  border-right: 2px solid #D4AF37; /* Simula o cursor de digitação */
  width: 0;                    /* Começa com 0 largura para o efeito */
  display: inline-block;       /* Necessário para que a animação de width funcione */
  animation: typing 12s steps(30, end) forwards, blink-caret 0.99s step-end infinite;
}

/* Keyframes para o efeito de digitação */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Keyframes para o cursor piscante */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #D4AF37; }
}



/* Classe personalizada para o título de oferta */


.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background-color: #000; /* Ajuste a cor de fundo se desejar */
  padding: 1rem 0;
}

.marquee {
  display: inline-block;
  /* A largura é grande para conter as repetições do texto */
  animation: scroll 10s linear infinite;
}

.marquee span {
  font-size: 1rem;        /* Ajuste o tamanho da fonte conforme sua preferência */
  font-weight: bold;
  color: #D4AF37;         /* Cor dourada */
}