/* Maquete 3D "Do KML à fazenda" (Fazenda Andradas) — port escopado do handoff
   design_handoff_maquete_3d_talhao para a seção [data-m3d] da home.
   Todos os valores (cores, tipografia, tamanhos, timings) são idênticos ao
   handoff; muda só o escopo dos seletores e o canvas/HUD fixos → sticky, para
   que a experiência fique confinada à seção e não sequestre a página. */

[data-m3d]{
  --bg:#f9fdfa; --paper:#f9fdfa; --ink:#08150d; --mint:#00893c; --verde:#00a151; --verde-800:#003e20; --ink-dark:#04150c;
  --line:#cfdbd1; --perim:#e0b23c;
  position:relative;
  background:var(--bg); color:var(--ink);
  font-family:'Urbanist',sans-serif; -webkit-font-smoothing:antialiased;
}
[data-m3d] *{ box-sizing:border-box; }
[data-m3d] a{ color:var(--mint); text-decoration:none; }
[data-m3d] a:hover{ color:var(--ink); }

/* ---------- estrutura: pins sticky (substituem o canvas/HUD fixos) ---------- */
[data-m3d] .m3d-viz{
  position:sticky; top:0; height:100vh; height:100dvh;
  overflow:hidden; z-index:0;
}
[data-m3d] .m3d-gl{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
[data-m3d] .m3d-hudpin{
  position:sticky; top:0; height:100vh; height:100dvh;
  margin-top:-100vh; margin-top:-100dvh;
  z-index:10; pointer-events:none;
}
[data-m3d] .m3d-track{
  position:relative; z-index:5;
  margin-top:-100vh; margin-top:-100dvh;
}

/* ---------- loading ---------- */
[data-m3d] .m3d-loading{
  position:absolute; inset:0; z-index:3; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:'Urbanist',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint);
  transition:opacity .5s ease; pointer-events:none;
}
[data-m3d] .m3d-loading.done{ opacity:0; }

/* ---------- HUD (dentro do pin; top 78px em vez de 20px por causa da navbar fixa) ---------- */
[data-m3d] .m3d-hud{ position:absolute; top:78px; left:24px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
[data-m3d] .m3d-hud .label{ font-family:'Urbanist',sans-serif; font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(8,21,13,.55); }
[data-m3d] .m3d-geo{ position:absolute; top:78px; right:24px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; font-family:'Urbanist',sans-serif; font-weight:600; color:rgba(8,21,13,.6); }
[data-m3d] .m3d-geo .north{ display:flex; align-items:center; gap:6px; }
[data-m3d] .m3d-geo .north .arrow{ font-size:15px; line-height:1; color:var(--ink); will-change:transform; }
[data-m3d] .m3d-geo .north .n{ font-size:10px; letter-spacing:.12em; }
[data-m3d] .m3d-geo .scale{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
[data-m3d] .m3d-geo .scale .bar{ height:5px; border-left:1px solid currentColor; border-right:1px solid currentColor; border-bottom:1px solid currentColor; will-change:width; }
[data-m3d] .m3d-geo .val,[data-m3d] .m3d-geo .alt{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
[data-m3d] .m3d-geo .alt{ opacity:0; transition:opacity .3s ease; }
[data-m3d][data-stage="2"] .m3d-geo .alt,
[data-m3d][data-stage="3"] .m3d-geo .alt,
[data-m3d][data-stage="7"] .m3d-geo .alt{ opacity:1; }

/* ---------- rail ---------- */
[data-m3d] .m3d-rail{ position:absolute; left:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; }
[data-m3d] .dot{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(8,21,13,.3); background:transparent; padding:0; cursor:pointer; transition:background .25s,border-color .25s; pointer-events:auto; }
[data-m3d] .dot.is-active{ background:var(--verde); border-color:var(--verde); }

/* ---------- estágios ---------- */
[data-m3d] .stage{ position:relative; min-height:100vh; min-height:100dvh; }
[data-m3d] .stage[data-kind="hero"]{ min-height:200vh; min-height:200dvh; }
[data-m3d] .stage[data-kind="burst"]{ min-height:130vh; min-height:130dvh; }
[data-m3d] .stage[data-kind="finale"]{ min-height:170vh; min-height:170dvh; }

[data-m3d] .eyebrow{ margin:0 0 14px; font-family:'Urbanist',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); }

/* hero (fase 1–2) */
[data-m3d] .hero{ position:sticky; top:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:0 8vw; max-width:760px; opacity:0; transform:translateY(14px); transition:opacity .4s ease,transform .5s ease; }
[data-m3d] .hero.is-active{ opacity:1; transform:none; }
[data-m3d] .hero h2{ margin:0; font-family:'Urbanist',sans-serif; font-weight:700; font-size:clamp(56px,9vw,124px); line-height:.98; letter-spacing:-.03em; color:var(--ink); }
[data-m3d] .hero .sub{ margin:22px 0 0; font-size:16px; line-height:1.68; color:rgba(8,21,13,.72); max-width:46ch; }
[data-m3d] .hero .dica{ margin:38px 0 0; font-family:'Urbanist',sans-serif; font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(8,21,13,.55); }
[data-m3d] .hero .seta{ display:inline-block; animation:m3dSeta 1.6s ease-in-out infinite; color:var(--verde); }
@keyframes m3dSeta{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* card enxuto (fase 3: número + nome + 1 linha) */
[data-m3d] .card{
  position:sticky; top:calc(50vh - 90px); top:calc(50dvh - 90px); margin-left:auto; margin-right:5vw; width:min(410px,88vw);
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(255,255,255,.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:6px; padding:24px 24px 22px;
  opacity:0; transform:translateY(18px); transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
[data-m3d] .card.is-active{ opacity:1; transform:none; }
[data-m3d] .card .num{ font-family:'Urbanist',sans-serif; font-weight:700; font-size:52px; line-height:.86; letter-spacing:-.04em; color:var(--verde); flex:none; }
[data-m3d] .card .body{ padding-top:3px; }
[data-m3d] .card .eyebrow-row{ display:flex; align-items:center; gap:9px; font-family:'Urbanist',sans-serif; font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(8,21,13,.5); }
[data-m3d] .card .eyebrow-row .tick{ width:20px; height:1px; background:currentColor; opacity:.5; }
[data-m3d] .card h2{ margin:10px 0 10px; font-family:'Urbanist',sans-serif; font-weight:600; font-size:23px; letter-spacing:-.025em; color:var(--ink); line-height:1.12; }
[data-m3d] .card .linha{ margin:0; font-size:13.5px; line-height:1.62; color:rgba(8,21,13,.7); text-wrap:pretty; }
[data-m3d] .card .prov{ margin:12px 0 0; font-family:'Urbanist',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(8,21,13,.45); }
[data-m3d] .card .legend{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid #cfdbd1; display:grid; gap:7px; }
[data-m3d] .card .legend li{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:9px; font-family:'Urbanist',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(8,21,13,.72); }
[data-m3d] .card .legend .sw{ width:10px; height:10px; border-radius:2px; border:1px solid rgba(8,21,13,.18); }
[data-m3d] .card .legend .v{ color:rgba(8,21,13,.45); text-align:right; white-space:nowrap; }

/* burst — "Tudo isso e muito mais" (fase 4): FIXO no centro exato da viewport, à frente de tudo, sem se mover */
[data-m3d] .burst{ position:fixed; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 8vw; pointer-events:none; opacity:0; transition:opacity .45s ease; }
[data-m3d] .burst::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 62% 46% at 50% 50%, rgba(249,253,250,.86) 0%, rgba(249,253,250,.6) 42%, rgba(249,253,250,0) 72%); }
[data-m3d] .burst.is-active{ opacity:1; }
[data-m3d] .burst .eyebrow{ color:var(--mint); }
[data-m3d] .burst h2{ margin:0; font-family:'Urbanist',sans-serif; font-weight:700; font-size:clamp(44px,7.5vw,104px); line-height:.98; letter-spacing:-.03em; color:var(--ink); }
[data-m3d] .burst .sub{ margin:22px auto 0; font-size:15px; line-height:1.68; color:rgba(8,21,13,.7); max-width:52ch; }

/* finale (fase 5) */
[data-m3d] .finale{ position:sticky; top:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 8vw 12vh; padding-bottom:12dvh; max-width:780px; opacity:0; transform:translateY(14px); transition:opacity .4s ease,transform .5s ease; }
[data-m3d] .finale.is-active{ opacity:1; transform:none; }
[data-m3d] .finale h2{ margin:0; font-family:'Urbanist',sans-serif; font-weight:700; font-size:clamp(40px,6vw,78px); line-height:1; letter-spacing:-.03em; color:var(--ink); }
[data-m3d] .finale .sub{ margin:18px 0 0; font-size:15px; line-height:1.68; color:rgba(8,21,13,.72); max-width:56ch; }
[data-m3d] .ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
[data-m3d] .cta{ display:inline-flex; align-items:center; gap:8px; background:var(--verde); color:#f9fdfa; border:1px solid var(--verde); border-radius:3px; padding:13px 22px; font-size:14px; font-weight:500; transition:filter .2s; }
[data-m3d] .cta:hover{ filter:brightness(1.09); color:#f9fdfa; }
[data-m3d] .cta-sec{ background:transparent; color:var(--ink); border-color:rgba(8,21,13,.3); }
[data-m3d] .cta-sec:hover{ border-color:var(--verde); filter:none; color:var(--mint); }

/* ---------- fallback (sem WebGL2) ---------- */
[data-m3d] .m3d-fallback{ display:none; position:relative; z-index:20; background:var(--bg); }
[data-m3d][data-nogl] .m3d-fallback{ display:block; }
[data-m3d][data-nogl] .m3d-viz,
[data-m3d][data-nogl] .m3d-hudpin,
[data-m3d][data-nogl] .m3d-track{ display:none; }
[data-m3d] .m3d-fallback .fb-hero{ min-height:70vh; min-height:70dvh; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:6vw; }
[data-m3d] .m3d-fallback h2{ font-family:'Urbanist',sans-serif; font-weight:700; letter-spacing:-.03em; margin:0; font-size:clamp(36px,6vw,72px); color:var(--ink); }
[data-m3d] .m3d-fallback .fb-sub{ max-width:56ch; line-height:1.68; color:rgba(8,21,13,.72); }

/* ---------- mobile ---------- */
@media (max-width:860px){
  [data-m3d] .m3d-hud .label{ display:none; }
  [data-m3d] .stage{ display:flex; }
  [data-m3d] .card{ margin:0 auto; top:auto; bottom:3vh; bottom:3dvh; align-self:flex-end; width:min(430px,92vw); padding:16px 18px; }
  [data-m3d] .card .num{ font-size:40px; }
  [data-m3d] .card h2{ font-size:20px; }
  [data-m3d] .hero,[data-m3d] .finale,[data-m3d] .burst{ padding-left:7vw; padding-right:7vw; }
  [data-m3d] .m3d-rail{ display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-m3d] .hero,[data-m3d] .finale,[data-m3d] .card,[data-m3d] .burst{ transition:none; }
  [data-m3d] .hero .seta{ animation:none; }
}