/* davidiasdesign.com · versão B · estilo spartan: claro e preto, Inter grande, etiqueta mono */
:root{--fundo:#F4F4F2;--branco:#FFFFFF;--tinta:#0E0E0E;--cinza:#8E8E8E;--linha:rgba(0,0,0,.08);--preto:#000;--verde:#D4F04A;
  --mono:"Geist Mono",ui-monospace,monospace;--fonte:"Inter",system-ui,sans-serif;--r:22px;--pad:clamp(16px,3.2vw,48px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fundo);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--fonte);color:var(--tinta);background:var(--fundo);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.01em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
section[id],footer[id]{scroll-margin-top:80px}
.b-rot{font-family:var(--mono);font-size:12px;color:var(--cinza)}
.c{color:var(--cinza)}

/* menu */
.b-nav{position:fixed;top:14px;left:var(--pad);right:var(--pad);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.b-nav>*{pointer-events:auto}
.b-marca{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:99px;padding:8px 16px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.b-marca svg,.b-marca .assinatura{height:24px;width:auto;fill:currentColor}
.b-nav nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:99px;padding:5px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.b-nav nav a{font-size:14px;padding:7px 14px;border-radius:99px;color:#555;transition:background .25s,color .25s}
.b-btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:6px 16px 6px 6px;border-radius:99px;background:var(--branco);color:var(--tinta);box-shadow:0 4px 20px rgba(0,0,0,.06);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.b-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tinta);color:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.b-ico svg{width:16px;height:16px}
.b-btn.escuro{background:var(--tinta);color:#fff}.b-btn.escuro .b-ico{background:#fff;color:var(--tinta)}
.b-btn.claro{background:#fff;color:var(--tinta)}

/* entrada */
.b-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr auto;gap:24px var(--pad);padding:120px var(--pad) 28px;align-items:center}
.b-hero-txt h1{font-weight:500;font-size:clamp(44px,6.4vw,104px);line-height:.98;letter-spacing:-.045em}
.b-hero-txt h1 span{display:block;animation:sobe .9s cubic-bezier(.2,.8,.2,1) both}
.b-hero-txt h1 span:nth-child(2){animation-delay:.08s}.b-hero-txt h1 span:nth-child(3){animation-delay:.16s}
.b-hero-txt p{max-width:34ch;font-size:clamp(16px,1.3vw,20px);color:#555;margin:22px 0 28px}
@keyframes sobe{from{opacity:0;transform:translateY(24px)}}
.b-hero-foto{position:relative;align-self:end;background:linear-gradient(180deg,#E9E9E6,#DCDCD8);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-height:72svh;justify-self:end;width:100%}
.b-hero-foto img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:96%;width:auto;max-width:none}
.b-hero-foto figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;padding:10px 14px;font-size:14px}
.b-hero-foto figcaption span{font-family:var(--mono);font-size:12px;color:var(--cinza)}
.b-clientes{grid-column:1/-1;display:flex;align-items:center;gap:24px;border-top:1px solid var(--linha);padding-top:20px}
.b-clientes p{flex:none;max-width:22ch;font-size:14px;color:#666}
.b-marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.b-marq-trilho{display:flex;align-items:center;gap:28px;width:max-content;animation:anda 40s linear infinite}
.b-marq-trilho span{font-size:20px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:#2a2a2a}
.b-marq-trilho i{font-style:normal;color:#c4c4c4}
@keyframes anda{to{transform:translateX(-50%)}}

/* seções */
.b-sec{padding:clamp(70px,12vh,140px) var(--pad)}
.b-escuro{background:var(--preto);color:#F2F2F2;border-radius:32px;margin:0 10px}
.b-escuro .b-rot{color:#8a8a8a}
.b-h2{font-weight:500;font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:-.045em;max-width:16ch;margin:14px 0 clamp(30px,5vh,56px)}

/* frase que acende ao rolar (sem JavaScript, onde o navegador suporta) */
.b-frase{font-weight:500;font-size:clamp(32px,4.4vw,68px);line-height:1.02;letter-spacing:-.045em;max-width:20ch}
.b-frase .w{color:inherit}
@supports (animation-timeline:view()){
  .b-frase .w{animation:acende linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  .b-frase .w:nth-child(3n){animation-range:entry 25% cover 50%}
  .b-frase .w:nth-child(3n+1){animation-range:entry 30% cover 55%}
  @keyframes acende{from{color:#C9C9C9}}
  .b-frase.claro .w{animation-name:acende-claro}
  @keyframes acende-claro{from{color:#4a4a4a}}
}
.b-sub{margin:20px 0 clamp(36px,6vh,64px);max-width:44ch;color:#555;font-size:18px}

/* faixa preta com texto correndo */
.b-fita{background:var(--preto);color:#EDEDED;overflow:hidden;padding:12px 0;margin:10px}
.b-fita{border-radius:12px}
.b-fita-trilho{display:flex;gap:24px;width:max-content;animation:anda 50s linear infinite;font-family:var(--mono);font-size:14px;white-space:nowrap}
.b-fita-trilho span:nth-child(odd){color:var(--verde)}

/* trabalhos */
.b-gig{overflow:hidden;margin:0 calc(-1 * var(--pad)) clamp(24px,4vh,48px)}
.b-gig-trilho{display:flex;align-items:center;gap:.25em;width:max-content;animation:anda 36s linear infinite;font-weight:500;font-size:clamp(80px,13vw,220px);letter-spacing:-.06em;line-height:1}
.b-gig-trilho i{font-style:normal;font-size:.5em;color:#cfcfcf}
.b-grade{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.b-card a{display:flex;flex-direction:column;gap:12px;background:var(--branco);border-radius:var(--r);padding:12px;height:100%;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.b-card .b-rot{padding:4px 6px 0}
.b-img{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--cor)}
.b-img>img{position:absolute}
.v-tela{left:7%;right:7%;top:12%;width:86%;height:auto;border-radius:10px 10px 0 0;box-shadow:0 20px 50px -20px rgba(0,0,0,.35)}
.v-capa{inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.v-peca{left:50%;top:50%;transform:translate(-50%,-50%);max-height:84%;max-width:72%;width:auto;height:auto;border-radius:8px;box-shadow:0 16px 36px -14px rgba(0,0,0,.4)}
.b-card-txt{display:flex;flex-direction:column;gap:4px;padding:2px 6px 6px}
.b-card-txt b{font-weight:500;font-size:20px;letter-spacing:-.03em}
.b-card-txt span{font-size:14px;color:#6a6a6a}

/* serviços */
#servicos{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,80px)}
.b-serv-esq{display:flex;flex-direction:column;gap:18px}
.b-serv-esq p{color:#9a9a9a;max-width:34ch}
.b-serv-esq h2{margin-top:auto;font-weight:500;font-size:clamp(34px,4vw,64px);line-height:1;letter-spacing:-.045em;max-width:12ch}
.b-serv-esq .b-btn{align-self:flex-start}
.b-serv-lista{display:grid;gap:10px}
.b-serv{background:#181818;border:1px solid #262626;border-radius:18px;overflow:hidden}
.b-serv summary,.b-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 22px}
.b-serv summary::-webkit-details-marker,.b-faq summary::-webkit-details-marker{display:none}
.b-serv summary b{font-weight:500;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.03em;flex:1}
.b-n{font-family:var(--mono);font-size:12px;color:#8a8a8a}
.b-mais{font-size:22px;line-height:1;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
details[open] .b-mais{transform:rotate(45deg)}
.b-serv p{padding:0 22px 22px 58px;color:#b5b5b5;max-width:52ch}
details[open]>p{animation:abre .45s ease both}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}

/* sobre */
.b-sobre{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:end;margin-top:10px}
.b-sobre figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.b-sobre figure img{width:100%;height:100%;object-fit:cover}
.b-sobre figcaption{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;font-family:var(--mono);font-size:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.b-sobre h2{margin:14px 0 22px}
.b-sobre p{color:#9a9a9a;max-width:46ch}

/* método (segunda seção, junto da frase) */
.b-met{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start;border-top:1px solid var(--linha);padding-top:clamp(30px,5vh,56px)}
.b-met .b-h2{margin-bottom:0;font-size:clamp(30px,3.4vw,56px)}
.b-passos{list-style:none;display:grid;gap:12px}
.b-passos li{display:grid;grid-template-columns:56px 1fr;column-gap:12px;row-gap:6px;background:var(--branco);border-radius:var(--r);padding:24px}
.b-passos .b-n{grid-row:1/3;padding-top:8px}
.b-passos b{font-weight:500;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em;line-height:1.1}
.b-passos p{color:#5c5c5c;max-width:56ch}

/* perguntas */
.b-faq-sec{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px)}
.b-faq-sec>div:first-child .b-btn{margin-top:8px}
.b-faq-lista{display:grid;gap:10px}
.b-faq{background:var(--branco);border-radius:18px}
.b-faq summary{font-weight:500;font-size:clamp(18px,1.4vw,22px);justify-content:space-between;letter-spacing:-.02em}
.b-faq p{padding:0 22px 22px;color:#666;max-width:60ch}

/* contato */
.b-fim{position:relative;margin:10px;border-radius:32px;overflow:hidden;min-height:92svh;display:flex;align-items:flex-end;color:#fff;background:#111}
.b-fim-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.b-fim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.8))}
.b-fim-txt{position:relative;z-index:1;padding:var(--pad);display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%}
.b-fim-txt .b-rot{color:#cfcfcf}
.b-fim h2{font-weight:500;font-size:clamp(40px,6.6vw,110px);line-height:.98;letter-spacing:-.05em;max-width:14ch}
.b-fim-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:14px;color:#cfcfcf;margin-top:18px}

/* trabalho aberto por cima */
.det{display:none}
.det:target{display:block;position:fixed;inset:0;z-index:95;overflow-y:auto;overscroll-behavior:contain;background:rgba(10,10,10,.55)}
html:has(.det:target){overflow:hidden}
.det-fundo{position:fixed;inset:0}
.det-caixa{position:relative;margin:clamp(12px,4vh,40px) auto;width:calc(100% - 24px);max-width:1200px;background:#fff;border-radius:28px;padding:clamp(18px,3vw,40px);animation:sobe .45s cubic-bezier(.2,.8,.2,1)}
.det-fechar{position:sticky;top:0;float:right;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:28px;line-height:1;background:var(--tinta);color:#fff;z-index:2}
.det-h{font-weight:500;font-size:clamp(34px,5vw,72px);letter-spacing:-.045em;line-height:1;margin:4px 0 12px}
.caso-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.caso-meta span{font-family:var(--mono);font-size:12px;border:1px solid var(--linha);border-radius:99px;padding:5px 10px}
.caso-desc{color:#555;max-width:52ch;margin-bottom:22px}
.d-grade{background:var(--cor);border-radius:22px;padding:clamp(10px,1.6vw,20px);columns:3;column-gap:clamp(10px,1.4vw,18px)}
.d-grade img{width:100%;height:auto;border-radius:12px;margin-bottom:clamp(10px,1.4vw,18px);break-inside:avoid}
.d-nav{background:var(--cor);border-radius:22px;padding:clamp(8px,1.4vw,16px)}
.d-nav iframe{display:block;width:100%;height:78vh;border:0;border-radius:14px;background:#fff}
.d-link{margin-top:18px;text-align:center}
.d-link .botao{display:inline-flex;gap:8px;align-items:center;background:var(--tinta);color:#fff;border-radius:99px;padding:12px 20px;font-weight:500}
.d-link .seta{width:14px;height:14px}



/* tablet e celular */
@media (max-width:1000px){
  .b-nav nav{display:none}
  .b-hero{grid-template-columns:1fr;padding-top:100px}
  .b-hero-foto{justify-self:stretch;max-height:none;aspect-ratio:4/4.4}
  .b-grade{grid-template-columns:1fr 1fr}
  #servicos,.b-sobre,.b-faq-sec{grid-template-columns:1fr}
}
@media (max-width:620px){
  .b-grade{grid-template-columns:1fr}
  .b-clientes{flex-direction:column;align-items:flex-start;gap:10px}
  .b-passos li{grid-template-columns:44px 1fr}
  .b-serv p{padding-left:22px}
  .d-grade{columns:2}
  .b-escuro,.b-fim{margin:0 6px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.anima .b-card,.anima .b-bento li,.anima .b-serv,.anima .b-passos li,.anima .b-faq{opacity:1;transform:none}}
.b-marq{min-width:0;width:100%}.b-clientes{min-width:0}.b-hero>*{min-width:0}

/* grade de "+" que acende perto do mouse (ref. grid-background) */
html{background:var(--fundo)}body{background:transparent}
:root{--mais:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 23v10M23 28h10' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --mais-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 23v10M23 28h10' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E")}
.b-fundo,.b-luz{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--mais) center/56px 56px}
.b-fundo{opacity:.1}
.b-fundo::after{content:"";position:absolute;inset:0;background:url(/img/v4/grao.png);opacity:.06}
.b-luz{opacity:.55;-webkit-mask-image:radial-gradient(170px circle at var(--mx,-500px) var(--my,-500px),#000,transparent);mask-image:radial-gradient(170px circle at var(--mx,-500px) var(--my,-500px),#000,transparent)}
.b-escuro,.b-fim{position:relative;isolation:isolate}
.b-escuro::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mais-claro) center/56px 56px;opacity:.12;pointer-events:none}
.b-escuro::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mais-claro) center/56px 56px;opacity:.6;pointer-events:none;
  -webkit-mask-image:radial-gradient(170px circle at var(--lx,-500px) var(--ly,-500px),#000,transparent);mask-image:radial-gradient(170px circle at var(--lx,-500px) var(--ly,-500px),#000,transparent)}
.b-hero,.b-sec:not(.b-escuro){background:transparent}
/* foto da entrada bem maior */
.b-hero{grid-template-columns:1fr 1fr;align-items:end}
.b-hero-txt{align-self:center}
.b-hero-foto{aspect-ratio:auto;height:calc(100svh - 170px);max-height:none;min-height:520px}
.b-hero-foto img{height:100%}
.b-serv summary{gap:12px}.b-serv p{padding-left:22px}
@media (max-width:1000px){.b-hero{grid-template-columns:1fr}.b-hero-foto{height:auto;aspect-ratio:4/5;min-height:0}}
@media (hover:none){.b-luz,.b-escuro::after{display:none}}


/* efeitos de mouse só em quem tem mouse (no celular o hover vira duplo toque) */
@media (hover:hover){
.b-nav nav a:hover{background:var(--fundo);color:var(--tinta)}
.b-btn:hover{transform:translateY(-2px)}
.b-btn:hover .b-ico{transform:scale(1.08);background:var(--verde);color:var(--tinta)}
.b-card a:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.18)}
.b-card a:hover .v-capa{transform:scale(1.04)}
.b-fim-links a:hover{color:#fff}
}

/* pagina-apta: títulos sem viúva, conteúdo com teto em tela grande (o fundo continua de ponta a ponta) */
h1,h2,h3,.b-frase,.b-h2{text-wrap:balance}
p,summary{text-wrap:pretty}
:root{--pad:max(clamp(16px,3.2vw,48px),calc((100vw - 1920px) / 2))}
@media (min-width:1001px){.b-hero-txt h1{font-size:min(4.6vw,88px)}.b-hero-txt h1 span{white-space:nowrap}}

/* 06/10 pente fino: alvo de toque de 44 px no celular */
@media (max-width:860px){.b-fim-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}}

/* 19/10 · ícone do WhatsApp, números em bento na foto, olho do Observador atrás dele, faixa de clientes lisa, método em 2º */
:root{--cinza:#6E6E6E}
.b-ico{width:32px;height:32px}

/* faixa de clientes: fundo liso, a textura e a luz do mouse não passam por ela */
.b-clientes{position:relative;z-index:1;background:var(--fundo);margin:0 calc(-1 * var(--pad));padding:18px var(--pad);border-bottom:1px solid var(--linha)}

/* foto: olho de "+" atrás, nome em cima, números embaixo */
.b-hero-foto{--cel:clamp(22px,3vw,48px);--ot:calc(var(--cel) * .5);isolation:isolate}
.b-hero-foto img{z-index:1}
.b-olho{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mais44) calc(50% - 7 * var(--cel)) var(--ot)/var(--cel) var(--cel)}
:root{--mais44:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.6v8.8M17.6 22h8.8' stroke='%23000' stroke-opacity='.07' stroke-width='1.1'/%3E%3C/svg%3E")}
.b-olho svg{position:absolute;left:calc(50% - 7.5 * var(--cel));top:var(--ot);width:calc(15 * var(--cel));height:calc(9 * var(--cel));overflow:visible}
.o-mais path{fill:none;stroke:var(--tinta);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.b-olho>.o-mais{opacity:.22}
.o-px rect{fill:var(--verde)}
.b-olho-luz{position:absolute;inset:0;opacity:0;transition:opacity .4s;
  -webkit-mask:radial-gradient(circle closest-side,#000 35%,transparent) no-repeat;mask:radial-gradient(circle closest-side,#000 35%,transparent) no-repeat;
  -webkit-mask-size:320px 320px;mask-size:320px 320px;-webkit-mask-position:var(--ox,-400px) var(--oy,-400px);mask-position:var(--ox,-400px) var(--oy,-400px)}
.b-olho-luz .o-mais{opacity:.75}
.b-hero-foto.acesa .b-olho-luz{opacity:1}
/* no celular (sem mouse) o marca-texto passa sozinho, devagar, pelo olho */
@media (hover:none){
  .b-olho-luz{opacity:.6;animation:varre 9s ease-in-out infinite}
  @keyframes varre{0%,100%{-webkit-mask-position:-60px 0;mask-position:-60px 0}50%{-webkit-mask-position:calc(100% + 60px) 0;mask-position:calc(100% + 60px) 0}}
}
@media (prefers-reduced-motion:reduce){.b-olho-luz{animation:none;opacity:0}}

.b-hero-foto figcaption{bottom:auto;top:14px;right:auto;gap:12px;z-index:2;padding:8px 12px}
.b-num{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.b-num li{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-height:clamp(84px,11svh,112px)}
.b-num .n1{grid-column:span 3}.b-num .n2{grid-column:span 2}.b-num .n3{grid-column:span 2}.b-num .n4{grid-column:span 3}
.b-num b{font-weight:500;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.05em;line-height:1}
.b-num .preto{background:rgba(0,0,0,.88);color:#fff}.b-num .preto .b-rot{color:#a8a8a8}
.b-num .verde{background:var(--verde)}.b-num .verde .b-rot{color:#3f4c0c}

@media (max-width:1000px){.b-met{grid-template-columns:1fr}}
@media (max-width:620px){
  .b-num{left:10px;right:10px;bottom:10px;gap:6px}
  .b-num li{padding:10px 12px;min-height:68px;border-radius:12px;gap:4px}
  .b-num b{font-size:26px}
  .b-num .b-rot{font-size:12px}
  .b-hero-foto figcaption{top:10px;left:10px}
  .b-passos li{padding:20px;grid-template-columns:1fr}
  .b-passos .b-n{grid-row:auto;padding-top:0}
}

/* 19/10 (2) · pedido do Davi: mais sutil, títulos muito grandes, corpo bem pequeno, tudo animado (mouse, rolagem, abrir e fechar)
   e mudando para as cores da casa (preto, azul #2F3BFF e verde marca-texto). Só transform e opacity por quadro. */
:root{--azul:#2F3BFF;--mola:cubic-bezier(.2,.8,.2,1);--t-sec:clamp(42px,6.6vw,128px)}
body{font-size:14px}
.b-fundo{opacity:.07}

/* barra de leitura no topo (rola com a página, sem JavaScript) */
.b-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:var(--azul);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.b-prog{animation:prog linear both;animation-timeline:scroll(root)}@keyframes prog{to{transform:scaleX(1)}}}

/* escala: título enorme, texto pequeno */
.b-hero{grid-template-columns:1.15fr .85fr}
@media (min-width:1001px){.b-hero-txt h1{font-size:min(5.7vw,116px)}}
.b-hero-txt p{font-size:14px;max-width:36ch;color:#5a5a5a}
.b-frase{font-size:var(--t-sec);max-width:17ch;line-height:.96;letter-spacing:-.055em}
.b-h2{font-size:clamp(36px,4.8vw,92px);letter-spacing:-.05em}
.b-met .b-h2{font-size:clamp(34px,3.8vw,72px)}
.b-sub{font-size:14px;max-width:40ch}
.b-serv-esq h2{font-size:clamp(40px,5.2vw,100px);max-width:11ch}
.b-serv-esq p,.b-sobre p,.b-passos p,.b-serv p,.b-faq p{font-size:14px;line-height:1.55}
.b-faq summary{font-size:clamp(16px,1.2vw,18px)}
.b-fim h2{font-size:clamp(52px,9vw,184px);line-height:.92}
.b-card-txt b{font-size:clamp(20px,1.6vw,26px);line-height:1.1}
.b-card-txt span{font-size:14px}

/* marca-texto: varre o verde por trás da palavra */
.b-mt{font-style:normal;background:linear-gradient(var(--verde),var(--verde)) no-repeat 0 62%/0% 78%;padding:0 .06em;margin:0 -.06em;border-radius:.08em;animation:marca 1s .7s var(--mola) forwards}
@keyframes marca{to{background-size:100% 78%}}
.b-nav nav a,.b-fim-links a,.b-card-txt b{background:linear-gradient(var(--verde),var(--verde)) no-repeat 0 60%/0% 80%;transition:background-size .45s var(--mola),color .3s,background-color .3s}
.b-nav nav a.ativo{background-color:var(--tinta);color:#fff}

/* capas 100% cheias */
.b-img{aspect-ratio:4/3}
.b-img .v-tela,.b-img .v-capa{inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:0;box-shadow:none;transform:none}
.b-img.k-peca{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--tinta)}
.b-img .v-duo{position:static;width:100%;height:100%;object-fit:cover;object-position:top center}
.b-img>img,.b-img .v-duo{transition:transform .9s var(--mola)}
.b-card a{position:relative;box-shadow:none;border:1px solid transparent;transition:transform .5s var(--mola),border-color .4s,box-shadow .5s}
.b-ver{position:absolute;z-index:2;top:22px;right:22px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:7px 12px;border-radius:99px;background:var(--tinta);color:#fff;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .35s,transform .45s var(--mola),background .3s,color .3s}
.b-ver .seta{width:12px;height:12px}
.b-card .b-rot{transition:color .3s}

/* botões: azul no mouse, círculo verde */
.b-btn{transition:transform .45s var(--mola),background .35s,color .35s,box-shadow .45s}
.b-btn.claro .b-ico{background:var(--tinta);color:#fff}

/* serviços e perguntas: abrem e fecham com movimento (o JS anima a altura) */
.b-serv,.b-faq{transition:background .35s,border-color .35s,transform .45s var(--mola),box-shadow .35s}
.b-serv[open]{border-color:rgba(212,240,74,.45)}
.b-serv summary b{transition:color .35s}
.b-serv[open] summary b{color:var(--verde)}
.b-faq[open]{box-shadow:inset 3px 0 0 var(--azul)}
.b-mais{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid currentColor;font-size:18px;opacity:.8;transition:transform .45s var(--mola),background .3s,color .3s,border-color .3s}
.b-serv[open] .b-mais{background:var(--verde);color:var(--tinta);border-color:var(--verde);opacity:1}
.b-faq[open] .b-mais{background:var(--azul);color:#fff;border-color:var(--azul);opacity:1}
details>p{overflow:hidden}

/* números do bento contam; passo do método acende em azul ao entrar */
.b-num li{transition:transform .5s var(--mola),background .35s}
.b-passos li{border:1px solid transparent;transition:transform .5s var(--mola),border-color .4s,background .4s,opacity .8s var(--mola)}
.b-passos .b-n{transition:color .4s}
.b-passos li.vis .b-n{color:var(--azul)}
.b-marq-trilho span{transition:color .3s}

/* entrada ao rolar (o JS liga a classe .rv só se houver JavaScript e movimento permitido) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--mola) calc(var(--i,0) * 70ms),transform .9s var(--mola) calc(var(--i,0) * 70ms)}
.rv.vis{opacity:1;transform:none}
.b-hero-foto.rv{transform:translateY(28px) scale(.98)}
.b-hero-foto.rv.vis{transform:none}

/* trabalho aberto: entra e sai com movimento */
.det:target{animation:fundo-in .35s ease both}
@keyframes fundo-in{from{background:rgba(10,10,10,0)}}
.det.sai{animation:fundo-out .3s ease both}
.det.sai .det-caixa{animation:caixa-out .3s var(--mola) both}
@keyframes fundo-out{to{background:rgba(10,10,10,0)}}
@keyframes caixa-out{to{opacity:0;transform:translateY(30px) scale(.98)}}
.det-fechar{transition:transform .4s var(--mola),background .3s,color .3s}

@media (hover:hover){
  .b-nav nav a:hover{background-size:100% 80%;background-color:transparent;color:var(--tinta)}
  .b-nav nav a.ativo:hover{background-color:var(--tinta);color:#fff;background-size:0% 80%}
  .b-btn:hover{background:var(--azul);color:#fff;box-shadow:0 14px 30px -12px rgba(47,59,255,.55)}
  .b-btn:hover .b-ico{background:var(--verde);color:var(--tinta)}
  .b-card a:hover{transform:translateY(-6px);border-color:var(--linha);box-shadow:0 30px 60px -34px rgba(0,0,0,.3)}
  .b-card a:hover .b-img>img,.b-card a:hover .v-duo{transform:scale(1.05)}
  .b-card a:hover .b-ver{opacity:1;transform:none}
  .b-card a:hover .b-card-txt b{background-size:100% 80%}
  .b-card a:hover .b-rot{color:var(--azul)}
  .b-num li:hover{transform:translateY(-4px)}
  .b-num li:not(.preto):not(.verde):hover{background:#fff}
  .b-passos li:hover{transform:translateX(6px);border-color:var(--azul)}
  .b-serv:hover{background:#1d1d1d;transform:translateX(4px)}
  .b-faq:hover{transform:translateX(4px)}
  .b-serv summary:hover .b-mais,.b-faq summary:hover .b-mais{transform:rotate(90deg)}
  details[open] summary:hover .b-mais{transform:rotate(135deg)}
  .b-marq:hover .b-marq-trilho{animation-play-state:paused}
  .b-marq-trilho span:hover{color:var(--azul)}
  .b-fim-links a:hover{background-size:100% 80%;color:var(--tinta)}
  .det-fechar:hover{transform:rotate(90deg);background:var(--azul)}
  .b-sobre figure img{transition:transform 1.2s var(--mola)}
  .b-sobre:hover figure img{transform:scale(1.04)}
}

/* celular */
@media (max-width:1000px){.b-hero{grid-template-columns:1fr}}
@media (max-width:620px){
  .b-hero{padding-top:92px;gap:22px}
  .b-hero-txt h1{font-size:10.2vw;line-height:.98}
  .b-hero-txt h1 span{white-space:nowrap}
  .b-hero-txt p{margin:16px 0 22px}
  .b-hero-foto{aspect-ratio:4/5.5}
  .b-frase{font-size:clamp(40px,11.5vw,58px)}
  .b-h2,.b-met .b-h2{font-size:clamp(34px,9.6vw,48px)}
  .b-serv-esq h2{font-size:clamp(38px,10.6vw,52px)}
  .b-fim h2{font-size:clamp(46px,13vw,68px)}
  .b-fim{min-height:78svh}
  .b-gig-trilho{font-size:clamp(72px,24vw,120px)}
  .b-sec{padding:64px var(--pad)}
  .b-grade{gap:14px}
  .b-card a{padding:10px}
  .b-ver{opacity:1;transform:none;top:18px;right:18px}
  .b-serv summary,.b-faq summary{padding:16px 18px}
  .b-serv p,.b-faq p{padding:0 18px 18px}
  .b-clientes p{max-width:none}
  .b-marq-trilho span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.b-mt{background-size:100% 78%}.rv{opacity:1;transform:none}}

/* 27/10 · grão vivo por cima do site inteiro, bem leve. Só transform anima (o navegador não repinta a página),
   sem mix-blend-mode; o ladrilho já traz a transparência (ferramentas\grao_vivo.py). ~10 quadros por segundo, como grão de filme. */
.b-grao{position:fixed;inset:-110px;z-index:200;pointer-events:none;background:url(/img/v4/grao-vivo.webp) 0 0/220px 220px;opacity:.07;will-change:transform;contain:strict;animation:grao-vivo .9s steps(1,end) infinite}
@keyframes grao-vivo{0%{transform:translate3d(0,0,0)}11%{transform:translate3d(-61px,37px,0)}22%{transform:translate3d(43px,-79px,0)}33%{transform:translate3d(-97px,-23px,0)}44%{transform:translate3d(71px,59px,0)}55%{transform:translate3d(-29px,91px,0)}66%{transform:translate3d(103px,-47px,0)}77%{transform:translate3d(-53px,-101px,0)}88%{transform:translate3d(17px,67px,0)}}
@media (prefers-color-scheme:dark){.b-grao{opacity:.09}}
:root[data-theme="dark"] .b-grao{opacity:.09}
@media (prefers-reduced-motion:reduce){.b-grao{animation:none}}

/* ===================================================================================================
   27/10 · MARGEM, CANTOS E CENAS (pedido do Davi: "respeitar uma margem lateral", "canto padronizado",
   "cada seção mais imersiva... parece 3D", "texto quebrado sem necessidade")
   =================================================================================================== */

/* 1) Uma margem lateral só, para tudo: menu, textos, caixas pretas, faixa, rodapé. Em tela 2K a área útil trava em 1800 px. */
:root{--pad:max(clamp(20px,5vw,80px),calc((100vw - 1800px) / 2));--in:clamp(22px,3vw,56px);
  /* 2) Cantos: dois tamanhos e só. --r nos blocos (seções, cartões, fotos); --r-in no que mora dentro deles e nos botões. */
  --r:20px;--r-in:12px}
.b-nav{left:var(--pad);right:var(--pad)}
.b-fita{margin:10px var(--pad);border-radius:var(--r-in)}
.b-btn,.b-marca,.b-nav nav,.b-ver,.caso-meta span,.d-link .botao{border-radius:var(--r-in)}
.b-nav nav a{border-radius:8px}
.b-card a,.b-hero-foto,.b-passos li,.b-sobre figure,.b-serv,.b-faq,.d-grade,.d-nav,.det-caixa{border-radius:var(--r)}
.b-img,.b-num li,.b-hero-foto figcaption,.d-grade img,.d-nav iframe{border-radius:var(--r-in)}
.b-img .v-tela{border-radius:0}
.v-peca{border-radius:6px}

/* 3) Texto que quebrava sem precisar: usa a largura que tem */
.b-hero-txt p{max-width:48ch}
.b-clientes p{max-width:none;white-space:nowrap}
.b-sub{max-width:82ch}
.b-serv-esq p{max-width:48ch}
.b-sobre p{max-width:62ch}
.b-faq p,.b-serv p{max-width:68ch}
@media (max-width:860px){.b-clientes p{white-space:normal}}

/* nada passa da largura da tela (os efeitos 3D começam fora do lugar) */
html,body{overflow-x:clip}

/* 4) Cenas pretas: largura cheia com a mesma margem por dentro. Paradas, parecem uma caixa alinhada à margem;
      ao chegar na tela, abrem até a borda (o "entrar" na seção). O texto fica sempre na margem + o respiro de dentro. */
.b-escuro,.b-fim{margin:12px 0 0;border-radius:0;padding-inline:calc(var(--pad) + var(--in));
  clip-path:inset(0 var(--pad) round var(--r))}
.b-escuro::before,.b-escuro::after{border-radius:0}
.b-fim{min-height:96svh}
.b-fim-txt{padding:var(--in) 0}

/* 5) O caminho do método: uma linha liga os 3 passos e se desenha conforme a rolagem */
.b-passos{position:relative;padding-left:34px}
.b-passos::before{content:"";position:absolute;left:10px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--linha)}
.b-passos::after{content:"";position:absolute;left:10px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--azul);transform-origin:top;transform:scaleY(1)}
.b-passos li{position:relative}
.b-passos li::before{content:"";position:absolute;left:-30px;top:32px;width:12px;height:12px;border-radius:50%;background:var(--fundo);border:2px solid var(--azul);box-sizing:border-box}

/* 6) Profundidade: quem entra vem de longe (3D) */
.b-hero,.b-grade,.b-serv-lista,.b-passos{perspective:1400px}

/* micro: o cartão inclina para o lado do mouse (o JS dá --rx e --ry) */
@media (hover:hover) and (pointer:fine){
  .b-card a{transform-style:preserve-3d}
  .b-card a:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
}

/* As cenas andam com a rolagem (navegador moderno). Sem suporte, fica tudo parado e visível, sem quebrar. */
@supports (animation-timeline:view()){
  /* abertura: ao sair, o texto sobe e a foto recua para dentro da tela */
  .b-hero-txt{animation:hero-sai linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  .b-hero-foto.vis{animation:foto-recua linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  /* medido: foto em 3D + opacidade derrubava a rolagem para 21 qps; só deslocar custa quase nada */
  @keyframes hero-sai{to{transform:translateY(-14vh)}}
  @keyframes foto-recua{to{transform:translateY(-8vh)}}

  /* cena preta abre até a borda ao chegar */
  .b-escuro,.b-fim{animation:cena-abre linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  @keyframes cena-abre{from{clip-path:inset(0 var(--pad) round var(--r))}to{clip-path:inset(0 0 round 0)}}

  /* caminho do método: a linha azul cresce de cima para baixo */
  .b-passos::after{animation:linha linear both;animation-timeline:view();animation-range:entry 40% cover 70%}
  @keyframes linha{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* passos chegam girando de lado; cartões de trabalho vêm do fundo */
  .b-passos li.rv,.b-card.rv,.b-serv.rv{opacity:1;transform:none;transition:none}
  .b-passos li{animation:passo linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes passo{from{opacity:0;transform:translateX(60px) rotateY(-18deg)}to{opacity:1;transform:none}}
  .b-card{animation:fundo3d linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  /* a opacidade chega antes do movimento: o cartão nunca fica transparente por cima do vizinho */
  @keyframes fundo3d{from{opacity:0;transform:translateY(70px) translateZ(-240px) rotateX(18deg)}35%{opacity:1}to{opacity:1;transform:none}}
  .b-serv{animation:passo linear both;animation-timeline:view();animation-range:entry 0% entry 100%}

  /* quem faz: a foto dos olhos se aproxima enquanto passa */
  .b-sobre figure img{animation:aproxima linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes aproxima{from{transform:scale(1.22)}to{transform:scale(1)}}

  /* contato: o fundo desce mais devagar que o texto (camadas), o título sobe */
  .b-fim-foto{animation:camada linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes camada{from{transform:translateY(-12%) scale(1.15)}to{transform:translateY(0) scale(1.02)}}
  .b-fim h2{animation:sobe-titulo linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  @keyframes sobe-titulo{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}

  /* o "Trabalhos" gigante inclina em 3D enquanto atravessa a tela */
  .b-gig{perspective:900px}
  .b-gig-trilho span{display:inline-block;animation:gira linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes gira{from{transform:rotateX(38deg)}50%{transform:none}to{transform:rotateX(-38deg)}}
}
@media (max-width:620px){
  :root{--in:20px}
  .b-fim h2{font-size:clamp(34px,10.5vw,56px);max-width:none}
  @keyframes fundo3d{from{opacity:0;transform:translateY(40px) translateZ(-120px) rotateX(10deg)}30%{opacity:1}to{opacity:1;transform:none}}
  .b-passos{padding-left:28px}
  .b-passos::before,.b-passos::after{left:8px}
  .b-passos li::before{left:-26px}
}
@media (prefers-reduced-motion:reduce){
  .b-escuro,.b-fim{clip-path:inset(0 var(--pad) round var(--r))}
  .b-passos::after{transform:scaleY(1)}
}

/* ===================================================================================================
   27/10 (2) · FLUIDEZ NA FREQUÊNCIA DA TELA. Medido: o olho "varrendo" no celular (mask-position infinito) deixava o
   processador 36-46% ocupado com a página PARADA. Regra daqui para baixo: por quadro, só transform e opacity.
   =================================================================================================== */

/* trabalho aberto sem "#" no endereço (o JS põe .aberto) */
.det.aberto{display:block;position:fixed;inset:0;z-index:95;overflow-y:auto;overscroll-behavior:contain;background:rgba(10,10,10,.55);animation:fundo-in .35s ease both}
html:has(.det.aberto){overflow:hidden}

/* celular: o olho acende e apaga devagar (opacidade, na placa de vídeo) em vez de varrer a máscara */
@media (hover:none){
  .b-olho-luz{-webkit-mask:none;mask:none;opacity:0;will-change:opacity;animation:olho-pulsa 7s ease-in-out infinite}
  @keyframes olho-pulsa{0%,100%{opacity:0}50%{opacity:.45}}
}

/* computador: a luz do mouse é uma bolinha que desliza (transform), com o "+" de dentro parado no lugar.
   Antes era uma máscara que mudava de lugar a cada movimento e redesenhava a tela inteira. */
.b-luz{inset:auto;left:0;top:0;width:340px;height:340px;border-radius:50%;overflow:hidden;background:none;opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
  transform:translate3d(-600px,-600px,0);will-change:transform}
.b-luz i{position:absolute;left:0;top:0;width:100vw;height:100vh;background:var(--mais) center/56px 56px;will-change:transform}
.b-escuro::after{display:none}

/* o que corre sem parar (letreiros, olho) só anda perto da tela; longe, sai de cena de verdade */
.longe .b-marq-trilho,.longe .b-fita-trilho,.longe .b-gig-trilho,.longe .b-olho-luz{animation:none!important}

/* enquanto a página rola, o mouse parado não "passa por cima" dos cartões (cada um acendia e animava sozinho) */
html.rolando body{pointer-events:none}