/* ============================================
   CONVITE SITE - ESTILOS PRINCIPAIS
   ============================================
   
   ÍNDICE:
   1. Variáveis CSS (Custom Properties)
   2. Fontes Personalizadas
   3. Reset e Estilos Base
   4. Header
   5. Hero Section
   6. Botões
   7. Seções Genéricas
   8. Seção Sobre
   9. Seção Recursos
   10. Seção Processo
   11. Seção Planos
   12. Seção Galeria
   13. CTA Final
   14. Rodapé
   15. Media Queries (Responsivo)
   
   ============================================ */


/* ============================================
   1. VARIÁVEIS CSS (DESIGN TOKENS)
   ============================================
   Todas as cores, fontes e valores reutilizáveis
   estão centralizados aqui para fácil manutenção.
   ============================================ */
:root {
  /* Cores principais */
  --cor-primaria: #7c0020;
  --cor-primaria-clara: #b7002e;
  --cor-primaria-hover: rgba(124, 0, 32, 0.15);
  --cor-primaria-sombra: rgba(239, 97, 112, 0.3);

  /* Cores de fundo */
  --cor-fundo: #000000;
  --cor-superficie: #111111;
  --cor-superficie-escura: rgba(0, 0, 0, 0.85);

  /* Cores de borda */
  --cor-borda: #222222;
  --cor-borda-clara: #333333;

  /* Cores de texto */
  --cor-texto: #ffffff;
  --cor-texto-secundario: #cccccc;
  --cor-texto-terciario: #aaaaaa;
  --cor-texto-claro: #bbbbbb;

  /* Tipografia */
  --fonte-sans: 'ConviteSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-serif: 'ConviteSerif', 'ConviteSans', serif;

  /* Espaçamentos */
  --espacamento-xs: 4px;
  --espacamento-sm: 8px;
  --espacamento-md: 12px;
  --espacamento-lg: 20px;
  --espacamento-xl: 32px;
  --espacamento-2xl: 60px;
  --espacamento-3xl: 80px;

  /* Layout */
  --largura-maxima: 1200px;
  --padding-lateral: 20px;

  /* Bordas arredondadas */
  --raio-pequeno: 12px;
  --raio-medio: 16px;
  --raio-grande: 20px;
  --raio-redondo: 999px;

  /* Transições */
  --transicao-padrao: all 0.3s ease;
  --transicao-rapida: all 0.2s ease;
}


/* ============================================
   2. FONTES PERSONALIZADAS (@font-face)
   ============================================
   Define as fontes customizadas do projeto:
   - ConviteSans: fonte sans-serif para textos
   - ConviteSerif: fonte serifada para títulos
   ============================================ */
@font-face {
  font-family: 'ConviteSans';
  src: url('../fonts/Inter_24pt-Light.ttf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ConviteSans';
  src: url('../fonts/Inter_18pt-Bold.ttf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ConviteSerif';
  src: url('../fonts/PlayfairDisplay.ttf') format('opentype');
  font-weight: 400;
  font-style: normal;
}


/* ============================================
   3. RESET E ESTILOS BASE
   ============================================
   Normaliza comportamentos padrão do navegador
   e define estilos globais do site.
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--fonte-sans);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  max-width: 100%;
  display: block;
}

/* ============================================
   4. HEADER (Barra de Navegação)
   ============================================
   Header fixo no topo com logo e botão do WhatsApp.
   Usa backdrop-filter para efeito de glassmorphism.
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--cor-superficie-escura);
  border-bottom: 1px solid var(--cor-borda);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--espacamento-md) var(--espacamento-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header__name {
  font-family: var(--fonte-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.site-header__contact .site-header__whats {
  padding: 10px var(--espacamento-lg);
  border-radius: var(--raio-redondo);
  border: 1px solid var(--cor-primaria);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: transparent;
  transition: var(--transicao-padrao);
}

.site-header__contact .site-header__whats:hover {
  background: var(--cor-primaria);
  color: var(--cor-texto);
}

/* ============================================
   5. HERO SECTION (Primeira Dobra)
   ============================================
   Seção principal com título, descrição,
   botões de ação e mockup do celular com vídeo.
   ============================================ */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 140px var(--espacamento-lg) var(--espacamento-3xl);
}

.hero__layout {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  display: flex;
  gap: var(--espacamento-2xl);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hero__content {
  flex: 1 1 320px;
}

.hero__media {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
}

.hero__eyebrow {
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cor-primaria);
  margin-bottom: 10px;
}

.hero__title {
  font-family: var(--fonte-serif);
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.hero__subtitle {
  font-size: 16px;
  color: var(--cor-texto-secundario);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 24px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacamento-md);
  margin-bottom: var(--espacamento-md);
}

.hero__note {
  font-size: 14px;
  color: var(--cor-texto-terciario);
}

/* ============================================
   6. BOTÕES (Sistema de Botões)
   ============================================
   Variantes: primary (destaque), ghost/outline (secundário)
   ============================================ */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--raio-redondo);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--transicao-padrao);
}

/* Botão primário - destaque principal */
.btn--primary {
  background: linear-gradient(145deg, var(--cor-primaria-clara), var(--cor-primaria));
  color: var(--cor-texto);
  box-shadow: 0 8px 25px var(--cor-primaria-sombra);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(239, 97, 112, 0.45);
}

/* Botão ghost/outline - secundário */
.btn--ghost,
.btn--outline {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-primaria);
}

.btn--ghost:hover,
.btn--outline:hover {
  background: var(--cor-primaria-hover);
}

/* MOCKUP DO CELULAR */
.hero-phone {
  max-width: 320px;
  text-align: center;
}

.hero-phone__frame {
  padding: 10px;
  border-radius: 28px;
  border: 1px solid #333;
  background: radial-gradient(circle at top,
      rgba(255, 255, 255, 0.06),
      transparent);
}

.hero-phone__video {
  width: 100%;
  border-radius: 24px;
  display: block;
}

.hero-phone__caption {
  margin-top: 10px;
  font-size: 12px;
  color: #bbb;
}

/* ============================================
   7. SEÇÕES GENÉRICAS
   ============================================
   Estilos base compartilhados por todas as seções.
   ============================================ */
.section {
  padding: var(--espacamento-3xl) var(--espacamento-lg);
}

.section__inner {
  max-width: var(--largura-maxima);
  margin: 0 auto;
}

.section__inner--center {
  text-align: center;
}

.section__title {
  font-family: var(--fonte-serif);
  font-size: 32px;
  margin-bottom: 16px;
}

.section__subtitle {
  font-size: 16px;
  color: var(--cor-texto-secundario);
  max-width: 680px;
  line-height: 1.7;
  margin-bottom: var(--espacamento-xl);
}

/* ============================================
   8. SEÇÃO SOBRE
   ============================================
   Apresenta o valor da marca com cards de destaque.
   ============================================ */
.section--sobre {
  background: var(--cor-superficie-escura);
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.section--sobre .section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}

.section__text-block {
  max-width: 600px;
}

.section__highlights {
  display: grid;
  gap: var(--espacamento-lg);
}

.highlight-card {
  background: var(--cor-superficie);
  border-radius: var(--raio-medio);
  padding: var(--espacamento-lg) 18px;
  border: 1px solid var(--cor-borda);
}

.highlight-card__title {
  font-size: 18px;
  margin-bottom: var(--espacamento-sm);
  color: var(--cor-texto);
}

.highlight-card__text {
  font-size: 14px;
  color: var(--cor-texto-secundario);
  line-height: 1.6;
}

/* ============================================
   9. SEÇÃO RECURSOS
   ============================================
   Grid de features/funcionalidades do convite.
   ============================================ */
.section--recursos {
  background: transparent;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--espacamento-xl);
}

.feature-box {
  background: var(--cor-superficie);
  border-radius: 18px;
  padding: 22px 18px;
  border: 1px solid var(--cor-borda);
  text-align: left;
}

.feature-box__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espacamento-md);
}

.feature-box__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-box__title {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--cor-texto);
}

.feature-box__text {
  font-size: 14px;
  color: var(--cor-texto-secundario);
  line-height: 1.6;
}

.section__cta-center {
  margin-top: var(--espacamento-xl);
  text-align: center;
}

.section__phrase {
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--cor-texto);
}

/* ============================================
   10. SEÇÃO PROCESSO (Como Funciona)
   ============================================
   Timeline com os 4 passos do processo.
   ============================================ */
.section--processo {
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--espacamento-xl);
}

.step-item {
  background: var(--cor-superficie);
  border-radius: var(--raio-medio);
  padding: var(--espacamento-lg) 18px;
  border: 1px solid var(--cor-borda);
  position: relative;
}

.step-item__number {
  position: absolute;
  top: var(--espacamento-md);
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: var(--cor-primaria);
  opacity: 0.6;
}

.step-item__title {
  font-size: 16px;
  margin-bottom: var(--espacamento-sm);
}

.step-item__text {
  font-size: 14px;
  color: var(--cor-texto-secundario);
  line-height: 1.6;
}

/* ============================================
   11. SEÇÃO PLANOS
   ============================================
   Cards de preços/planos com variante destaque.
   ============================================ */
.section--planos {
  background: transparent;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--espacamento-xl);
}

.plan-card {
  background: var(--cor-superficie);
  border-radius: var(--raio-grande);
  padding: 26px 22px;
  border: 1px solid var(--cor-borda-clara);
  display: flex;
  flex-direction: column;
  gap: var(--espacamento-md);
  height: 100%;
}

/* Card em destaque ("Mais escolhido") */
.plan-card--featured {
  border: 2px solid var(--cor-primaria);
  box-shadow: 0 8px 25px var(--cor-primaria-sombra);
}

.plan-card__tag {
  align-self: flex-start;
  padding: var(--espacamento-xs) 10px;
  border-radius: var(--raio-redondo);
  background: rgba(124, 0, 32, 0.2);
  color: #f3c0cf;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.plan-card__name {
  font-size: 22px;
  color: var(--cor-primaria);
  margin-bottom: var(--espacamento-xs);
}

.plan-card__description {
  font-size: 14px;
  color: var(--cor-texto-secundario);
  line-height: 1.6;
}

.plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--espacamento-sm) 0;
}

.plan-card__list li {
  font-size: 13px;
  color: #ddd;
  line-height: 1.6;
  margin-bottom: var(--espacamento-xs);
  position: relative;
  padding-left: 16px;
}

.plan-card__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cor-primaria);
}

.plan-card__example-link {
  margin-top: 6px;
  font-size: 12px;
  color: var(--cor-texto-secundario);
  text-decoration: underline;
}

/* ============================================
   12. SEÇÃO GALERIA
   ============================================
   Grid de imagens de inspiração/portfólio.
   ============================================ */
.section--galeria {
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacamento-lg);
  margin-top: var(--espacamento-xl);
}

.gallery-item {
  background: var(--cor-superficie);
  border-radius: var(--raio-medio);
  padding: 10px;
  border: 1px solid var(--cor-borda);
}

.gallery-item__image {
  display: block;
  width: 100%;
  border-radius: var(--raio-pequeno);
}


/* ============================================
   13. CTA FINAL
   ============================================
   Seção de chamada para ação no final da página.
   ============================================ */
.section--cta-final {
  background: transparent;
}


/* ============================================
   14. RODAPÉ (Footer)
   ============================================
   Rodapé com copyright e links sociais.
   ============================================ */
.site-footer {
  background-color: var(--cor-primaria);
  color: var(--cor-fundo);
  padding: var(--espacamento-lg);
}

.site-footer__inner {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 var(--espacamento-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.site-footer__social a {
  font-size: 14px;
  text-decoration: underline;
}

/* ============================================
   15. MEDIA QUERIES (Responsivo)
   ============================================
   Adaptações de layout para diferentes tamanhos
   de tela: tablet, celular comum e celular pequeno.
   ============================================ */

/* Tablet / Celular grande (até 1024px) */
@media (max-width: 1024px) {
  .hero {
    padding: 120px 16px 60px;
  }

  .hero__layout {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }

  .hero__media {
    justify-content: flex-start;
  }

  .section {
    padding: 60px 16px;
  }

  .section--sobre .section__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* até ~768px (celular comum) */
@media (max-width: 768px) {
  .site-header__inner {
    padding: 10px 14px;
  }

  .site-header__name {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .site-header__contact .site-header__whats {
    padding: 8px 14px;
    font-size: 12px;
  }

  .hero {
    padding-top: 110px;
    padding-bottom: 50px;
  }

  .hero__layout {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .hero__content {
    flex: 1 1 auto;
  }

  .hero__title {
    font-size: 28px;
  }

  .hero__subtitle {
    font-size: 14px;
    max-width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__note {
    font-size: 13px;
  }

  .hero-phone {
    max-width: 260px;
  }

  .section__title {
    font-size: 24px;
  }

  .section__subtitle {
    font-size: 14px;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps-flow {
    grid-template-columns: 1fr 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* até ~480px (celular pequeno) */
@media (max-width: 480px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 40px;
  }

  .hero__title {
    font-size: 24px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .features-grid,
  .steps-flow,
  .plans-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 50px 16px;
  }

  /* se quiser, pode tirar o header fixo no bem pequeno */
  /* .site-header { position: static; } */
}