/* Tribuna: template escuro com dourado para advocacia */ :root{ --bg:#0B0B0C; --bg2:#0F0F10; --line:rgba(201,164,92,.24); --ouro:#C9A45C; --ouro-2:#E9CF92; --ouro-3:#8E6F35; --txt:#EEE8DC; --muted:#A8A196; --dim:#6F6A62; --serif:'Cinzel','Times New Roman',serif; --italic:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --r:18px; --wrap:1180px; --ease:cubic-bezier(.2,.7,.2,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px} body{margin:0;background:var(--bg);color:var(--txt);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0} :focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:6px} .wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto} .skip{position:absolute;left:-999px;top:8px;background:var(--ouro);color:#111;padding:8px 14px;border-radius:8px;z-index:100} .skip:focus{left:12px} .i{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .i--fill{fill:currentColor;stroke:none} /* tipografia */ /* regra 1 (28/09): etiqueta sem travessão/fio de enfeite antes ou depois do texto */ .eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ouro)} .h1{font:600 clamp(38px,4.7vw,66px)/.98 var(--serif);letter-spacing:.012em;margin:20px 0 0} .h2{font:600 clamp(28px,3.3vw,44px)/1.14 var(--serif);letter-spacing:.015em;margin:14px 0 0} .h1 em,.h2 em{font-style:normal;background:linear-gradient(180deg,var(--ouro-2) 10%,var(--ouro) 60%,var(--ouro-3));-webkit-background-clip:text;background-clip:text;color:transparent} .lead{color:var(--muted);font-size:17px;max-width:58ch;margin-top:16px} .center{text-align:center} .center .lead{margin-inline:auto} .acoes{margin-top:30px} /* botões */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid transparent;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;overflow:hidden;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s,color .3s} .btn .i{width:18px;height:18px} .btn--ouro{background:linear-gradient(180deg,var(--ouro-2),var(--ouro) 75%);color:#17120A;box-shadow:0 14px 34px -14px rgba(201,164,92,.6)} .btn--ouro::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease)} .btn--ouro:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(201,164,92,.75)} .btn--ouro:hover::after{transform:translateX(120%)} .btn--linha{border-color:var(--line);color:var(--txt);background:rgba(255,255,255,.02)} .btn--linha:hover{border-color:var(--ouro);color:var(--ouro-2)} /* topo */ .topbar{background:#070708;border-bottom:1px solid rgba(201,164,92,.12);font-size:13px;color:var(--muted)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px} .topbar span,.topbar a{display:inline-flex;align-items:center;gap:8px} .topbar .i{color:var(--ouro)} .topbar__r{display:flex;gap:24px} .topbar a:hover{color:var(--ouro-2)} .hdr{position:sticky;top:0;z-index:50;transition:background-color .4s,box-shadow .4s} .hdr.is-scrolled{background:rgba(9,9,10,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(201,164,92,.16)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px} .logo{display:flex;align-items:center;gap:14px;min-width:0} .logo__mark{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid var(--ouro);font:600 16px/1 var(--serif);color:var(--ouro)} .logo__mark::after{content:"";position:absolute;inset:4px;border:1px solid rgba(201,164,92,.32)} .logo__img{height:46px;width:auto;max-width:190px;flex:none;object-fit:contain;object-position:left center} .logo__txt{display:flex;flex-direction:column;min-width:0} /* regra 3 (28/09): logo que já traz o nome escrito (letreiro) entra sozinha, maior, sem repetir o nome ao lado */ .logo--letreiro .logo__img{height:54px;max-width:250px} .logo--letreiro .logo__txt{display:none} .logo__nome{font:600 15.5px/1.15 var(--serif);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .logo__sub{font:700 10px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--ouro);margin-top:6px} .nav{display:flex;gap:30px;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .nav a{position:relative;padding:8px 0;transition:color .3s} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ouro);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .nav a:hover{color:var(--txt)} .nav a:hover::after{transform:scaleX(1)} .hdr .btn{min-height:46px;padding:0 20px;font-size:12px} /* hero */ .hero{position:relative;isolation:isolate;overflow:hidden;margin-top:-80px;padding:calc(80px + clamp(20px,3vw,40px)) 0 clamp(100px,10vw,140px)} .hero__bg{position:absolute;inset:0;z-index:-3} .hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45) contrast(1.1);transform:scale(1.1);transition:transform 2.6s var(--ease)} .is-loaded .hero__bg img{transform:scale(1)} .hero::before{content:"";position:absolute;inset:0;z-index:-2;background: radial-gradient(42% 60% at 76% 48%,rgba(201,164,92,.2),transparent 70%), linear-gradient(90deg,var(--bg) 0%,rgba(11,11,12,.94) 36%,rgba(11,11,12,.62) 64%,rgba(11,11,12,.82) 100%), linear-gradient(180deg,rgba(11,11,12,.8) 0%,transparent 28%,transparent 66%,var(--bg) 100%)} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(201,164,92,.045) 0 1px,transparent 1px 132px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)} .hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center} /* 29/09: a .ln recorta com clip-path estendido (em vez de overflow:hidden + padding): o recorte só serve à entrada "subir" e não pode comer perna de j/p/g/ç, acento de Ã/É nem a cauda do j à esquerda. O span entra de calc(1xx% + .42em) para começar abaixo da borda estendida. */ .h1 .ln{display:block;clip-path:inset(-.3em -.16em -.34em -.16em)} .h1 .ln>span{display:block} .hero__sub{color:#D2CBBE;font-size:17.5px;max-width:50ch;margin-top:22px} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .nota{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding:10px 20px 10px 10px;border:1px solid var(--line);border-radius:16px;background:rgba(14,14,15,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .nota__g{width:40px;height:40px;flex:none;border-radius:11px;background:#fff;display:grid;place-items:center} .nota__g svg{width:23px;height:23px} .nota__n{font:600 28px/1 var(--serif);color:var(--ouro-2)} .nota__t{display:block;font-size:13px;color:var(--muted);line-height:1.3;margin-top:3px} .estrelas{display:flex;gap:2px;color:#F5B942} .estrelas svg{width:14px;height:14px} .hero__fig{position:relative;justify-self:center;height:min(600px,calc(100svh - 170px));aspect-ratio:4/5;max-width:100%} .hero__halo{position:absolute;left:50%;top:45%;width:94%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(201,164,92,.5);background:radial-gradient(circle,rgba(201,164,92,.16),transparent 62%);box-shadow:0 0 0 22px rgba(201,164,92,.04)} .hero__halo::after{content:"";position:absolute;inset:-40px;border-radius:50%;border:1px dashed rgba(201,164,92,.2)} .hero__recorte{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 30px 50px rgba(0,0,0,.65)) saturate(.92);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 78%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect} .hero__foto{position:absolute;inset:0;border-radius:26px;overflow:hidden;border:1px solid var(--line)} .hero__foto img{width:100%;height:100%;object-fit:cover} .hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(8,8,9,.88))} .hero--moldura .hero__fig::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(201,164,92,.5);border-radius:26px} .hero__placa{position:absolute;left:50%;bottom:5%;translate:-50% 0;z-index:2;white-space:nowrap;text-align:center;padding:12px 24px;border-radius:999px;background:rgba(10,10,11,.84);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hero__placa strong{display:block;font:600 14px/1.25 var(--serif);letter-spacing:.06em} .hero__placa span{font:700 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)} /* cards */ .card{position:relative;background:linear-gradient(180deg,#1A1917,#121213);border:1px solid rgba(201,164,92,.16);border-radius:var(--r);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s} .card:hover{transform:translateY(-4px);border-color:rgba(201,164,92,.5);box-shadow:0 26px 50px -26px rgba(0,0,0,.9),0 0 40px -20px rgba(201,164,92,.35)} .ico{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:15px;color:var(--ouro);background:radial-gradient(circle at 30% 20%,rgba(233,207,146,.16),rgba(201,164,92,.04));border:1px solid rgba(201,164,92,.3)} .ico .i{width:24px;height:24px} .destaques{position:relative;z-index:2;margin-top:clamp(-88px,-7vw,-64px)} .destaques__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .destaques__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .destaque{display:flex;gap:18px;align-items:flex-start;padding:26px} .destaque h3{font:600 15.5px/1.3 var(--serif);letter-spacing:.05em;margin:3px 0 6px} .destaque p{color:var(--muted);font-size:14.5px;line-height:1.55} /* seções */ .sec{padding:clamp(84px,10vw,132px) 0} .escritorio__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,88px);align-items:center} .foto-moldura{position:relative;margin:0 0 0 18px} .foto-moldura::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid rgba(201,164,92,.45);border-radius:22px} .foto-moldura img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;filter:saturate(.88) contrast(1.04)} .selo{position:absolute;right:-20px;bottom:30px;padding:16px 22px;border-radius:16px;text-align:center;color:#16110A;background:linear-gradient(180deg,var(--ouro-2),var(--ouro));box-shadow:0 20px 40px -18px rgba(0,0,0,.85)} .selo strong{display:block;font:700 38px/1 var(--serif)} .selo span{display:block;margin-top:6px;font:800 10.5px/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase} .bio>p{color:#D2CBBE;margin-top:18px} .guia{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px} .guia li{display:flex;gap:12px;align-items:flex-start} .guia .i{color:var(--ouro);margin-top:4px} .areas{position:relative;background:radial-gradient(60% 45% at 50% 0%,rgba(201,164,92,.1),transparent 70%),var(--bg2);border-block:1px solid rgba(201,164,92,.08)} .areas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:52px} .area{display:flex;flex-direction:column;padding:32px 30px 26px} .area__tag{margin-top:24px;font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ouro)} .area h3{font:600 24px/1.2 var(--serif);letter-spacing:.03em;margin:10px 0 12px} .area p{color:var(--muted);font-size:15px;flex:1} .area__link{display:flex;align-items:center;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(201,164,92,.15);font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)} .area__link .i{transition:transform .35s var(--ease)} .area:hover .area__link .i{transform:translate(3px,-3px)} .lema{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,12vw,170px) 0;text-align:center} .lema__bg{position:absolute;inset:-14% 0;z-index:-2} .lema__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.26)} .lema::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 60% at 50% 50%,rgba(201,164,92,.13),transparent 70%),linear-gradient(180deg,var(--bg2),transparent 30%,transparent 70%,var(--bg))} .lema__aspas{display:block;height:50px;font:600 120px/1 var(--italic);color:var(--ouro)} .lema blockquote{margin:0 auto;max-width:18ch;font:italic 500 clamp(34px,4.6vw,62px)/1.12 var(--italic)} .lema__assina{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:34px} .lema__assina::before{content:"";width:64px;height:1px;background:var(--ouro);margin-bottom:12px} .lema__assina strong{font:600 14px/1 var(--serif);letter-spacing:.16em} .lema__assina span{font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)} .passos__grid{position:relative;list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .passos__grid::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro) 20%,var(--ouro) 80%,transparent);transform:scaleX(0);transition:transform 1.6s var(--ease)} .passos__grid.is-in::before{transform:scaleX(1)} .passo{text-align:center;padding:0 10px} .passo__n{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;margin:0 auto;border-radius:50%;font:600 21px/1 var(--serif);color:var(--ouro-2);background:var(--bg);border:1px solid rgba(201,164,92,.55);box-shadow:0 0 0 10px var(--bg),0 0 34px -6px rgba(201,164,92,.45)} .passo h3{font:600 19px/1.3 var(--serif);letter-spacing:.03em;margin:26px 0 10px} .passo p{color:var(--muted);font-size:15px;max-width:34ch;margin-inline:auto} .aval{background:var(--bg2);border-block:1px solid rgba(201,164,92,.08)} .aval__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap} .resumo{display:flex;align-items:center;gap:18px;padding:18px 24px 18px 18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#191816,#111112)} .resumo__n{font:600 50px/1 var(--serif);color:var(--ouro-2)} .resumo small{display:block;margin-top:5px;font-size:13px;color:var(--muted)} .resumo a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:800 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)} .aval__grid{columns:3 300px;column-gap:18px;margin-top:48px} .rev{break-inside:avoid;margin:0 0 18px;padding:24px 24px 26px} .rev__top{display:flex;align-items:center;gap:12px} .rev__av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--serif);color:#16110A;background:linear-gradient(180deg,var(--ouro-2),var(--ouro))} .rev__nome{font-weight:700;font-size:15px;line-height:1.25} .rev__meta{font-size:12.5px;color:var(--dim)} .rev__g{margin-left:auto;width:22px;height:22px} .rev__g svg{width:100%;height:100%} .rev .estrelas{margin:16px 0 10px} .rev blockquote{margin:0} .rev p{color:#D8D1C4;font-size:15.5px;line-height:1.65} .nota-legal{margin-top:10px;text-align:center;font-size:13px;color:var(--dim)} /* foto de perfil de quem avaliou: mesmo círculo de 44px da inicial, para a fileira não desalinhar */ .rev__av--foto{display:block;object-fit:cover;background:#16110A;border:1px solid color-mix(in srgb,var(--ouro) 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 9%,transparent)} /* com muitas avaliações a seção é cortada e o resto abre no botão (o corte é só com JS: sem JS aparecem todas, que é o comportamento antigo) */ .js .aval__grid:not(.is-aberta) .rev--extra{display:none} .aval__mais{display:flex;justify-content:center;margin-top:10px} .aval__btn{cursor:pointer} .aval__btn .i{transition:transform .45s var(--ease)} .aval__btn.is-aberto .i{transform:rotate(45deg)} html:not(.js) .aval__mais{display:none} .faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,84px);align-items:start} .faq__lista{display:grid;gap:12px} .faq details{border:1px solid rgba(201,164,92,.18);border-radius:16px;background:#121213;transition:border-color .35s,background-color .35s} .faq details[open]{border-color:rgba(201,164,92,.55);background:#161614} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font:700 16px/1.4 var(--sans)} .faq summary::-webkit-details-marker{display:none} .mais{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--ouro);transition:transform .4s var(--ease)} .faq details[open] .mais{transform:rotate(45deg)} .faq details p{padding:0 22px 22px;color:var(--muted)} .cta{padding:0 0 clamp(84px,10vw,120px)} .cta__box{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:clamp(34px,5vw,60px);border-radius:28px;border:1px solid rgba(201,164,92,.38);background:radial-gradient(70% 130% at 100% 0%,rgba(201,164,92,.2),transparent 60%),linear-gradient(180deg,#191816,#0F0F10)} .cta__acoes{display:flex;flex-direction:column;align-items:center;gap:12px} .cta__fone{font-size:14px;color:var(--muted)} .contato__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:stretch} .info{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:20px} .info li{display:flex;gap:16px;align-items:flex-start;line-height:1.55} .info .ico{width:48px;height:48px;border-radius:13px} .info small{display:block;margin:2px 0 6px;font:800 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)} .info a:hover{color:var(--ouro-2)} .mapa{min-height:400px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#111} .mapa iframe{display:block;width:100%;height:100%;min-height:400px;border:0;filter:grayscale(1) invert(.9) contrast(.9)} /* foto do escritório no pé da coluna de contato, quando sobra uma foto do lugar que ainda não apareceu nítida no site; o mapa ao lado estica junto */ .contato__foto{margin:32px 0 0;overflow:hidden;border-radius:22px;border:1px solid var(--line)} .contato__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.9) contrast(1.04)} .rodape{padding:52px 0 120px;background:#070708;border-top:1px solid rgba(201,164,92,.14);color:var(--muted);font-size:14px} .rodape__top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .rodape nav{display:flex;flex-wrap:wrap;gap:24px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase} .rodape nav a:hover{color:var(--ouro)} .rodape__legal{display:grid;gap:8px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px;line-height:1.6;color:var(--dim)} .wa{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:var(--wa,#25D366);color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);transition:transform .4s var(--ease),opacity .4s} .wa .i{width:30px;height:30px} .wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa-anel,#25D366);animation:pulso 2.4s infinite} .wa.is-off{opacity:0;transform:scale(.6);pointer-events:none} /* celular, topo da página: o botão flutuante cobria o fim da headline; o cabeçalho já tem o botão do WhatsApp */ .wa.is-topo{opacity:0;transform:scale(.6);pointer-events:none} @keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}} /* movimento — so transform + opacity (compostos na GPU, sem repintar o bloco a cada quadro). Curto de proposito: ~.55s por bloco e atraso escalonado com teto de .15s (min() abaixo). Primeira dobra (.hz, linhas do h1, foto): @keyframes que rodam sozinhas desde o primeiro quadro, com fill "backwards" — NAO esperam o script.js (is-loaded). Antes o hero ficava invisivel entre a primeira pintura e o script terminar (medido: ate 1,6s num celular lento), e se o script falhasse ficava invisivel pra sempre. O estado final e o estilo normal do elemento, entao nada depende de JS. --ent-de = de onde vem (transform), --ent-op = opacidade inicial (1 nas linhas do h1 "subir", que ja se escondem pelo overflow da linha). Blocos de baixo (.rv): o script.js poe .is-in 15% ANTES de o bloco chegar na tela, entao quem rola rapido no celular nao chega num bloco que ainda nao apareceu. Sem "js" (ou com no-motion) tudo visivel. */ @keyframes ent{from{opacity:var(--ent-op,0);transform:var(--ent-de,none)}} .js .h1 .ln>span,.js .hz,.js .hero__fig,.js .hero__halo{animation:ent .55s var(--ease) backwards} .js .h1 .ln>span{--ent-de:translateY(calc(108% + .42em));--ent-op:1;animation-duration:.65s} .js .h1 .ln:nth-child(2)>span{animation-delay:.05s} .js .h1 .ln:nth-child(3)>span{animation-delay:.1s} .js .h1 .ln:nth-child(4)>span{animation-delay:.15s} .js .hz{--ent-de:translateY(14px);animation-delay:min(var(--d,0s),.15s)} .js .hero__fig{--ent-de:translateY(24px);animation-duration:.7s;animation-delay:.1s} .js .hero__halo{--ent-de:scale(.88);animation-duration:1s;animation-delay:.15s} .js .rv{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease) min(var(--d,0s),.15s),transform .55s var(--ease) min(var(--d,0s),.15s)} .js .rv.is-in{opacity:1;transform:none} /* presets de entrada (tema.animacao = lateral | escala); sem o atributo vale o "subir" acima. cortina, mascara e desfoque (clip-path / filter: blur) foram aposentadas em 22/09/2026: nao sao compostas na GPU e travavam a rolagem no celular. O render.mjs nao emite mais essas chaves — site.json antigo com elas sai no "subir". */ /* lateral: entra pelo lado, na direcao do lado da foto (tema.lado) */ .js[data-animacao="lateral"]{--ent-x:40px} .js[data-animacao="lateral"][data-lado="esquerda"]{--ent-x:-40px} .js[data-animacao="lateral"] .h1 .ln>span{--ent-de:translateX(calc(var(--ent-x) * 1.6));--ent-op:0} .js[data-animacao="lateral"] .hz{--ent-de:translateX(var(--ent-x))} .js[data-animacao="lateral"] .hero__fig{--ent-de:translateX(calc(var(--ent-x) * -1.2))} .js[data-animacao="lateral"] .rv{transform:translateX(var(--ent-x))} .js[data-animacao="lateral"] .rv.is-in{transform:none} /* escala: leve zoom-out com fade */ .js[data-animacao="escala"] .h1 .ln{clip-path:none} .js[data-animacao="escala"] .h1 .ln>span{--ent-de:scale(1.07);--ent-op:0} .js[data-animacao="escala"] .hz{--ent-de:scale(1.05)} .js[data-animacao="escala"] .hero__fig{--ent-de:scale(1.06)} .js[data-animacao="escala"] .rv{transform:scale(1.04)} .js[data-animacao="escala"] .rv.is-in{transform:none} .no-motion *,.no-motion *::before,.no-motion *::after{transition:none!important;animation:none!important} .no-motion .rv,.no-motion .hz,.no-motion .hero__fig,.no-motion .hero__halo,.no-motion .h1 .ln>span{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js :is(.hz,.hero__fig,.hero__halo,.h1 .ln>span){animation:none!important}} /* responsivo */ @media (max-width:980px){.nav{display:none}} @media (max-width:900px){ .topbar{display:none} .hero{padding-bottom:96px} .hero__grid{grid-template-columns:1fr} .hero__fig{height:auto;width:min(100%,400px);margin-top:18px} .hero::before{background:radial-gradient(70% 40% at 50% 72%,rgba(201,164,92,.2),transparent 70%),linear-gradient(180deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.8) 55%,var(--bg) 100%)} .destaques{margin-top:-44px} .destaques__grid,.escritorio__grid,.faq__grid,.contato__grid{grid-template-columns:1fr} .passos__grid{grid-template-columns:1fr;gap:40px} .passos__grid::before{display:none} .selo{right:10px} .cta__box{grid-template-columns:1fr} .cta__acoes{align-items:flex-start} } @media (max-width:760px){ /* no celular a coluna é única: 6 cartões empilhados já é parede, então o corte cai para 3 */ .js .aval__grid:not(.is-aberta) .rev--extra-m{display:none} } @media (max-width:520px){ .wrap{width:min(var(--wrap),100% - 32px)} .hdr .wrap{min-height:70px} .hero{margin-top:-70px;padding-top:calc(70px + 18px)} .hdr .btn span{display:none} /* 01/10 (Mary Hellen): sem flex:none o botão encolhia (28-44px) quando a linha de baixo da marca quebrava */ .hdr .btn{width:46px;padding:0;flex:none} /* linha de baixo que quebra em 2: entrelinha para as linhas não colarem; subtítulo longo (logo--sub-longo) aperta o espaçamento */ .logo__sub{line-height:1.3;margin-top:4px} .logo--sub-longo .logo__sub{letter-spacing:.2em} .logo__mark{width:40px;height:40px;font-size:14px} .logo__img{height:38px;max-width:132px} .logo--letreiro .logo__img{height:44px;max-width:190px} .logo__nome{font-size:13.5px} .hero__cta .btn{width:100%} .nota{margin-top:26px} .resumo{width:100%} .wa{right:14px;bottom:14px} } /* sem foto de escritório: fundo liso no hero e cartão com monograma no lugar da foto */ .hero__bg--liso{background:radial-gradient(55% 65% at 76% 42%,color-mix(in srgb,var(--ouro) 18%,transparent),transparent 72%),radial-gradient(45% 55% at 8% 96%,color-mix(in srgb,var(--ouro) 9%,transparent),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 26px),var(--bg)} .cartao{position:relative;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px 28px;border-radius:22px;text-align:center;overflow:hidden;background:radial-gradient(80% 60% at 50% 30%,color-mix(in srgb,var(--ouro) 14%,transparent),transparent 70%),linear-gradient(165deg,#1A1712,#0E0D0C 70%);border:1px solid color-mix(in srgb,var(--ouro) 38%,transparent);box-shadow:inset 0 0 0 10px #0E0D0C,inset 0 0 0 11px color-mix(in srgb,var(--ouro) 22%,transparent)} .cartao__sigla{font:600 clamp(84px,10vw,132px)/1 var(--serif);letter-spacing:.04em;background:linear-gradient(180deg,var(--ouro-2),var(--ouro) 55%,var(--ouro-3));-webkit-background-clip:text;background-clip:text;color:transparent} .cartao__fio{width:64px;height:1px;margin:6px 0 4px;background:linear-gradient(90deg,transparent,var(--ouro),transparent)} .cartao__nome{font:600 clamp(20px,1.9vw,26px)/1.25 var(--serif);color:#F4EFE6} .cartao__cargo{font:800 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-2)} .cartao__local{max-width:28ch;font:400 14px/1.5 var(--sans);color:rgba(244,239,230,.62)} /* variações de fundo claro (tema.fundo = claro | claro-verde | claro-vinho): marfim com uma cor escura de apoio; sem tema.fundo nada muda */ html[data-fundo^="claro"]{--bg:#F6F1E8;--bg2:#EEE6D8;--line:rgba(var(--escuro-rgb),.14);--txt:var(--escuro);--muted:#56607A;--dim:#838A9B} html[data-fundo^="claro"]{--escuro:#16213A;--escuro-2:#24365A;--escuro-rgb:22,33,58} html[data-fundo="claro-verde"]{--escuro:#173A2F;--escuro-2:#23513F;--escuro-rgb:23,58,47;--muted:#56695F} html[data-fundo="claro-vinho"]{--escuro:#3A1824;--escuro-2:#562636;--escuro-rgb:58,24,36;--muted:#6B5A60} /* claro-bordo: fundo branco, texto grafite quente e o VINHO só nos detalhes (botões, destaques, ícones, linhas, selos, links) — tema.ouro = vinho. Blocos escuros (barra do topo, CTA, rodapé) em grafite, com acento rosé claro para manter AA. */ html[data-fundo="claro-bordo"]{--bg:#FFFFFF;--bg2:#F8F4F3;--escuro:#231C1E;--escuro-2:#3A2F32;--escuro-rgb:35,28,30;--muted:#5E5457;--dim:#766B6E;--line:color-mix(in srgb,var(--ouro) 18%,transparent)} html[data-fundo="claro-bordo"] .topbar,html[data-fundo="claro-bordo"] .cta__box,html[data-fundo="claro-bordo"] .cartao,html[data-fundo="claro-bordo"] .rodape{--ouro:#E7AEBA;--ouro-2:#F6D6DD;--ouro-3:#C98896} html[data-fundo="claro-bordo"] .btn--ouro{background:linear-gradient(180deg,var(--ouro-2),var(--ouro));color:#fff;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--ouro) 60%,transparent)} html[data-fundo="claro-bordo"] .btn--ouro:hover{box-shadow:0 20px 38px -16px color-mix(in srgb,var(--ouro) 70%,transparent)} html[data-fundo="claro-bordo"] .btn--linha:hover{border-color:var(--ouro);color:var(--ouro)} html[data-fundo="claro-bordo"] .cta__box{background:radial-gradient(70% 130% at 100% 0%,rgba(231,174,186,.16),transparent 60%),linear-gradient(180deg,var(--escuro-2),var(--escuro))} html[data-fundo="claro-bordo"] .cta__box .btn--ouro{background:#fff;color:#7A1426} html[data-fundo="claro-bordo"] .hdr.is-scrolled{background:rgba(255,255,255,.94)} html[data-fundo="claro-bordo"] .hero__placa{background:rgba(255,255,255,.94)} html[data-fundo="claro-bordo"] .hero__sub,html[data-fundo="claro-bordo"] .bio>p,html[data-fundo="claro-bordo"] .rev p,html[data-fundo="claro-bordo"] .mani__bloco p{color:#3F3639} html[data-fundo="claro-bordo"] .hero--moldura .hero__fig::before,html[data-fundo="claro-bordo"] .foto-moldura::before{border-color:color-mix(in srgb,var(--ouro) 45%,transparent)} html[data-fundo="claro-bordo"] .card{border-color:color-mix(in srgb,var(--ouro) 12%,transparent)} html[data-fundo="claro-bordo"] .area__link{border-top-color:color-mix(in srgb,var(--ouro) 18%,transparent)} html[data-fundo="claro-bordo"] .faq details{border-color:color-mix(in srgb,var(--ouro) 16%,transparent)} html[data-fundo="claro-bordo"] .faq details[open]{background:#FFFBFB;border-color:color-mix(in srgb,var(--ouro) 45%,transparent)} html[data-fundo="claro-bordo"] .areas{background:radial-gradient(60% 45% at 50% 0%,color-mix(in srgb,var(--ouro) 6%,transparent),transparent 70%),var(--bg2);border-block-color:color-mix(in srgb,var(--ouro) 8%,transparent)} html[data-fundo="claro-bordo"] .aval{border-block-color:color-mix(in srgb,var(--ouro) 8%,transparent)} html[data-fundo="claro-bordo"] .passo__n{border-color:color-mix(in srgb,var(--ouro) 35%,transparent)} html[data-fundo="claro-bordo"] .mapa{background:#F1ECEB} [data-fundo^="claro"] .topbar,[data-fundo^="claro"] .cta__box,[data-fundo^="claro"] .cartao,[data-fundo^="claro"] .rodape{--ouro:#D9B878;--ouro-2:#F0DCAE;--ouro-3:#B48A45} [data-fundo^="claro"] .topbar{background:var(--escuro);border-bottom-color:transparent;color:rgba(246,241,232,.8)} [data-fundo^="claro"] .topbar a:hover{color:#fff} [data-fundo^="claro"] .hdr.is-scrolled{background:rgba(246,241,232,.94);box-shadow:0 1px 0 rgba(var(--escuro-rgb),.1)} [data-fundo^="claro"] .btn--ouro{background:linear-gradient(180deg,var(--escuro-2),var(--escuro));color:#F6F1E8;box-shadow:0 14px 30px -14px rgba(var(--escuro-rgb),.6)} [data-fundo^="claro"] .btn--ouro:hover{box-shadow:0 20px 38px -16px rgba(var(--escuro-rgb),.7)} [data-fundo^="claro"] .btn--ouro::after{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%)} [data-fundo^="claro"] .btn--linha{background:rgba(255,255,255,.55);border-color:rgba(var(--escuro-rgb),.2)} [data-fundo^="claro"] .btn--linha:hover{border-color:var(--ouro);color:var(--ouro)} [data-fundo^="claro"] .hero::before{background:radial-gradient(42% 60% at 76% 48%,color-mix(in srgb,var(--ouro) 14%,transparent),transparent 70%),linear-gradient(180deg,rgba(246,241,232,.7) 0%,transparent 28%,transparent 70%,var(--bg) 100%)} [data-fundo^="claro"] .hero::after{background:repeating-linear-gradient(90deg,rgba(var(--escuro-rgb),.05) 0 1px,transparent 1px 132px)} [data-fundo^="claro"] .hero__bg img{filter:grayscale(1) contrast(.9);opacity:.12} [data-fundo^="claro"] .hero__bg--liso{background:radial-gradient(55% 65% at 76% 42%,color-mix(in srgb,var(--ouro) 13%,transparent),transparent 72%),radial-gradient(45% 55% at 8% 96%,rgba(var(--escuro-rgb),.06),transparent 70%),var(--bg)} [data-fundo^="claro"] .hero__sub,[data-fundo^="claro"] .bio>p,[data-fundo^="claro"] .rev p{color:#3D4760} [data-fundo^="claro"] .nota{background:rgba(255,255,255,.8);border-color:rgba(var(--escuro-rgb),.12)} [data-fundo^="claro"] .nota__n,[data-fundo^="claro"] .resumo__n,[data-fundo^="claro"] .passo__n{color:var(--ouro)} [data-fundo^="claro"] .hero__foto{border-color:rgba(var(--escuro-rgb),.12);box-shadow:0 40px 80px -40px rgba(var(--escuro-rgb),.45)} [data-fundo^="claro"] .hero__foto::after{background:linear-gradient(180deg,transparent 62%,rgba(var(--escuro-rgb),.45))} [data-fundo^="claro"] .hero__placa{background:rgba(246,241,232,.93);border-color:rgba(var(--escuro-rgb),.12)} [data-fundo^="claro"] .card{background:#fff;border-color:rgba(var(--escuro-rgb),.08);box-shadow:0 18px 40px -30px rgba(var(--escuro-rgb),.35)} [data-fundo^="claro"] .card:hover{border-color:color-mix(in srgb,var(--ouro) 45%,transparent);box-shadow:0 26px 50px -28px rgba(var(--escuro-rgb),.4)} [data-fundo^="claro"] .ico{background:color-mix(in srgb,var(--ouro) 9%,#fff);border-color:color-mix(in srgb,var(--ouro) 30%,transparent)} [data-fundo^="claro"] .selo{color:#FFF8EC} [data-fundo^="claro"] .passo__n{box-shadow:0 0 0 10px var(--bg),0 0 30px -8px color-mix(in srgb,var(--ouro) 45%,transparent)} [data-fundo^="claro"] .resumo{background:#fff;border-color:rgba(var(--escuro-rgb),.1)} [data-fundo^="claro"] .faq details{background:#fff;border-color:rgba(var(--escuro-rgb),.1)} [data-fundo^="claro"] .faq details[open]{background:#FFFDF8;border-color:color-mix(in srgb,var(--ouro) 50%,transparent)} [data-fundo^="claro"] .cta__box{background:radial-gradient(70% 130% at 100% 0%,rgba(217,184,120,.22),transparent 60%),linear-gradient(180deg,var(--escuro-2),var(--escuro));border-color:transparent;color:#F6F1E8;box-shadow:0 40px 80px -50px rgba(var(--escuro-rgb),.7)} [data-fundo^="claro"] .cta__box .lead,[data-fundo^="claro"] .cta__fone{color:rgba(246,241,232,.74)} [data-fundo^="claro"] .cta__box .btn--ouro{background:linear-gradient(180deg,#F0DCAE,#D9B878 75%);color:var(--escuro)} [data-fundo^="claro"] .cartao{background:radial-gradient(80% 60% at 50% 30%,rgba(217,184,120,.18),transparent 70%),linear-gradient(165deg,var(--escuro-2),var(--escuro) 70%);box-shadow:inset 0 0 0 10px var(--escuro),inset 0 0 0 11px rgba(217,184,120,.3)} [data-fundo^="claro"] .mapa{background:#E9E2D5} [data-fundo^="claro"] .mapa iframe{filter:grayscale(.3)} [data-fundo^="claro"] .rodape{background:var(--escuro);border-top-color:transparent;color:rgba(246,241,232,.72)} [data-fundo^="claro"] .rodape__legal{border-top-color:rgba(255,255,255,.08);color:rgba(246,241,232,.5)} @media (max-width:900px){ [data-fundo^="claro"] .hero::before{background:radial-gradient(70% 40% at 50% 72%,color-mix(in srgb,var(--ouro) 14%,transparent),transparent 70%),linear-gradient(180deg,rgba(246,241,232,.85) 0%,rgba(246,241,232,.6) 55%,var(--bg) 100%)} } /* mobile: foto do advogado primeiro, com o rosto inteiro já na primeira tela */ @media (max-width:900px){ .hero__fig{order:-1;height:min(52svh,470px);width:auto;max-width:100%;margin:0 auto 4px} .hero__foto img{object-position:50% 25%} .hero__grid{gap:26px} .hero__placa{padding:10px 18px} } @media (max-width:520px){ .h1{font-size:clamp(30px,8.6vw,38px)} .hero__sub{font-size:16px;margin-top:16px} .hero__cta{margin-top:24px} } /* sem segunda foto: "sobre" em duas colunas de texto, com monograma vazado ao fundo (sem card) */ .escritorio__grid--texto{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start} .bio__topo{position:relative;isolation:isolate;padding-top:6px} .bio__topo::before{content:attr(data-sigla);position:absolute;z-index:-1;left:-8px;top:-20px;font:600 clamp(150px,17vw,240px)/1 var(--serif);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ouro) 18%,transparent);pointer-events:none} .bio__topo .h2{margin-top:14px} .escritorio__grid--texto .bio{padding-top:10px;border-left:1px solid var(--line);padding-left:clamp(28px,4vw,56px)} .escritorio__grid--texto .bio>p:first-child{margin-top:0} .selo--linha{position:static;display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 20px} .selo--linha strong{font-size:34px} .selo--linha span{margin-top:0;text-align:left;max-width:9ch} @media (max-width:900px){ .escritorio__grid--texto{grid-template-columns:1fr} .escritorio__grid--texto .bio{border-left:0;padding-left:0;padding-top:0} .bio__topo::before{font-size:130px;top:-30px} } /* variações de tipografia (tema.fonte = editorial | moderna | sobria | geometrica | limpa); sem tema.fonte fica Cinzel + Manrope */ html[data-fonte="editorial"]{--serif:'Playfair Display',Georgia,serif;--italic:'Playfair Display',Georgia,serif;--sans:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif} html[data-fonte="moderna"]{--serif:'Fraunces',Georgia,serif;--italic:'Fraunces',Georgia,serif;--sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif} html[data-fonte="sobria"]{--serif:'Cormorant Garamond',Georgia,serif;--italic:'Cormorant Garamond',Georgia,serif;--sans:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif} html[data-fonte="geometrica"]{--serif:'Bodoni Moda',Didot,Georgia,serif;--italic:'Bodoni Moda',Didot,Georgia,serif;--sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif} html[data-fonte="limpa"]{--serif:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;--italic:Georgia,'Times New Roman',serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif} html[data-fonte] .h1{font-size:clamp(40px,5vw,70px);letter-spacing:-.012em;line-height:1} /* entrelinha da headline por fonte (29/09, "o espaçamento das headlines no desktop está muito longe"): o vão entre uma linha e a maiúscula da seguinte fica ~0,4 da altura da maiúscula em todas. Cormorant tem maiúscula baixa (0,63 do corpo) e precisa de entrelinha bem menor que Fraunces/Sora (0,70–0,73). */ html[data-fonte="moderna"] .h1{line-height:.98} html[data-fonte="geometrica"] .h1{line-height:1.02} html[data-fonte] .h2{letter-spacing:-.008em} html[data-fonte] .logo__nome,html[data-fonte] .destaque h3,html[data-fonte] .hero__placa strong,html[data-fonte] .area h3,html[data-fonte] .passo h3,html[data-fonte] .lema__assina strong{letter-spacing:0} html[data-fonte="sobria"] .h1{font-size:clamp(46px,5.6vw,78px);line-height:.9} html[data-fonte="sobria"] .h2{font-size:clamp(33px,3.9vw,52px)} html[data-fonte="sobria"] .destaque h3,html[data-fonte="sobria"] .passo h3,html[data-fonte="sobria"] .logo__nome{font-size:19px} html[data-fonte="limpa"] .h1{letter-spacing:-.035em} html[data-fonte="limpa"] .h2{letter-spacing:-.022em} @media (max-width:520px){ html[data-fonte] .h1{font-size:clamp(32px,9.4vw,42px)} html[data-fonte="sobria"] .h1{font-size:clamp(38px,10.6vw,48px)} } /* variações de fundo escuro (tema.fundo = marinho | verde | vinho | grafite | cafe | bordo) */ html[data-fundo="marinho"]{--bg:#0A0F1A;--bg2:#0E1422;--c0:#060A12;--c1:#151D2D;--c2:#101726;--ov:10,15,26} html[data-fundo="verde"]{--bg:#09110E;--bg2:#0D1612;--c0:#050A08;--c1:#14211B;--c2:#0F1A15;--ov:9,17,14} html[data-fundo="vinho"]{--bg:#12090C;--bg2:#170C10;--c0:#0A0507;--c1:#231318;--c2:#1B0F13;--ov:18,9,12} html[data-fundo="grafite"]{--bg:#101215;--bg2:#14171B;--c0:#090A0C;--c1:#1C2027;--c2:#16191F;--ov:16,18,21} html[data-fundo="cafe"]{--bg:#110D0A;--bg2:#16110D;--c0:#0A0705;--c1:#221A14;--c2:#1A1410;--ov:17,13,10} /* bordô: vinho aberto, de marca (logo vinho + dourado); o "vinho" acima é quase preto. muted/dim clareados para AA no fundo avermelhado */ html[data-fundo="bordo"]{--bg:#2B0A13;--bg2:#330C17;--c0:#1E060D;--c1:#45141F;--c2:#3A101A;--ov:43,10,19;--muted:#C4B3AB;--dim:#A38F8A} [data-tinta] .topbar,[data-tinta] .rodape{background:var(--c0)} [data-tinta] .hdr.is-scrolled{background:rgba(var(--ov),.9)} [data-tinta] .hero::before{background:radial-gradient(42% 60% at 76% 48%,color-mix(in srgb,var(--ouro) 20%,transparent),transparent 70%),linear-gradient(90deg,var(--bg) 0%,rgba(var(--ov),.94) 36%,rgba(var(--ov),.62) 64%,rgba(var(--ov),.82) 100%),linear-gradient(180deg,rgba(var(--ov),.8) 0%,transparent 28%,transparent 66%,var(--bg) 100%)} [data-tinta] .nota{background:rgba(var(--ov),.72)} [data-tinta] .hero__foto::after{background:linear-gradient(180deg,transparent 58%,rgba(var(--ov),.88))} [data-tinta] .hero__placa{background:rgba(var(--ov),.86)} [data-tinta] .card,[data-tinta] .resumo{background:linear-gradient(180deg,var(--c1),var(--c2))} [data-tinta] .faq details{background:var(--c2)} [data-tinta] .faq details[open]{background:var(--c1)} [data-tinta] .cta__box{background:radial-gradient(70% 130% at 100% 0%,color-mix(in srgb,var(--ouro) 20%,transparent),transparent 60%),linear-gradient(180deg,var(--c1),var(--bg2))} [data-tinta] .mapa{background:var(--c2)} @media (max-width:900px){ [data-tinta] .hero::before{background:radial-gradient(70% 40% at 50% 72%,color-mix(in srgb,var(--ouro) 20%,transparent),transparent 70%),linear-gradient(180deg,rgba(var(--ov),.92) 0%,rgba(var(--ov),.8) 55%,var(--bg) 100%)} } /* variações de ícones (tema.icones = circulo | solido | solto); sem tema.icones fica o quadrado com contorno */ html[data-icones="circulo"] .ico{border-radius:50%} html[data-icones="circulo"] .i{stroke-width:1.35} html[data-icones="solido"] .ico{background:linear-gradient(180deg,var(--ouro-2),var(--ouro));border-color:transparent;color:#15110B;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--ouro) 60%,transparent)} html[data-icones="solido"] .ico .i{stroke-width:1.8} html[data-icones="solto"] .ico{width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--ouro)} html[data-icones="solto"] .ico .i{width:30px;height:30px;stroke-width:1.25} html[data-icones="solto"] .info .ico .i{width:24px;height:24px} /* foto à esquerda no computador (tema.lado = esquerda) */ @media (min-width:901px){ html[data-lado="esquerda"] .hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} html[data-lado="esquerda"] .hero__fig{order:-1} html[data-lado="esquerda"] .escritorio__grid:not(.escritorio__grid--texto){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} html[data-lado="esquerda"] .escritorio__grid:not(.escritorio__grid--texto) .foto-moldura{order:2;margin:0 18px 0 0} } /* ordem das seções variável (tema.ordem): respiro certo quando seções vizinhas mudam */ .destaques + .areas,.destaques + .aval{margin-top:clamp(64px,8vw,100px)} .areas + .cta,.aval + .cta,.lema + .cta{padding-top:clamp(84px,10vw,120px)} .escritorio + .passos,.passos + .faq,.cta + .faq,.faq + .contato{padding-top:0} /* hero sem retrato do advogado: o texto ocupa a coluna inteira */ .hero__grid--texto,html[data-lado="esquerda"] .hero__grid--texto{grid-template-columns:minmax(0,1fr)} .hero__grid--texto .hero__txt{max-width:min(100%,860px)} /* Escritório com mais de uma unidade (site.json: "unidades" + "mapaLegenda"). Só entra em quem tem esses campos; quem não tem segue com o .mapa solto de sempre. */ .mapa-col{display:flex;flex-direction:column;gap:14px;min-height:400px} .mapa-col .mapa{flex:1} .mapa-leg{font:800 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)} .un-mapa{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ouro)} .un-mapa .i{width:13px;height:13px;transition:transform .3s var(--ease)} .un-mapa:hover .i{transform:translate(3px,-3px)} /* manifesto (opcional, site.json "manifesto": [{titulo, texto[], lista[], depois[]}] + "fecho"): blocos de texto do próprio cliente */ .mani__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:52px} .mani__bloco{padding:clamp(24px,3vw,36px)} .mani__bloco:hover{transform:none} .mani__bloco h3{font:600 clamp(20px,1.8vw,25px)/1.25 var(--serif);margin:0 0 14px} .mani__bloco h3 em{font-style:normal;color:var(--ouro)} .mani__bloco p{color:var(--muted);margin:0 0 12px} .mani__bloco p:last-child{margin-bottom:0} .mani__lista{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 0 16px} .mani__lista li{font-size:13.5px;line-height:1.3;padding:7px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ouro) 40%,transparent);color:var(--txt)} .mani__fecho{margin-top:clamp(48px,6vw,72px)} .mani__fecho .h2{margin:0} .mani__fecho span{display:block;margin-top:12px;font:700 12px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)} [data-fundo^="claro"] .mani__bloco p{color:#3D4760} @media (max-width:900px){.mani__grid{grid-template-columns:1fr}} .mani__midia{margin:22px 0 0} .mani__midia img{width:100%;height:auto;border-radius:12px;border:1px solid color-mix(in srgb,var(--ouro) 30%,transparent)} .mani__midia figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)} .mani__midia a{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:6px;font:700 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ouro)} .mani__midia a .i{width:14px;height:14px} .mani__midia a:hover{text-decoration:underline} .mani__bloco:last-child:nth-child(odd){grid-column:1/-1} .mani__fecho-nome{display:block;font:600 clamp(20px,2vw,26px)/1.2 var(--serif);letter-spacing:.08em;text-transform:uppercase} .mani__fecho span{margin-top:8px} .mani__fecho-linha{margin:18px 0 0;color:var(--muted)} .mani__fecho-itens{list-style:none;padding:0;margin:10px auto 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;color:var(--muted);font-size:15px} .mani__fecho-itens li{position:relative} .lema__nota{margin:18px auto 0;max-width:60ch;color:var(--muted);font-size:16px} /* "Na mídia" (site.json "midia" + fotos.midia): foto inteira, sem recorte, texto ao lado */ .midia__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center} .midia__foto{margin:0} .midia__foto img{width:100%;height:auto;border-radius:18px;border:1px solid color-mix(in srgb,var(--ouro) 30%,transparent);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)} .midia__foto figcaption{margin-top:12px;font-size:13.5px;color:var(--dim)} .midia__txt p{color:var(--muted);margin:16px 0 0} [data-fundo^="claro"] .midia__txt p{color:#3D4760} html[data-fundo="claro-bordo"] .midia__txt p{color:#3F3639} .midia__link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font:800 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)} .midia__link .i{width:15px;height:15px} .midia__link:hover{text-decoration:underline} /* celular: coluna em flex, não grid — no Safari do iPhone a linha do grid media a foto pela altura natural (788 px) antes de reduzir, e sobrava um vão enorme entre a foto e o título (29/09) */ .midia--inv .midia__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .midia--inv .midia__foto{order:2} @media (max-width:900px){.midia__grid{display:flex;flex-direction:column;align-items:stretch;gap:26px}} /* "sobre" com cartão de vidro sutil atrás do texto (site.json "sobreCartao": true) */ .bio--cartao{padding:clamp(28px,3.6vw,48px);border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);box-shadow:0 40px 90px -60px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} [data-fundo^="claro"] .bio--cartao{background:rgba(255,255,255,.5);border-color:rgba(var(--escuro-rgb),.06);box-shadow:0 40px 90px -56px rgba(var(--escuro-rgb),.28)} html[data-fundo="claro-bordo"] .bio--cartao{background:rgba(255,255,255,.72);border-color:color-mix(in srgb,var(--ouro) 8%,transparent);box-shadow:0 40px 90px -56px color-mix(in srgb,var(--ouro) 30%,transparent)} .selo strong span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none} .selo strong .selo__mais{font-size:.7em;vertical-align:.22em;margin-right:2px} /* citação destacada dentro de um bloco do manifesto */ .mani__cita{margin:20px 0 4px;padding:4px 0 4px 20px;border-left:2px solid var(--ouro)} .mani__cita p{margin:0 0 8px!important;font:500 clamp(17px,1.5vw,20px)/1.45 var(--serif);font-style:italic;color:var(--txt)!important} .mani__cita span{display:block;font-size:14px;color:var(--muted)} /* "midia3" (opcional): bloco compacto de mídia — foto + prévia de vídeo própria. Sem a chave, nada disto aparece */ .mx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,350px);grid-template-areas:"foto video" "txt video";column-gap:clamp(32px,4.5vw,64px);row-gap:28px;align-items:start;margin-top:clamp(36px,4vw,56px)} .mx__grid--so-foto{grid-template-columns:minmax(0,820px);grid-template-areas:"foto";justify-content:center} .mx__foto{grid-area:foto;margin:0} .mx__foto img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid color-mix(in srgb,var(--ouro) 30%,transparent);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)} .mx__foto figcaption,.contato__galfig figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--dim)} .mx__video{grid-area:video;margin:0} .mx__tela{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#111;border:1px solid color-mix(in srgb,var(--ouro) 30%,transparent);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)} .mx__tela video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#111} html:not(.js) .mx__v{display:none} /* sem JS fica a cópia do