.img-fade-left{
  /* Most of the image stays visible; only the far-left edge fades to white */
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 99%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 99%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.about-lead{ font-style: italic; line-height: 1.6; }
.about-body{ line-height: 1.75; }

/* Multi-line clamp for descriptions */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wavy track + circles */
.wavy-track {
  position: relative;
  isolation: isolate;
}
.wavy-track svg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Circle card */
.wave-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: center;
}
.wave-bubble {
  width: 116px;
  height: 116px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.7);
  display: grid;
  place-items: center;
}
.wave-text h3 {
  font-weight: 600;
  margin: 0 0 .25rem 0;
}
.wave-text p {
  margin: 0;
  color: rgb(63,63,70);
  line-height: 1.5;
}

/* Offsets para seguir a onda (desktop) */
@media (min-width: 768px) {
  .wave-col-1 { transform: translateY(24px); }
  .wave-col-2 { transform: translateY(-16px); }
  .wave-col-3 { transform: translateY(32px); }
}

/* Layout vertical (mobile): onda vira coluna e itens seguem offsets no eixo X */
@media (max-width: 767px) {
  .wavy-track--vertical svg[data-wave="vertical"] { display: block; }
  .wavy-track--vertical svg[data-wave="horizontal"] { display: none; }
  .wave-x-1 { transform: translateX(6px); }
  .wave-x-2 { transform: translateX(0px); }
  .wave-x-3 { transform: translateX(12px); }
}

/* Desktop: mostra horizontal e oculta vertical */
@media (min-width: 768px) {
  .wavy-track svg[data-wave="vertical"] { display: none; }
  .wavy-track svg[data-wave="horizontal"] { display: block; }
}

/* --- Wavy section overrides --- */
.wavy-track{ position:relative; isolation:isolate; }
.wavy-track svg{ position:absolute; inset:0; z-index:-1; }

/* Bigger circle bubble */
.wave-bubble{
  width:160px; height:160px;               /* larger */
  border-radius:9999px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.10), inset 0 2px 0 rgba(255,255,255,.75);
  display:grid; place-items:center;
}

/* Text block next to the bubble */
.wave-item{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; }
.wave-text h3{ font-weight:600; margin:0 0 .25rem 0; }
.wave-text p{ margin:0; color:rgb(63,63,70); line-height:1.55; }

/* Desktop: make items follow a stronger wave */
@media (min-width:768px){
  .wave-col-1{ transform:translateY(42px); }
  .wave-col-2{ transform:translateY(-36px); }
  .wave-col-3{ transform:translateY(48px); }
}

/* Mobile: vertical track + subtle X offsets so icons sit on the curve */
@media (max-width:767px){
  .wavy-track--vertical svg[data-wave="vertical"]{ display:block; }
  .wavy-track--vertical svg[data-wave="horizontal"]{ display:none; }
  .wave-x-1{ transform:translateX(8px); }
  .wave-x-2{ transform:translateX(0px); }
  .wave-x-3{ transform:translateX(14px); }
}

/* Desktop: show horizontal wave only */
@media (min-width:768px){
  .wavy-track svg[data-wave="vertical"]{ display:none; }
  .wavy-track svg[data-wave="horizontal"]{ display:block; }
}

/* Wave items stacked (bubble centered on wave, text above or below) */
.wave-stack{
  display:flex; flex-direction:column; align-items:center; text-align:left;
  gap:0.75rem;
}
.wave-text{ max-width: 28rem; }          /* largura confortável do texto */
.wave-text h3{ font-weight:600; margin:0 0 .25rem 0; }
.wave-text p{ margin:0; color:rgb(63,63,70); line-height:1.55; }

/* control the position of the text relative to the bubble */
.text-below .wave-text{ order: 2; }      /* bubble first, text below */
.text-below .wave-bubble{ order: 1; }
.text-above .wave-text{ order: 1; }      /* text above, bubble below */
.text-above .wave-bubble{ order: 2; }

/* Bigger circle bubble */
.wave-bubble{
  width:160px; height:160px; border-radius:9999px; background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.1), inset 0 2px 0 rgba(255,255,255,.75);
  display:grid; place-items:center;
}

/* Follow a stronger wave on desktop */
@media (min-width:768px){
  .wave-col-1{ transform:translateY(48px); }
  .wave-col-2{ transform:translateY(-46px); }
  .wave-col-3{ transform:translateY(52px); }
}

/* Mobile: vertical wave + leve offset X */
@media (max-width:767px){
  .wavy-track--vertical svg[data-wave="vertical"]{ display:block; }
  .wavy-track--vertical svg[data-wave="horizontal"]{ display:none; }
  .wave-x-1{ transform:translateX(8px); }
  .wave-x-2{ transform:translateX(0px); }
  .wave-x-3{ transform:translateX(14px); }
}

/* Desktop: só onda horizontal */
@media (min-width:768px){
  .wavy-track svg[data-wave="vertical"]{ display:none; }
  .wavy-track svg[data-wave="horizontal"]{ display:block; }
}

/* Wave node stack */
.wave-stack{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.wave-text{ max-width: 30rem; }
.wave-text h3{ margin:0 0 .25rem 0; font-weight:600; }
.wave-text p{ margin:0; line-height:1.6; color:rgb(63,63,70); }

/* Alternância: texto acima/abaixo da bolha */
.text-below .wave-text{ order:2; }
.text-below .wave-bubble{ order:1; }
.text-above .wave-text{ order:1; }
.text-above .wave-bubble{ order:2; }

/* Bolha + ícone dentro (um componente só) */
.wave-bubble{
  width: 170px; height: 170px; border-radius:9999px; background:#fff;
  box-shadow: 0 14px 28px rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.75);
  display:grid; place-items:center;
}
/* O ícone vive DENTRO da bolha */
.wave-bubble svg{
  width: 68px; height: 68px; stroke: currentColor; fill: none; color: #0ea5a2; /* teal default */
  stroke-width: 1.9;
}

/* offsets para seguir a onda (desktop) */
@media (min-width:768px){
  .wave-col-1{ transform: translateY(58px); }
  .wave-col-2{ transform: translateY(-56px); }
  .wave-col-3{ transform: translateY(62px); }
}

/* mobile: onda vertical + leves offsets X */
@media (max-width:767px){
  .wavy-track--vertical svg[data-wave="vertical"]{ display:block; }
  .wavy-track--vertical svg[data-wave="horizontal"]{ display:none; }
  .wave-x-1{ transform: translateX(8px); }
  .wave-x-2{ transform: translateX(0px); }
  .wave-x-3{ transform: translateX(14px); }
}

/* desktop: só a onda horizontal */
@media (min-width:768px){
  .wavy-track svg[data-wave="vertical"]{ display:none; }
  .wavy-track svg[data-wave="horizontal"]{ display:block; }
}

/*---------------------------------------------------------------------
/* Footer background — amber/golden gradient close to the hero color */
.footer-bg{
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #3B2A13 0%, #6A3C0E 28%, #A86411 58%, #D8921F 78%, #F2B63F 100%);
  color: #fff;
}

/* Optional: soft vignette for depth */
.footer-bg::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 70%);
}

/* Make footer a stacking context for ::after */
footer.footer-bg{ position: relative; overflow: hidden; }


/*-------------------------
/* --------- Header Nav: fácil de customizar --------- */
:root{
  /* mude aqui quando quiser */
  --nav-link-color: #0A477B;      /* cor padrão do menu */
  --nav-link-hover: #F7BE29;      /* cor no hover */
  --nav-font-size: 1.0625rem;     /* ~17px */
  --nav-font-size-md: 1.125rem;   /* ~18px, em telas md+ */
  --nav-font-weight: 600;         /* semibold */
}

header .main-nav .nav-link{
  color: var(--nav-link-color);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  line-height: 1.2;
}

@media (min-width: 768px){
  header .main-nav .nav-link{
    font-size: var(--nav-font-size-md);
  }
}

header .main-nav .nav-link:hover{
  color: var(--nav-link-hover);
}

/* opcional: estado “ativo” levemente destacado */
header .main-nav .nav-link[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Sustainability – texto justificado */
.justify-text{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}




/* --- TYPOGRAFIA PADRÃO (não substitui nada existente) --- */
/* Alinhado à Home: h1 grande, subtítulo forte, lead 18px, body 16px */

:root{
  --fs-body: 1rem;          /* 16px */
  --fs-lead: 1.125rem;      /* 18px */
  --lh-tight: 1.2;
  --lh-relaxed: 1.65;
}

/* Título principal (clamp de ~4xl a ~6xl) */
.t-h1{
  font-weight: 600;
  line-height: var(--lh-tight);
  font-size: clamp(2.25rem, 1.2rem + 2.5vw, 3.75rem);
}

/* Título de seção (clamp de ~3xl a ~4xl) */
.t-h2{
  font-weight: 600;
  line-height: var(--lh-tight);
  font-size: clamp(1.875rem, 1.1rem + 1.25vw, 2.25rem);
}

/* Tagline/destaque (clamp de ~2xl a ~3xl) */
.t-tagline{
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(1.5rem, 1.1rem + 0.8vw, 1.875rem);
}

/* Parágrafo de introdução (lead) */
.t-lead{
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}

/* Parágrafo comum */
.t-body{
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}


/* --------------------------------------
   Tipografia global (sem quebrar o atual)
   Ajuste os clamp() aqui quando quiser
--------------------------------------- */
:root{
  --t-h1-min: 2.25rem;  /* ~36px */
  --t-h1-pref: 5vw;
  --t-h1-max: 3.75rem;  /* ~60px */

  --t-lead-min: 1.125rem; /* ~18px */
  --t-lead-pref: 1.4vw;
  --t-lead-max: 1.25rem;  /* ~20px */

  --t-body-min: 1rem;   /* 16px */
  --t-body-pref: 0.8vw;
  --t-body-max: 1.0625rem; /* ~17px */

  --t-tagline-min: 1.5rem;  /* 24px */
  --t-tagline-pref: 2.2vw;
  --t-tagline-max: 1.875rem; /* 30px */
}

.t-h1{
  font-size: clamp(var(--t-h1-min), var(--t-h1-pref), var(--t-h1-max));
  line-height: 1.15;
}

.t-lead{
  font-size: clamp(var(--t-lead-min), var(--t-lead-pref), var(--t-lead-max));
  line-height: 1.6;
}

.t-body{
  font-size: clamp(var(--t-body-min), var(--t-body-pref), var(--t-body-max));
  line-height: 1.65;
}

.t-tagline{
  font-size: clamp(var(--t-tagline-min), var(--t-tagline-pref), var(--t-tagline-max));
  line-height: 1.3;
}


/* -------------------------------
   Tipografia global consistente
---------------------------------*/

/* Títulos principais (H1 de seções) */
.t-h1{
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); /* ~32–48px */
}

/* Parágrafos de destaque (lead) */
.t-lead{
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); /* ~17–20px */
  line-height: 1.7;
}

/* Corpo padrão */
.t-body{
  font-size: 1rem;    /* 16px */
  line-height: 1.7;
}