/* ===================================================================== * * M. LIMA S. ADVOCACIA * * * * Regra numero um deste arquivo: A MARCA NUNCA TROCA DE COR. * * O azul #012546 e o ouro #ba8927 foram lidos pixel a pixel do PNG * * original, e e assim que ela aparece em todo lugar. Onde o fundo e * * escuro, quem se adapta e o fundo — o cabecalho e claro, a abertura * * e clara, e no rodape a marca ganha uma cartela clara so dela. * * * * Ornamento vetorial proprio: nenhum. A hierarquia e feita com * * tipografia, fio de 1px e espaco. * * ===================================================================== */ /* ------------------------------------------------------------ fontes -- */ @font-face{ font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap; src:url("fontes/newsreader.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap; src:url("fontes/inter-tight.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ------------------------------------------------------------ tokens -- */ :root{ --azul:#012546; --azul-dp:#01182e; --azul-cl:#0a3b6b; --ouro:#ba8927; --ouro-hi:#e0b45c; --ouro-dp:#8a6316; --osso:#f6f4ef; --linho:#eae6de; --tinta:#0e1a28; --wa:#25d366; /* a marca le estas duas e so estas: nao existe versao invertida */ --marca-azul:#012546; --marca-ouro:#ba8927; --wrap:1200px; --pad:clamp(20px,5vw,60px); --cab-h:88px; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ease-out:cubic-bezier(.16,.84,.34,1); --ease:cubic-bezier(.4,0,.2,1); } .az{color:var(--marca-azul)} .ou{color:var(--marca-ouro)} .sup{position:relative;--bg:var(--osso);--tx:var(--tinta);--tx2:#4b5560;--rot:#6b6257; --ac:var(--ouro-dp);--fio:rgba(1,37,70,.15);--fio2:rgba(1,37,70,.08);--vidro:rgba(255,255,255,.55); background:var(--bg);color:var(--tx)} .sup--linho{--bg:var(--linho);--fio:rgba(1,37,70,.17);--fio2:rgba(1,37,70,.09)} .sup--azul{--bg:var(--azul);--tx:var(--osso);--tx2:#c3cedb;--rot:#8fa0b4; --ac:var(--ouro-hi);--fio:rgba(246,244,239,.17);--fio2:rgba(246,244,239,.08);--vidro:rgba(246,244,239,.05)} .sup--fundo{--bg:var(--azul-dp);--tx:var(--osso);--tx2:#b7c3d2;--rot:#8fa0b4; --ac:var(--ouro-hi);--fio:rgba(246,244,239,.13);--fio2:rgba(246,244,239,.06);--vidro:rgba(246,244,239,.04)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{margin:0;background:var(--azul);color:var(--tinta);font-family:var(--sans); font-size:17px;line-height:1.7;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:hidden} img,svg,picture,iframe{display:block;max-width:100%} /* O cabecalho e FIXO com 88px (68px depois de encolher). Sem isto, todo pulo por ancora leva o topo da secao para y=0 e a barra come os primeiros 68px — some o rotulo da secao, que e justamente o que diz onde voce esta. Vale para a pagina inteira, nao so para as secoes. */ [id]{scroll-margin-top:calc(var(--cab-h) + 14px)} /* text-wrap:pretty faz o navegador olhar o paragrafo inteiro antes de decidir as quebras: some a linha orfa com uma palavra so no fim, e as linhas ficam mais parecidas entre si — que e metade do problema do justificado. Navegador que nao conhece simplesmente ignora. */ p,li,dd,dt,blockquote,figcaption{text-wrap:pretty} /* JUSTIFICADO E RECURSO DE TELA LARGA. Abaixo de 860px a coluna e estreita por natureza: medi 43 dos 44 blocos justificados com menos de 55 caracteres por linha no celular — ou seja, todos abrindo rio. Ali a bandeira nao e escolha de gosto, e a unica forma de o texto ficar legivel. Esta regra vem depois de todas as outras de alinhamento, de proposito: ela e a ultima palavra. */ @media (max-width:860px){ p,li,dd,dt,blockquote,figcaption, .olho,.consulta__intro,.consulta__nota,.nt__nota,.tribuna__nota, .aviso-editar{text-align:left!important} } h1,h2,h3,h4,.disp{text-wrap:balance} a{color:inherit;text-decoration:none; -webkit-hyphens:none;hyphens:none;overflow-wrap:break-word} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px} ::selection{background:var(--ouro);color:#fff} .oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* grao: a textura que tira o "chapado" das superficies grandes */ .grao{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23a)' opacity='.36'/%3E%3C/svg%3E"); mix-blend-mode:overlay} .sup--azul .grao,.sup--fundo .grao{opacity:.42} /* ------------------------------------------------------- tipografia -- */ .disp{font-family:var(--serif);font-weight:600;letter-spacing:-.017em; line-height:1.1;margin:0;text-wrap:balance} .d1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.04} .d2{font-size:clamp(1.9rem,3.7vw,3rem)} .d3{font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.16} .d4{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.28;letter-spacing:-.01em} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} /* O olho abre a secao: em vez de tirar o justificado dele, alargo a medida. Com a largura antiga vinha com 43 caracteres por linha e abria rio; com 62ch passa dos 60 e justifica limpo, sem perder o bloco firme. */ .olho{max-width:72ch;font-family:var(--serif);font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.62; color:var(--tx2);max-width:54ch} /* rotulo de secao: numero, fio e nome. Sem desenho nenhum. */ .micro{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,2.2vw,26px); font-size:.688rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--rot)} .micro::before{content:"";width:clamp(22px,3.4vw,44px);height:1px;background:var(--ac);flex:none} .micro--so{--nada:0} .micro--so::before{display:none} /* a palavra que importa ganha um fio de ouro solido embaixo */ .grifo{position:relative;display:inline-block;white-space:nowrap} .grifo::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px; background:var(--ouro);transform:scaleX(0);transform-origin:left; transition:transform .8s var(--ease-out);transition-delay:var(--gd,.4s)} .sup--azul .grifo::after,.sup--fundo .grifo::after,.hero .grifo::after{background:var(--ouro-hi)} .vis .grifo::after{transform:scaleX(1)} /* ----------------------------------------------------------- grelha -- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .secao{padding-block:clamp(76px,9.5vw,138px);overflow:clip} .cab-secao{display:flex;align-items:center;gap:clamp(14px,2.6vw,32px); margin-bottom:clamp(30px,4.2vw,56px)} .cab-secao .micro{margin:0} .cab-secao__fio{flex:1;height:1px;background:var(--fio)} .cab-secao__n{font-family:var(--serif);font-size:.875rem;font-weight:500; font-variant-numeric:lining-nums tabular-nums;color:var(--rot);letter-spacing:.03em} .numeral{position:absolute;right:calc(var(--pad) - .06em);top:clamp(20px,3.4vw,48px);z-index:0; font-family:var(--serif);font-weight:600;font-size:clamp(6.5rem,14vw,14rem);line-height:.78; color:var(--ac);opacity:.07;pointer-events:none;user-select:none; font-variant-numeric:lining-nums} .secao > .wrap{position:relative;z-index:1} /* ========================================================== movimento == */ /* Nao e so aparecer: cada coisa entra do jeito que faz sentido para ela. Manchete sobe por tras de uma mascara linha a linha, painel e varrido por uma cortina, numero conta, fio cresce do proprio ponto de ancora. */ .js [data-sobe]{opacity:0;transform:translate3d(0,28px,0); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); transition-delay:var(--d,0s)} .js [data-sobe="fade"]{transform:none} .js [data-sobe="lado"]{transform:translate3d(-26px,0,0)} .js [data-sobe].vis{opacity:1;transform:none} /* manchete: cada verso sobe de tras de uma faixa que o esconde */ .versos > span{display:block;overflow:hidden} .js .versos > span > span{display:block;transform:translate3d(0,105%,0); transition:transform .95s var(--ease-out);transition-delay:calc(var(--i,0) * .105s + .06s)} .js .vis .versos > span > span{transform:none} /* cortina: o painel e revelado por um varrido, e o ouro passa junto */ .js .cortina{position:relative;clip-path:inset(0 100% 0 0); transition:clip-path 1.05s var(--ease-out);transition-delay:var(--d,0s)} .js .vis .cortina,.js .vis.cortina{clip-path:inset(0 0 0 0)} .js [data-sobe="corte"]{opacity:1;transform:none} .js [data-sobe="corte"] > .moldura{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-out);transition-delay:var(--d,0s)} .js [data-sobe="corte"].vis > .moldura{clip-path:inset(0 0 0 0)} .js .fio-anim{transform:scaleX(0);transform-origin:left; transition:transform 1s var(--ease-out);transition-delay:var(--d,.15s)} .js .vis.fio-anim,.js .vis .fio-anim{transform:scaleX(1)} /* barra de progresso da leitura */ .progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:95; background:var(--ouro);transform:scaleX(0);transform-origin:left; will-change:transform;pointer-events:none} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .js [data-sobe]{opacity:1!important;transform:none!important} .js .tribuna__grade > .tribuna__peca{opacity:1!important;transform:none!important} .js .versos > span > span{transform:none!important} .js .cortina,.js [data-sobe="corte"] > .moldura{clip-path:none!important} .js .fio-anim{transform:none!important} .progresso{display:none} } /* ------------------------------------------------------------ botoes -- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px; padding:17px 30px;border:1px solid transparent;border-radius:2px;overflow:hidden; font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; cursor:pointer;isolation:isolate; transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)} /* o preenchimento varre da esquerda, em vez de so trocar de cor */ /* Um com viewBox e SEM width/height não tem tamanho próprio. Dentro de um flex row ele colapsa para zero quando a linha é apertada — no computador o ícone do YouTube simplesmente não aparecia — e estica para 200px quando a linha pode crescer, no celular, onde ele engolia o botão. Os dois defeitos são o mesmo defeito, e nenhum dos dois dá erro no console. Os ícones do WhatsApp escapavam porque trazem width/height no próprio atributo; esta regra vale para todos e iguala os dois casos. */ .btn svg{flex:none;width:17px;height:17px} .btn--ig svg{width:18px;height:18px} .btn::before{content:"";position:absolute;inset:0;z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)} .btn:hover::before{transform:scaleX(1)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--ouro{color:#fff;background:var(--azul);border-color:var(--azul)} .btn--ouro::before{background:var(--ouro)} .btn--ouro:hover{color:var(--azul);border-color:var(--ouro)} .btn--wa{color:#04220f;background:var(--wa);border-color:var(--wa)} .btn--wa::before{background:#3ee07d} .btn--vazio{color:var(--tx);background:transparent;border-color:var(--fio)} .btn--vazio::before{background:var(--tx)} .btn--vazio:hover{color:var(--bg,var(--osso));border-color:var(--tx)} .sup--azul .btn--vazio:hover,.hero .btn--vazio:hover{color:var(--azul)} .sup--azul .btn--vazio::before,.hero .btn--vazio::before{background:var(--osso)} .elo{position:relative;display:inline-flex;align-items:center;gap:10px;padding-bottom:4px; font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)} .elo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;transform:scaleX(.22);transform-origin:left; transition:transform .45s var(--ease-out)} .elo:hover::after{transform:scaleX(1)} .elo svg{transition:transform .45s var(--ease-out)} .elo:hover svg{transform:translateX(5px)} /* ---------------------------------------------------------- abertura -- */ /* Fundo CLARO de proposito: e a unica maneira de a marca se construir nas cores dela. A coluna sobe do chao, as duas arquitraves descem e assentam em cima do fuste, e so entao vem o letreiro. */ html:not(.js) .abertura{display:none} /* Coluna de flex, e nao grid: com place-items:center o grid punha a marca numa fileira e o dizer noutra, cada uma centrada na SUA fileira — e o dizer ia parar no pe da tela, solto. Em coluna os dois viram uma peca so, centrada junta. */ .abertura{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column; align-items:center;justify-content:center; background:var(--osso);transition:opacity .6s var(--ease),visibility .6s} .abertura[data-sai]{opacity:0;visibility:hidden;pointer-events:none} /* Menor e mais centrada: a marca pequena no meio da tela, com o dizer logo abaixo dela em vez de preso no rodapé, lê como peça única. Grande demais, ela parecia tela de carregamento; pequena, parece assinatura. */ .abertura__marca{width:min(46vw,208px);height:auto} .abertura__marca use{opacity:0;transform-box:fill-box;transform-origin:50% 50%} .abertura__marca .a-fuste{animation:sobe-fuste 1.15s var(--ease-out) .22s forwards} .abertura__marca .a-arq2{animation:assenta .62s var(--ease-out) 1.1s forwards} .abertura__marca .a-arq1{animation:assenta .62s var(--ease-out) 1.3s forwards} .abertura__marca .a-nome{animation:surge .75s var(--ease-out) 1.8s forwards} .abertura__marca .a-filete{animation:abre-filete .85s var(--ease-out) 2.15s forwards} .abertura__marca .a-sub{animation:surge .7s var(--ease-out) 2.45s forwards} @keyframes sobe-fuste{from{opacity:1;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes assenta{from{opacity:0;transform:translateY(-17px)}to{opacity:1;transform:translateY(0)}} @keyframes surge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes abre-filete{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}} .abertura__pe{margin:clamp(22px,3.4vh,34px) 0 0; text-align:center;font-size:.563rem;font-weight:600;letter-spacing:.34em; text-transform:uppercase;color:var(--rot,#6b6257); opacity:0;animation:surge .6s var(--ease-out) 2.5s forwards} @media (prefers-reduced-motion:reduce){ .abertura__marca use{opacity:1!important;animation:none!important; clip-path:none!important;transform:none!important} .abertura__pe{opacity:1;animation:none} } /* --------------------------------------------------------- cabecalho -- */ /* Barra CLARA em toda a pagina: e assim que a marca aparece no azul e no ouro dela, sem inversao nenhuma. */ .cabecalho{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--cab-h); display:flex;align-items:center;background:var(--osso); border-bottom:1px solid rgba(1,37,70,.12); transition:height .35s var(--ease),box-shadow .45s var(--ease)} .cabecalho.solido{height:68px;box-shadow:0 12px 30px -22px rgba(1,37,70,.5)} .cabecalho__in{display:flex;align-items:center;justify-content:space-between; gap:clamp(16px,1.7vw,26px); width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .marca{display:flex;align-items:center;gap:14px;flex:none} .marca__col{width:38px;height:auto;flex:none;transition:transform .5s var(--ease-out)} .marca:hover .marca__col{transform:translateY(-3px)} .marca__risco{width:1px;height:32px;background:rgba(1,37,70,.2);flex:none} .marca__nome{display:flex;flex-direction:column;gap:3px;line-height:1} .marca__nome b{font-family:var(--serif);font-size:1.02rem;font-weight:600; letter-spacing:.055em;color:var(--azul);white-space:nowrap} .marca__nome i{font-style:normal;font-size:.563rem;font-weight:600;letter-spacing:.34em; color:var(--ouro-dp)} .nav{display:flex;align-items:center;gap:clamp(12px,1.35vw,22px);white-space:nowrap} .nav a{position:relative;padding:7px 0;font-size:.7rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:#4b5560;transition:color .3s var(--ease)} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px; background:var(--ouro);transform:scaleX(0);transform-origin:right; transition:transform .4s var(--ease-out)} .nav a:hover,.nav a[aria-current="true"]{color:var(--azul)} .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left} .cabecalho__acao{display:flex;align-items:center;gap:14px;flex:none} .cabecalho__acao .btn{padding:13px 20px;font-size:.688rem;white-space:nowrap} .sanduiche{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none; cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px} .sanduiche span{display:block;width:22px;height:1.6px;background:var(--azul); transition:transform .4s var(--ease-out),opacity .3s var(--ease)} .sanduiche[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .sanduiche[aria-expanded="true"] span:nth-child(2){opacity:0} .sanduiche[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} .gaveta{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column; justify-content:center;gap:8px;padding:var(--cab-h) var(--pad) 40px; background:var(--osso);clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-out);overflow-y:auto} .gaveta[data-aberta]{clip-path:inset(0 0 0 0)} .gaveta__nav{display:flex;flex-direction:column;gap:2px} .gaveta__nav a{display:flex;align-items:baseline;gap:16px;padding:13px 0; border-bottom:1px solid rgba(1,37,70,.12);font-family:var(--serif); font-size:clamp(1.5rem,7vw,2.1rem);font-weight:600;color:var(--azul)} .gaveta__nav a em{font-family:var(--sans);font-style:normal;font-size:.688rem;font-weight:600; letter-spacing:.2em;color:var(--ouro-dp)} .gaveta__pe{margin-top:30px;display:flex;flex-direction:column;gap:14px} .gaveta__pe .btn{width:100%} .gaveta__dados{font-size:.875rem;color:#4b5560;line-height:1.7} .gaveta__dados a{border-bottom:1px solid rgba(186,137,39,.5)} /* --------------------------------------------------------------- hero -- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding-block:calc(var(--cab-h) + 54px) clamp(104px,14vh,150px); background:var(--azul);color:var(--osso);overflow:clip; --tx2:#c3cedb;--rot:#8fa0b4;--ac:var(--ouro-hi);--fio:rgba(246,244,239,.17)} /* Fundo do topo: nao e um gradiente, e uma sala. Quatro camadas empilhadas - faixas verticais largas e de baixissimo contraste que leem como luz passando entre colunas, a luz quente entrando pela direita, a poca fria de sombra no canto oposto, e a base. Tudo em gradiente de CSS: nada desenhado. */ .hero__fundo{position:absolute;inset:0;z-index:0;pointer-events:none; background: repeating-linear-gradient(101deg, rgba(246,244,239,.03) 0 2px, transparent 2px 118px), radial-gradient(64vw 74vh at 84% 10%,rgba(224,180,92,.2),transparent 60%), radial-gradient(44vw 52vh at 96% 96%,rgba(186,137,39,.1),transparent 64%), radial-gradient(70vw 80vh at 2% 92%,rgba(3,22,44,.85),transparent 68%), linear-gradient(168deg,#06305c 0%,#012546 46%,#01182e 100%)} .hero__fundo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(1,24,46,.5) 0%,transparent 26%, transparent 74%,rgba(1,18,34,.6) 100%)} .hero .wrap{position:relative;z-index:2} .hero__grade{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(30px,5vw,70px);align-items:center} .hero__rot{color:var(--ouro-hi)} .hero__rot::before{background:var(--ouro-hi)} .hero__titulo{margin-bottom:clamp(18px,2.2vw,26px)} .hero__titulo .verso-3{color:var(--ouro-hi)} .hero__olho{margin-bottom:clamp(20px,2.6vw,30px);color:#c3cedb;max-width:40ch} .hero__acoes{display:flex;flex-wrap:wrap;gap:13px} .hero__pe{position:absolute;left:0;right:0;bottom:clamp(20px,3vw,36px);z-index:2; max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad); display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none} .explore{display:flex;align-items:center;gap:12px;pointer-events:auto;padding-block:6px} .explore span{font-size:.625rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:rgba(246,244,239,.5)} .explore i{display:block;width:46px;height:1px;position:relative;overflow:hidden; background:rgba(246,244,239,.22)} .explore i::after{content:"";position:absolute;inset-block:0;left:-18px;width:18px; background:var(--ouro-hi);animation:corre 2.4s ease-in-out infinite} @keyframes corre{0%{transform:translateX(0)}60%,100%{transform:translateX(64px)}} .oab-sel{text-align:right;pointer-events:auto} .oab-sel b{display:block;font-family:var(--serif);font-size:.938rem;font-weight:600; letter-spacing:.03em;color:var(--osso)} .oab-sel span{display:block;margin-top:5px;font-size:.563rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:rgba(246,244,239,.5)} /* ------------------------------------------------- area reservada de foto -- */ /* Enquanto o arquivo nao chega, o lugar da fotografia fica DEMARCADO: moldura tracejada, cantoneiras e o nome do arquivo que falta. Assim que o arquivo aparece em ml-assets/, o onload marca data-com-foto e a moldura vira a foto — nenhuma linha de HTML precisa mudar. */ .quadro{position:relative;overflow:hidden;background:var(--linho); border:1px dashed rgba(1,37,70,.3);aspect-ratio:4/5} .quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none} .quadro[data-com-foto]{border-style:solid;border-color:rgba(1,37,70,.18);background:var(--azul-dp)} .quadro[data-com-foto] img{display:block} .quadro[data-com-foto] .quadro__aviso{display:none} .quadro__aviso{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;text-align:center;padding:26px} .quadro__aviso svg{width:min(34%,108px);height:auto} .quadro__aviso b{font-size:.688rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ouro-dp)} .quadro__aviso span{font-size:.813rem;line-height:1.7;color:#5b6572;max-width:30ch} .quadro__aviso code{display:inline-block;margin-top:4px;padding:4px 9px;border-radius:2px; background:rgba(1,37,70,.07);font-family:var(--sans);font-size:.688rem; letter-spacing:.04em;color:#4b5560} /* cantoneiras: o canto marcado e o que faz o espaco parecer reservado, e nao vazio */ .quadro::before,.quadro::after{content:"";position:absolute;width:26px;height:26px; border:2px solid var(--ouro);pointer-events:none;transition:opacity .4s var(--ease)} .quadro::before{top:12px;left:12px;border-right:0;border-bottom:0} .quadro::after{bottom:12px;right:12px;border-left:0;border-top:0} .quadro[data-com-foto]::before,.quadro[data-com-foto]::after{opacity:0} /* a marca dentro do quadro sai nas cores dela, como em todo lugar */ .hero .quadro{aspect-ratio:3/4;max-height:64vh;margin-inline:auto;width:100%; will-change:transform} /* ---------------------------------------------------- faixa de numeros -- */ /* A faixa estava solta: numero em cima, um vao, rotulo la embaixo. Agora e um bloco com ritmo proprio - numero, filete de ouro, rotulo - e cada casa reage ao mouse. O fio divisor vai de borda a borda, para as quatro casas lerem como um objeto so. */ .faixa{position:relative;padding-block:0;overflow:hidden; background: radial-gradient(52vw 120% at 12% 0%,rgba(10,59,107,.5),transparent 62%), radial-gradient(40vw 110% at 92% 100%,rgba(186,137,39,.12),transparent 64%), var(--azul-dp); border-block:1px solid rgba(224,180,92,.28)} .faixa .wrap{padding-inline:0} .faixa__grade{display:grid;grid-template-columns:repeat(4,1fr)} .faixa__item{position:relative;display:flex;flex-direction:column; padding:clamp(30px,3.6vw,46px) clamp(18px,2.6vw,34px); transition:background .45s var(--ease)} .faixa__item:hover{background:rgba(246,244,239,.035)} .faixa__item+.faixa__item::before{content:"";position:absolute;left:0;top:0;bottom:0; width:1px;background:var(--fio)} /* margin-bottom de

e em: num numero de 42px isso virava 48px de vao, e era exatamente o que fazia a faixa parecer solta */ /* A casa de palavra usa corpo menor que a de numero. Sem uma altura minima comum, a linha de texto mais baixa puxava o filete de ouro para cima e os quatro filetes da fileira deixavam de se alinhar — e e justamente o filete que o olho usa de regua aqui. A altura minima e o corpo do numeral; como nenhuma das palavras tem descida, encostar tudo embaixo alinha as bases. */ .faixa__n{margin:0;display:flex;align-items:flex-end;gap:9px;font-family:var(--serif); font-size:clamp(1.9rem,2.9vw,2.7rem);font-weight:600;line-height:1;color:var(--tx); min-height:clamp(1.9rem,2.9vw,2.7rem); font-variant-numeric:lining-nums tabular-nums} /* casa de PALAVRA, não de número: corpo menor, para as quatro casas da fileira terem o mesmo peso visual */ .faixa__n--txt{font-size:clamp(1.28rem,1.85vw,1.72rem);letter-spacing:-.008em} .faixa__n em{font-family:var(--sans);font-style:normal;font-size:.813rem;font-weight:500; letter-spacing:.02em;color:var(--ac)} .faixa__fio{display:block;width:34px;height:2px;margin:clamp(16px,1.8vw,22px) 0 clamp(13px,1.5vw,17px); background:var(--ouro);transform-origin:left;transform:scaleX(.5); transition:transform .5s var(--ease-out)} .faixa__item:hover .faixa__fio{transform:scaleX(1.8)} .faixa__t{margin:0;font-size:.688rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--rot)} /* -------------------------------------------------------------- sobre -- */ .sobre__grade{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr); gap:clamp(30px,4vw,60px);align-items:start} /* a fotografia inteira atravessa as duas colunas: no recorte vertical nao dava para ver o que ele esta fazendo */ .sobre__banda,.metodo__banda{grid-column:1/-1;position:relative;margin:0 0 clamp(30px,4vw,52px); aspect-ratio:1000/430;overflow:hidden;background:var(--azul-dp); border:1px solid var(--fio)} .sobre__banda img,.metodo__banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 38%} .sobre__banda figcaption,.metodo__banda figcaption{position:absolute;left:0;right:0;bottom:0; padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,28px); background:linear-gradient(0deg,rgba(1,24,46,.92),rgba(1,24,46,.4) 58%,transparent); display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px; font-size:.688rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(246,244,239,.92)} .sobre__banda figcaption i,.metodo__banda figcaption i{font-style:normal;font-weight:500;letter-spacing:.12em; color:rgba(246,244,239,.62)} /* A foto da seção 04 tem o assunto na metade de BAIXO do quadro: os autos abertos, a balança e o busto. Recortada na proporção da banda da seção 02 (1000/430) ela perdia exatamente isso e virava um retrato de perfil. Então aparece inteira, na própria proporção, e estreitada para não dominar a seção — que é de texto. */ .metodo__banda{aspect-ratio:1000/666;max-width:880px;margin-inline:auto} .metodo__banda img{object-position:50% 50%} .sobre__corpo p{color:var(--tx2)} .sobre__corpo p strong{color:var(--tx);font-weight:600} .retrato{position:sticky;top:calc(var(--cab-h) + 22px)} .retrato .quadro{aspect-ratio:4/5} .retrato__tarja{margin-top:14px;display:flex;align-items:center;gap:10px; font-size:.688rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--rot)} .retrato__tarja::before{content:"";width:22px;height:1px;background:var(--ouro);flex:none} .assinatura{margin:clamp(26px,3.2vw,36px) 0 0;display:flex;flex-direction:column; align-items:flex-start;gap:8px;max-width:330px} .assinatura span{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,1.5vw,1.35rem); letter-spacing:.01em;line-height:1} .assinatura hr{width:100%;height:2px;margin:0;border:0;background:var(--ouro)} .assinatura i{font-style:normal;font-size:.625rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--rot)} .dados{margin:clamp(26px,3.2vw,38px) 0 0;display:grid;grid-template-columns:auto 1fr; gap:0 clamp(18px,2.4vw,34px);border-top:1px solid var(--fio)} .dados dt{padding:15px 0;font-size:.625rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--rot);border-bottom:1px solid var(--fio2)} .dados dd{margin:0;padding:15px 0;border-bottom:1px solid var(--fio2); font-size:.938rem;color:var(--tx)} .dados a,.endereco a{border-bottom:1px solid rgba(186,137,39,.55); transition:color .3s var(--ease)} .dados a:hover,.endereco a:hover{color:var(--ac)} /* ------------------------------------------------------------ atuacao -- */ .colunas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)} .coluna{position:relative;display:flex;flex-direction:column; padding:clamp(28px,3.4vw,44px) clamp(24px,2.8vw,40px) clamp(30px,3.6vw,46px); background:var(--osso);border:1px solid var(--fio);overflow:hidden; transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .5s var(--ease)} /* o fio de ouro na borda de cima cresce no hover, em vez de piscar cor */ .coluna::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px; background:var(--ouro);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--ease-out)} .coluna:hover::before{transform:scaleX(1)} .coluna:hover{transform:translateY(-5px);border-color:rgba(1,37,70,.26); box-shadow:0 26px 54px -34px rgba(1,37,70,.55)} .coluna__n{font-family:var(--serif);font-size:.875rem;font-weight:500;letter-spacing:.04em; color:var(--ac);margin-bottom:14px} .coluna h3{margin:0 0 14px;font-family:var(--serif);font-weight:600; font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.12;letter-spacing:-.015em} .coluna > p{color:var(--tx2);font-size:.965rem;margin-bottom:24px} .lista{list-style:none;margin:0;padding:0} .lista li{position:relative;padding:12px 0 12px 24px;font-size:.965rem;line-height:1.5; border-top:1px solid var(--fio2)} .lista li:first-child{border-top:0} .lista li::before{content:"";position:absolute;left:0;top:1.02em;width:10px;height:1px; background:var(--ouro)} .aviso-editar{margin-top:22px;padding:13px 15px;border-left:3px solid var(--ouro); background:rgba(186,137,39,.07);font-size:.813rem;line-height:1.6;color:var(--tx2)} .aviso-editar b{color:var(--ouro-dp);font-weight:600} .sup--azul .aviso-editar b,.sup--fundo .aviso-editar b{color:var(--ouro-hi)} /* ------------------------------------------------------------- metodo -- */ .repete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--fio);border:1px solid var(--fio)} .repete__item{position:relative;padding:clamp(28px,3.4vw,46px);background:var(--bg); transition:background .5s var(--ease)} .repete__item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--ouro);transform:scaleY(0);transform-origin:top; transition:transform .55s var(--ease-out)} .repete__item:hover::after{transform:scaleY(1)} .repete__item:hover{background:var(--vidro)} .repete__n{font-family:var(--serif);font-size:.938rem;font-weight:500;letter-spacing:.06em; color:var(--ac);font-variant-numeric:lining-nums} .repete__item h3{margin:14px 0 12px;font-family:var(--serif);font-weight:600; font-size:clamp(1.28rem,1.9vw,1.6rem);line-height:1.16;letter-spacing:-.015em} .repete__item p{color:var(--tx2);font-size:.965rem;margin-bottom:20px} .prova{margin:0;padding-top:18px;border-top:1px solid var(--fio2)} .prova q{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.5; color:var(--tx);quotes:"\201C" "\201D"} .prova cite{display:block;margin-top:10px;font-style:normal;font-size:.625rem;font-weight:600; letter-spacing:.17em;text-transform:uppercase;color:var(--rot)} /* ----------------------------------------------------------- podcasos -- */ .pod{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3.4vw,52px);align-items:center} .pod__caixa{position:relative;padding:clamp(30px,3.6vw,48px); background:var(--azul);color:var(--osso);overflow:hidden; --tx:var(--osso);--tx2:#c3cedb;--rot:#8fa0b4;--ac:var(--ouro-hi); --fio:rgba(246,244,239,.16);--fio2:rgba(246,244,239,.08)} .pod__caixa::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 80% at 84% 8%,rgba(186,137,39,.22),transparent 62%)} .pod__caixa > *{position:relative} .pod__caixa .micro{color:#8fa0b4} .pod__caixa .micro::before{background:var(--ouro-hi)} .citacao{margin:0;padding:0;font-family:var(--serif);font-weight:400; font-size:clamp(1.28rem,2vw,1.72rem);line-height:1.44;color:var(--osso)} .citacao::before{content:"\201C";display:block;font-family:var(--serif);font-size:3.4em; line-height:.72;color:var(--ouro-hi);opacity:.5;margin-bottom:-.16em} .citacao footer{margin-top:20px;font-family:var(--sans);font-size:.688rem;font-weight:600; letter-spacing:.17em;text-transform:uppercase;color:#8fa0b4} /* --------------------------------------------------------- avaliacoes -- */ .google{display:grid;grid-template-columns:auto 1px 1fr auto;align-items:center; gap:clamp(22px,3.4vw,52px);padding:clamp(28px,3.6vw,46px); background:var(--azul);color:var(--osso);overflow:hidden;position:relative; --tx:var(--osso);--tx2:#c3cedb;--rot:#8fa0b4;--ac:var(--ouro-hi); --fio:rgba(246,244,239,.16);--fio2:rgba(246,244,239,.08)} .google::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 120% at 12% 0%,rgba(186,137,39,.2),transparent 60%)} .google > *{position:relative} .google__risco{align-self:stretch;background:rgba(246,244,239,.18)} .google__nota{text-align:center} .google__num{display:block;font-family:var(--serif);font-weight:600;line-height:.9; font-size:clamp(2.8rem,5.2vw,4.2rem);color:var(--osso);font-variant-numeric:lining-nums} .estrelas{display:flex;gap:5px;margin-top:12px;justify-content:center} .estrelas svg{width:clamp(16px,2vw,21px);height:auto;color:var(--ouro-hi)} .google__txt b{display:flex;align-items:center;gap:11px;font-family:var(--serif); font-size:clamp(1.2rem,1.7vw,1.55rem);font-weight:600;letter-spacing:-.01em} .google__txt b svg{width:23px;height:23px;flex:none} .google__txt p{margin:10px 0 0;font-size:.938rem;color:#c3cedb;max-width:42ch} .google__acoes{display:flex;flex-direction:column;gap:11px} .google__acoes .btn{white-space:nowrap} .google__acoes .btn--ouro{color:var(--azul);background:var(--ouro-hi);border-color:var(--ouro-hi)} .google__acoes .btn--ouro::before{background:var(--osso)} .google__acoes .btn--vazio{color:var(--osso);border-color:rgba(246,244,239,.3)} .google__acoes .btn--vazio::before{background:var(--osso)} .google__acoes .btn--vazio:hover{color:var(--azul)} .notas{margin-top:clamp(28px,3.6vw,46px);columns:3;column-gap:clamp(16px,2vw,24px)} .nota{break-inside:avoid;margin:0 0 clamp(16px,2vw,24px);padding:clamp(22px,2.4vw,30px); background:var(--osso);border:1px solid var(--fio);position:relative;overflow:hidden; transition:transform .45s var(--ease-out),box-shadow .45s var(--ease)} .nota::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:var(--ouro);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease-out)} .nota:hover::before{transform:scaleX(1)} .nota:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(1,37,70,.5)} .nota__topo{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:15px} .nota .estrelas{margin:0} .nota .estrelas svg{width:13px;color:var(--ouro)} .nota__g{width:15px;height:15px;flex:none;opacity:.85} .nota blockquote{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.56; color:var(--tx)} .nota figcaption{margin-top:18px;padding-top:15px;border-top:1px solid var(--fio2); display:flex;align-items:center;gap:10px;font-size:.688rem;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--rot)} .nota figcaption i{font-style:normal;font-weight:400;letter-spacing:.09em;opacity:.7} /* ---------------------------------------------------------------- mapa -- */ /* Google Maps de verdade, em iframe, carregado so quando a secao chega perto (o src entra por JS) — assim ele nao custa requisicao de quem nunca desce. */ .mapa__grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,60px);align-items:stretch} .mapa__moldura{position:relative;min-height:clamp(320px,46vw,520px);overflow:hidden; background:var(--azul-dp);border:1px solid var(--fio)} .mapa__moldura iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mapa__carregando{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;gap:12px;font-size:.688rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:rgba(246,244,239,.5)} .mapa__lado{display:flex;flex-direction:column;justify-content:center} .endereco{margin:0 0 clamp(22px,2.8vw,32px);display:grid;grid-template-columns:auto 1fr; gap:0 clamp(16px,2.2vw,30px)} .endereco dt{padding:14px 0;font-size:.625rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--rot);border-top:1px solid var(--fio)} .endereco dd{margin:0;padding:14px 0;border-top:1px solid var(--fio); font-size:.938rem;line-height:1.6} /* -------------------------------------------------------------- forma -- */ .contato__grade{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(32px,4.6vw,70px);align-items:start} .forma{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)} .campo{display:flex;flex-direction:column;gap:9px;border:0;padding:0;margin:0;min-width:0} .campo > label,.campo > legend{display:flex;align-items:center;gap:9px;padding:0; font-size:.688rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rot)} .campo > label .num,.campo > legend .num{font-family:var(--serif);font-size:.875rem; color:var(--ac);font-weight:500} .campo input[type="text"],.campo textarea{width:100%;padding:14px 0;background:transparent; border:0;border-bottom:1px solid var(--fio);color:var(--tx);font-size:1.0625rem; transition:border-color .35s var(--ease)} .campo textarea{resize:vertical;min-height:90px;line-height:1.6} .campo input::placeholder,.campo textarea::placeholder{color:var(--rot);opacity:.72} .campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--ouro)} .fichas{display:flex;flex-wrap:wrap;gap:9px} .ficha{position:relative} .ficha input{position:absolute;opacity:0;width:1px;height:1px} .ficha span{display:block;padding:11px 18px;border:1px solid var(--fio);border-radius:2px; font-size:.813rem;cursor:pointer;transition:all .3s var(--ease);user-select:none} .ficha span:hover{border-color:rgba(186,137,39,.65)} .ficha input:checked+span{color:#fff;background:var(--azul);border-color:var(--azul);font-weight:500} .ficha input:focus-visible+span{outline:2px solid var(--ouro);outline-offset:3px} .forma__pe{display:flex;flex-direction:column;gap:14px;margin-top:6px} .forma__pe .btn{width:100%;padding-block:19px} .forma__nota{font-size:.813rem;line-height:1.6;color:var(--rot)} .forma__nota a{border-bottom:1px solid rgba(186,137,39,.55)} /* ---------------------------------------------------------------- faq -- */ .faq{max-width:900px;margin-inline:auto} .faq details{border-top:1px solid var(--fio)} .faq details:last-of-type{border-bottom:1px solid var(--fio)} .faq summary{display:flex;align-items:center;gap:18px;padding:clamp(20px,2.4vw,28px) 0; cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600; font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.3;letter-spacing:-.012em; transition:color .3s var(--ease)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--ac)} .faq summary i{position:relative;width:13px;height:13px;margin-left:auto;flex:none} .faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--rot); transition:transform .4s var(--ease-out),background .3s var(--ease)} .faq summary i::before{left:0;right:0;top:6px;height:1px} .faq summary i::after{top:0;bottom:0;left:6px;width:1px} .faq summary:hover i::before,.faq summary:hover i::after{background:var(--ac)} .faq details[open] summary i::after{transform:scaleY(0)} .faq__corpo{padding:0 31px clamp(22px,2.6vw,30px) 0;color:var(--tx2);font-size:.965rem} .faq__corpo a{border-bottom:1px solid rgba(186,137,39,.55)} /* -------------------------------------------------------------- fecho -- */ /* Secao CLARA para a marca poder aparecer nas cores dela, grande. */ .fecho{text-align:center;padding-block:clamp(76px,9vw,124px)} .fecho .micro{justify-content:center} .fecho__marca{width:min(56vw,250px);margin:0 auto clamp(28px,3.4vw,40px)} .fecho .d2{margin-bottom:clamp(20px,2.4vw,28px)} .fecho .olho{margin:0 auto clamp(28px,3.4vw,40px)} .fecho__acoes{display:flex;flex-wrap:wrap;gap:13px;justify-content:center} .rodape{padding-block:clamp(46px,5vw,66px) clamp(26px,3vw,36px)} .rodape__grade{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,56px); margin-bottom:clamp(34px,4vw,52px)} /* a marca no rodape ganha CARTELA CLARA: fundo escuro nao muda a cor dela */ .cartela{display:inline-flex;align-items:center;gap:13px;padding:13px 18px; background:var(--osso);border-radius:2px;margin-bottom:20px} .cartela .marca__col{width:34px} .cartela .marca__risco{background:rgba(1,37,70,.2)} .cartela .marca__nome b{color:var(--azul)} .cartela .marca__nome i{color:var(--ouro-dp)} .rodape h4{margin:0 0 16px;font-size:.625rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:#8fa0b4} .rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .rodape a{font-size:.875rem;color:#c3cedb;transition:color .3s var(--ease)} .rodape ul a{display:inline-block;padding-block:3px} .rodape a:hover{color:var(--ouro-hi)} .rodape__txt{font-size:.875rem;line-height:1.75;color:#b7c3d2} .rodape__txt a{border-bottom:1px solid rgba(224,180,92,.4)} .rodape__base{padding-top:clamp(20px,2.6vw,28px);border-top:1px solid rgba(246,244,239,.1); display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center; font-size:.75rem;color:#8fa0b4} .rodape__base p{margin:0} .selo-oab{display:inline-flex;align-items:center;gap:10px;padding:9px 15px; border:1px solid rgba(246,244,239,.18);border-radius:2px; font-size:.688rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#c3cedb} /* --------------------------------------------------------- whats fixo -- */ .wa-fixo{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:70; display:flex;align-items:center;justify-content:center;width:56px;height:56px; border-radius:50%;background:var(--wa);color:#04220f; box-shadow:0 14px 34px -12px rgba(37,211,102,.7); transform:translateY(90px) scale(.9);opacity:0;pointer-events:none; transition:transform .55s var(--ease-out),opacity .45s var(--ease),background .3s var(--ease)} .wa-fixo[data-ve]{transform:none;opacity:1;pointer-events:auto} .wa-fixo:hover{background:#3ee07d} .wa-fixo svg{width:29px;height:29px} /* ==================================================== telas menores == */ @media (max-width:1180px){ .notas{columns:2} } @media (max-width:1240px){ .nav,.cabecalho__acao .btn{display:none} .sanduiche{display:flex} } @media (max-width:1024px){ .sobre__grade,.contato__grade,.mapa__grade,.pod{grid-template-columns:1fr} .pod__dizer{max-width:none} .retrato{position:static} .retrato .quadro{max-width:440px} .hero__grade{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)} .hero{padding-block:calc(var(--cab-h) + 34px) clamp(92px,12vh,120px);align-items:flex-start} .hero .quadro{max-height:none;aspect-ratio:16/10;max-width:none} .google{grid-template-columns:auto 1px 1fr;gap:clamp(18px,3vw,34px)} .google__acoes{grid-column:1/-1;flex-direction:row;flex-wrap:wrap} .faixa__grade{grid-template-columns:repeat(2,1fr);row-gap:26px} .faixa__item:nth-child(odd){padding-left:0} .faixa__item:nth-child(even){padding-right:0} .faixa__item:nth-child(3)::before,.faixa__item:nth-child(4)::before{display:none} .faixa__item:nth-child(3),.faixa__item:nth-child(4){padding-top:24px;border-top:1px solid var(--fio)} } @media (max-width:940px){ :root{--cab-h:74px} .cabecalho.solido{height:64px} .repete{grid-template-columns:1fr} } @media (max-width:760px){ .notas{columns:1} .colunas{grid-template-columns:1fr} .hero{min-height:auto;padding-bottom:clamp(96px,14vh,126px)} .hero .quadro{aspect-ratio:4/3} .hero__acoes .btn{flex:1 1 100%} .faixa__grade{grid-template-columns:1fr;row-gap:0} /* o !important daqui zerava o respiro lateral e colava o numero na borda */ .faixa__item::before{display:none!important} .faixa__item+.faixa__item{border-top:1px solid var(--fio)} .google{grid-template-columns:1fr;text-align:center;gap:22px} .google__risco{display:none} .google__txt b{justify-content:center} .google__txt p{margin-inline:auto} .google__acoes{flex-direction:column} .google__acoes .btn{width:100%} .dados,.endereco{grid-template-columns:1fr;gap:0} .dados dt{padding-bottom:0;border-bottom:0} .dados dd{padding-top:5px} .endereco dt{padding-bottom:0} .endereco dd{padding-top:5px;border-top:0} .rodape__grade{grid-template-columns:1fr;gap:32px} .cab-secao{flex-wrap:wrap;gap:12px} .cab-secao__fio{order:3;flex-basis:100%;flex-grow:0} .numeral{font-size:clamp(5rem,26vw,9rem);opacity:.06} .fecho__acoes .btn{flex:1 1 100%} .mapa__moldura{min-height:300px} } @media (max-width:420px){ .btn{padding:16px 20px;font-size:.688rem;letter-spacing:.12em} .quadro__aviso span{font-size:.75rem} } @media print{ .abertura,.cabecalho,.gaveta,.wa-fixo,.hero__pe,.explore,.progresso{display:none!important} .sup--azul,.sup--fundo,.hero,.pod__caixa,.google{background:#fff!important;color:#000!important} .secao{padding-block:24px;page-break-inside:avoid} } /* ===================================================================== * * O PORTAL * * * * Palavra do proprio Dr. Marcio: "pro cliente acessar as etapas como * * se fosse um portal, abrindo uma porta". Entao existe uma porta de * * verdade — duas folhas que abrem em 3D, com a luz de dentro passando * * pela fresta — e ela leva para /acompanhamento/index.html. * * * * Feita so com retangulo, gradiente e rotateY: nenhum desenho vetorial.* * E o nome nao e por acaso: em arquitetura, PORTAL e o vao monumental * * entre colunas. A marca do escritorio e uma coluna. * * ===================================================================== */ .porta{position:relative;display:block;width:100%;aspect-ratio:3/4;max-width:372px; margin-inline:auto;perspective:1600px;perspective-origin:50% 45%; background:var(--azul-dp);border:1px solid rgba(224,180,92,.4);cursor:pointer; overflow:hidden;-webkit-tap-highlight-color:transparent} /* a soleira e a verga: dois fios de ouro que fecham o vao */ .porta::before,.porta::after{content:"";position:absolute;left:-1px;right:-1px;height:3px; background:var(--ouro);z-index:4} .porta::before{top:-1px} .porta::after{bottom:-1px} .porta__vao{position:absolute;inset:0;z-index:0;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; text-align:center;padding:30px; background: radial-gradient(96% 62% at 50% 50%,rgba(224,180,92,.4),rgba(224,180,92,.12) 62%,transparent 86%), linear-gradient(180deg,#0a3a6b,#02305c 54%,#01182e 100%)} /* em coluna com align-items:center o filho fica fit-content: um titulo longo passava da largura do vao e era cortado dos dois lados pelo overflow. max-width:100% e o que o prende. */ /* Dentro do vao cabe pouco: com as folhas abertas sobra so o terco do meio. Entao ali vai apenas o chamado curto, e o nome da Central fica EMBAIXO da porta, como legenda. Titulo comprido dentro do vao era cortado nas pontas pelas folhas, que em 3D pintam por cima independente de z-index. */ .porta__vao b{max-width:46%;font-family:var(--serif);font-weight:600;color:var(--ouro-hi); font-size:clamp(.94rem,1.25vw,1.12rem);line-height:1.2;letter-spacing:.16em; text-transform:uppercase;text-shadow:0 2px 16px rgba(1,18,34,.9); transform:translateY(12px);opacity:0; transition:transform .7s var(--ease-out) .15s,opacity .7s var(--ease) .15s} .porta__vao span{max-width:84%;font-size:.625rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:rgba(246,244,239,.72); transform:translateY(12px);opacity:0; transition:transform .7s var(--ease-out) .24s,opacity .7s var(--ease) .24s} .porta:hover .porta__vao b,.porta:focus-visible .porta__vao b, .porta:hover .porta__vao span,.porta:focus-visible .porta__vao span, .porta[data-aberta] .porta__vao b,.porta[data-aberta] .porta__vao span{transform:none;opacity:1} .porta__folha{position:absolute;top:0;bottom:0;width:50.4%;z-index:2; background:linear-gradient(180deg,#0b3462,#012546 62%,#01213f); transition:transform .95s var(--ease-out); will-change:transform} /* a sombra projetada mora aqui: opacidade e compositada, box-shadow nao */ .porta__folha::after,.porta__folha::before{pointer-events:none} .porta__sombra{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; transition:opacity .95s var(--ease)} .porta__sombra--e{box-shadow:26px 0 46px -20px rgba(0,0,0,.7)} .porta__sombra--d{box-shadow:-26px 0 46px -20px rgba(0,0,0,.7)} .porta:hover .porta__sombra,.porta:focus-visible .porta__sombra, .porta[data-aberta] .porta__sombra{opacity:1} /* almofada da folha: o retangulo interno que todo portao de madeira tem */ .porta__folha::before{content:"";position:absolute;inset:16px; border:1px solid rgba(224,180,92,.34)} /* maçaneta */ .porta__folha::after{content:"";position:absolute;top:50%;width:8px;height:8px; border-radius:50%;background:var(--ouro-hi);box-shadow:0 0 0 3px rgba(224,180,92,.2)} .porta__folha--e{left:0;transform-origin:left center} .porta__folha--e::after{right:13px;translate:0 -50%} .porta__folha--d{right:0;transform-origin:right center} .porta__folha--d::after{left:13px;translate:0 -50%} .porta:hover .porta__folha--e,.porta:focus-visible .porta__folha--e, .porta[data-aberta] .porta__folha--e{ transform:rotateY(-74deg)} .porta:hover .porta__folha--d,.porta:focus-visible .porta__folha--d, .porta[data-aberta] .porta__folha--d{ transform:rotateY(74deg)} /* a luz que escapa pela fresta antes de a porta abrir */ .porta__fresta{position:absolute;top:0;bottom:0;left:50%;width:3px;z-index:3; translate:-50% 0;background:linear-gradient(180deg,transparent,var(--ouro-hi) 22%,var(--ouro-hi) 78%,transparent); opacity:.85;transition:opacity .5s var(--ease)} .porta:hover .porta__fresta,.porta:focus-visible .porta__fresta, .porta[data-aberta] .porta__fresta{opacity:0} .porta__nome{margin:clamp(16px,2vw,22px) 0 0;text-align:center;font-family:var(--serif); font-weight:600;font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.24; letter-spacing:-.012em;color:var(--tx)} .porta__rotulo{margin:8px 0 0;text-align:center; font-size:.625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--rot)} @media (prefers-reduced-motion:reduce){ /* sem movimento, a porta aparece aberta e o filete de luz some: e o estado final, so que sem o giro. */ .porta__folha--e{transform:rotateY(-74deg)} .porta__folha--d{transform:rotateY(74deg)} .porta__sombra{opacity:1} .porta__fresta{opacity:0} .porta__vao b,.porta__vao span{transform:none;opacity:1} } /* ----------------------------------------------- chamada do portal -- */ .chamada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(34px,5vw,78px);align-items:center} /* ------------------------------------------------------------ marcos -- */ .marcos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--fio);border:1px solid var(--fio)} .marco{position:relative;padding:clamp(24px,2.8vw,36px);background:var(--bg); transition:background .5s var(--ease)} .marco::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--ouro);transform:scaleY(0);transform-origin:top; transition:transform .55s var(--ease-out)} .marco:hover::after{transform:scaleY(1)} .marco:hover{background:var(--vidro)} .marco__n{font-family:var(--serif);font-size:.813rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--ac)} .marco h3{margin:12px 0 10px;font-family:var(--serif);font-weight:600; font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.2;letter-spacing:-.012em} .marco p{margin:0;font-size:.938rem;color:var(--tx2)} /* ------------------------------------------------------------- fases -- */ /* A trilha legal: quatro etapas ligadas por um fio que se desenha. */ .fases{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px)} .fases::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px; background:var(--fio)} .js .fases::after{content:"";position:absolute;left:0;top:19px;height:1px;width:100%; background:var(--ouro);transform:scaleX(0);transform-origin:left; transition:transform 1.6s var(--ease-out) .2s} .js .vis.fases::after{transform:scaleX(1)} .fase{position:relative;padding-top:52px} .fase__bola{position:absolute;top:11px;left:0;width:17px;height:17px;border-radius:50%; background:var(--bg);border:2px solid var(--ouro);z-index:1; transition:transform .5s var(--ease-out),background .5s var(--ease)} .fase:hover .fase__bola{transform:scale(1.25);background:var(--ouro)} .fase__n{font-family:var(--serif);font-size:.813rem;font-weight:500;letter-spacing:.1em; color:var(--ac)} .fase h3{margin:9px 0 10px;font-family:var(--serif);font-weight:600; font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.2;letter-spacing:-.012em} .fase p{margin:0 0 16px;font-size:.938rem;color:var(--tx2)} .etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none} .etiquetas li{padding:5px 10px;border:1px solid var(--fio);border-radius:2px; font-size:.688rem;font-weight:500;letter-spacing:.04em;color:var(--rot)} /* --------------------------------------------------------- glossario -- */ .glossario{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px)} .termo{padding:clamp(22px,2.6vw,30px);background:var(--bg);border:1px solid var(--fio); border-left:3px solid var(--ouro)} .termo dt{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.3; margin-bottom:10px} .termo dd{margin:0;font-size:.938rem;color:var(--tx2)} /* -------------------------------------------------------- orientador -- */ /* "O que significa o ultimo andamento?" — o cliente escolhe a expressao que viu no site do tribunal e o painel diz o que e e o que fazer. */ .orientador{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(22px,3vw,44px);align-items:start} .orientador__lista{display:flex;flex-direction:column;gap:8px} .orientador__lista button{display:flex;align-items:center;gap:12px;width:100%; padding:15px 18px;text-align:left;cursor:pointer; background:var(--bg);border:1px solid var(--fio);border-radius:2px; font-size:.938rem;line-height:1.4;color:var(--tx); transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-out)} .orientador__lista button::before{content:"";width:8px;height:8px;border-radius:50%;flex:none; border:1.5px solid var(--rot);transition:all .3s var(--ease)} .orientador__lista button:hover{border-color:rgba(186,137,39,.6);transform:translateX(3px)} .orientador__lista button[aria-selected="true"]{background:var(--vidro); border-color:var(--ouro);font-weight:500} .orientador__lista button[aria-selected="true"]::before{background:var(--ouro); border-color:var(--ouro);box-shadow:0 0 0 3px rgba(186,137,39,.22)} .painel{padding:clamp(24px,3vw,38px);background:var(--bg);border:1px solid var(--fio); border-top:3px solid var(--ouro);min-height:100%} .painel[hidden]{display:none} .painel__estado{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px; padding:7px 13px;border-radius:2px;background:rgba(186,137,39,.12); font-size:.688rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ouro-dp)} .sup--azul .painel__estado,.sup--fundo .painel__estado{background:rgba(224,180,92,.16); color:var(--ouro-hi)} .painel__estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .painel h3{margin:0 0 14px;font-family:var(--serif);font-weight:600; font-size:clamp(1.2rem,1.7vw,1.44rem);line-height:1.22;letter-spacing:-.012em} .painel dl{margin:0;display:grid;gap:0} .painel dt{padding-top:16px;font-size:.625rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--rot);border-top:1px solid var(--fio2)} .painel dt:first-child{padding-top:0;border-top:0} .painel dd{margin:6px 0 16px;font-size:.965rem;color:var(--tx2)} .painel dd:last-child{margin-bottom:0} /* -------------------------------------------------- regra e tribunais -- */ .regra{position:relative;padding:clamp(28px,3.6vw,46px);overflow:hidden; background:var(--azul);color:var(--osso); --tx:var(--osso);--tx2:#c3cedb;--rot:#8fa0b4;--ac:var(--ouro-hi); --fio:rgba(246,244,239,.16);--fio2:rgba(246,244,239,.08)} .regra::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 90% at 88% 0%,rgba(186,137,39,.24),transparent 62%)} .regra > *{position:relative} .regra h3{margin:0 0 14px;font-family:var(--serif);font-weight:600; font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.2;letter-spacing:-.014em} .regra p{margin:0;color:#c3cedb;max-width:66ch} .regra .micro{color:#8fa0b4} .regra .micro::before{background:var(--ouro-hi)} .cortes{display:grid;gap:0;margin:0} .corte{display:grid;grid-template-columns:auto 1fr;gap:4px clamp(16px,2.2vw,28px); padding:18px 0;border-top:1px solid var(--fio)} .corte:first-child{border-top:0;padding-top:0} .corte b{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--tx); white-space:nowrap} .corte span{font-size:.938rem;color:var(--tx2);grid-column:1/-1} /* ------------------------------------------------------ atalho topo -- */ .trilha{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px; font-size:.688rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--rot)} .trilha a{color:var(--ac);border-bottom:1px solid transparent;transition:border-color .3s} .trilha a:hover{border-bottom-color:currentColor} .trilha span{opacity:.5} @media (max-width:1024px){ .chamada,.orientador{grid-template-columns:1fr} .marcos{grid-template-columns:repeat(2,minmax(0,1fr))} .glossario{grid-template-columns:1fr} .fases{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,40px) clamp(16px,2.2vw,28px)} .fases::before,.js .fases::after{display:none} .fase{padding-top:0;padding-left:34px} .fase__bola{top:4px} } @media (max-width:760px){ .marcos{grid-template-columns:1fr} .fases{grid-template-columns:1fr} .porta{max-width:320px} .corte b{white-space:normal} } /* tres areas, nao mais duas */ .colunas--3{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){ .colunas--3{grid-template-columns:1fr} } /* a ficha de dados do escritorio, no lugar onde antes ficava o retrato */ .ficha{position:sticky;top:calc(var(--cab-h) + 22px)} .ficha .dados{margin-top:0;border-top:2px solid var(--ouro)} @media (max-width:1024px){ .ficha{position:static} } /* a Central tem hero mais baixo: nao ha foto nem porta, so o assunto */ .hero--central{min-height:auto;padding-block:calc(var(--cab-h) + clamp(56px,8vh,92px)) clamp(104px,14vh,150px)} @media (max-width:760px){ .hero--central{padding-bottom:clamp(96px,14vh,126px)} } /* botao primario dentro de superficie escura: azul sobre azul some. Mesma correcao do painel do Google. */ .hero .btn--ouro,.sup--azul .btn--ouro,.sup--fundo .btn--ouro{ color:var(--azul);background:var(--ouro-hi);border-color:var(--ouro-hi)} .hero .btn--ouro::before,.sup--azul .btn--ouro::before,.sup--fundo .btn--ouro::before{ background:var(--osso)} /* o "comece por aqui" e mais longo que o "explore": nao pode quebrar */ .explore span{white-space:nowrap} @media (max-width:420px){ .explore span{font-size:.563rem;letter-spacing:.2em} } /* ===================================================================== * * SIMETRIA * * * * Pedido do Dr. Marcio: nada de linha grande seguida de linha pequena, * * e texto justificado para a informacao nao ficar solta na pagina. * * Aqui isso vira sistema: * * · todo paragrafo corrido e JUSTIFICADO, com hifenizacao pt-BR * * ligada — sem hifen, justificar em coluna estreita abre rios; * * · todo cartao em grade tem a mesma altura da fileira, e o rodape * * de cada um e empurrado para baixo, para as assinaturas se * * alinharem entre si; * * · a parede de avaliacoes deixou de ser alvenaria (columns) e virou * * GRADE 4x2 — alvenaria e bonita e assimetrica por definicao. * * ===================================================================== */ .olho, /* JUSTIFICADO — so onde a medida comporta. Justificar e esticar os espacos ate a linha bater na margem direita. Com ~60 caracteres por linha isso e imperceptivel; com 40, o navegador estica tanto cada espaco que aparecem os "rios" — as faixas brancas descendo pelo paragrafo. Medi o site inteiro: estes tem medida larga e justificam limpo. Os estreitos foram para a bandeira, logo abaixo. */ .sobre__corpo p, .faq__corpo p, .regra p, .pod p, .consulta__intro, .consulta__nota, .nt__destaque p, .mt__texto p, .mt__fecho p, .nt__nota, .tribuna__nota, .tribuna__ep-txt p, .tribuna__oferta-txt p{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto} /* BANDEIRA — coluna estreita. O site ja dizia isto para a citacao: "justificar fala curta deixa buraco entre palavra e palavra". Vale igual para os cartoes de tres colunas, as fases, os marcos e as fichas — medi todos entre 36 e 51 caracteres por linha. O hifen fica: ele ainda ajuda a igualar o comprimento das linhas. */ .coluna > p, .coluna .lista li, .repete__item > p, /* estes seis vivem em colunas de 351 a 605px — nao da para alargar sem mexer no layout aprovado, entao vao para a bandeira junto com os demais */ .google__txt p, .mapa__lado p.olho, .contato__lado .olho, /* .pod p (0,1,1) ganhava de .pod__gal-tit (0,1,0): precisa do ancestral */ .pod .pod__gal-tit, .aviso-editar, #andamento .olho, .marco p, .fase p, .painel dd, .termo dd, .nt__item p, .etapa p{ text-align:left; hyphens:auto; -webkit-hyphens:auto} /* a citacao e o depoimento ficam em bandeira: justificar fala curta deixa buraco entre palavra e palavra */ .citacao,.prova q,.nota blockquote{text-align:left;hyphens:auto} /* cartoes: mesma altura na fileira e rodape alinhado */ .coluna,.marco,.repete__item,.fase,.termo,.nota{display:flex;flex-direction:column} .coluna .lista,.repete__item .prova{margin-top:auto} .coluna .aviso-editar{margin-top:22px} .fase .etiquetas{margin-top:auto;padding-top:14px} .nota blockquote{flex:1} .nota figcaption{margin-top:auto} /* ------------------------------------------------- avaliacoes em grade -- */ .notas{margin-top:clamp(28px,3.6vw,46px);display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,22px)} .nota{margin:0} @media (max-width:1180px){ .notas{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .notas{grid-template-columns:1fr} } /* ------------------------------------------------------- hero com foto -- */ /* Composicao definida pelo cliente: retrato a esquerda em altura cheia, e o bloco de texto encostado embaixo, a direita. */ .hero__grade{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,72px);align-items:end} /* Moldura de verdade: fio de ouro por fora, passe-partout escuro, fio de ouro por dentro e a fotografia. A sombra projetada e o que faz a moldura parecer pendurada na parede, e nao colada na tela. */ .hero__retrato{position:relative;margin:0;align-self:center;width:100%; max-width:clamp(280px,34vw,420px);margin-inline:auto;padding:clamp(10px,1.1vw,15px); background:linear-gradient(158deg,rgba(246,244,239,.1),rgba(246,244,239,.028) 56%, rgba(246,244,239,.06)); border:1px solid rgba(224,180,92,.45); box-shadow:0 46px 90px -44px rgba(0,0,0,.8), 0 0 0 1px rgba(1,18,34,.5), inset 0 1px 0 rgba(246,244,239,.1)} .hero__retrato .moldura{position:relative;aspect-ratio:690/1032;overflow:hidden; border:1px solid rgba(224,180,92,.34);background:var(--azul-dp)} .hero__retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 12%} .hero__retrato figcaption{margin-top:clamp(10px,1.2vw,14px);text-align:center; font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(246,244,239,.55)} .hero__grade .hero__texto{text-align:right;padding-bottom:clamp(4px,2vh,22px);margin-left:auto} .hero__grade .hero__texto .micro{flex-direction:row-reverse;justify-content:flex-start} .hero__grade .hero__texto .hero__olho{margin-left:auto;max-width:46ch} .hero__grade .hero__texto .hero__acoes{justify-content:flex-end} /* a coluna inteira e alinhada a direita; dentro do bloco de noticias o texto volta a correr da esquerda, senao as manchetes ficam ilegiveis */ .hero__grade .hero__texto .hero__news{text-align:left;margin-left:auto; max-width:46ch} .hero__grade .hero__titulo{margin-left:auto} /* ------------------------------------------------- a chamada da porta -- */ /* A porta vai ao centro e o que ha atras dela passa como carrossel. */ .chamada--centro{text-align:center;display:block;max-width:820px;margin-inline:auto} .chamada--centro .micro{justify-content:center} .chamada--centro .olho{margin-inline:auto;text-align:justify;hyphens:auto} .chamada--centro > p{text-align:center} .chamada--centro .porta{margin-block:clamp(30px,4vw,46px) 0} .abas{margin:clamp(46px,5vw,62px) auto 0;max-width:620px} .abas__palco{position:relative;min-height:116px} .abas__item{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:9px; opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .65s var(--ease),transform .65s var(--ease-out)} .abas__item[data-ativa]{opacity:1;transform:none;pointer-events:auto} .abas__item b{font-family:var(--serif);font-weight:600; font-size:clamp(1.12rem,1.6vw,1.36rem);line-height:1.24;letter-spacing:-.012em} .abas__item span{font-size:.938rem;color:var(--tx2);max-width:46ch} .abas__item i{font-style:normal;font-size:.688rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ac)} .abas__pontos{display:flex;justify-content:center;gap:10px;margin-top:30px} /* a barra visivel tem 3px, mas o alvo de toque tem 26px de altura */ .abas__pontos button{width:38px;height:26px;padding:0;border:0;background:none; cursor:pointer;position:relative} .abas__pontos button::before,.abas__pontos button::after{content:"";position:absolute; left:0;right:0;top:50%;height:3px;translate:0 -50%;border-radius:2px} .abas__pontos button::before{background:var(--fio);transition:background .3s var(--ease)} .abas__pontos button:hover::before{background:rgba(186,137,39,.5)} .abas__pontos button[aria-selected="true"]::before{background:rgba(186,137,39,.28)} .abas__pontos button::after{background:var(--ouro);transform:scaleX(0);transform-origin:left} .abas__pontos button[aria-selected="true"]::after{ animation:corre-aba var(--t,5s) linear forwards} @keyframes corre-aba{from{transform:scaleX(0)}to{transform:scaleX(1)}} .abas[data-parada] .abas__pontos button[aria-selected="true"]::after{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .abas__palco{min-height:0} .abas__item{position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:20px} .abas__pontos{display:none} } /* ------------------------------------------- etapa 01 da Central -------- */ /* "Primeiro importante saber o Tribunal e a Instancia": e a primeira coisa que o cliente ve depois de abrir a porta. */ .etapa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--fio);border:1px solid var(--fio)} .etapa--4{grid-template-columns:repeat(4,minmax(0,1fr))} .ramo{position:relative;display:flex;flex-direction:column; padding:clamp(24px,2.8vw,34px);background:var(--bg); transition:background .5s var(--ease)} .ramo::after{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:var(--ouro);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--ease-out)} .ramo:hover::after{transform:scaleX(1)} .ramo:hover{background:var(--vidro)} .ramo b{display:block;font-family:var(--serif);font-weight:600; font-size:clamp(1.05rem,1.45vw,1.24rem);line-height:1.2;margin-bottom:10px} .ramo span{font-size:.906rem;line-height:1.6;color:var(--tx2);hyphens:auto} .ramo em{margin-top:auto;padding-top:14px;font-style:normal;font-size:.625rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--rot)} .embreve{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(24px,3vw,32px); padding:11px 16px;border:1px dashed rgba(186,137,39,.55);border-radius:2px; font-size:.75rem;line-height:1.5;color:var(--tx2)} .embreve b{font-weight:600;color:var(--ac);white-space:nowrap} .sup--azul .embreve,.sup--fundo .embreve{border-color:rgba(224,180,92,.5)} /* --------------------------------------------------------- podcasos ---- */ /* A faixa do PodCasos. Antes era um painel vertical com a foto dentro, e em duotone azul cheio: lido de longe virava um cubo azul. Agora e FAIXA — horizontal, na largura do conteudo, com a fotografia em preto e branco e o veu de azul saindo da esquerda, so onde o texto assenta. A foto volta a ler como fotografia. */ .pod__faixa{grid-column:1/-1;position:relative;margin:clamp(34px,4vw,52px) 0 0; aspect-ratio:1000/330;min-height:260px;overflow:hidden;background:var(--azul-dp); border:1px solid var(--fio); --tx:var(--osso);--tx2:#c3cedb;--rot:#8fa0b4;--ac:var(--ouro-hi)} .pod__faixa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:56% 44%} /* veu NEUTRO, nao azul: o cliente pediu a cor original da fotografia. O azul so aparece na borda e no fundo da caixa, nao por cima da imagem. */ .pod__faixa::after{content:"";position:absolute;inset:0; background:linear-gradient(94deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,.84) 34%, rgba(10,10,12,.44) 62%,rgba(10,10,12,.14) 100%)} .pod__dizer{position:relative;z-index:1;height:100%;display:flex;flex-direction:column; justify-content:center;gap:clamp(12px,1.4vw,18px); max-width:min(62%,620px);padding:clamp(26px,3.2vw,44px)} .pod__slogan{margin:0;display:flex;align-items:center;gap:12px; font-size:.688rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ouro-hi)} .pod__slogan::before{content:"";width:26px;height:1px;background:currentColor;flex:none} .pod__frase{margin:0;font-family:var(--serif);font-weight:400; font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.42;color:var(--osso); hyphens:auto} .pod__frase footer{margin-top:14px;font-family:var(--sans);font-size:.688rem; font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#8fa0b4} /* a marca do PodCasos e preta: cartela clara propria, nunca invertida */ .pod__marca{display:inline-flex;padding:14px 18px;background:var(--osso);border-radius:2px; box-shadow:0 20px 44px -28px rgba(1,24,46,.5)} .pod__marca img{width:min(40vw,150px);height:auto} /* --------------------------------------------- banda de foto larga ----- */ .banda{position:relative;width:100%;aspect-ratio:1000/430;overflow:hidden; background:var(--azul-dp);border:1px solid var(--fio)} .banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .banda figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 22px; background:linear-gradient(0deg,rgba(1,24,46,.9),transparent); font-size:.688rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:rgba(246,244,239,.8)} @media (max-width:1024px){ .hero__grade{grid-template-columns:1fr;gap:clamp(24px,4vw,36px);align-items:stretch} .hero__grade .hero__texto{text-align:left;margin-left:0} .hero__grade .hero__texto .micro{flex-direction:row;justify-content:flex-start} .hero__grade .hero__texto .hero__olho{margin-left:0} .hero__grade .hero__texto .hero__acoes{justify-content:flex-start} .hero__grade .hero__texto .hero__news{margin-left:0;max-width:none} .hero__grade .hero__titulo{margin-left:0} /* A moldura e o arquivo tem a MESMA proporcao, entao nao ha corte para ancorar e isto nao faz nada hoje. Fica em 50% por seguranca: se um dia a proporcao da moldura mudar, 12% puxaria o corte para cima — num retrato de pe isso guarda o teto e corta as pernas. */ .hero__retrato img{object-position:50% 50%} .etapa,.etapa--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .etapa,.etapa--4{grid-template-columns:1fr} .abas__palco{min-height:118px} } /* a coluna da foto carrega tambem a ficha de dados: sem isso sobravam ~260px de vazio embaixo do retrato, e a fileira nao fechava */ .sobre__grade{align-items:start} .retrato{display:flex;flex-direction:column} .retrato .dados{margin-top:0;border-top:2px solid var(--ouro)} /* assinatura da avaliacao empilhada: com nome longo o "· Google" caia para a segunda linha em uns cartoes e ficava na primeira em outros */ .nota figcaption{flex-direction:column;align-items:flex-start;gap:5px} .nota figcaption i{opacity:.75} /* --------------------------------------------- consulta (so visual) ---- */ /* Pedido: "nao tem nenhum clicavel como pedi, consultar por exemplo, deixa so visualmente por hora". Entao o controle existe, tem a cara certa e esta DESABILITADO de proposito — com selo de "em breve" para ninguem achar que quebrou. */ /* ------------------------------------- painel: achar meu processo ------- */ /* Ele precisa ler como peca acabada e nao como formulario de site de orgao publico: filete de ouro no topo, miolo um tom acima da secao, cabeca separada por fio, e o respiro largo que o resto da pagina usa. O