/* ========================================================================== Dr. Bruno Brito — ponte entre o CSS original e o DOM do Elementor O site.css continua sendo a autoridade visual e permanece idêntico ao do site HTML. Este arquivo só resolve as diferenças de marcação que o Elementor introduz: 1. o header vive dentro de

; 2. cada widget é um

que recebe as classes de design, com o conteúdo real num elemento interno; 3. os containers do Elementor forçam flex-direction por variável, o que vence as regras de direção do site.css; 4. o widget de botão põe a classe no wrapper, mas quem o visitante clica é o interno. Carrega depois do site.css. Onde há disputa com o CSS do Elementor, os seletores levam .brunobrito (classe do ) para ganhar por especificidade em vez de !important. ========================================================================== */ /* ------------------------------------------------------- header sticky --- */ /* No HTML original o

era filho direto do e grudava no topo. Aqui ele fica dentro da location do Elementor, que é quem precisa ser sticky — senão o topbar só "gruda" dentro da própria altura. */ .brunobrito .elementor-location-header { position: sticky; top: 0; z-index: 60; } .admin-bar .elementor-location-header { top: 32px; } @media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } } /* O container .topbar dentro da location não precisa repetir o sticky. */ .brunobrito .elementor-location-header .topbar { position: static; } /* --------------------------------------------------- direção dos flex --- */ /* .e-con.e-flex declara --flex-direction:column e .e-con-full.e-flex aplica essa variável com especificidade (0,2,0), vencendo as regras de direção do site.css. Onde o design original vira coluna no mobile, é preciso repetir aqui com especificidade suficiente. */ @media (max-width: 820px) { .brunobrito .e-con.cta-band, .brunobrito .e-con.evidence-band { flex-direction: column; align-items: flex-start; } } .brunobrito .e-con.cta-band--stack, .brunobrito .e-con.next-step--stack { flex-direction: column; align-items: flex-start; } /* Todo container do Elementor nasce com width:100%. No original, a primeira coluna da .evidence-band é um

comum, do tamanho do conteúdo, com flex:none — aqui ela ocuparia a faixa inteira e empurraria o texto para fora. */ .brunobrito .e-con.evidence-band > .e-con:first-child { width: auto; } @media (max-width: 700px) { .brunobrito .e-con.footer-note, .brunobrito .e-con.footer-slim-row { flex-direction: column; } } /* ------------------------------------------------------------ larguras --- */ /* O Elementor prende todo widget com `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` — uma regra de especificidade (0,4,0). Quando a classe de design cai num elemento *interno* (um

dentro do widget), o site.css continua valendo. Mas quando a classe cai no próprio wrapper do widget, a medida de leitura é perdida e o texto ocupa a linha inteira. Abaixo, só esses casos — as mesmas medidas do site.css, com especificidade suficiente para sobreviver. Mantendo o clamp de 100% para todo o resto. / .brunobrito .e-con > .elementor-widget.lede { max-width: 44ch; } .brunobrito .e-con > .elementor-widget.aside-copy { max-width: 46ch; } .brunobrito .stat-cell > .elementor-widget.lbl { max-width: 24ch; } .brunobrito .e-con > .elementor-widget.footer-about { max-width: 32ch; } .brunobrito .e-con > .elementor-widget.hub-answer { max-width: 860px; } .brunobrito .e-con > .elementor-widget.num-lbl { max-width: 22ch; } .brunobrito .e-con > .elementor-widget.txt { max-width: 56ch; } .brunobrito .e-con > .elementor-widget.disclaimer-box { max-width: 78ch; } .brunobrito .e-con > .elementor-widget.disclaimer { max-width: 70ch; } / As fotos que mudam de medida no mobile também caem no wrapper do widget. / @media (max-width: 900px) { .brunobrito .e-con > .elementor-widget.editorial-media--tall { max-width: 420px; } } @media (max-width: 820px) { .brunobrito .e-con > .elementor-widget.author-photo { max-width: 280px; } } / --------------------------------------------------------- tipografia --- / / Títulos sem classe (h1, h2, h3 estilizados pelo contexto, como `.hero h1`) já são alcançados pelo site.css, porque o widget emite a tag de verdade — uma regra genérica aqui passaria por cima deles. Quando a classe de design está no próprio título (`h2.cluster-label`, `span.eyebrow`, `div.num`), ela cai no wrapper do widget e a tag interna precisa herdar a tipografia dele: um

interno ficaria com o tamanho e o peso de um h2 qualquer. O build marca esses títulos com .bb-t. / .brunobrito .bb-t > .elementor-heading-title, .brunobrito .bb-t > .elementor-widget-container > .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } / O último parágrafo de um bloco de texto não deve empurrar o rodapé. / .brunobrito .elementor-widget-text-editor > p:last-child, .brunobrito .elementor-widget-text-editor > .elementor-widget-container > p:last-child { margin-bottom: 0; } / .prose espera parágrafos como filhos diretos; com a marcação sem wrapper do Elementor isso já acontece, mas a versão com wrapper precisa da ponte. / .brunobrito .prose > .elementor-widget-container > + * { margin-top: 18px; } .brunobrito .prose > .elementor-widget-container > p { font-size: 1.07rem; line-height: 1.78; max-width: 64ch; } /* ------------------------------------------------------------ botões ---- / / A classe .btn cai no wrapper do widget, mas o elemento clicável é o interno. O wrapper é neutralizado e o visual do botão vai para o , para que toda a área com padding continue clicável. / .brunobrito .elementor-widget-button.btn { display: inline-flex; align-items: stretch; max-width: max-content; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: var(--r-pill); } .brunobrito .elementor-widget-button.btn > .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; min-height: 52px; padding: 14px 28px; border-radius: var(--r-pill); border: 1.5px solid var(--bb-btn-bd, transparent); background: var(--bb-btn-bg, transparent); color: var(--bb-btn-fg, var(--ink-2)); box-shadow: var(--bb-btn-shadow, none); white-space: nowrap; text-decoration: none; backdrop-filter: var(--bb-btn-blur, none); transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease); } .brunobrito .elementor-widget-button.btn > .elementor-button:active { transform: translateY(1px); } .brunobrito .elementor-widget-button.btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; } / Variantes — as mesmas do site.css, aplicadas por variável. / .brunobrito .elementor-widget-button.btn--primary { --bb-btn-bg: var(--sage-deep); --bb-btn-fg: #ffffff; --bb-btn-shadow: var(--shadow-1); } .brunobrito .elementor-widget-button.btn--primary:hover { --bb-btn-bg: #23709f; --bb-btn-shadow: var(--shadow-2); } .brunobrito .elementor-widget-button.btn--dark { --bb-btn-bg: var(--ink-2); --bb-btn-fg: var(--cream); } .brunobrito .elementor-widget-button.btn--dark:hover { --bb-btn-bg: var(--sage-deep); --bb-btn-fg: #ffffff; } .brunobrito .elementor-widget-button.btn--ghost-light { --bb-btn-fg: #ffffff; --bb-btn-bd: rgba(255, 255, 255, 0.5); --bb-btn-blur: blur(6px); } .brunobrito .elementor-widget-button.btn--ghost-light:hover { --bb-btn-bg: rgba(255, 255, 255, 0.14); --bb-btn-bd: #ffffff; } .brunobrito .elementor-widget-button.btn--ghost-dark { --bb-btn-fg: var(--ink-2); --bb-btn-bd: var(--line); } .brunobrito .elementor-widget-button.btn--ghost-dark:hover { --bb-btn-bg: var(--sage-tile); } .brunobrito .elementor-widget-button.btn--tile { --bb-btn-bg: var(--sage-tile); --bb-btn-fg: var(--ink-2); } .brunobrito .elementor-widget-button.btn--tile:hover { --bb-btn-bg: var(--sage); } / Ícones dos botões — no HTML original eram SVG inline. Como são decoração e não conteúdo, aqui viram máscara CSS: herdam a cor do botão e continuam fora do texto que o editor edita. / / A seta (btn--ico-seta) é um caractere no ::after, não máscara — fica de fora. / .brunobrito .elementor-widget-button[class="btn--ico-"]:not(.btn--ico-seta) > .elementor-button::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--bb-btn-ico) center / contain no-repeat; mask: var(--bb-btn-ico) center / contain no-repeat; } .brunobrito .elementor-widget-button.btn--ico-agenda { --bb-btn-ico: url('data:image/svg+xml;utf8,'); } .brunobrito .elementor-widget-button.btn--ico-whatsapp { --bb-btn-ico: url('data:image/svg+xml;utf8,'); } .brunobrito .elementor-widget-button.btn--ico-seta > .elementor-button::after { content: "→"; font-size: 1em; line-height: 1; } /* ------------------------------------------------------------ imagens --- / / O Elementor centraliza imagens e as deixa inline-block; o design original trabalha com blocos que preenchem a moldura. / .brunobrito .elementor-widget-image { text-align: inherit; line-height: 0; } .brunobrito .elementor-widget-image img { display: block; width: 100%; height: 100%; } / Molduras com proporção fixa: a imagem preenche e é recortada, como no site original. / .brunobrito .elementor-widget-image.editorial-media img, .brunobrito .elementor-widget-image.author-photo img, .brunobrito .elementor-widget-image.split-media img, .brunobrito .elementor-widget-image.article-figure img, .brunobrito .elementor-widget-image.hero-media img { object-fit: cover; } / Avatares (byline do artigo e créditos do guia) são soltos dentro de widgets HTML. O Elementor aplica `.elementor img{height:auto;border-radius:0}` (0,1,1), que vence `.avatar` e `.avatar--sm` do site.css e transforma o círculo num retrato retangular. / .brunobrito .elementor img.avatar { border-radius: 50%; } .brunobrito .elementor img.avatar--sm { height: 30px; } .brunobrito .elementor img.avatar--md { height: 44px; } / O widget de imagem que faz papel de
precisa ocupar toda a moldura. / .brunobrito .e-con > .elementor-widget-image.editorial-media, .brunobrito .e-con > .elementor-widget-image.author-photo, .brunobrito .e-con > .elementor-widget-image.article-figure { align-self: stretch; } / --------------------------------------------------------------- hero --- / / .hero-media é posicionado em absoluto atrás do conteúdo; como agora é um widget do Elementor, precisa ocupar a camada inteira. / .brunobrito .elementor-widget-image.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; line-height: 0; } / -------------------------------------------------------- containers ---- / / Containers que o design original trata como grid ou flex já vêm com as classes certas; só é preciso impedir que o Elementor limite a largura. / .brunobrito .e-con.shell, .brunobrito .e-con.shell--narrow, .brunobrito .e-con.shell--read { --width: 100%; --content-width: 100%; } / Containers no nível raiz do documento recebem do Elementor `:is(.elementor-section-wrap,[data-elementor-id])>.e-con{max-width:min(100%,var(--width))}`, de especificidade (0,2,0) — maior que a do .shell. Sem a regra abaixo, todo .shell que abre o documento (a faixa de números e o CTA da home, o hero da Author Page, o artigo) ocupa a tela inteira em vez da coluna do design. / .brunobrito .e-con.shell { max-width: var(--shell); } .brunobrito .e-con.shell--narrow { max-width: 1080px; } .brunobrito .e-con.shell--read { max-width: 768px; } / Widgets dentro de um container em grid não devem esticar por conta do --container-widget-width do Elementor. / .brunobrito .e-con.num-row > .elementor-widget, .brunobrito .e-con.spoke-card > .elementor-widget, .brunobrito .e-con.what-card > .elementor-widget { width: auto; } / --------------------------------------------------------- utilitários --- / / No HTML original duas seções levavam padding-bottom inline. Como o Elementor controla o padding do container por variável — e defini-lo ali apagaria o padding lateral do .shell — o espaçamento vira classe. / .brunobrito .pb-md { padding-bottom: clamp(56px, 7vw, 88px); } .brunobrito .pb-lg { padding-bottom: clamp(72px, 9vw, 112px); } .brunobrito .mt-lg { margin-top: clamp(40px, 5vw, 56px); } / "Por que trato assim": o .prose levava margin-top:20px inline. / .brunobrito .mt-sm { margin-top: 20px; } / A última .section--rule da Author Page levava border-bottom:none inline. / .brunobrito .section--rule.no-border { border-bottom: none; } / O conteúdo do site nunca deve gerar rolagem horizontal. / .brunobrito .elementor-element { min-width: 0; } / O rodapé do Hello Elementor não é usado — quem manda é o template do Theme Builder. Se por algum motivo ele aparecer, fica invisível em vez de duplicar o rodapé do site. / .brunobrito > footer#site-footer.dynamic-footer, .brunobrito > header#site-header.dynamic-header { display: none; } / ------------------------------------------------------- marca do rodapé --- / / No HTML original a marca do rodapé era um
— não um link. Aqui ela vem do shortcode [brunobrito_brand], que sempre devolve um , e a regra `.site-footer a` do site.css — escrita para os links das colunas de navegação — passa a valer sobre ela, transformando-a em bloco com padding vertical. Esta ponte devolve o comportamento do
original. */ .brunobrito .site-footer a.brand { display: flex; padding: 0; }