/* ==========================================================
   Empório Natural — Estilos customizados
   Complementa o Tailwind CDN com regras não cobertas
   por classes utilitárias.
   ========================================================== */


/* ----------------------------------------------------------
   0. DESIGN TOKENS — Proporção Áurea (φ = 1.618)
      Paleta Raízes, escala tipográfica e espaçamentos
      baseados na sequência de Fibonacci.
   ---------------------------------------------------------- */

:root {
  /* === Paleta Raízes === */
  --color-verde-oliva:   #5C7A3E;
  --color-verde-escuro:  #2E4A1E;
  --color-terracota:     #C27B4A;
  --color-terracota-hov: #A8633A;
  --color-marrom-raiz:   #4A3220;
  --color-creme:         #F5EFE0;
  --color-creme-escuro:  #EAE0CC;
  --color-branco:        #FFFFFF;
  --color-texto:         #1A1A1A;

  /* === Proporção Áurea === */
  --phi: 1.618;

  /* === Escala Tipográfica (base 16px × φ) === */
  --text-xs:   0.618rem;  /*  ~10px */
  --text-sm:   0.764rem;  /*  ~12px */
  --text-base: 1rem;      /*   16px */
  --text-md:   1.236rem;  /*  ~20px */
  --text-lg:   1.618rem;  /*  ~26px */
  --text-xl:   2.000rem;  /*   32px */
  --text-2xl:  2.618rem;  /*  ~42px */
  --text-3xl:  4.236rem;  /*  ~68px */

  /* === Escala Tipográfica Phi para Headings (√φ ≈ 1.272) === */
  --phi-text-base: 1rem;       /*  16px — body/p */
  --phi-text-xl:   1.25rem;    /*  20px — h6 */
  --phi-text-2xl:  1.625rem;   /*  26px — h5 */
  --phi-text-3xl:  2.0625rem;  /*  33px — h4 */
  --phi-text-4xl:  2.625rem;   /*  42px — h3 */
  --phi-text-5xl:  3.375rem;   /*  54px — h2 */
  --phi-text-6xl:  4.25rem;    /*  68px — h1 */

  /* === Espaçamentos Fibonacci (em px → rem) === */
  --space-1:  0.125rem;  /*   2px */
  --space-2:  0.1875rem; /*   3px */
  --space-3:  0.3125rem; /*   5px */
  --space-5:  0.5rem;    /*   8px */
  --space-8:  0.8125rem; /*  13px */
  --space-13: 1.3125rem; /*  21px */
  --space-21: 2.125rem;  /*  34px */
  --space-34: 3.4375rem; /*  55px */
  --space-55: 5.5rem;    /*  88px */
  --space-89: 8.9375rem; /* 143px */

  /* === Grid Proporção Áurea === */
  --col-maior: 61.8%;   /* coluna principal */
  --col-menor: 38.2%;   /* coluna secundária */

  /* === Raios de borda e transições === */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}


/* ----------------------------------------------------------
   0b. PROPORÇÃO ÁUREA — Regras Globais
   Tipografia, espaçamentos e grids aplicados via tokens phi.
   ---------------------------------------------------------- */

/* Body — line-height phi para ritmo vertical harmonioso */
body {
  font-size: var(--text-base);
  line-height: 1.618;
}

/* Escala tipográfica phi — mobile-first (√φ ≈ 1.272)
   Mobile:  h1=42  h2=33  h3=26  h4=20  h5=16  h6=16
   Desktop: h1=68  h2=54  h3=42  h4=33  h5=26  h6=20 */
h1 { font-size: var(--phi-text-4xl); line-height: 1.1;  font-weight: 800; }
h2 { font-size: var(--phi-text-3xl); line-height: 1.15; font-weight: 700; }
h3 { font-size: var(--phi-text-2xl); line-height: 1.2;  font-weight: 600; }
h4 { font-size: var(--phi-text-xl);  line-height: 1.25; font-weight: 600; }
h5 { font-size: var(--phi-text-base); line-height: 1.3; font-weight: 500; }
h6 { font-size: var(--phi-text-base); line-height: 1.4; font-weight: 500; }

@media (min-width: 768px) {
  h1 { font-size: var(--phi-text-5xl); }
  h2 { font-size: var(--phi-text-4xl); }
  h3 { font-size: var(--phi-text-3xl); }
  h4 { font-size: var(--phi-text-2xl); }
  h5 { font-size: var(--phi-text-xl);  }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--phi-text-6xl); }
  h2 { font-size: var(--phi-text-5xl); }
  h3 { font-size: var(--phi-text-4xl); }
  h4 { font-size: var(--phi-text-3xl); }
  h5 { font-size: var(--phi-text-2xl); }
  h6 { font-size: var(--phi-text-xl);  }
}

/* Parágrafos — largura máxima para leitura confortável */
section p {
  max-width: 65ch;
}

/* Seção — padding Fibonacci (grande — seções principais) */
.section-phi {
  padding-top: var(--space-55);
  padding-bottom: var(--space-55);
}

@media (min-width: 1024px) {
  .section-phi {
    padding-top: var(--space-89);
    padding-bottom: var(--space-89);
  }
}

/* Seção — padding Fibonacci (compacto — subpáginas) */
.section-phi-sm {
  padding-top: var(--space-34);
  padding-bottom: var(--space-34);
}

@media (min-width: 1024px) {
  .section-phi-sm {
    padding-top: var(--space-55);
    padding-bottom: var(--space-55);
  }
}

/* Grid Proporção Áurea — coluna maior (61.8%) à esquerda */
.grid-phi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-21);
}

@media (min-width: 1024px) {
  .grid-phi {
    grid-template-columns: 1.618fr 1fr;
  }
}

/* Grid Proporção Áurea — coluna maior (61.8%) à direita */
.grid-phi-reverse {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-21);
}

@media (min-width: 1024px) {
  .grid-phi-reverse {
    grid-template-columns: 1fr 1.618fr;
  }
}


/* ----------------------------------------------------------
   1. RESET / BASE
   ---------------------------------------------------------- */

/* Smooth scroll nativo como fallback (o Tailwind cuida via plugin) */
html {
  scroll-behavior: smooth;
}

/* Corpo: evitar overflow horizontal indesejado */
body {
  overflow-x: hidden;
}


/* ----------------------------------------------------------
   2. FOCO ACESSÍVEL
   Garante indicador de foco visível para navegação por teclado,
   sem conflitar com o estilo padrão do Tailwind.
   ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid #5C7A3E; /* verde-oliva */
  outline-offset: 3px;
  border-radius: 4px;
}


/* ----------------------------------------------------------
   3. ALPINE.JS — Evitar flash de conteúdo não inicializado
   ---------------------------------------------------------- */

[x-cloak] {
  display: none !important;
}


/* ----------------------------------------------------------
   4. HEADER — Backdrop blur com suporte a prefixo webkit
   ---------------------------------------------------------- */

header {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}


/* ----------------------------------------------------------
   5. HERO — Otimização de performance para animação GSAP
   ---------------------------------------------------------- */

/* Elementos animados pelo GSAP recebem will-change para
   facilitar composição na GPU. Removido automaticamente
   após a animação via GSAP (onComplete). */
.hero-tagline,
.hero-title,
.hero-subtitle,
.hero-ctas,
.scroll-indicator {
  will-change: transform, opacity;
}


/* ----------------------------------------------------------
   6. SCROLLBAR PERSONALIZADA (Webkit — Chrome, Edge, Safari)
   ---------------------------------------------------------- */

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #F5EFE0; /* creme */
}

::-webkit-scrollbar-thumb {
  background: #5C7A3E; /* verde-oliva */
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2E4A1E; /* verde-escuro */
}


/* ----------------------------------------------------------
   7. FONTES — Fallback para quando o Google Fonts não carrega
   ---------------------------------------------------------- */

.font-playfair {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.font-inter {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}


/* ----------------------------------------------------------
   8. UTILITÁRIOS GLOBAIS — usados em múltiplas seções
   ---------------------------------------------------------- */

/* Linha decorativa de seção (usada em H2 de seções) */
.section-divider {
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--color-terracota);
  border-radius: 99px;
  margin: var(--space-8) 0 var(--space-13); /* Fibonacci: 13px 0 21px */
}

/* Linha decorativa: alinhamento controlado via Tailwind mx-auto no HTML */


/* ----------------------------------------------------------
   9. BADGES DE MARKETPLACE — Seção Produtos
   ---------------------------------------------------------- */

.badge-ml,
.badge-tk,
.badge-sh,
.badge-wp {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.badge-ml,
.badge-tk,
.badge-sh,
.badge-wp {
  opacity: 0.9;
}

.badge-ml:hover,
.badge-tk:hover,
.badge-sh:hover,
.badge-wp:hover {
  opacity: 1;
}

/* Mercado Livre */
.badge-ml {
  background-color: #FFE600;
  color: #333;
}

/* TikTok */
.badge-tk {
  background-color: #010101;
  color: #fff;
}

/* Shopee */
.badge-sh {
  background-color: #EE4D2D;
  color: #fff;
}

/* WhatsApp */
.badge-wp {
  background-color: #25D366;
  color: #fff;
}

/* E-commerce próprio */
.badge-ec {
  background-color: #1a6fb0;
  color: #fff;
}

/* 99Food */
.badge-99f {
  background-color: #FF6600;
  color: #fff;
}


/* ----------------------------------------------------------
   10. SWIPER — Customização do carrossel de depoimentos
   ---------------------------------------------------------- */

/* Scroll contínuo — sem padding de paginação */
.depoimentos-swiper {
  padding-bottom: 0;
}

/* Slides com altura igual: wrapper stretch + slide auto */
.depoimentos-swiper .swiper-wrapper,
.produtos-swiper .swiper-wrapper,
.time-swiper .swiper-wrapper,
.amigos-swiper .swiper-wrapper {
  align-items: stretch;
}

.depoimentos-swiper .swiper-slide,
.produtos-swiper .swiper-slide,
.time-swiper .swiper-slide,
.amigos-swiper .swiper-slide {
  height: auto;
}

/* Scroll contínuo - ease linear */
.swiper-continuous-linear .swiper-wrapper {
  transition-timing-function: linear !important;
}


/* Pontos de paginação — cores da paleta Raízes */
.depoimentos-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #F5EFE0; /* creme */
  opacity: 0.40;
  transition: opacity 0.2s, transform 0.2s;
}

.depoimentos-swiper .swiper-pagination-bullet-active {
  background: #C27B4A; /* terracota */
  opacity: 1;
  transform: scale(1.25);
}


/* ----------------------------------------------------------
   11. LOGOS PARCEIROS — Seção Amigos do Empório
   Efeito: grayscale + opacity baixa por padrão
           → colorido + opacity total no hover
   ---------------------------------------------------------- */

.parceiro-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #F5EFE0;
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  min-height: 72px;
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 0.3s ease, opacity 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.parceiro-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  border-color: rgba(92, 122, 62, 0.25); /* verde-oliva/25 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.parceiro-logo:focus-visible {
  outline: 2px solid #5C7A3E;
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   12. UTILITÁRIOS GLOBAIS
   ---------------------------------------------------------- */

/* Container padrão de seção */
.section-container {
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .section-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

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