/* ==========================================================================
   BAMBU Tecnologia — a pele escura
   ==========================================================================
   A versão anterior foi julgada, com razão, como vergonhosa. Os defeitos e
   o que mudou:

   - CARTÃO ESCURO SOBRE FUNDO ESCURO, sem separação: o vidro tinha 6% de
     opacidade contra um preto quase puro, então não existia. Agora a
     superfície é mais clara que o fundo, sempre, e tem borda visível.
   - H2 E H3 DO MESMO TAMANHO: herdava a escala do tema claro sem os saltos.
     Agora usa a mesma escala fechada do sistema, e o peso/largura variável
     faz o degrau.
   - EMOJI COMO ÍCONE: 📊 e 🤖 num site de software. Substituídos pelo gomo,
     que é a forma da marca e escala sem virar borrão.
   - SEM IMAGEM NENHUMA: agora o herói é foto de tecnologia NO CAMPO, que é
     exatamente o que a empresa vende.
   ========================================================================== */

.tech-page {
  /* Fundo em degrau, não plano: o preto chapado é o que faz tudo sumir. */
  --breu:    #0f1609;
  --breu-2:  #16200c;
  --sup-1:   #1b2710;   /* superfície de cartão  — MAIS CLARA que o fundo */
  --sup-2:   #24331a;   /* superfície elevada                             */
  --borda:   rgba(171,205,48,.28);
  --texto:   #eef3e2;
  --texto-2: #a9ba91;

  background: var(--breu);
  color: var(--texto);
}

.tech-page h1, .tech-page h2, .tech-page h3, .tech-page h4 { color: var(--texto); }
.tech-page p { color: var(--texto-2); }
.tech-page a { color: var(--limao); }
.tech-page strong { color: var(--texto); }
.tech-page .lead { color: var(--texto-2); }

/* As auroras dão vida ao fundo e são o que o vidro tem para distorcer.
   Sem elas, vidro é um retângulo cinza. */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .42; }
.aurora i:nth-child(1) { width: 44vw; height: 44vw; background: #abcd30; left: -10vw; top: -8vw;  animation: vagar 26s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 36vw; height: 36vw; background: #2e4e05; right: -8vw; top: 30vh;  animation: vagar 32s ease-in-out infinite reverse; }
.aurora i:nth-child(3) { width: 28vw; height: 28vw; background: #5a1b30; left: 34vw; bottom: -12vw; animation: vagar 38s ease-in-out infinite; }
@keyframes vagar { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(6vw,-4vh) scale(1.1); } 66% { transform: translate(-4vw,4vh) scale(.95); } }
.tech-page main, .tech-page section, .tech-page .global-header-wrapper, .tech-page .footer { position: relative; z-index: 1; }

/* ── SUPERFÍCIE ────────────────────────────────────────────────────────────
   Regra única: a superfície é SEMPRE mais clara que o que está atrás dela.
   Foi ignorar isso que fez os cartões sumirem. O vidro fica por cima de
   uma base sólida, então mesmo sem suporte a backdrop-filter o cartão
   existe. */
.tech-page .card,
.tech-page .spec-card-item,
.tech-page .plan,
.tech-page .trust-item,
.vidro {
  position: relative;
  background: linear-gradient(160deg, var(--sup-2), var(--sup-1));
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: var(--e-4);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(238,243,226,.10);
  backdrop-filter: blur(14px) saturate(150%) url(#refracao);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: transform var(--medio) var(--brota), border-color var(--medio);
}
.tech-page .card:hover, .tech-page .spec-card-item:hover, .tech-page .plan:hover {
  transform: translateY(-6px); border-color: var(--limao);
}
.tech-page .card h3, .tech-page .spec-card-item h3, .tech-page .plan h3 { color: var(--texto); }
.tech-page .card p,  .tech-page .spec-card-item p,  .tech-page .plan p  { color: var(--texto-2); }

/* O gomo no lugar do emoji: a forma da marca como marcador de módulo. */
.marcador { display: flex; gap: 3px; align-items: flex-end; margin-bottom: var(--e-2); }
.marcador i { display: block; width: 9px; border-radius: 40% / 8%; background: var(--limao); }
.marcador i:nth-child(1) { height: 14px; opacity: .45; }
.marcador i:nth-child(2) { height: 22px; opacity: .7; }
.marcador i:nth-child(3) { height: 30px; }

.tech-page .header { background: rgba(15,22,9,.78); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--borda); }
.tech-page .top-group-bar { background: rgba(9,14,5,.9); }
.tech-page .main-nav a { color: var(--texto-2); }
.tech-page .main-nav a:hover, .tech-page .main-nav a.active { color: var(--limao); }
.tech-page .eyebrow, .tech-page .tech-badge, .tech-page .badge { background: rgba(171,205,48,.12); border: 1px solid var(--borda); color: var(--limao); }
.tech-page .btn-outline { background: rgba(171,205,48,.08); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.tech-page .btn-outline:hover { background: rgba(171,205,48,.16); color: var(--texto); box-shadow: inset 0 0 0 1px var(--limao); }
.tech-page .btn-primary, .tech-page .btn-gold { background: var(--limao); color: #16200c; }
.tech-page .btn-primary:hover, .tech-page .btn-gold:hover { background: #c0e544; color: #16200c; }
.tech-page .prova-social, .tech-page .stats-section, .tech-page .cta-section { background: transparent; }
.tech-page .cta-section h2 { color: var(--texto); }
.tech-page .footer { background: rgba(9,14,5,.94); }
.tech-page .stat-number, .tech-page .numero, .tech-page .plan-amount, .tech-page .plan-currency { color: var(--limao); }
.tech-page .plan-period, .tech-page .plan-billed { color: var(--texto-2); }
.tech-page .plan.is-highlight { border-color: var(--limao); box-shadow: 0 20px 60px rgba(171,205,48,.14), inset 0 1px 0 rgba(238,243,226,.12); }
.tech-page .faq-item { border-bottom-color: var(--borda); background: transparent; }
.tech-page .faq-item h3, .tech-page .faq-item summary { color: var(--texto); }
.tech-page .faq-item p { color: var(--texto-2); }
.tech-page input, .tech-page textarea, .tech-page select { background: var(--sup-1); border-color: var(--borda); color: var(--texto); }

/* A cena em sangria também existe no escuro — o véu muda de tom. */
.tech-page .cena::before {
  background:
    linear-gradient(100deg, rgba(9,14,5,.94) 0%, rgba(9,14,5,.78) 34%, rgba(9,14,5,.34) 64%, rgba(9,14,5,.16) 100%),
    linear-gradient(to top, var(--breu) 0%, transparent 40%);
}
.tech-page .cena__texto h1, .tech-page .cena__texto h2 { color: var(--texto); }

/* No escuro o anel do gomo brilha demais; aqui ele é luz contida. */
.tech-page .gomo::after { background: rgba(171,205,48,.5); }
.tech-page .colmo--vivo .gomo { --gomo-cor: #1e2c11; }
.tech-page .colmo--vivo .gomo:nth-last-child(3) { --gomo-cor: #35540a; }
.tech-page .colmo--vivo .gomo:nth-last-child(2) { --gomo-cor: #4e7d0c; }
.tech-page .colmo--vivo .gomo:nth-last-child(1) { --gomo-cor: var(--limao); }

@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* As abas no escuro */
.tech-page .module-tabs-nav { border-bottom-color: var(--borda); }
.tech-page .module-tab-btn { color: var(--texto-2); }
.tech-page .module-tab-btn:hover { background: rgba(171,205,48,.12); color: var(--texto); }
.tech-page .module-tab-btn.active { background: var(--limao); color: #16200c; }
.tech-page .section-tag { background: rgba(171,205,48,.12); border: 1px solid var(--borda); color: var(--limao); }
.tech-page .section-title { color: var(--texto); }
.tech-page .section-desc { color: var(--texto-2); }

/* ── Correção de layout ───────────────────────────────────────────────────
   `.specs-grid` nunca teve regra de grade. Os doze cartões de módulo
   empilhavam numa coluna única de 1200px e, somados ao limite de medida dos
   parágrafos, faziam a página parecer ocupar só o lado esquerdo da tela. */
.specs-grid {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.tech-page .module-panel-info { max-width: 62rem; }

/* Lockup horizontal do topo: a marca vertical inteira era ilegível a 40px.
   Agora é o símbolo + o nome em texto, como no lado Agromarketing. */
.tech-page .logo-link { gap: 12px; }
.tech-page .logo-img { height: 40px; width: auto; filter: none; }
.tech-page .marca__nome { display: grid; line-height: 1; }
.tech-page .marca__nome b { font-family: var(--fonte-logo); font-size: 1.15rem; letter-spacing: .06em; color: var(--texto); font-weight: 700; }
.tech-page .marca__nome span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--limao); margin-top: 4px; }
.tech-page .group-brand-title { letter-spacing: .16em; }

/* ── Variáveis legadas ────────────────────────────────────────────────────
   As páginas de /tech/ foram escritas contra a paleta v2 (dourado/creme).
   A reescrita do style.css para a identidade oficial removeu aqueles nomes,
   e cada `var()` órfão invalida a declaração inteira em silêncio: por isso
   os cartões de preço ficaram transparentes e o texto quase-branco caiu
   sobre seções creme, com contraste 1,08.

   Aqui os nomes antigos ganham destino na pele escura. É ponte, não
   destino: /tech/ ainda merece uma passada própria de design. */
.tech-page {
  --card:        var(--sup-1);
  --cream:       var(--breu);
  --cream-2:     var(--breu-2);
  --cream-3:     var(--sup-2);
  --ink:         var(--texto);
  --muted:       var(--texto-2);
  --green:       #3f6a08;
  --green-3:     #55880c;
  --green-deep:  #16200c;
  --gold:        var(--limao);
  --gold-dark:   #8fae22;
  --border-gold: var(--borda);
  --radius:      var(--r-sm);
  --radius-lg:   var(--r-md);
  --radius-pill: var(--r-pill);
  --shadow-md:   0 16px 40px rgba(0,0,0,.45);
  --font-display: var(--fonte);
  /* Verde como COR DE TEXTO precisa de outro tom: o mesmo #3f6a08 que serve
     de fundo de selo dá 2,4:1 quando vira letra sobre o fundo escuro. */
  --green-texto: #9ec33a;
}
/* Seções que pediam fundo claro por atributo `style` inline. */
.tech-page section[style*="var(--cream)"] { background: var(--breu) !important; }

/* ── Movimento ────────────────────────────────────────────────────────────
   O conteúdo só é escondido se o JS estiver vivo para revelá-lo: a classe
   .js entra no <html> antes da primeira pintura, e vida.js tem rede de
   segurança de 3s. Sem JS, tudo aparece normalmente. */
.js .entra, .js .abre { opacity: 0; transform: translateY(18px); }
.js .entra.dentro, .js .abre.dentro {
  opacity: 1; transform: none;
  transition: opacity .5s var(--decidido), transform .5s var(--brota);
}

/* A curva de crescimento: o gesto da marca, aqui em limão sobre o escuro. */
.curva-cresce { position: absolute; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.tech-hero .curva-cresce, .hero .curva-cresce { right: 8%; top: 14%; width: min(33%, 360px); }
.curva-cresce__linha, .curva-cresce__seta { fill: none; stroke: var(--limao); stroke-width: 2.5; }
.curva-cresce__nos circle { fill: #16200c; stroke: var(--limao); stroke-width: 3; }

.js .curva-cresce__linha { stroke-dasharray: 100; stroke-dashoffset: 100; }
.js .curva-cresce__nos circle, .js .curva-cresce__seta { opacity: 0; }
.js .curva-cresce.desenha .curva-cresce__linha { animation: tracar 1.6s var(--decidido) .25s forwards; }
.js .curva-cresce.desenha .curva-cresce__nos circle { animation: brotar .45s var(--brota) forwards; }
.js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(1) { animation-delay: .55s; }
.js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(2) { animation-delay: .95s; }
.js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(3) { animation-delay: 1.35s; }
.js .curva-cresce.desenha .curva-cresce__seta { animation: brotar .4s var(--brota) 1.7s forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes brotar { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.curva-cresce__nos circle, .curva-cresce__seta { transform-box: fill-box; transform-origin: center; }

/* O cartão de módulo reage ao ponteiro com a junta do bambu acendendo. */
.tech-page .spec-card-item { position: relative; overflow: hidden; }
.tech-page .spec-card-item::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--limao); transform: scaleX(0); transform-origin: left;
  transition: transform var(--medio) var(--decidido);
}
.tech-page .spec-card-item:hover::after { transform: scaleX(1); }

@media (max-width: 820px) {
  .tech-hero .curva-cresce, .hero .curva-cresce { right: 5%; top: auto; bottom: 8%; width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .entra, .js .abre { opacity: 1; transform: none; }
  .js .curva-cresce__linha { stroke-dashoffset: 0; }
  .js .curva-cresce__nos circle, .js .curva-cresce__seta { opacity: 1; }
}