/* ==========================================================================
   TeraBoard · Pagina: terasensor
   ========================================================================== */

/* ancoras internas nao podem parar embaixo da nav fixa */
#simular{scroll-margin-top:110px}
  --signal:      #0E5F42;   /* verde de texto  4.93:1 na creme 86% */

/* ==========================================================================
   PRODUTOS — correcoes e componentes proprios da pagina
   ========================================================================== */

/* BUG: dentro da faixa creme, --signal vira verde ESCURO (cor de texto),
   mas .btn-solid usa a mesma variavel como FUNDO -> o botao sumia (1.52:1).
   Na creme o botao passa a ser verde-escuro com texto creme. */
.cream .btn-solid,
.cream .btn-signal{ background:#0A4D36; color:#F0F1E3; }
.cream .btn-solid:hover,
.cream .btn-signal:hover{ background:#116B4B; color:#FFFFFF; }

/* faixa creme um pouco mais translucida: deixa a logo 3D respirar por tras */
.cream{ background: rgba(240, 241, 227, .86); }

/* ---------- comparador interativo ---------- */
.cmp-opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 15px;border-radius:12px;cursor:pointer;text-align:left;
  background:rgba(240,241,227,.05);border:1px solid var(--hair);
  color:var(--ink);font-family:'Inter',sans-serif;font-size:.99rem;line-height:1.4;
  transition:background .25s,border-color .25s,transform .25s;
}
.cmp-opt:hover{border-color:rgba(29,199,139,.45);transform:translateX(3px)}
.cmp-opt .box{
  width:21px;height:21px;border-radius:7px;flex-shrink:0;
  border:1.5px solid var(--hair);display:grid;place-items:center;
  font-size:.78rem;color:transparent;transition:background .25s,border-color .25s,color .25s;
}
.cmp-opt.on{background:rgba(29,199,139,.13);border-color:rgba(29,199,139,.55)}
.cmp-opt.on .box{background:var(--signal);border-color:var(--signal);color:#06301f}
.cmp-row{display:grid;grid-template-columns:96px 1fr 44px;gap:12px;align-items:center;margin-top:12px}
.cmp-row .nm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.88rem;color:var(--ink)}
.cmp-row .pc{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--sage);text-align:right}
.cmp-bar{height:7px;border-radius:9999px;background:rgba(240,241,227,.13);overflow:hidden}
.cmp-bar > i{display:block;height:100%;width:0;border-radius:9999px;background:var(--signal);
  transition:width .55s cubic-bezier(.16,1,.3,1)}
.cmp-verdict{
  margin-top:20px;padding:15px 17px;border-radius:13px;
  background:rgba(29,199,139,.10);border:1px solid rgba(29,199,139,.28);
  transition:background .4s,border-color .4s;
}
@media(prefers-reduced-motion:reduce){ .cmp-opt:hover{transform:none} }

/* ---------- mockup de celular (o app companion) ----------
   A tela e um app: fica SEMPRE clara, com tokens proprios, para nao
   depender do tema da pagina (--porcelain aqui vale "transparent"). */
.phone{width:272px;max-width:100%;border-radius:40px;background:#0A211A;padding:12px;
  box-shadow:0 50px 90px -45px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06) inset;position:relative}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:78px;height:6px;border-radius:9999px;background:rgba(255,255,255,.18);z-index:3}
.phone .screen{background:#f0f1e3;border-radius:30px;overflow:hidden;min-height:480px;
  display:flex;flex-direction:column;
  --signal-deep:#116B4B;--ink:#0C2A1E;--sage:#5E6B62;
  --hair:rgba(12,42,30,.14);--hair-soft:rgba(12,42,30,.09)}
.phone .sbar{display:flex;align-items:center;justify-content:space-between;padding:34px 18px 12px}
.phone .sbar .nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:#0C2A1E}
.phone .sbar .live{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:#116B4B;display:inline-flex;align-items:center;gap:5px}
.phone .sbar .live::before{content:"";width:7px;height:7px;border-radius:9999px;background:#1DC78B;
  box-shadow:0 0 0 0 rgba(29,199,139,.5);animation:pl2 1.8s infinite}
@keyframes pl2{0%{box-shadow:0 0 0 0 rgba(29,199,139,.5)}70%{box-shadow:0 0 0 6px rgba(29,199,139,0)}100%{box-shadow:0 0 0 0 rgba(29,199,139,0)}}
@media(prefers-reduced-motion:reduce){.phone .sbar .live::before{animation:none}}
.phone .body{padding:6px 16px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.acard{background:#fff;border:1px solid rgba(12,42,30,.10);border-radius:16px;padding:14px}
.acard .lbl{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:#5E6B62}
.atile{background:#fff;border:1px solid rgba(12,42,30,.10);border-radius:14px;padding:12px;text-align:center}
.atile .big{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.35rem;color:#0C2A1E;line-height:1}
.atile .small{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;color:#5E6B62;margin-top:5px}
.abtn{background:#1DC78B;color:#06301f;border-radius:12px;padding:12px;text-align:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;gap:8px}
.abar{height:8px;border-radius:9999px;background:rgba(12,42,30,.12);overflow:hidden}
.abar > span{display:block;height:100%;border-radius:9999px;background:#1DC78B}
.phone .ideal-line{stroke:#116B4B}

/* ---------- hero terasensor: espaco de respiro sob a nav fixa ----------
   nav.top real (desktop): 66px logo + 32px*2 padding ~= 130px de altura. */
.hero-ts{padding-top:148px;position:relative}
@media(min-width:768px){.hero-ts{padding-top:176px}}
@media(min-width:1024px){.hero-ts{padding-top:196px}}
/* FLASHZAO: um clarao branco/menta cobre TODO o hero no pico e cai — a
   reorganizacao do layout acontece "escondida" enquanto a tela esta lavada. */
.hero-ts::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:40;opacity:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(29,199,139,.7) 42%, rgba(29,199,139,.25) 68%, transparent 88%);
}
.hero-ts.flash::after{animation:heroFlash 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes heroFlash{
  0%{opacity:0}
  16%{opacity:1}      /* estoura */
  46%{opacity:1}      /* segura o clarao (troca de layout acontece aqui) */
  100%{opacity:0}     /* dissolve devagar */
}
@media(prefers-reduced-motion:reduce){.hero-ts.flash::after{animation:heroFlash .7s ease}}

/* ==========================================================================
   HERO EM DOIS ESTADOS
   - marketing (padrao): texto | aparelho girando
   - demonstracao (.demo): aparelho GRANDE a esquerda | painel GRANDE a direita
   A troca de layout e INSTANTANEA, escondida no pico do flashzao.
   O mesmo #deviceStage e so reposicionado pelo grid (nao e recriado —
   preserva o contexto WebGL).
   ========================================================================== */
#heroGrid{display:grid;gap:40px}
#heroGrid > *{min-width:0}
/* mobile: pilha unica. painel so aparece no modo demo. */
#heroGrid .hg-panels{display:none}
#heroGrid.demo .hg-copy{display:none}
#heroGrid.demo .hg-panels{display:flex;flex-direction:column;gap:20px}

@media(min-width:1024px){
  #heroGrid{
    grid-template-columns:.92fr 1.18fr;
    grid-template-areas:"copy device";
    align-items:center;
  }
  #heroGrid .hg-copy{grid-area:copy}
  #heroGrid .hg-device{grid-area:device}
  #heroGrid .hg-panels{grid-area:panels}
  /* --- modo demonstracao: aparelho domina a esquerda, painel a direita --- */
  #heroGrid.demo{
    grid-template-columns:1.32fr .88fr;
    grid-template-areas:"device panels";
    align-items:stretch;
  }
}

/* ---------- TeraSensor em 3D: peca em exposicao ---------- */
.hg-device{display:flex;flex-direction:column;align-items:center}
.device-wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.device-stage{width:100%;height:520px;max-height:52svh;position:relative;cursor:grab;margin-top:12px}
.device-stage:active{cursor:grabbing}
.device-stage canvas{display:block}
/* no modo demo o palco cresce — aparelho grande e legivel */
#heroGrid.demo .device-stage{height:620px;max-height:66svh;margin-top:0}
.device-pedestal{
  width:62%;height:26px;margin-top:-14px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(10,77,54,.30) 0%, rgba(10,77,54,.12) 45%, transparent 72%);
  filter:blur(4px);pointer-events:none;
}
.device-hint{
  margin-top:14px;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);
  display:inline-flex;align-items:center;gap:7px;opacity:.85;
}

/* dica ociosa: "toque no aparelho" — some ao ativar */
.device-idle-hint{
  margin-top:20px;display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:14px;
  background:rgba(29,199,139,.10);border:1px dashed rgba(10,77,54,.30);
  font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:600;color:#0C5539;
  transition:opacity .3s ease;cursor:pointer;
}
.device-idle-hint i{font-size:1.35rem;color:var(--signal-deep);flex-shrink:0}
.device-idle-hint.hide{opacity:0;pointer-events:none}

/* botao de voltar ao inicio da demonstracao — so no modo demo */
.demo-reset{
  display:none;margin-top:16px;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(10,77,54,.28);border-radius:9999px;
  padding:9px 18px;cursor:pointer;color:#0C5539;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.02em;
  transition:background .25s,border-color .25s;
}
.demo-reset:hover{background:rgba(29,199,139,.12);border-color:rgba(29,199,139,.4)}
#heroGrid.demo .demo-reset{display:inline-flex}

/* ---------- painel de demonstracao (grande e legivel) ---------- */
.hg-panels{justify-content:center}
/* card-guia: diz ao usuario o que fazer em cada passo */
.device-guide{
  width:100%;padding:26px 28px;border-radius:20px;
  background:rgba(240,241,227,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(10,77,54,.16);box-shadow:0 20px 46px -28px rgba(10,77,54,.55);
  transition:background .35s, border-color .35s;
}
.device-guide .dg-step{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#0C5539;
}
.device-guide .dg-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5rem;line-height:1.15;
  color:var(--forest-2);margin-top:8px;display:flex;align-items:center;gap:11px;
}
.device-guide .dg-title i{font-size:1.6rem;flex-shrink:0}
.device-guide .dg-desc{
  font-size:1.08rem;line-height:1.55;color:#3a4a41;margin-top:12px;
}
.device-guide .dg-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;
  color:#0C5539;
}
.device-guide.on{background:rgba(29,199,139,.12);border-color:rgba(29,199,139,.34)}

/* espelho 2D da tela E-ink com a CAPA do aparelho por cima (cara do TeraSensor).
   A tela replicada (live) fica ATRAS; a capa-Superior.png entra POR CIMA, com
   a janela da tela transparente, deixando o conteudo aparecer.               */
.screen-mirror{background:transparent}
.screen-mirror-label{
  display:flex;align-items:center;gap:8px;padding:0 4px 12px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:#0C5539;
}
.screen-mirror-label i{font-size:1rem}

/* ==== ENCAIXE DA TELA NA CAPA (medido no aparelho: janela 280x120 em capa 380x355) ==== */
.device-face{
  --scr-left:13.16%;   /* 50/380      */
  --scr-top:37.75%;    /* 134/355     */
  --scr-w:73.68%;      /* 279.97/380  */
  --scr-h:33.80%;      /* 119.98/355  */
  position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:380/355;
  filter:drop-shadow(0 16px 34px rgba(10,77,54,.42));
}
/* tela replicada (live) — atras, encaixada na janela */
.device-face-screen{
  position:absolute;z-index:1;
  left:var(--scr-left);top:var(--scr-top);
  width:var(--scr-w);height:var(--scr-h);
  object-fit:fill;border-radius:2px;background:#e9eae4;
}
/* capa do aparelho — por cima, preenchendo o container (aspect-ratio fixo) */
.device-face-capa{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:fill;
  display:block;pointer-events:none;
}

/* ---------- visualizador do laudo ----------
   O laudo e MOSTRADO, nao entregue. Por isso ele entra como imagem de fundo
   de uma <div>, e nao como <img>: no menu do botao direito de um fundo nao
   existe "Salvar imagem como". Pelo mesmo motivo nao ha <a> para o arquivo
   nem botao de baixar, e o PDF nao e embutido — o visualizador nativo do
   navegador viria com download e impressao proprios, que e exatamente o que
   nao queremos oferecer. */
.laudo-head{display:grid;gap:14px 44px;align-items:end}
@media(min-width:900px){ .laudo-head{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }

.laudo-quadro{
  margin-top:30px;border-radius:16px;overflow:hidden;
  background:rgba(6,40,27,.72);border:1px solid rgba(240,241,227,.14);
}
.laudo-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid rgba(240,241,227,.12);
}
.laudo-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:#9FC7B4;
}
.laudo-tag i{color:#1DC78B;font-size:1rem}
.laudo-zoom{display:flex;align-items:center;gap:10px}
.laudo-zoom .btn{padding:9px 12px;min-width:44px;min-height:44px;justify-content:center}
.laudo-pc{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#1DC78B;min-width:4ch;text-align:center}

/* O palco rola nos dois eixos quando a pagina esta ampliada.
   `display:block` de proposito, e nao flex. Com `justify-content:center`, o
   que transborda para a ESQUERDA fica inalcancavel — nenhuma rolagem chega
   la, e o laudo ampliado perdia a primeira coluna. E `align-items:stretch`
   (o padrao do flex) esticava a pagina ate a altura do palco, atropelando o
   `aspect-ratio`: ampliar alargava sem crescer, e so aparecia a faixa do
   meio do documento. Com bloco + `margin:auto`, a pagina centraliza enquanto
   cabe e encosta na borda quando nao cabe — sempre alcancavel. */
.laudo-palco{
  height:min(78vh,760px);overflow:auto;background:#0A2318;
  display:block;padding:20px;
  cursor:grab;overscroll-behavior:contain;
}
.laudo-palco:active{cursor:grabbing}
.laudo-palco:focus-visible{outline:2px solid #1DC78B;outline-offset:-2px}

/* A pagina do laudo. A proporcao e a do arquivo (1810x2560); a largura vem
   do JS, que e quem controla o zoom. */
.laudo-pagina{
  aspect-ratio:1810/2560;width:100%;max-width:820px;margin:0 auto;
  /* A caixa ja tem a proporcao do arquivo, entao `100% 100%` e exato: nao
     sobra faixa branca nem corta nada. */
  background:#fff 0 0/100% 100% no-repeat;
  border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.laudo-nota{
  padding:14px 18px;font-size:.86rem;line-height:1.6;color:var(--sage);
  border-top:1px solid rgba(240,241,227,.12);
}
@media(max-width:640px){ .laudo-palco{height:62vh;padding:12px} }

/* ---------- o aparelho com o app dentro ----------
   A moldura vem de assets/app demo/assets/device.css. Aqui so entra o
   tamanho que ela ocupa nesta pagina: 300 px deixa o aparelho ao lado do
   texto sem roubar a coluna inteira num notebook. */
.ts-app{display:flex;flex-direction:column;align-items:center;gap:16px}
.ts-app .device{width:300px;max-width:100%}
.ts-app-dica{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal);
  text-align:center;
}
@media(max-width:900px){ .ts-app .device{width:270px} }

/* Pisca quando o app manda a pagina descer ate aqui: sem isso o visitante
   chega num documento parado e nao sabe se algo aconteceu. */
@keyframes laudoChegou{
  0%   { box-shadow:0 0 0 0 rgba(29,199,139,0); }
  18%  { box-shadow:0 0 0 4px rgba(29,199,139,.55); }
  100% { box-shadow:0 0 0 0 rgba(29,199,139,0); }
}
.laudo-quadro.chegou{animation:laudoChegou 1.6s ease-out}
@media(prefers-reduced-motion:reduce){ .laudo-quadro.chegou{animation:none} }