:root{
  /* Brand colors */
  --green: rgb(125,173,129);
  --brown-dark: rgb(65,34,13);
  --brown: rgb(131,70,33);

  /* Warmer “clean” palette (more Bom Garoto brown, still light) */
  --bg: #fbf7f1;         /* warm off-white */
  --surface: #fffaf3;    /* warm card surface */
  --surface-2: #f5ede3;  /* warm section alt */
  --stroke: rgba(65,34,13,0.12);
  --text: rgba(65,34,13,0.93);
  --muted: rgba(65,34,13,0.72);

  --radius: 18px;
  --shadow: 0 18px 44px rgba(65,34,13,0.12);
}


*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  background:
  radial-gradient(900px 520px at 18% 8%, rgba(125,173,129,0.18), transparent 55%),
  radial-gradient(900px 520px at 82% 6%, rgba(131,70,33,0.16), transparent 58%),
  radial-gradient(900px 520px at 55% 92%, rgba(65,34,13,0.08), transparent 55%),
  linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  
  /* ✅ stop “scrolling sideways, into void” */
  width: 100%;     
  overscroll-behavior-x: none;     
}

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

.container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar{
  border-bottom: 1px solid var(--stroke);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
}
.topbar__inner{
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 10px 0;
  flex-wrap: wrap;
}
.topbar__item{ margin: 0; color: var(--muted); font-size: 0.9rem; }

.header{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
}
.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand{ display: flex; gap: 12px; align-items: center; }
.brand__mark{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(125,173,129,0.95), rgba(125,173,129,0.55));
  color: #0c2010;
  font-weight: 900;
  border: 1px solid rgba(65,34,13,0.10);
}
.brand__text strong{ display: block; line-height: 1.0; }
.brand__text span{ display: block; color: var(--muted); font-size: 0.9rem; margin-top: 2px; }

@media (max-width: 520px){
  .brand__text{
    /* display: none; */
  }
  .header__actions{
    gap: 0;
  }
  .header__actions .btn{
    display: none;
  }
}

.nav{ display: flex; gap: 14px; color: var(--muted); }
/* Desktop nav links */
.nav a{ 
	padding: 8px 10px; 
	border-radius: 10px;
	color: #3b2314;          /* darker brown */
	font-weight: 600;        /* slightly stronger */
	letter-spacing: 0.2px;
	position: relative;
	transition: color 0.2s ease;
}
/* Subtle underline indicator */
.nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: rgba(125,173,129,0.6); /* brand green */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover{
  background: rgba(125,173,129,0.14);
  text-decoration: none;
  color: #1e120a;          /* slightly darker on hover color: var(--text);*/
}

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

.burger{
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  cursor: pointer;
}
.burger span{
  display: block;
  width: 18px; height: 2px;
  background: rgba(65,34,13,0.72);
  margin: 4px auto;
  border-radius: 99px;
}

.mobile-nav{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,0.92);
}
.mobile-nav__inner{
  padding: 14px 0 18px;
  display: grid;
  gap: 10px;
}
.mobile-nav a{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.85);
}
.mobile-nav a.btn{ text-align: center; }

.section{ padding: 74px 0; position: relative; }
.section--alt{
  position: relative;
  overflow: hidden;
  background: rgba(125,173,129,0.08);
  border-top: 1px solid rgba(65,34,13,0.06);
  border-bottom: 1px solid rgba(65,34,13,0.06);
}
.section--alt::before{
  content:"";
  position:absolute;
  inset:-80px -80px -80px -80px;
  background:
    radial-gradient(600px 400px at 20% 30%, rgba(125,173,129,0.14), transparent 60%),
    radial-gradient(600px 420px at 80% 20%, rgba(131,70,33,0.10), transparent 60%);
  pointer-events:none;
  z-index: 0;
}
.section--alt > .container{
  position: relative;
  z-index: 1;
}

.section__head{
  margin-bottom: 28px;
  max-width: 100%;/*760px;*/
}
.section__head h2{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  letter-spacing: -0.01em;
}
.section__head p{ margin: 0; color: var(--muted); }

.hero{ 
  padding: 78px 0 52px;
  overflow: hidden;
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.03);
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}
.hero h1{
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.02;
}

/* show whatsapp button only on mobile */
.hero__tagrow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* hidden by default (desktop/tablet) */
.hero__waicon{
  display: none;
}
.hero__waicon img{
  width: 40px;
  height: 40px;
  display: block;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125,173,129,0.55);
  background: rgba(125,173,129,0.16);
  color: rgba(65,34,13,0.88);
  margin: 0;
  font-size: 0.95rem;
}
.lead{ color: var(--muted); margin: 0 0 18px; font-size: 1.05rem; }

.cta-row{ display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; }

.quick-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.stat{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 8px 20px rgba(65,34,13,0.06);
}
.stat__label{ display:block; color: var(--muted); font-size: 0.85rem; }
.stat__value{ display:block; margin-top: 4px; }

.media-card{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.media-card__placeholder{
  height: clamp(220px, 32vw, 360px); /* height: 280px; */
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(125,173,129,0.28), transparent 60%),
    radial-gradient(600px 260px at 80% 10%, rgba(131,70,33,0.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  display: grid;
  place-items: center;
  color: rgba(65,34,13,0.65);
  font-weight: 700;
  overflow: hidden;
}

.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills card, crops edges */
  object-position: center;
  display: block;
}

.media-card__caption{ padding: 16px 16px 18px; }
.media-card__caption p{ margin: 6px 0 0; color: var(--muted); }

.hero__bg{
  position:absolute; inset: -260px -200px auto -200px;
  height: 460px;
  background: radial-gradient(closest-side at 50% 60%, rgba(125,173,129,0.22), transparent 70%);
  pointer-events:none;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(65,34,13,0.08);
}
.btn:hover{ text-decoration: none; filter: brightness(1.02); }
.btn--primary{
  border-color: rgba(125,173,129,0.75);
  background: linear-gradient(135deg, rgba(125,173,129,0.95), rgba(125,173,129,0.65));
  color: #0c2010;
}
.btn--ghost{
  background: rgba(255,255,255,0.55);
}

.btn--whatsapp{
  background: #7fa77f;
  color: #1e2a1e;
  border-color: #6f956f;
}
.btn--whatsapp::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  /* background-color: currentColor;
  mask: url("icons/whatsapp.svg") no-repeat center / contain;
  -webkit-mask: url("icons/whatsapp.svg") no-repeat center / contain; */
  background: url("icons/whatsapp.svg") no-repeat center / contain;
}

.cards{ display: grid; gap: 14px; }
.cards--two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: 0 10px 28px rgba(65,34,13,0.10);
  position: relative;                 /* needed for absolute icon */
  /* padding-right: 64px;    */            /* reserve space so text doesn't collide */ 
}
.card__icon{
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 1.35rem;                 /* adjust */
  line-height: 1;
  margin: 0;                          /* kill any margins */
  pointer-events: none;               /* optional: icon won't catch clicks */
 }
.card h3{
  margin: 10px 0 8px;
  padding-right: 48px;                /* small breathing room */ }
.card p{ margin: 0 0 10px; color: var(--muted); }
.muted{ color: var(--muted); }
.small{ font-size: 0.9rem; }

.section__cta{ margin-top: 18px; }

/* /* Depoimentos CTA: keep left, but align with the slider “content column” */
#depoimentos .section__cta > .btn{
  margin-left: calc(44px + 10px); /* arrow col (44) + slider gap (10) */
}

/* Mobile: arrows disappear, so no offset */
@media (max-width: 920px){
  #depoimentos .section__cta > .btn{
    margin-left: 0;
  }
}
/*
 #depoimentos .section__cta{
  margin-top: 18px;
  padding-left: 44px; /* same as slider arrow column /
}
/* arrows disappear on mobile, no padding there /
@media (max-width: 920px){
  #depoimentos .section__cta{
    padding-left: 0;
  }
}  */

.steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.step{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.88);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(65,34,13,0.08);
}
.step__num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(125,173,129,0.18);
  border: 1px solid rgba(125,173,129,0.55);
  color: rgba(65,34,13,0.9);
  font-weight: 900;
}
.step h3{ margin: 0 0 6px; }
.step p{ margin: 0; color: var(--muted); }

.timeline{
  border-left: 2px solid rgba(125,173,129,0.65);
  padding-left: 16px;
  display: grid;
  gap: 14px;
}
.titem{ display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
.titem__dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(125,173,129,0.95);
  margin-top: 8px;
  box-shadow: 0 0 0 4px rgba(125,173,129,0.18);
}
.titem__content{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 26px rgba(65,34,13,0.08);
}
.titem__content h3{ margin: 0 0 6px; }
.titem__content p{ margin: 0; color: var(--muted); }

.cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.panel{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: 0 10px 26px rgba(65,34,13,0.08);
}

/* =========================================================
   SOBRE NÓS — painéis com altura limitada
   - Mesma altura pros dois painéis (desktop + mobile)
   - Direita (com slider): texto mostra ~5 linhas e rola se passar
   - Esquerda: texto usa o espaço todo e rola se passar
========================================================= */

#sobre{
  /* Ajuste fino aqui */
  --about-panel-h: 340px;   /* altura total do painel (desktop) */
  --about-lines: 4;         /* linhas visíveis no texto do painel com slider */
  --about-lh: 1.55;         /* line-height do texto (tem que bater com o visual) */
}

#sobre .cols{ align-items: stretch; } /* makes both columns same height */

#sobre .panel{
  height: var(--about-panel-h);
  min-height: 0;          /* old 360px -> same box height both sides */
  display: flex;
  flex-direction: column;
}

/* LEFT panel: text uses the full available space (no gap) */
#sobre .panel:not(.panel--with-slider) > .muted{
  flex: 1;
  min-height: 0;
  overflow-y: auto;           /* scrollbar only if needed */
  padding-right: 10px;

  /* overflow-wrap: anywhere;
  word-break: break-word ;*/
}

/* RIGHT panel (with slider): reserve bottom row for slider */
#sobre .panel.panel--with-slider{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; /* title | scroll text | slider area */
  gap: 8px;          /* era 12px */
  
}

/* Only the paragraph scrolls in the right panel */
#sobre .panel.panel--with-slider > .muted{
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  
  flex: 0 0 auto;
  max-height: calc(var(--about-lines) * 1em * var(--about-lh));

  /* overflow-wrap: anywhere;
  word-break: break-word; */
}

/* Optional: keep slider area from squashing too much */
#sobre .panel.panel--with-slider .slider{
  margin-top: auto; /*old-> 6px;*/
}

/* (Opcional) um respiro entre slider e barra de progresso */
#sobre .panel.panel--with-slider .smeta{
  margin-top: 10px;
}

/* Scrollbar styling (both panels) */
#sobre .panel > .muted{
  scrollbar-width: thin;
  scrollbar-color: rgba(131,70,33,0.55) transparent;
  
  line-height: var(--about-lh);
  min-height: 0;            /* CRÍTICO p/ scroll funcionar em flex */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;

  overflow-wrap: anywhere;
  word-break: break-word;
  
  margin: 0;         /* mata margem padrão do <p> */
}
#sobre .panel > .muted::-webkit-scrollbar{ width: 10px; }
#sobre .panel > .muted::-webkit-scrollbar-thumb{
  background: rgba(131,70,33,0.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#sobre .panel > .muted::-webkit-scrollbar-thumb:hover{
  background: rgba(131,70,33,0.55);
}
#sobre .panel > .muted::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}

/* Menos espaço entre título e texto (painéis do site todo) */
.panel h3{
  margin: 0 0 16px;   /* antes geralmente fica grande */
}

/* Mobile: slightly shorter feels better */
@media (max-width: 520px){
  /* #sobre .panel{ min-height: 380px; } */
  #sobre{ --about-panel-h: 340px; }
}

/* #sobre .panel .muted{
  flex: 1;                 * take remaining space under the title *
  max-height: 190px;       * adjust to taste *
  overflow-y: auto;
  padding-right: 10px;

  scrollbar-width: thin;   * Firefox *
  scrollbar-color: rgba(131,70,33,0.55) transparent;
} */

/* Rounded brown scrollbar (Chrome/Edge/Safari) *
#sobre .panel .muted::-webkit-scrollbar{ width: 10px; }
#sobre .panel .muted::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}
#sobre .panel .muted::-webkit-scrollbar-thumb{
  background: rgba(131,70,33,0.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#sobre .panel .muted::-webkit-scrollbar-thumb:hover{
  background: rgba(131,70,33,0.55);
}*/


.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 8px 0; }

.callout{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(125,173,129,0.55);
  background: rgba(125,173,129,0.18);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
}
.callout__icon{ font-size: 1.3rem; }
.callout p{ margin: 6px 0 0; color: rgba(65,34,13,0.75); }
.callout--alert{
  border: 1px solid rgba(131,70,33,0.35);
  background: rgba(131,70,33,0.08);
}
.callout--alert .callout__icon{
  font-size: 1.4rem;
}

.faq{ display: grid; gap: 12px; }
.faq__item{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(65,34,13,0.08);
}
.faq__item summary{ cursor: pointer; font-weight: 900; }
.faq__item p{ margin: 10px 0 0; color: var(--muted); }

.pricing{
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 14px;
}
.table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 14px;
}
.table th, .table td{
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(65,34,13,0.08);
  color: var(--muted);
}
.table th{ color: var(--text); font-weight: 900; }

.table tr.row-separator td{
  border-top: 3px solid rgba(122, 75, 42, 0.7); /* #7a4b2a;  /* brownish */
  padding-top: 12px;
}
.table tr.divider td{
  padding: 0;
  height: 10px;
  border-bottom: 3px solid rgba(122, 75, 42, 0.7); /* #7a4b2a;  /* brownish */
}


.gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gallery__item{
  min-height: 150px;
  border-radius: 16px;
  border: 1px dashed rgba(65,34,13,0.18);
  background: rgba(255,255,255,0.7);
  display: grid;
  place-items: center;
  color: rgba(65,34,13,0.55);
  font-weight: 800;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-list{ display: grid; gap: 10px; margin-top: 12px; }
.contact-list a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.85);
}
.mini{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mini__label{ display:block; color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }

.form{ display: grid; gap: 12px; margin-top: 12px; }
.form label span{ display:block; color: var(--muted); font-size: 0.9rem; margin-bottom: 6px; }
input, textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.92);
  padding: 11px 12px;
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus{
  border-color: rgba(125,173,129,0.75);
  box-shadow: 0 0 0 4px rgba(125,173,129,0.18);
}

.footer{
  border-top: 1px solid rgba(65,34,13,0.10);
  padding: 22px 0;
  color: var(--muted);
}
.footer__inner{
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer__links{ display: flex; gap: 14px; }

/* Animation helper */
.will-animate { will-change: transform, opacity, filter; }

/* Responsive */
@media (max-width: 920px){
  .nav{ display: none; }
  .burger{ display: inline-block; }
  .hero__grid{ grid-template-columns: 1fr; }
  .cards--two{ grid-template-columns: 1fr; }
  .cards--three{ grid-template-columns: 1fr; }
  .cols{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid{ grid-template-columns: 1fr; }
  .callout{ grid-template-columns: 40px 1fr; }
  .callout .btn{ grid-column: 1 / -1; }
  .header__actions .btn{ display:none; }
}
@media (max-width: 520px){
  .quick-stats{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .card{
	padding-top: 18px;
    padding-right: 32px;
	font-size: 1rem;
  }
  
  .card__icon{
    top: 12px;
    right: 12px;
    /*position: static; /* stop absolute positioning / display: block; margin: 0 auto 6px;      /* center it */
    font-size: 1.4rem;
  }
  
  /* Title centered, no right padding */
  .card h3{
    padding-right: 0;
    /* text-align: center; */
    margin-top: 4px;
  }

  /* Body text stays readable */
  .card p,
  .card strong{
    text-align: left;
  }  
  
  /*diminuir gap entre header e caixa de texto*/
  .section.hero{
    padding-top: 26px !important;
    padding-bottom: 34px !important;
  }
  /* if the pill itself has extra spacing */
  /*.hero .eyebrow{
    margin: 0 0 10px !important;
  }*/
  .hero__tagrow{
    margin-bottom: 14px;
  }
  .hero h1{
    margin-top: 0;
  }
  
  /* show whatsapp button only on mobile*/
  .hero__waicon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(125,173,129,0.45);
    background: rgba(255,255,255,0.7);
    box-shadow: 0 10px 22px rgba(65,34,13,0.10);
  }
}

/* Slider (scroll-snap carousel) */
.slider{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
}

.slider__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 6px 4px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  
  /* ✅ stop “scrolling sideways, into void” */
  max-width: 100%;
  overscroll-behavior-x: contain;  /* ✅ keeps swipe contained */
  touch-action: pan-x;             /* ✅ allows vertical scroll, avoids sideways page drag */
}
.slider__track::-webkit-scrollbar{ display: none; }

.slide{
  scroll-snap-align: start;
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(65,34,13,0.12);
  background:
    radial-gradient(400px 220px at 20% 20%, rgba(125,173,129,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
  box-shadow: 0 18px 40px rgba(65,34,13,0.10);
  display: grid;
  place-items: center;
  color: rgba(65,34,13,0.55);
  font-weight: 900;
}

.slider__btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(65,34,13,0.12);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(65,34,13,0.10);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: rgba(65,34,13,0.72);
}
.slider__btn:hover{ filter: brightness(1.03); }

@media (max-width: 920px){
  .slider{ grid-template-columns: 1fr; }
  .slider__btn{ display: none; } /* swipe instead */
  .slider__track{
	grid-auto-columns: 82%;  
	/* ✅ stop “scrolling sideways, into void” */
	max-width: 100%;
	overscroll-behavior-x: contain;  /* ✅ keeps swipe contained */
	touch-action: pan-x;             /* ✅ allows vertical scroll, avoids sideways page drag */}
}

.slider--team .slider__track{
  grid-auto-columns: minmax(240px, 320px);  
  /* ✅ stop “scrolling sideways, into void” */
  max-width: 100%;
  overscroll-behavior-x: contain;  /* ✅ keeps swipe contained */
  touch-action: pan-x;             /* ✅ allows vertical scroll, avoids sideways page drag */
}

.team-card{
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid rgba(65,34,13,0.12);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 40px rgba(65,34,13,0.10);
  padding: 14px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.team-card__pic{
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(125,173,129,0.22);
  border: 1px solid rgba(125,173,129,0.40);
  display: grid;
  place-items: center;
  color: rgba(65,34,13,0.55);
  font-weight: 900;
}
.team-card__info span{
  display: block;
  margin-top: 2px;
  color: rgba(65,34,13,0.65);
  font-weight: 700;
  font-size: 0.92rem;
}

/* Dynamic Gallery Slider (center-mode) */
.gallery-slider{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
}

.gtrack{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 520px);
  gap: 14px;
  overflow-x: auto;
  padding: 8px 6px 14px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gtrack::-webkit-scrollbar{ display:none; }

.gslide{
  scroll-snap-align: center;
  margin: 0;
  transition: transform 350ms ease, opacity 350ms ease, filter 350ms ease;
  transform: scale(0.92);
  opacity: 0.78;
  filter: blur(0.6px);
  border-radius: 16px;
  overflow: hidden;
}
.gslide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gslide.is-active{
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

.gph{
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid rgba(65,34,13,0.16);
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(125,173,129,0.22), transparent 60%),
    radial-gradient(520px 260px at 80% 10%, rgba(131,70,33,0.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  box-shadow: 0 18px 44px rgba(65,34,13,0.14);
  display: grid;
  place-items: center;
  color: rgba(65,34,13,0.55);
  font-weight: 900;
}

.gbtn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(65,34,13,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(65,34,13,0.12);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: rgba(65,34,13,0.72);
}
.gbtn:hover{ filter: brightness(1.03); }

.gmeta{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.gprogress{
  width: min(520px, 100%);
  height: 8px;
  border-radius: 999px;
  background: rgba(65,34,13,0.10);
  overflow: hidden;
}
.gbar{
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  /* background: linear-gradient(90deg, rgba(125,173,129,0.95), rgba(125,173,129,0.55)); */
  background: linear-gradient(90deg, rgba(131,70,33,0.70), rgba(125,173,129,0.55));
  transform-origin: left center;
  transform: scaleX(0);
}

/* Mobile behavior */
@media (max-width: 920px){
  .gallery-slider{ grid-template-columns: 1fr; }
  .gbtn{ display:none; }
  .gtrack{ grid-auto-columns: 88%; }
}

/* --- Punch Pack (tasteful dark accents) --- */
:root{
  --ink: #24160f; /* deep brown for headings */
  --ink-2: rgba(36,22,15,0.80);
  --stroke-strong: rgba(65,34,13,0.18);
}

/* Stronger headings */
h1, h2, h3 { color: var(--ink); }

/* Darker topbar/header (but still translucent) */
.topbar{
  background: rgba(36,22,15,0.70);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.topbar__item{ color: rgba(255,255,255,0.88); }

.header{
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid var(--stroke-strong);
}

/* Make hero feel more premium */
.hero__bg{
  background:
    radial-gradient(closest-side at 45% 55%, rgba(125,173,129,0.30), transparent 72%),
    radial-gradient(closest-side at 70% 40%, rgba(131,70,33,0.16), transparent 70%);
}

/* Punchier buttons */
.btn{
  border-color: var(--stroke-strong);
  box-shadow: 0 14px 30px rgba(65,34,13,0.12);
}
.btn--primary{
  background: linear-gradient(135deg, rgba(125,173,129,1), rgba(125,173,129,0.62));
  border-color: rgba(125,173,129,0.85);
}

/* Cards: slightly stronger border + brand glow shadow */
.card, .panel, .titem__content, .faq__item, .media-card, .team-card, .t-slide{
  border-color: var(--stroke-strong);
  box-shadow:
    0 18px 42px rgba(65,34,13,0.12),
    0 8px 22px rgba(125,173,129,0.10);
}

/* Accent divider line (optional) */
.section__head h2{
  position: relative;
  padding-left: 12px;
}
.section__head h2::before{
  content:"";
  position:absolute;
  left:0; top: 0.15em;
  width: 4px;
  height: 0.95em;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(125,173,129,1), rgba(131,70,33,0.60));
}

/* Footer: darker base for closure */
.footer{
  background: rgba(36,22,15,0.92);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer, .footer a{ color: rgba(255,255,255,0.84); }
.footer__links a:hover{ color: rgba(255,255,255,0.96); }


.card:hover, .panel:hover, .t-slide:hover, .team-card:hover, .slide:hover, .gph:hover{
  transform: translateY(-2px);
  transition: transform 180ms ease, filter 180ms ease;
  filter: saturate(1.04);
}

/* --- Depoimentos slider --- */
.slider--testimonials .slider__track{
  grid-auto-columns: minmax(320px, 520px);  
  /* ✅ stop “scrolling sideways, into void” */
  max-width: 100%;
  overscroll-behavior-x: contain;  /* ✅ keeps swipe contained */
  touch-action: pan-x;             /* ✅ allows vertical scroll, avoids sideways page drag */
}

.t-slide{
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid rgba(65,34,13,0.18);
  background: var(--surface);
  box-shadow:
    0 18px 44px rgba(65,34,13,0.14),
    0 10px 24px rgba(131,70,33,0.10);
  padding: 16px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.t-slide::before{
  content: "";
  position: absolute;
  inset: -70px -90px auto -90px;
  height: 190px;
  background:
    radial-gradient(closest-side, rgba(131,70,33,0.14), transparent 72%),
    radial-gradient(closest-side, rgba(125,173,129,0.18), transparent 70%);
  pointer-events: none;
}

.t-slide__top{
  display: flex;
  /* grid-template-columns: 54px 1fr; */
  gap: 16px;
  align-items: center;
}

.t-avatar{	
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(131,70,33,0.30);
  background: rgba(131,70,33,0.10);
  display: block;
  flex-shrink: 0;
  /* width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(131,70,33,0.30);
  background: rgba(131,70,33,0.10);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(65,34,13,0.60); */
}

.t-meta strong{ display:block; }
.t-meta span{
  display:block;
  margin-top: 2px;
  color: rgba(65,34,13,0.70);
  font-weight: 700;
  font-size: 0.92rem;
}

.t-quote{
  margin: 0;
  color: rgba(65,34,13,0.80);
  font-weight: 650;
  line-height: 1.5;
  
  font-size: 0.95rem;       /* slightly smaller */
  line-height: 1.5;
  margin-top: 14px;

  max-height: 120px;        /* controls card growth */
  overflow-y: auto;         /* scroll if long */
  padding-right: 8px;       /* space for scrollbar */  

  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(131,70,33,0.55) transparent; /* Firefox */
}
.t-quote::-webkit-scrollbar{
  width: 10px;
}
.t-quote::-webkit-scrollbar-thumb{
  background: rgba(131,70,33,0.35);
  border-radius: 999px;
  border: 3px solid transparent;     /* makes it look “pill” */
  background-clip: padding-box;      /* keeps border transparent */
}
.t-quote::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}
.t-quote::-webkit-scrollbar-thumb:hover{
  background: rgba(131,70,33,0.50);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Slider progress (testimonials) */
.smeta{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.sprogress{
  width: min(520px, 100%);
  height: 8px;
  border-radius: 999px;
  background: rgba(65,34,13,0.10);
  overflow: hidden;
  cursor: pointer;
}
.sprogress .sbar{
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(131,70,33,0.70), rgba(125,173,129,0.55));
}


.t-stars{
  color: rgba(131,70,33,0.78);
  letter-spacing: 0.10em;
  font-size: 0.95rem;
}

@media (max-width: 920px){
  .slider--testimonials .slider__track{ grid-auto-columns: 92%; }
}

.brand__logo{
  height: 42px;          /* safe default */
  width: auto;
  display: block;
  object-fit: contain;
}

/* If your logo is very horizontal, slightly bigger works */
@media (min-width: 921px){
  .brand__logo{
    height: 48px;
  }
  /* Desktop: stats ocupam 100% da largura da coluna do texto */
  .hero__copy .quick-stats{
    width: 100%;
    grid-template-columns: 1fr 1fr; /* duas caixas preenchendo tudo */
    align-items: stretch;
  }
  .hero__copy .stat{
    width: 100%;
  }
}

html, body{
  overflow-x: hidden;
  width: 100%;
}

/* *{
  max-width: 100%;
} */

img, video, svg, canvas{
  max-width: 100%;
  height: auto;
}

/* “Sobre nós” textbox height + scrollbar *
#sobre .panel .muted{
  max-height: 200px;
  overflow-y: auto;
  padding-right: 10px;

  scrollbar-width: thin; /* Firefox *
  scrollbar-color: rgba(131,70,33,0.55) transparent;
}*/

/* Chrome/Edge/Safari */
#sobre .panel .muted::-webkit-scrollbar{ width: 10px; }
#sobre .panel .muted::-webkit-scrollbar-thumb{
  background: rgba(131,70,33,0.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#sobre .panel .muted::-webkit-scrollbar-thumb:hover{
  background: rgba(131,70,33,0.55);
}

.team-card__pic{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.team-card__pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}