/* ══════════════════════════════════════════════════════════════════════════════════════════════ Amaral e Bohrer Advogados · sistema visual Direção B — moderna, tecnológica e editorial. Aprovada por Rafael Mota no gate visual. ══════════════════════════════════════════════════════════════════════════════════════════════ ## Identidade Toda cor de marca foi MEDIDA nos arquivos entregues, não escolhida: --marca-teal #00707E 100% dos pixels opacos do wordmark e do subtítulo "ADVOGADOS" --marca-laranja #F79752 36,6% dos pixels opacos do símbolo --marca-cinza #D0CFCF 23,8% dos pixels opacos do símbolo (o arco) Os demais tons são variações de luminosidade do mesmo matiz teal (186,7°) ou neutros. Nenhum matiz novo entra aqui. ## Contraste · todo par de TEXTO usado no site passa WCAG AA tinta #12212B sobre branco ......... 16,43:1 branco sobre #002E34 ....... 14,58:1 tinta #12212B sobre #F7F7F6 ........ 15,66:1 #BCC7C8 sobre #002E34 ....... 8,43:1 apoio #415E62 sobre branco .......... 6,99:1 laranja sobre #002E34 ....... 6,60:1 apoio #415E62 sobre #F7F7F6 ......... 6,66:1 tinta sobre #F79752 ....... 7,44:1 teal #00707E sobre branco .......... 5,80:1 teal sobre #EAF2F3 ....... 5,11:1 O laranja tem 2,21:1 contra o branco. Ele NUNCA é cor de texto sobre fundo claro — é a tentação mais óbvia de quem mexer nisto depois, porque é a cor bonita do kit. Ele pinta fundo de botão (com tinta escura em cima), cápsula de card, chip de índice, filete e numeral sobre fundo escuro. Sobre o painel #002E34 ele pode ser texto, e aí dá 6,60:1. ## Tipografia · auto-hospedada, sem hotlink Archivo (variável, wght 400-800 e wdth 62-125) nos títulos e no texto; JetBrains Mono (variável, wght 400-700) em rótulo, contador, telefone e metadado. Os arquivos vivem em `src/fontes/` e são publicados em `assets/fontes/`: nada é buscado no Google em tempo de execução, o que tira uma dependência de rede da renderização e um vazamento de IP do visitante para terceiro. Só `archivo-latin.woff2` recebe `preload`, porque é a única que participa da primeira pintura. Precarregar as quatro competiria por banda com o HTML e atrasaria justamente o que se quer acelerar. O `font-display: swap` garante texto legível na fonte de sistema enquanto elas chegam. ══════════════════════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Archivo'; src: url('fontes/archivo-latin.woff2') format('woff2'); font-weight: 400 800; font-stretch: 62% 125%; font-style: normal; font-display: swap; 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: 'Archivo'; src: url('fontes/archivo-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; src: url('fontes/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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: 'JetBrains Mono'; src: url('fontes/jetbrains-mono-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --marca-teal: #00707E; --marca-laranja: #F79752; --marca-cinza: #D0CFCF; --teal: #00707E; --teal-deep: #002E34; --teal-noite: #001F24; --teal-tint: #EAF2F3; --teal-line: #C3D9DC; --ink: #12212B; --muted: #415E62; --paper: #FFFFFF; --bg: #F4F6F6; --gray: #D0CFCF; --orange: #F79752; --orange-hi: #EE8433; /* Largura principal dentro da faixa aprovada de 1240 a 1440. */ --wrap: 1320px; --gut: 28px; --r: 4px; --r-g: 10px; /** * A MEDIDA de leitura é do parágrafo, não da página. * * Era este o defeito central da versão reprovada: a página inteira era espremida em 704px e * ficava uma coluna estreita boiando no meio de 1440px de tela. Agora a página ocupa a largura * toda e quem tem limite é o texto corrido, por `max-width` em ch. */ --medida: 68ch; --medida-curta: 58ch; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sombra: 0 1px 2px rgba(18,33,43,.05), 0 12px 28px -18px rgba(18,33,43,.30); --sombra-alta: 0 2px 6px rgba(18,33,43,.07), 0 28px 60px -30px rgba(18,33,43,.40); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.62; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.06; letter-spacing: -.024em; font-variation-settings: 'wdth' 116, 'wght' 800; } h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.25; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; } .sec-escura a:focus-visible, .sec-noite a:focus-visible, .hero a:focus-visible, .cta-bloco a:focus-visible, .sec-escura button:focus-visible, .sec-noite button:focus-visible { outline-color: var(--orange); } /** * `hidden` tem de ganhar de qualquer `display` de componente. * * `.btn` declara `display: inline-flex`, que vence o `display:none` que o navegador dá ao atributo * `hidden`: o botão "Mostrar mais" continuava ocupando 50px como um retângulo vazio ao fim de toda * busca. Vale para todo componente do sistema, não só para aquele botão. */ [hidden] { display: none !important; } .pular { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: #fff; padding: 14px 20px; text-decoration: none; } .pular:focus { left: 0; } /* ═══════════════════════════════════════════════════════════ layout */ .faixa { padding-inline: clamp(20px, 4vw, 48px); } .limite { max-width: var(--wrap); margin-inline: auto; } .mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 500; line-height: 1.5; } .tex-pontos { background-image: radial-gradient(circle at 1px 1px, rgba(0,112,126,.18) 1px, transparent 1.6px); background-size: 24px 24px; } .tex-grade { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px); } /* Ritmo vertical: uma escala só, usada por todas as seções. */ .sec { padding-block: clamp(56px, 8vw, 112px); } .sec-curta { padding-block: clamp(40px, 5vw, 72px); } .sec-clara { background: var(--bg); } .sec-escura { background: var(--teal-deep); color: #fff; position: relative; overflow: hidden; } .sec-noite { background: var(--teal-noite); color: #fff; position: relative; overflow: hidden; } .sec + .sec { border-top: 1px solid var(--gray); } .sec-escura + .sec, .sec-noite + .sec, .sec + .sec-escura, .sec + .sec-noite { border-top: 0; } .sec-cabeca { margin-bottom: clamp(32px, 4vw, 56px); } .sec-num { display: inline-block; color: var(--teal); border-bottom: 3px solid var(--orange); padding-bottom: 5px; margin-bottom: 18px; } .sec-escura .sec-num, .sec-noite .sec-num { color: var(--orange); } /** * Título de capítulo. O `ch` existe para o caso de largura total; dentro de `.intro-grade` quem * limita é a coluna de 5fr, e dois limites disputando davam títulos de cinco linhas numa caixa * estreita — o mesmo defeito da versão reprovada, agora em escala de subtítulo. */ .sec h2 { font-size: clamp(1.8rem, 1.15rem + 1.9vw, 2.8rem); max-width: 22ch; text-wrap: balance; } .intro-grade h2 { max-width: none; } .sec-lede { color: var(--muted); max-width: var(--medida); margin-top: 20px; font-size: 1.075rem; } .sec-escura .sec-lede, .sec-noite .sec-lede { color: #B9C8CA; } /* ═══════════════════════════════════════════════════════════ botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--r); text-decoration: none; font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; border: 1px solid transparent; cursor: pointer; transition: background-color .16s, border-color .16s, color .16s, transform .12s; } .btn:active { transform: translateY(1px); } .btn-1 { background: var(--orange); color: var(--ink); border-color: var(--orange); } .btn-1:hover { background: var(--orange-hi); border-color: var(--orange-hi); } .btn-2 { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-2:hover { background: var(--ink); color: var(--paper); } .btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .btn-claro:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-p { min-height: 44px; padding: 0 18px; font-size: 14.5px; } .acoes { display: flex; flex-wrap: wrap; gap: 14px; } /* ═══════════════════════════════════════════════════════════ cabeçalho */ /** * Faixa de utilidade: moldura, não sobra. * * Ela tinha um filho só, encostado à direita, e 90% de vazio à esquerda. Pior: usava `--teal-deep`, * a MESMA cor de `.pag-cabeca`, então nas páginas internas ela lia como uma fatia do hero que tinha * escapado para cima da linha branca — justamente o lado que o dono reprovou. Agora usa `--ink`, a * cor do rodapé, e abre com o mesmo filete laranja que fecha a página lá embaixo. As duas pontas do * documento passam a rimar, e a faixa vira decisão de desenho. */ .topo-utilidade { display: none; background: var(--ink); color: #fff; border-top: 4px solid var(--orange); } .topo-utilidade .faixa { display: flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 46px; } .topo-selo { color: #94A6A8; } .topo-utilidade .contato { display: flex; gap: 22px; } .topo-utilidade a { color: #DCE7E8; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; } .topo-utilidade a:hover { color: var(--orange); } /* Anel de foco visível sobre a faixa escura, e com folga para não ser cortado pelo topo. */ .topo-utilidade a:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; } .topo { background: var(--paper); border-bottom: 1px solid var(--gray); position: relative; z-index: 40; } .topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; } .marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; } .marca img { width: 176px; height: auto; } .rodape .marca { min-height: 48px; } .nav-mestre { display: none; flex: none; } .nav-mestre > ul { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-mestre a, .sub > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; } .nav-mestre a:hover, .sub > summary:hover { color: var(--teal); border-bottom-color: var(--orange); } .nav-mestre a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--orange); } .sub > summary { list-style: none; } .sub > summary::-webkit-details-marker, .sub > summary::marker { display: none; content: ''; } .sub[open] > summary { color: var(--teal); border-bottom-color: var(--orange); } .sub .chev { transition: transform .14s ease; } .sub[open] .chev { transform: rotate(180deg); } .nav-mestre .tem-sub { position: relative; } .nav-mestre .sub-lista { display: block; position: absolute; left: 0; top: calc(100% + 12px); z-index: 50; min-width: 300px; padding: 8px; list-style: none; background: var(--paper); border: 1px solid var(--ink); border-top: 4px solid var(--orange); box-shadow: var(--sombra-alta); } .nav-mestre .tem-sub:nth-last-child(-n+3) .sub-lista { left: auto; right: 0; } .sub-lista a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; font-size: 14.5px; border-bottom: 1px solid var(--teal-tint); } .sub-lista li:last-child a { border-bottom: 0; } .sub-lista a:hover { background: var(--teal-tint); color: var(--teal); } .sub-lista .sub-tudo { color: var(--teal); font-family: var(--mono); text-transform: uppercase; letter-spacing: .11em; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--gray); } .topo-contato { display: none; align-items: center; gap: 10px; flex: none; } .menu-movel { position: relative; } .menu-movel > summary { list-style: none; cursor: pointer; display: list-item; min-height: 46px; padding: 12px 18px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; white-space: nowrap; } .menu-movel > summary::-webkit-details-marker, .menu-movel > summary::marker { display: none; content: ''; } .menu-movel[open] > summary { background: var(--ink); color: var(--paper); } .menu-gaveta { position: absolute; right: 0; top: calc(100% + 14px); z-index: 60; width: min(90vw, 340px); background: var(--paper); border: 1px solid var(--ink); border-top: 4px solid var(--orange); box-shadow: var(--sombra-alta); padding: 10px; max-height: min(78vh, 660px); overflow-y: auto; overscroll-behavior: contain; } .nav-movel { list-style: none; } .nav-movel > li { border-bottom: 1px solid var(--teal-tint); } .nav-movel > li:last-child { border-bottom: 0; } .menu-gaveta a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; } .menu-gaveta a:hover { background: var(--teal-tint); color: var(--teal); } .menu-gaveta .sub > summary { width: 100%; justify-content: space-between; padding: 0 14px; font-size: 15px; border-bottom: 0; } .menu-gaveta .sub-lista { list-style: none; margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--orange); } .menu-gaveta .sub-lista a { min-height: 46px; font-size: 14.5px; border-bottom: 0; } .menu-gaveta .btn { margin-top: 14px; width: 100%; min-height: 54px; font-size: 15.5px; font-weight: 700; } /* O telefone também na gaveta: abaixo de 1280 ele não existe em nenhum outro ponto do cabeçalho. */ .gaveta-contato { border-top: 1px solid var(--gray); margin-top: 10px; padding: 14px 14px 4px; } .gaveta-contato > .mono { display: block; color: var(--teal); margin-bottom: 4px; } .gaveta-contato .contato { display: grid; } .gaveta-contato a { padding: 0; min-height: 46px; font-weight: 600; } /* ═══════════════════════════════════════════════════════════ hero */ .hero { background: var(--teal-noite); color: #fff; position: relative; overflow: hidden; } .hero-tex { position: absolute; inset: 0; pointer-events: none; opacity: .5; } .hero-in { position: relative; padding-block: clamp(48px, 7vw, 96px); } .hero-grade { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; } .olho { display: inline-flex; align-items: center; gap: 11px; color: var(--orange); } .olho .ponto { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex: none; } /** * O H1 aprovado tem 118 caracteres e é literal: não dá para encurtar o texto, então o tamanho é que * cede. Com 3,9rem e 17ch ele saía em sete linhas e engolia a dobra inteira. Quem limita a largura * aqui é a coluna de 7fr da grade, e não um `ch` fixo — dois limites disputando dão coluna estreita. */ .hero h1 { font-size: clamp(1.8rem, .95rem + 2.3vw, 2.95rem); margin-top: 20px; color: #fff; text-wrap: balance; } .hero-lede { margin-top: 24px; color: #B9C8CA; font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); max-width: 56ch; } .hero .acoes { margin-top: 34px; } .hero-lado { display: grid; gap: 26px; align-content: start; } /* Painel de indicadores: dado real, em caixa própria, e não um número solto sobre o fundo. */ .hero-painel { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); border-radius: var(--r-g); padding: 4px 22px; } .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .stat:last-child { border-bottom: 0; } .stat-r { color: #93AFB2; max-width: 15ch; } .stat-v { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; font-variation-settings: 'wdth' 120, 'wght' 800; color: #fff; text-align: right; line-height: 1; } .stat-txt .stat-v { font-size: clamp(.95rem, 1.6vw, 1.15rem); letter-spacing: -.01em; max-width: 10ch; } /* Composição gráfica: malha de plataformas, desenhada, sem fotografia. */ .hero-arte { margin-top: 30px; } .hero-arte svg { width: 100%; height: auto; display: block; } /** * Bloco de abertura de capítulo em DUAS colunas: cabeça à esquerda, texto corrido à direita. * * É o que impede a página de virar uma pilha de blocos iguais empilhados. O título fica curto e * largo de um lado, o texto mantém a medida de leitura do outro, e a seção ocupa a largura toda * sem esticar nenhum parágrafo além do confortável. */ .intro-grade { display: grid; gap: clamp(24px, 3vw, 52px); align-items: start; margin-bottom: clamp(32px, 4vw, 52px); } .intro-grade .sec-cabeca { margin-bottom: 0; } .intro-texto p { color: var(--muted); max-width: var(--medida); font-size: 1.03rem; } .intro-texto p + p { margin-top: 18px; } .sec-escura .intro-texto p, .sec-noite .intro-texto p { color: #B9C8CA; } /* ═══════════════════════════════════════════════════════════ tipos de problema */ .tipos { display: grid; gap: 2px; background: var(--gray); border: 1px solid var(--gray); border-radius: var(--r-g); overflow: hidden; } .tipo { background: var(--paper); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; } .tipo-ico { color: var(--teal); } .tipo h3 { font-size: 1.06rem; font-variation-settings: 'wdth' 110, 'wght' 700; font-weight: 700; } .tipo p { color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ═══════════════════════════════════════════════════════════ navegador de problemas */ .navegador { display: grid; gap: var(--gut); } .plat { display: flex; flex-direction: column; gap: 14px; position: relative; background: var(--paper); border: 1px solid var(--gray); border-radius: var(--r-g); padding: 26px 24px; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; } .plat::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 4px; border-radius: var(--r-g) var(--r-g) 0 0; background: var(--teal); } .plat-destaque::before { background: var(--orange); } .plat:hover { border-color: var(--teal); box-shadow: var(--sombra); transform: translateY(-2px); } .plat-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .plat-ico { color: var(--teal); flex: none; } .plat h3 { font-size: 1.18rem; font-variation-settings: 'wdth' 110, 'wght' 700; font-weight: 700; } .plat p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 46ch; } .plat-rot { color: var(--teal); } .plat-destaque { background: var(--teal-tint); border-color: var(--teal-line); } .plat-destaque .plat-rot { color: var(--orange-hi); } .plat-destaque h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .plat-destaque p { font-size: 15.5px; } .plat-ir { margin-top: auto; padding-top: 6px; color: var(--teal); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); background: var(--teal-tint); border-radius: 2px; padding: 4px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; } .plat-destaque .n { background: var(--paper); } /* ═══════════════════════════════════════════════════════════ painel Mercado Livre */ .painel-ml { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; position: relative; } .painel-ml p { color: #B9C8CA; max-width: var(--medida); } .painel-ml p + p { margin-top: 18px; } .painel-ml-cta { margin-top: 30px; } .situacoes-rot { display: block; color: var(--orange); margin-bottom: 14px; } .situacoes { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-g); padding: 22px; background: rgba(255,255,255,.03); } .situacoes ul { display: block; } .situacoes li { list-style: none; position: relative; padding: 13px 0 13px 26px; color: #DCE7E8; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 15px; line-height: 1.45; max-width: var(--medida); } .situacoes li:last-child { border-bottom: 0; } .situacoes li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 11px; height: 2px; background: var(--orange); } .ml-conteudos { margin-top: clamp(36px, 4vw, 56px); position: relative; } .ml-links { display: grid; gap: 10px; } .ml-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 18px; text-decoration: none; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.35; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); } .ml-links a:hover { background: rgba(255,255,255,.07); border-color: var(--orange); } .ml-links .arw { flex: none; color: var(--orange); } /* ═══════════════════════════════════════════════════════════ trilho Meta */ .trilho { display: grid; gap: var(--gut); } .trilho-card { background: var(--paper); border: 1px solid var(--gray); border-radius: var(--r-g); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; } .trilho-card:hover { border-color: var(--teal); box-shadow: var(--sombra); } .trilho-card h3 { font-size: 1.05rem; font-variation-settings: 'wdth' 108, 'wght' 700; font-weight: 700; } .trilho-card p { color: var(--muted); font-size: 14px; line-height: 1.5; } .trilho-ico { color: var(--teal); } /* ═══════════════════════════════════════════════════════════ etapas */ .etapas { display: grid; gap: var(--gut); counter-reset: etapa; } .etapa { position: relative; padding-top: 26px; border-top: 2px solid rgba(255,255,255,.20); } .etapa-n { display: block; color: var(--orange); font-family: var(--mono); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .etapa h3 { font-size: 1.12rem; margin-top: 16px; font-variation-settings: 'wdth' 108, 'wght' 700; font-weight: 700; } .etapa p { margin-top: 12px; color: #B9C8CA; font-size: 15px; max-width: var(--medida); } /* Notas de fecho do capítulo: dois textos curtos lado a lado, sem virar seção nova. */ .notas { display: grid; gap: clamp(28px, 3vw, 44px); margin-top: clamp(40px, 5vw, 64px); } .nota { border-left: 4px solid var(--orange); padding: 4px 0 4px 22px; } .nota h3 { font-size: 1.12rem; font-variation-settings: 'wdth' 110, 'wght' 700; font-weight: 700; } .nota p { margin-top: 14px; color: #B9C8CA; max-width: var(--medida); font-size: 15.5px; } .nota p + p { margin-top: 12px; } /* ═══════════════════════════════════════════════════════════ cards editoriais */ .editorial { display: grid; gap: var(--gut); } .ed-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; background: var(--paper); border: 1px solid var(--gray); border-radius: var(--r-g); padding: 24px 22px; transition: border-color .16s, box-shadow .16s; } .ed-card:hover { border-color: var(--teal); box-shadow: var(--sombra); } .ed-card .servico { color: var(--teal); } .ed-card h3 { font-size: 1.06rem; line-height: 1.32; font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; } .ed-card .ler { margin-top: auto; padding-top: 10px; color: var(--teal); font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; } /* ═══════════════════════════════════════════════════════════ institucional */ .inst-grade { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; } .inst-texto p { color: var(--muted); max-width: var(--medida); } .inst-texto p + p { margin-top: 18px; } .acoes-fim { margin-top: clamp(26px, 3vw, 38px); } .ident { background: var(--paper); border: 1px solid var(--gray); border-left: 4px solid var(--teal); border-radius: var(--r); padding: 26px; } .ident dl { display: grid; gap: 18px; } .ident dt { color: var(--teal); } .ident dd { margin: 5px 0 0; font-weight: 700; font-size: 15.5px; } /* ═══════════════════════════════════════════════════════════ CTA */ .cta-bloco { position: relative; overflow: hidden; border-radius: var(--r-g); background: var(--teal-noite); color: #fff; padding: clamp(32px, 5vw, 64px); } .cta-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; position: relative; } .cta-bloco .sec-num { color: var(--orange); border-bottom-color: var(--orange); } .cta-bloco h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); max-width: 18ch; color: #fff; } .cta-bloco p { margin-top: 18px; color: #B9C8CA; max-width: var(--medida); } /** * Canais de contato do CTA. Grade de duas colunas, e não flex numa linha só: o e-mail do escritório * é uma palavra longa que não quebra, e num flex de uma linha ele empurrava o cartão para 376px * dentro de uma tela de 320 — scroll horizontal na página inteira, por causa de um ``. */ .cta-canais { display: grid; gap: 10px; } .cta-canais a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; min-height: 60px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; } .cta-canais a:hover { background: rgba(255,255,255,.08); border-color: var(--orange); } .cta-canais .rot { grid-column: 1; color: #A8BFC1; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; } .cta-canais .arw { grid-column: 2; grid-row: 1 / span 2; color: var(--orange); } /* ═══════════════════════════════════════════════════════════ sócios */ /** * Cartão de sócio: retrato à esquerda, identificação e currículo à direita. * * O currículo NÃO é bloco de texto — o pedido reprova isso explicitamente. Função vira rótulo em * monoespaçada, nome vira título, o texto fica na medida de leitura e as credenciais viram lista * com filete, uma afirmação por linha. * * `.socio-sem-foto` existe porque as fotografias podem não estar disponíveis no momento do build. * O cartão então ocupa a largura toda e continua parecendo acabado: ausência de foto não pode virar * moldura vazia nem espaço reservado. */ .socios { display: grid; gap: clamp(20px, 2.5vw, 32px); margin-top: clamp(28px, 3vw, 40px); } .socio { display: grid; gap: clamp(18px, 2vw, 28px); align-items: start; background: var(--paper); border: 1px solid var(--gray); border-radius: var(--r-g); padding: clamp(20px, 2.4vw, 30px); position: relative; overflow: hidden; } .socio::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 4px; background: var(--teal); } .sec-clara .socio { background: var(--paper); } /** * Sem foto, sem coluna de foto. * * Dois nomes de classe (0,2,0) para ganhar de `.socio-compacto` (0,1,0) dentro das media queries: * sem isto, o cartão sem retrato mantinha a coluna de 132px reservada e o currículo saía espremido * numa tira estreita, com um buraco à esquerda — exatamente a aparência de imagem quebrada que a * ausência de foto não pode ter. */ .socio.socio-sem-foto { grid-template-columns: minmax(0, 1fr); } /** * Sem retrato, o cartão vira DUAS colunas de texto em vez de uma faixa larga com 526px de branco * do lado direito de cada parágrafo — que é exatamente a silhueta de uma imagem que não carregou. * Com foto, a coluna da esquerda é o retrato e esta regra não vale. */ @media (min-width: 900px) { .socio.socio-sem-foto:not(.socio-compacto) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .socio.socio-sem-foto:not(.socio-compacto) .socio-corpo { display: contents; } .socio.socio-sem-foto:not(.socio-compacto) .socio-funcao, .socio.socio-sem-foto:not(.socio-compacto) h3, .socio.socio-sem-foto:not(.socio-compacto) .socio-texto { grid-column: 1; } .socio.socio-sem-foto:not(.socio-compacto) .socio-cred { grid-column: 2; grid-row: 1 / span 9; margin-top: 0; align-self: start; } } .socio-media { position: relative; } .retrato { display: block; } .retrato img { width: 100%; height: auto; display: block; border-radius: var(--r); background: var(--teal-tint); } .socio-funcao { color: var(--teal); } .socio-resumo { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; } .socio-ir { margin-top: 18px; color: var(--teal); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .socios-indice .socio { height: 100%; } .socio h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-top: 8px; } .socio-texto { margin-top: 16px; color: var(--muted); max-width: var(--medida); font-size: 1.02rem; } .socio-cred { list-style: none; margin-top: 22px; border-top: 1px solid var(--teal-line); } .socio-cred li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--teal-line); font-size: 15px; font-weight: 600; line-height: 1.4; } .socio-cred li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 11px; height: 2px; background: var(--orange); } /* Na home os dois cartões são links inteiros para o perfil completo. */ .socios-home { margin-top: clamp(32px, 4vw, 48px); } .socio-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-g); } .socio-link .socio { transition: border-color .16s, box-shadow .16s, transform .16s; height: 100%; } .socio-link:hover .socio { border-color: var(--teal); box-shadow: var(--sombra); transform: translateY(-2px); } /* Números institucionais: dado real, tratado como dado. */ .inst-numeros { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 52px); margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--gray); } .inst-num { display: grid; gap: 4px; } .inst-num-v { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; font-variation-settings: 'wdth' 120, 'wght' 800; line-height: 1; color: var(--teal); } .inst-num-r { color: var(--muted); } /* ═══════════════════════════════════════════════════════════ institucional em capítulos */ .corpo-inst { font-size: 1.03rem; } .corpo-inst > :first-child { margin-top: 0; } .corpo-inst h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); margin: 2rem 0 .6rem; } .sec-cabeca-solta { margin-bottom: clamp(24px, 3vw, 36px); } .trilho-estatico { cursor: default; } .trilho-estatico:hover { border-color: var(--gray); box-shadow: none; } /* Fecho de contato das internas: mesmo painel do CTA da home, sem a numeração de capítulo. */ .fecho .sec-num { border-bottom-color: var(--orange); } /* ═══════════════════════════════════════════════════════════ rodapé */ .rodape { background: var(--ink); color: #C9D3D4; } .rodape-faixa { height: 4px; background: var(--orange); } .rodape-grade { display: grid; gap: 36px; padding-block: clamp(48px, 6vw, 72px) 40px; } .rodape-sobre p { margin-top: 20px; font-size: 15px; max-width: 36ch; color: #A7B4B6; } /** * Rótulo de coluna, e não `

`. * * Eram três `

` de cromo repetidos em 524 páginas, um deles duplicando "Contato", que já é * título de seção em várias delas. O esqueleto de títulos do documento é do conteúdo; navegação de * rodapé se nomeia com `aria-label`, que é o que o `