/* =========================================================================
   CENTRO COMERCIAL BEIJA-FLOR — Apresentação Comercial
   Paleta: Verde #566049 · Branco #F4F2EC · Bege #B69876
   Tipografia: Mr Eaves Mod OT (local) → Jost (fallback)
   ========================================================================= */

/* ---- Original brand typeface: Mr Eaves Mod OT (self-hosted) ---- */
@font-face{
  font-family:'Mr Eaves Mod OT'; font-style:normal; font-weight:300; font-display:swap;
  src:local('Mr Eaves Mod OT Light'), local('MrEavesModOT-Light'),
      url('../fonts/MrEavesModOT-Light.otf') format('opentype');
}
@font-face{
  font-family:'Mr Eaves Mod OT'; font-style:normal; font-weight:400; font-display:swap;
  src:local('Mr Eaves Mod OT Reg'), local('MrEavesModOT-Reg'),
      url('../fonts/MrEavesModOT-Reg.otf') format('opentype');
}
@font-face{
  font-family:'Mr Eaves Mod OT'; font-style:normal; font-weight:500; font-display:swap;
  src:local('Mr Eaves Mod OT Book'), local('MrEavesModOT-Book'),
      url('../fonts/MrEavesModOT-Book.otf') format('opentype');
}
@font-face{
  font-family:'Mr Eaves Mod OT'; font-style:normal; font-weight:700; font-display:swap;
  src:local('Mr Eaves Mod OT Bold'), local('MrEavesModOT-Bold'),
      url('../fonts/MrEavesModOT-Bold.otf') format('opentype');
}

:root{
  --verde:#566049;
  --verde-deep:#3f4836;
  --verde-ink:#2a3024;
  --branco:#F4F2EC;
  --bege:#B69876;
  --bege-soft:#cbb398;

  --font: 'Mr Eaves Mod OT','Mr Eaves Modern OT','Mr Eaves Sans OT','Jost',
          'Century Gothic', system-ui, -apple-system, Segoe UI, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --shadow: 0 30px 80px -30px rgba(42,48,36,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  font-weight:300;
  background:var(--branco);
  color:var(--verde);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Shared type ---------- */
.eyebrow{
  font-weight:400; letter-spacing:.42em; text-transform:uppercase;
  font-size:clamp(.62rem,1.1vw,.78rem); color:var(--bege);
}
.eyebrow--green{ color:var(--bege); }
.eyebrow--bege{ color:var(--bege-soft); }

.section-title{
  font-weight:400; line-height:.92; color:var(--verde);
  font-size:clamp(3.2rem,11vw,8.5rem); letter-spacing:-.02em;
}
.display{
  font-weight:400; line-height:1.0; letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,5.2rem);
}
.display--light{ color:var(--branco); }
.display__accent{ color:var(--bege); }

/* =========================================================================
   INTRO / NETFLIX-STYLE LOADER
   ========================================================================= */
.intro{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--branco);
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(86,96,73,.07) 100%);
}
.intro__stage{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:0; width:min(90vw,640px); text-align:center;
}

/* single logo — icon draws centered, then wordmark assembles as it glides left */
.intro__logo-wrap{ width:min(86vw,460px); }
.intro-logo{
  width:100%; height:auto; overflow:visible;
  transform:translateX(38.7%);
  animation:logoCenter 1.05s var(--ease-out) 1.55s forwards;
  filter:drop-shadow(0 16px 30px rgba(86,96,73,.16));
}
@keyframes logoCenter{ to{ transform:translateX(0); } }

.il-word path, .il-word rect{ fill:var(--verde); }
.il-cc{ fill:var(--verde); font-family:var(--font); font-weight:400; font-size:11px; }
.il-word{ opacity:0; animation:wordIn 1s var(--ease-out) 1.7s forwards; }
@keyframes wordIn{ to{ opacity:1; } }

.il-icon{
  fill:var(--verde); fill-opacity:0;
  stroke:var(--verde); stroke-width:.7;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:iconDraw 1.5s var(--ease-out) .25s forwards,
            iconFill .85s ease 1.2s forwards;
}
@keyframes iconDraw{ to{ stroke-dashoffset:0; } }
@keyframes iconFill{ to{ fill-opacity:1; stroke-opacity:0; } }

/* loading bar */
.intro__bar{
  position:relative; width:min(62vw,300px); height:2px; margin-top:30px;
  background:rgba(86,96,73,.16); border-radius:2px; overflow:hidden;
}
.intro__bar-fill{
  position:absolute; inset:0; transform-origin:left;
  background:linear-gradient(90deg,var(--bege),var(--verde));
  transform:scaleX(0); animation:barFill 2.5s var(--ease) .2s forwards;
}
@keyframes barFill{ to{ transform:scaleX(1); } }

/* enter button */
.intro__btn{
  margin-top:42px; display:inline-flex; align-items:center; gap:.9em;
  padding:1.05em 1.8em; border-radius:999px;
  background:var(--verde); color:var(--branco);
  font-weight:400; font-size:clamp(.9rem,1.5vw,1.05rem); letter-spacing:.02em;
  opacity:0; transform:translateY(14px); pointer-events:none;
  box-shadow:0 20px 45px -18px rgba(86,96,73,.7);
  animation:btnIn .8s var(--ease-out) 2.9s forwards;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
@keyframes btnIn{ to{ opacity:1; transform:none; pointer-events:auto; } }
.intro__btn:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 28px 55px -16px rgba(86,96,73,.8); background:var(--verde-deep); }
.intro__btn-arrow{ display:inline-grid; place-items:center; width:1.5em; height:1.5em; }
.intro__btn-arrow svg{ width:100%; transition:transform .35s var(--ease); }
.intro__btn:hover .intro__btn-arrow svg{ transform:translateX(4px); }

body.entered .intro{ opacity:0; visibility:hidden; pointer-events:none; }

/* =========================================================================
   BRAND BAR + NAV + CONTROLS
   ========================================================================= */
.brandbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:18px;
  padding:22px clamp(20px,4vw,44px);
  opacity:0; transform:translateY(-12px); transition:opacity .6s, transform .6s;
  pointer-events:none;
}
.brandbar__logo{ width:clamp(116px,12vw,150px); filter:none; transition:filter .5s; }
.brandbar__progress{ flex:1; height:1px; background:rgba(86,96,73,.18); position:relative; max-width:none; }
.brandbar__progress span{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--bege); transition:width .5s var(--ease); }
body.entered .brandbar{ opacity:1; transform:none; }
/* logo section: the section IS the logo, so suppress the redundant top bar */
body.entered.at-logo .brandbar{ opacity:0; transform:translateY(-12px); pointer-events:none; }
/* On dark sections, recolor the bar */
body.dark-ui .brandbar__logo{ filter:brightness(0) invert(1) opacity(.92); }
body.dark-ui .brandbar__progress{ background:rgba(244,242,236,.22); }

.dots{
  position:fixed; right:clamp(14px,2.4vw,30px); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:16px;
  opacity:0; pointer-events:none; transition:opacity .6s;
}
body.entered .dots{ opacity:1; pointer-events:auto; }
.dots__item{ position:relative; display:flex; align-items:center; justify-content:flex-end; padding:5px; }
.dots__item span{
  width:9px; height:9px; border-radius:50%; background:rgba(86,96,73,.32);
  transition:all .35s var(--ease); box-shadow:0 0 0 0 rgba(182,152,118,0);
}
.dots__item em{
  position:absolute; right:24px; white-space:nowrap; font-style:normal;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verde);
  opacity:0; transform:translateX(8px); transition:all .35s var(--ease); pointer-events:none;
}
.dots__item:hover em{ opacity:.7; transform:none; }
.dots__item.is-active span{ background:var(--bege); transform:scale(1.5); box-shadow:0 0 0 5px rgba(182,152,118,.16); }
body.dark-ui .dots__item span{ background:rgba(244,242,236,.4); }
body.dark-ui .dots__item em{ color:var(--branco); }
body.dark-ui .dots__item.is-active span{ background:var(--bege); }

.ctl{
  position:fixed; z-index:60; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--verde);
  background:rgba(244,242,236,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(86,96,73,.14); box-shadow:0 8px 24px -12px rgba(42,48,36,.5);
  opacity:0; pointer-events:none; transition:opacity .5s, transform .3s, background .4s, color .4s;
}
body.entered .ctl{ opacity:1; pointer-events:auto; }
.ctl:hover{ transform:scale(1.07); }
.ctl--sound{ left:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,30px); }
.ctl__on{ display:none; }
.ctl.is-on .ctl__on{ display:block; }
.ctl.is-on .ctl__off{ display:none; }
.ctl svg{ width:22px; height:22px; }
body.dark-ui .ctl{ color:var(--branco); background:rgba(42,48,36,.4); border-color:rgba(244,242,236,.18); }

.scrollhint{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:55;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--verde); opacity:0; transition:opacity .6s; pointer-events:none;
}
body.entered .scrollhint{ opacity:.65; animation:hintBob 2s ease-in-out infinite; }
body.entered.hide-hint .scrollhint{ opacity:0; animation:none; }
.scrollhint span{ font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; }
.scrollhint svg{ width:20px; height:20px; }
body.dark-ui .scrollhint{ color:var(--branco); }
@keyframes hintBob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* =========================================================================
   DECK / PANELS
   ========================================================================= */
.deck{
  position:fixed; inset:0; z-index:10;
  overflow-y:scroll; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-behavior:smooth;
  opacity:0; pointer-events:none; transition:opacity 1s ease .15s;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar{ display:none; }
body.entered .deck{ opacity:1; pointer-events:auto; }

.panel{
  position:relative; height:100vh; height:100dvh;
  scroll-snap-align:start; scroll-snap-stop:always;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; background:var(--verde-ink);
}
/* Exposição reduzida (escurecer) — não opacidade */
.bg-video--dark{ filter:brightness(.32) saturate(.82) contrast(1.06); }
.bg-video--dim{ filter:brightness(.6) saturate(.98) contrast(1.02); }

.panel__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.panel__scrim--soft{ background:radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(86,96,73,.10)); }
.panel__scrim--bottom{ background:linear-gradient(to top, rgba(42,48,36,.7), transparent 45%); }
.panel__scrim--map{ background:
  radial-gradient(90% 90% at 50% 42%, rgba(42,48,36,.25), rgba(42,48,36,.78)),
  linear-gradient(to top, rgba(42,48,36,.6), transparent 60%); }
.panel__scrim--msg{ background:
  linear-gradient(100deg, rgba(42,48,36,.82) 0%, rgba(42,48,36,.34) 52%, rgba(42,48,36,.58) 100%); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.panel.is-in [data-reveal]{ opacity:1; transform:none; }
.panel.is-in [data-reveal]:nth-child(2){ transition-delay:.12s; }
.panel.is-in [data-reveal]:nth-child(3){ transition-delay:.24s; }
.panel.is-in [data-reveal]:nth-child(4){ transition-delay:.36s; }

/* ---------- kicker ---------- */
.kicker{ position:absolute; bottom:9vh; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:18px; }
.kicker__text{ font-weight:400; letter-spacing:.5em; text-transform:uppercase; font-size:.78rem; color:var(--verde); }
.kicker__line{ width:54px; height:1px; background:rgba(86,96,73,.4); }

/* ---------- Section 1 (logo) keeps brand white feel ---------- */
.panel--logo{ background:var(--branco); }
.panel--logo .bg-video{ object-fit:contain; background:var(--branco); }

/* =========================================================================
   SECTION 3 — LOCALIZAÇÃO
   ========================================================================= */
.panel--loc{ background:
  radial-gradient(140% 120% at 85% -10%, rgba(182,152,118,.16), transparent 45%),
  var(--branco); }
.loc{ width:min(1120px,90vw); display:flex; flex-direction:column; gap:clamp(18px,2.6vh,30px); padding:9vh 0 6vh; }
.loc__head .eyebrow{ margin-bottom:.7em; display:block; }
.panel--loc .section-title{ font-size:clamp(2.6rem,7vw,5.2rem); }

.loc__map{ position:relative; margin:0; }
.loc__map-frame{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid rgba(86,96,73,.14);
  height:clamp(220px,40vh,420px); background:#e3e1d8;
}
.loc__map-frame iframe{ position:relative; z-index:2; width:100%; height:100%; border:0; filter:grayscale(.12) contrast(1.02); }
/* skeleton shown until/if the map renders over it */
.loc__map-skel{ position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background:linear-gradient(135deg,#e7e5dc,#d8d6cc); }
.loc__map-skel-grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(86,96,73,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(86,96,73,.10) 1px,transparent 1px);
  background-size:38px 38px; }
.loc__map-skel-label{ position:relative; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--verde); opacity:.55; }

.loc__pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); pointer-events:none; z-index:4; }
.loc__pin svg{ width:44px; height:44px; filter:drop-shadow(0 8px 10px rgba(42,48,36,.45)); animation:pinDrop .8s var(--ease-out) both; }
.loc__pin-pulse{ position:absolute; left:50%; top:100%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(182,152,118,.5); }
.loc__pin-pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(182,152,118,.5); animation:pinPulse 2.2s ease-out infinite; }
@keyframes pinPulse{ 0%{ transform:scale(1); opacity:.6;} 100%{ transform:scale(5); opacity:0;} }
@keyframes pinDrop{ 0%{ transform:translateY(-26px); opacity:0;} 60%{ transform:translateY(4px);} 100%{ transform:translateY(0); opacity:1;} }

.loc__maplink{
  position:absolute; right:14px; bottom:14px; z-index:5;
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.85rem; letter-spacing:.01em; color:var(--verde); text-decoration:none;
  padding:.55em .9em; border-radius:999px;
  background:rgba(244,242,236,.92); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -12px rgba(42,48,36,.5); transition:gap .3s var(--ease), color .3s, transform .3s;
}
.loc__maplink svg{ width:16px; height:16px; }
.loc__maplink:hover{ gap:.9em; color:var(--bege); transform:translateY(-2px); }

.loc__below{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.loc__desc{ font-weight:300; line-height:1.5; font-size:clamp(1.15rem,2.1vw,1.7rem); color:var(--verde-deep); }
.loc__desc strong{ font-weight:500; color:var(--verde); }
.loc__meta{ display:flex; flex-direction:column; gap:clamp(16px,2.4vh,26px); }
.loc__address{ font-weight:300; line-height:1.5; font-size:clamp(.92rem,1.3vw,1.05rem); color:var(--verde); }
.loc__address-label{ display:block; font-weight:400; letter-spacing:.3em; text-transform:uppercase; font-size:.62rem; color:var(--bege); margin-bottom:.6em; }
.loc__stats{ display:flex; gap:clamp(22px,3vw,42px); }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat__num{ font-weight:400; font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1; color:var(--bege); letter-spacing:-.01em; }
.stat__unit{ font-weight:300; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); opacity:.7; }

/* =========================================================================
   SECTION 4 — CONEXÕES / PROXIMIDADE
   ========================================================================= */
.conn{ position:relative; z-index:2; width:min(1100px,92vw); display:flex; flex-direction:column; gap:clamp(26px,5vh,60px); color:var(--branco); padding:10vh 0; }
.conn__head .eyebrow{ display:block; margin-bottom:.9em; }
.conn__stage{ display:flex; flex-direction:column; gap:clamp(20px,4vh,40px); }

.conn__times{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,30px); }
.ctime{
  position:relative; display:flex; align-items:baseline; gap:.4em;
  padding:16px 22px 14px; border-radius:16px;
  background:rgba(244,242,236,.06); border:1px solid rgba(244,242,236,.16);
  backdrop-filter:blur(10px);
  opacity:0; transform:translateY(18px) scale(.96);
}
.panel.is-in .ctime{ animation:ctimeIn .7s var(--ease-out) forwards; }
.panel.is-in .ctime[data-t="1"]{ animation-delay:.25s; }
.panel.is-in .ctime[data-t="2"]{ animation-delay:.45s; }
.panel.is-in .ctime[data-t="3"]{ animation-delay:.65s; }
@keyframes ctimeIn{ to{ opacity:1; transform:none; } }
.ctime b{ font-weight:500; font-size:clamp(2rem,4vw,3.1rem); line-height:1; color:var(--bege-soft); }
.ctime span{ font-weight:300; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--branco); opacity:.8; }
.ctime em{ font-style:normal; font-weight:300; margin-left:.4em; font-size:.95rem; color:var(--branco); opacity:.85; align-self:center; }

/* route svg */
.conn__route{ width:100%; height:auto; max-height:42vh; overflow:visible; }
.conn__route-base{ stroke:rgba(244,242,236,.16); stroke-width:2; stroke-dasharray:2 7; stroke-linecap:round; }
.conn__route-line{ stroke:url(#routeGrad); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.panel.is-in .conn__route-line{ animation:routeDraw 2.2s var(--ease) .5s forwards; }
@keyframes routeDraw{ to{ stroke-dashoffset:0; } }
.conn__route-dot{ fill:var(--branco); opacity:0; filter:drop-shadow(0 0 8px rgba(244,242,236,.9)); offset-path:path("M70,170 C190,70 250,70 360,130 C470,190 540,180 650,80"); }
.panel.is-in .conn__route-dot{ animation:dotRun 2.2s var(--ease) .5s forwards; }
@keyframes dotRun{ 0%{ opacity:0; offset-distance:0%;} 8%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; offset-distance:100%; } }

.conn__node{ transform:translate(var(--x),var(--y)); opacity:0; }
.panel.is-in .conn__node{ animation:nodeIn .6s var(--ease-out) forwards; }
.panel.is-in .conn__node[data-n="1"]{ animation-delay:.7s; }
.panel.is-in .conn__node[data-n="2"]{ animation-delay:1.5s; }
.panel.is-in .conn__node[data-n="3"]{ animation-delay:2.2s; }
@keyframes nodeIn{ from{ opacity:0;} to{ opacity:1;} }
.conn__node-ring{ fill:none; stroke:rgba(244,242,236,.5); stroke-width:1.4; }
.conn__node--hero .conn__node-ring{ stroke:var(--bege); stroke-width:2; }
.conn__node-core{ fill:var(--branco); }
.conn__node--hero .conn__node-core{ fill:var(--bege); }
.conn__node--hero .conn__node-ring{ animation:nodePulse 2.4s ease-out infinite 2s; transform-origin:center; transform-box:fill-box; }
@keyframes nodePulse{ 0%{ transform:scale(1); opacity:1;} 70%{ transform:scale(2.4); opacity:0;} 100%{ opacity:0; } }
.conn__node text{
  fill:var(--branco); font-family:var(--font); font-weight:400;
  font-size:11px; letter-spacing:.18em; text-anchor:middle;
  paint-order:stroke;
}
.conn__node--hero text{ fill:var(--bege-soft); font-size:13px; font-weight:500; }

/* =========================================================================
   SECTION 5 — OPORTUNIDADE / MENSAGENS
   ========================================================================= */
.panel--msg{ }
.msgs{ position:relative; z-index:2; width:min(980px,90vw); color:var(--branco); }
.msgs__eyebrow{ display:block; margin-bottom:clamp(20px,5vh,48px); }
.msgs__list{ list-style:none; position:relative; min-height:clamp(200px,38vh,300px); }
.msg{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:clamp(18px,3vh,32px);
  opacity:0; transform:translateY(28px); pointer-events:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.msg.is-on{ opacity:1; transform:none; }
.msg__icon{ width:clamp(48px,6vw,72px); height:clamp(48px,6vw,72px); color:var(--bege); }
.msg__icon svg{ width:100%; height:100%; }
.msg__text{
  font-weight:300; line-height:1.16; letter-spacing:-.005em;
  font-size:clamp(1.6rem,3.9vw,3rem); color:var(--branco); max-width:19ch;
}
.msg__text b{ font-weight:500; color:#fff; }

.msgs__nav{ display:flex; gap:12px; margin-top:clamp(26px,5vh,46px); }
.msgs__dot{ width:38px; height:4px; border-radius:3px; background:rgba(244,242,236,.25); transition:background .4s, transform .4s; }
.msgs__dot.is-on{ background:var(--bege); }
.msgs__dot:hover{ background:rgba(244,242,236,.55); }

/* progress sweep inside active dot */
.msgs__dot.is-on{ position:relative; overflow:hidden; background:rgba(244,242,236,.25); }
.msgs__dot.is-on::after{ content:""; position:absolute; inset:0; background:var(--bege); transform-origin:left; transform:scaleX(0); animation:dotProg var(--msg-dur,6500ms) linear forwards; }
@keyframes dotProg{ to{ transform:scaleX(1); } }

/* =========================================================================
   SHARED — vertical edge label (Ficha / Plantas)
   ========================================================================= */
.vlabel{
  position:absolute; left:clamp(16px,3.5vw,46px); top:50%;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.4rem); color:var(--bege);
  white-space:nowrap; z-index:3; pointer-events:none;
}

/* =========================================================================
   SECTION 5 — FICHA TÉCNICA
   ========================================================================= */
.panel--ficha{ background:
  radial-gradient(120% 120% at 90% 8%, rgba(182,152,118,.16), transparent 52%),
  var(--verde); }
.ficha__mark{ position:absolute; right:-7%; bottom:-14%; width:min(58vw,640px); height:auto; fill:rgba(244,242,236,.05); z-index:0; }
.ficha{ position:relative; z-index:2; width:min(840px,80vw); margin-left:clamp(46px,10vw,130px);
  display:flex; flex-direction:column; gap:clamp(16px,3vh,34px); color:var(--branco); }
.ficha__eyebrow{ display:block; }
.ficha__list{ list-style:none; display:flex; flex-direction:column; }
.frow{ display:flex; align-items:center; gap:clamp(16px,2.6vw,32px);
  padding:clamp(10px,1.7vh,18px) 0; border-bottom:1px solid rgba(244,242,236,.16);
  opacity:0; transform:translateX(-24px); }
.panel.is-in .frow{ animation:frowIn .7s var(--ease-out) forwards; }
.panel.is-in .frow[data-r="1"]{ animation-delay:.2s; }
.panel.is-in .frow[data-r="2"]{ animation-delay:.34s; }
.panel.is-in .frow[data-r="3"]{ animation-delay:.48s; }
.panel.is-in .frow[data-r="4"]{ animation-delay:.62s; }
.panel.is-in .frow[data-r="5"]{ animation-delay:.76s; }
@keyframes frowIn{ to{ opacity:1; transform:none; } }
.frow__ic{ flex:none; width:clamp(34px,3.3vw,50px); height:clamp(34px,3.3vw,50px); color:var(--bege-soft); }
.frow__ic svg{ width:100%; height:100%; }
.frow__val{ display:flex; align-items:baseline; gap:.55em; }
.frow__num{ font-weight:400; font-size:clamp(2.1rem,5.2vw,3.7rem); line-height:1; color:var(--branco); letter-spacing:-.01em; }
.frow__txt{ font-weight:300; font-size:clamp(1rem,1.9vw,1.45rem); color:var(--branco); opacity:.86; }
.frow__txt--solo{ font-size:clamp(1.35rem,2.8vw,2.1rem); opacity:1; }

/* =========================================================================
   SECTION 6 — PLANTAS
   ========================================================================= */
.panel--plant{ background:
  radial-gradient(110% 110% at 88% 16%, rgba(182,152,118,.14), transparent 52%),
  var(--verde); }
.plant__circle{ position:absolute; right:-9%; top:50%; transform:translateY(-50%);
  width:min(36vw,380px); aspect-ratio:1; border-radius:50%; background:rgba(182,152,118,.45); opacity:.45; z-index:0; }
.plant{ position:relative; z-index:2; width:min(1000px,86vw); margin-left:clamp(46px,10vw,130px);
  display:flex; flex-direction:column; gap:clamp(14px,2.6vh,28px); color:var(--branco); }
.plant__head .eyebrow{ display:block; margin-bottom:.7em; }
.plant__stage{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; width:100%; }
.plant__card{ position:relative; width:100%; height:clamp(220px,44vh,440px);
  background:var(--branco); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.plant__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:16px;
  opacity:0; transform:scale(1.02); transition:opacity .6s var(--ease), transform 6s ease; }
.plant__img.is-on{ opacity:1; transform:scale(1); }
.plant__toggle{ display:inline-flex; gap:6px; background:rgba(244,242,236,.1); padding:5px;
  border-radius:999px; border:1px solid rgba(244,242,236,.2); }
.plant__btn{ padding:.6em 1.4em; border-radius:999px; color:var(--branco); font-size:.92rem; opacity:.72; transition:all .3s var(--ease); }
.plant__btn:hover{ opacity:1; }
.plant__btn.is-on{ background:var(--bege); color:var(--verde-ink); opacity:1; font-weight:500; }
.plant__card{ cursor:zoom-in; }
.plant__card:focus-visible{ outline:2px solid var(--bege); outline-offset:3px; }
.plant__zoom{ position:absolute; right:12px; top:12px; z-index:5; display:inline-flex; align-items:center; gap:.4em;
  padding:.45em .8em; border-radius:999px; font-size:.78rem; letter-spacing:.04em; color:var(--verde-ink);
  background:rgba(244,242,236,.86); backdrop-filter:blur(4px); box-shadow:0 6px 16px -8px rgba(42,48,36,.5);
  opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none; }
.plant__zoom svg{ width:15px; height:15px; }
.plant__card:hover .plant__zoom, .plant__card:focus-visible .plant__zoom{ opacity:1; transform:none; }
.plant__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; width:100%; }
.plant__expand{ display:inline-flex; align-items:center; gap:.6em; color:var(--branco); font-size:.9rem;
  padding:.6em 1.1em; border-radius:999px; border:1px solid rgba(244,242,236,.28); transition:all .3s var(--ease); }
.plant__expand svg{ width:17px; height:17px; }
.plant__expand:hover{ background:rgba(244,242,236,.12); transform:translateY(-2px); }

/* ---- Lightbox de plantas ---- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; }
.lightbox.open{ display:block; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(20,24,16,.9); backdrop-filter:blur(7px);
  animation:lbFade .3s ease; }
@keyframes lbFade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__stage{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; cursor:grab; }
.lightbox__stage.grabbing{ cursor:grabbing; }
.lightbox__img{ max-width:92vw; max-height:80vh; object-fit:contain; background:#fff; border-radius:10px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6); transform-origin:0 0; will-change:transform;
  user-select:none; -webkit-user-drag:none; touch-action:none; animation:lbPop .35s var(--ease-out); }
@keyframes lbPop{ from{ opacity:0; scale:.96; } to{ opacity:1; scale:1; } }
.lightbox__close{ position:absolute; top:18px; right:18px; z-index:3; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--branco); background:rgba(244,242,236,.12);
  border:1px solid rgba(244,242,236,.25); transition:background .3s, transform .3s; }
.lightbox__close:hover{ background:rgba(244,242,236,.22); transform:rotate(90deg); }
.lightbox__close svg{ width:22px; height:22px; }
.lightbox__bar{ position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; gap:14px 22px;
  align-items:center; justify-content:center; flex-wrap:wrap; color:var(--branco); padding:0 20px; pointer-events:none; }
.lightbox__bar > *{ pointer-events:auto; }
.lightbox__title{ font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color:var(--bege-soft); }
.lightbox__hint{ font-size:.76rem; opacity:.55; }
.lightbox__btn{ font-size:.84rem; color:var(--branco); text-decoration:none; padding:.5em 1.05em; border-radius:999px;
  border:1px solid rgba(244,242,236,.3); transition:background .3s; }
.lightbox__btn:hover{ background:rgba(244,242,236,.12); }

/* =========================================================================
   SECTIONS 8 & 9 — VÍDEOS (IA / FINAL)
   ========================================================================= */
.panel--video{ background:var(--verde-ink); }

/* =========================================================================
   SECTION 10 — CONTATO
   ========================================================================= */
.panel--contato{ background:
  radial-gradient(120% 120% at 80% 18%, rgba(182,152,118,.18), transparent 56%),
  var(--verde); }
.contato__circle{ position:absolute; border-radius:50%; z-index:0; }
.contato__circle--a{ width:min(42vw,460px); aspect-ratio:1; right:-9%; top:-13%;
  border:1px solid rgba(182,152,118,.4); animation:floatA 10s ease-in-out infinite; }
.contato__circle--b{ width:min(26vw,300px); aspect-ratio:1; left:-7%; bottom:-11%;
  background:rgba(182,152,118,.1); animation:floatB 13s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(18px); } }
@keyframes floatB{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
.contato__mark{ position:absolute; right:5%; bottom:6%; width:min(30vw,300px); height:auto; fill:rgba(244,242,236,.05); z-index:0; }
.contato{ position:relative; z-index:2; width:min(900px,88vw);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(12px,1.8vh,22px); color:var(--branco); }
.contato .eyebrow{ display:block; }
.contato__title{ font-weight:400; line-height:.94; font-size:clamp(2.8rem,9vw,6.6rem); letter-spacing:-.02em; color:var(--branco); }
.contato__sub{ font-weight:300; font-size:clamp(1.15rem,2.6vw,1.9rem); color:var(--bege-soft); }
.contato__links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(10px,2vh,20px); }
.clink{ display:inline-flex; align-items:center; gap:.7em; padding:.85em 1.45em; border-radius:999px;
  text-decoration:none; color:var(--branco); border:1px solid rgba(244,242,236,.28);
  font-size:clamp(.95rem,1.5vw,1.1rem); transition:transform .3s var(--ease), background .3s, border-color .3s; }
.clink:hover{ background:rgba(244,242,236,.08); transform:translateY(-2px); }
.clink--cta{ background:var(--bege); color:var(--verde-ink); border-color:var(--bege); font-weight:500; }
.clink--cta:hover{ background:var(--bege-soft); border-color:var(--bege-soft); }
.clink__ic{ width:1.3em; height:1.3em; display:inline-grid; place-items:center; flex:none; }
.clink__ic svg{ width:100%; height:100%; }
.clink em{ font-style:normal; opacity:.65; margin-left:.45em; font-size:.82em; }
.contato__logo{ width:clamp(150px,18vw,220px); margin-top:clamp(16px,4vh,38px); opacity:.94; }

/* =========================================================================
   BEIJA-FLOR QUE CRUZA A TELA (flyby)
   ========================================================================= */
.flybird{
  position:fixed; left:0; top:var(--fly-top,28vh); z-index:50;
  width:clamp(38px,5.2vw,72px); pointer-events:none;
  opacity:0; color:var(--verde); will-change:translate,rotate,opacity;
}
body.dark-ui .flybird{ color:var(--branco); }
.flybird svg{ width:100%; height:auto; display:block; fill:currentColor;
  transform:scaleX(-1); transform-origin:center; filter:drop-shadow(0 6px 12px rgba(42,48,36,.28)); }
.flybird.fly{ animation:flyAcross var(--fly-dur,6.5s) cubic-bezier(.45,.05,.55,.95) forwards; }
.flybird.fly svg{ animation:flap .15s ease-in-out infinite; }
@keyframes flyAcross{
  0%{   opacity:0; translate:-16vw 0;   rotate:7deg; }
  8%{   opacity:1; }
  24%{  translate:22vw -7vh; rotate:-5deg; }
  46%{  translate:46vw 5vh;  rotate:6deg; }
  70%{  translate:72vw -6vh; rotate:-4deg; }
  90%{  opacity:1; }
  100%{ opacity:0; translate:120vw 2vh; rotate:6deg; }
}
@keyframes flap{ 0%,100%{ scale:1 1; } 50%{ scale:1 .82; } }
@media (prefers-reduced-motion:reduce){ .flybird{ display:none; } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .loc__below{ grid-template-columns:1fr; gap:22px; }
  .loc{ padding:13vh 0 9vh; }
  .loc__head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .conn__route{ max-height:34vh; }
  .conn__times{ gap:12px; }
  .ctime{ padding:12px 16px; }
  .ficha, .plant{ margin-left:clamp(40px,12vw,90px); }
  .vlabel{ font-size:1.2rem; left:14px; }
  .dots{ display:none; }
}
@media (max-width:560px){
  .ctime{ flex:1 1 100%; }
  .conn__node text{ font-size:13px; }
  .msg__text{ max-width:100%; }
  .brandbar__progress{ display:none; }
  .vlabel{ display:none; }
  .ficha, .plant, .contato{ margin-left:0; }
  .ficha, .plant{ width:88vw; }
  .frow__txt--solo{ font-size:1.3rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .intro__btn{ opacity:1; transform:none; pointer-events:auto; }
  .intro-logo{ transform:none; }
  .il-word{ opacity:1; }
  .il-icon{ fill-opacity:1; stroke-opacity:0; }
}