/* =========================================================
   AGRO VISUAL — style.css
   Design system: Graphite/Charcoal + Dourado Agro
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --graphite:#040404;
  --charcoal:#111111;
  --charcoal-2:#171717;
  --gold:#F2A900;
  --gold-deep:#C87900;
  --white:#F6F4EF;
  --platinum:#D7D7D7;
  --steel:#777777;
  --line: rgba(215,215,215,0.12);
  --line-strong: rgba(215,215,215,0.2);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --container: 1240px;
  --gap: clamp(1rem, 2vw, 2rem);
  --radius: 4px;

  --ease: cubic-bezier(.16,.8,.28,1);
  --dur: .7s;

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:auto;
  scroll-padding-top:var(--header-h);
  overflow-x:clip;
  min-height:100%;
  overscroll-behavior-y:auto;
}
body{
  margin:0;
  background:var(--graphite);
  color:var(--white);
  font-family:var(--font);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100vw;
  min-height:100%;
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-y:auto;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
svg{display:block;}
main, section, footer,
.service-card, .gaze-item, .region-map, .cta-final{
  touch-action:pan-y pinch-zoom;
}
img, svg{-webkit-user-drag:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Foco visível / acessibilidade ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--gold);
  color:var(--graphite);
  padding:.75rem 1.25rem;
  font-weight:700;
  z-index:1000;
  border-radius:0 0 6px 0;
}
.skip-link:focus{
  left:0;
}

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 2.5rem);
}
section{position:relative;}
.section-pad{padding:clamp(4rem,9vw,7.5rem) 0;}
.bg-charcoal{background:var(--charcoal);}
.bg-graphite{background:var(--graphite);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--gold);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--gold);
  display:inline-block;
}

h2.section-title{
  font-weight:900;
  font-size:clamp(1.8rem, 3.4vw, 2.75rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:20ch;
}
.section-lead{
  color:var(--platinum);
  font-size:clamp(1rem,1.3vw,1.125rem);
  max-width:56ch;
  margin-top:1rem;
}
.section-head{
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section-head.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section-head.center .section-lead{margin-left:auto;margin-right:auto;}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding: .95rem 1.75rem;
  font-weight:700;
  font-size:.95rem;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  min-height:48px;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gold);
  color:var(--graphite);
}
.btn-primary:hover{background:var(--gold-deep); transform:translateY(-2px);}
.btn-outline{
  border-color:var(--line-strong);
  color:var(--white);
  background:transparent;
}
.btn-outline:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
.btn-ghost{
  color:var(--white);
  border-color:transparent;
  padding-left:0; padding-right:0;
}
.btn-ghost:hover{color:var(--gold);}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:900;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(4,4,4,0.75);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(4,4,4,0.96);
  border-bottom-color:rgba(215,215,215,0.18);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{display:flex; align-items:center;}
.brand img{height:34px; width:auto;}

.nav-desktop{
  display:flex;
  align-items:center;
  gap:clamp(1.25rem, 2vw, 2.25rem);
}
.nav-desktop a{
  font-size:.92rem;
  font-weight:600;
  color:var(--platinum);
  position:relative;
  padding:.35rem 0;
  transition:color .2s var(--ease);
}
.nav-desktop a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--gold);
  transition:right .25s var(--ease);
}
.nav-desktop a:hover{color:var(--white);}
.nav-desktop a:hover::after{right:0;}

.header-actions{display:flex; align-items:center; gap:1rem;}
.header-actions .btn{padding:.7rem 1.35rem; font-size:.88rem;}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--white);
}
.nav-toggle svg{width:20px; height:20px;}

.nav-mobile{
  position:fixed;
  inset: var(--header-h) 0 0 0;
  background:var(--graphite);
  z-index:890;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}
.nav-mobile.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
.nav-mobile .container{padding-top:2rem; padding-bottom:2rem;}
.nav-mobile ul{display:flex; flex-direction:column; gap:0;}
.nav-mobile a{
  display:block;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
  font-size:1.15rem;
  font-weight:700;
}
.nav-mobile .header-actions{
  margin-top:2rem;
  flex-direction:column;
  align-items:stretch;
}

@media (max-width:920px){
  .nav-desktop{display:none;}
  .site-header .header-actions .btn-outline{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* Abaixo de ~640px: mantém logo + hambúrguer, oculta "Solicitar
   orçamento" do cabeçalho (ele continua disponível no menu móvel). */
@media (max-width:640px){
  .site-header .header-actions .btn-primary{display:none;}
  .site-header .container{gap:.75rem;}
  .header-actions{gap:.6rem;}
  .brand img{height:28px;}
}
@media (max-width:360px){
  .site-header .container{padding-left:1rem; padding-right:1rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:var(--header-h);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(4,4,4,0.96) 0%, rgba(4,4,4,0.55) 42%, rgba(4,4,4,0.25) 68%, rgba(4,4,4,0.55) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  padding-bottom:clamp(3rem,8vw,6rem);
  width:100%;
}
.hero-eyebrow{
  color:var(--gold);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:1.25rem;
  display:block;
}
.hero-line{
  display:block;
  width:64px;
  height:2px;
  background:var(--gold);
  margin-bottom:1.5rem;
  transform-origin:left center;
}
.hero-title-mask{display:block; overflow:hidden;}
.hero-title-inner{display:block;}
.hero h1{
  font-weight:900;
  font-size:clamp(2.2rem, 6vw, 4.4rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--gold);
}
.hero-sub{
  margin-top:1.5rem;
  color:var(--platinum);
  font-size:clamp(1rem,1.6vw,1.2rem);
  max-width:52ch;
}
.hero-ctas{
  margin-top:2.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.hero-scroll{
  position:absolute;
  right:clamp(5.75rem,8vw,7rem);
  bottom:2rem;
  z-index:1;
  color:var(--platinum);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero-scroll .line{
  width:1px; height:48px; background:var(--line-strong);
  writing-mode:horizontal-tb;
}
@media (max-width:640px){ .hero-scroll{display:none;} }

/* ---------- Faixa de confiança ---------- */
.trust-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--graphite);
}
.trust-strip .container{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 2.5rem;
  justify-content:space-between;
  align-items:center;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--platinum);
  font-size:.9rem;
  font-weight:600;
}
.trust-item svg{width:20px; height:20px; color:var(--gold); flex-shrink:0;}

/* ---------- Quem somos ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about-media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 0 100%);
}
.about-media img{width:100%; height:100%; object-fit:cover;}
.about-text p{
  color:var(--platinum);
  margin-top:1.25rem;
}
.about-text p:first-of-type{margin-top:1.5rem;}
.about-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  margin-top:2.25rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.about-badge{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.86rem;
  font-weight:600;
  color:var(--platinum);
}
.about-badge svg{width:18px; height:18px; color:var(--gold); flex-shrink:0;}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;}
  .about-media{aspect-ratio:16/10;}
}

/* ---------- Serviços ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.service-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--charcoal);
  border:1px solid var(--line);
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.service-card:hover{transform:translateY(-6px); border-color:var(--line-strong);}
.service-media{
  position:absolute; inset:0;
}
.service-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.service-card:hover .service-media img{transform:scale(1.06);}
.service-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,4,4,0.05) 0%, rgba(4,4,4,0.65) 55%, rgba(4,4,4,0.94) 100%);
}
.service-body{
  position:relative;
  z-index:1;
  padding:1.75rem;
}
.service-icon{
  width:40px; height:40px;
  color:var(--gold);
  margin-bottom:1rem;
}
.service-icon svg{width:100%; height:100%;}
.service-card h3{
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-0.01em;
}
.service-card p{
  color:var(--platinum);
  font-size:.92rem;
  margin-top:.6rem;
}
.service-tag{
  display:inline-block;
  margin-top:.9rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
}

@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr;}
}

/* ---------- Nosso olhar (galeria) ----------
   A imagem vertical recebe mais largura para preservar o animal;
   no celular, o conjunto é reduzido às duas imagens mais fortes. */
.gaze-layout{
  grid-template-columns:minmax(300px,.85fr) minmax(0,1.35fr);
  margin-bottom:2.5rem;
}
.gaze-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:230px 280px;
  grid-template-areas:
    "nelore curral   novilhas"
    "nelore fazenda  fazenda";
  gap:.75rem;
}
.gaze-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.gaze-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.gaze-item:hover img{transform:scale(1.08);}

.gaze-item--nelore{grid-area:nelore;}
.gaze-item--curral{grid-area:curral;}
.gaze-item--novilhas{grid-area:novilhas;}
.gaze-item--fazenda{grid-area:fazenda;}

.gaze-item--nelore img{object-position:center 22%;}
.gaze-item--curral img{object-position:center 42%;}
.gaze-item--novilhas img{object-position:center 30%;}
.gaze-item--fazenda img{object-position:center 48%;}

@media (max-width:860px){
  .gaze-layout{grid-template-columns:1fr;}
  .gaze-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:220px 220px 240px;
    grid-template-areas:
      "nelore   curral"
      "nelore   novilhas"
      "fazenda  fazenda";
  }
}

@media (max-width:560px){
  .gaze-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-template-areas:
      "nelore"
      "fazenda";
  }
  .gaze-item--nelore{aspect-ratio:4/3; height:auto;}
  .gaze-item--curral,
  .gaze-item--novilhas{display:none;}
  .gaze-item--fazenda{aspect-ratio:16/8; height:auto;}
}

/* ---------- Como funciona ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.25rem;
}
.step{
  position:relative;
  padding:2rem 1.5rem 1.5rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--charcoal);
}
.step-num{
  font-weight:900;
  font-size:2.5rem;
  color:transparent;
  -webkit-text-stroke:1.5px var(--gold);
  line-height:1;
  margin-bottom:1rem;
  display:block;
}
.step h3{font-size:1.05rem; font-weight:800;}
.step p{color:var(--platinum); font-size:.9rem; margin-top:.6rem;}
.step-connector{
  position:absolute;
  top:2.6rem; left:100%;
  width:1.5rem; height:1px;
  background:var(--line-strong);
}
.step:last-child .step-connector{display:none;}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(3,1fr);}
  .step-connector{display:none;}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:460px){
  .steps{grid-template-columns:1fr;}
}

/* ---------- Diferenciais ---------- */
.diff-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.diff-item{
  background:var(--graphite);
  padding:2.25rem 2rem;
}
.diff-item svg{width:30px; height:30px; color:var(--gold); margin-bottom:1rem;}
.diff-item h3{font-size:1.05rem; font-weight:800;}
.diff-item p{color:var(--platinum); font-size:.9rem; margin-top:.6rem;}

@media (max-width:860px){
  .diff-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .diff-grid{grid-template-columns:1fr;}
}

/* ---------- Região de atendimento ---------- */
.region-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.region-map{
  background:var(--charcoal);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
}
.region-map svg,
.region-map-fallback{width:100%; height:auto; display:block;}
.region-list{
  margin-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.region-pill{
  padding:.45rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:99px;
  font-size:.82rem;
  color:var(--platinum);
}
.region-pill--active{
  border-color:var(--gold);
  color:var(--gold);
  font-weight:700;
}
.region-pill--to{
  border-color:rgba(242,169,0,0.55);
  color:var(--gold);
}
.region-pill--pa{
  border-color:rgba(200,121,0,0.6);
  color:var(--gold-deep);
}
.region-pill--proj{
  border-color:rgba(123,90,23,0.7);
  color:#c9a15c;
}
@media (max-width:860px){
  .region-wrap{grid-template-columns:1fr;}
  .region-map{min-width:280px; max-width:420px; margin:0 auto;}
}

/* ---------- Clientes/parceiros (preparado, oculto) ---------- */
.partners-strip{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem 3rem;
  align-items:center;
  justify-content:center;
  opacity:.7;
}
.partners-strip img{height:34px; width:auto; filter:grayscale(1) brightness(1.4);}

/* ---------- CTA final ---------- */
.cta-final{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  margin:0 clamp(1.25rem,4vw,2.5rem);
  min-height:420px;
  display:flex;
  align-items:center;
}
.cta-final-media{position:absolute; inset:0;}
.cta-final-media img{width:100%; height:100%; object-fit:cover; object-position:center center;}
.cta-final-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(4,4,4,0.95) 0%, rgba(4,4,4,0.82) 45%, rgba(4,4,4,0.30) 72%, rgba(4,4,4,0.12) 100%);
}
.cta-final-body{
  position:relative;
  z-index:1;
  padding:clamp(2.5rem,6vw,4.5rem);
  width:min(58%,650px);
  margin-left:auto;
}
.cta-final h2{
  font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.15;
}
.cta-final p{color:var(--platinum); margin-top:1rem; font-size:1.05rem;}
.cta-final .hero-ctas{margin-top:2rem;}

@media (max-width:760px){
  .cta-final{align-items:flex-end; min-height:520px; margin:0;}
  .cta-final-media img{object-position:30% center;}
  .cta-final-media::after{
    background:linear-gradient(0deg, rgba(4,4,4,.97) 0%, rgba(4,4,4,.82) 52%, rgba(4,4,4,.2) 100%);
  }
  .cta-final-body{width:100%; margin-left:0; padding:2rem 1.5rem;}
  .cta-final .hero-ctas .btn{width:100%; text-align:center;}
}

/* ---------- Formulário / Contato ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);
}
.contact-info-item{
  display:flex;
  gap:1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--line);
}
.contact-info-item svg{width:22px; height:22px; color:var(--gold); flex-shrink:0; margin-top:.15rem;}
.contact-info-item h3{font-size:.95rem; font-weight:700;}
.contact-info-item p, .contact-info-item a{color:var(--platinum); font-size:.9rem; margin-top:.25rem;}
.contact-info-item a:hover{color:var(--gold);}

.social-row{display:flex; gap:.85rem; margin-top:1.5rem;}
.social-row a{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social-row a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px);}
.social-row svg{width:18px; height:18px;}

.form-card{
  background:var(--charcoal);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.field{margin-bottom:1.1rem;}
.field label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--platinum);
  margin-bottom:.45rem;
}
.field label .req{color:var(--gold);}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--graphite);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:.85rem 1rem;
  color:var(--white);
  font-family:inherit;
  font-size:.95rem;
  min-height:48px;
  transition:border-color .2s var(--ease);
}
.field textarea{min-height:120px; resize:vertical;}
.field input::placeholder, .field textarea::placeholder{color:var(--steel);}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold);
  outline:none;
}
.field-error{
  color:#ff8a8a;
  font-size:.78rem;
  margin-top:.4rem;
  display:none;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:#ff8a8a;
}
.field.has-error .field-error{display:block;}

.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.field-checkbox{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin-bottom:1.1rem;
}
.field-checkbox input[type="checkbox"]{
  width:20px; height:20px;
  min-height:0;
  margin-top:.15rem;
  accent-color:var(--gold);
  flex-shrink:0;
}
.field-checkbox label{
  font-size:.85rem;
  color:var(--platinum);
  font-weight:400;
  margin-bottom:0;
}
.field-checkbox label a{color:var(--gold);}
.field-checkbox label a:hover{text-decoration:underline;}
.field-checkbox .field-error{margin-left:2rem;}

.form-note{
  font-size:.78rem;
  color:var(--steel);
  margin-top:1rem;
}
.form-alert{
  padding:1rem 1.2rem;
  border-radius:2px;
  font-size:.9rem;
  margin-bottom:1.5rem;
  display:flex;
  gap:.7rem;
  align-items:flex-start;
}
.form-alert svg{width:20px; height:20px; flex-shrink:0; margin-top:.1rem;}
.form-alert--success{background:rgba(120,200,120,0.1); border:1px solid rgba(120,200,120,0.35); color:#c8f0c8;}
.form-alert--error{background:rgba(240,120,120,0.1); border:1px solid rgba(240,120,120,0.35); color:#ffd1d1;}

@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr;}
}

/* ---------- Rodapé ---------- */
.site-footer{
  background:var(--charcoal);
  border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) 0 1.5rem;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.footer-brand img{height:32px; margin-bottom:1rem;}
.footer-brand p{color:var(--steel); font-size:.88rem; max-width:32ch;}
.footer-col h4{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:1.1rem;
}
.footer-col ul{display:flex; flex-direction:column; gap:.7rem;}
.footer-col a{color:var(--platinum); font-size:.9rem;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  padding-top:1.5rem;
  color:var(--steel);
  font-size:.82rem;
}
.footer-bottom .legal-links{display:flex; gap:1.5rem;}
.footer-bottom a:hover{color:var(--gold);}

@media (max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr; row-gap:2.25rem;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   SISTEMA DE ANIMAÇÕES
   Todo o estado "oculto antes de animar" só existe quando
   <html> tem a classe .js (adicionada via script síncrono no
   <head>, antes de qualquer render). Sem JS, ou se o JS falhar,
   nada abaixo se aplica e o conteúdo permanece 100% visível.
   ========================================================= */

:root{
  --anim-dur: .8s;
  --anim-dur-s: .65s;
  --anim-ease: cubic-bezier(.16,.8,.24,1);
  --anim-step: 90ms;
}

/* ---------- Hero: sequência de entrada ---------- */
html.js .hero-img{
  transform:scale(1.05);
  transition:transform 1.4s var(--anim-ease);
}
html.js .hero-media::after{
  opacity:0;
  transition:opacity 1s var(--anim-ease);
}
html.js .hero-line{
  transform:scaleX(0);
  transition:transform .7s var(--anim-ease);
  transition-delay:.55s;
}
html.js [data-hero-anim="eyebrow"]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
  transition-delay:.3s;
}
html.js .hero-title-inner{
  transform:translateY(100%);
  transition:transform .8s var(--anim-ease);
  transition-delay:.65s;
}
html.js [data-hero-anim="sub"]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s var(--anim-ease), transform .65s var(--anim-ease);
  transition-delay:1.05s;
}
html.js [data-hero-anim="ctas"] .btn{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--anim-ease), transform .55s var(--anim-ease);
}
html.js [data-hero-anim="ctas"] .btn:nth-child(1){transition-delay:1.25s;}
html.js [data-hero-anim="ctas"] .btn:nth-child(2){transition-delay:1.36s;}
html.js [data-hero-anim="scroll"]{
  opacity:0;
  transition:opacity .6s var(--anim-ease);
  transition-delay:1.6s;
}

html.js .hero.is-ready .hero-img{transform:scale(1);}
html.js .hero.is-ready .hero-media::after{opacity:1;}
html.js .hero.is-ready .hero-line{transform:scaleX(1);}
html.js .hero.is-ready [data-hero-anim="eyebrow"]{opacity:1; transform:translateY(0);}
html.js .hero.is-ready .hero-title-inner{transform:translateY(0);}
html.js .hero.is-ready [data-hero-anim="sub"]{opacity:1; transform:translateY(0);}
html.js .hero.is-ready [data-hero-anim="ctas"] .btn{opacity:1; transform:translateY(0);}
html.js .hero.is-ready [data-hero-anim="scroll"]{opacity:1;}

/* ---------- Reveal genérico (fallback e blocos simples) ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease);
}
html.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Cabeçalhos de seção (eyebrow / linha / título / lead) ---------- */
html.js .anim-head .eyebrow{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--anim-ease), transform .55s var(--anim-ease);
}
html.js .anim-head .eyebrow::before{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--anim-ease) .18s;
}
html.js .anim-head .section-title{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--anim-ease) .12s, transform .75s var(--anim-ease) .12s;
}
html.js .anim-head .section-lead{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--anim-ease) .32s, transform .6s var(--anim-ease) .32s;
}
html.js .anim-head.is-visible .eyebrow{opacity:1; transform:translateY(0);}
html.js .anim-head.is-visible .eyebrow::before{transform:scaleX(1);}
html.js .anim-head.is-visible .section-title{opacity:1; transform:translateY(0);}
html.js .anim-head.is-visible .section-lead{opacity:1; transform:translateY(0);}

/* ---------- Cards de serviços ---------- */
html.js .anim-cards .service-card{
  opacity:0;
  transform:translateY(30px) scale(.97);
  transition:opacity .7s var(--anim-ease), transform .7s var(--anim-ease);
}
html.js .anim-cards.is-visible .service-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
html.js .anim-cards .service-card .service-media img{
  transition:transform .6s var(--ease), opacity .5s var(--anim-ease);
}
html.js .anim-cards.is-visible .service-card:nth-child(1){transition-delay:0ms;}
html.js .anim-cards.is-visible .service-card:nth-child(2){transition-delay:90ms;}
html.js .anim-cards.is-visible .service-card:nth-child(3){transition-delay:180ms;}
html.js .anim-cards.is-visible .service-card:nth-child(4){transition-delay:270ms;}
html.js .anim-cards.is-visible .service-card:nth-child(5){transition-delay:360ms;}
html.js .anim-cards.is-visible .service-card:nth-child(6){transition-delay:450ms;}

/* ---------- Diferenciais ---------- */
html.js .anim-cards .diff-item{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
html.js .anim-cards.is-visible .diff-item{opacity:1; transform:translateY(0);}
html.js .anim-cards .diff-item svg{
  opacity:0;
  transform:scale(.85);
  transition:opacity .5s var(--anim-ease), transform .5s var(--anim-ease);
}
html.js .anim-cards.is-visible .diff-item svg{opacity:1; transform:scale(1);}
html.js .anim-cards.is-visible .diff-item:nth-child(1){transition-delay:0ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(2){transition-delay:90ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(3){transition-delay:180ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(4){transition-delay:270ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(5){transition-delay:360ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(6){transition-delay:450ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(1) svg{transition-delay:110ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(2) svg{transition-delay:200ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(3) svg{transition-delay:290ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(4) svg{transition-delay:380ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(5) svg{transition-delay:470ms;}
html.js .anim-cards.is-visible .diff-item:nth-child(6) svg{transition-delay:560ms;}

/* ---------- Galeria "Nosso olhar" ---------- */
html.js .gaze-item{
  opacity:0;
  transition:opacity .75s var(--anim-ease), transform .8s var(--anim-ease);
}
html.js .gaze-item--nelore{transform:translateY(10px);}
html.js .gaze-item--curral{transform:translateX(-8px);}
html.js .gaze-item--novilhas{transform:translateX(8px);}
html.js .gaze-item--fazenda{transform:scale(1.04);}
html.js .anim-gallery.is-visible .gaze-item{
  opacity:1;
  transform:translate(0,0) scale(1);
}
html.js .anim-gallery.is-visible .gaze-item--nelore{transition-delay:0ms;}
html.js .anim-gallery.is-visible .gaze-item--curral{transition-delay:110ms;}
html.js .anim-gallery.is-visible .gaze-item--novilhas{transition-delay:200ms;}
html.js .anim-gallery.is-visible .gaze-item--fazenda{transition-delay:290ms;}
html.js .gaze-item img{transition:transform .7s var(--ease);}
html.js .anim-gallery.is-visible .gaze-item img{transform:scale(1.02);}
html.js .anim-gallery.is-visible .gaze-item:hover img{transform:scale(1.08);}

/* ---------- Como funciona ---------- */
html.js .anim-steps .step{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
html.js .anim-steps .step-num{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--anim-ease), transform .5s var(--anim-ease);
}
html.js .anim-steps .step h3,
html.js .anim-steps .step p{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--anim-ease), transform .55s var(--anim-ease);
}
html.js .anim-steps .step-connector{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--anim-ease);
}
html.js .anim-steps.is-visible .step,
html.js .anim-steps.is-visible .step-num,
html.js .anim-steps.is-visible .step h3,
html.js .anim-steps.is-visible .step p{
  opacity:1;
  transform:translateY(0);
}
html.js .anim-steps.is-visible .step-connector{transform:scaleX(1);}

html.js .anim-steps.is-visible .step:nth-child(1){transition-delay:0ms;}
html.js .anim-steps.is-visible .step:nth-child(2){transition-delay:130ms;}
html.js .anim-steps.is-visible .step:nth-child(3){transition-delay:260ms;}
html.js .anim-steps.is-visible .step:nth-child(4){transition-delay:390ms;}
html.js .anim-steps.is-visible .step:nth-child(5){transition-delay:520ms;}
html.js .anim-steps.is-visible .step:nth-child(1) .step-num{transition-delay:60ms;}
html.js .anim-steps.is-visible .step:nth-child(2) .step-num{transition-delay:190ms;}
html.js .anim-steps.is-visible .step:nth-child(3) .step-num{transition-delay:320ms;}
html.js .anim-steps.is-visible .step:nth-child(4) .step-num{transition-delay:450ms;}
html.js .anim-steps.is-visible .step:nth-child(5) .step-num{transition-delay:580ms;}
html.js .anim-steps.is-visible .step:nth-child(1) h3{transition-delay:160ms;}
html.js .anim-steps.is-visible .step:nth-child(2) h3{transition-delay:290ms;}
html.js .anim-steps.is-visible .step:nth-child(3) h3{transition-delay:420ms;}
html.js .anim-steps.is-visible .step:nth-child(4) h3{transition-delay:550ms;}
html.js .anim-steps.is-visible .step:nth-child(5) h3{transition-delay:680ms;}
html.js .anim-steps.is-visible .step:nth-child(1) p{transition-delay:230ms;}
html.js .anim-steps.is-visible .step:nth-child(2) p{transition-delay:360ms;}
html.js .anim-steps.is-visible .step:nth-child(3) p{transition-delay:490ms;}
html.js .anim-steps.is-visible .step:nth-child(4) p{transition-delay:620ms;}
html.js .anim-steps.is-visible .step:nth-child(5) p{transition-delay:750ms;}
html.js .anim-steps.is-visible .step:nth-child(1) .step-connector{transition-delay:320ms;}
html.js .anim-steps.is-visible .step:nth-child(2) .step-connector{transition-delay:450ms;}
html.js .anim-steps.is-visible .step:nth-child(3) .step-connector{transition-delay:580ms;}
html.js .anim-steps.is-visible .step:nth-child(4) .step-connector{transition-delay:710ms;}

/* ---------- Mapa de atendimento ---------- */
html.js .region-map svg .area{
  opacity:0;
  transition:opacity .6s var(--anim-ease);
}
html.js .region-map svg.map-in .area--consulta{opacity:1; transition-delay:0ms;}
html.js .region-map svg.map-in .area--projeto{opacity:1; transition-delay:420ms;}
html.js .region-map svg.map-in .area--frequente{opacity:1; transition-delay:760ms;}
html.js .region-map svg.map-in .area--base{opacity:1; transition-delay:1080ms;}
html.js .region-map svg #base-paraiso{
  opacity:0;
  transition:opacity .5s var(--anim-ease);
  transition-delay:1420ms;
}
html.js .region-map svg.map-in #base-paraiso{opacity:1;}

/* ---------- CTA final ---------- */
html.js .cta-final-media img{
  transform:scale(1.08);
  transition:transform 1.1s var(--anim-ease);
}
html.js .cta-final.is-visible .cta-final-media img{transform:scale(1);}
html.js .cta-final-body h2,
html.js .cta-final-body p,
html.js .cta-final-body .hero-ctas{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s var(--anim-ease), transform .65s var(--anim-ease);
}
html.js .cta-final-body p{transition-delay:120ms;}
html.js .cta-final-body .hero-ctas{transition-delay:220ms;}
html.js .cta-final.is-visible .cta-final-body h2,
html.js .cta-final.is-visible .cta-final-body p,
html.js .cta-final.is-visible .cta-final-body .hero-ctas{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Contato: colunas opostas ---------- */
html.js .anim-contact-info{
  opacity:0;
  transform:translateX(-18px);
  transition:opacity .7s var(--anim-ease), transform .7s var(--anim-ease);
}
html.js .anim-contact-info.is-visible{opacity:1; transform:translateX(0);}
html.js .anim-contact-form{
  opacity:0;
  transform:translateX(18px);
  transition:opacity .7s var(--anim-ease), transform .7s var(--anim-ease);
}
html.js .anim-contact-form.is-visible{opacity:1; transform:translateX(0);}

/* ---------- Rodapé ---------- */
html.js .anim-footer{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
html.js .anim-footer.is-visible{opacity:1; transform:translateY(0);}

@media (max-width:640px){
  html.js .anim-steps .step-connector{display:none;}
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-fab{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:800;
  width:56px; height:56px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.whatsapp-fab:hover{background:#20bd5a; transform:translateY(-3px) scale(1.05);}
.whatsapp-fab svg{width:29px; height:29px;}

/* ---------- Utilitários ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}