/* ==========================================================================
   TeraBoard · Pagina: terahecta (dentro da Area do Investidor)

   Reaproveita .plate, .icard, .tag, .btn e as faixas .cream/.grad-green que
   ja existem. O que mora aqui e so o proprio da pagina: o bloco sangrado da
   maquete 3D, o caminho do dado e os cartoes de fase.
   ========================================================================== */

/* A marca do fundo, ESTATICA nesta pagina — o porque esta no comentario do
   HTML, junto do proprio SVG. Nas outras paginas quem desenha ali e o
   js/scene-3d.js, e o #canvas-container fica vazio.

   44.3vh nao e um numero escolhido no olho: e a largura que a marca extrudada
   ocupava nas outras paginas, com escala 0.0000024, camera em z=7 e campo de
   visao de 75 graus. O js/loader.js usa essa MESMA medida para fazer a logo da
   abertura crescer e pousar exatamente em cima desta — mudar um lado sem mudar
   o outro descola a troca e a emenda passa a se ver. */
#canvas-container{display:flex;align-items:center;justify-content:center}
.marca-fundo{width:44.3vh;height:auto}

/* ancoras internas nao podem parar embaixo da nav fixa */
#maquete,#fases,#cresce,#zonas{scroll-margin-top:110px}

/* hero das paginas internas: a nav fixa mede ~130px no desktop */
.hero-page{padding-top:150px;position:relative}
@media(min-width:768px){ .hero-page{padding-top:178px} }
@media(min-width:1024px){ .hero-page{padding-top:196px} }

/* --------------------------------------------------------------------------
   VEU DE LEITURA DO HERO — o mesmo das outras paginas internas
   -------------------------------------------------------------------------- */
.hero-page:not(.cream)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
  background:radial-gradient(115% 105% at 22% 52%,
              rgba(3,8,6,.62) 0%, rgba(3,8,6,.44) 46%, rgba(3,8,6,0) 82%);
  -webkit-mask-image:radial-gradient(115% 105% at 22% 52%,
              #000 0%, #000 44%, rgba(0,0,0,.5) 66%, transparent 86%);
          mask-image:radial-gradient(115% 105% at 22% 52%,
              #000 0%, #000 44%, rgba(0,0,0,.5) 66%, transparent 86%);
}
@media(max-width:1023px){
  .hero-page:not(.cream)::before{
    background:radial-gradient(130% 78% at 50% 34%,
                rgba(3,8,6,.66) 0%, rgba(3,8,6,.44) 50%, rgba(3,8,6,0) 86%);
    -webkit-mask-image:radial-gradient(130% 78% at 50% 34%,
                #000 0%, #000 50%, transparent 88%);
            mask-image:radial-gradient(130% 78% at 50% 34%,
                #000 0%, #000 50%, transparent 88%);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-page:not(.cream)::before{
    background:radial-gradient(115% 105% at 22% 52%,
                rgba(3,8,6,.84) 0%, rgba(3,8,6,.62) 48%, rgba(3,8,6,0) 84%);
  }
}

/* faixa creme um pouco mais translucida: deixa a logo 3D respirar por tras */
.cream{ background: rgba(240,241,227,.86);
        --hair: rgba(10,77,54,.20); --hair-soft: rgba(10,77,54,.12);
        --amber:#8A5A00; --clay:#A33C1B; }
.cream .plate,
.cream .plate-dark,
.cream .icard{ --hair: rgba(240,241,227,.20); --hair-soft: rgba(240,241,227,.12); }

/* ==========================================================================
   HERO — a unidade do sistema
   ========================================================================== */
.unidade{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.unidade span{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.05em;
  padding:9px 14px;border-radius:9999px;
  background:rgba(6,44,31,.42);border:1px solid rgba(240,241,227,.2)}

/* ==========================================================================
   O PROBLEMA — as duas zonas opostas no mesmo hectare
   ========================================================================== */
.contraste{display:grid;gap:16px;margin-top:34px}
@media(min-width:768px){ .contraste{grid-template-columns:repeat(2,minmax(0,1fr))} }
.contraste .zona{padding:24px 22px;height:100%}
.zona-tag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase}
.zona-num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:2.4rem;
  letter-spacing:-.02em;margin-top:12px;line-height:1}
.zona h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;margin-top:10px}
.zona p{margin-top:8px;line-height:1.6}

/* a frase que resume o projeto */
.tese{margin-top:34px;padding:26px 24px;border-radius:16px;
  border-left:3px solid var(--signal);
  background:rgba(29,199,139,.12);
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45}
@media(min-width:768px){ .tese{padding:30px 34px} }

/* ==========================================================================
   A MAQUETE — bloco sangrado ate as bordas da tela
   ========================================================================== */
.maquete-bloco{
  /* Contido, e nao mais sangrado ate as bordas. Em tela larga o quadro de
     ponta a ponta passava de 1050 px de altura: entrava por baixo da barra
     fixa, que tapava o painel de titulo da cena, e empurrava os botoes
     TOPOGRAFIA / SIMULAR CHUVA / MODO FILME para fora da area visivel.

     O limite de 1280 px nao e estetico: a propria maquete troca para o HUD de
     celular abaixo de 1250 px de largura interna (media query em
     terahecta/assets/css/terahecta.css). Ficar acima disso preserva a tabela
     de leituras na coluna da direita. Em telas menores ela cai no HUD
     compacto, que e o layout certo para aquele tamanho. */
  width:min(1280px, 100% - 40px);
  margin:30px auto 0;
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  background:#0b1a12;
}
.maquete-frame{
  width:100%;aspect-ratio:16/9;border:0;display:block;
  /* Trava de altura para notebook baixo, onde 16/9 ainda estouraria a tela.
     O quadro fica um pouco mais largo que 16/9 nesse caso — a cena 3D se
     acomoda sozinha, ela nao tem proporcao fixa. */
  max-height:calc(100vh - 132px);
  max-height:calc(100svh - 132px);
  /* enquanto o iframe nao carrega (ele e lazy), a previa segura o lugar */
  /* .webp e nao .jpg: esta imagem baixa em TODA visita, so para segurar o lugar
     enquanto o iframe (que e lazy) nao chega — 184 KB viraram 94 KB pela mesma
     imagem, na mesma resolucao.

     O preview.jpg continua na pasta, e nao e sobra: ele e o og:image de
     terahecta/index.html. Prévia de link e lida por robô de rede social, e boa
     parte deles — o do WhatsApp em primeiro lugar — ainda engasga com WebP.
     Um formato para o navegador, outro para os robôs. */
  background:#0b1a12 url('../../terahecta/assets/img/preview.webp') center/cover no-repeat;
}
/* no celular 16:9 fica uma fresta: a cena ganha altura */
@media(max-width:760px){
  .maquete-frame{aspect-ratio:3/4;min-height:440px;max-height:none}
}

/* Tela cheia de verdade: o bloco vira a tela inteira, sem borda nem canto
   arredondado, e o quadro perde as duas travas de tamanho. */
.maquete-bloco:fullscreen{width:100%;margin:0;border:0;border-radius:0}
.maquete-bloco:fullscreen .maquete-frame{
  height:100vh;max-height:none;aspect-ratio:auto;min-height:0;
}

/* Tela cheia por CSS — o caminho do iOS, que nao expande elemento nenhum.
   O porque esta inteiro no topo de js/pages/terahecta.js; o resumo e que a
   alternativa antiga (abrir em aba nova) fazia o visitante perder a sessao do
   portao e voltar para investidor.html. Aqui nada navega: o bloco so cresce.
   svh e nao vh: no celular, vh conta a barra de endereco que some ao rolar, e
   a cena ficaria com um pedaco escondido atras dela. */
.maquete-bloco.tb-tela-cheia{
  position:fixed;inset:0;z-index:200;
  width:100%;height:100svh;margin:0;border:0;border-radius:0;
  background:#0b1a12;
}
.maquete-bloco.tb-tela-cheia .maquete-frame{
  width:100%;height:100svh;
  max-height:none;min-height:0;aspect-ratio:auto;border-radius:0;
}
/* Trava a rolagem do fundo enquanto a maquete ocupa a tela. Sem isto, arrastar
   na cena rola a pagina por baixo e sai-se da maquete sem querer. */
html.tb-tela-cheia-ativa,html.tb-tela-cheia-ativa body{overflow:hidden}

/* A saida. So aparece na tela cheia por CSS: na tela cheia de verdade quem
   fecha e o Esc, que o proprio navegador anuncia. No celular nao ha Esc, entao
   sem este botao nao haveria como voltar. */
.maquete-sair{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:calc(env(safe-area-inset-right,0px) + 12px);
  z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:999px;
  border:1px solid rgba(240,241,227,.28);
  background:rgba(3,21,14,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#F0F1E3;font:600 .85rem/1 'Space Grotesk',sans-serif;
  cursor:pointer;
}
.maquete-sair:hover{background:rgba(3,21,14,.92)}
.maquete-sair[hidden]{display:none}
/* A profundidade e o unico dado do sistema que a cena 3D nao consegue mostrar:
   destacada, e nao diluida no corpo do texto. */
.maquete-profundidade{
  display:flex;gap:12px;align-items:flex-start;margin-top:20px;max-width:64ch;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--hair);border-left:3px solid var(--signal);
  background:rgba(29,199,139,.07);line-height:1.65;font-size:.95rem;
}
.maquete-profundidade i{color:var(--signal);font-size:1.25rem;flex-shrink:0;margin-top:.1em}
.maquete-profundidade b{font-family:'Space Grotesk',sans-serif;color:var(--signal)}

.maquete-pes{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;margin-top:20px}
.maquete-nota{font-size:.88rem;line-height:1.55;max-width:62ch}
.maquete-como{margin-top:8px;font-size:.95rem;line-height:1.7}
.maquete-como b{font-family:'Space Grotesk',sans-serif}
.maquete-teclas{font-family:'IBM Plex Mono',monospace;font-size:.86rem;letter-spacing:.02em}

/* ==========================================================================
   COMO FUNCIONA — o caminho do dado
   ========================================================================== */
.passos{display:grid;gap:16px;margin-top:40px}
@media(min-width:640px){ .passos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1024px){ .passos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.passo-num{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-deep);margin-bottom:6px}

/* ==========================================================================
   O QUE CADA SENSOR MEDE
   ========================================================================== */
.medidas{display:grid;gap:14px;margin-top:36px}
@media(min-width:640px){ .medidas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1024px){ .medidas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.medida{padding:22px 20px;border-radius:14px;
  background:rgba(6,44,31,.3);border:1px solid rgba(240,241,227,.16)}
.cream .medida{background:rgba(10,77,54,.06);border-color:rgba(10,77,54,.24)}
.medida h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem}
.medida p{margin-top:7px;font-size:.96rem;line-height:1.55}

/* ==========================================================================
   AS TRES FASES
   ========================================================================== */
/* o ciclo que as tres seguem, igual */
.ciclo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.ciclo span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;
  padding:9px 15px;border-radius:9999px;
  background:rgba(29,199,139,.14);border:1px solid rgba(29,199,139,.3)}
.ciclo i{font-style:normal;opacity:.55;font-size:1.1rem}

.fase-bloco{padding:28px 24px;margin-top:16px}
@media(min-width:640px){ .fase-bloco{padding:32px 30px} }
.fase-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cadeado{width:20px;height:20px;flex:0 0 auto}   /* herda a cor do texto */
.fase-titulo{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.15;margin-top:14px}
.fase-selo{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:9999px;
  border:1px solid currentColor;opacity:.9}
.fase-corpo{margin-top:16px;line-height:1.65;max-width:70ch}
.fase-corpo + .fase-corpo{margin-top:12px}
.fase-lista{margin-top:16px;display:grid;gap:10px}
.fase-lista div{display:flex;gap:10px;align-items:start;line-height:1.55}
.fase-lista .marca{color:var(--signal);flex:0 0 auto;margin-top:.15em}

@media(prefers-reduced-motion:reduce){
  .icard:hover{transform:none}
}