/* ========================================================================== Vitrine GestorPro — folha única (specs 056 e 057; sem etapa de build) Organização: tokens → base → componentes → páginas → responsivo. O tema vem de `data-tema` no , escrito por um script bloqueante no . Media query de `prefers-color-scheme` NÃO é usada para pintar: se fosse, a escolha manual do usuário perderia para a do sistema em metade das regras. O script resolve a preferência uma vez e o CSS só olha o atributo. ========================================================================== */ /* --- tokens --------------------------------------------------------------- A COR é da marca; o RESTO é do design system dos CRMs. A spec 056 usava os tokens "Aurora" dos CRMs inteiros, roxo incluído, com o argumento de que divergir faria a demonstração parecer um print colado. O argumento vale — e a conclusão se inverte na 057: o que não pode divergir é raio, sombra, tipografia e espaçamento, que é o que faz a réplica parecer da mesma casa. A cor de marca identifica a EMPRESA, e usar a do produto na página da empresa é o rabo abanando o cachorro. Os três valores abaixo saíram da contagem de pixels de `static/img/logo.png`: azul do traço do "G", ciano dos nós do circuito, verde do "Pro". ⚠️ O verde do logo (#30f084) REPROVA em contraste sobre branco (≈1.7:1). Ele é cor de SUPERFÍCIE — fundo de selo, brilho, traço grosso — e nunca de texto. Onde precisa ser lido, use `--verde-txt`, que já é o par claro/escuro certo. (É a mesma família da armadilha do "chroma floor" registrada no CLAUDE.md, com o sinal trocado: lá o número parecia errado e estava certo; aqui o número está certo e a cor é que não serve para texto.) ------------------------------------------------------------------------- */ :root { --bg: #f4f7fb; --surface: #ffffff; --surface-2: #eef3f9; --border: #dde6ef; --text: #0b1524; --text-2: #4a5a70; --text-3: #8493a6; --marca: #1884c0; /* azul do "estor" e do traço do G */ --marca-2: #249ccc; /* ciano dos nós do circuito */ --marca-fraca:#e3f1fa; --acento: #22c55e; /* verde do "Pro", já escurecido para superfície */ --verde-logo: #30f084; /* o verde exato do arquivo. SÓ superfície. */ --verde-txt: #15803d; /* o par legível do verde, para texto */ --trilha: linear-gradient(90deg, #1884c0 0%, #249ccc 55%, #22c55e 100%); /* O escuro do herói é fixo nos dois temas: é a "capa" da marca, e o logo nasceu para viver sobre fundo escuro. */ --noite: #081321; --noite-2: #0e2033; --noite-txt: #e8f2fb; --noite-txt-2:#9fb6cc; --ok: #0f9d68; --ok-fraca: #e7faf2; --new: #1884c0; --new-fraca: #e3f1fa; --wip: #b8730a; --wip-fraca: #fff7e8; --next: #64748b; --next-fraca: #eef1f7; --perda: #e11d48; --raio: 16px; --raio-p: 12px; --sombra: 0 8px 24px -10px rgba(11,21,36,.16), 0 2px 6px rgba(11,21,36,.05); --sombra-f: 0 28px 64px -18px rgba(11,21,36,.30), 0 8px 20px -10px rgba(11,21,36,.14); --topo-h: 70px; --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; } html[data-tema="escuro"] { --bg: #070e18; --surface: #0e1928; --surface-2: #121f31; --border: #1f3145; --text: #e8f2fb; --text-2: #9fb6cc; --text-3: #6a819a; --marca: #35a8e0; --marca-2: #4fc4e6; --marca-fraca:rgba(53,168,224,.16); --acento: #34d399; --verde-txt: #4ade80; --ok: #34d399; --ok-fraca: rgba(16,185,129,.14); --new: #4fc4e6; --new-fraca: rgba(79,196,230,.15); --wip: #fbbf24; --wip-fraca: rgba(245,158,11,.14); --next: #94a3b8; --next-fraca: rgba(100,116,139,.16); --perda: #fb7185; --sombra: 0 8px 24px -10px rgba(0,0,0,.6); --sombra-f: 0 28px 64px -18px rgba(0,0,0,.7); } /* --- base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Hierarquia editorial (spec 057): a 056 usava três tamanhos parecidos e tudo centralizado, e a ausência de hierarquia lê como ausência de edição. */ h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.035em; } h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; } h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); font-weight: 750; } h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; } p { margin: 0 0 1em; color: var(--text-2); } a { color: var(--marca); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; } .pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--marca); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .pular:focus { left: 0; } .wrap { width: min(1200px, 100% - 48px); margin-inline: auto; } .wrap-medio { width: min(820px, 100% - 48px); margin-inline: auto; } /* --- botões --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--raio-p); font-size: .93rem; font-weight: 650; font-family: inherit; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-g { padding: 14px 26px; font-size: 1rem; } /* O primário é a trilha do circuito, não um bloco chapado: é a cor da marca inteira num só elemento, e é o botão do WhatsApp — o mais clicado do site. */ .btn-primario { background: var(--trilha); color: #fff; background-size: 160% 100%; box-shadow: 0 4px 16px -4px rgba(24,132,192,.45); } .btn-primario:hover { background-position: 100% 0; box-shadow: 0 8px 22px -6px rgba(34,197,94,.45); } .btn-fantasma { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-fantasma:hover { background: var(--surface-2); border-color: var(--marca); } .btn:disabled { opacity: .55; cursor: progress; transform: none; } .btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: var(--raio-p); background: var(--surface); color: var(--text); cursor: pointer; } .btn-icone:hover { background: var(--surface-2); } /* Seta que anda: o único movimento de hover da folha. Repetido em toda a página, ele vira a assinatura de "isto leva a algum lugar". */ .link-seta { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 650; color: var(--marca); } .link-seta:hover { text-decoration: none; } .link-seta svg { transition: transform .16s ease; } .link-seta:hover svg { transform: translateX(4px); } /* --- selos ---------------------------------------------------------------- */ .selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } /* O ponto do selo é o "nó" do circuito — o motivo da marca no menor tamanho em que ele ainda cabe. */ .selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .selo.ok { color: var(--ok); background: var(--ok-fraca); } .selo.new { color: var(--new); background: var(--new-fraca); } .selo.wip { color: var(--wip); background: var(--wip-fraca); } .selo.next { color: var(--next); background: var(--next-fraca); } .selo.mini { font-size: .62rem; padding: 1px 7px; letter-spacing: .03em; } /* --- ícones (mask + currentColor: seguem o tema sem duplicar arquivo) ------ */ .icone { display: inline-block; width: 26px; height: 26px; flex: none; background-color: var(--marca); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icone-fluxo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h11M3 12h7M3 18h13'/%3E%3Cpath d='M17 4l4 4-4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h11M3 12h7M3 18h13'/%3E%3Cpath d='M17 4l4 4-4 4'/%3E%3C/svg%3E"); } .icone-cadeado { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); } .icone-predio { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='8' height='17'/%3E%3Crect x='13' y='9' width='8' height='12'/%3E%3Cpath d='M6 8h2M6 12h2M6 16h2M16 13h2M16 17h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='8' height='17'/%3E%3Crect x='13' y='9' width='8' height='12'/%3E%3Cpath d='M6 8h2M6 12h2M6 16h2M16 13h2M16 17h2'/%3E%3C/svg%3E"); } .icone-grafico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8 16v-5M13 16V8M18 16v-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8 16v-5M13 16V8M18 16v-3'/%3E%3C/svg%3E"); } .icone-email { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } .icone-tema, .icone-menu { width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .icone-tema { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E"); } html[data-tema="escuro"] .icone-tema { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 14.5A8.5 8.5 0 019.5 4 8.5 8.5 0 1020 14.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 14.5A8.5 8.5 0 019.5 4 8.5 8.5 0 1020 14.5z'/%3E%3C/svg%3E"); } .icone-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); } /* --- topo ----------------------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 50; height: var(--topo-h); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .topo.rolou { border-bottom-color: var(--border); } .topo-linha { display: flex; align-items: center; gap: 22px; height: var(--topo-h); } .marca { display: inline-flex; align-items: center; flex: none; } .marca:hover { text-decoration: none; } .marca img { height: 34px; width: auto; display: block; } /* No escuro o azul do logo perde no fundo quase preto; um brilho de trás devolve o contorno sem tocar no arquivo. */ html[data-tema="escuro"] .marca img { filter: drop-shadow(0 0 10px rgba(53,168,224,.35)); } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav > a, .nav-alvo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--raio-p); color: var(--text-2); font-size: .93rem; font-weight: 550; font-family: inherit; background: none; border: 0; cursor: pointer; } .nav > a:hover, .nav-alvo:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav > a.atual, .nav-alvo.atual { color: var(--marca); background: var(--marca-fraca); } .nav-grupo { position: relative; } .nav-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: grid; gap: 2px; width: 330px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra-f); } .nav-menu[hidden] { display: none; } .nav-menu a { display: grid; gap: 3px; padding: 11px 13px; border-radius: var(--raio-p); } .nav-menu a:hover { background: var(--surface-2); text-decoration: none; } .nav-menu-nome { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); font-size: .93rem; } .nav-menu-txt { font-size: .82rem; color: var(--text-3); line-height: 1.4; } .topo-acoes { display: flex; align-items: center; gap: 8px; flex: none; } .so-mobile { display: none; } /* --- herói ----------------------------------------------------------------- Faixa escura nos DOIS temas: é a capa da marca, e o logo nasceu para viver sobre fundo escuro. O fundo é a placa de circuito — grade fina, do jeito que uma PCB é, e não o gradiente radial roxo que todo SaaS usa desde 2021. ------------------------------------------------------------------------- */ .heroi { position: relative; overflow: hidden; padding: 92px 0 104px; background: var(--noite); color: var(--noite-txt); } .heroi::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(36,156,204,.07) 1px, transparent 1px) 0 0 / 100% 46px, linear-gradient(90deg, rgba(36,156,204,.07) 1px, transparent 1px) 0 0 / 46px 100%, radial-gradient(60% 70% at 18% 40%, rgba(24,132,192,.30), transparent 72%), radial-gradient(46% 60% at 82% 62%, rgba(34,197,94,.16), transparent 72%); -webkit-mask-image: radial-gradient(120% 100% at 30% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(120% 100% at 30% 40%, #000 40%, transparent 100%); } /* Emenda com a próxima seção: a placa "termina" numa linha de trilha, em vez de num corte reto. */ .heroi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--trilha); opacity: .8; } .heroi-grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; align-items: center; } .heroi-texto h1 { color: #fff; margin-bottom: 22px; } .heroi-olho { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(36,156,204,.14); border: 1px solid rgba(36,156,204,.3); font-size: .82rem; font-weight: 600; color: var(--noite-txt); } .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-logo); box-shadow: 0 0 0 4px rgba(48,240,132,.18); animation: pulsa 2.4s ease-in-out infinite; } @keyframes pulsa { 50% { box-shadow: 0 0 0 8px rgba(48,240,132,.04); } } .heroi-sub { font-size: 1.16rem; max-width: 52ch; color: var(--noite-txt-2); } .heroi-botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .heroi .btn-fantasma { background: rgba(255,255,255,.06); color: var(--noite-txt); border-color: rgba(255,255,255,.18); } .heroi .btn-fantasma:hover { background: rgba(255,255,255,.12); border-color: var(--marca-2); } /* --- o diagrama de circuito ------------------------------------------------ Ver `templates/partials/circuito.html`: é a arquitetura real (servidor no centro, três produtos nas pontas) desenhada com o gesto do "G" da logo. ------------------------------------------------------------------------- */ .circuito { width: 100%; height: auto; display: block; overflow: visible; } .ct-trilha { fill: none; stroke: rgba(36,156,204,.34); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ct-pulso { fill: none; stroke: url(#ct); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; /* O traço curto que percorre a trilha. `pathLength` normalizado seria mais limpo, mas o dash em unidades de usuário basta aqui e evita um atributo a mais em cada path do template. */ stroke-dasharray: 46 460; animation: correr 3.6s linear infinite; } @keyframes correr { from { stroke-dashoffset: 460; } to { stroke-dashoffset: -46; } } @media (prefers-reduced-motion: reduce) { .ct-pulso { animation: none; stroke-dasharray: none; opacity: .55; } } .ct-via { fill: var(--noite); stroke: rgba(36,156,204,.55); stroke-width: 2; } .ct-nucleo { fill: rgba(36,156,204,.08); stroke: rgba(36,156,204,.42); stroke-width: 1.6; } .ct-no { stroke: var(--noite); stroke-width: 3; } .ct-no.est-ok { fill: var(--verde-logo); } .ct-no.est-new { fill: #4fc4e6; } .ct-no.est-wip { fill: #fbbf24; } .ct-nome { fill: #fff; font-family: var(--fonte-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; dominant-baseline: middle; } .ct-estado { font-family: var(--fonte); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; dominant-baseline: middle; } .ct-estado.est-ok { fill: var(--verde-logo); } .ct-estado.est-new { fill: #4fc4e6; } .ct-estado.est-wip { fill: #fbbf24; } /* --- seções --------------------------------------------------------------- */ .secao { padding: 86px 0; } .secao-alt { background: var(--surface-2); } /* O divisor de circuito: uma trilha fina com um nó, no lugar da borda de 1px. Custa nada e amarra a página à marca em toda dobra. */ .secao-alt { position: relative; } .secao-alt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--marca) 22%, var(--acento) 78%, transparent); opacity: .35; } .secao-alt::after { content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--marca-2); opacity: .8; } .secao-topo { max-width: 60ch; margin-bottom: 44px; } .secao-topo-esq { margin-bottom: 34px; } .secao-topo-linha { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .secao-topo-linha h2 { margin-bottom: 0; } .olho { font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--marca); margin-bottom: 12px; } .secao-sub { font-size: 1.06rem; } .frase-grande { font-family: var(--fonte-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: var(--text); max-width: 30ch; margin-bottom: 1.1em; } .texto-longo p { font-size: 1.08rem; max-width: 68ch; margin-bottom: 1.25em; } .texto-longo p:first-child::first-letter { float: left; font-family: var(--fonte-display); font-size: 3.3em; line-height: .82; font-weight: 800; color: var(--marca); padding: .06em .12em 0 0; } /* --- ao vivo (home) ------------------------------------------------------- */ .ao-vivo-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; } .ao-vivo-topo > div { max-width: 58ch; } .ao-vivo-topo h2 { margin-bottom: .35em; } .ao-vivo-topo p { margin-bottom: 0; } /* --- moldura do app (as demonstrações) ------------------------------------- O