/* Tema claro (pedido do Fabricio em 2026-10-03). Carregado por ultimo: troca fundos e textos
   para papel claro e tinta escura, mantendo o roxo e o laranja da marca.
   Os cartoes de console (hero e as duas ilustracoes) e o projeto em destaque continuam escuros
   de proposito: sao o contraste da pagina e o estilo que ele aprovou. */

:root{color-scheme:light;--dark:#faf9f7;--surface:#fff;--paper:#17141c;--ink:#17141c;--muted:#5d5766;--line:#17141c1c;
  --claro-alt:#f2f0ec;--roxo:#6d28d9;--roxo-texto:#5b21b6;--laranja-texto:#c2410c}

/* Dentro dos cartoes escuros voltam os valores do tema escuro. */
.system-console,.bf-visual,.featured-project{--dark:#08080b;--surface:#111116;--paper:#fafafa;--ink:#fafafa;--muted:#aaa7b5;--line:#ffffff19;color:#fafafa}
.system-console em,.bf-visual em,.featured-project em{background-image:linear-gradient(105deg,#b88bff 12%,#f97316 90%)}
.system-console,.bf-visual{box-shadow:0 28px 70px #2a124a38,0 2px 0 #ffffff12 inset}
.bf-visual:hover{box-shadow:0 30px 80px #2a124a4d,0 2px 0 #ffffff12 inset}

body{background:var(--dark);color:var(--ink)}
em{background-image:linear-gradient(105deg,#6d28d9 12%,#ea580c 90%)}
:focus-visible{outline-color:#6d28d9}
.skip{background:#6d28d9;color:#fff}

/* cabecalho */
.navigation{background:#ffffffe6;border-color:var(--line);box-shadow:0 12px 40px #2a124a12}
.header.is-scrolled .navigation{border-color:#6d28d938;box-shadow:0 14px 44px #2a124a22}
.brand small{color:#6b6474}
.navigation nav>a{color:#4a4453}
.navigation nav>a:hover{color:#17141c}
.navigation nav>.nav-contact{background:#17141c;border:1px solid #17141c;color:#fff}
.navigation nav>.nav-contact:hover{background:#2b1b47;border-color:#2b1b47;color:#fff}
.nav-contact span,.navigation nav>.nav-contact span{color:#ffab72}

/* hero */
.hero{background:var(--dark)}
.hero::before{background-image:linear-gradient(#17141c08 1px,transparent 1px),linear-gradient(90deg,#17141c08 1px,transparent 1px)}
.hero-ambient{background:radial-gradient(ellipse at 45% 45%,#6d28d91f,transparent 61%),radial-gradient(ellipse at 65% 65%,#f973161c,transparent 62%)}
.eyebrow,.light-section .eyebrow,.section-heading>.eyebrow,.light-section .section-heading .eyebrow,.process .eyebrow,.about .eyebrow,.faq .eyebrow,.contact .eyebrow,.project-stack .eyebrow{color:var(--roxo-texto)}
.hero-copy>.eyebrow{border-color:#6d28d940;background:#6d28d90d;color:#473a5c}
.intro{color:var(--muted)}
.text-link{color:#3d3647;border-bottom-color:#17141c40}
.text-link:hover{color:var(--roxo)}
.hero-signature{color:var(--muted);border-left-color:var(--roxo)}
.hero-signature span{color:var(--muted)}
.hero-signature>span:first-child{color:#2a2533}
.visual-caption>.eyebrow{color:#4a4453}
.visual-index{color:#6b6474}
.visual-manifesto{color:var(--muted)}
.visual-manifesto strong{color:#17141c}
.capabilities{border-color:var(--line)}
.capabilities>span{color:var(--roxo-texto)}
.capabilities p{color:#2f2a38}
.capabilities i{color:#a78bda}

/* secoes */
.light-section{background:var(--claro-alt);color:var(--ink)}
.section-heading>p,.light-section .section-heading>p,.service-list p{color:var(--muted)}
.solutions{background:radial-gradient(ellipse at 0% 40%,#6d28d910,transparent 45%),var(--claro-alt)}
.service-list article{border-color:var(--line)}
.service-list article:hover{background:#6d28d90a}
.service-number,.service-tags{color:var(--roxo-texto)}
.service-list article>a{color:var(--roxo)}
.service-list article>a:hover{color:var(--laranja-texto)}

.projects{background:radial-gradient(ellipse at 80% 40%,#f9731612,transparent 55%),var(--dark)}
.featured-project{box-shadow:0 26px 60px #2a124a33}
.project-stack article{background:#fff;border-color:var(--line);box-shadow:0 10px 30px #2a124a0d}
.project-stack article:hover{border-color:#6d28d966;box-shadow:0 18px 40px #2a124a1f}
.project-stack p{color:var(--muted)}
.project-stack .project-name,.project-name{color:var(--roxo-texto);border-color:var(--line)}

.about{background:var(--claro-alt)}
.about-intro{color:#2a2533}
.about-intro+p{color:var(--muted)}
.founder{border-color:var(--line)}
.founder span{color:var(--muted)}
.dark{border-color:#17141c40}
.dark:hover{color:var(--roxo)}

.process-steps article{border-top-color:var(--line)}
.process-steps article>span{background:var(--dark);color:var(--roxo-texto)}
.process-steps p{color:var(--muted)}

.faq-list details{border-color:var(--line)}
.faq-list summary{color:var(--ink)}
.faq-list summary::after{color:var(--roxo)}
.faq-list details[open] summary{color:var(--roxo-texto)}
.faq-list details p,.faq-grid>div>p:last-child,.faq h2+p{color:var(--muted)}

/* clientes: carrossel que desliza sozinho, em volta continua */
.clients{background:var(--dark);padding:0 0 110px}
.clients-carousel{position:relative;overflow:hidden;padding:6px 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* Quatro fileiras iguais lado a lado; andar meia largura da trilha volta ao ponto de partida sem emenda. */
.clients-track{display:flex;gap:16px;width:max-content;padding-right:16px;animation:clientes-desliza 61s linear infinite}
.clients-carousel:hover .clients-track,.clients-carousel:focus-within .clients-track{animation-play-state:paused}
@keyframes clientes-desliza{to{transform:translateX(-50%)}}
.client-card{flex:none;width:198px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 16px 17px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 22px #2a124a0d;transition:border-color .35s,box-shadow .35s}
.client-card:hover{border-color:#6d28d966;box-shadow:0 14px 30px #2a124a1f}
.client-logo{display:grid;place-items:center;width:100%;height:62px;margin-bottom:9px}
.client-logo img{max-width:84%;max-height:46px;width:auto;height:auto;object-fit:contain}
.client-logo--foto img{max-height:62px;border-radius:11px}
.client-card strong{font:600 13.5px var(--display);color:var(--ink);letter-spacing:-.2px;line-height:1.3}
.client-what{font-size:11.5px;color:var(--muted);line-height:1.45}
@media(max-width:800px){.clients{padding-bottom:76px}.client-card{width:172px;padding:15px 12px 14px}.client-logo{height:54px}.client-logo img{max-height:40px}.client-logo--foto img{max-height:54px}.clients-track{gap:12px;padding-right:12px;animation-duration:51s}}
/* Sem animacao (preferencia do visitante): a fileira vira uma lista que rola com o dedo e as copias somem. */
@media(prefers-reduced-motion:reduce){
  .clients-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:0 20px}
  .clients-track .client-card[aria-hidden=true]{display:none}
  .clients-carousel{-webkit-mask-image:none;mask-image:none}
}

/* contato e rodape */
.contact{background:radial-gradient(ellipse at 5% 10%,#6d28d91a,transparent 65%),radial-gradient(ellipse at 100% 100%,#f973161a,transparent 60%),#f6f3f9;color:var(--ink);border-top-color:#6d28d926;border-bottom-color:var(--line)}
.contact-grid>div>p:not(.eyebrow),.contact h2+p{color:var(--muted)}
.project-brief label{color:#2a2533}
.project-brief select{background:#fff;color:var(--ink);border-color:#b7a6d1}
.contact .project-brief .brief-note{color:var(--muted)}
.contact-direct{border-color:#6d28d933}
.contact-direct>span{color:var(--roxo-texto)}
.contact-direct a{color:#231e2b;border-color:var(--line)}
.contact-direct a span{color:var(--roxo)}
.contact-direct a:hover{color:var(--laranja-texto)}
.contact .contact-direct p,.contact-direct>p{color:var(--muted)}
.footer-main{border-color:var(--line)}
.footer-bottom{border-color:var(--line);color:#6b6474}
.back-top{color:#4a4453}
.back-top:hover{color:var(--laranja-texto)}

/* menu no celular */
@media(max-width:800px){
  .menu-toggle{border-color:#17141c33;color:#17141c;background:#17141c08}
  .navigation nav{background:#fff;border-color:var(--line);box-shadow:0 20px 40px #2a124a26}
}