.elementor-4079 .elementor-element.elementor-element-v3root{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3hero{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3hgrd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3htxt{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4079 .elementor-element.elementor-element-v3cat .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:15px;font-weight:700;letter-spacing:0.5px;color:var( --e-global-color-secondary );}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4079 .elementor-element.elementor-element-v3h1 .elementor-heading-title{font-family:"Roboto Serif", Sans-serif;font-size:42px;font-weight:600;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-4079 .elementor-element.elementor-element-v3div{--divider-border-style:solid;--divider-color:#EC662E;--divider-border-width:3px;}.elementor-4079 .elementor-element.elementor-element-v3div > .elementor-widget-container{margin:8px 0px 16px 0px;}.elementor-4079 .elementor-element.elementor-element-v3div .elementor-divider-separator{width:52px;margin:0 auto;margin-left:0;}.elementor-4079 .elementor-element.elementor-element-v3div .elementor-divider{text-align:left;padding-block-start:0px;padding-block-end:0px;}.elementor-widget-theme-post-excerpt .elementor-widget-container{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4079 .elementor-element.elementor-element-v3dat .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:14px;font-weight:400;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button{background-color:#EC662E;font-family:"Source Sans Pro", Sans-serif;font-size:18px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#EC662E;border-radius:9px 9px 9px 9px;padding:18px 27px 18px 27px;}.elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button:hover, .elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button:focus{background-color:#B23E15;color:#FFFFFF;border-color:#B23E15;}.elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button:hover svg, .elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4079 .elementor-element.elementor-element-v3hmid{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4079 .elementor-element.elementor-element-v3corp{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3corp.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4079 .elementor-element.elementor-element-v3art{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4079 .elementor-element.elementor-element-v3shr{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3shrc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3shrl{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3shrb{--alignment:left;--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-4079 .elementor-element.elementor-element-v3shrb .elementor-share-btn{border-width:2px;}.elementor-4079 .elementor-element.elementor-element-v3ctaf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3ctac{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button{background-color:#EC662E;font-family:"Source Sans Pro", Sans-serif;font-size:18px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#EC662E;border-radius:9px 9px 9px 9px;padding:18px 27px 18px 27px;}.elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button:hover, .elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button:focus{background-color:#B23E15;color:#FFFFFF;border-color:#B23E15;}.elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button:hover svg, .elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4079 .elementor-element.elementor-element-v3lei{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4079 .elementor-element.elementor-element-v3leic{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4079 .elementor-element.elementor-element-v3leig{--grid-columns:3;}.elementor-4079 .elementor-element.elementor-element-v3js{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){ .elementor-4079 .elementor-element.elementor-element-v3shrb{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-4079 .elementor-element.elementor-element-v3leig{--grid-columns:2;}}@media(max-width:767px){.elementor-4079 .elementor-element.elementor-element-v3div.elementor-element{--order:2;}.elementor-4079 .elementor-element.elementor-element-v3cta1 .elementor-button{font-size:17px;padding:16px 22px 16px 22px;} .elementor-4079 .elementor-element.elementor-element-v3shrb{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-4079 .elementor-element.elementor-element-v3cta3 .elementor-button{font-size:17px;padding:16px 22px 16px 22px;}.elementor-4079 .elementor-element.elementor-element-v3leig{--grid-columns:1;}}@media(max-width:1366px) and (min-width:768px){.elementor-4079 .elementor-element.elementor-element-v3corp{--width:1071px;}}/* Start custom CSS for container, class: .elementor-element-v3root *//* Blog - Artigo V3 (Fase 1) - CSS canonico * * Escopo: a classe `me-v3-root` no container-raiz do template. Nao usa `.elementor-4079 .elementor-element.elementor-element-v3root` de * proposito: o mesmo arquivo precisa rodar no harness local e no Custom CSS do Elementor. * Ao colar no Custom CSS do container-raiz, o escopo ja vem da propria classe. * * Regra de ouro deste arquivo: nada aqui pode produzir rolagem horizontal no documento. * O bug do V2 (3938) era um flex row com `nowrap` + tres filhos `flex:0 0 auto` cuja soma * minima (352px) era maior que 320px. Aqui todo filho de linha e encolhivel. */ .me-v3-root { --me-azul:#252F63; /* titulos */ --me-texto:#2C2B29; /* corpo */ --me-areia:#FBF9F6; /* fundo editorial */ --me-evidencia:#DCEBED; /* blocos de evidencia e perguntas */ --me-acolhe:#FBEAE0; /* destaques acolhedores */ /* CTA: cor oficial do Blog V3, alinhada a home por diretriz de 24/08/2026. #EC662E e `--e-global-color-secondary` da home; #B23E15 e o hover dela (`--e-global-color-60a62ab`). As duas ja existem no design system do site - nao ha variacao paralela criada aqui. RESSALVA DE CONTRASTE, herdada da home e registrada de proposito: branco sobre #EC662E da 3,23:1, abaixo do minimo AA de 4,5 para texto normal. Passa em AA para texto grande, e o rotulo usa 18px peso 600. Decisao de Fernando: a home e a fonte de verdade visual, a cor nao muda. Ver 05-validacao-tipografia-cta-faq.md. */ --me-cta:#EC662E; /* CTA preenchido - identico ao da home */ --me-cta-hover:#B23E15; /* hover identico ao da home */ --me-cta-fonte:"Source Sans Pro","Inter",sans-serif; --me-cta-sombra:rgba(0,0,0,.5) 2px 2px 3px -2px; --me-menu-cor:#2F4A7A; /* cor do menu da home */ /* Container ESTRUTURAL do artigo. Fernando gravou 1085px no painel em 24/08 e a diretriz pediu +100px exatos: 1185px. Vale para hero, FAQ visual, CTA final, compartilhamento e relacionados. A COLUNA DE LEITURA da prosa NAO foi ampliada: continua em `--me-coluna` (700px), que e o valor validado para artigo longo. */ --me-amplo:1185px; --me-linha:#E7E1D8; --me-apoio:#6B6459; --me-gutter:20px; --me-coluna:700px; /* coluna de leitura: dentro da faixa 680-720 */ --me-toque:48px; /* alvo minimo de toque */ /* Escala de espacamento. Base 4px, passos que dobram a partir de e4. Regra: nenhuma margem ou padding de ritmo vertical fora desta escala. Antes deste bloco o CSS tinha 18 valores avulsos (8, 10, 12, 14, 18, 20, 22, 24, 28, 30, 36, 40, 44, 48, 56); o que sobrou de valor cru e so detalhe optico (borda, deslocamento de icone), nunca ritmo. */ --me-e1:4px; --me-e2:8px; --me-e3:12px; --me-e4:16px; --me-e5:24px; --me-e6:32px; --me-e7:48px; --me-e8:64px; --me-e9:96px; /* Altura do header sticky, usada para compensar ancora. Medida no render real: 74px em 320, 69px de 360 a 430, 73px de 768 para cima. 76 cobre o pior caso com folga: sobrar espaco acima do titulo e inofensivo, faltar esconde o titulo. */ --me-header-h:76px; font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--me-texto); background:#fff; } @media (min-width:768px){ .me-v3-root { --me-gutter:32px; } } /* Guarda estrutural: min-width:0 desarma o `min-width:auto` implicito de item flex/grid, que e a causa classica de estouro em linha. */ .me-v3-root *, .me-v3-root *::before, .me-v3-root *::after { box-sizing:border-box; } .me-v3-root :is(img,video,svg,iframe,canvas) { max-width:100%; height:auto; display:block; } /* O header e sticky. Sem isto, clicar no sumario leva a secao para DEBAIXO do header: o titulo fica escondido e a leitura comeca no meio do paragrafo. `scroll-margin-top` resolve no navegador, sem JavaScript. Vale tambem para o foco por teclado. */ .me-v3-root :is(h2,h3,h4,#me-v3-artigo,.me-v3-tabela,.wp-block-details) { scroll-margin-top:calc(var(--me-header-h) + var(--me-e4)); } @media (min-width:768px){ .me-v3-root { --me-header-h:76px; } } /* ============================================================ HEADER COMPACTO */ /* Orcamento de largura em 320px (o pior caso do escopo): 32 (padding 16+16) + 88 (logo) + 8 + ~127 (CTA) + 8 + 48 (menu) = ~311 <= 320. O orcamento sozinho nao basta: se o rotulo do CTA mudar, ele volta a estourar. Por isso TODO filho e `flex:0 1 auto; min-width:0` - a linha comprime em vez de vazar. */ /* Header alinhado ao da home: fundo #FBF9F6 (= --me-areia), fixo no topo. A home usa `position:fixed` com 72px de altura; aqui o `sticky` entrega o mesmo comportamento sem tirar o header do fluxo, o que evita ter de compensar altura no corpo. */ /* ATENCAO (22/08, Fase 1.5): as tres regras do logo abaixo valem para o HARNESS, onde `me-v3-header__logo` esta num elemento com filhos simples. No Elementor a classe cai no wrapper do widget e este arranjo colapsa o logo para 48x15px - a base flex fica circular. O bloco ADAPTACAO ELEMENTOR (em elementor/build-artigo-v3.py) sobrescreve estas tres regras de proposito, com largura definida na caixa e `!important` no img. Divergencia deliberada e medida; ver 06-homologacao-render-real.md, item 4.5. */ /* ultimo recurso: se algum dia o rotulo crescer, ele corta - nao empurra a pagina */ @media (min-width:768px){ } /* ============================================================ BOTOES */ @media (min-width:768px){ } /* ============================================================ BARRA DE LEITURA */ /* Ligada apenas ao corpo do artigo (o JS mede #me-v3-artigo, nao a pagina). */ .me-v3-root .me-v3-progresso { position:fixed; top:0; left:0; width:100%; height:3px; z-index:100; background:transparent; pointer-events:none; } .me-v3-root .me-v3-progresso__barra { height:100%; width:0; background:var(--me-cta); transition:width .08s linear; } @media (prefers-reduced-motion:reduce){ .me-v3-root .me-v3-progresso__barra { transition:none; } } /* ============================================================ HERO */ /* Desktop: duas colunas. A imagem encosta na borda direita da secao porque a COLUNA direita nao tem padding - nao ha margem negativa nem 100vw no desktop. Mobile: a midia usa margem negativa igual ao gutter para sangrar de borda a borda; o pai tem overflow-x:clip, entao a sangria nunca vira rolagem de pagina. */ .me-v3-root .me-v3-hero { background:var(--me-areia); border-bottom:1px solid var(--me-linha); overflow-x:clip; } .me-v3-root .me-v3-hero__grade { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:28px var(--me-gutter) 0; } .me-v3-root .me-v3-hero__texto { min-width:0; } .me-v3-root .me-v3-hero__midia { min-width:0; margin:0 calc(-1 * var(--me-gutter)); } /* A imagem precisa se sustentar tanto clara quanto escura. Sobre o creme do hero, uma foto clara dissolve na borda. Um contorno de 1px na cor da linha da marca resolve sem sombra e sem moldura pesada. */ .me-v3-root .me-v3-hero__midia img { width:100%; height:auto; object-fit:cover; box-shadow:0 0 0 1px rgba(37,47,99,.08) inset; } /* ---- Ordem do hero no mobile --------------------------------------------- Problema medido em 320x568: com categoria, H1, data e CTA empilhados antes da foto, a imagem comecava em 589px numa dobra de 568 - ZERO pixel de imagem na primeira dobra, e a abertura virava uma coluna longa de texto seguida tardiamente por uma foto. O benchmark de saude ao consumidor coloca a imagem alta: Audicus em 142px, Alice em 226px, Nubank em 340px, num viewport de 390. NHS e GOV.UK nao usam imagem nenhuma. Nenhum deles empurra a foto para depois de todo o bloco de texto. Solucao: a imagem sobe para logo depois do H1. `display:contents` dissolve a caixa do bloco de texto, os filhos viram itens do proprio flex do hero, e `order` intercala a foto sem duplicar markup e sem criar uma segunda imagem. Vale para titulo de qualquer tamanho: a foto vem sempre logo apos o titulo, nao apos o bloco inteiro. */ @media (max-width:1023px){ /* `row-gap:0` e obrigatorio aqui. A grade herdava `gap:24px` do desktop, e esse gap SOMAVA com o `margin-block-end` de cada elemento: o ritmo desenhado (0 / 16 / 24 / 24 / 32) chegava na tela como 24 / 40 / 48 / 48 / 56. A hierarquia sumia - a categoria descolava do H1, que sao a mesma unidade de sentido, e todos os vaos ficavam quase iguais. Medido no quadro de 390 em 24/08. Com `row-gap:0` a escala de espacamento volta a ser a unica fonte do ritmo vertical. */ .me-v3-root .me-v3-hero__grade { display:flex; flex-direction:column; row-gap:0; padding-top:var(--me-e5); } .me-v3-root .me-v3-hero__texto { display:contents; } .me-v3-root .me-v3-categoria { order:1; } .me-v3-root .me-v3-h1 { order:2; } /* O subtitulo vem ANTES da foto, nao depois. Requisito editorial: todo artigo abre com titulo e subtitulo no topo. A rodada anterior tinha posto a imagem em order:3 e empurrado o excerpt para baixo dela - resolveu a dobra e quebrou o contrato de abertura. Com o excerpt real do artigo 01 (2 linhas em 320px) sobra folga de imagem na dobra; o limite editorial esta documentado em 01-diagnostico-e-correcao.md. */ .me-v3-root .me-v3-sub { order:3; } .me-v3-root .me-v3-hero__midia { order:4; margin-bottom:var(--me-e5); } .me-v3-root .me-v3-data { order:5; } .me-v3-root .me-v3-hero__acao { order:6; } /* 4:3 da presenca a foto sem trocar o arquivo: em 280px de largura ela passa de 158px (16:9) para 210px de altura. O benchmark usa proporcoes ainda mais verticais (0.65 a 0.8); 4:3 e o meio-termo que nao empurra o texto para fora da dobra. */ .me-v3-root .me-v3-hero__midia img { aspect-ratio:16/9; height:auto; object-fit:cover; } } /* 4:3 e tratamento de CELULAR, nao de largura pequena. Medido em 767x1024: com o limite antigo em 767px, uma coluna de 727px recebia proporcao 4:3 e a foto saia com 545px de altura, empurrando todo o resto para fora da dobra. O corte real e ~600px. */ @media (max-width:599px){ .me-v3-root .me-v3-hero__midia img { aspect-ratio:4/3; } } /* ---- Faixa de tablet: 768 a 899 ------------------------------------------- Medido em 768x1024 na bateria de 23/08: com duas colunas a partir de 768, a coluna de texto sobra com ~356px e o H1 entrava com os 52px do desktop. Resultado: titulo longo quebrando em cinco linhas ao lado de uma foto de ~340px, que deixava de ser imagem de abertura e virava selo. O delta era 0 e a tipografia estava dentro da especificacao - o defeito so apareceu no contact sheet. Correcao: a pilha do mobile vale ate 899px e o tablet ganha escala propria de H1 e proporcao de imagem mais larga, ja que a largura disponivel e o dobro do celular. */ @media (min-width:768px) and (max-width:1023px){ .me-v3-root .me-v3-sub { font-size:19px; } .me-v3-root .me-v3-hero__midia img { aspect-ratio:16/9; height:auto; object-fit:cover; } } .me-v3-root .me-v3-categoria { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--me-cta); margin:0 0 10px; } .me-v3-root .me-v3-h1 { font-family:"Roboto Serif",Georgia,serif; font-weight:600; color:var(--me-azul); font-size:clamp(36px, 1.48vw + 30.7px, 52px); line-height:1.15; margin:0 0 12px; overflow-wrap:break-word; hyphens:manual; text-wrap:balance; } .me-v3-root .me-v3-sub { font-size:18px; line-height:1.5; color:var(--me-texto); margin:0 0 12px; max-width:56ch; } .me-v3-root .me-v3-data { font-size:14px; color:var(--me-apoio); margin:0 0 18px; } .me-v3-root .me-v3-hero__acao { margin:0 0 24px; } /* --- Hero de desktop: texto a esquerda, foto vazando ate a borda direita ------- O hero antigo tinha `max-width:1280px; margin:0 auto`, entao em 1440 sobrava uma faixa de 80px a direita e a foto virava um card solto dentro de uma coluna. Agora a grade ocupa a largura inteira e o alinhamento vem do PADDING ESQUERDO: `max(gutter, (100% - --me-amplo)/2)` poe a coluna de texto exatamente onde o container amplo comecaria, enquanto a coluna da direita corre ate o fim da tela. Nao ha largura fixa por artigo, nao ha `100vw` (que criaria rolagem horizontal por causa da barra de rolagem) e o raio fica so no lado interno. */ @media (min-width:1024px){ .me-v3-root .me-v3-hero__grade { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:48px; max-width:none; margin:0; padding:56px 0 56px max(var(--me-gutter), calc((100% - var(--me-amplo)) / 2)); } .me-v3-root .me-v3-hero__texto { display:flex; flex-direction:column; justify-content:center; min-width:0; } .me-v3-root .me-v3-hero__midia { margin:0; display:flex; min-width:0; } .me-v3-root .me-v3-hero__midia > .elementor-widget-container { width:100%; display:flex; } .me-v3-root .me-v3-hero__midia img { width:100%; height:100%; min-height:420px; max-height:none; object-fit:cover; border-radius:12px 0 0 12px; } .me-v3-root .me-v3-sub { font-size:18px; } } /* ============================================================ CORPO EDITORIAL */ /* `max-width:100%` e obrigatorio. O controle `width_laptop` do Elementor gera `width:1185px` dentro de `@media (max-width:1366px)` - ou seja, vale tambem em 768 e 1024, onde 1185px nao cabe. Medido: delta 417 em 768 e 161 em 1024, exatamente o excedente. O `max-width` preserva a intencao (container estrutural de 1185px) e impede o estouro nas larguras menores da mesma faixa. */ .me-v3-root .me-v3-corpo { padding:var(--me-e6) var(--me-gutter) var(--me-e2); max-width:100%; margin-left:auto; margin-right:auto; } /* `width:100%` e obrigatorio aqui. `.me-v3-corpo` e um container flex em coluna, e margem `auto` em item flex ABSORVE o espaco livre: sem a largura explicita, o item encolhe ate o conteudo e fica centralizado. Medido no render real: o sumario recolhido saia com 161px flutuando no meio, enquanto o paragrafo abaixo comecava na margem. E o tipo de desalinhamento que faz o layout parecer widget empilhado. */ .me-v3-root .me-v3-corpo > * { width:100%; max-width:var(--me-coluna); margin-left:auto; margin-right:auto; } /* 1.65 e o topo da faixa permitida. O benchmark de conteudo longo trabalha ainda mais solto (web.dev e MDN em 1.75), entao subir ate o limite e ganho de conforto sem sair da especificacao. */ .me-v3-root .me-v3-conteudo { font-size:18px; line-height:1.65; color:var(--me-texto); } .me-v3-root .me-v3-conteudo > * { min-width:0; } .me-v3-root .me-v3-conteudo p { margin:0 0 var(--me-e5); } /* Ritmo vertical: o espaco ANTES de um titulo e sempre maior que o espaco DEPOIS dele. E o que amarra o titulo ao texto que ele abre, em vez de deixa-lo boiando no meio. */ .me-v3-root .me-v3-conteudo h2 { font-family:"Roboto Serif",Georgia,serif; font-weight:600; color:var(--me-azul); font-size:28px; line-height:1.22; margin:var(--me-e8) 0 var(--me-e4); } .me-v3-root .me-v3-conteudo h3 { font-family:"Roboto Serif",Georgia,serif; font-weight:600; color:var(--me-azul); font-size:23px; line-height:1.3; margin:var(--me-e7) 0 var(--me-e3); } .me-v3-root .me-v3-conteudo h4 { font-family:"Inter",sans-serif; font-weight:700; color:var(--me-azul); font-size:19px; line-height:1.35; margin:var(--me-e6) 0 var(--me-e2); } /* primeiro elemento do corpo nao carrega o respiro de secao */ .me-v3-root .me-v3-conteudo > :first-child { margin-top:0; } .me-v3-root .me-v3-conteudo ul, .me-v3-root .me-v3-conteudo ol { margin:0 0 var(--me-e5); padding-left:var(--me-e5); } .me-v3-root .me-v3-conteudo li { margin-bottom:var(--me-e2); } .me-v3-root .me-v3-conteudo a { color:var(--me-cta); text-decoration:underline; text-underline-offset:2px; } .me-v3-root .me-v3-conteudo a:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } .me-v3-root .me-v3-conteudo blockquote { border-left:3px solid var(--me-azul); margin:var(--me-e6) 0; padding:2px 0 2px var(--me-e4); font-family:"Roboto Serif",Georgia,serif; font-size:20px; line-height:1.45; color:var(--me-azul); } .me-v3-root .me-v3-conteudo figure { margin:var(--me-e5) 0; } .me-v3-root .me-v3-conteudo figcaption { font-size:15px; color:var(--me-apoio); margin-top:6px; } /* quebra de palavra longa (URL, termo tecnico) antes de estourar a coluna */ .me-v3-root .me-v3-conteudo :is(p,li,h2,h3,h4,td,th) { overflow-wrap:break-word; } @media (min-width:768px){ .me-v3-root .me-v3-corpo { padding:var(--me-e7) var(--me-gutter) var(--me-e2); } /* A escala tipografica editorial (H2 32 / H3 24 / H4 20 / corpo 16) vive no bloco ADAPTACAO de build-artigo-v3.py, que e a fonte unica desses valores. Aqui ficam so as margens de ritmo, que dependem do respiro do desktop. */ .me-v3-root .me-v3-conteudo h2 { margin:var(--me-e8) 0 var(--me-e5); } .me-v3-root .me-v3-conteudo h3 { margin:var(--me-e7) 0 var(--me-e4); } .me-v3-root .me-v3-conteudo h4 { margin:var(--me-e6) 0 var(--me-e3); } } /* ============================================================ SUMARIO */ /* Mobile: caixa com fundo, porque ali o sumario e um controle que a pessoa precisa achar. Desktop: quase sem peso, so uma regua a esquerda. O benchmark de leitura longa (web.dev, MDN, Ahrefs) trata o indice como apoio lateral discreto, nunca como um menu com a mesma forca do header. Aqui ele fica no fluxo, que e mais simples e mobile-first, mas perde o fundo e a caixa no desktop para nao competir com o H1. */ .me-v3-root .me-v3-toc { background:var(--me-evidencia); border-radius:12px; padding:var(--me-e1) var(--me-e4); margin:0 auto var(--me-e6); } /* Sem JavaScript o sumario nao e preenchido, e sobrava a casca: um "Neste artigo" que abre e nao mostra nada. `:has()` resolve sem script - se nao houver item, o bloco inteiro sai da pagina. Vale tambem para artigo com menos de tres H2, em que o JS ja esconde o bloco por conta propria. */ .me-v3-root .me-v3-toc:not(:has(li)) { display:none; } .me-v3-root .me-v3-toc summary { cursor:pointer; list-style:none; position:relative; padding:14px 34px 14px 0; font-weight:600; font-size:16px; color:var(--me-azul); min-height:var(--me-toque); display:flex; align-items:center; } .me-v3-root .me-v3-toc summary::-webkit-details-marker { display:none; } .me-v3-root .me-v3-toc summary::after { content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid var(--me-azul); border-bottom:2px solid var(--me-azul); transform:rotate(45deg); transition:transform .2s; } .me-v3-root .me-v3-toc[open] summary::after { transform:rotate(-135deg); margin-top:-3px; } .me-v3-root .me-v3-toc summary:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } .me-v3-root .me-v3-toc ol { margin:0 0 16px; padding:0 0 0 20px; } .me-v3-root .me-v3-toc li { margin:0 0 8px; } .me-v3-root .me-v3-toc a { color:var(--me-azul); text-decoration:none; font-size:16px; line-height:1.45; /* alvo de toque de 48px: um sumario e navegacao, nao texto corrido */ display:flex; align-items:center; min-height:var(--me-toque); padding:4px 0; } .me-v3-root .me-v3-toc a:hover { text-decoration:underline; } .me-v3-root .me-v3-toc a:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } @media (min-width:768px){ .me-v3-root .me-v3-toc { background:transparent; border-radius:0; border-left:2px solid var(--me-linha); padding:0 0 0 var(--me-e5); margin:0 auto var(--me-e8); } /* O rotulo perde peso visual, mas NAO perde alvo de toque: o summary continua focavel e clicavel, entao continua com 48px. Discreto nao pode virar inacessivel - foi exatamente o erro que a primeira versao deste bloco cometeu. */ .me-v3-root .me-v3-toc summary { cursor:pointer; padding:0; min-height:var(--me-toque); font-family:"Inter",sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--me-apoio); } .me-v3-root .me-v3-toc summary::after { right:auto; left:auto; position:static; margin:0 0 0 var(--me-e2); border-color:var(--me-apoio); } /* Duas colunas: mantem o alvo de 48px sem transformar o indice numa torre de 340px. `break-inside:avoid` impede que um item quebre entre as colunas. */ .me-v3-root .me-v3-toc ol { margin:0; columns:2; column-gap:var(--me-e6); } .me-v3-root .me-v3-toc li { margin:0; break-inside:avoid; } .me-v3-root .me-v3-toc a { font-size:15px; min-height:var(--me-toque); color:var(--me-apoio); align-items:center; padding-right:var(--me-e3); } .me-v3-root .me-v3-toc a:hover { color:var(--me-azul); } } /* ============================================================ TABELAS */ /* A tabela rola dentro do proprio wrapper. A pagina nunca rola. O V2 resolvia com `table{display:block;overflow-x:auto}` - funciona, mas transforma a tabela em bloco (perde a semantica de tabela para parte das tecnologias assistivas) e nao da nenhuma pista visual de que ha mais coluna a direita. */ /* Fallback sem JS. Cobre os dois formatos que o corpo produz: - `` solto, filho direto do conteudo (markdown antigo); - `figure.wp-block-table > table`, que e o que o bloco nativo do Gutenberg gera. O segundo caso NAO era coberto antes: a regra mirava so filho direto e virava codigo morto. A pagina nao rolava porque o CSS do core do WordPress tem `.wp-block-table{overflow-x:auto}` - ou seja, a contencao dependia de uma folha de terceiro estar carregada. Agora depende do modelo. Medido com JavaScript desligado. */ /* Nao usar filho direto: no Elementor o conteudo do post fica dentro de `.elementor-widget-container`, entao nem a `
` nem o `figure` sao filhos diretos de `.me-v3-conteudo`. Foi assim que a primeira versao virou codigo morto sem avisar. O `:not(:has(.me-v3-tabela))` desliga o fallback assim que o JS instala o wrapper. */ .me-v3-root .me-v3-conteudo figure.wp-block-table:not(:has(.me-v3-tabela)), .me-v3-root .me-v3-conteudo > table { display:block; overflow-x:auto; max-width:100%; } .me-v3-root .me-v3-conteudo figure.wp-block-table:not(:has(.me-v3-tabela)) > table { min-width:520px; } .me-v3-root .me-v3-tabela { position:relative; margin:var(--me-e6) 0; } .me-v3-root .me-v3-tabela__rolagem { overflow-x:auto; -webkit-overflow-scrolling:touch; } .me-v3-root .me-v3-tabela__rolagem:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } .me-v3-root .me-v3-tabela table { width:100%; min-width:520px; border-collapse:collapse; font-size:16px; } .me-v3-root .me-v3-tabela th { background:var(--me-azul); color:#fff; text-align:left; font-weight:600; padding:12px; font-size:15px; line-height:1.3; } .me-v3-root .me-v3-tabela td { padding:10px 12px; border-bottom:1px solid var(--me-linha); line-height:1.45; } .me-v3-root .me-v3-tabela tbody tr:nth-child(even) { background:var(--me-areia); } /* indicador de rolagem: so aparece quando ha o que rolar (atributo posto pelo JS) */ .me-v3-root .me-v3-tabela[data-rola="sim"]::after { content:""; position:absolute; top:0; right:0; bottom:0; width:36px; pointer-events:none; background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92)); } .me-v3-root .me-v3-tabela[data-rola="sim"] .me-v3-tabela__dica { display:block; } .me-v3-root .me-v3-tabela__dica { display:none; font-size:14px; color:var(--me-apoio); margin:8px 0 0; } /* ============================================================ FAQ */ /* details/summary nativo: abre sem JS, e anunciado como grupo, e o estado real fica no DOM (nao depende do aria-expanded do accordion antigo do Elementor). */ .me-v3-root .me-v3-faq { border-top:1px solid var(--me-linha); margin:var(--me-e8) 0 0; } .me-v3-root .me-v3-faq details { border-bottom:1px solid var(--me-linha); } .me-v3-root .me-v3-faq summary { cursor:pointer; list-style:none; position:relative; padding:16px 40px 16px 0; font-weight:600; font-size:17px; line-height:1.4; color:var(--me-azul); min-height:var(--me-toque); display:flex; align-items:center; } .me-v3-root .me-v3-faq summary::-webkit-details-marker { display:none; } .me-v3-root .me-v3-faq summary::after { content:""; position:absolute; right:8px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid var(--me-cta); border-bottom:2px solid var(--me-cta); transform:rotate(45deg); transition:transform .2s; } .me-v3-root .me-v3-faq details[open] summary::after { transform:rotate(-135deg); margin-top:-3px; } .me-v3-root .me-v3-faq summary:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } .me-v3-root .me-v3-faq__resposta { padding:0 0 18px; font-size:17px; line-height:1.6; } .me-v3-root .me-v3-faq__resposta p { margin:0 0 12px; } .me-v3-root .me-v3-faq__resposta p:last-child { margin-bottom:0; } /* ---- Hero legado no corpo de post ainda nao migrado ---- Os seis posts publicados carregam, dentro do proprio texto, um bloco `.wp-post-featured-image` com a imagem de topo. Isso existia porque o V2 esconde a imagem destacada dinamica. No V3 a imagem destacada e a fonte unica, entao esse bloco passa a ser duplicata: sem esta regra o leitor ve a MESMA imagem duas vezes durante toda a transicao, ate a migracao editorial remover o bloco do corpo. Conteudo ja migrado nao emite essa classe, entao a regra e inofensiva depois. */ .me-v3-root .me-v3-conteudo .wp-post-featured-image { display:none; } /* ---- FAQ escrito com o bloco nativo core/details do Gutenberg ---- A migracao editorial gera `
`, sem o wrapper `.me-v3-faq`. As regras acima nao o alcancavam: o FAQ funcionava, mas saia sem estilo e com `summary` de uma linha abaixo de 48px de altura. Medido no render real do piloto. */ .me-v3-root .me-v3-conteudo .wp-block-details { border-bottom:1px solid var(--me-linha); margin:0; } .me-v3-root .me-v3-conteudo .wp-block-details + .wp-block-details { margin-top:0; } /* Pergunta = equivalente a H4: Roboto Serif 20px 600. A tag continua sendo `summary`, e o papel de titulo vem de `role="heading" aria-level="4"` no span interno, emitido pelo adaptador. Nao existe

dentro de - isso seria markup invalido. */ .me-v3-root .me-v3-conteudo .wp-block-details summary { cursor:pointer; list-style:none; position:relative; padding:16px 40px 16px 0; font-family:"Roboto Serif",Georgia,serif; font-weight:600; font-size:18px; line-height:1.32; color:var(--me-azul); min-height:var(--me-toque); display:flex; align-items:center; } .me-v3-root .me-v3-conteudo .wp-block-details summary [role=heading] { font:inherit; color:inherit; } @media (min-width:768px){ .me-v3-root .me-v3-conteudo .wp-block-details summary { font-size:20px; } } .me-v3-root .me-v3-conteudo .wp-block-details summary::-webkit-details-marker { display:none; } .me-v3-root .me-v3-conteudo .wp-block-details summary::marker { content:""; } .me-v3-root .me-v3-conteudo .wp-block-details summary::after { content:""; position:absolute; right:8px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid var(--me-cta); border-bottom:2px solid var(--me-cta); transform:rotate(45deg); transition:transform .2s; } .me-v3-root .me-v3-conteudo .wp-block-details[open] summary::after { transform:rotate(-135deg); margin-top:-3px; } .me-v3-root .me-v3-conteudo .wp-block-details summary:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } /* Resposta: Inter 15px peso 400, entrelinha confortavel. Menor que o corpo (16px) de proposito - e texto de apoio, nao prosa principal. */ .me-v3-root .me-v3-conteudo .wp-block-details > p, .me-v3-root .me-v3-conteudo .wp-block-details .me-v3-faq-answer { padding:0 0 18px; font-size:15px; line-height:1.65; font-weight:400; font-family:"Inter",system-ui,sans-serif; } .me-v3-root .me-v3-conteudo .wp-block-details > p:last-child { margin-bottom:0; } /* ---- CTA proporcional vindo do corpo, em core/group + core/buttons ---- E navegacao educativa (destino: home), nao conversao para conversa. Por isso ele usa o estilo de contorno, e nao o preenchido: o botao cheio fica reservado ao CTA final do modelo, que leva a conversa. */ .me-v3-root .me-v3-conteudo .me-v3-inline-cta { background:var(--me-acolhe); border-radius:12px; padding:var(--me-e5); margin:var(--me-e8) 0; } .me-v3-root .me-v3-conteudo .me-v3-inline-cta > p { margin:0 0 16px; font-size:16px; line-height:1.6; } .me-v3-root .me-v3-conteudo .me-v3-inline-cta .wp-block-buttons { margin:0; } /* O CTA intermediario passou a usar a MESMA familia de CTA interno da home, por diretriz de 24/08/2026: nao ha mais variante de contorno no artigo. A geometria, a cor, a sombra, a transicao e o hover vem do bloco de CTA em `build-artigo-v3.py`, que e a fonte unica desses valores. Aqui fica apenas o que e do bloco editorial. */ /* ============================================================ CTA CONTEXTUAL (MEIO) */ .me-v3-root .me-v3-cta-meio { background:var(--me-acolhe); border-radius:12px; padding:22px 20px; margin:36px auto; } .me-v3-root .me-v3-cta-meio p { margin:0 0 14px; font-size:17px; line-height:1.5; } .me-v3-root .me-v3-cta-meio .me-v3-rotulo { font-family:"Roboto Serif",Georgia,serif; font-size:20px; font-weight:600; color:var(--me-azul); margin:0 0 8px; line-height:1.3; } /* ============================================================ FORA DO ARTIGO */ /* Compartilhamento, relacionados, CTA final e institucional ficam FORA de
e usam rotulos em
/

- nao entram na hierarquia de headings do texto. */ .me-v3-root .me-v3-rotulo-secao { font-family:"Inter",sans-serif; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--me-apoio); margin:0 0 12px; } .me-v3-root .me-v3-share { padding:var(--me-e2) var(--me-gutter) var(--me-e6); } .me-v3-root .me-v3-share__caixa { max-width:var(--me-coluna); margin:0 auto; } .me-v3-root .me-v3-share__linha { display:flex; flex-wrap:wrap; gap:10px; } .me-v3-root .me-v3-share__linha > * { flex:0 1 auto; min-width:0; } /* ---- CTA final: o ponto de conversao da pagina ---------------------------- Antes ele usava `--me-areia`, o MESMO creme do hero e do header: com o mesmo fundo, a mesma largura e um rotulo de 26px, o bloco lia-se como mais uma secao. Agora ele tem superficie propria (`--me-evidencia`), respiro maior que qualquer outro bloco da pagina e o rotulo na escala de um H2. Continua sendo o unico botao preenchido do documento. O tom nao muda: sem urgencia, sem promessa, sem contagem. */ .me-v3-root .me-v3-cta-final { background:var(--me-evidencia); border-top:1px solid var(--me-linha); border-bottom:1px solid var(--me-linha); padding:var(--me-e8) var(--me-gutter); } .me-v3-root .me-v3-cta-final__caixa { max-width:560px; margin:0 auto; text-align:center; } .me-v3-root .me-v3-cta-final .me-v3-rotulo { font-family:"Roboto Serif",Georgia,serif; font-size:28px; font-weight:600; color:var(--me-azul); margin:0 0 var(--me-e3); line-height:1.22; } .me-v3-root .me-v3-cta-final p { margin:0 0 var(--me-e6); font-size:18px; line-height:1.55; } /* a nota do canal e apoio: menor, sem peso, e nao compete com o botao */ .me-v3-root .me-v3-cta-final__nota, .me-v3-root .me-v3-cta-final__nota p { margin:var(--me-e4) 0 0; font-size:15px; line-height:1.4; color:var(--me-apoio); } @media (min-width:768px){ .me-v3-root .me-v3-cta-final { padding:var(--me-e9) var(--me-gutter); } .me-v3-root .me-v3-cta-final .me-v3-rotulo { font-size:38px; } .me-v3-root .me-v3-cta-final p { font-size:20px; } } /* "Leia tambem" vem depois do CTA e nao pode disputar com ele: sem borda superior propria (o CTA ja fecha com uma), rotulo pequeno em versalete e nenhum fundo. */ /* "Leia tambem" usa o container AMPLO, como as secoes da home - nao a largura da prosa. Era o que fazia os cards parecerem comprimidos dentro da coluna de texto. */ .me-v3-root .me-v3-leia { padding:var(--me-e8) var(--me-gutter) var(--me-e8); } .me-v3-root .me-v3-leia__caixa { max-width:var(--me-amplo); margin:0 auto; } .me-v3-root .me-v3-leia__grade { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; } @media (min-width:768px){ .me-v3-root .me-v3-leia__grade { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } /* ===================================================================== */ /* ADAPTACAO ELEMENTOR - NAO VERIFICADA EM RENDER PUBLICO */ /* O CSS acima foi medido no harness local, que usa DOM semantico limpo. */ /* O Elementor insere camadas proprias (.e-con, .e-con-inner, */ /* .elementor-widget-container, .elementor-button-wrapper). Este bloco */ /* reconcilia as duas coisas. Ele so pode ser confirmado quando o V3 */ /* renderizar em um post real - ver 05-checklist-de-homologacao.md. */ /* ===================================================================== */ /* containers do Elementor sao flex por padrao; os que viram grade precisam anular isso */ .me-v3-root .me-v3-hero__grade { display:grid !important; } /* --- "Leia tambem": grade dentro de grade ------------------------------- No harness `me-v3-leia__grade` E o container da grade. No Elementor a classe cai no WRAPPER do widget, e o widget ja contem `.elementor-loop-container.elementor-grid`, que e a grade de verdade. Deixar as duas como grade produziu grade dentro de grade: medido em 1440, cada card ficou com 70px de largura e o titulo com 28px, quebrando uma letra por linha (altura de 1344px). O wrapper volta a ser bloco; quem manda na grade e o Elementor, que ja sabe as colunas por breakpoint. */ .me-v3-root .elementor-widget-loop-grid.me-v3-leia__grade { display:block !important; } .me-v3-root .me-v3-leia .elementor-loop-container { gap:24px !important; } /* A grade herda a largura do container amplo (`.me-v3-leia__caixa`), nao a da prosa. */ @media (min-width:1024px){ .me-v3-root .me-v3-leia .elementor-loop-container { gap:32px !important; } } /* Estrutura real do card (lida no DOM publico, nao suposta): .e-loop-item > .me-v3-card (e-con-full, SEM .e-con-inner) > .me-v3-card__midia + .me-v3-card__titulo As duas tentativas anteriores miraram `.e-con-inner`, que nao existe porque o 4089 usa container `full`. Por isso o card saia empilhado no mobile mesmo com `flex-direction:row`. */ .me-v3-root .me-v3-leia .e-loop-item:hover { border-color:var(--me-azul); box-shadow:0 2px 10px rgba(37,47,99,.07); } .me-v3-root .me-v3-leia .me-v3-card { height:100%; } /* a imagem tem proporcao FIXA de 4:3 nos dois breakpoints, por caixa com `aspect-ratio` e imagem em posicao absoluta - nao depende de altura herdada */ .me-v3-root .me-v3-leia .me-v3-card__midia { position:relative; aspect-ratio:4/3; margin:0 !important; width:100%; } .me-v3-root .me-v3-leia .me-v3-card__midia > .elementor-widget-container { position:absolute; inset:0; } .me-v3-root .me-v3-leia .me-v3-card__midia img { width:100%; height:100%; object-fit:cover; border-radius:0; display:block; } /* Titulo do card: COMPLETO, sem clamp, sem elipse e sem corte - diretriz de 24/08. O clamp de 3 linhas saiu; em troca o card cresce conforme o titulo, e a grade iguala a altura das colunas. A escala caiu para caber num card, sem virar heading artificial: o titulo continua sendo um `div` com link, como no 4089. */ /* O PADDING FICA NO WRAPPER, O CLAMP FICA NO . Nao juntar os dois no mesmo elemento: no Blink o `padding-bottom` de uma caixa com `-webkit-line-clamp` nao entra na conta do clamp, e a 4a linha pinta dentro do padding em vez de ser cortada. Medido em 1440 no post de QA: o grid do loop fixa `grid-template-rows: 266.8px`, o `.e-loop-item` tem `overflow:hidden`, e o titulo de 5 linhas aparecia com a 4a linha SERRADA ao meio na borda do card. O clamp estava escrito e nao clampava. */ /* a area clicavel e o bloco de titulo inteiro, nao so a linha de texto */ .me-v3-root .me-v3-leia .me-v3-card__titulo .elementor-heading-title a { color:inherit; text-decoration:none; padding:0; margin:0; display:block; } /* CTA textual do card: "Ler artigo" em #EC662E, SEM pill box. Vem do proprio link do titulo por `::after`, entao a area clicavel continua sendo o bloco inteiro e nao ha segundo link para o mesmo destino - o que atrapalharia teclado e leitor de tela. */ .me-v3-root .me-v3-leia .me-v3-card__titulo .elementor-heading-title a:focus-visible { outline:3px solid var(--me-azul); outline-offset:-3px; } @media (max-width:767px){ /* CARD HORIZONTAL: a imagem ocupa 42% da largura e o titulo o resto, centralizado. Deixa de ser miniatura de lista e vira card editorial. */ .me-v3-root .me-v3-leia .elementor-loop-container { gap:var(--me-e3) !important; } } /* --- Base dos widgets do Elementor ------------------------------------------- Bloco restaurado junto com o do header (removido por engano em 23/08). Sem ele os botoes voltaram ao estilo do kit global: 39px de altura, abaixo do alvo de 48px. */ .me-v3-root .elementor-widget { min-width:0; max-width:100%; } .me-v3-root .elementor-widget-container { min-width:0; } /* --- CTA: familia visual da HOME --------------------------------------------- Valores medidos no DOM da home em 24/08/2026, nao inferidos por screenshot: fundo #EC662E, texto #fff, borda 1px solida da mesma cor, raio 9px, Source Sans Pro 18/600, letter-spacing .4px, sombra rgba(0,0,0,.5) 2px 2px 3px -2px, transicao .2s, hover: fundo e borda #B23E15, texto #fff. Duas geometrias, como na home: CTA interno -> 56px de altura, padding 18px 27px CTA de header -> 44px de altura, padding 12px 21px As classes do V3 estao no wrapper do widget; o e do Elementor. */ .me-v3-root .me-v3-conteudo .me-v3-inline-cta .wp-block-button__link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:18px 27px; border-radius:9px; /* line-height 1 e o que faz a altura bater com a home: 18+18 de padding + 2 de borda + 18 de linha = 56px no CTA interno, e 12+12+2+18 = 44px no de header. Com 1.2 sobravam 4px em cada um. */ font-family:var(--me-cta-fonte); font-weight:600; font-size:18px; line-height:1; letter-spacing:.4px; text-decoration:none; background-color:var(--me-cta); color:#fff; border:1px solid var(--me-cta); box-shadow:var(--me-cta-sombra); transition:.2s; } .me-v3-root .me-v3-conteudo .me-v3-inline-cta .wp-block-button__link:hover { background-color:var(--me-cta-hover); border-color:var(--me-cta-hover); color:#fff; } /* A home nao declara foco visivel proprio: so zera o outline em `:focus:not(:focus-visible)`, deixando o padrao do navegador para teclado. Manter o contorno navy do V3 e uma melhoria deliberada de acessibilidade sobre a home, registrada, nao uma divergencia esquecida. */ .me-v3-root .me-v3-conteudo .me-v3-inline-cta .wp-block-button__link:focus-visible { outline:3px solid var(--me-azul); outline-offset:2px; } /* O CTA do header tem geometria propria na home: mais baixo e mais compacto. */ /* Em telas estreitas o rotulo de 18px estoura a linha do header: a familia e a cor continuam as da home, so a escala cede - nao ha variacao de cor criada aqui. */ @media (max-width:767px){ .me-v3-root .me-v3-conteudo .me-v3-inline-cta .wp-block-button__link { font-size:17px; padding:16px 22px; min-height:52px; } } /* Corpo do post. Herdar do wrapper NAO basta: o kit global declara familia e entrelinha direto em `p` e `li`, e regra explicita vence heranca. */ /* --- Escala tipografica editorial do Blog ------------------------------------- Decisao de marca do BLOG, nao da home: titulos em Roboto Serif, corpo em Inter. A home usa Fraunces e Source Sans Pro, e isso NAO se aplica ao texto editorial - so aos componentes de navegacao e conversao (menu e CTA), que seguem a home. Escala descendente obrigatoria: H1 42 > H2 32 > H3 24 > H4 20. */ .me-v3-root .elementor-widget-theme-post-content { font-size:16px; line-height:1.7; color:var(--me-texto); } .me-v3-root .me-v3-conteudo :is(p,li,td,th,figcaption,summary,dd,dt) { font-family:"Inter",system-ui,sans-serif; } .me-v3-root .me-v3-conteudo :is(p,li) { font-size:inherit; line-height:1.7; font-weight:400; } .me-v3-root .me-v3-conteudo :is(h2,h3,h4) { font-family:"Roboto Serif",Georgia,serif; font-weight:600; color:var(--me-azul); } /* Ritmo editorial: o vao ANTES de um titulo e maior que o vao depois, para o titulo pertencer ao bloco que abre. Sem isso todos os vaos ficam iguais e a hierarquia some. */ .me-v3-root .me-v3-conteudo h2 { font-size:25px; line-height:1.22; margin:var(--me-e7) 0 var(--me-e4); } .me-v3-root .me-v3-conteudo h3 { font-size:21px; line-height:1.28; margin:var(--me-e6) 0 var(--me-e3); } .me-v3-root .me-v3-conteudo h4 { font-size:18px; line-height:1.32; margin:var(--me-e5) 0 var(--me-e2); } @media (min-width:768px){ .me-v3-root .me-v3-conteudo h2 { font-size:30px; } .me-v3-root .me-v3-conteudo h3 { font-size:24px; } .me-v3-root .me-v3-conteudo h4 { font-size:20px; } } /* Titulo da secao de FAQ: H3 em laranja da home. A classe vem do adaptador (`me-v3-faq-titulo`), entao a cor NAO vaza para os demais H3 do artigo. */ .me-v3-root .me-v3-conteudo h3.me-v3-faq-titulo { color:var(--me-cta); } /* --- Header: logo, CTA e menu ------------------------------------------------ Bloco restaurado apos ser removido por engano numa edicao por fatia de indice em 23/08. A ausencia dele reintroduziu overflow: o container do widget de menu voltou a vazar 9px em 320 e 24px em 1440. Nao editar por indice: editar por ancora de texto. */ /* A largura tem que estar na CAIXA, nao na imagem: com `width:100%` no img e a caixa dependendo do conteudo, a base flex fica circular e o logo colapsa (medido: 48x15px). */ /* !important comprovado por experimento no render real: sem ele a declaracao de largura do img perde para o kit global. */ @media (min-width:768px){ /* 145px e a largura medida do logo no header da home (145 x 44). */ } /* O rotulo do CTA do header nao quebra: em 320px ele saia em duas linhas e o botao ia a 53px, deixando o header com 74px e cara de acidente. A caixa ja e dimensionada pelo texto, entao o `nowrap` nao muda o orcamento da linha - so impede a quebra. */ /* O menu so e um quadrado de 48px ENQUANTO o Elementor mostra o hamburguer. O widget usa dropdown=tablet e o breakpoint tablet deste site e 1024px: acima disso o Elementor troca o toggle pelo