/* ══════════════════════════════════════════════════════════════════════════ BREVES JURÍDICO — CAMADA SÓBRIA A identidade da matriz trabalha com a rampa azul → violeta → magenta. Numa página dirigida a escritórios de advocacia isso lê como tecnologia de consumo; aqui a paleta fecha em três cores: o azul-marinho da logo, o preto e o branco. Este arquivo carrega DEPOIS de identidade.css e vale só nesta página, por causa da classe .sobrio no . A maior parte do trabalho é feita redefinindo os tokens da marca: como as regras compartilhadas usam var(--violet), var(--grad-brand) e afins, elas seguem sozinhas. O resto do arquivo cuida do que ficou com cor escrita à mão no CSS original. ══════════════════════════════════════════════════════════════════════════ */ body.sobrio { /* O azul-marinho da logo e dois degraus dele, para hover e sotaque. */ --marinho: #02182c; --marinho-claro: #17456f; --marinho-suave: #2c6394; /* Os tokens da marca passam a apontar todos para a mesma família. */ --blue: var(--marinho); --blue-bright: var(--marinho-claro); --violet: var(--marinho); --violet-soft: var(--marinho-claro); --magenta: var(--marinho); --magenta-bright: var(--marinho-claro); /* Os tokens antigos do acento continuam vivos em 99 regras do site.css. Redirecionar os tres aqui resolve todas de uma vez. */ --amber: var(--marinho); --amber-bright: var(--marinho-claro); --amber-dark: var(--marinho); --grad-brand: linear-gradient(100deg, #02182c, #17456f 58%, #02182c); --grad-glow: linear-gradient(100deg, #17456f, #2c6394 58%, #17456f); } /* ─────────────────────────────────────────────────── texto em destaque */ /* O destaque perde o gradiente e vira marinho sólido. O itálico serifado permanece: é ele que dá o tom editorial, e isso a página deve manter. */ body.sobrio h1 em, body.sobrio h2 em, body.sobrio .svc-highlight b em, body.sobrio .calculator h2 em { background: none; color: var(--marinho); -webkit-text-fill-color: var(--marinho); } /* ────────────────────────────────────────────────────── fundos de seção */ /* As auroras coloridas dão lugar a uma lavagem única de marinho, quase imperceptível — o suficiente para as seções não ficarem chapadas. */ /* O hero e uma rampa simples de cinza para branco: o cinza abre a pagina no topo e some ate o branco, que e onde a proxima secao comeca. Sem manchas coloridas e sem emenda visivel na virada. */ body.sobrio .hero { background: linear-gradient(178deg, #e4e9ef 0%, #eff2f6 26%, #f8fafb 58%, #ffffff 88%); } body.sobrio .hero::before { background-image: radial-gradient(rgba(2, 24, 44, .08) .6px, transparent .6px); } body.sobrio .faq { background: radial-gradient(900px 500px at 88% 14%, rgba(2, 24, 44, .05), transparent 62%), var(--paper-bright); } /* Servicos passa ao marinho e adota o layout de "Recursos" da pagina do chatbot: cabecalho centralizado, itens soltos no espaco e um selo redondo de check abrindo cada um. */ body.sobrio .practice { background: radial-gradient(1000px 620px at 84% 10%, rgba(23, 69, 111, .42), transparent 64%), linear-gradient(172deg, #02182c 0%, #061f36 54%, #02182c 100%); color: #fff; } body.sobrio .cta-gallery { background: radial-gradient(860px 500px at 8% 20%, rgba(2, 24, 44, .06), transparent 62%), var(--paper); } /* A calculadora e o contato continuam escuros, mas em marinho puro. */ body.sobrio .calculator, body.sobrio #contato.contact-commit-1adc { background: radial-gradient(900px 520px at 82% 26%, rgba(23, 69, 111, .5), transparent 62%), linear-gradient(168deg, #02182c 0%, #061f36 52%, #02182c 100%); } /* ── o rodape fecha a pagina em marinho ─────────────────────────────────── */ /* A secao acima do rodape e clara, e a pagina terminava branco sobre branco, sem fechamento. Aqui ela desce para o marinho da logo. Isso obriga a inverter tudo que a camada clara tinha escurecido dentro do rodape — o estilo base ja era pensado para fundo escuro, entao o trabalho e desfazer, nao inventar. */ body.sobrio .site-footer { background: radial-gradient(900px 460px at 82% 8%, rgba(23, 69, 111, .45), transparent 64%), linear-gradient(172deg, #041f38 0%, #02182c 58%, #010f1e 100%); border-top: 0; color: rgba(255, 255, 255, .62); } body.sobrio .site-footer h3, body.sobrio .site-footer.footer-rich .footer-col h3 { color: #d3e4f4; } body.sobrio .site-footer a, body.sobrio .site-footer nav a, body.sobrio .site-footer .footer-contact a, body.sobrio .site-footer.footer-rich .footer-col a { color: rgba(255, 255, 255, .68); } body.sobrio .site-footer a:hover, body.sobrio .site-footer nav a:hover, body.sobrio .site-footer .footer-contact a:hover, body.sobrio .site-footer.footer-rich .footer-col a:hover { color: #fff; } body.sobrio .site-footer.footer-rich .footer-col a span { color: #a8c8e6; } body.sobrio .site-footer, body.sobrio .site-footer .footer-top, body.sobrio .site-footer .footer-bottom, body.sobrio .footer-brand-block > p, body.sobrio .site-footer.footer-rich .footer-brand-block > p, body.sobrio .site-footer .footer-contact li, body.sobrio .site-footer.footer-rich .footer-contact li { color: rgba(255, 255, 255, .62); } body.sobrio .site-footer.footer-rich .footer-bottom span { color: rgba(255, 255, 255, .58); } body.sobrio .site-footer .footer-top, body.sobrio .site-footer .footer-bottom, body.sobrio .site-footer.footer-rich .footer-top, body.sobrio .site-footer.footer-rich .footer-bottom { border-color: rgba(255, 255, 255, .14); } body.sobrio .footer-contact svg { color: #a8c8e6; } body.sobrio .footer-cta { border-color: rgba(255, 255, 255, .3); color: #fff; } body.sobrio .footer-cta:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); } /* A marca do rodape e um PNG marinho: sobre o marinho ela sumiria. */ body.sobrio .site-footer .footer-brand img { filter: brightness(0) invert(1); } body.sobrio .footer-brand > span { color: #fff; } /* ────────────────────────────────────────────────── cabeçalho e botões */ body.sobrio .nav-cta { background: var(--marinho); box-shadow: 0 6px 18px rgba(2, 24, 44, .22); } body.sobrio .nav-cta:hover { background: var(--marinho-claro); box-shadow: 0 10px 26px rgba(2, 24, 44, .28); } body.sobrio .nav-external { color: var(--marinho-claro) !important; } body.sobrio .site-header nav a::after { background: var(--marinho); } body.sobrio .button-primary { background: var(--marinho); box-shadow: 0 8px 22px rgba(2, 24, 44, .2); } body.sobrio .button-primary:hover { background: var(--marinho-claro); } /* ───────────────────────────────────────────────────────────── cartões */ body.sobrio .svc-card:hover, body.sobrio .faq details[open], body.sobrio .gallery-card:hover { border-color: rgba(2, 24, 44, .3); } body.sobrio .svc-card::before, body.sobrio .gallery-card::before { background: radial-gradient(circle, rgba(2, 24, 44, .06), transparent 66%); } /* O relógio do hero: o halo e os passos deixam de ser violeta. */ body.sobrio .orbit-halo { background: radial-gradient(circle at 42% 36%, rgba(2, 24, 44, .12), rgba(23, 69, 111, .05) 46%, transparent 68%); } body.sobrio .orbit-core::before { border-color: rgba(2, 24, 44, .2); } body.sobrio .orbit-steps i.done { background: rgba(2, 24, 44, .45); } body.sobrio .orbit-signature::before, body.sobrio .orbit-signature::after { background: rgba(2, 24, 44, .28); } body.sobrio .legal-orbit::after { background: radial-gradient(circle, rgba(2, 24, 44, .08), transparent 62%); } /* ─────────────────────────────────────────────────────────── calculadora */ body.sobrio .calculator-shell { background: radial-gradient(680px 400px at 88% 8%, rgba(23, 69, 111, .3), transparent 62%), linear-gradient(142deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .04)); } body.sobrio .calculator-result { background: radial-gradient(460px 320px at 70% 0%, rgba(44, 99, 148, .3), transparent 64%), linear-gradient(158deg, rgba(23, 69, 111, .24), rgba(2, 24, 44, .34)); } body.sobrio .calculator-result::before { border-color: rgba(44, 99, 148, .3); } body.sobrio .calculator-progress i { background: linear-gradient(90deg, #2c6394, #5f9ac9); } /* ────────────────────────────────────────────────────── redes no rodapé */ /* As marcas de terceiros perdem a cor própria: numa página de três cores, o degradê do Instagram e o verde do WhatsApp são justamente o que quebra a sobriedade. Se um dia fizer falta, é só apagar este bloco. */ body.sobrio .footer-social a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); } body.sobrio .footer-social a svg { fill: currentColor; } body.sobrio .footer-social a:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; } /* ────────────────────────────────────────────────────────── chat do site */ body.sobrio .bv-chat-launcher { background: var(--marinho); } body.sobrio .bv-chat-launcher:hover { background: var(--marinho-claro); } body.sobrio .bv-chat-cabeca { background: var(--marinho); } body.sobrio .bv-lead-enviar, body.sobrio .bv-op:hover { background: var(--marinho); border-color: var(--marinho); } body.sobrio .bv-lead-campo input:focus { border-color: var(--marinho-claro); box-shadow: 0 0 0 3px rgba(2, 24, 44, .12); } body.sobrio .bv-convite { background: var(--marinho); } /* ─────────────────────────────────── o que ficou com cor escrita a mao */ /* Estes vieram do CSS original com o valor cravado, entao token nenhum os alcanca: e preciso repetir o seletor. */ /* As manchas de atmosfera do hero e o halo da calculadora. */ /* Oculto e sem cor: so o display bastaria, mas deixar o violeta declarado vira armadilha para quem reativar o elemento um dia. */ body.sobrio .hero::after { display: none; background: none; } body.sobrio .hero-atmosphere { display: none; } body.sobrio .hero-atmosphere i:nth-child(1) { background: none; } body.sobrio .hero-atmosphere i:nth-child(2) { background: radial-gradient(circle, rgba(23, 69, 111, .08), transparent 68%); } body.sobrio .calculator::before { background: radial-gradient(circle, rgba(44, 99, 148, .12), transparent 66%); } /* O ponteiro do relogio do hero. */ body.sobrio .orbit-ring::before { box-shadow: 0 0 18px rgba(2, 24, 44, .4); } /* O painel de resultado da calculadora: borda, moldura interna e o brilho do numero quando ele muda. */ body.sobrio .calculator-result { border-left-color: rgba(44, 99, 148, .32); border-top-color: rgba(44, 99, 148, .32); } body.sobrio .calculator-result::before { border-color: rgba(44, 99, 148, .22); } body.sobrio .calculator-result > strong { text-shadow: 0 0 28px rgba(44, 99, 148, .18); } body.sobrio .calculator-result.is-updating > strong { text-shadow: 0 0 34px rgba(95, 154, 201, .5); } /* A barra de progresso do topo, o ponto do kicker, o passo aceso do relogio, o destaque de servicos, o brilho da barra da calculadora, a lavagem do topo do contato e o brilho dentro do botao de enviar. */ body.sobrio .page-progress i { box-shadow: 0 0 18px rgba(2, 24, 44, .45); } body.sobrio .hero-kicker span { box-shadow: 0 0 0 5px rgba(2, 24, 44, .1); } body.sobrio .orbit-steps i.on { box-shadow: 0 0 10px rgba(2, 24, 44, .4); } body.sobrio .svc-highlight { border-color: rgba(2, 24, 44, .22); background-image: linear-gradient(135deg, rgba(2, 24, 44, .07), rgba(2, 24, 44, .02)); } body.sobrio .calculator-progress i { box-shadow: 0 0 14px rgba(44, 99, 148, .34); } body.sobrio #contato.contact-commit-1adc::before { background-image: linear-gradient(rgba(23, 69, 111, .16), rgba(0, 0, 0, 0) 105px), radial-gradient(circle at 90% 5%, rgba(44, 99, 148, .14), transparent 42%); } body.sobrio .contact-form .button-primary::after { background-image: radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .12), transparent 38%); } /* ───────────────────────────────── acento sobre as superficies escuras */ /* O mesmo token de acento serve fundo claro e fundo escuro. Em marinho sobre marinho o texto sumia: medido, 1,44:1 no valor dos controles. Dentro das duas secoes escuras os tokens passam a apontar para um azul claro, e como variavel se herda, tudo que esta dentro delas acompanha. */ body.sobrio .calculator, body.sobrio #contato.contact-commit-1adc { --amber: #a8c8e6; --amber-bright: #d3e4f4; --amber-dark: #a8c8e6; --blue: #a8c8e6; --blue-bright: #d3e4f4; --violet: #d3e4f4; --violet-soft: #d3e4f4; --magenta: #d3e4f4; --magenta-bright: #d3e4f4; } /* E o destaque dos titulos dessas secoes clareia junto. */ body.sobrio .calculator h2 em, body.sobrio #contato.contact-commit-1adc h2 em { color: #d3e4f4; -webkit-text-fill-color: #d3e4f4; } /* Os rotulos miudos das secoes escuras vinham em branco a 38% e 48%. Sobre o marinho uniforme isso caiu para 3,1:1 e 3,4:1 — abaixo do minimo legivel para texto pequeno. Sobem para uma opacidade que devolve o contraste sem competir com o numero, que continua sendo o que a pessoa deve olhar. */ body.sobrio .calculator-metrics span { color: rgba(255, 255, 255, .58); } body.sobrio .calculator-note { color: rgba(255, 255, 255, .55); } body.sobrio .calculator-result > small { color: rgba(255, 255, 255, .62); } /* ══════════════════════════════════════════════════════════════════════════ HERO: TIPOGRAFIA SERIFADA E O PAINEL DE PROCESSO ══════════════════════════════════════════════════════════════════════════ */ /* A chamada sai da sans fina e vai para a serifa com peso. Numa pagina de advocacia a serifa nao e enfeite: e o que da autoridade ao texto — e o contraste entre a linha reta e a linha italica faz o trabalho que antes dependia de cor. */ body.sobrio .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(46px, 5.4vw, 78px); line-height: 1.03; /* Serifa pede entreletra bem mais folgada que sans: os -.055em originais amassavam as hastes umas nas outras. */ letter-spacing: -.018em; } body.sobrio .hero h1 em { font-weight: 400; font-style: italic; letter-spacing: -.012em; } /* ══════════════════════════════════════════════════════════════════════════ ESCALA: TRES CENARIOS LADO A LADO O peso cresce da esquerda para a direita — o cartao claro e o de hoje, o marinho e o do meio, o mais escuro e o alvo. E o cinza sai de cena para o marinho entrar, sem precisar de uma cor nova. ══════════════════════════════════════════════════════════════════════════ */ /* O fundo da secao desce do branco para um cinza azulado, na direcao oposta a do hero: assim as duas nao se parecem, e a base mais escura sustenta o cartao marinho da direita em vez de deixa-lo flutuando no branco. */ body.sobrio .lex-escala { padding: 104px 0; background: radial-gradient(1000px 560px at 82% 92%, rgba(23, 69, 111, .1), transparent 64%), linear-gradient(172deg, #ffffff 0%, #f4f7fa 42%, #e7edf4 100%); } body.sobrio .lex-escala-head { max-width: 780px; margin: 0 auto 54px; text-align: center; } body.sobrio .lex-escala-head .section-label { justify-content: center; margin-bottom: 18px; } body.sobrio .lex-escala-head h2 { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -.018em; } body.sobrio .lex-escala-head h2 em { font-weight: 400; font-style: italic; } body.sobrio .lex-escala-head > p { max-width: 44em; margin: 20px auto 0; color: var(--ink-muted); font-size: 15px; line-height: 1.7; } body.sobrio .lex-escala-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } body.sobrio .lex-cenario { display: flex; flex-direction: column; padding: 30px 28px 32px; border: 1px solid rgba(2, 24, 44, .12); border-radius: 14px; /* Branco, e nao --paper: sobre o gradiente o cinza do token sumia. */ background: #fff; } body.sobrio .lex-cenario-tag { display: block; margin-bottom: 14px; color: var(--ink-muted); font: 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; } body.sobrio .lex-cenario-texto { flex: 1; color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; } body.sobrio .lex-cenario-num { margin-top: 30px; } body.sobrio .lex-cenario-num b { display: block; color: var(--ink); font-family: var(--serif); font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1; letter-spacing: -.022em; } body.sobrio .lex-cenario-num small { display: block; margin-top: 9px; color: var(--ink-muted); font-size: 12px; } body.sobrio .lex-cenario-total { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(2, 24, 44, .12); color: var(--ink); font-size: 14px; font-weight: 620; letter-spacing: -.012em; } /* O cartao do meio: marinho cheio. */ body.sobrio .lex-cenario.is-meio { border-color: transparent; background: var(--marinho-claro); } body.sobrio .lex-cenario.is-meio .lex-cenario-tag { color: rgba(255, 255, 255, .72); } body.sobrio .lex-cenario.is-meio .lex-cenario-texto { color: rgba(255, 255, 255, .78); } body.sobrio .lex-cenario.is-meio .lex-cenario-num b, body.sobrio .lex-cenario.is-meio .lex-cenario-total { color: #fff; } body.sobrio .lex-cenario.is-meio .lex-cenario-num small { color: rgba(255, 255, 255, .7); } body.sobrio .lex-cenario.is-meio .lex-cenario-total { border-top-color: rgba(255, 255, 255, .26); } /* E o da direita fecha no marinho da logo, com um fio claro no topo para marcar que ele e o destino, nao so mais um cartao escuro. */ body.sobrio .lex-cenario.is-alto { position: relative; border-color: transparent; background: linear-gradient(168deg, #02182c, #061f36 60%, #02182c); box-shadow: 0 26px 60px rgba(2, 24, 44, .22); } body.sobrio .lex-cenario.is-alto::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 0 0 2px 2px; background: #d3e4f4; } body.sobrio .lex-cenario.is-alto .lex-cenario-tag { color: #d3e4f4; } body.sobrio .lex-cenario.is-alto .lex-cenario-texto { color: rgba(255, 255, 255, .74); } body.sobrio .lex-cenario.is-alto .lex-cenario-num b { color: #d3e4f4; } body.sobrio .lex-cenario.is-alto .lex-cenario-num small { color: rgba(255, 255, 255, .66); } body.sobrio .lex-cenario.is-alto .lex-cenario-total { color: #fff; border-top-color: rgba(255, 255, 255, .24); } body.sobrio .lex-escala-acao { display: flex; justify-content: center; margin-top: 34px; } @media (max-width: 900px) { body.sobrio .lex-escala-grid { grid-template-columns: 1fr; } body.sobrio .lex-escala { padding: 76px 0; } body.sobrio .lex-cenario-num { margin-top: 22px; } } /* ── a marca no topo, maior ─────────────────────────────────────────────── */ /* Numa pagina que agora abre com formulario, a marca precisa segurar o lado esquerdo do cabecalho sozinha. */ body.sobrio .brand img { height: 40px; } body.sobrio .brand b { font-size: 16px; letter-spacing: .22em; } body.sobrio .brand small { font-size: 9px; letter-spacing: .2em; } body.sobrio .nav-shell { height: 76px; } /* ── o formulario no hero ───────────────────────────────────────────────── */ /* O formulario sobe do rodape da pagina para a coluna direita do hero: quem chega decidido preenche sem rolar nada. Comprimido a tres campos — o que a tabela do Supabase guarda hoje. */ /* A ancora se chama #fale, e nao #contato: em identidade.css o id "contato" carrega o fundo escuro da secao do rodape e mais uma duzia de regras pensadas para ela. Renomear custa quatro links e evita brigar com todas. */ body.sobrio .lex-form { width: 100%; max-width: 420px; justify-self: center; padding: 30px 28px 26px; border: 1px solid rgba(2, 24, 44, .12); border-radius: 16px; background: #fff; box-shadow: 0 26px 64px rgba(2, 24, 44, .11); text-align: left; } body.sobrio .lex-form h2 { color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.14; letter-spacing: -.02em; } body.sobrio .lex-form-sub { margin-top: 10px; color: var(--ink-muted); font-size: 13.5px; line-height: 1.6; } /* Sem a classe .contact-form de proposito: o id "contato" e alvo de um monte de regra desenhada para a secao escura do rodape, e a primeira delas pintava este cartao com o gradiente da marca. O script so precisa do data-atributo. */ body.sobrio .lex-form-campos { display: grid; gap: 14px; margin-top: 24px; } body.sobrio .lex-form-campos .field { display: grid; gap: 7px; } body.sobrio .lex-form-campos label { color: var(--ink); font: 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; } body.sobrio .lex-form-campos input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(2, 24, 44, .16); border-radius: 9px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } body.sobrio .lex-form-campos input::placeholder { color: rgba(85, 101, 122, .7); } body.sobrio .lex-form-campos input:focus { outline: none; border-color: var(--marinho); background: #fff; box-shadow: 0 0 0 3px rgba(2, 24, 44, .1); } body.sobrio .lex-form-enviar { width: 100%; height: 50px; margin-top: 4px; justify-content: center; } body.sobrio .lex-form .form-ok { display: none; margin-top: 2px; font-size: 12.5px; } body.sobrio .lex-form .form-ok[data-state] { display: block; } body.sobrio .lex-form .form-ok[data-state="error"] { color: #b4232a; } body.sobrio .lex-form .form-ok[data-state="success"] { color: #1f8a52; } body.sobrio .lex-form-nota { margin-top: 16px; color: var(--ink-muted); font-size: 11.5px; text-align: center; } @media (max-width: 979px) { body.sobrio .lex-form { margin-top: 40px; max-width: 520px; margin-inline: auto; } } /* ══════════════════════════════════════════════════════════════════════════ SERVICOS NO LAYOUT DE "RECURSOS" ══════════════════════════════════════════════════════════════════════════ */ body.sobrio .svc-head { max-width: 820px; margin: 0 auto 56px; text-align: center; } body.sobrio .svc-head .section-label { justify-content: center; margin-bottom: 18px; color: rgba(255, 255, 255, .58); } body.sobrio .svc-head h2 { color: #fff; font-family: var(--serif); font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.04; letter-spacing: -.018em; } body.sobrio .svc-head h2 em { color: #d3e4f4; -webkit-text-fill-color: #d3e4f4; font-weight: 400; font-style: italic; } /* O bloco do "100% personalizado" vira uma faixa discreta sobre o marinho. */ body.sobrio .svc-highlight { max-width: 1120px; margin-inline: auto; border-color: rgba(255, 255, 255, .16); background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); } body.sobrio .svc-highlight b { color: #fff; } body.sobrio .svc-highlight b em { color: #d3e4f4; -webkit-text-fill-color: #d3e4f4; } body.sobrio .svc-highlight p { color: rgba(255, 255, 255, .72); } /* A grade perde moldura e divisoria: os itens respiram no espaco da secao. */ body.sobrio .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; max-width: 1120px; margin: 64px auto 0; } body.sobrio .svc-card { max-width: 24em; padding: 0; border: 0; background: none; box-shadow: none; } body.sobrio .svc-card::before { display: none; } body.sobrio .svc-card:hover { border: 0; transform: none; box-shadow: none; } body.sobrio .svc-ic { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #d3e4f4; transition: background .25s ease, transform .25s ease; } body.sobrio .svc-ic svg { width: 22px; height: 22px; } body.sobrio .svc-card:hover .svc-ic { background: rgba(255, 255, 255, .18); transform: translateY(-2px); } body.sobrio .svc-card h3 { margin-bottom: 11px; color: #fff; font-size: 18px; font-weight: 660; letter-spacing: -.022em; } body.sobrio .svc-card p { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.68; } @media (max-width: 1040px) { body.sobrio .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { body.sobrio .svc-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 48px; } } /* Piso de legibilidade no celular — ver o comentario no identidade.css. Esta folha carrega depois dele e venceria nos componentes do juridico. */ @media (max-width: 620px) { body.sobrio .brand small, .hero-assurances li, body.sobrio .lex-form-campos label, body.sobrio .lex-cenario-tag, .calculator-progress span, .calculator-metrics span, .calculator-result small, .calculator-note { font-size: 11px; } }