/* ========================================================= Alexsandro Lopes — Advocacia e Consultoria Jurídica Paleta: azul-marinho (pedido do cliente) + ouro do logo. ========================================================= */ :root{ /* cor */ --tinta: #0D1526; /* azul-marinho profundo, base escura do site */ --tinta-2: #16223B; /* elevação sobre o azul-marinho */ --nogueira: #1B2A4A; /* azul-marinho secundário, seções alternadas */ --ouro: #C8A055; /* ouro médio do logo */ --ouro-claro: #E7CE96; /* brilho do logo */ --ouro-fundo: #8A6C33; /* ouro em sombra */ --vinho: #7A1F2B; /* camisa — acento raro */ --linho: #F2EDE4; /* papel quente */ --linho-2: #E8E1D4; /* linho sombreado */ --grafite: #4A423A; /* texto corrido no claro */ --grafite-fraco:#6E6459; --zap: #1FA855; --zap-escuro: #16803F; --zap-texto: #0E6533; /* verde legível sobre fundo claro (WCAG AA) */ /* tipo */ --display: "Cormorant Garamond", "Times New Roman", Georgia, serif; --corpo: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif; --util: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif; /* medida */ --largura: 1200px; --gutter: clamp(20px, 5vw, 48px); --secao-y: clamp(72px, 10vw, 132px); --raio: 2px; --transicao: 320ms cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; /* clip em vez de hidden: contém o estouro horizontal sem transformar o em contêiner de rolagem nem quebrar position:sticky */ overflow-x:clip; } body{ margin:0; background:var(--linho); color:var(--grafite); font-family:var(--corpo); font-size:clamp(16px,1.02vw,17.5px); font-weight:400; line-height:1.68; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; height:auto; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ margin:0; font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.012em; } p{ margin:0 0 1em; } ul,ol{ margin:0; padding:0; list-style:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } svg{ fill:currentColor; } :focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; border-radius:2px; } .pular{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--ouro); color:var(--tinta); padding:12px 20px; font-weight:600; } .pular:focus{ left:12px; top:12px; } /* ---------- utilidades ---------- */ .container{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter); } .container--estreito{ max-width:840px; } .rotulo{ font-family:var(--util); font-size:.82rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--ouro); margin:0 0 1.1rem; display:flex; align-items:center; gap:.75rem; } .rotulo::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--ouro),transparent); flex:none; } .rotulo{ flex-wrap:wrap; row-gap:.3rem; } .rotulo__oab{ font-weight:500; letter-spacing:.14em; /* mais legível que o rótulo em si, que usa .28em */ color:rgba(231,206,150,.72); } .rotulo--escuro{ color:var(--ouro-fundo); } .rotulo--escuro::before{ background:linear-gradient(90deg,var(--ouro-fundo),transparent); } .link-ouro{ color:var(--ouro-fundo); font-weight:500; border-bottom:1px solid rgba(138,108,51,.4); transition:border-color var(--transicao), color var(--transicao); cursor:pointer; } .link-ouro:hover{ color:var(--vinho); border-color:var(--vinho); } /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.6rem; font-family:var(--corpo); font-size:.95rem; font-weight:600; letter-spacing:.01em; border-radius:var(--raio); cursor:pointer; border:1px solid transparent; transition:transform var(--transicao), background-color var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao); white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn svg{ width:19px; height:19px; flex:none; } .btn--zap{ background:var(--zap); color:#fff; box-shadow:0 8px 22px -12px rgba(31,168,85,.9); } .btn--zap:hover{ background:var(--zap-escuro); box-shadow:0 14px 30px -12px rgba(31,168,85,.75); } .btn--ouro{ background:linear-gradient(105deg,var(--ouro-fundo),var(--ouro) 45%,var(--ouro-claro)); color:var(--tinta); } .btn--ouro:hover{ box-shadow:0 14px 30px -14px rgba(200,160,85,.9); } .btn--vazado{ border-color:rgba(200,160,85,.42); color:var(--ouro-claro); background:rgba(200,160,85,.05); } .btn--vazado:hover{ border-color:var(--ouro); background:rgba(200,160,85,.12); } .btn--insta{ background:linear-gradient(102deg,#8A3AB9,#C13584 38%,#E1306C 62%,#F09433); color:#fff; } .btn--insta:hover{ box-shadow:0 14px 32px -14px rgba(193,53,132,.85); } .btn--compacto{ padding:.68rem 1.15rem; font-size:.88rem; } .btn--grande{ padding:1.15rem 2.2rem; font-size:1.05rem; } /* ========================================================= CABEÇALHO ========================================================= */ .cabecalho{ position:fixed; inset:0 0 auto 0; z-index:100; transition:background-color var(--transicao), box-shadow var(--transicao), border-color var(--transicao); border-bottom:1px solid transparent; } .cabecalho--fixo{ background:rgba(20,16,12,.93); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:rgba(200,160,85,.16); box-shadow:0 14px 40px -28px #000; } .cabecalho__interno{ max-width:var(--largura); margin-inline:auto; padding:.85rem var(--gutter); display:flex; align-items:center; gap:1.5rem; } .marca{ flex:none; display:flex; align-items:center; gap:.72rem; } .marca__mono{ width:auto; height:48px; transition:height var(--transicao); } .cabecalho--fixo .marca__mono{ height:40px; } .marca__texto{ display:flex; flex-direction:column; gap:.1rem; padding-left:.72rem; border-left:1px solid rgba(200,160,85,.28); } .marca__nome{ font-family:var(--display); font-size:1.28rem; font-weight:600; line-height:1; letter-spacing:.005em; background:linear-gradient(96deg,var(--ouro-fundo),var(--ouro) 42%,var(--ouro-claro)); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; } .marca__sub{ font-family:var(--util); font-size:.6rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:rgba(242,237,228,.7); white-space:nowrap; } .nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1.05rem,1.9vw,2rem); } .nav a{ position:relative; font-size:.9rem; font-weight:500; letter-spacing:.015em; color:rgba(242,237,228,.82); padding:.35rem 0; white-space:nowrap; transition:color var(--transicao); } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ouro); transition:right var(--transicao); } .nav a:hover{ color:var(--ouro-claro); } .nav a:hover::after{ right:0; } .hamburger{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; flex:none; } .hamburger span{ width:24px; height:1.5px; background:var(--linho); transition:transform var(--transicao), opacity var(--transicao); } .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; background:var(--tinta); color:var(--linho); /* mais enxuto que uma seção comum: o essencial (incluindo a OAB, no rótulo acima) precisa caber sem rolagem em telas de notebook comuns */ padding:calc(72px + var(--secao-y) * .3) 0 calc(var(--secao-y) * .55); overflow:hidden; isolation:isolate; } .hero__fundo{ position:absolute; inset:0; z-index:-1; background: radial-gradient(120% 82% at 78% 8%, rgba(200,160,85,.16), transparent 58%), radial-gradient(85% 60% at 8% 92%, rgba(122,31,43,.16), transparent 62%), linear-gradient(168deg, var(--nogueira), var(--tinta) 52%); } .hero__fundo::after{ /* trama sutil de linhas — remete a papel timbrado, não a "grid tech" */ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient( to bottom, rgba(200,160,85,.055) 0 1px, transparent 1px 34px); opacity:.75; mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent); } /* Têmis ao fundo — presença discreta, não protagonista. right positivo (nunca negativo): mantém a estátua inteira dentro do hero, já que a seção tem overflow:hidden e cortaria qualquer parte que passasse da borda. */ .hero__themis{ position:absolute; bottom:0; right:clamp(12px, 3vw, 56px); width:clamp(320px, 42vw, 720px); max-width:calc(100% - 24px); height:auto; opacity:.16; filter:saturate(.75) brightness(1.08); pointer-events:none; z-index:0; animation:themis-flutuar 10s ease-in-out infinite; } @keyframes themis-flutuar{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-16px) rotate(.6deg); } } .hero__grade{ position:relative; z-index:1; display:flex; justify-content:center; } .hero__texto{ width:100%; max-width:44rem; } .hero__titulo{ font-size:clamp(2.9rem,6.6vw,5.4rem); line-height:.99; letter-spacing:-.022em; margin:0 0 1.5rem; color:var(--linho); } .hero__titulo span{ display:block; } .rev--ouro{ font-style:italic; font-weight:500; background:linear-gradient(96deg,var(--ouro-fundo),var(--ouro) 38%,var(--ouro-claro) 72%,var(--ouro)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; /* evita corte das descidas no gradiente */ } .hero__linha{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:rgba(242,237,228,.76); max-width:47ch; margin-bottom:2.2rem; } .hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2rem; } .hero__oab{ font-family:var(--util); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,228,.64); margin:0; } /* retrato (usado na seção "Sobre") */ .moldura{ position:relative; border:1px solid rgba(200,160,85,.3); padding:10px; background:rgba(200,160,85,.045); overflow:hidden; } /* filete de ouro deslocado — "moldura dentro da moldura" */ .sobre__foto::before{ content:""; position:absolute; z-index:2; width:58%; height:58%; pointer-events:none; inset:auto auto -14px -14px; border-bottom:1px solid rgba(200,160,85,.45); border-left:1px solid rgba(200,160,85,.45); } /* o filete se desenha ao entrar em cena */ .js .sobre__foto::before{ transform:scale(.2); opacity:0; transform-origin:bottom left; transition:transform 900ms cubic-bezier(.22,.61,.36,1) 260ms, opacity 700ms ease 260ms; } .js .sobre__foto.rev--pronto::before{ transform:scale(1); opacity:1; } .moldura img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; filter:saturate(.94) contrast(1.03); will-change:transform; } /* a foto se revela de baixo para cima, como uma cortina subindo */ .js .rev .moldura img{ clip-path:inset(22% 0 0 0); transition:clip-path 1200ms cubic-bezier(.22,.61,.36,1) 120ms; } .js .rev--pronto .moldura img{ clip-path:inset(0 0 0 0); } /* ========================================================= FAIXA ========================================================= */ .faixa{ background:var(--nogueira); border-top:1px solid rgba(200,160,85,.16); border-bottom:1px solid rgba(200,160,85,.16); padding:2.4rem 0; } .faixa__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(200,160,85,.16); } .faixa__item{ background:var(--nogueira); padding:.35rem clamp(14px,2.2vw,28px); display:flex; flex-direction:column; gap:.15rem; } .faixa__item strong{ font-family:var(--display); font-size:1.24rem; font-weight:600; color:var(--ouro-claro); line-height:1.2; } .faixa__item span{ font-size:.9rem; color:rgba(242,237,228,.55); line-height:1.4; } /* ========================================================= SEÇÕES ========================================================= */ .secao{ padding:var(--secao-y) 0; } .secao--claro{ background:var(--linho); color:var(--grafite); } .secao--escuro{ background:var(--tinta); color:rgba(242,237,228,.78); } .secao__topo{ max-width:62ch; margin-bottom:clamp(40px,5vw,66px); } .secao__titulo{ font-size:clamp(2.1rem,4.1vw,3.35rem); color:var(--tinta); margin:0 0 1rem; } /* o título é revelado de cima para baixo, como texto sendo escrito numa linha */ .js .secao__topo .secao__titulo{ clip-path:inset(-.18em -.12em 100% -.12em); transition:clip-path 900ms cubic-bezier(.22,.61,.36,1) 140ms; } .js .secao__topo.rev--pronto .secao__titulo{ clip-path:inset(-.18em -.12em -.18em -.12em); } .secao--escuro .secao__titulo, .contato .secao__titulo, .insta .secao__titulo{ color:var(--linho); } .secao__linha{ font-size:1.05rem; color:var(--grafite-fraco); max-width:56ch; margin:0; } /* ---------- cards de situação (assinatura) ---------- */ .casos{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); } .caso{ position:relative; display:flex; flex-direction:column; padding:clamp(26px,3vw,40px); background:#fff; border:1px solid var(--linho-2); border-radius:var(--raio); cursor:pointer; overflow:hidden; transition:transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); } .caso::before{ /* filete de ouro que cresce da esquerda ao passar o mouse */ content:""; position:absolute; left:0; top:0; bottom:100%; width:2px; background:linear-gradient(180deg,var(--ouro-claro),var(--ouro-fundo)); transition:bottom 420ms cubic-bezier(.22,.61,.36,1); } .caso:hover, .caso:focus-visible{ transform:translateY(-4px); border-color:rgba(200,160,85,.5); box-shadow:0 26px 54px -34px rgba(20,16,12,.55); } .caso:hover::before, .caso:focus-visible::before{ bottom:0; } .caso__area{ font-family:var(--util); font-size:.8rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-fundo); margin-bottom:1.1rem; } .caso__fala{ font-size:clamp(1.42rem,2.3vw,1.85rem); line-height:1.16; color:var(--tinta); margin:0 0 .9rem; text-wrap:balance; } .caso__desc{ font-size:.985rem; color:var(--grafite-fraco); margin:0 0 1.7rem; flex:1; } .caso__cta{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:var(--zap-texto); margin-top:auto; } .caso__cta i{ font-style:normal; transition:transform var(--transicao); } .caso:hover .caso__cta i{ transform:translateX(5px); } .casos__rodape{ margin:clamp(28px,3.5vw,40px) 0 0; text-align:center; color:var(--grafite-fraco); font-size:1rem; } /* ---------- sobre ---------- */ .sobre__grade{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(34px,5.5vw,80px); align-items:center; } .sobre__foto{ margin:0; position:relative; } .sobre__texto p{ color:rgba(242,237,228,.74); max-width:58ch; } .sobre .secao__titulo{ margin-bottom:1.4rem; } .pilares{ margin:2.2rem 0; display:grid; gap:1px; background:rgba(200,160,85,.2); border-block:1px solid rgba(200,160,85,.2); } .pilares li{ background:var(--tinta); padding:1.05rem 0 1.05rem 1.3rem; border-left:2px solid var(--ouro); display:flex; flex-direction:column; gap:.1rem; } .pilares__titulo{ font-family:var(--display); font-size:1.24rem; font-weight:600; color:var(--ouro-claro); line-height:1.25; } .pilares__desc{ font-size:.95rem; color:rgba(242,237,228,.6); } /* ---------- passos ---------- */ .passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); counter-reset:passo; } .passo{ position:relative; padding-top:3.1rem; border-top:1px solid var(--linho-2); } /* a régua dourada se estende sobre a linha cinza conforme o passo entra */ .passo::before{ content:""; position:absolute; top:-1px; left:0; width:0; height:1px; background:linear-gradient(90deg,var(--ouro),rgba(200,160,85,.15)); transition:width 1000ms cubic-bezier(.22,.61,.36,1) 180ms; } .js .passo.rev--pronto::before{ width:100%; } /* Marca d'água ornamental. A ordem real dos passos vem do

e de cada título, por isso o algarismo é aria-hidden e não precisa passar no contraste de texto — mas ficou mais legível mesmo assim. */ .passo__num{ position:absolute; top:-.85rem; left:0; font-family:var(--display); font-size:3.4rem; font-weight:400; font-style:italic; line-height:1; color:rgba(138,108,51,.55); pointer-events:none; user-select:none; } .js .passo .passo__num{ opacity:0; transform:translateY(14px); transition:opacity 700ms ease 300ms, transform 700ms cubic-bezier(.22,.61,.36,1) 300ms; } .js .passo.rev--pronto .passo__num{ opacity:1; transform:none; } .passo__titulo{ font-size:1.42rem; color:var(--tinta); margin:0 0 .6rem; position:relative; } .passo p{ font-size:.985rem; color:var(--grafite-fraco); margin:0; } /* ---------- instagram ---------- */ .insta{ background:var(--nogueira); color:rgba(242,237,228,.78); padding:var(--secao-y) 0; position:relative; overflow:hidden; } .insta::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 100% 0%, rgba(193,53,132,.16), transparent 62%); pointer-events:none; } .insta__grade{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center; } .insta__linha{ color:rgba(242,237,228,.7); max-width:50ch; margin-bottom:2rem; } /* mockup de celular com o print real do perfil */ .insta__aparelho{ display:flex; justify-content:center; } .aparelho{ position:relative; display:block; width:min(304px,78vw); padding:12px 10px; background:linear-gradient(158deg,#2E2419,#121008 62%); border:1px solid rgba(200,160,85,.34); border-radius:34px; box-shadow:0 40px 80px -34px #000, 0 0 0 1px rgba(0,0,0,.4) inset; cursor:pointer; transition:transform 520ms cubic-bezier(.22,.61,.36,1), box-shadow var(--transicao); } .aparelho:hover{ transform:translateY(-7px) rotate(-.6deg); box-shadow:0 52px 92px -34px #000, 0 0 0 1px rgba(200,160,85,.2) inset; } .aparelho__alto-falante{ display:block; width:52px; height:4px; margin:0 auto 9px; border-radius:99px; background:rgba(200,160,85,.3); } .aparelho__tela{ display:block; overflow:hidden; border-radius:24px; background:#000; box-shadow:0 0 0 1px rgba(200,160,85,.18); } .aparelho__tela img{ width:100%; height:auto; transition:transform 900ms cubic-bezier(.22,.61,.36,1); } .aparelho:hover .aparelho__tela img{ transform:scale(1.015); } /* ---------- perguntas ---------- */ .faq{ border-top:1px solid var(--linho-2); } .faq__item{ border-bottom:1px solid var(--linho-2); } .faq__item summary{ list-style:none; cursor:pointer; padding:1.4rem 3rem 1.4rem 0; position:relative; font-family:var(--display); font-size:clamp(1.2rem,2vw,1.48rem); font-weight:600; line-height:1.25; color:var(--tinta); transition:color var(--transicao); } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary:hover{ color:var(--ouro-fundo); } .faq__item summary::after{ content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; border-right:1.5px solid var(--ouro-fundo); border-bottom:1.5px solid var(--ouro-fundo); transform:translateY(-70%) rotate(45deg); transition:transform var(--transicao); } .faq__item[open] summary::after{ transform:translateY(-25%) rotate(-135deg); } .faq__resp{ padding:0 3rem 1.6rem 0; } .faq__resp p{ margin:0; color:var(--grafite-fraco); font-size:1rem; } /* o texto sobe suavemente enquanto a altura do item é animada pelo script */ .js .faq__item[open] .faq__resp{ animation:subir-resposta 420ms cubic-bezier(.22,.61,.36,1) both; } @keyframes subir-resposta{ from{ opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } } /* ---------- contato ---------- */ .contato{ background:var(--tinta); color:rgba(242,237,228,.75); padding:var(--secao-y) 0; position:relative; overflow:hidden; } .contato::before{ content:""; position:absolute; inset:0; background:radial-gradient(75% 90% at 12% 10%, rgba(200,160,85,.14), transparent 60%); pointer-events:none; } .contato__grade{ position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(38px,5.5vw,80px); align-items:start; } /* rosto do advogado, logo acima do CTA — reforça "é o advogado quem responde" */ .contato__pessoa{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; } .contato__pessoa-foto{ flex:none; display:block; width:68px; height:68px; border:1px solid rgba(200,160,85,.4); padding:3px; overflow:hidden; } .contato__pessoa-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; } .contato__pessoa-texto{ display:flex; flex-direction:column; gap:.2rem; font-size:.92rem; color:rgba(242,237,228,.68); } .contato__pessoa-texto strong{ font-family:var(--display); font-size:1.18rem; font-weight:600; color:var(--ouro-claro); } .contato__titulo{ font-family:var(--display); font-size:clamp(2.2rem,4.4vw,3.5rem); color:var(--linho); margin:0 0 1.1rem; } .contato__linha{ color:rgba(242,237,228,.68); max-width:46ch; margin-bottom:2.2rem; } .canais{ display:grid; gap:1px; background:rgba(200,160,85,.2); border:1px solid rgba(200,160,85,.2); } .canal{ background:var(--tinta-2); padding:1.15rem clamp(18px,2.4vw,28px); display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; } .canal__rotulo{ font-family:var(--util); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,237,228,.66); flex:none; } .canal__valor{ font-family:var(--display); font-size:1.24rem; font-weight:600; color:var(--ouro-claro); cursor:pointer; text-align:right; transition:color var(--transicao); /* área de toque confortável no celular */ display:inline-flex; align-items:center; min-height:44px; } .canal__valor:hover{ color:#fff; } .canal__valor--simples{ color:rgba(242,237,228,.7); cursor:default; } .canal__valor--simples:hover{ color:rgba(242,237,228,.7); } /* ========================================================= RODAPÉ ========================================================= */ .rodape{ background:var(--nogueira); color:rgba(242,237,228,.6); padding:clamp(48px,6vw,72px) 0 2rem; border-top:1px solid rgba(200,160,85,.2); } .rodape__grade{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(28px,4vw,56px); align-items:start; padding-bottom:clamp(32px,4vw,48px); } .rodape__marca img{ height:auto; width:min(230px,58vw); } .rodape__oab{ font-family:var(--util); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,237,228,.45); margin:.8rem 0 0; } .rodape__nav{ display:flex; flex-direction:column; gap:.15rem; font-size:.95rem; } .rodape__nav a{ transition:color var(--transicao); width:fit-content; display:inline-flex; align-items:center; min-height:44px; } .rodape__nav a:hover{ color:var(--ouro-claro); } .rodape__redes{ display:flex; gap:.65rem; } .rede{ width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(200,160,85,.3); color:var(--ouro); cursor:pointer; transition:background-color var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao); } .rede svg{ width:18px; height:18px; } .rede:hover{ background:var(--ouro); color:var(--tinta); border-color:var(--ouro); transform:translateY(-2px); } .rodape__legal{ border-top:1px solid rgba(200,160,85,.16); padding-top:1.6rem; font-size:.85rem; color:rgba(242,237,228,.64); } .rodape__legal p{ margin:0 0 .7rem; } .rodape__aviso{ max-width:88ch; line-height:1.6; font-size:.8rem; } /* ========================================================= BOTÃO FLUTUANTE ========================================================= */ .flutuante{ position:fixed; right:20px; bottom:20px; z-index:90; display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.25rem; background:var(--zap); color:#fff; font-size:.94rem; font-weight:600; border-radius:999px; box-shadow:0 14px 34px -12px rgba(31,168,85,.75); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao), background-color var(--transicao); } .flutuante--visivel{ opacity:1; visibility:visible; transform:translateY(0); } .flutuante:hover{ background:var(--zap-escuro); } .flutuante svg{ width:22px; height:22px; flex:none; position:relative; z-index:1; } .flutuante__texto{ position:relative; z-index:1; } /* anel pulsando, para o botão não passar despercebido durante a leitura */ .flutuante::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:var(--zap); animation:pulso 2.8s cubic-bezier(.22,.61,.36,1) infinite; pointer-events:none; } .flutuante:hover::after{ animation-play-state:paused; opacity:0; } @keyframes pulso{ 0% { transform:scale(1); opacity:.5; } 70%,100% { transform:scale(1.42); opacity:0; } } /* ========================================================= REVELAÇÃO ========================================================= */ /* Só esconde quando o JS está ativo (classe .js no ). Sem JS, ou se o script falhar, tudo permanece visível. */ .js .rev{ opacity:0; transform:translateY(22px); transition:opacity 720ms cubic-bezier(.22,.61,.36,1), transform 720ms cubic-bezier(.22,.61,.36,1); } .js .rev--pronto{ opacity:1; transform:none; } /* Acionado pelo script quando o navegador não está processando as transições: mostra o conteúdo imediatamente, sem depender de quadros de animação. */ .js.sem-anim .rev, .js.sem-anim .rev *{ opacity:1 !important; transform:none !important; transition:none !important; clip-path:none !important; } .js.sem-anim .passo::before{ width:100% !important; transition:none !important; } .js.sem-anim .sobre__foto::before{ opacity:1 !important; transform:none !important; transition:none !important; } .rev[data-rev="1"]{ transition-delay:.05s; } .rev[data-rev="2"]{ transition-delay:.16s; } .rev[data-rev="3"]{ transition-delay:.26s; } .rev[data-rev="4"]{ transition-delay:.36s; } .rev[data-rev="5"]{ transition-delay:.5s; } .rev[data-rev="6"]{ transition-delay:.62s; } .rev[data-rev="7"]{ transition-delay:.72s; } /* ========================================================= RESPONSIVO ========================================================= */ @media (max-width:1080px){ .rodape__grade{ grid-template-columns:auto 1fr; } .rodape__redes{ grid-column:1 / -1; } } @media (max-width:960px){ .nav{ position:fixed; inset:0 0 auto 0; margin-left:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(20,16,12,.985); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:88px var(--gutter) 2rem; border-bottom:1px solid rgba(200,160,85,.2); transform:translateY(-102%); /* visibility tira os links da ordem de tabulação e dos leitores de tela enquanto o menu está fechado — só deslocar não basta */ visibility:hidden; /* fechando: espera o painel subir para então ocultar. abrindo (.nav--aberto): torna visível no mesmo instante. */ transition:transform 380ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 380ms; max-height:100dvh; overflow-y:auto; } .nav--aberto{ transform:translateY(0); visibility:visible; transition:transform 380ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; } .nav a{ padding:1rem 0; font-family:var(--display); font-size:1.6rem; font-weight:600; color:var(--linho); border-bottom:1px solid rgba(200,160,85,.14); } .nav a::after{ display:none; } .hamburger{ display:flex; order:3; } .cabecalho__interno{ justify-content:space-between; } .cabecalho__interno .btn--compacto{ margin-left:auto; } .hero__linha{ max-width:none; } .faixa__grade{ grid-template-columns:repeat(2,1fr); } .faixa__item{ padding:1rem clamp(14px,2.5vw,24px); } .sobre__grade, .insta__grade, .contato__grade{ grid-template-columns:1fr; } .sobre__foto{ max-width:420px; } .passos{ grid-template-columns:1fr; gap:2.2rem; } } @media (max-width:720px){ .marca__texto{ display:none; } .marca__mono{ height:42px; } .cabecalho--fixo .marca__mono{ height:38px; } .cabecalho__interno{ gap:.75rem; } .casos{ grid-template-columns:1fr; } .hero{ padding-top:calc(84px + var(--secao-y) * .4); } .hero__themis{ width:min(72vw,340px); right:8px; opacity:.13; } .canal{ flex-direction:column; align-items:flex-start; gap:.2rem; } .canal__valor{ text-align:left; } .flutuante__texto{ display:none; } .flutuante{ padding:.95rem; right:16px; bottom:16px; } .rodape__grade{ grid-template-columns:1fr; } .faq__item summary{ padding-right:2.4rem; } .faq__resp{ padding-right:0; } } @media (max-width:420px){ .faixa__grade{ grid-template-columns:1fr; } .hero__acoes .btn{ width:100%; } .aparelho{ width:min(272px,82vw); } } /* ========================================================= MOVIMENTO REDUZIDO ========================================================= */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .js .rev, .js .rev *{ opacity:1 !important; transform:none !important; clip-path:none !important; } .js .passo::before{ width:100% !important; } .js .sobre__foto::before{ opacity:1 !important; transform:none !important; } .flutuante::after{ animation:none !important; opacity:0 !important; } .js .faq__item[open] .faq__resp{ animation:none !important; } } /* ========================================================= IMPRESSÃO ========================================================= */ @media print{ .cabecalho,.flutuante,.hero__fundo,.insta__aparelho{ display:none !important; } body{ background:#fff; color:#000; } .rev{ opacity:1; transform:none; } .secao--escuro,.contato,.insta,.rodape,.faixa,.hero{ background:#fff !important; color:#000 !important; } }