/* ============================================================
   VARIÁVEIS GLOBAIS DO TEMA
   Definidas em :root para serem usadas em todo o site via var()
   ============================================================ */
:root {
  /* ===== CORES PRINCIPAIS DA MARCA ===== */
  --primary: #482c2f; /* Cor principal: vinho escuro (botões, links, destaques) */
  --primary-hover: #382325; /* Tom mais escuro pro hover de botões primary */
  --primary-active: #251719; /* Tom ainda mais escuro pro estado clicado */

  --secondary: #24242b; /* Cor secundária: cinza-azulado escuro */
  --secondary-hover: #373737; /* Hover do secondary */
  --secondary-active: #1d1d1d; /* Active do secondary */

  /* ===== CORES DE AÇÃO ===== */
  --green: #00b32d; /* Verde do botão "Adicionar ao carrinho" e cupom */
  --green-hover: #0b8b2b; /* Verde mais escuro no hover */
  --green-active: #0a7023; /* Verde escuro no clique */

  /* ===== TONS DE CINZA ===== */
  --gray: #e6e6e6; /* Cinza padrão (bordas, divisores) */
  --gray-hover: #e1e1e1; /* Cinza no hover */
  --gray-active: #dadada; /* Cinza no clique */
  --gray-light: #f3f3f3; /* Cinza bem claro (fundos sutis) */
  --gray-light-hover: #e8e8e8; /* Hover do cinza claro */
  --gray-light-active: #e2e2e2; /* Active do cinza claro */
  --white: #f0efef; /* "Branco" off-white usado em fundos de busca */

  /* ===== HEADER (cabeçalho do site) ===== */
  --header-topbar-background-color: var(--primary); /* Fundo da barra superior (vinho) */
  --header-topbar-text-color: #ffffff; /* Texto branco na topbar */
  --header-topbar-icon-color: #ffffff; /* Ícones brancos na topbar */
  --header-background-color: #ffffff; /* Fundo branco do header principal */
  --header-border-color: #ffffff; /* Borda invisível (mesma cor do fundo) */
  --header-color-text: var(--text); /* Cor padrão do texto no header */
  --header-svg-color: var(--primary); /* Cor dos ícones SVG (carrinho, busca) */
  --header-svg-width: 22px; /* Largura dos ícones do header */
  --header-svg-height: 22px; /* Altura dos ícones do header */
  --header-search-background-color: var(--white); /* Fundo da caixa de busca */
  --header-search-background-color-focus: var(--gray); /* Fundo da busca quando focada */
  --header-search-color: var(--text); /* Cor do texto digitado na busca */
  --header-menu-background: #fff; /* Fundo do menu de navegação */
  --header-menu-color-text: var(--text); /* Cor dos itens do menu */
  --header-menu-color-text-hover: var(--text); /* Cor do item do menu no hover */
  --header-menu-mobile-color-text: var(--text); /* Cor do menu em mobile */
  --header-menu-icon-color: var(--text); /* Cor dos ícones do menu */
  --header-menu-mobile-icon-color: var(--text); /* Cor dos ícones do menu mobile */
  --header-menu-font-size: 16px; /* Tamanho da fonte do menu */
  --header-menu-text-height: 78px; /* Altura da linha do menu */

  /* ===== FOOTER (rodapé do site) ===== */
  --footer-background-color: #fff; /* Fundo branco do footer */
  --footer-border-color: #dad7d7; /* Cor das bordas/divisores do footer */
  --footer-color-text: var(--text-gray); /* Cor cinza do texto do footer */
  --footer-space: 40px; /* Espaçamento interno do footer */

  /* ===== TIPOGRAFIA ===== */
  --font-primary: "Karla", sans-serif; /* Fonte principal do site */

  /* ===== BOTÕES PADRÃO ===== */
  --btn-primary: var(--primary); /* Botão principal: vinho */
  --btn-primary-hover: var(--primary-hover); /* Hover do botão principal */
  --btn-primary-active: var(--primary-active); /* Active do botão principal */
  --btn-secondary: var(--secondary); /* Botão secundário: cinza escuro */
  --btn-secondary-hover: var(--secondary-hover); /* Hover do secundário */
  --btn-secondary-active: var(--secondary-active); /* Active do secundário */

  /* ===== BOTÕES DA VITRINE DE PRODUTOS ===== */
  --btn-product-thumb-purchase: var(--primary); /* Botão "Comprar" na vitrine */
  --btn-product-thumb-purchase-hover: var(--primary-hover); /* Hover do "Comprar" */
  --btn-product-thumb-purchase-active: var(--primary-active); /* Active do "Comprar" */
  --btn-product-thumb-purchase-color: #fff; /* Texto branco do botão */
  --btn-product-thumb-view: #eee; /* Botão "Ver" na vitrine (cinza) */
  --btn-product-thumb-view-hover: #f6f6f6; /* Hover do "Ver" */
  --btn-product-thumb-view-active: #f1f1f1; /* Active do "Ver" */
  --btn-product-thumb-view-color: #121212; /* Texto preto do botão "Ver" */
  --btn-product-thumb-radius: 4px; /* Cantos arredondados dos botões da vitrine */

  /* ===== BOTÃO ADICIONAR AO CARRINHO ===== */
  --btn-add-cart: var(--green); /* Cor verde do botão "Adicionar ao carrinho" */
  --btn-add-cart-hover: var(--green-hover); /* Hover do botão verde */
  --btn-add-cart-active: var(--green-active); /* Active do botão verde */
  --btn-add-cart-color: #fff; /* Texto branco no botão verde */

  /* ===== ESPAÇAMENTOS DA PÁGINA DE PRODUTO ===== */
  --spacing-sections-product: 40px; /* Espaçamento entre seções na página de produto */
  --spacing-product-column-right: 24px; /* Espaço da coluna da direita (info do produto) */
  --product-row-x: 24px; /* Espaçamento horizontal da linha de produto */
  --product-row-y: 24px; /* Espaçamento vertical da linha de produto */
  --product-images-x: 4px; /* Espaçamento horizontal entre imagens */
  --product-images-y: 4px; /* Espaçamento vertical entre imagens */

  /* ===== BOTÕES DE VARIAÇÃO (tamanho, cor, etc.) ===== */
  --variant-button-background-color: #fff; /* Fundo branco padrão */
  --variant-button-color: var(--text); /* Cor do texto */
  --variant-button-border-color: #dad7d7; /* Cor da borda padrão */
  --variant-button-selected-background-color: var(--primary); /* Fundo da variação selecionada */
  --variant-button-selected-color: #fff; /* Texto branco quando selecionada */
  --variant-button-selected-border-color: var(--primary); /* Borda da variação selecionada */
  --variant-button-border-radius: var(--border-radius-default); /* Cantos arredondados */

  /* ===== BORDAS ARREDONDADAS ===== */
  --border-radius-default: 4px; /* Raio padrão (botões, inputs) */
  --btn-border-radius: var(--border-radius-default); /* Raio dos botões */
  --input-border-radius: var(--border-radius-default); /* Raio dos inputs */

  /* ===== CONFIGURAÇÕES GERAIS ===== */
  --products-gutter-x: 8px; /* Espaço horizontal entre produtos da vitrine */
  --products-gutter-y: 8px; /* Espaço vertical entre produtos da vitrine */
  --product-thumb-spacing: 4px; /* Espaçamento dentro do card de produto */
  --plyr-color-main: var(--primary); /* Cor do player de vídeo (controla play, barra) */
  --spacing-sections-home: 40px; /* Espaço entre seções na home */
  --text: #151414; /* Cor preta principal do texto */
  --text-gray: #6a6262; /* Cor cinza pra textos secundários */
  --background: #fff; /* Cor de fundo geral do site */
  --container-xxl: 1680px; /* Largura máxima do container */
  --container-small: var(--container-xxl); /* Container "pequeno" (igual o xxl) */
  --container-large: 1920px; /* Container largo (full HD) */
  --logo-max-height: 100px; /* Altura máxima da logo */
}

/* Em telas mobile (até 991px), reduz alguns espaçamentos pra tela ficar compacta */
@media (max-width: 991px) {
  :root {
    --spacing-sections-home: 36px; /* Reduz espaço entre seções na home */
    --footer-space: 24px; /* Reduz espaço interno do footer */
    --logo-max-height: 85px; /* Logo um pouco menor */
  }
}

/* ============================================================
   HEADER
   Personalizações do cabeçalho do site
   ============================================================ */

/* Adiciona um respiro interno na logo (impede que ela cole nas bordas) */
#header .logo {
  padding: 5px;
}

/* ============================================================
   BARRA DO CUPOM (.coupon-bar)
   "10% OFF na primeira compra com o cupom: PRIMEIRACOMPRA [COPIAR]"
   ============================================================ */

/* Fundo branco com texto preto e padding interno */
.coupon-bar {
  background: #fff;
  color: #000;
  font-weight: 500; /* Fonte semi-bold */
  padding: 16px; /* Espaço interno */
}

/* Aplica margem negativa SÓ na home pra encostar no slideshow acima
   (na página de produto fica com espaçamento natural) */
#common-home .coupon-bar {
  margin-top: calc(var(--spacing-sections-home) * -1);
}

/* Espaçamento da barra do cupom na página de produto
   (sem isso, a barra cola no botão "Comprar pelo WhatsApp" acima) */
#product-product .coupon-bar {
  margin-top: 0.5px;
}

/* Texto da esquerda da barra ("10% OFF na primeira compra...") */
.coupon-bar .coupon-text {
  font-weight: 500;
  color: #000;
}

/* Wrapper que envolve cupom + botão — cria o efeito "pílula" verde
   :has(> #coupon-name) seleciona só o div que tem #coupon-name como filho direto */
.coupon-bar .d-flex.gap-2:has(> #coupon-name) {
  gap: 0 !important; /* Remove o gap default pra cupom e botão ficarem colados */
  border: 1.5px solid var(--green); /* Borda verde da pílula */
  border-radius: 999px; /* Cantos totalmente arredondados (formato pílula) */
  padding: 3px; /* Pequeno respiro interno */
  background: #fff; /* Fundo branco */
  overflow: hidden; /* Esconde qualquer "vazamento" do conteúdo */
  flex: 0 0 auto; /* Não estica, fica do tamanho do conteúdo */
}

/* Nome do cupom "PRIMEIRACOMPRA" — lado esquerdo da pílula */
#coupon-name {
  background: #fff !important; /* Fundo branco */
  color: #000 !important; /* Texto preto */
  border: none !important; /* Remove qualquer borda */
  border-radius: 999px 0 0 999px !important; /* Arredonda só os cantos da esquerda */
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important; /* Negrito */
  letter-spacing: 0.5px; /* Espaço entre letras */
  display: inline-flex;
  align-items: center;
}

/* Botão COPIAR — lado direito da pílula (verde sólido) */
#coupon-copy.btn {
  background: var(--green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important; /* Pílula completa (cantos todos arredondados) */
  padding: 8px 28px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer; /* Cursor de "clicável" */
  transition: background 0.2s ease; /* Animação suave na mudança de cor */
  text-transform: uppercase; /* Texto em CAIXA ALTA */
}

/* Verde mais escuro quando passa o mouse */
#coupon-copy.btn:hover {
  background: var(--green-hover) !important;
}

/* Verde ainda mais escuro quando clica */
#coupon-copy.btn:active {
  background: var(--green-active) !important;
}

/* ============================================================
   SEÇÃO "SOBRE NÓS" (.about-us)
   Em desktop: foto à esquerda, texto à direita (invertido do padrão)
   ============================================================ */

/* Aplica só em telas a partir de 992px (desktop)
   Em mobile mantém o layout natural empilhado */
@media (min-width: 992px) {
  /* row-reverse inverte a ordem das colunas:
	   col-lg-5 (texto) vai pro fim, col-lg-7 (foto) vai pro começo */
  .about-us .row {
    flex-direction: row-reverse;
  }

  /* Foto maior (até 700px de largura) ocupando bem o espaço da coluna */
  .about-us .col-lg-7 .img-fluid {
    width: 100%;
    max-width: 700px;
    height: auto; /* Mantém proporção original */
  }

  /* Aumenta o tamanho do texto do parágrafo pra leitura confortável */
  .about-us .col-lg-5 {
    font-size: 17px;
    line-height: 1.7; /* Mais espaço entre linhas */
  }

  /* Títulos da seção sobre maiores e com presença */
  .about-us .col-lg-5 h1,
  .about-us .col-lg-5 h2,
  .about-us .col-lg-5 h3 {
    font-size: 32px;
    line-height: 1.2; /* Linhas mais juntas pra título compacto */
  }
}

/* ============================================================
   DEPOIMENTOS (.depoiments)
   Cards de avaliação com foto + nome + estrelas no topo
   ============================================================ */

/* Card individual do depoimento */
.depoiments .depoiments-thumb {
  text-align: left; /* Texto alinhado à esquerda */
  padding: 24px; /* Espaço interno */
  background: #fff; /* Fundo branco */
  border-radius: 12px; /* Cantos suavemente arredondados */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* Sombra leve pra sensação de elevação */
  border: 1px solid #f0f0f0; /* Borda quase invisível pra definir o card */
}

/* Bloco no topo: foto à esquerda + (nome + estrelas) à direita */
.depoiments .depoiment-author {
  display: flex;
  align-items: center; /* Alinha verticalmente foto e textos */
  gap: 12px; /* Espaço entre a foto e o bloco de texto */
  margin-bottom: 16px; /* Espaço antes do texto do depoimento */
}

/* Foto circular do depoente */
.depoiments .depoiment-photo {
  width: 56px !important; /* Tamanho fixo (!important pra garantir) */
  height: 56px !important;
  min-width: 56px; /* Impede de "achatar" se nome for grande */
  border-radius: 50%; /* Circular */
  object-fit: cover; /* Preenche o círculo sem distorcer */
  flex-shrink: 0; /* Não encolhe quando o espaço diminui */
  display: block;
}

/* Coluna que agrupa nome + estrelas (empilhados verticalmente) */
.depoiments .depoiment-author-info {
  display: flex;
  flex-direction: column; /* Empilha verticalmente */
  gap: 4px; /* Pequeno espaço entre nome e estrelas */
  text-align: left;
}

/* Nome do depoente */
.depoiments .depoiment-name {
  margin: 0 !important; /* Remove margem default do <h3> */
  font-size: 16px;
  font-weight: 600; /* Semi-bold */
  color: #151414;
  line-height: 1.2;
}

/* Container das estrelas — alinhadas à esquerda em amarelo dourado */
.depoiments .depoiment-stars {
  text-align: left;
  color: #ffb800; /* Amarelo dourado padrão de avaliação */
  font-size: 14px;
  line-height: 1; /* Sem espaço extra acima/abaixo */
}

/* Força a cor amarela nos ícones de estrela (preenchidas e vazias) */
.depoiments .depoiment-stars .bi-star,
.depoiments .depoiment-stars .bi-star-fill {
  color: #ffb800;
}

/* Texto do depoimento — abaixo do bloco do autor */
.depoiments .depoiment {
  color: #6a6262; /* Cinza pra hierarquia visual (menor que o nome) */
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0; /* Espaço só embaixo */
  text-align: left;
}

/* Link "Leia mais..." discreto no rodapé do card */
.depoiments .readmore {
  font-size: 13px;
  color: #6a6262;
  text-align: left;
  cursor: pointer;
  margin-top: 8px;
}

/* No hover muda pra cor primary (vinho) chamando atenção */
.depoiments .readmore:hover {
  color: var(--primary);
}

/* ============================================================
   SEÇÃO "GARANTIAS DO CLIENTE" (#warranty-customer)
   Faixa com ícones: Compra segura / Entrega rápida / Produtos de qualidade
   ============================================================ */

/* Faixa horizontal com fundo branco gelo (off-white) */
#warranty-customer {
  background: #f7f7f5; /* Branco levemente "sujo" pra destacar do branco puro */
  padding: 32px 0; /* Padding vertical: 32px em cima e embaixo */
}

/* Container dos blocos: layout flex centralizado e responsivo */
#warranty-customer .blocks {
  display: flex;
  flex-wrap: wrap; /* Quebra linha automaticamente se faltar espaço */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Alinha verticalmente */
  gap: 48px; /* Espaço generoso entre blocos */
}

/* Cada bloco individual (ícone + textos) */
#warranty-customer .block {
  display: flex;
  align-items: center; /* Alinha ícone com textos */
  gap: 14px; /* Espaço entre o ícone e o texto */
  color: #151414; /* Texto preto */
  flex: 0 0 auto; /* Bloco fica do tamanho do conteúdo (não estica) */
}

/* Container do ícone */
#warranty-customer .block-icon {
  flex-shrink: 0; /* Não encolhe */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícones SVG: tamanho fixo de 44x44 */
#warranty-customer svg {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
}

/* Pinta o preenchimento (fill) dos SVGs com a cor primary */
#warranty-customer svg path {
  fill: var(--primary);
}

/* Caso especial: SVGs que usam contorno (stroke) em vez de preenchimento */
#warranty-customer svg path[fill="none"] {
  fill: none;
  stroke: var(--primary);
}

/* Container do texto (título + descrição) */
#warranty-customer .block-text {
  flex: 1; /* Ocupa o espaço restante */
}

/* Título do bloco (negrito, preto) */
#warranty-customer h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #151414;
  line-height: 1.3;
}

/* Descrição do bloco (cinza, menor que o título) */
#warranty-customer p {
  font-size: 13px;
  color: #6a6262;
  margin: 0;
  line-height: 1.4;
}

/* Variação dark — caso o footer tenha a classe .dark, usa fundo claro */
footer.dark #warranty-customer {
  background: #fafafa;
}

/* No modo dark, força textos em preto */
footer.dark #warranty-customer .block,
footer.dark #warranty-customer h3 {
  color: #000;
}

/* Em tablet (até 991px), diminui o gap entre blocos pra economizar espaço */
@media (max-width: 991px) {
  #warranty-customer .blocks {
    gap: 24px;
  }
}

/* Em mobile (até 575px), empilha os blocos verticalmente alinhados à esquerda */
@media (max-width: 575px) {
  #warranty-customer .blocks {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   NEWSLETTER (.section-newsletter)
   Faixa de cadastro com fundo gradiente vinho e inputs glass effect
   ============================================================ */

/* Faixa principal com gradiente diagonal da cor primary */
.section-newsletter {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-active) 100%) !important;
  padding: 60px 24px !important; /* Padding vertical generoso pra dar respiro */
  position: relative; /* Pra posicionar os elementos decorativos absolutos */
  overflow: hidden; /* Esconde os "vazamentos" dos blurs decorativos */
}

/* Decoração: círculo blur branco no canto superior direito */
.section-newsletter::before {
  content: "";
  position: absolute;
  top: -100px; /* Posicionado pra metade ficar fora da faixa */
  right: -100px;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.04); /* Branco MUITO transparente */
  border-radius: 50%; /* Circular */
  filter: blur(80px); /* Blur forte = brilho difuso */
  pointer-events: none; /* Não captura cliques */
}

/* Decoração: círculo blur branco no canto inferior esquerdo (espelhado) */
.section-newsletter::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 350px;
  height: 350px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

/* Coloca o conteúdo acima dos elementos decorativos */
.section-newsletter .container {
  position: relative;
  z-index: 1; /* Camada acima dos ::before/::after */
}

/* Bloco do texto do topo (título + descrição) */
.section-newsletter .newsletter-text {
  text-align: center;
  margin-bottom: 32px; /* Espaço antes dos campos */
  max-width: 640px; /* Limita largura pra não esticar muito */
  margin-left: auto; /* Centraliza horizontalmente */
  margin-right: auto;
}

/* Título "Cadastre-se na nossa Newsletter" */
.section-newsletter .newsletter-title {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700; /* Bold */
  margin-bottom: 12px;
  letter-spacing: -0.5px; /* Letras um pouco mais juntas (design moderno) */
}

/* Ícone decorativo (envelope ✉) acima do título */
.section-newsletter .newsletter-title::before {
  content: "✉"; /* Caractere unicode de envelope */
  display: block; /* Quebra linha */
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.9; /* Levemente transparente pra ficar mais sutil */
}

/* Subtítulo: "Receba nossas novidades..." */
.section-newsletter .newsletter-description {
  color: rgba(255, 255, 255, 0.85) !important; /* Branco com leve transparência */
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Limita a largura máxima do form */
.section-newsletter #form-newsletter {
  max-width: 1080px;
  margin: 0 auto; /* Centraliza o form na faixa */
}

/* Grid dos campos: e-mail mais largo, depois nome e data, depois botão */
.section-newsletter .newsletter-fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto; /* E-mail = 1.5x, outros = 1x, botão = tamanho do conteúdo */
  gap: 12px; /* Espaço entre os campos */
  align-items: end; /* Alinha tudo pela base */
}

/* Cada campo (label em cima, input embaixo) */
.section-newsletter .newsletter-field {
  display: flex !important;
  flex-direction: column !important; /* Empilha label e input verticalmente */
  justify-content: flex-end !important; /* Alinha pela base (importante pro botão alinhar) */
}

/* Remove margens superiores residuais que podiam empurrar o conteúdo */
.section-newsletter .newsletter-field > * {
  margin-top: 0 !important;
}

/* Esconde span de erro vazio que estava ocupando espaço sem necessidade */
.section-newsletter .text-danger:empty {
  display: none !important;
}

/* Labels acima dos inputs (E-MAIL, NOME, DATA DE NASCIMENTO) */
.section-newsletter .newsletter-label {
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.9) !important; /* Branco semi-transparente */
  font-size: 12px !important; /* Texto pequeno */
  font-weight: 500 !important;
  margin-bottom: 6px !important; /* Espaço antes do input */
  letter-spacing: 0.5px !important; /* Letras separadas (estilo "label premium") */
  text-transform: uppercase !important; /* TUDO MAIÚSCULO */
  line-height: 1 !important;
  min-height: 18px !important; /* Altura mínima pra alinhar com botão */
  /* Resets pra forçar a label aparecer mesmo se o tema tentou escondê-la */
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  position: static !important;
  clip: auto !important;
}

/* Asterisco vermelho-claro do campo obrigatório */
.section-newsletter .newsletter-label .required {
  color: #ffb3a8; /* Rosa pastel (visível mas não agressivo) */
  margin-left: 4px;
}

/* Container do botão: alinha ele pela base do grid (igual aos outros campos) */
.section-newsletter .newsletter-field-button {
  justify-content: flex-end !important;
}

/* Cria uma "label fake" invisível acima do botão pra ele alinhar com os inputs
   (já que os inputs têm label visível em cima) */
.section-newsletter .newsletter-field-button::before {
  content: "\00a0"; /* Caractere "espaço não-quebrável" (precisa de algo pra ocupar) */
  display: block;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 6px;
  min-height: 18px;
  visibility: hidden; /* Invisível mas ocupa espaço */
}

/* Inputs do form: estilo "glass effect" sobre o fundo escuro */
.section-newsletter .newsletter-input,
.section-newsletter input.form-control,
.section-newsletter input[type="email"],
.section-newsletter input[type="text"] {
  background: rgba(255, 255, 255, 0.95) !important; /* Branco quase sólido */
  border: 1.5px solid transparent !important; /* Borda invisível (aparece no focus) */
  border-radius: 8px !important; /* Cantos arredondados */
  height: 46px !important; /* Altura fixa pra alinhar com botão */
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 16px !important; /* Espaço interno horizontal */
  line-height: 46px !important; /* Centraliza texto verticalmente */
  font-size: 14px !important;
  color: #151414 !important; /* Texto preto */
  box-sizing: border-box !important; /* Padding e borda incluídos na altura */
  margin: 0 !important;
  transition: all 0.2s ease; /* Animação suave em todas as mudanças */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra leve pra dar profundidade */
}

/* Cor cinza do placeholder ("E-mail", "Nome", etc.) */
.section-newsletter .newsletter-input::placeholder {
  color: #999;
}

/* Estado focado (quando o usuário clica no input) */
.section-newsletter .newsletter-input:focus,
.section-newsletter .form-control:focus {
  background: #fff !important; /* Branco sólido */
  border-color: rgba(255, 255, 255, 0.6) !important; /* Borda branca semi-transparente */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.2),
    /* Glow branco em volta */ 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Sombra mais forte */
  outline: none; /* Remove o outline padrão */
  transform: translateY(-1px); /* "Levanta" 1px (microanimação) */
}

/* Botão "INSCREVER-SE" — branco com texto vinho (cor invertida do fundo) */
.section-newsletter .btn-newsletter {
  background: #fff !important;
  color: var(--primary) !important; /* Texto vinho pra contraste */
  border: none !important;
  padding: 0 28px !important; /* Padding horizontal generoso */
  height: 46px; /* Mesma altura dos inputs */
  font-size: 14px !important;
  font-weight: 700 !important; /* Bold */
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.25s ease; /* Animação suave */
  text-transform: uppercase; /* CAIXA ALTA */
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Espaço entre texto e seta */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); /* Sombra mais forte que o input */
  white-space: nowrap; /* Não quebra linha do texto */
}

/* Seta "→" depois do texto do botão (criada via pseudo-elemento) */
.section-newsletter .btn-newsletter::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.25s ease; /* Anima movimento da seta */
}

/* No hover: levanta o botão e escurece um pouco a sombra */
.section-newsletter .btn-newsletter:hover {
  background: #fff !important;
  color: var(--primary-active) !important; /* Vinho mais escuro */
  transform: translateY(-2px); /* Levanta 2px */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* Sombra mais pronunciada */
}

/* Microanimação: a seta desliza 4px pra direita no hover */
.section-newsletter .btn-newsletter:hover::after {
  transform: translateX(4px);
}

/* No clique: volta pro lugar original (sensação tátil) */
.section-newsletter .btn-newsletter:active {
  transform: translateY(0);
}

/* Mensagem de erro de validação (campo inválido) em rosa pastel */
.section-newsletter .text-danger {
  color: #ffb3a8 !important;
  font-size: 12px;
  margin-top: 4px;
}

/* ===== RESPONSIVIDADE NEWSLETTER ===== */

/* Tablet (até 991px): 2 colunas, e-mail e botão ocupam linha inteira */
@media (max-width: 991px) {
  .section-newsletter {
    padding: 48px 20px !important; /* Padding um pouco menor */
  }

  .section-newsletter .newsletter-fields {
    grid-template-columns: 1fr 1fr; /* 2 colunas */
  }

  /* E-mail e botão ocupam toda a largura (linha inteira) */
  .section-newsletter .newsletter-field-email,
  .section-newsletter .newsletter-field-button {
    grid-column: 1 / -1; /* Da primeira até a última coluna */
  }

  /* Botão ocupa 100% da largura disponível */
  .section-newsletter .btn-newsletter {
    width: 100%;
  }
}

/* Mobile (até 575px): tudo em 1 coluna */
@media (max-width: 575px) {
  .section-newsletter .newsletter-title {
    font-size: 22px !important; /* Título menor pra caber */
  }

  .section-newsletter .newsletter-fields {
    grid-template-columns: 1fr; /* 1 coluna só */
  }

  /* Reset do grid-column do email (não precisa mais ocupar linha inteira) */
  .section-newsletter .newsletter-field-email {
    grid-column: auto;
  }
}

.mini-banners-grid {
  display: flex;
  gap: 16px;
}

.mini-banner-item {
  flex: 1;
}

.mini-banner-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: empilha */
@media (max-width: 768px) {
  .mini-banners-grid {
    flex-direction: column;
  }
}