/* =====================================================================
   ANJORA — style.css
   Estilos do site institucional. Cada bloco abaixo tem um comentário.
   ===================================================================== */


/* --- FONTE DO SITE: Montserrat (arquivos locais em ../imagens/fonts) --- */
@font-face{font-family:Montserrat;font-weight:400;src:url(../fontes/Montserrat-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Montserrat;font-weight:500;src:url(../fontes/Montserrat-Medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:Montserrat;font-weight:600;src:url(../fontes/Montserrat-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:Montserrat;font-weight:700;src:url(../fontes/Montserrat-Bold.ttf) format("truetype");font-display:swap}

/* --- FONTE DA MARCA: Hunterra, usada só nos nomes (wordmarks) das marcas --- */
@font-face{font-family:Hunterra;src:url(../fontes/Hunterra.ttf) format("truetype");font-display:swap}

/* --- VARIÁVEIS DE COR (tema claro) + margem de segurança para telas com notch --- */
:root{
  --ink:#231F20;--red:#D81920;--orange:#E6741D;--yellow:#FBAC16;--white:#FFFFFF;
  --bg:#FFFFFF;--bg2:#F4F3F2;--text:#231F20;--muted:#6B6667;--line:#E3E1E0;--card:#FFFFFF;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#231F20;--bg2:#1B1819;--text:#FFFFFF;--muted:#B5AFB0;--line:#3A3536;--card:#2B2728}}

/* --- TEMA ESCURO forçado pelo botão 'Tema' do menu --- */
:root[data-theme="dark"]{--bg:#231F20;--bg2:#1B1819;--text:#FFFFFF;--muted:#B5AFB0;--line:#3A3536;--card:#2B2728}

/* --- Rolagem suave e espaço para o menu fixo não cobrir os títulos --- */
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}

/* --- Reset básico --- */
*{box-sizing:border-box}

/* --- Base: cores e fonte Montserrat do corpo do site --- */
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 Montserrat,system-ui,sans-serif}

/* --- Títulos em Montserrat --- */
h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;line-height:1.15;margin:0}

/* --- Links herdam a cor do texto --- */
a{color:inherit}

/* --- Acessibilidade: contorno visível ao navegar pelo teclado --- */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* --- Container central: largura máxima e margens laterais --- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* --- MENU SUPERIOR fixo --- */
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}

/* --- Faixa que cobre a área do notch no celular --- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}

/* --- Barra de navegação --- */
nav{display:flex;align-items:center;justify-content:space-between;height:68px}

/* --- Logo no menu --- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .wm{font-size:22px}

/* --- Tamanho da logo (símbolo R) no menu --- */
.logo{height:44px;width:auto;display:block}
.logo-fallback{display:none;width:36px;height:36px;border:2px dashed var(--muted);border-radius:6px;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}

/* --- Links do menu (somem no celular) --- */
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
nav ul a{text-decoration:none;color:var(--muted)}
nav ul a:hover{color:var(--text)}
/* Link da seção que o visitante está lendo (marcado pelo script.js) */
nav ul a{padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav ul a.active{color:var(--text);font-weight:600;border-bottom-color:var(--red)}
/* (no celular os links viram um menu suspenso: ver bloco VERSÃO MOBILE no final) */

/* --- WORDMARKS: nome da marca em vermelho, fonte Hunterra --- */
.wm{font-family:Hunterra,Montserrat,sans-serif;color:#F12B2B;letter-spacing:.04em;line-height:1;text-transform:uppercase;font-weight:400}
.wm-sub{font:600 11px/1 Montserrat,sans-serif;letter-spacing:.42em;color:var(--muted);text-transform:uppercase;margin-top:8px;padding-left:.42em}

/* --- LOCKUPS: símbolo R + nome embaixo (padrão da logo da Rafinha) --- */
.lock{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.lock img{display:block;width:auto}
.lock .wm{margin-top:12px}
.lock.hero-lock{flex:0 0 auto}
.lock.hero-lock img{height:clamp(120px,18vw,190px);filter:drop-shadow(0 12px 40px rgba(230,116,29,.35))}
.lock.hero-lock .wm{font-size:clamp(30px,4.6vw,48px);margin-top:20px}
.lock.hero-lock .wm-sub{color:#E2D9DA}
.lock.card-lock img{height:64px}
.lock.card-lock .wm{font-size:24px}

/* --- Área da logo no topo de cada card de projeto (centralizada) --- */
.cardhead{min-height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cardhead .raf{height:104px;width:auto;display:block}

/* --- HERO (topo da home): fundo de circuitos com camada escura para dar leitura ao texto --- */
.hero{padding:104px 0 96px;position:relative;color:#fff;background:linear-gradient(90deg,rgba(20,6,7,.88) 0%,rgba(20,6,7,.55) 60%,rgba(20,6,7,.35) 100%),url(../imagens/fundo-circuitos.jpg) center/cover no-repeat,#1a0607;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow))}
.hero .wrap{display:flex;align-items:center;justify-content:space-between;gap:48px}
.hero .txt{flex:1 1 auto}
.hero h1{color:#fff}
.hero p{color:#E2D9DA}
.hero .btn.s{border-color:rgba(255,255,255,.7);color:#fff}
.hero .btn.s:hover{background:rgba(255,255,255,.1)}
@media(max-width:760px){.hero-lock{display:none}.hero{padding:72px 0 64px}}

/* --- RODAPÉ com o mesmo fundo de circuitos --- */
footer{background:linear-gradient(rgba(20,6,7,.9),rgba(20,6,7,.95)),url(../imagens/fundo-circuitos.jpg) center/cover no-repeat,#231F20}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:700;max-width:14em;letter-spacing:-.02em}
.hero p{max-width:40em;color:#E2D9DA;font-size:18px;margin:24px 0 36px}

/* --- Faixa de três cores (vermelho, laranja, amarelo) --- */
.bar{display:flex;height:6px;width:min(320px,70%);margin-bottom:36px;border-radius:3px;overflow:hidden}
.bar i{flex:1}
.bar i:nth-child(1){background:var(--red)}
.bar i:nth-child(2){background:var(--orange)}
.bar i:nth-child(3){background:var(--yellow)}

/* --- BOTÕES --- */
.btn{display:inline-block;padding:14px 26px;border-radius:8px;font:600 15px Montserrat,sans-serif;text-decoration:none;margin-right:10px}
.btn.p{background:var(--red);color:#fff}
.btn.p:hover{background:#b91319}
.btn.s{border:1.5px solid var(--text)}

/* --- SEÇÕES: espaçamento e fundo alternado --- */
section{padding:80px 0}
section.alt{background:var(--bg2)}

/* --- Títulos de seção --- */
h2{font-size:clamp(28px,4vw,40px);font-weight:600;margin-bottom:16px;letter-spacing:-.01em}

/* --- Texto de apoio abaixo dos títulos --- */
.lead{color:var(--muted);max-width:40em;margin:0 0 44px}

/* --- CARDS DOS PROJETOS: grade que se adapta à largura da tela --- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* --- Aparência dos cards --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;border-top:4px solid var(--red)}
.card.o{border-top-color:var(--orange)}
.card.y{border-top-color:var(--yellow)}
.card h3{font-size:20px;margin-bottom:10px}
.cl{height:56px;width:auto;display:block;margin-bottom:18px}
.cl.v{height:84px}

/* --- Cards clicáveis: centralizados, com efeito ao passar o mouse --- */
a.card{display:block;text-decoration:none;color:inherit;text-align:center;transition:transform .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);border-color:var(--orange)}
a.card ul{text-align:left}
.more{display:inline-block;margin-top:18px;font:600 14px Montserrat,sans-serif;color:var(--red)}
.card p{margin:0;color:var(--muted);font-size:16px}
.card ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:15px}

/* --- Selos 'Projeto mais definido' / 'Em planejamento' --- */
.tag{display:inline-block;font-size:13px;padding:3px 10px;border-radius:99px;margin-bottom:14px;background:var(--bg2);color:var(--muted)}
.tag.live{background:var(--red);color:#fff}

/* --- PRODUTOS DE SOFTWARE: grade e cards --- */
.products{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.prod{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--card)}
.prod h3{font-size:19px;margin-bottom:8px}
.prod p{margin:0;color:var(--muted);font-size:15px}
.prod.main{grid-column:1/-1;border-left:6px solid var(--red);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.prod.main div{flex:1 1 340px}

/* --- PILARES DA MARCA --- */
.pillars{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line)}
.pillars div{padding:24px 20px 24px 0;border-bottom:1px solid var(--line)}
.pillars b{font:600 17px Montserrat,sans-serif;display:block;margin-bottom:6px}
.pillars span{color:var(--muted);font-size:15px}

/* --- SEÇÃO SOBRE: texto + linha do tempo --- */
.story{display:grid;gap:40px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.story{grid-template-columns:1fr}}
.timeline{border-left:2px solid var(--line);padding-left:22px}
.timeline p{margin:0 0 22px;position:relative}
.timeline p::before{content:"";position:absolute;left:-29px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.timeline b{font-family:Montserrat,sans-serif}
.time-item{margin:0 0 22px;position:relative}
.time-item::before{content:"";position:absolute;left:-29px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.time-item b,.time-item span{display:block}
.time-item span{color:var(--muted)}
footer{color:#fff;padding:56px 0 40px}
footer p{color:#B5AFB0;margin:6px 0;font-size:15px}
footer .sig{margin-top:28px;padding-top:20px;border-top:1px solid #3A3536;font-size:14px}

/* --- Botão de alternar tema --- */
.toggle{background:none;border:1px solid var(--line);color:var(--text);border-radius:99px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer}

/* --- Animação da faixa colorida (desligada para quem prefere menos movimento) --- */
/* (a animação da barra agora está no bloco ABERTURA DO TOPO, no final deste arquivo) */

/* --- PÁGINAS DE PROJETO (Rafinha, VIP Gamer, ANJORA Software) --- */
.page{padding:56px 0 96px}
.page h1{font-size:clamp(30px,5vw,48px);margin:8px 0 18px}
.page h2{font-size:22px;margin:40px 0 14px}

/* --- Link 'Voltar aos projetos' --- */
.back{font:600 14px Montserrat,sans-serif;color:var(--red);text-decoration:none}

/* --- Logo centralizada no topo da página do projeto --- */
.pghead{display:flex;justify-content:center;margin:28px 0 8px}
.pghead .cardhead{margin:0}
.pghead img{max-height:150px}
.page h1,.page .lead{text-align:center;margin-left:auto;margin-right:auto}

/* --- Lista 'O que oferece' --- */
.ben{padding-left:20px;color:var(--muted);max-width:44em}
.ben li{margin-bottom:8px}

/* --- Caixa do vídeo do YouTube (16:9) --- */
.video{position:relative;aspect-ratio:16/9;max-width:820px;border-radius:12px;overflow:hidden;background:#1a0607;margin-bottom:32px;display:flex;align-items:center;justify-content:center;color:#E2D9DA;text-align:center;padding:20px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- EFEITO "PÁGINA POR PÁGINA" (scroll snap) ---
   Ao rolar, quando uma seção chega perto da próxima, o navegador "puxa" a
   rolagem e completa o movimento até o início da seção seguinte.
   Só vale em telas largas (computador/tablet); no celular fica desligado. */
@media (min-width:800px){
  /* Liga o encaixe vertical em toda a página */
  html{scroll-snap-type:y mandatory}
  /* Cada seção da home (e o rodapé) é um ponto de encaixe */
  main>section,footer{scroll-snap-align:start}
  /* Cada seção ocupa a altura da tela (menos o menu), com o conteúdo centralizado */
  main>section{min-height:calc(100vh - 68px - env(safe-area-inset-top,0px));display:flex;align-items:center}
  main>section>.wrap{width:100%}
  /* Quando o script.js assume a rolagem (mais rápida), desliga o encaixe nativo */
  html.js-snap{scroll-snap-type:none}
}

/* =====================================================================
   FUNDO EM VÍDEO NAS PÁGINAS DE PROJETO
   O vídeo toca em loop, sem som, atrás do conteúdo. A camada escura
   (.bgvideo::after) garante a leitura do texto.
   ===================================================================== */
.page{position:relative;color:#fff;background:#140607;min-height:calc(100vh - 68px)}
.page h1,.page h2,.page .lead,.ben{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.page .lead,.page .ben{color:#E8E0E1}
.page .back{color:var(--yellow)}
.page .wrap{position:relative;z-index:1}

/* Camada de fundo: fixa na tela, atrás de tudo (a imagem é a "capa" enquanto o vídeo carrega) */
.bgvideo{position:fixed;inset:0;z-index:0;background:#140607 center/cover no-repeat;overflow:hidden}
.bgvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgvideo::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,4,5,.84),rgba(10,4,5,.72) 55%,rgba(10,4,5,.88))}
.page[data-bg="rafinha-tecnologia"] .bgvideo{background-image:url(../videos/rafinha-tecnologia-full.jpg)}
.page[data-bg="vip-gamer"] .bgvideo{background-image:url(../videos/vip-gamer-full.jpg)}
.page[data-bg="circuitos"] .bgvideo{background-image:url(../imagens/fundo-circuitos.jpg)}
/* Telas em pé (celular): usa a versão vertical */
@media (max-aspect-ratio:1/1){
  .page[data-bg="rafinha-tecnologia"] .bgvideo{background-image:url(../videos/rafinha-tecnologia-cell.jpg)}
  .page[data-bg="vip-gamer"] .bgvideo{background-image:url(../videos/vip-gamer-cell.jpg)}
}
/* Com uma página de projeto aberta, o menu fica escuro e translúcido sobre o vídeo */
body.proj-open header{background:rgba(20,6,7,.82);border-bottom-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.proj-open::before{background:rgba(20,6,7,.9)}
body.proj-open nav ul a,body.proj-open .toggle{color:#E8E0E1}
body.proj-open nav ul a.active,body.proj-open nav ul a:hover{color:#fff}
body.proj-open .toggle{border-color:rgba(255,255,255,.3)}
body.proj-open .menu-btn span{background:#fff}
@media(max-width:760px){body.proj-open nav ul{background:rgba(20,6,7,.96)}}

/* =====================================================================
   VERSÃO MOBILE (celulares e telas estreitas)
   ===================================================================== */
html{-webkit-text-size-adjust:100%}
.nav-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:none;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
header.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.open .menu-btn span:nth-child(2){opacity:0}
header.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  /* Menu: botão hambúrguer e links em painel suspenso */
  .menu-btn{display:flex}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 20px 16px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.18)}
  header.open nav ul{display:flex}
  nav ul a{display:block;padding:14px 4px;font-size:17px;border-bottom:1px solid var(--line)}
  nav ul li:last-child a{border-bottom:0}
  nav ul a.active{border-bottom-color:var(--line);color:var(--red)}
  /* Topo da home */
  .hero{padding:56px 0 56px}
  .hero p{font-size:17px;margin:18px 0 28px}
  .hero-btns{display:flex;flex-direction:column;gap:12px}
  .hero-btns .btn{margin:0;text-align:center}
  /* Seções e títulos */
  section{padding:56px 0}
  .lead{margin-bottom:28px}
  .card{padding:22px}
  .story{gap:28px}
  .pillars div{padding-right:8px}
  /* Páginas de projeto */
  .page{padding:32px 0 64px}
  .page .btn{display:block;text-align:center;margin:0}
  .video{padding:12px;border-radius:10px}
  footer{padding:44px 0 32px}
}
@media (max-width:380px){
  h2{font-size:26px}
  .brand .wm{font-size:18px}
  .toggle{padding:6px 10px}
}

/* =====================================================================
   AJUSTE DO VÍDEO DE FUNDO (versão 2)
   O vídeo agora aparece NÍTIDO no topo da página (o "palco") e escurece
   gradualmente para o texto ficar legível mais abaixo.
   ===================================================================== */
.page{--stage:max(80vh,520px);--ov-top:.80;--ov-mid:.70}
.page[data-bg="rafinha-tecnologia"]{--ov-top:.06;--ov-mid:.12}   /* vinheta da Rafinha: quase sem camada escura */
.page[data-bg="vip-gamer"]{--ov-top:.40;--ov-mid:.50}            /* vinheta VIP Gamer: mais clara no topo, mas sem estourar o texto */

/* O palco rola junto com a página (não fica mais fixo) */
.bgvideo{position:absolute;inset:0 0 auto 0;height:var(--stage)}
.bgvideo::after{background:linear-gradient(rgba(10,4,5,var(--ov-top)) 0%,rgba(10,4,5,var(--ov-mid)) 38%,rgba(10,4,5,.82) 68%,#140607 97%)}

/* A vinheta da Rafinha já mostra a logo: o espaço da logo vira um vão para o vídeo aparecer */
.page[data-bg="rafinha-tecnologia"] .pghead{height:calc(var(--stage)*.8 - 60px);margin:0}
.page[data-bg="rafinha-tecnologia"] .pghead>*{display:none}

/* Vinheta da Rafinha: a camada escura só começa depois da logo, para ela aparecer com brilho total */
.page[data-bg="rafinha-tecnologia"] .bgvideo::after{background:linear-gradient(rgba(10,4,5,.05) 0%,rgba(10,4,5,.08) 62%,rgba(10,4,5,.78) 90%,#140607 100%)}

/* =====================================================================
   TÍTULO OCULTO + VÍDEO DO YOUTUBE
   ===================================================================== */
/* Texto só para leitores de tela e buscadores (o nome já aparece no vídeo de fundo) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Vídeo vertical (YouTube Shorts): proporção 9:16, centralizado */
.video.short{aspect-ratio:9/16;height:min(76vh,640px);width:auto;max-width:100%;margin-left:auto;margin-right:auto}
.page .video{margin-left:auto;margin-right:auto}
.yt-line{text-align:center;margin:-16px 0 28px;font-size:14px}
.yt-line a{color:var(--yellow)}
.page[data-yt=""] .yt-line{display:none}

/* =====================================================================
   LAYOUT DAS PÁGINAS DE PROJETO (versão 3)
   1) vídeo de fundo ocupa o topo ("palco"), sem nenhum texto ou logo por cima
   2) logo abaixo vem o vídeo do YouTube
   3) depois a descrição e a lista "O que oferece"
   ===================================================================== */
/* O vão do topo agora cobre o palco inteiro, nas duas páginas com vinheta (Rafinha e VIP Gamer) */
.page[data-bg="rafinha-tecnologia"] .pghead,
.page[data-bg="vip-gamer"] .pghead{height:calc(var(--stage) - 60px);margin:0}
.page[data-bg="vip-gamer"] .pghead>*{display:none}
.page .lead{margin-top:8px}

/* Miniatura clicável (usada quando o site é aberto direto do arquivo, onde o YouTube bloqueia o player) */
.yt-thumb{position:absolute;inset:0;display:block;text-decoration:none;color:#fff}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt-play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:14px;background:#D81920;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.yt-note{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.8))}

/* =====================================================================
   ABERTURA DO TOPO (loading da barra, logo voando, letras entrando)
   ===================================================================== */
/* Barra de 3 cores "carrega" da esquerda para a direita, rápido (0,8 s no total) */
.bar i{transform-origin:left;animation:carrega .26s linear both}
.bar i:nth-child(2){animation-delay:.26s}
.bar i:nth-child(3){animation-delay:.52s}
@keyframes carrega{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Logo do topo: escondida até o script fazer ela sair da barra; clicável e expansível */
.js .hero-lock{opacity:0}
.hero-lock{cursor:pointer;position:relative;z-index:2;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hero-lock:hover,.hero-lock:focus-visible{transform:scale(1.28)}   /* cresce sem empurrar o texto (transform não altera o layout) */
/* Botões do topo surgem depois que o texto termina */
.js .hero-btns{opacity:0}
.intro-go .hero-btns{animation:surge .6s ease 1.9s both}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* =====================================================================
   LETRAS SURGINDO (efeito sutil em todo o site)
   O script.js separa os textos em letras/palavras (.ch). Elas começam
   transparentes, levemente deslocadas para a direita, e ficam normais.
   ===================================================================== */
.rv .ch{display:inline-block;opacity:0;transform:translateX(var(--dx,14px));transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.rv.in .ch{opacity:1;transform:none}
.w{display:inline-block;white-space:nowrap}

/* =====================================================================
   CARDS DE PROJETO: logos num bloco escuro, com tamanhos parecidos
   (a logo da Rafinha tem "TECNOLOGIA" em branco, por isso precisa de fundo escuro)
   ===================================================================== */
.cardhead{background:radial-gradient(120% 120% at 50% 0%,#2b0e10,#120506);border:1px solid rgba(255,255,255,.07);border-radius:10px;min-height:176px;padding:16px;margin-bottom:20px}
.cardhead .raf{height:136px}
.cardhead .cl.v{height:150px;margin:0}                 /* brasão VIP Gamer maior, para dar destaque */
.lock.card-lock img{height:80px}
.lock.card-lock .wm{font-size:30px;margin-top:12px}
.lock.card-lock .wm-sub{color:#E2D9DA}
.pghead .cardhead{min-height:0}

/* Seção "Como trabalhamos" agora dentro do Sobre */
.values{margin-top:64px}
@media(max-width:760px){.values{margin-top:44px}}

/* Topo: tamanhos ajustados ao texto mais longo, para tudo caber na primeira tela */
@media (min-width:761px){
  .hero{padding:80px 0 72px}
  .hero h1{font-size:clamp(34px,4.6vw,52px)}
  .hero p{font-size:17px;margin:20px 0 28px}
  .bar{margin-bottom:28px}
}

/* =====================================================================
   FUNDO EM VÍDEO DA HOME (propagandas Rafinha e VIP Gamer se alternando)
   Um palco fixo atrás da página: aparece nas seções com classe .on-video
   (topo, Sobre e Projetos); as demais seções têm fundo próprio e cobrem o vídeo.
   ===================================================================== */
#bgstage{position:fixed;inset:0;z-index:-1;background:#140607 url(../imagens/fundo-circuitos.jpg) center/cover no-repeat;overflow:hidden}
#bgstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
#bgstage video.on{opacity:1}
body.proj-open #bgstage{display:none}

/* Seções sobre o vídeo: camada escura suave (dá para ver o vídeo, e o texto continua legível) e cores claras */
section.on-video{--text:#fff;--muted:#D3CBCC;--line:rgba(255,255,255,.18);--card:rgba(20,8,9,.62);--bg2:rgba(255,255,255,.07);
  color:#fff;background:rgba(12,4,5,.74)}
section.hero.on-video{background:linear-gradient(90deg,rgba(12,4,5,.84) 0%,rgba(12,4,5,.66) 60%,rgba(12,4,5,.5) 100%)}
section.on-video .card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
section.on-video .btn.s{border-color:rgba(255,255,255,.7);color:#fff}
section.on-video .timeline{border-left-color:rgba(255,255,255,.22)}

/* =====================================================================
   R DA MARCA (topo e Visão de futuro): cresce ao passar o mouse e mostra as logos dos projetos
   ===================================================================== */
.rlogo{position:relative;display:inline-block;flex:0 0 auto}
.rmain{display:block;transform-origin:center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rmain img{display:block;height:clamp(120px,18vw,190px);width:auto;filter:drop-shadow(0 12px 40px rgba(230,116,29,.35))}
.vis-lock .rmain img{height:clamp(110px,15vw,170px)}
.rlogo:hover .rmain,.rlogo:focus-within .rmain{transform:scale(1.28)}      /* cresce sem empurrar o texto */
/* o antigo efeito de crescer no bloco inteiro sai: agora só o R cresce (o painel não) */
.hero-lock:hover,.hero-lock:focus-within{transform:none}
.hero-lock{transition:none}

.rpanel{position:absolute;top:100%;right:0;padding-top:48px;display:flex;gap:10px;z-index:6;pointer-events:none}
.rlogo:hover .rpanel,.rlogo:focus-within .rpanel{pointer-events:auto}
.rtile{position:relative;width:104px;height:92px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:radial-gradient(120% 120% at 50% 0,#2b0e10,#0e0405);border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(-10px) scale(.9);transition:opacity .25s ease,transform .35s ease,box-shadow .25s}
.rtile.show{opacity:1;transform:none}
.rtile:hover{box-shadow:0 0 22px rgba(230,116,29,.5)}
.rtile img{position:relative;z-index:2;max-width:84%;max-height:80%}

/* 1) Rafinha Tecnologia: "chiado de sistema" (glitch + ruído de TV), como na vinheta */
.rt-raf.gl img{animation:chiado .9s steps(1,end) both}
@keyframes chiado{
  0%{opacity:.3;transform:translateX(-9px) skewX(-8deg);clip-path:inset(8% 0 58% 0);filter:drop-shadow(3px 0 #f00) drop-shadow(-3px 0 #0ff) contrast(1.8)}
  10%{opacity:1;transform:translateX(7px);clip-path:inset(55% 0 10% 0);filter:drop-shadow(-3px 0 #f00) drop-shadow(3px 0 #0ff)}
  20%{transform:translateX(-5px) skewX(5deg);clip-path:inset(0 0 40% 0);filter:brightness(2) contrast(1.6)}
  30%{transform:translateX(6px);clip-path:inset(30% 0 30% 0);filter:drop-shadow(2px 0 #f00) drop-shadow(-2px 0 #0ff)}
  45%{transform:translateX(-3px);clip-path:inset(0 0 0 0);filter:hue-rotate(40deg) contrast(1.4)}
  60%{transform:translateX(3px) skewX(-3deg);filter:drop-shadow(2px 0 #f00) drop-shadow(-2px 0 #0ff)}
  75%{transform:translateX(-1px);filter:brightness(1.3)}
  100%{opacity:1;transform:none;clip-path:inset(0);filter:none}
}
.rt-raf .noise{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.rt-raf.gl .noise{animation:ruido .9s steps(7,end) both}
@keyframes ruido{0%{opacity:.9;background-position:0 0,0 0}30%{opacity:.7;background-position:0 2px,40px 20px}60%{opacity:.4;background-position:0 1px,-30px 50px}100%{opacity:0;background-position:0 0,10px 10px}}

/* 2) VIP Gamer: raios (relâmpagos desenhados pelo script) + clarão */
.rt-vip img{opacity:0;transition:opacity .2s ease .15s}
.rt-vip.show img{opacity:1}
.rt-vip .bolt{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.rt-vip .bolt polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.rt-vip .b1{stroke:#7fd0ff;stroke-width:3.2;opacity:.8;filter:blur(1.5px)}
.rt-vip .b2{stroke:#fff;stroke-width:1.3;filter:drop-shadow(0 0 3px #8fd8ff)}
.rt-vip.flash{box-shadow:0 0 26px 4px rgba(127,208,255,.75),inset 0 0 22px rgba(255,255,255,.6)}
.rt-vip.flash img{filter:brightness(1.8)}

/* 3) ANJORA Software: chuva digital (estilo Matrix) nas cores da marca */
.rt-anj canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9;transition:opacity .8s ease .6s}
.rt-anj.mx-on canvas{opacity:.5}
.mx-logo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:0;transition:opacity .6s ease .7s;
  text-shadow:0 0 8px #000,0 0 14px #000}
.rt-anj.mx-on .mx-logo{opacity:1}
.mx-logo img{height:34px;max-width:none;max-height:none}
.mx-logo .wm{font-size:15px}
.mx-logo em{font:600 8px/1 Montserrat,sans-serif;letter-spacing:.38em;text-transform:uppercase;color:#E8E0E1;font-style:normal;padding-left:.38em}

/* Visão de futuro: texto + R lado a lado */
.future{display:flex;align-items:center;justify-content:space-between;gap:56px}
.future-text{flex:1 1 auto}
.future .lead{margin-bottom:0;max-width:36em}
@media(max-width:760px){
  .future{flex-direction:column;align-items:flex-start;gap:28px}
  .vis-lock{align-self:center}
}
@media(hover:none){.rpanel{display:none}}

/* =====================================================================
   RODAPÉ (igual em todas as páginas) + ÍCONES DE CONTATO
   ===================================================================== */
footer h2{color:#fff}
.contacts{list-style:none;display:flex;flex-wrap:wrap;gap:20px;padding:0;margin:26px 0 8px}
.ic{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#E8E0E1;font-size:12px;letter-spacing:.03em}
.ic svg{width:54px;height:54px;padding:14px;border:1px solid rgba(255,255,255,.24);border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,border-color .25s,color .25s,box-shadow .25s}
.ic:hover{color:var(--yellow)}
.ic:hover svg{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 0 18px rgba(230,116,29,.5)}
/* Ícones surgem um a um (mesmo efeito dos textos): só depois que o script liga a classe rv-ok */
.rv-ok .contacts li{opacity:0;transform:translateX(14px);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*110ms)}
.rv-ok .contacts.in li{opacity:1;transform:none}

/* Botões das páginas de projeto: "Projetos" (volta à lista) + "Fale com a ANJORA" */
.page .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.page .btn.s{border-color:rgba(255,255,255,.7);color:#fff}
.page .btn.s:hover{background:rgba(255,255,255,.1)}
.page .btn{margin-right:0}
@media(max-width:760px){.page .cta{flex-direction:column}}

/* =====================================================================
   AJUSTES (versão 4)
   ===================================================================== */
/* Logos dos projetos: agora centralizadas logo abaixo do R */
.rpanel{left:50%;right:auto;transform:translateX(-50%)}
@media(max-width:1180px){
  .rtile{width:90px;height:80px}
  .hero-lock,.vis-lock{margin-right:36px}      /* folga para o painel centralizado não ser cortado na lateral */
}

/* Visão de futuro: mesmo fundo de circuitos do topo e do rodapé, com camada escura para o texto */
#visao{--text:#fff;--muted:#D3CBCC;--line:rgba(255,255,255,.18);color:#fff;
  background:linear-gradient(90deg,rgba(20,6,7,.9) 0%,rgba(20,6,7,.62) 60%,rgba(20,6,7,.4) 100%),url(../imagens/fundo-circuitos.jpg) center/cover no-repeat,#1a0607}

/* Celular / tela em pé: camada escura um pouco mais forte sobre o vídeo vertical (evita "estourar") */
@media (max-aspect-ratio:1/1){
  section.on-video{background:rgba(12,4,5,.8)}
  section.hero.on-video{background:linear-gradient(rgba(12,4,5,.8),rgba(12,4,5,.74))}
}