/* ============================================================
   ATERIS — site cinematográfico controlado por scroll
   Direção de arte: fundo cinza-claro quente, entidade de
   partículas grafite + turquesa, tipografia grotesk premium.
   ============================================================ */

:root{
  --bg-hi:     #f1efeb;
  --bg:        #eceae6;
  --bg-deep:   #e2e0db;
  --ink:       #1c1e23;
  --ink-soft:  #3a3e47;
  --dim:       #71767f;
  --nav-bg:    rgba(236,234,230,.82);
  --ctrl-bg:   rgba(255,255,255,.42);
  --ctrl-line: rgba(28,30,35,.14);
  --hair:      rgba(28,30,35,.25);
  --shadow-rgb: 24,26,31;
  --shadow-a:  .30;
  --turq:      #0fa895;
  --turq-hi:   #12c2ab;
  --turq-ink:  #096a5f; /* turquesa para TEXTO sobre fundo claro (WCAG ≥4.5:1) */
  --panel:     #14171d;
  --panel-2:   #1b1f27;
  --panel-3:   #232833;
  --line:      rgba(255,255,255,.07);
  --font:      'Inter', 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- TEMAS DE FUNDO (seletor da nav) ----------
   Só as variáveis de página mudam; o cinza das partículas é trocado no
   shader, senão o grafite escuro sumiria nos fundos escuros. */

:root[data-bg="branco"]{
  --bg-hi:#fdfdfe; --bg:#f7f8f9; --bg-deep:#eceef1;
  --nav-bg:rgba(247,248,249,.86);
}
:root[data-bg="cinza"]{
  --bg-hi:#d8dade; --bg:#c9ccd1; --bg-deep:#b7bbc1;
  --ink:#14171c; --ink-soft:#2c3138; --dim:#5c626b;
  --nav-bg:rgba(201,204,209,.84);
  --ctrl-bg:rgba(255,255,255,.34);
  --ctrl-line:rgba(20,23,28,.20);
  --hair:rgba(20,23,28,.30);
  --shadow-rgb:20,23,28; --shadow-a:.24;
}
:root[data-bg="chumbo"]{
  --bg-hi:#4a5058; --bg:#3a3f47; --bg-deep:#2c3037;
  --ink:#f4f5f7; --ink-soft:#dde0e5; --dim:#a2a9b3;
  --turq-ink:#3fd8c1;
  --nav-bg:rgba(58,63,71,.84);
  --ctrl-bg:rgba(255,255,255,.09);
  --ctrl-line:rgba(255,255,255,.20);
  --hair:rgba(255,255,255,.26);
  --shadow-rgb:0,0,0; --shadow-a:.34;
}
:root[data-bg="preto"]{
  --bg-hi:#0a0a0b; --bg:#000; --bg-deep:#000;
  --ink:#f5f6f8; --ink-soft:#d6dade; --dim:#8b9199;
  --turq-ink:#3fd8c1;
  --nav-bg:rgba(0,0,0,.86);
  --ctrl-bg:rgba(255,255,255,.05);
  --ctrl-line:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.20);
  --shadow-rgb:0,0,0; --shadow-a:.6;
}
:root[data-bg="areia"]{
  --bg-hi:#f8f1e5; --bg:#f0e7d8; --bg-deep:#e5d9c6;
  --nav-bg:rgba(240,231,216,.84);
}
:root[data-bg="nevoa"]{
  --bg-hi:#f0f3f6; --bg:#e7ebf0; --bg-deep:#dbe1e9;
  --nav-bg:rgba(231,235,240,.84);
}
:root[data-bg="grafite"]{
  --bg-hi:#262b33; --bg:#1b1f26; --bg-deep:#13161b;
  --ink:#f0f1f3; --ink-soft:#cdd2d9; --dim:#8d949e;
  --turq-ink:#3fd8c1;
  --nav-bg:rgba(27,31,38,.82);
  --ctrl-bg:rgba(255,255,255,.06);
  --ctrl-line:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.22);
  --shadow-rgb:0,0,0; --shadow-a:.42;
}
:root[data-bg="carvao"]{
  --bg-hi:#171a1f; --bg:#0f1216; --bg-deep:#07090b;
  --ink:#f2f3f5; --ink-soft:#d3d7dd; --dim:#8a919b;
  --turq-ink:#3fd8c1;
  --nav-bg:rgba(15,18,22,.84);
  --ctrl-bg:rgba(255,255,255,.05);
  --ctrl-line:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.20);
  --shadow-rgb:0,0,0; --shadow-a:.5;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 30% 20%, var(--bg-hi) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  background-attachment:fixed;
  transition:background-color .5s ease;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--turq); color:#fff; }

/* ---------- NAV ---------- */

#nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 6vw;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
/* a nav não tem fundo próprio: o gradiente da página aparece por baixo.
   Só encolhe ao rolar. */
#nav.scrolled{ padding:14px 6vw; }
.logo{
  display:inline-flex; align-items:center;
  color:var(--ink); text-decoration:none;
}
/* o SVG herda a cor do texto, então a marca acompanha o tema de fundo */
.logo-word{ height:26px; width:auto; display:block; color:inherit; transition:height .4s ease; }
#nav.scrolled .logo-word{ height:22px; }
@media (max-width:560px){ .logo-word{ height:22px; } }
#nav ul{ display:flex; gap:20px; list-style:none; align-items:center; }
#nav ul a{
  color:var(--dim); text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  white-space:nowrap;
  transition:color .3s;
}
#nav ul a:hover{ color:var(--ink); }


.nav-right{ display:flex; align-items:center; gap:26px; }

#panel-toggle{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--ctrl-bg);
  border:1px solid var(--ctrl-line);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:border-color .3s, color .3s;
}
#panel-toggle:hover{ border-color:rgba(15,168,149,.55); color:var(--ink); }
#panel-toggle:focus-visible{ outline:2px solid var(--turq); outline-offset:2px; }
#panel-toggle i{
  width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .3s;
}
#panel-toggle[aria-expanded="false"] i{ transform:rotate(-135deg) translate(-2px,-2px); }

/* ---------- PAINEL DE CONTROLES ---------- */

#panel{
  position:fixed; left:24px; bottom:24px; z-index:45;
  width:300px;
  padding:16px;
  border-radius:16px;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--ctrl-line);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.45);
  transition:opacity .3s ease, transform .3s ease;
}
#panel[hidden]{ display:none; }
#panel.closing{ opacity:0; transform:translateY(10px); }

.panel-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:11px;
}
.fld{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.fld--wide{ grid-column:1 / -1; }
.fld > span{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.fld select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%;
  font-family:var(--font);
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--ctrl-bg);
  border:1px solid var(--ctrl-line);
  border-radius:9px;
  padding:8px 26px 8px 10px;
  cursor:pointer;
  /* seta desenhada no próprio fundo: dispensa pseudo-elemento por campo */
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 14px) 52%, calc(100% - 10px) 52%;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
  transition:border-color .25s, color .25s;
}
.fld select:hover{ border-color:rgba(15,168,149,.55); color:var(--ink); }
.fld select:focus-visible{ outline:2px solid var(--turq); outline-offset:1px; }
/* a lista nativa herda o fundo do sistema; só o texto precisa ficar legível */
.fld option{ color:#1c1e23; background:#fff; letter-spacing:normal; }
.fld optgroup{ color:#1c1e23; background:#fff; font-style:normal; font-weight:700; }

/* reconstruindo os buffers de partículas: a thread trava por instantes */
html.busy, html.busy *{ cursor:progress !important; }

@media (max-width:980px){
  #nav ul{ display:none; }
}
@media (max-width:560px){
  #panel{ left:12px; right:12px; bottom:12px; width:auto; padding:13px; }
  .panel-grid{ gap:9px; }
}

/* ---------- PALCO FIXO (canvas de partículas) ---------- */

#stage{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}
#particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
#entity-shadow{
  position:absolute;
  width:34vw; height:5vw;
  left:14%; top:76%;
  background:radial-gradient(closest-side,
    rgba(var(--shadow-rgb), var(--shadow-a)), rgba(var(--shadow-rgb), 0) 72%);
  filter:blur(6px);
  opacity:.8;
  will-change:transform,opacity;
}
#cluster-labels span{
  position:absolute;
  transform:translate(-50%, 0);
  font-size:clamp(11px, 1vw, 14px);
  font-weight:700; letter-spacing:.30em;
  color:var(--ink-soft);
  opacity:0;
  white-space:nowrap;
  transition:opacity .25s linear;
}

/* fallback sem WebGL: mancha estática no lugar da entidade */
body.no-webgl #particles{ display:none; }
body.no-webgl #stage::before{
  content:'';
  position:absolute; left:8%; top:18%;
  width:44vmin; height:48vmin;
  background:
    radial-gradient(45% 42% at 46% 44%, rgba(28,31,38,.92), rgba(28,31,38,.55) 55%, rgba(28,31,38,0) 78%),
    radial-gradient(30% 26% at 62% 60%, rgba(15,168,149,.35), rgba(15,168,149,0) 70%);
  filter:blur(2px);
  border-radius:48% 55% 46% 58% / 52% 46% 60% 44%;
}

/* ---------- CENAS ---------- */

main{ position:relative; z-index:1; }

.scene{
  min-height:100vh;
  display:flex; align-items:center;
  padding:0 6vw;
  position:relative;
}
.scene--hero{ min-height:112vh; }
.scene--eco{ min-height:135vh; align-items:flex-start; padding-top:16vh; }
.scene--product{ min-height:145vh; }
.scene--final{ min-height:120vh; }

/* colunas de texto */
.copy{ max-width:520px; }
.copy--right{ margin-left:auto; }
.copy--left{ margin-right:auto; }
.copy--top-left{ margin-right:auto; }

.copy h2{
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.22;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
}
.copy h2 em{ font-style:normal; color:var(--turq-ink); }

.eco-title{ font-weight:600; }

/* indicador de scroll */
.scroll-cue{
  position:absolute; left:50%; bottom:16vh; /* dentro da 1ª viewport (hero tem 112vh) */
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--dim);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.scroll-cue i{
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--dim), transparent);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; }
  50%{ transform:scaleY(1); opacity:1; }
}

/* revelação suave dos textos — usa a propriedade `translate` para não
   atropelar os transforms próprios (.mock, .scroll-cue); só esconde
   quando o JS está ativo (html.js) */
.js .reveal{
  opacity:0; translate:0 26px;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), translate .9s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.in{ opacity:1; translate:none; }

/* ---------- SEÇÕES DE PRODUTO ---------- */

.product{
  display:grid;
  grid-template-columns:minmax(300px, 440px) minmax(380px, 640px);
  align-items:center;
  justify-content:space-between;
  gap:6vw;
  width:100%;
}
.product-copy .kicker{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--turq-ink);
  margin-bottom:18px;
}
.product-copy h3{
  font-size:clamp(34px, 3.6vw, 52px);
  font-weight:800; letter-spacing:.10em;
  color:var(--ink);
  margin-bottom:16px;
}
.product-copy .tagline{
  font-size:clamp(17px, 1.45vw, 21px);
  font-weight:600; line-height:1.45;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.product-copy .body{
  font-size:15px; line-height:1.65;
  color:var(--dim);
  margin-bottom:28px;
}
.cta-line{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:6px;
  transition:color .3s, border-color .3s;
}
.cta-line i{ font-style:normal; color:var(--turq-ink); transition:transform .3s; }
.cta-line:hover{ color:var(--turq-ink); border-color:var(--turq-ink); }
.cta-line:hover i{ transform:translateX(4px); }

/* ---------- MOCKUPS (interfaces em HTML/CSS) ---------- */

.mock{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:
    0 30px 60px -20px rgba(20,22,28,.45),
    0 8px 24px -12px rgba(20,22,28,.30);
  transform:perspective(1400px) rotateY(-7deg) rotateX(1.5deg);
  color:#e8eaf0;
  overflow:hidden;
  font-size:13px;
}
.mock-bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.mock-bar i{ width:9px; height:9px; border-radius:50%; background:#333a46; }
.mock-bar b{
  margin-left:10px;
  font-size:11px; font-weight:600; letter-spacing:.08em;
  color:#9aa1ad;
}

/* KORUM — dashboard */
.mock-body{ display:flex; min-height:320px; }
.mock-side{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 0;
  width:150px;
  background:var(--panel-2);
  border-right:1px solid var(--line);
  flex-shrink:0;
}
.mock-side span{
  padding:9px 20px;
  font-size:12px; color:#8d93a0;
  border-left:2px solid transparent;
}
.mock-side span.on{
  color:var(--turq-hi);
  border-left-color:var(--turq);
  background:rgba(15,168,149,.07);
}
.mock-main{ flex:1; padding:20px; display:flex; flex-direction:column; gap:18px; }

.stat-row{ display:flex; gap:12px; }
.stat{
  flex:1;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.stat b{ font-size:22px; font-weight:700; color:#fff; }
.stat span{ font-size:11px; color:#8d93a0; }

.prop-card{
  display:flex; gap:16px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}
.prop-thumb{
  width:96px; height:112px; flex-shrink:0;
  border-radius:8px;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.10) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    linear-gradient(165deg, #2c3340 0%, #1a1f28 70%);
}
.prop-info{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.prop-info b{ font-size:15px; color:#fff; }
.prop-info > span{ font-size:12px; color:#8d93a0; }
.prop-info em{ font-style:normal; font-size:18px; font-weight:700; color:var(--turq-hi); }
.prop-meta{ display:flex; gap:14px; flex-wrap:wrap; }
.prop-meta span{ font-size:11px; color:#8d93a0; }
.progress{
  height:4px; border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden; margin-top:4px;
}
.progress i{ display:block; height:100%; border-radius:2px; background:var(--turq); }

/* ARYA — phone */
.mock--phone{
  background:transparent; border:none; box-shadow:none;
  transform:perspective(1400px) rotateY(-9deg) rotateX(2deg);
  display:flex; justify-content:center;
}
.phone{
  width:min(300px, 74vw);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  box-shadow:
    0 34px 70px -22px rgba(20,22,28,.5),
    inset 0 0 0 3px #05070a;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.phone-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.phone-head b{ font-size:14px; letter-spacing:.06em; }
.online{ font-size:10px; color:var(--turq-hi); letter-spacing:.08em; text-transform:uppercase; }
.online::before{
  content:''; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--turq-hi); margin-right:5px;
  vertical-align:1px;
}
.chat{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 16px;
  min-height:280px;
}
.msg{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:12.5px; line-height:1.45;
}
.msg.bot{
  align-self:flex-start;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
  color:#dfe3ea;
}
.msg.user{
  align-self:flex-end;
  background:rgba(15,168,149,.16);
  border:1px solid rgba(15,168,149,.35);
  border-bottom-right-radius:4px;
  color:#d7f4ef;
}
.msg.card{ display:flex; flex-direction:column; gap:4px; }
.msg.card b{ font-size:13px; color:#fff; }
.msg.card span{ font-size:11.5px; color:#9aa1ad; }
.msg.card em{ font-style:normal; color:var(--turq-hi); }
.phone-input{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 14px 16px;
  padding:11px 16px;
  border-radius:22px;
  background:var(--panel-3);
  border:1px solid var(--line);
  font-size:12px; color:#767d8a;
}
.phone-input i{
  font-style:normal;
  width:24px; height:24px; border-radius:50%;
  background:var(--turq);
  color:#04211d; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* MILIA — fluxo */
.flow{ padding:24px 26px 26px; position:relative; }
.step{
  display:flex; align-items:center; gap:14px;
  padding:11px 0;
  position:relative;
}
.step + .step::before{
  content:'';
  position:absolute; left:7px; top:-13px;
  width:2px; height:22px;
  background:rgba(255,255,255,.10);
}
.step i{
  width:16px; height:16px; border-radius:50%;
  border:2px solid #3a4150;
  flex-shrink:0;
  position:relative; z-index:1;
  background:var(--panel);
}
.step.done i{ border-color:var(--turq); background:var(--turq); }
.step.active i{
  border-color:var(--turq-hi);
  box-shadow:0 0 0 4px rgba(18,194,171,.15);
}
.step div{ display:flex; flex-direction:column; gap:2px; }
.step b{ font-size:13.5px; color:#dfe3ea; }
.step span{ font-size:11px; color:#767d8a; letter-spacing:.04em; }
.step.done span{ color:#5f9c92; }
.step.active b{ color:#fff; }
.step.active span{ color:var(--turq-hi); }
.flow-kpi{
  position:absolute; right:26px; top:28px;
  text-align:right;
  display:flex; flex-direction:column; gap:2px;
}
.flow-kpi b{ font-size:26px; font-weight:800; color:var(--turq-hi); }
.flow-kpi span{ font-size:10.5px; color:#8d93a0; letter-spacing:.06em; text-transform:uppercase; }

/* MUNDI — dados */
.data-body{ padding:20px; display:flex; flex-direction:column; gap:18px; }
.kpi-row{ display:flex; gap:12px; }
.kpi{
  flex:1;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 15px;
  display:flex; flex-direction:column; gap:3px;
}
.kpi span{ font-size:10.5px; color:#8d93a0; letter-spacing:.06em; text-transform:uppercase; }
.kpi b{ font-size:19px; font-weight:700; color:#fff; }
.kpi em{ font-style:normal; font-size:11px; font-weight:600; }
.kpi em.up{ color:var(--turq-hi); }
.chart-row{ display:flex; gap:18px; align-items:stretch; }
.bars{
  flex:1;
  display:flex; align-items:flex-end; gap:9px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 16px 14px;
  height:160px; /* altura definida: %-height das barras precisa dela no layout em coluna */
}
.bars i{
  flex:1;
  height:var(--h);
  border-radius:3px 3px 0 0;
  background:#39404d;
}
.bars i.hi{ background:var(--turq); }
.regions{
  flex:1;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
}
.regions > div{ display:grid; grid-template-columns:64px 1fr 34px; align-items:center; gap:10px; }
.regions span{ font-size:11.5px; color:#9aa1ad; }
.regions b{ font-size:12px; color:#dfe3ea; text-align:right; }

/* EVENTLAB — evento */
.event-body{ padding:20px; display:flex; flex-direction:column; gap:16px; }
.event-head{ display:flex; flex-direction:column; gap:4px; }
.event-head b{ font-size:19px; color:#fff; letter-spacing:.02em; }
.event-head span{ font-size:12px; color:#8d93a0; }
.agenda{ display:flex; flex-direction:column; gap:8px; }
.slot{
  display:grid; grid-template-columns:42px 1fr auto;
  align-items:center; gap:12px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
}
.slot em{ font-style:normal; font-size:12px; font-weight:700; color:#8d93a0; }
.slot b{ font-size:13px; color:#dfe3ea; }
.slot span{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#767d8a;
  padding:4px 10px; border-radius:20px;
  background:rgba(255,255,255,.05);
}
.slot.done span{ color:#5f9c92; background:rgba(15,168,149,.10); }
.slot.active b{ color:#fff; }
.slot.active span{ color:#04211d; background:var(--turq-hi); }

/* ---------- FINAL ---------- */

.final-lines{ margin-bottom:40px; }
.final-lines em{ font-style:normal; color:var(--turq-ink); }

.cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px;
  border:1.5px solid var(--ink);
  border-radius:40px;
  color:var(--ink); text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s, color .35s, border-color .35s;
}
.cta-btn i{ font-style:normal; color:var(--turq-ink); transition:transform .35s; }
.cta-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cta-btn:hover i{ transform:translateX(5px); }

/* ---------- IA ATERIS (chat) ---------- */

.ia-section{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:6vw;
  padding:14vh 6vw 12vh;
}
.ia-head{ max-width:520px; }
.ia-head h2{
  font-size:clamp(30px, 4.2vw, 54px);
  font-weight:800; letter-spacing:-.02em; line-height:1.08;
  margin-top:14px;
}
.ia-head h2 em{ font-style:normal; color:var(--turq-ink); }
.ia-head .body{ margin-top:16px; color:var(--dim); font-size:15px; line-height:1.65; max-width:460px; }

.chat{
  width:100%; max-width:760px;
  display:flex; flex-direction:column;
  border-radius:18px;
  background:linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 82%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.55);
  overflow:hidden;
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.chat-id{ display:flex; align-items:center; gap:10px; }
.chat-id b{ font-size:13px; color:#fff; letter-spacing:.08em; }
.chat-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--turq-hi);
  box-shadow:0 0 10px rgba(18,194,171,.8);
}
.chat-status{ font-size:10.5px; color:#5f9c92; letter-spacing:.12em; text-transform:uppercase; }

.chat-log{
  min-height:280px; max-height:44vh;
  overflow-y:auto;
  padding:20px 18px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}
.chat-log::-webkit-scrollbar{ width:8px; }
.chat-log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:4px; }

.bubble{
  max-width:78%;
  padding:12px 15px;
  border-radius:14px;
  font-size:13.5px; line-height:1.6;
  white-space:pre-wrap;
  animation:bubbleIn .28s ease-out both;
}
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .bubble{ animation:none; } }
.bubble.bot{
  align-self:flex-start;
  background:var(--panel-3); color:#dfe3ea;
  border-bottom-left-radius:5px;
}
.bubble.user{
  align-self:flex-end;
  background:rgba(15,168,149,.16);
  border:1px solid rgba(15,168,149,.34);
  color:#d7f4ef;
  border-bottom-right-radius:5px;
}
.bubble b{ color:#fff; }
.bubble a{ color:var(--turq-hi); }
/* “digitando…”: três pontos fora de fase */
.bubble.typing{ display:flex; gap:5px; padding:15px; }
.bubble.typing span{
  width:6px; height:6px; border-radius:50%; background:#8d93a0;
  animation:typing 1.1s ease-in-out infinite;
}
.bubble.typing span:nth-child(2){ animation-delay:.16s; }
.bubble.typing span:nth-child(3){ animation-delay:.32s; }
@keyframes typing{ 0%,60%,100%{ opacity:.28; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.chat-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 18px 14px;
}
.chip{
  font-family:var(--font);
  font-size:11.5px; font-weight:600;
  color:#9aa1ad;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:7px 13px;
  cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
.chip:hover{ color:#fff; border-color:rgba(15,168,149,.5); background:rgba(15,168,149,.10); }

.chat-form{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-top:1px solid var(--line);
}
.chat-form input{
  flex:1;
  font-family:var(--font); font-size:13.5px;
  color:#e8eaf0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  padding:12px 14px;
}
.chat-form input::placeholder{ color:#767d8a; }
.chat-form input:focus{ outline:none; border-color:rgba(15,168,149,.55); }
.chat-form button{
  width:42px; height:42px; flex:none;
  border:none; border-radius:11px;
  background:var(--turq); color:#04211d;
  font-size:17px; font-weight:800;
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.chat-form button i{ font-style:normal; }
.chat-form button:hover{ background:var(--turq-hi); transform:translateY(-1px); }

.chat-note{
  padding:0 18px 15px;
  font-size:10.5px; line-height:1.55; color:#767d8a;
}

/* botão de voz: usa o reconhecimento do próprio navegador */
.chat-mic{
  width:42px; height:42px; flex:none;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:#9aa1ad;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .25s, border-color .25s, background .25s;
}
.chat-mic svg{ width:17px; height:17px; }
.chat-mic:hover{ color:#fff; border-color:rgba(15,168,149,.5); }
.chat-mic[hidden]{ display:none; }
.chat-mic.rec{
  color:#fff;
  background:rgba(232,80,72,.20);
  border-color:rgba(232,80,72,.55);
  animation:micPulse 1.3s ease-in-out infinite;
}
@keyframes micPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .chat-mic.rec{ animation:none; } }

@media (max-width:980px){
  .ia-section{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:860px){
  .chat-log{ min-height:230px; }
  .bubble{ max-width:88%; }
}

/* ---------- FOOTER ---------- */

footer{
  position:relative; z-index:1;
  background:#101318;
  color:#8d93a0;
  padding:64px 6vw 40px;
  display:flex; flex-direction:column; gap:14px;
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:6vw;
  padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.foot-brand{ display:flex; flex-direction:column; gap:18px; }
.foot-logo{ width:186px; height:auto; color:#fff; }
.foot-claim{ font-size:13px; line-height:1.7; letter-spacing:.03em; color:#8d93a0; }

.foot-map{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
}
.foot-col h3{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#5f9c92;
  margin-bottom:14px;
}
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-col a, .foot-col span{
  font-size:12.5px; letter-spacing:.03em; color:#8d93a0;
  text-decoration:none;
}
.foot-col a{ transition:color .25s; }
.foot-col a:hover{ color:#fff; }

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  justify-content:space-between; align-items:center;
  padding-top:22px;
}
footer small{ font-size:11px; color:#5c626d; }

@media (max-width:860px){
  .foot-top{ grid-template-columns:1fr; gap:34px; }
  .foot-map{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 920px){
  /* mantém só o link Contato no nav mobile */
  #nav ul{ gap:0; }
  #nav ul li:not(:last-child){ display:none; }
  /* não usar shorthand: preservar o padding-top da .scene--eco */
  .scene{ padding-left:7vw; padding-right:7vw; }
  .stat-row, .kpi-row{ flex-wrap:wrap; }
  .stat, .kpi{ min-width:120px; }
  .scene--product{ min-height:auto; padding-top:14vh; padding-bottom:14vh; }
  .product{
    grid-template-columns:1fr;
    gap:48px;
  }
  .mock, .mock--phone{ transform:none; }
  .copy{ max-width:100%; }
  .copy--right, .copy--left{ margin:0; }
  #entity-shadow{ width:60vw; height:9vw; }
  .chart-row{ flex-direction:column; }
  .mock-side{ display:none; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ transition:none; opacity:1; translate:none; }
  .scroll-cue i{ animation:none; }
}

/* texto só para leitores de tela */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}