/* =====================================================================
   TEMA NEON — tema oficial do site (aprovado pelo Will em 2026-08-06)
   Carregado DEPOIS de site.css, só sobrescreve o necessário. Manter separado
   facilita voltar atrás: basta remover o <link> das páginas.

   As cores saem da íris do logo da WEN, amostradas do arquivo:
     magenta #901878 · verde #90c018 · ciano #0090d8 · vermelho #d80000 · amarelo #f0d800
   Para neon elas sobem em saturação e luminosidade — cor de logo é opaca,
   cor de neon precisa "acender" contra o preto.

   Regra que guiou tudo: neon em TÍTULO, NÚMERO, BORDA e BADGE.
   Nunca em corpo de texto — texto colorido brilhante sobre preto cansa a
   vista e derruba a legibilidade em telas ruins e no sol.
   ===================================================================== */

:root{
  /* Fundo: preto de verdade, com um respiro azulado para não parecer "apagado" */
  --bg: #06060b;
  --bg-elev: #0d0d16;
  --bg-elev-2: #141420;

  /* Neons da marca */
  --neon-ciano:   #00c8ff;
  --neon-magenta: #ff2d9b;
  --neon-verde:   #a5e622;
  --neon-amarelo: #ffe600;
  --neon-vermelho:#ff2e2e;

  /* O sistema continua falando "signal" e "amber", só que agora acesos */
  --signal: #b026ff;
  --signal-soft: rgba(176,38,255,0.20);
  --amber: var(--neon-amarelo);

  --ink: #f4f6ff;
  --ink-muted: #a8adc4;
  --ink-faint: #6b7089;

  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(0,200,255,0.30);
}

/* Brilho reaproveitável */
@keyframes neon-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.82; }
}

/* ===== Títulos acesos ===== */
.hero h1{
  text-shadow: 0 0 18px rgba(0,200,255,.35), 0 0 46px rgba(0,200,255,.16);
}
.hero h1 em{
  color: var(--neon-amarelo);
  text-shadow: 0 0 16px rgba(255,230,0,.55), 0 0 44px rgba(255,230,0,.25);
}
.section-head h2{
  text-shadow: 0 0 16px rgba(0,200,255,.28);
}

/* Numerador das seções: plaquinha de neon */
.section-head .chan{
  color: var(--neon-ciano);
  border-color: rgba(0,200,255,.45);
  box-shadow: 0 0 12px rgba(0,200,255,.25), inset 0 0 10px rgba(0,200,255,.10);
  text-shadow: 0 0 8px rgba(0,200,255,.6);
}

/* Cada card com um neon diferente, ciclando as cores do logo */
.grid .card:nth-child(5n+1){ --c: var(--neon-ciano);    --cr: 0,200,255; }
.grid .card:nth-child(5n+2){ --c: var(--neon-magenta);  --cr: 255,45,155; }
.grid .card:nth-child(5n+3){ --c: var(--neon-verde);    --cr: 165,230,34; }
.grid .card:nth-child(5n+4){ --c: var(--neon-amarelo);  --cr: 255,230,0; }
.grid .card:nth-child(5n+5){ --c: var(--neon-vermelho); --cr: 255,46,46; }
.card{
  border-color: rgba(255,255,255,.09);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.card:hover{
  border-color: rgba(var(--cr, 0,200,255), .55);
  box-shadow: 0 0 24px rgba(var(--cr, 0,200,255), .16);
  transform: translateY(-2px);
}
.card .ico{
  color: var(--c, var(--neon-ciano));
  border-color: rgba(var(--cr, 0,200,255), .45);
  text-shadow: 0 0 8px rgba(var(--cr, 0,200,255), .55);
}
.card h3{ color: var(--ink); }

/* ===== Botões ===== */
.btn-primary{
  background: linear-gradient(135deg, #b026ff, #ff2d9b);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(176,38,255,.42), 0 0 60px rgba(255,45,155,.18);
}
.btn-primary:hover{
  background: linear-gradient(135deg, #c04dff, #ff4fae);
  box-shadow: 0 0 30px rgba(176,38,255,.6), 0 0 80px rgba(255,45,155,.28);
}
.btn-ghost{
  border-color: rgba(0,200,255,.38);
  box-shadow: inset 0 0 14px rgba(0,200,255,.06);
}
.btn-ghost:hover{
  border-color: var(--neon-ciano);
  color: var(--neon-ciano);
  box-shadow: 0 0 20px rgba(0,200,255,.30), inset 0 0 14px rgba(0,200,255,.10);
}
.nav-cta{
  border-color: rgba(255,230,0,.42);
  box-shadow: 0 0 14px rgba(255,230,0,.16);
}
.nav-cta:hover{
  border-color: var(--neon-amarelo);
  color: var(--neon-amarelo);
  box-shadow: 0 0 22px rgba(255,230,0,.38);
}

/* ===== Números da prova social: o momento mais "letreiro" do site ===== */
.proof-item:nth-child(1) .n{ color: var(--neon-ciano);    text-shadow:0 0 14px rgba(0,200,255,.6), 0 0 40px rgba(0,200,255,.25); }
.proof-item:nth-child(2) .n{ color: var(--neon-magenta);  text-shadow:0 0 14px rgba(255,45,155,.6), 0 0 40px rgba(255,45,155,.25); }
.proof-item:nth-child(3) .n{ color: var(--neon-verde);    text-shadow:0 0 14px rgba(165,230,34,.6), 0 0 40px rgba(165,230,34,.25); }
.proof-item:nth-child(4) .n{ color: var(--neon-amarelo);  text-shadow:0 0 14px rgba(255,230,0,.6), 0 0 40px rgba(255,230,0,.25); }

/* ===== Hero: o scrim vira preto, e o roxo/ciano acende no canto ===== */
.hero .hero-scrim{
  background:
    linear-gradient(100deg, rgba(6,6,11,0.97) 0%, rgba(6,6,11,0.88) 30%, rgba(6,6,11,0.45) 62%, rgba(6,6,11,0.12) 100%),
    radial-gradient(ellipse 720px 420px at 10% -12%, rgba(176,38,255,0.34), transparent 62%),
    radial-gradient(ellipse 620px 380px at 92% 108%, rgba(0,200,255,0.20), transparent 60%);
}
@media (max-width:760px){
  .hero .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,11,0.94) 0%, rgba(6,6,11,0.82) 55%, var(--bg) 100%),
      radial-gradient(ellipse 500px 340px at 18% 0%, rgba(176,38,255,0.34), transparent 62%);
  }
}
.eyebrow .chan{
  border-color: rgba(0,200,255,.40);
  color: var(--neon-ciano);
  box-shadow: 0 0 12px rgba(0,200,255,.20);
}
.tally .dot{
  background: var(--neon-verde);
  box-shadow: 0 0 10px rgba(165,230,34,.9);
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 10px rgba(165,230,34,.9); }
  50%{ box-shadow:0 0 20px rgba(165,230,34,.35); }
}

/* ===== Estúdios, carrossel e mídia ===== */
.studio{ border-color: rgba(255,255,255,.09); }
.studio:hover{ box-shadow: 0 0 34px rgba(176,38,255,.12); }
.studio-body .tag{
  color: var(--neon-magenta);
  text-shadow: 0 0 10px rgba(255,45,155,.5);
}
.studio-specs li{ border-color: rgba(0,200,255,.22); }
.carousel figcaption b{ color: var(--neon-ciano); text-shadow:0 0 8px rgba(0,200,255,.5); }
.car-btn:hover{
  border-color: var(--neon-ciano); color: var(--neon-ciano);
  box-shadow: 0 0 18px rgba(0,200,255,.35);
}
.video-feature{ border-color: rgba(0,200,255,.18); box-shadow: 0 0 30px rgba(0,200,255,.07); }

/* Steps: a barrinha lateral vira tubo de neon */
.step{ border-left-color: var(--neon-magenta); box-shadow: -3px 0 16px -6px rgba(255,45,155,.6); }
.step .num{ color: var(--neon-ciano); text-shadow: 0 0 8px rgba(0,200,255,.5); }

/* Listas de "o que está incluso" */
ul.check li::before{
  background: var(--neon-ciano);
  box-shadow: 0 0 10px rgba(0,200,255,.8), 0 0 0 3px rgba(0,200,255,.12);
}

/* Depoimentos e FAQ */
.stars{ color: var(--neon-amarelo); text-shadow: 0 0 10px rgba(255,230,0,.5); }
details summary::after{ color: var(--neon-ciano); text-shadow:0 0 8px rgba(0,200,255,.5); }
.quote{ border-color: rgba(255,255,255,.08); }

/* Formulário */
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--neon-ciano);
  box-shadow: 0 0 0 3px rgba(0,200,255,.12), 0 0 16px rgba(0,200,255,.15);
}
.form-submit button{
  background: linear-gradient(135deg, #b026ff, #ff2d9b);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(176,38,255,.42);
}

/* CTA final: o letreiro da fachada */
.final-cta{
  background:
    radial-gradient(ellipse 640px 320px at 50% 0%, rgba(176,38,255,0.26), transparent 66%),
    radial-gradient(ellipse 460px 240px at 50% 100%, rgba(0,200,255,0.14), transparent 66%);
}
.final-cta h2{
  text-shadow: 0 0 22px rgba(176,38,255,.45), 0 0 56px rgba(255,45,155,.22);
}

/* Nav e rodapé */
header{ background: rgba(6,6,11,.9); border-bottom-color: rgba(0,200,255,.14); }
.nav-links a:hover{ color: var(--neon-ciano); text-shadow: 0 0 10px rgba(0,200,255,.5); }
.nav-links a.active::after{ background: var(--neon-ciano); box-shadow: 0 0 10px rgba(0,200,255,.8); }
footer a:hover{ color: var(--neon-ciano); }
.mobile-bar{ background: rgba(6,6,11,.97); border-top-color: rgba(0,200,255,.28); }

/* Acessibilidade: quem pediu menos movimento não leva pulsação nenhuma */
@media (prefers-reduced-motion: reduce){
  .tally .dot{ animation: none; }
}

/* =====================================================================
   NEON v2 — "menos branco, mais cor"
   Direção do Will: o site tem que ter o ar do lounge do Studio A —
   cinematográfico, geek, cheio de luz colorida.

   O que muda em relação à v1: a cor sai dos títulos e entra no texto de
   apoio. Subtítulo, legenda, label, número e link passam a ter cor
   própria. O corpo de parágrafo continua legível (cinza-claro), mas as
   palavras que carregam sentido ganham destaque colorido.
   ===================================================================== */

/* Subtítulos de seção: eram cinza, agora acendem em ciano */
.section-sub{
  color: #7fe3ff;
  text-shadow: 0 0 14px rgba(0,200,255,.20);
}

/* Texto de apoio geral: puxa para um lilás-claro em vez de cinza puro */
:root{ --ink-muted: #b9b6e8; }

/* Lead do hero: mais quente e menos apagado */
.hero p.lead{ color: #cfd3ff; }

/* Legendas monoespaçadas (as "etiquetas" do site) ciclam as cores */
.video-caption{ color: var(--neon-verde); text-shadow: 0 0 10px rgba(165,230,34,.35); }
.car-hint{ color: var(--neon-magenta); text-shadow: 0 0 10px rgba(255,45,155,.30); }
.foot-title{ color: var(--neon-ciano); text-shadow: 0 0 10px rgba(0,200,255,.30); }
.proof-item .l{ color: #9aa0c4; }

/* Títulos dos cards ganham a cor do próprio card */
.card h3{ color: var(--c, var(--neon-ciano)); text-shadow: 0 0 12px rgba(var(--cr, 0,200,255), .30); }
.card p{ color: #b9b6e8; }

/* Cards de serviço: título colorido e seta acesa */
a.card-link:nth-child(5n+1){ --c: var(--neon-ciano);    --cr: 0,200,255; }
a.card-link:nth-child(5n+2){ --c: var(--neon-magenta);  --cr: 255,45,155; }
a.card-link:nth-child(5n+3){ --c: var(--neon-verde);    --cr: 165,230,34; }
a.card-link:nth-child(5n+4){ --c: var(--neon-amarelo);  --cr: 255,230,0; }
a.card-link:nth-child(5n+5){ --c: var(--neon-vermelho); --cr: 255,46,46; }
a.card-link h3{ color: var(--c); text-shadow: 0 0 12px rgba(var(--cr), .35); }
a.card-link:hover{
  border-color: rgba(var(--cr), .6);
  box-shadow: 0 0 26px rgba(var(--cr), .18);
}
a.card-link .arw{ color: var(--c); }

/* Steps: cada etapa com sua cor */
.steps .step:nth-child(1){ border-left-color: var(--neon-ciano);   box-shadow:-3px 0 16px -6px rgba(0,200,255,.7); }
.steps .step:nth-child(2){ border-left-color: var(--neon-magenta); box-shadow:-3px 0 16px -6px rgba(255,45,155,.7); }
.steps .step:nth-child(3){ border-left-color: var(--neon-verde);   box-shadow:-3px 0 16px -6px rgba(165,230,34,.7); }
.steps .step:nth-child(1) h3{ color: var(--neon-ciano); }
.steps .step:nth-child(2) h3{ color: var(--neon-magenta); }
.steps .step:nth-child(3) h3{ color: var(--neon-verde); }

/* Specs dos estúdios: pastilhas acesas */
.studio-specs li{
  color: var(--neon-ciano);
  border-color: rgba(0,200,255,.35);
  box-shadow: inset 0 0 10px rgba(0,200,255,.06);
}

/* FAQ: pergunta em ciano */
details summary{ color: #8fe9ff; }
details[open] summary{ color: var(--neon-amarelo); text-shadow: 0 0 12px rgba(255,230,0,.35); }
details p{ color: #b9b6e8; }

/* Depoimento: aspas em lilás claro, autor em magenta */
.quote p{ color: #d6d3ff; }
.quote .who{ color: var(--neon-magenta); }

/* Labels do formulário */
.field label{ color: var(--neon-ciano); }

/* Prosa das páginas internas */
.prosa{ color: #b9b6e8; }
.prosa a{ color: var(--neon-amarelo); text-shadow: 0 0 10px rgba(255,230,0,.30); }
.prosa strong{ color: var(--neon-verde); }
ul.check li{ color: #c6c3f0; }
.format-num{ color: var(--neon-magenta); text-shadow: 0 0 10px rgba(255,45,155,.45); }
.format-body h3{ color: var(--neon-ciano); }
.format-tags span{ color: var(--neon-verde); border-color: rgba(165,230,34,.28); }

/* Rodapé com mais vida */
footer p, footer a{ color: #a5a2d0; }
.copyright{ color: #6b7089; }

/* ===== Faixa "a casa" — o lado geek/cinematográfico ===== */
.casa{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:6px; }
@media (max-width:900px){ .casa{ grid-template-columns:1fr; } }
.casa figure{
  margin:0; position:relative; overflow:hidden; line-height:0;
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
}
.casa img{ width:100%; height:230px; object-fit:cover; opacity:.92; transition:opacity .25s ease, transform .5s ease; }
.casa figure:hover img{ opacity:1; transform:scale(1.05); }
.casa figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.45;
  background:linear-gradient(180deg, transparent, rgba(6,6,11,.94));
}
.casa figure:nth-child(1) figcaption{ color: var(--neon-ciano); }
.casa figure:nth-child(2) figcaption{ color: var(--neon-magenta); }
.casa figure:nth-child(3) figcaption{ color: var(--neon-verde); }
.casa figure::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}

/* ===== Barra fixa do mobile =====
   O "Reservar" era vazado e sumia ao lado do verde do WhatsApp.
   Vira lilás açaí — escuro o bastante para não competir com o verde,
   saturado o bastante para ler como botão. */
.mobile-bar .mb-form{
  background: linear-gradient(135deg, #6a2d9c 0%, #431a63 100%);
  border-color: rgba(176,38,255,.55);
  color: #f2e9ff;
  box-shadow: 0 0 18px rgba(106,45,156,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.mobile-bar .mb-form:active{
  background: linear-gradient(135deg, #7a37b0 0%, #4f2073 100%);
}

/* No celular o scrim estava a 0.94 de opacidade sobre preto puro: engolia a
   foto do estúdio e deixava o topo vazio. Alivia para a imagem aparecer,
   mantendo o texto legível por cima. */
@media (max-width:760px){
  .hero .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,11,0.80) 0%, rgba(6,6,11,0.62) 48%, rgba(6,6,11,0.92) 88%, var(--bg) 100%),
      radial-gradient(ellipse 520px 340px at 18% 0%, rgba(176,38,255,0.30), transparent 62%);
  }
  .hero-img .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,11,0.82) 0%, rgba(6,6,11,0.66) 48%, rgba(6,6,11,0.93) 88%, var(--bg) 100%),
      radial-gradient(ellipse 520px 340px at 18% 0%, rgba(176,38,255,0.30), transparent 62%);
  }
  /* o texto ganha um respaldo próprio, já que o fundo clareou */
  .hero h1, .hero p.lead{ text-shadow: 0 2px 14px rgba(0,0,0,.85); }
  .hero h1 em{ text-shadow: 0 0 16px rgba(255,230,0,.55), 0 2px 14px rgba(0,0,0,.8); }
}

/* WhatsApp em verde+branco, com a mesma estrutura do "Reservar":
   gradiente, borda e brilho. O verde puro do WhatsApp (#25D366) com texto
   branco dá contraste 1.98 — ilegível. O gradiente escurece até um verde
   que sustenta o branco, mantendo o topo com a cor reconhecível da marca. */
.mobile-bar .mb-wa{
  background: linear-gradient(135deg, #18a94c 0%, #096832 100%);
  border: 1px solid rgba(37,211,102,.60);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  box-shadow: 0 0 18px rgba(29,185,84,.40), inset 0 1px 0 rgba(255,255,255,.14);
}
.mobile-bar .mb-wa:active{
  background: linear-gradient(135deg, #1cc257 0%, #0b7a3d 100%);
}

/* O botão flutuante do desktop segue a mesma linha */
.float-wa{
  background: linear-gradient(135deg, #18a94c 0%, #096832 100%);
  border: 1px solid rgba(37,211,102,.60);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(29,185,84,.45), 0 6px 20px rgba(0,0,0,.4);
}

/* ===== Cases / projetos gravados =====
   Vídeos do canal da WEN embutidos do YouTube (não hospedados aqui: não pesam
   no site, contam view no canal e ficam sempre atualizados). Carregam só ao
   clique — o iframe do YouTube puxa ~1MB e travaria a página se viesse pronto. */
.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:820px){ .cases{ grid-template-columns:1fr; } }

.case{
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-elev);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.case:nth-child(5n+1){ --cr:0,200,255; }
.case:nth-child(5n+2){ --cr:255,45,155; }
.case:nth-child(5n+3){ --cr:165,230,34; }
.case:nth-child(5n+4){ --cr:255,230,0; }
.case:nth-child(5n+5){ --cr:255,46,46; }
.case:hover{
  border-color:rgba(var(--cr),.55);
  box-shadow:0 0 26px rgba(var(--cr),.16);
  transform:translateY(-2px);
}

.case-video{
  position:relative; aspect-ratio:16/9; background:#000;
  cursor:pointer; border:0; padding:0; width:100%; display:block;
}
.case-video img{ width:100%; height:100%; object-fit:cover; opacity:.88; transition:opacity .2s ease; }
.case-video:hover img{ opacity:1; }
.case-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.case-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.case-play span{
  width:66px; height:66px; border-radius:50%;
  background:rgba(6,6,11,.72); border:2px solid rgba(var(--cr),.85);
  box-shadow:0 0 26px rgba(var(--cr),.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; padding-left:5px;
  transition:transform .2s ease, background .2s ease;
}
.case-video:hover .case-play span{ transform:scale(1.08); background:rgba(6,6,11,.55); }

.case-body{ padding:18px 20px 20px; }
.case-body h3{ font-size:16.5px; line-height:1.35; margin-bottom:7px; color:rgb(var(--cr)); }
.case-body p{ margin:0; font-size:14.5px; color:#b9b6e8; }
.case-tag{
  display:inline-block; margin-bottom:10px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgb(var(--cr));
  border:1px solid rgba(var(--cr),.4); border-radius:var(--radius); padding:3px 8px;
}