/* ==========================================================================
   LYMOS · camada visual "neo" (todas as páginas, carregada depois de site.css e pages.css)
   Neo-brutalismo (bordas grossas, sombra sólida deslocada, selos tortos, grifo verde)
   + glassmorphism (painéis translúcidos com desfoque sobre manchas de cor que se movem)
   + movimento (neo.js). Com "menos movimento" no sistema, tudo fica parado.
   ========================================================================== */
:root{
  --nb-line:rgba(233,240,235,.88);          /* borda clara grossa */
  --nb-w:2px;
  --nb-shadow:6px 6px 0 #000;
  --nb-shadow-go:6px 6px 0 var(--signal);
  --glass:rgba(20,28,23,.55);
  --glass-2:rgba(255,255,255,.06);
  --blur:saturate(150%) blur(16px);
  --sticker:#F7DC6F;
  --violet:#8B6CFF;
  --cyan:#2BD9FE;
  --pink:#FF6BB5;
}

/* ---------- fundo: manchas de cor que se movem devagar (o vidro reflete isso) ---------- */
body{background:var(--void)}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.42}
body::before{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle at 40% 40%,var(--signal),transparent 62%);animation:neo-deriva 26s ease-in-out infinite alternate}
body::after{width:46vw;height:46vw;right:-10vw;top:30vh;background:radial-gradient(circle at 50% 50%,var(--violet),transparent 64%);animation:neo-deriva 32s ease-in-out -8s infinite alternate-reverse}
main{position:relative}
main::before{content:"";position:fixed;z-index:-1;pointer-events:none;width:38vw;height:38vw;left:30vw;bottom:-18vw;border-radius:50%;filter:blur(100px);opacity:.28;background:radial-gradient(circle,var(--cyan),transparent 62%);animation:neo-deriva 38s ease-in-out -14s infinite alternate}
@keyframes neo-deriva{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vh,0) scale(1.12)}100%{transform:translate3d(-4vw,8vh,0) scale(.94)}}
/* grade sutil por cima das manchas */
body{background-image:linear-gradient(rgba(233,240,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,235,.035) 1px,transparent 1px);background-size:56px 56px}

/* ---------- topo de vidro com régua grossa ---------- */
.top{background:rgba(5,7,6,.55);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:var(--nb-w) solid rgba(233,240,235,.14)}
.top.is-scrolled{border-bottom-color:var(--nb-line)}
.nav a{position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--signal)}

/* ---------- botões de "apertar" ---------- */
.btn{border:var(--nb-w) solid #000;border-radius:12px;box-shadow:4px 4px 0 #000;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.btn-go{background:var(--signal);color:var(--on-signal)}
.btn-line{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-color:var(--nb-line);color:var(--text);box-shadow:4px 4px 0 var(--signal)}
.btn-line:hover{box-shadow:6px 6px 0 var(--signal);border-color:var(--text)}
.btn-line:active{box-shadow:0 0 0 var(--signal)}
.btn-sm{box-shadow:3px 3px 0 #000}

/* ---------- selo (eyebrow) como adesivo torto ---------- */
.eyebrow{display:inline-flex;padding:7px 12px;background:var(--sticker);color:#141410;border:var(--nb-w) solid #000;border-radius:8px;box-shadow:3px 3px 0 #000;rotate:-2deg;font-weight:600;letter-spacing:.1em}
.eyebrow .sq{background:#141410}
.band .eyebrow,.section:nth-of-type(3n) .eyebrow{background:var(--signal)}
.section:nth-of-type(3n+1) .eyebrow{background:var(--cyan)}

/* ---------- títulos: maiores, com grifo ---------- */
h1,.h1-crm{letter-spacing:-.035em}
/* o grifo é um bloco atrás do trecho: inline-block faz o trecho descer inteiro em vez de quebrar no meio e o bloco cobrir a linha de baixo */
h1 em,h2 em,.page-hero h1 em{font-style:normal;display:inline-block;position:relative;z-index:0;color:var(--on-signal);padding:0 .12em;margin:0 -.04em}
h1 em::before,h2 em::before{content:"";position:absolute;z-index:-1;inset:.08em -.02em .02em;background:var(--signal);border:var(--nb-w) solid #000;border-radius:6px;rotate:-1.2deg;box-shadow:4px 4px 0 #000}
h2{letter-spacing:-.03em}

/* ---------- seções: faixas de vidro com régua grossa ---------- */
.band{background:rgba(10,14,11,.42);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-block:var(--nb-w) solid rgba(233,240,235,.16)}

/* ---------- cartões: vidro + borda grossa + sombra sólida ---------- */
.mod,.plan,.card,.svc,.c2-tela,.crm,.form,.faq details,.steps li,.c2-plano,.c2-passos li,.c2-indice a,.built a,.proj,.shot,.sig,.facts-row>div,.doc,.channels li{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:var(--nb-w) solid var(--nb-line);border-radius:16px;box-shadow:var(--nb-shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s
}
.mod:hover,.plan:hover,.card:hover,.svc:hover,.c2-plano:hover,.c2-indice a:hover,.built a:hover,.proj:hover,.shot:hover,.steps li:hover,.c2-passos li:hover,.channels li:hover{
  transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--signal);border-color:var(--text)
}
/* grades que eram "tabela de linhas" viram cartões soltos */
.mods{border:0;gap:16px}
.mod{border-right:var(--nb-w) solid var(--nb-line);border-bottom:var(--nb-w) solid var(--nb-line);padding:26px 24px}
.svc{border-left:var(--nb-w) solid var(--nb-line)}
.svc:first-child{border-left:var(--nb-w) solid var(--nb-line)}
.services,.built{gap:16px;border:0}
/* no celular o site.css deixa os produtos sem recuo lateral (eram linhas); como cartões, precisam de respiro */
.built a,.built a:nth-of-type(even){padding:20px 22px;border:var(--nb-w) solid var(--nb-line)}
.built a:hover{border-color:var(--text)}
.steps{gap:16px}
.steps li{padding:24px}
.steps li::after{display:none}
.sig{padding:22px 24px;margin-bottom:14px}
.mod-tag{background:var(--sticker);color:#141410;border:1.5px solid #000;rotate:-2deg;box-shadow:2px 2px 0 #000}
.plan-top,.c2-plano.top{border-color:var(--signal);box-shadow:8px 8px 0 var(--signal)}
.plan-flag,.c2-plano .flag{background:var(--sticker);color:#141410;border:var(--nb-w) solid #000;box-shadow:3px 3px 0 #000;rotate:-3deg}
.faq details{margin-bottom:12px;padding:4px 20px}
.faq summary{padding:16px 0}
.cta-end-box{background:var(--signal);color:var(--on-signal);border:3px solid #000;border-radius:24px;box-shadow:12px 12px 0 #000;padding:clamp(36px,5vw,64px)}
.cta-end-box .muted{color:#0d3a22}
.cta-end-box .btn-line{background:#fff;color:#000;border-color:#000;box-shadow:4px 4px 0 #000}
.cta-end-box .btn-go{background:#000;color:var(--signal);border-color:#000;box-shadow:4px 4px 0 #fff}

/* faixa rolante mais grossa */
.mq{border-block:3px solid #000;box-shadow:0 6px 0 #000}
.mq-track{font-size:14px;padding:14px 0;font-weight:700}

/* formulário e campos */
.field input,.field textarea{border:var(--nb-w) solid rgba(233,240,235,.3);background:rgba(5,7,6,.6)}
.field input:focus,.field textarea:focus{border-color:var(--signal);box-shadow:4px 4px 0 var(--signal)}

/* rodapé com régua grossa */
.foot{background:rgba(5,7,6,.7);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:3px solid var(--nb-line)}

/* inclinação 3D nos cartões (neo.js põe --rx/--ry) */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0),var(--ty,0));transition:transform .2s var(--ease),box-shadow .25s var(--ease)}

/* adesivos flutuando */
.neo-float{animation:neo-flutua 5s ease-in-out infinite alternate}
@keyframes neo-flutua{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-10px) rotate(2deg)}}

/* revelar ao rolar com mais impacto (estende o .rv do site.css) */
.rv{transform:translate3d(0,40px,0) scale(.97)}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,main::before,.neo-float{animation:none}
  [data-tilt]{transform:none}
}
@media (max-width:700px){
  :root{--nb-shadow:4px 4px 0 #000}
  body::before{width:110vw;height:110vw}
  body::after{width:90vw;height:90vw}
  .cta-end-box{box-shadow:6px 6px 0 #000}
}

/* ---------- peças de movimento (neo.js) ---------- */
.neo-oculto{display:none!important}
.neo-entra{animation:neo-entra .45s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes neo-entra{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.neo-digitando{align-self:flex-end;display:inline-flex;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(0,232,107,.14);border:1.5px solid rgba(0,232,107,.4)}
.neo-digitando i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:neo-pulo .9s infinite}
.neo-digitando i:nth-child(2){animation-delay:.15s}
.neo-digitando i:nth-child(3){animation-delay:.3s}
@keyframes neo-pulo{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.neo-ganhou{border-color:var(--signal)!important;box-shadow:3px 3px 0 var(--signal)!important}
[data-grow]>*{transition:width 1.1s var(--ease)}
.neo-encolhido s::after{width:0!important}
[data-rotate]{display:inline-block;transition:opacity .28s,transform .28s}
.neo-sai{opacity:0;transform:translateY(-12px) rotate(-4deg)}

/* "Como trabalhamos" (empresa): cartões soltos, com recuo igual em todos */
.facts-row{gap:16px;border:0}
.facts-row>div,.facts-row>div:first-child{padding:26px 24px;border:var(--nb-w) solid var(--nb-line)}
@media (max-width:900px){.facts-row>div,.facts-row>div:first-child{padding:22px 20px;border:var(--nb-w) solid var(--nb-line)}}

/* Projetos: cada projeto é um cartão grande com recuo; o print fica inclinado como uma foto colada */
.proj{padding:clamp(24px,3.4vw,48px);gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:clamp(28px,4vw,48px);border-top:var(--nb-w) solid var(--nb-line)}
.proj:hover{transform:none;box-shadow:var(--nb-shadow);border-color:var(--nb-line)}
.proj .shot{rotate:-1.2deg;box-shadow:7px 7px 0 var(--signal);transition:rotate .3s var(--ease),transform .3s var(--ease),box-shadow .3s}
.proj-flip .shot{rotate:1.2deg}
.proj .shot:hover{rotate:0deg;transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--signal)}
.proj-list{border-top-color:rgba(233,240,235,.16)}
.proj-list li{border-color:rgba(233,240,235,.16)!important}
@media (max-width:900px){.proj{padding:20px;gap:24px}.proj .shot,.proj-flip .shot{rotate:0deg}}
@media (min-width:901px){
  /* o print acompanha a leitura do texto ao lado (sem vão vazio ao lado de texto comprido) */
  .proj{align-items:start}
  .proj .shot{position:sticky;top:110px}
}

/* ---------- canais de contato: grade 2x2 de botões compactos (no celular, só ícone + nome) ---------- */
.channels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0}
.channels li{border-radius:12px;box-shadow:4px 4px 0 #000}
.channels li:hover{box-shadow:6px 6px 0 var(--signal)}
.channels a{height:100%;gap:12px;padding:13px 14px;border-bottom:0}
.channels svg{width:20px;height:20px;color:var(--signal)}
.channels span{min-width:0;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.channels b{font-size:14.5px}
.channels li:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:700px){.channels span{font-size:0;line-height:1}.channels span b{font-size:15px}}

/* ---------- formulário de briefing compacto (10/10): assuntos viram etiquetas, menos respiro ---------- */
.form-body .fs{padding:18px 0 20px}
.form-body .fs legend{margin-bottom:12px;font-size:15px}
.form-body .fs-n{width:26px;height:26px;font-size:11px}
.form-body .fs-grid{gap:12px}
.form-body .field{gap:6px}
.form-body .field input,.form-body .field textarea{padding:10px 13px;font-size:15px}
.form-body .field textarea{height:104px;min-height:88px;padding-bottom:26px}
.form-body .opts{display:flex;flex-wrap:wrap;gap:8px}
.form-body .opt-box{display:inline-flex;align-items:center;gap:7px;height:auto;padding:7px 12px;border:var(--nb-w) solid rgba(233,240,235,.22);border-radius:9px;background:rgba(5,7,6,.6);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s,border-color .2s}
.form-body .opt-ic{width:16px;height:16px;padding:0;border:0;background:none;color:var(--muted)}
.form-body .opt-t b{font-size:13.5px;font-weight:600;white-space:nowrap}
.form-body .opt-t small,.form-body .opt-ok{display:none}
.form-body .opt input:checked+.opt-box{border-color:#000;background:var(--signal);box-shadow:3px 3px 0 #000;translate:-1px -1px}
.form-body .opt input:checked+.opt-box .opt-ic{background:none;color:var(--on-signal)}
.form-body .opt input:checked+.opt-box .opt-t b{color:var(--on-signal)}
.form-foot{padding:16px clamp(20px,2.6vw,32px) 18px}
@media (max-width:700px){.form-body .opt-box{padding:7px 10px}.form-body .opt-t b{font-size:13px}}

/* Páginas de texto (privacidade): o cartão precisa de recuo interno */
.doc{max-width:80ch;padding:clamp(22px,4vw,48px)}
.doc>h2:first-child{margin-top:0}

/* ===== Rodapé v37: faixa verde, cartão da marca, links grandes, produtos em cartão e LYMOS gigante ===== */
.foot{position:relative;overflow:hidden;padding:0 0 32px;border-top:0;background:rgba(5,7,6,.78)}
.foot-faixa{overflow:hidden;background:var(--signal);color:var(--on-signal);border-block:3px solid #000;box-shadow:0 6px 0 #000}
.foot-faixa-trilho{display:flex;align-items:center;gap:20px;width:max-content;padding:13px 0;font:700 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;animation:foot-corre 34s linear infinite}
.foot-faixa-trilho i{width:9px;height:9px;background:#000;rotate:45deg}
@keyframes foot-corre{to{transform:translateX(-50%)}}
.foot-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);padding-top:clamp(48px,6vw,80px);align-items:start}
.foot-brand{padding:26px;border:2px solid var(--nb-line);border-radius:18px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:7px 7px 0 var(--signal);rotate:-1deg}
.foot-brand .brand span{font-size:20px}
.foot-brand p{margin-top:14px;font:700 clamp(20px,1.9vw,26px)/1.15 var(--display);letter-spacing:-.02em;color:var(--text);max-width:18ch}
.foot .foot-social{margin-top:22px}
.foot-social a{width:46px;height:46px;border:2px solid #000;border-radius:12px;background:var(--text);color:#0A0E0B;box-shadow:3px 3px 0 #000;transition:translate .14s var(--ease),box-shadow .14s var(--ease),background .2s}
.foot-social svg{width:20px;height:20px}
.foot-social a:hover{translate:-2px -2px;box-shadow:5px 5px 0 #000;background:var(--signal);color:var(--on-signal);border-color:#000}
.foot-social a:nth-child(2):hover{background:#FF6BB5}
.foot-social a:nth-child(3):hover{background:#2BD9FE}
.foot-social a:nth-child(4):hover{background:var(--sticker)}
.foot nav b,.foot-produtos>b{justify-self:start;display:inline-block;margin-bottom:10px;padding:6px 10px;border:2px solid #000;border-radius:7px;background:var(--sticker);color:#141410;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:3px 3px 0 #000;rotate:-2deg}
.foot-nav{gap:4px!important}
.foot-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:2px solid rgba(233,240,235,.1);font:700 clamp(20px,1.8vw,24px)/1.1 var(--display);letter-spacing:-.02em;color:var(--text);transition:color .15s,padding .2s var(--ease)}
.foot-nav a::after{content:"\2192";font-family:var(--sans);font-weight:600;color:var(--signal);opacity:0;translate:-8px 0;transition:opacity .2s,translate .2s var(--ease)}
.foot-nav a:hover{color:var(--signal);padding-left:6px}
.foot-nav a:hover::after{opacity:1;translate:0 0}
.foot-produtos{display:grid;gap:12px}
.foot-prod{position:relative;display:grid;gap:2px;padding:16px 18px;border:2px solid var(--nb-line);border-radius:14px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:4px 4px 0 #000;transition:translate .14s var(--ease),box-shadow .14s var(--ease)}
.foot-prod:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--signal)}
.foot-prod span{font:800 20px/1.1 var(--display);letter-spacing:-.02em;color:var(--text)}
.foot-prod small{color:var(--muted);font-size:14px}
.foot-prod em{position:absolute;right:12px;top:-11px;padding:5px 9px;border:2px solid #000;border-radius:7px;background:var(--signal);color:var(--on-signal);font:700 11.5px/1 var(--sans);font-style:normal;box-shadow:2px 2px 0 #000;rotate:3deg}
.foot-prod em.novo{background:#FF6BB5;color:#160612}
.foot-entrar{margin:4px 0 0;font-size:14px;color:var(--faint)}
.foot-entrar a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot-entrar a:hover{color:var(--signal)}
.foot-base{position:relative;z-index:1;margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:2px solid rgba(233,240,235,.12)}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1;justify-self:start;max-width:520px}}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr}.foot-brand{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.foot-faixa-trilho{animation:none}}