/* archēLAB — override: SOMENTE cor + layout de menu. Fontes/tamanhos = originais do template. */
:root { --gold:#C4973A; --gold-hover:#D4A94A; }

/* ===== COR: ouro da marca distribuído ===== */
.tp-section-subtitle, .tp-section-subtitle.st { color: var(--gold) !important; }
.tp-section-title-playfair span, .st-hero-title i { color: var(--gold) !important; }
.st-portfolio-item-btn a,
.st-testimonial-bottom a,
.st-copyright-sub,
.tp-about-funcact-item span,
.st-blog-item-tags span,
.st-about-card-tag span,
.st-choose-list ul li { color: var(--gold) !important; }
a:hover, .tp-line-white:hover, .tp-line-black:hover { color: var(--gold-hover) !important; }
.st-blog-item-tags-devide { background: var(--gold) !important; }
.tp-border-line, .tp-border-line.line-2, .tp-border-line.line-3, .tp-border-line.line-4 { background: var(--gold) !important; opacity: .5; }
.st-counter-item h4 { color: var(--gold) !important; }
.ar-award-year { color: var(--gold) !important; }

/* botão COMEÇAR */
.tp-header-8-btn .tp-btn-border-2 { border-color:var(--gold) !important; color:var(--gold) !important; }
.tp-header-8-btn .tp-btn-border-2:hover { background:var(--gold) !important; color:#0A0A0A !important; }

/* ===== LAYOUT: header-12 horizontal (sem tocar fonte/tamanho) ===== */
.tp-header-12-menu > nav > ul { display:flex; align-items:center; justify-content:center; gap:34px; margin:0; padding:0; list-style:none; }
.tp-header-12-menu > nav > ul > li { position:relative; margin:0; }
.tp-header-12-menu > nav > ul > li > a { display:inline-flex; align-items:center; gap:7px; }
.tp-header-12-menu > nav > ul > li > a:hover { color:var(--gold); }
.tp-header-12-menu > nav > ul > li .tp-submenu {
  position:absolute; top:100%; left:0; min-width:238px; margin:0; padding:12px; list-style:none;
  background:#121212; border:1px solid #2A2A2A; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60;
}
.tp-header-12-menu > nav > ul > li.has-dropdown:hover > .tp-submenu { opacity:1; visibility:visible; transform:translateY(10px); }
.tp-header-12-menu > nav > ul > li .tp-submenu > li > a { display:block; padding:9px 14px; border-radius:9px; color:#C9C4BC; white-space:nowrap; transition:background .2s, color .2s; }
.tp-header-12-menu > nav > ul > li .tp-submenu > li > a:hover { background:rgba(196,151,58,.12); color:var(--gold); }

/* header-10 layout (archēME) */
.tp-header-10-menu > nav > ul { display:flex; align-items:center; gap:34px; margin:0; padding:0; list-style:none; }
.tp-header-10-menu > nav > ul > li { position:relative; margin:0; }
.tp-header-10-menu > nav > ul > li.has-dropdown > a { display:inline-flex; align-items:center; gap:7px; }
.tp-header-10-menu > nav > ul > li .tp-submenu {
  position:absolute; top:100%; left:0; min-width:238px; margin:0; padding:12px; list-style:none;
  background:#121212; border:1px solid #2A2A2A; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60;
}
.tp-header-10-menu > nav > ul > li.has-dropdown:hover > .tp-submenu { opacity:1; visibility:visible; transform:translateY(10px); }
.tp-header-10-menu > nav > ul > li .tp-submenu > li > a { display:block; padding:9px 14px; border-radius:9px; color:#C9C4BC; white-space:nowrap; transition:background .2s, color .2s; }
.tp-header-10-menu > nav > ul > li .tp-submenu > li > a:hover { background:rgba(196,151,58,.12); color:var(--gold); }

/* ===== OFFCANVAS contraste ===== */
.tp-offcanvas-area, .tp-offcanvas-wrapper, .tp-offcanvas-2-area, .tp-offcanvas-2-wrapper { background:#0A0A0A !important; }
.tp-offcanvas-area *, .tp-offcanvas-2-area * { color:#F5F2ED !important; }
.tp-offcanvas-title, .tp-offcanvas-2-title { color:#FFFFFF !important; }
.tp-offcanvas-area p, .tp-offcanvas-2-area p,
.tp-offcanvas-menu nav ul li a, .tp-offcanvas-2-menu nav ul li a { color:#C9C4BC !important; }
.tp-offcanvas-menu nav ul li a:hover, .tp-offcanvas-2-menu nav ul li a:hover,
.tp-offcanvas-area a:hover, .tp-offcanvas-2-area a:hover { color:var(--gold) !important; }
.tp-offcanvas-close-btn, .tp-offcanvas-2-close-btn, .tp-offcanvas-close, .tp-offcanvas-2-close { cursor:pointer; position:relative; z-index:1002; }
.tp-offcanvas-close-btn svg path, .tp-offcanvas-2-close-btn svg path { stroke:#F5F2ED !important; }

/* logo archēLAB — maior e com brilho pleno */
.tp-header-logo img, .tp-header-10-logo img, .tp-header-12-logo img { height:44px !important; width:auto !important; opacity:1 !important; filter:none !important; }

/* desabilita cursor mágico (edição) */
#magic-cursor, #ball, .mouse-cursor, .cursor-inner, .cursor-outer, .tp-cursor-point-area { display:none !important; }
body.tp-magic-cursor, .tp-magic-cursor { cursor:auto !important; }
a, button, .cursor-pointer { cursor:pointer !important; }

/* preloader desabilitado (edição) */
#preloader, .preloader, .tp-preloader, .preloader-wrap { display:none !important; opacity:0 !important; visibility:hidden !important; }
body { opacity:1 !important; visibility:visible !important; }

/* fallback: conteúdo flui normal mesmo sem ScrollSmoother (evita tela colapsada) */
#smooth-wrapper { position:static !important; height:auto !important; overflow-x:clip !important; width:100% !important; }
#smooth-content { height:auto !important; transform:none !important; }

/* sem ScrollSmoother o conteúdo vazava na horizontal (tela espremida/rolagem
   lateral). overflow-x hidden no topo contém o vazamento SEM travar o scroll
   vertical; box-sizing evita que padding estoure a largura. */
html, body { overflow-x:clip !important; max-width:100% !important; }
#smooth-content { overflow-x:clip !important; width:100% !important; }
img, video, iframe, svg { max-width:100% !important; height:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENU MOBILE PRIME — estilo app (CET 2026-07-24)
   Ancora no estado .tp-offcanvas-area.opened do tema. Não muda a estrutura
   nem o JS de abrir/fechar — só eleva o visual e a animação.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop com blur + escurecido (profundidade de app) */
.body-overlay { background: rgba(6,6,8,.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .45s ease, visibility .45s ease; }

/* Painel: deslize suave (curva de app), largura confortável, sombra funda */
.tp-offcanvas-wrapper { transition: transform .55s cubic-bezier(.16,1,.3,1) !important; box-shadow: -30px 0 80px rgba(0,0,0,.55); max-width: 420px; width: 88vw; }
.tp-offcanvas-area.opened .tp-offcanvas-wrapper { box-shadow: -30px 0 80px rgba(0,0,0,.55); }

/* Menu mobile: tipografia grande e arejada, separadores sutis, item = linha tocável */
.tp-offcanvas-menu.d-xl-none nav > ul { margin: 8px 0 0; padding: 0; list-style: none; }
.tp-offcanvas-menu.d-xl-none nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.07); }
.tp-offcanvas-menu.d-xl-none nav > ul > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 4px; font-size: 25px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.15; color: #F5F2ED !important; text-decoration: none;
  transition: color .25s ease, padding-left .25s ease;
}
.tp-offcanvas-menu.d-xl-none nav > ul > li > a:hover { color: var(--gold, #C9A26D) !important; padding-left: 12px; }
/* Seta discreta à direita de cada item (affordance de app) */
.tp-offcanvas-menu.d-xl-none nav > ul > li > a::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid rgba(255,255,255,.28); border-top: 2px solid rgba(255,255,255,.28);
  transform: rotate(45deg); transition: border-color .25s ease, transform .25s ease;
}
.tp-offcanvas-menu.d-xl-none nav > ul > li > a:hover::after { border-color: var(--gold, #C9A26D); transform: rotate(45deg) translate(2px,-2px); }

/* Submenu (dropdown) recolhido/elegante */
.tp-offcanvas-menu.d-xl-none nav ul ul li a { font-size: 17px; font-weight: 500; padding: 11px 4px 11px 16px; color: #C9C4BC !important; }

/* STAGGER: ao abrir, cada item entra de baixo com atraso incremental (cascata app) */
.tp-offcanvas-menu.d-xl-none nav > ul > li { opacity: 0; transform: translateY(14px); }
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li {
  animation: arkeMenuIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(1){animation-delay:.10s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(2){animation-delay:.16s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(3){animation-delay:.22s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(4){animation-delay:.28s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(5){animation-delay:.34s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(6){animation-delay:.40s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(n+7){animation-delay:.46s}
@keyframes arkeMenuIn { to { opacity: 1; transform: translateY(0); } }

/* Botão fechar: alvo maior, gira no hover (toque de app) */
.tp-offcanvas-close-btn { transition: transform .3s ease, opacity .25s ease; opacity: .85; }
.tp-offcanvas-close-btn:hover { transform: rotate(90deg); opacity: 1; }

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  .tp-offcanvas-menu.d-xl-none nav > ul > li { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Grafo do hero: garante que o canvas ocupe o banner e não colapse (o placeholder
   antes dava altura via <img>; o canvas tem altura própria, mas reforçamos). */
.st-banner-wrap { min-height: clamp(340px,44vw,640px); }
/* ⚠️ Esta regra é do banner ANTIGO (.st-banner-wrap/.st-hero-area). Como usa
   seletor de ID, ela vencia a classe `.arq-hero__canvas` das páginas novas e
   jogava o canvas para dentro do fluxo — virava uma FAIXA acima do texto em
   vez de fundo do hero (era isso o "grafo descolado do texto" na /site/arche).
   O :not() devolve o canvas novo para o position:absolute que ele declara. */
#arke-grafo-hero:not(.arq-hero__canvas) { display:block; width:100%; position:relative; z-index:1; }

/* Grafo como FUNDO DO HERO (CET): o canvas fica atrás (z-index:0); o conteúdo
   do hero sobe acima dele. A faixa-banner separada (placeholder 2558X1928) sai. */
.st-hero-area { position: relative; }
.st-hero-area > .container,
.st-hero-area .st-hero-border,
.st-hero-area .st-hero-shape { position: relative; z-index: 2; }
#arke-grafo-hero { pointer-events: none; }
.st-banner-area { display: none !important; }

/* Botão "voltar ao topo" migra para a ESQUERDA; a direita fica pro WhatsApp (CET). */
.back-to-top-wrapper { right: auto !important; left: 24px !important; }

/* ═══ AJUSTES CET 2026-07-24 (2ª leva) ═══════════════════════════════════════ */

/* Logos das APIs de IA: brancos, ALTURA uniforme, caixa fixa (mesmo tamanho). */
.arke-logo-ia { display:flex; align-items:center; justify-content:center; height:44px; }
.arke-logo-ia img { height:36px !important; width:auto !important; max-width:130px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.8; transition:opacity .25s ease; }
.arke-logo-ia img:hover { opacity:1; }

/* Botão "voltar ao topo": à ESQUERDA e o botão em si alinhado ali. */
.back-to-top-wrapper { right:auto !important; left:24px !important; }
.back-to-top-btn { margin-left:0 !important; margin-right:auto !important; }

/* Logo archēLAB no topo: -30% no CELULAR. */
@media (max-width: 768px) {
  .tp-header-logo img, .logo-white, .logo-black { height:31px !important; }
}

/* ═══ MENU MOBILE — PRIME (estilo app: full, fonte gorda, entrada animada) ═══ */
@media (max-width: 1200px) {
  /* Painel FULL — ocupa a tela inteira */
  .tp-offcanvas-wrapper { width:100vw !important; max-width:100vw !important; }
  /* Fundo escuro + aurora sutil de grafos (canvas injetado pela rota) atrás */
  .tp-offcanvas-area, .tp-offcanvas-wrapper { background:#080808 !important; }
  #arke-menu-grafo { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.28; pointer-events:none; }
  .tp-offcanvas-top, .tp-offcanvas-main { position:relative; z-index:2; }
  /* Menu: itens BEM grandes e fonte gorda, centralizados verticalmente */
  .tp-offcanvas-main { display:flex; flex-direction:column; justify-content:center; min-height:70vh; }
  .tp-offcanvas-menu.d-xl-none nav > ul > li > a {
    font-size:34px !important; font-weight:800 !important; letter-spacing:-.02em; padding:16px 4px !important;
  }
  .tp-offcanvas-menu.d-xl-none nav > ul > li { border-bottom-color:rgba(255,255,255,.06) !important; }
  /* Entrada em cascata mais marcante */
  .tp-offcanvas-menu.d-xl-none nav > ul > li { opacity:0; transform:translateY(22px); }
  .tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li { animation:arkeMenuIn .55s cubic-bezier(.16,1,.3,1) forwards; }
}

/* Marrom #453030 do tema (watermark "INICIAR PROJETO", bordas) vira cinza-escuro neutro — combina com preto+dourado. */
:root { --tp-common-brown: #2b2b2b !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR QUE SAI DA FRENTE (CET) — controlada por /site/js/arke-topbar.js
   Desce a página: recolhe. Sobe: volta. A regra de QUANDO está no JS; aqui só
   o movimento. A animação headerSlideDown do tema é desligada porque ela
   reexecutava a cada vez que a classe .header-sticky voltava, brigando com
   o transform daqui (a barra "pulava" duas vezes).
   ═══════════════════════════════════════════════════════════════════════════ */
.ark-nav {
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  will-change: transform;
}
.ark-nav.header-sticky { animation: none !important; -webkit-animation: none !important; }
.ark-nav--oculto { transform: translateY(-102%); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ark-nav { transition: none; }
  .ark-nav--oculto { transform: none; opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDO DE SILÍCIO — megamenu + rodapé (CET 26/07)
   Pedido: "um fundo de silício brilhante com a animação sutil da cor da
   archēLAB". A leitura: a superfície é a BOLACHA (wafer) — escura, com a
   malha finíssima das trilhas — e a marca aparece como um brilho que
   RESPIRA por baixo, nunca como um degradê chapado por cima.
   Três camadas, todas atrás do conteúdo:
     ::before → o brilho dourado que deriva devagar (26s, ida e volta)
     ::after  → a malha 44px + a varredura de luz que atravessa (14s)
     o próprio elemento → a base quase preta
   Sutil de propósito: opacidades entre .02 e .16. Se der pra "ver a
   animação", ela está forte demais — o certo é sentir que a superfície
   está viva sem conseguir apontar o movimento.
   ═══════════════════════════════════════════════════════════════════════ */
.ark-mega,
.st-footer-area {
  position: relative;
  isolation: isolate;
  background-color: #0A0A0B;
}
/* O conteúdo sobe pra frente das camadas. Nos filhos diretos, porque no
   megamenu o elemento é um grid e as colunas são os filhos. */
.ark-mega > *,
.st-footer-area > * { position: relative; z-index: 2; }

/* ── camada 1 · o brilho da marca respirando ─────────────────────────────── */
.ark-mega::before,
.st-footer-area::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 18% 22%, rgba(196,151,58,.16), transparent 62%),
    radial-gradient(34% 48% at 82% 78%, rgba(212,169,74,.11), transparent 66%),
    radial-gradient(52% 62% at 50% 0%,  rgba(126,146,178,.06), transparent 72%);
  will-change: transform;
  animation: arkSilicioDeriva 26s ease-in-out infinite alternate;
}
/* ── camada 2 · trilhas do silício + varredura de luz ────────────────────── */
.ark-mega::after,
.st-footer-area::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(245,242,237,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,237,.028) 1px, transparent 1px),
    linear-gradient(105deg, transparent 38%, rgba(196,151,58,.10) 47%,
                    rgba(245,242,237,.05) 50%, rgba(196,151,58,.10) 53%, transparent 62%);
  background-size: 44px 44px, 44px 44px, 260% 100%;
  background-repeat: repeat, repeat, no-repeat;
  /* a malha some nas bordas: grade que encosta na borda vira "tabela" */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 42%, transparent 92%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 42%, transparent 92%);
  animation: arkSilicioVarredura 14s linear infinite;
}

/* No MEGAMENU o brilho pode transbordar (o painel já recorta com overflow);
   no RODAPÉ não usamos overflow:hidden pra não decepar o ícone decorativo do
   topo — por isso lá o brilho nasce contido em inset:0. */
.ark-mega { overflow: hidden; }
.ark-mega::before { inset: -40%; filter: blur(14px); }
.st-footer-area::before { inset: 0; filter: blur(22px); }

@keyframes arkSilicioDeriva {
  0%   { transform: translate3d(0, 0, 0)          scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0)     scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0)     scale(1.03); }
}
@keyframes arkSilicioVarredura {
  0%   { background-position: 0 0, 0 0, -60% 0; }
  100% { background-position: 0 0, 0 0, 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ark-mega::before, .ark-mega::after,
  .st-footer-area::before, .st-footer-area::after { animation: none; }
}

/* ── Rodapé: legibilidade sobre a nova superfície ────────────────────────── */
.st-footer-area .st-footer-widget-title {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,242,237,.55); margin-bottom: 18px;
}
.st-footer-area .st-footer-widget-menu ul { margin: 0; padding: 0; list-style: none; }
.st-footer-area .st-footer-widget-menu li + li { margin-top: 9px; }
.st-footer-area .st-footer-widget-menu a { color: rgba(245,242,237,.78); transition: color .22s ease; }
.st-footer-area .st-footer-widget-menu a:hover { color: var(--gold, #C4973A); }

/* Bandeirinha: pequena e discreta — é um selo de origem, não um botão. */
.ark-foot-local {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: rgba(245,242,237,.52);
}
.ark-foot-flag { font-size: 13px; line-height: 1; filter: saturate(.9); }