/* ============================================================
   SECTIONS — estilos específicos por seção
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   SITE HEADER — fixo, troca logo no scroll
   ══════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--space-60);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Sobre a hero: totalmente transparente */
.site-header:not(.scrolled) {
  background: transparent;
}

/* Após passar a hero: fundo sólido */
.site-header.scrolled {
  background: var(--color-neutral-white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

/* Wrapper posicional para cruzar os dois logos */
.header-logo-wrap {
  position: relative;
  width: 153px;
  height: 69px;
  flex-shrink: 0;
}

.header-logo-link {
  display: block;
  flex-shrink: 0;
}

.header-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.3s ease;
}

/* Estado inicial: logo branco visível, colorido oculto */
.logo-white { opacity: 1; }
.logo-color { opacity: 0; }

/* Estado scrolled: inverte logos */
.site-header.scrolled .logo-white { opacity: 0; }
.site-header.scrolled .logo-color { opacity: 1; }

/* Lang-toggle no estado scrolled (sobre fundo branco) */
.site-header.scrolled .lang-toggle {
  background: transparent;
  border: 1px solid var(--color-earth-400);
}

.site-header.scrolled .lang-btn:not(.active) {
  color: var(--color-earth-900);
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* overflow removido do hero — o vídeo é contido pelo video-wrap (absolute) */
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* contém o vídeo sem cortar o hero__inner */
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    8deg,
    rgb(46 27 18) 0%, 
    rgb(46 27 18 / 36%) 60%,
    rgb(46 27 18 / 10%) 100%
  );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--space-60) var(--space-60);
  flex: 1;          /* cresce para preencher o .hero sem criar overflow */
  width: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 620px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--lh-display);
  color: var(--color-earth-300);
  letter-spacing: var(--ls-display);
  max-width: 509px;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.hero__subtitle {
  font-size: 24px;
  line-height: var(--lh-body);
  color: var(--color-neutral-white);
  max-width: 586px;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* Botão hero animado via CSS — sem conflito com transition: opacity do .btn */
.hero .btn {
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__subtitle,
  .hero .btn {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════ */
.stats-bar {
 /* background:
    url('../assets/images/background-a-fazenda-canaa-sementes-de-amendoim.png')
    0px -114.194px / 100% 442.858% no-repeat,
    #FFEAD1;*/
    background: linear-gradient(
359deg, #ffdab0 22.09%, rgba(246, 235, 221, 0.09) 78.28%), url(../assets/images/background-a-fazenda-canaa-sementes-de-amendoim.png) 50% / cover no-repeat, radial-gradient(60.14% 60.14% at 50% 88.1%, #C8925C 0%, rgba(228, 195, 157, 0.72) 100%);
}

.stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 283px;
  padding: 54px var(--space-60);
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 2 — A FAZENDA + ESTRUTURA
   ══════════════════════════════════════════════════════════ */
.section-about {
  background: var(--color-earth-50);
}

.about-split {
  display: flex;
  align-items: stretch;
}

.about-split__photo {
  width: 50%;
  flex-shrink: 0;
  min-height: 800px;
  position: relative;
  overflow: hidden;
}

.about-split__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.about-split__content {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-60);
  min-height: 800px;
}

/* Parte A — A Fazenda Canaã */
.about-a .about-split__content {
  gap: var(--space-32);
  justify-content: flex-start;
  padding-right: 112px;
}

.about-a__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-a__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-900);
}

.about-a__title span.highlight {
  color: var(--color-earth-900);
}

.about-a__body {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-earth-900);
}

.about-a__body strong, .about-a__body b {
  font-weight: 600;
  color: var(--color-earth-500);
}

/* Parte B — Estrutura */
.about-b {
  flex-direction: row-reverse;
}

.about-b .about-split__content {
  justify-content: space-between;
  padding-right: 112px;
  gap: var(--space-40);
}


.about-b__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-900);
  max-width: 600px;
}

.about-b__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.about-b .stat-item__value {
  font-size: var(--text-h4);
}

.about-b__stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.about-b__stat-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.about-b__stat-icon--md {
  width: 60px;
  height: 60px;
}

.about-b__stat-icon--lg {
  width: 60px;
  height: 60px;
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 3 — PARCERIAS
   ══════════════════════════════════════════════════════════ */
.section-parcerias {
  position: relative;
  padding-top: var(--space-112);
  padding-bottom: var(--space-112);
  overflow: hidden;
  background:
    linear-gradient(199deg, #ffdab0 22.09%, rgba(246, 235, 221, 0.09) 78.28%), url(../assets/images/background-a-fazenda-canaa-sementes-de-amendoim.png) 50% / cover no-repeat, radial-gradient(60.14% 60.14% at 50% 88.1%, #C8925C 0%, rgba(228, 195, 157, 0.72) 100%);
}

.section-parcerias__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-parcerias__bg-radial,
.section-parcerias__bg-img,
.section-parcerias__bg-overlay {
  background: none;
}

.section-parcerias__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: 0 var(--space-60);
}

.parcerias-header {
  display: flex;
  align-items: flex-start;
  gap: 136px;
  justify-content: space-between;
}

.parcerias-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  max-width: 904px;
}

.parcerias-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-900);
  letter-spacing: var(--ls-h2);
}

.parcerias-header__desc {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-earth-900);
}

.parcerias-header__desc strong {
  font-weight: 600;
  color: var(--color-earth-500);
}

.parcerias-cards {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-24);
}

.parcerias-cards .partnership-card {
  flex: 1;
  max-width: 424px;
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 4 — OPERACIONAL — Sticky + Crossfade
   ══════════════════════════════════════════════════════════ */
.section-operacional {
  background: var(--color-brand-green-50);
  position: relative;
  /* isolation:isolate cria stacking context sem quebrar sticky */
  isolation: isolate;
}

/* ── Sem overflow, transform ou filter neste container ──
   Qualquer um desses num ancestral quebra o position:sticky. */
.operacional-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-60);
  padding: var(--space-112) var(--space-60);
}

.operacional-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.operacional-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-900);
  max-width: 580px;
}

/* ── Layout duas colunas (desktop) ── */
.operacional-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-60);
  /* Sem overflow nem transform — não quebra o sticky */
}

/* ── Coluna esquerda: blocos de texto ── */
.operacional-steps {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Imagem mobile: oculta no desktop ── */
.op-step-img-mobile {
  display: none;
}

/* ── Cada bloco: espaço vertical generoso de scroll ── */
.op-step {
  min-height: 75vh;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  padding: var(--space-60) 0;
  /* Reveal ao entrar na viewport */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.op-step.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Corpo textual: muted quando não ativo ── */
.op-step__body {
  display: flex;
  flex-direction: column;
  opacity: 0.4;
  transition: opacity 0.45s ease;
}

.op-step.is-active .op-step__body {
  opacity: 1;
}

/* ── Número: elemento visual dominante ── */
.op-step-number {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand-green-100);
  margin-bottom: var(--space-24);
  transition: color 0.45s ease;
}

.op-step.is-active .op-step-number {
  color: var(--color-brand-green-500);
}

/* ── Separador fino + título ── */
.op-step-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-brand-green-700);
  border-top: 1px solid var(--color-brand-green-300);
  padding-top: var(--space-24);
}

/* ── Descrição ── */
.op-step-desc {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-brand-green-900);
  max-width: 420px;
  margin-top: var(--space-16);
}

/* ── Coluna direita: sticky ──
   overflow:hidden aqui é seguro: está no próprio sticky,
   não em um ancestral. Não cria scroll container externo. */
.operacional-sticky {
  width: 60%;
  /*max-width: 499px;*/
  flex-shrink: 0;
  position: sticky;
  top: 130px;
  height: 80vh;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── Crossfade entre imagens ── */
.op-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.op-img.is-active {
  opacity: 1;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .op-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .op-step__body {
    opacity: 1 !important;
    transition: none !important;
  }
  .op-step-number {
    color: var(--color-brand-green-500) !important;
    transition: none !important;
  }
  .op-img {
    opacity: 0;
    transition: none !important;
  }
  .op-img.is-active {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 5 — COMPROMISSOS / DIFERENCIAIS
   ══════════════════════════════════════════════════════════ */
.section-compromissos {
  position: relative;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 1366' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-16.4 -92.2 97.194 -18.913 839.5 1462.2)'%3E%3Cstop stop-color='rgba(210%2C222%2C160%2C1)' offset='0'/%3E%3Cstop stop-color='rgba(181%2C193%2C125%2C1)' offset='0.25'/%3E%3Cstop stop-color='rgba(153%2C165%2C90%2C1)' offset='0.5'/%3E%3Cstop stop-color='rgba(124%2C136%2C54%2C1)' offset='0.75'/%3E%3Cstop stop-color='rgba(109%2C121%2C37%2C1)' offset='0.875'/%3E%3Cstop stop-color='rgba(95%2C107%2C19%2C1)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.section-compromissos__inner {
  display: flex;
  flex-direction: column;
  gap: 79px;
  align-items: flex-end;
  padding: var(--space-112) var(--space-60);
}

.compromissos-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
}

.compromissos-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-neutral-white);
  letter-spacing: var(--ls-h2);
  max-width: 798px;
}

/* Grid 3 colunas, 2 linhas, primeira célula full-height */
.compromissos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--space-24);
  width: 100%;
  min-height: 827px;
}

.card-producao {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px var(--space-40);
  gap: var(--space-24);
  color: #fff;
  min-height: 100%;
}

.card-producao__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.card-producao__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 27.207%, #3e470c 83.555%);
}

.card-producao__text {
  position: relative;
  z-index: 1;
}

.card-producao__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: #fff;
  margin-bottom: var(--space-24);
  max-width: 221px;
}

.card-producao__desc {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 6 — DEPOIMENTOS
   ══════════════════════════════════════════════════════════ */
.section-depoimentos {
  position: relative;
  overflow: hidden;
  background: var(--color-earth-200);
}

.section-depoimentos__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-depoimentos__bg-img {
  position: absolute;
  width: 109.26%;
  top: 51.86%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.section-depoimentos__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-earth-200) 69.913%, rgba(246,235,221,0) 86.58%);
}

.section-depoimentos__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-112) var(--space-60) 50px;
}

.depoimentos-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 886px;
  text-align: center;
}

.depoimentos-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-700);
  letter-spacing: var(--ls-h2);
}

.depoimentos-cards {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: 57px 0;
}

.testimonial-card{
gap: var(--space-16);
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 7 — FAQ
   ══════════════════════════════════════════════════════════ */
.section-faq {
  background: var(--color-neutral-white);
}

.section-faq__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-60);
  padding: var(--space-112) var(--space-60);
}

.faq-heading {
  flex-shrink: 0;
  width: 331px;
}

.faq-heading__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-earth-900);
  letter-spacing: var(--ls-h2);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 850px;
  max-width: 100%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   SEÇÃO 8 — CTA FINAL
   ══════════════════════════════════════════════════════════ */
.section-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(94.86% 94.86% at 50% 5.14%, #FFDAB0 0%, rgba(228, 195, 157, 0.90) 53.58%, rgba(255, 218, 176, 0.20) 100%),
    url('../assets/images/background-a-fazenda-canaa-sementes-de-amendoim.png') lightgray 50% / cover no-repeat;
}

.section-cta__bg { display: none; }
.section-cta__bg-img { display: none; }
.section-cta__bg-gradient { display: none; }

.section-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  padding: var(--space-112) var(--space-60);
  min-height: 740px;
  text-align: center;
}

.section-cta__text { width: 100%; }

.section-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--lh-display);
  color: var(--color-earth-500);
  margin-bottom: var(--space-16);
}

.section-cta__subtitle {
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--color-earth-900);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  background: var(--color-earth-100);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-112) var(--space-60);
  gap: var(--space-40);
}

/* Coluna 1 — Logo + tagline */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 339px;
  flex-shrink: 0;
}

.footer-logo {
  height: 100px;
  width: auto;
  max-width: 242px;
  object-fit: contain;
  object-position: left center;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-brand-green-900);
}

/* Coluna 2 — Contatos */
.footer-col-contact {
  display: flex;
  flex-direction: column;
  gap: 46px;
  width: 390px;
  flex-shrink: 0;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-earth-900);
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 49px;
}

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-contact-item__type {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-earth-700);
}

.footer-contact-item__value {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-earth-700);
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.footer-social__title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-earth-900);
}

/* Coluna 3 — Localização */
.footer-col-location {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 442px;
  flex-shrink: 0;
}

.footer-address {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-earth-700);
  margin-top: var(--space-8);
}

.footer-bottom {
  border-top: 1px solid var(--color-earth-400);
  padding: var(--space-24) var(--space-60);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.footer-copyright {
  font-size: var(--text-sm);
  color: var(--color-neutral-gray);
  line-height: var(--lh-body);
}

.footer-copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity .2s ease;
}

.footer-copyright a:hover {
  opacity: 0.7;
}