/* ===========================
   Reset + bases acessíveis
=========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Roboto, Inter, Arial, sans-serif;
  line-height: 1.6;
  color: #333333;            /* slate-900 */
  background: #ffffff;
}

/* Preferências do usuário */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===========================
   Variáveis + escalas
=========================== */
:root{
  /* container */
  --container-max: 1200px;
  --gutter: 16px;

  /* tipografia fluida */
  --fs-sm: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.8vw, 1.375rem);
  --fs-xl: clamp(1.25rem, 1.05rem + 1.2vw, 1.75rem);
  --fw-semibold: 600;

  /* espaçamento */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* bordas */
  --radius: 12px;
}

/* breakpoints (mobile-first) */
@media (min-width: 480px) { :root { --gutter: 20px; } }
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px){ :root { --gutter: 28px; } }

/* utilidades básicas */
.container {
  width: min(100% - 2*var(--gutter), var(--container-max));
  margin-inline: auto;
  padding-block: 25px;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-lg); }
p, li { font-size: var(--fs-base); }
img, video { max-width: 100%; height: auto; display: block; }
h2 {color:#6A8B77}

/* ===========================
   Header
   - logo à esquerda
   - redes sociais à direita
=========================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #6A8B77;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: inherit;
}
.logo img{
      filter: brightness(0) invert(1);
      width: 200px;
}
.socials {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.socials a {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  text-decoration: none;
}
.socials a img {
        filter: brightness(0) invert(1);
}
.socials a:hover { transform: translateY(-1px); }

/* Empilhar itens se a tela for muito estreita */
@media (max-width: 360px){
  .header-inner { flex-wrap: wrap; }
  .socials { margin-left: auto; }
}

/* ===========================
   Main + Sections
=========================== */
main { padding-block: var(--space-5); }
.section {
  padding-block: var(--space-4);
}

.sub{opacity:.8; margin:0 0 24px}


/* 1 coluna */
.section--one {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  
  /* permanece 1fr em todas as larguras */

}
.badge-row{
  display:flex; 
  gap:10px; 
  flex-wrap:wrap;
  margin-bottom: var(--space-3);

}

.badge{ border:1px solid #e5e7eb; border-radius:999px; padding:var(--space-1) var(--space-3); font-size:var(--fs-sm); background: rgba(255, 255, 255, 0.2);}


/* Marcas */
.marcas{
  background:linear-gradient(180deg, rgba(217,196,158,.20), transparent);
  border-top:1px solid #e9e9e9;
  border-bottom:1px solid #e9e9e9;
}
.grid-marcas{
  display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr));
}
.marca{
  border-radius:14px; 
  padding:var(--space-3);
  display:grid; 
  place-items:center; 
  min-height:90px; 
  font-weight:700; 

}


/* 2 colunas (empilha no mobile, divide em telas médias+) */
.section--two {
  display: grid;
  grid-template-columns: 1fr;   /* mobile */
  gap: var(--space-4);
}
@media (min-width: 768px){
  .section--two { grid-template-columns: 1fr 1fr; }
}

/* variantes de largura de coluna (opcional) */
@media (min-width: 1024px){
  .two-30-70 { grid-template-columns: 0.3fr 0.7fr; }
  .two-40-60 { grid-template-columns: 0.4fr 0.6fr; }
  .two-60-40 { grid-template-columns: 0.6fr 0.4fr; }
}

/* cartões/caixas dentro das sections (opcional) */
.card {
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Links */
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Botões por marca (usa currentColor e var(--brand)) ===== */
.btn.is-wa { --brand: #25D366; }
.btn.is-ig { --brand: #E1306C; }
.btn.is-fb { --brand: #1877F2; }

/* aplica a cor da marca aos estados mantendo acessibilidade */
.btn.is-wa.btn--solid { background: var(--brand); }
.btn.is-ig.btn--solid { background: var(--brand); }
.btn.is-fb.btn--solid { background: var(--brand); }

.btn.is-wa.btn--ghost,
.btn.is-ig.btn--ghost,
.btn.is-fb.btn--ghost {
  color: var(--brand);
  background: rgba(0,0,0,.035);
}
.btn.is-wa.btn--ghost:hover,
.btn.is-ig.btn--ghost:hover,
.btn.is-fb.btn--ghost:hover {
  background: rgba(0,0,0,.07);
}

.btn.is-wa.btn--outline,
.btn.is-ig.btn--outline,
.btn.is-fb.btn--outline {
  border-color: color-mix(in srgb, var(--brand) 50%, #0000);
  color: var(--brand);
}
.btn.is-wa.btn--outline:hover,
.btn.is-ig.btn--outline:hover,
.btn.is-fb.btn--outline:hover {
  border-color: var(--brand);
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;

}

.btn img {width: 36px; height: 36px; display: inline; }
/* ícones dentro dos botões (se usar) já herdavam 18x18 do base;
   aqui só garantimos que peguem a cor do texto */
.btn svg { fill: currentColor; }

/* ===== Layout do grupo de botões dentro do card (aperto um pouco o gap) ===== */
.card .btn-group { margin-top: 16px; gap: 10px; }


/* Footer simples */
.site-footer {
  padding-block: var(--space-5);
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: var(--fs-sm);
  text-align: center;
  opacity: .85;
  background: #6A8B77;
  color: #ffffff;
}

.wrapper {
  padding-block: 0;
  background: #E3E6E0;
}

.section-banner {
  
  background: url("/imgs/banner.jpeg") repeat-x top center; 
  padding-block: 0 !important;
  color: white;
}

.section-banner .filter {
background: rgba(0,0,0,.4);
min-height: 600px;
}

.section-banner .container {
  padding-block: 50px;
}

.section-banner h2 {
  font-size: 32px;
  padding: 25px 0 10px 0;
  color: white;

}

.section-contact {
  background: white;
}

.section-contact .btn {
  border: 1px solid #E3E6E0;
  color: #333333;
  cursor: pointer;
  box-shadow: 2px 2px #E3E6E0;
  display: block;
  line-height: 36px;
  margin-bottom: 10px;
}

.section-contact .btn img {
  float: left;
  margin-right: 10px;
}

.section-contact .btn:hover {

  text-decoration:none;
  transform: translateY(-2px);

}

.section-contact a {
  color: #333333;

}