/* ------------------------------------------------------------------------- * ⚠️ ESTE FICHEIRO FOI RECONSTRUIDO EM 04/09/2026. * * Um patch escreveu `io.open(p,'w').write(io.open(p).read() + CSS)` — o modo * 'w' esvazia o ficheiro ANTES de o read correr, e o martcon.css ficou com as * 7 linhas do bloco novo. A base voltou do backup de 31/08 e todos os blocos * de 01/09 e 04/09 vieram do `previa.js`, que guarda uma copia deles dentro do * proprio template. Ver [[open-w-trunca-antes-de-escrever]]. * ---------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * Martcon — estilos do formulário, do botão flutuante e dos blocos que o * Elementor não cobre. As cores saem de variáveis: mude aqui e muda tudo. * ---------------------------------------------------------------------- */ :root { --mc-laranja: #ff6600; --mc-laranja-escuro: #b84a00; /* 5,18:1 no branco — AA para texto */ --mc-laranja-claro: #fff0e6; --mc-faq-borda-ativa: #ffc9a8; --mc-grafite: #3b3a38; --mc-grafite-2: #4a4744; --mc-texto: #45423f; --mc-texto-claro: #66625e; --mc-borda: #e3e5e8; --mc-superficie: #f3f4f6; --mc-branco: #fff; --mc-raio: 12px; --mc-sombra: 0 2px 14px rgba(40, 38, 36, .06); } /* --- cabeçalho: gruda no topo e volta quando se rola para cima --------- * * ⚠️ O alvo é `#masthead`, NÃO `.ehf-header`: o Header & Footer Builder põe a * classe `ehf-header` no ``, não no cabeçalho. Até a 1.3.6 este bloco * mirava `.ehf-header` e portanto punha `position:sticky` no body — que não faz * nada. O cabeçalho nunca ficou fixo, apesar do nome do bloco. * * E é `body.ehf-header #masthead` (1,1,1) e não só `#masthead` (1,0,0): o * plugin traz `.ehf-header #masthead{position:relative}` (1,1,0) e entra no * depois deste ficheiro, então o ID sozinho perde. * * Descer esconde a barra, subir traz de volta. Quem lê rolando para baixo ganha * a altura inteira do ecrã; quem volta atrás tem o menu na mão sem ir ao topo. * ---------------------------------------------------------------------- */ body.ehf-header #masthead { position: sticky; top: 0; z-index: 999; background: var(--mc-branco); transition: transform .28s ease; } body.admin-bar.ehf-header #masthead { top: 32px; } @media (max-width: 782px) { body.admin-bar.ehf-header #masthead { top: 46px; } } /* A classe entra e sai no martcon.js. Sem `will-change`: o painel lateral é `position:fixed` e um contentor com `will-change:transform` vira bloco de contenção para os fixos de dentro. */ body.ehf-header #masthead.mc-barra-oculta { transform: translateY(-100%); } /* Âncora (#faq, #contato) sob a barra: quem trata disso é o `style.css` do tema filho, com `scroll-padding-top: 96px` — folga de sobra para os 69px da barra. Não repetir aqui: o tema entra no depois e a regra deste ficheiro morreria calada. */ @media (prefers-reduced-motion: reduce) { body.ehf-header #masthead { transition: none; } } /* --- formulário -------------------------------------------------------- */ .mc-form { display: flex; flex-direction: column; gap: 14px; } .mc-campo { display: flex; flex-direction: column; gap: 6px; } .mc-campo label { font-size: 14px; font-weight: 600; color: var(--mc-grafite); line-height: 1.3; } .mc-campo label span { color: var(--mc-laranja-escuro); margin-left: 2px; } .mc-form input[type="text"], .mc-form input[type="tel"], .mc-form input[type="email"], .mc-form select, .mc-form textarea { width: 100%; padding: 13px 15px; font: inherit; font-size: 16px; /* abaixo de 16px o iOS dá zoom ao focar */ line-height: 1.4; color: var(--mc-grafite); background: var(--mc-branco); border: 1px solid var(--mc-borda); border-radius: var(--mc-raio); transition: border-color .18s ease, box-shadow .18s ease; -webkit-appearance: none; appearance: none; } .mc-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475467' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; } .mc-form textarea { resize: vertical; min-height: 96px; } .mc-form :is(input, select, textarea):focus-visible { outline: none; border-color: var(--mc-laranja); box-shadow: 0 0 0 3px rgba(255,102,0, .22); } .mc-form [aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .14); } .mc-consentimento { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--mc-texto); } .mc-consentimento input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--mc-laranja); flex: 0 0 auto; } .mc-consentimento a { color: var(--mc-laranja-escuro); text-decoration: underline; } .mc-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 28px; font: inherit; font-size: 16px; font-weight: 600; color: var(--mc-grafite); background: var(--mc-laranja); border: 0; border-radius: 999px; cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; /* Sem halo laranja: o brilho colorido em volta do botao dava ar de gradiente barato e sujava o fundo claro. A profundidade vem de uma sombra neutra. */ box-shadow: 0 6px 18px -10px rgba(40, 38, 36, .45); } .mc-botao:hover { background: var(--mc-laranja-escuro); color: var(--mc-branco); transform: translateY(-1px); } .mc-botao:focus-visible { outline: 3px solid var(--mc-grafite); outline-offset: 2px; } .mc-botao[disabled] { opacity: .6; cursor: progress; transform: none; } .mc-aviso { margin: 0; font-size: 12.5px; line-height: 1.5; color: #667085; } .mc-retorno { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 500; } .mc-retorno:empty { display: none; } .mc-retorno.mc-ok { color: #067647; } .mc-retorno.mc-erro { color: #b42318; } .mc-retorno a { color: inherit; text-decoration: underline; font-weight: 600; } /* a armadilha anti-robô fica fora da tela sem usar display:none — alguns robôs ignoram campos escondidos por display */ .mc-abelha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- botão flutuante de WhatsApp --------------------------------------- */ .mc-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 998; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 15px; color: #fff; background: #25d366; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .75); transition: transform .2s ease, box-shadow .2s ease; } .mc-flutuante:hover, .mc-flutuante:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(37, 211, 102, .85); } .mc-flutuante:focus-visible { outline: 3px solid var(--mc-grafite); outline-offset: 3px; } @media (max-width: 767px) { .mc-flutuante { right: 14px; bottom: 14px; padding: 14px; } .mc-flutuante-rotulo { display: none; } } @media (prefers-reduced-motion: reduce) { .mc-flutuante, .mc-botao { transition: none; } } /* --- etiquetas de segmento --------------------------------------------- */ .mc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .mc-chips span { padding: 9px 16px; font-size: 14.5px; line-height: 1.2; color: var(--mc-grafite); background: var(--mc-branco); border: 1px solid var(--mc-borda); border-radius: 999px; } /* --- depoimentos -------------------------------------------------------- */ .mc-estrelas { color: var(--mc-laranja); font-size: 17px; letter-spacing: 2px; line-height: 1; } /* --- rodapé ------------------------------------------------------------- */ .mc-rodape-legal { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .5); } .mc-rodape-legal p { margin: 0; } .mc-rodape-links { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14.5px; color: rgba(255, 255, 255, .72); } .mc-rodape-legal a { color: rgba(255, 255, 255, .78); text-decoration: none; } .mc-rodape-legal a:hover, .mc-rodape-legal a:focus-visible { color: var(--mc-laranja); text-decoration: underline; } /* --- assinatura da agência ---------------------------------------------- */ .mc-rodape-fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 4px; } .mc-assinatura { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; opacity: .72; transition: opacity .18s ease; } .mc-assinatura:hover, .mc-assinatura:focus-visible { opacity: 1; } .mc-assinatura span { font-size: 12.5px; line-height: 1; color: rgba(255, 255, 255, .58); letter-spacing: .2px; } .mc-assinatura img { display: block; width: 118px; height: auto; } @media (prefers-reduced-motion: reduce) { .mc-assinatura { transition: none; } } /* --- link de WhatsApp no meio do texto ---------------------------------- */ .mc-link-wpp { color: var(--mc-laranja-escuro); font-weight: 600; text-decoration: underline; } /* --- acessibilidade geral ----------------------------------------------- */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible { outline: 3px solid var(--mc-laranja-escuro); outline-offset: 2px; } /* ------------------------------------------------------------------------- * Painel lateral: menu + contato * * ⚠️ Tudo escopado por #mc-painel de propósito. O CSS do Kit do Elementor * carrega depois deste arquivo e atinge `h2`, `a` e `button` por classe — * sem o id, os links do painel saem laranja e os títulos saem grafite * (invisíveis no fundo escuro). O id ganha de qualquer regra de classe. * ---------------------------------------------------------------------- */ .mc-abrir-painel.mc-abrir-painel { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; background: transparent; border: 1px solid var(--mc-borda); border-radius: 999px; cursor: pointer; color: var(--mc-grafite); font: 600 14.5px/1 inherit; transition: border-color .18s ease, background .18s ease; } .mc-abrir-painel.mc-abrir-painel:hover { border-color: var(--mc-grafite); background: var(--mc-superficie); color: var(--mc-grafite); } .mc-abrir-painel.mc-abrir-painel:focus-visible { outline: 3px solid var(--mc-laranja-escuro); outline-offset: 2px; } .mc-abrir-painel-barras { display: flex; flex-direction: column; gap: 4px; } .mc-abrir-painel-barras span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .mc-abrir-painel-barras span:nth-child(2) { width: 13px; margin-left: auto; } .mc-painel-fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(9, 13, 22, .55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s ease; } .mc-painel-fundo.aberto { opacity: 1; } #mc-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(420px, 92vw); display: flex; flex-direction: column; background: var(--mc-grafite); color: #fff; box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .9); transform: translateX(102%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); overflow: hidden; } #mc-painel.aberto { transform: none; } #mc-painel .mc-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); flex: 0 0 auto; } #mc-painel .mc-painel-logo { width: 176px; height: auto; display: block; } #mc-painel .mc-fechar-painel { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; min-width: 0; padding: 0; background: rgba(255, 255, 255, .07); border: 0; border-radius: 999px; color: #fff; cursor: pointer; transition: background .18s ease, color .18s ease; } #mc-painel .mc-fechar-painel:hover { background: var(--mc-laranja); color: var(--mc-grafite); } #mc-painel .mc-fechar-painel:focus-visible { outline: 3px solid var(--mc-laranja); outline-offset: 2px; } #mc-painel .mc-painel-corpo { flex: 1 1 auto; overflow-y: auto; padding: 26px 26px 34px; display: flex; flex-direction: column; gap: 26px; overscroll-behavior: contain; } #mc-painel h2 { margin: 0 0 12px; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.2; text-transform: uppercase; color: var(--mc-laranja); } #mc-painel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #mc-painel .mc-painel-grupo a { display: block; padding: 9px 12px; margin-left: -12px; border-radius: 10px; color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 16px; line-height: 1.35; transition: background .16s ease, color .16s ease; } #mc-painel .mc-painel-grupo a:hover, #mc-painel .mc-painel-grupo a:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; } #mc-painel .mc-painel-contato { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); } #mc-painel .mc-painel-linha { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: rgba(255, 255, 255, .82); text-decoration: none; } #mc-painel .mc-painel-linha svg { flex: 0 0 auto; margin-top: 3px; color: var(--mc-laranja); } #mc-painel .mc-painel-linha strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: #fff; } #mc-painel .mc-painel-linha small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .52); } #mc-painel a.mc-painel-linha:hover strong { color: var(--mc-laranja); } #mc-painel .mc-painel-cta { display: block; margin-top: 18px; padding: 15px 24px; background: var(--mc-laranja); color: var(--mc-grafite); font-weight: 600; font-size: 15.5px; text-align: center; text-decoration: none; border-radius: 999px; transition: background .18s ease; } #mc-painel .mc-painel-cta:hover { background: #fff; color: var(--mc-grafite); } #mc-painel .mc-painel-redes { display: flex; gap: 10px; margin-top: 20px; } #mc-painel .mc-painel-redes a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .18s ease, color .18s ease; } #mc-painel .mc-painel-redes a:hover { background: var(--mc-laranja); color: var(--mc-grafite); } #mc-painel .mc-painel-registro { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .38); } body.mc-painel-aberto { overflow: hidden; } @media (prefers-reduced-motion: reduce) { #mc-painel, .mc-painel-fundo { transition: none; } } /* -------------------------------------------------------------------------- * Botoes do Elementor: sem halo laranja. * O brilho estava gravado no proprio dado da pagina (button_box_shadow), entao * as paginas antigas continuariam a mostra-lo ate serem regeradas. Este bloco * apaga o halo em qualquer caso e devolve profundidade com sombra neutra. * -------------------------------------------------------------------------- */ .elementor-button, .elementor-button-wrapper .elementor-button { box-shadow: 0 6px 18px -10px rgba(40, 38, 36, .45) !important; } .elementor-button:hover, .elementor-button-wrapper .elementor-button:hover { box-shadow: 0 10px 22px -12px rgba(40, 38, 36, .55) !important; } /* Botao fantasma e botoes de texto nao levam sombra nenhuma. */ .elementor-button[class*="elementor-size-sm"], .mc-cabecalho .elementor-button { box-shadow: none !important; } /* -------------------------------------------------------------------------- * O botao "Menu" e navegacao de celular: no desktop o menu horizontal ja esta * na barra, e o hamburguer ao lado dele lia-se como menu mobile vazado para o * desktop. Acima do breakpoint do kit (1025px) ele sai. * -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .mc-abrir-painel.mc-abrir-painel { display: none !important; } } /* -------------------------------------------------------------------------- * Botao flutuante de WhatsApp: rotulo e icone brancos. * `.mc-flutuante` define `color:#fff`, mas `.elementor-kit-6 a` pinta todo * link com a cor de acento, tem mais especificidade (0,1,1 contra 0,1,0) e * entra no depois do martcon.css — o texto e o SVG (fill:currentColor) * saiam laranja escuro sobre o verde. A classe repetida sobe a especificidade * sem precisar de !important. * -------------------------------------------------------------------------- */ .mc-flutuante.mc-flutuante, .mc-flutuante.mc-flutuante:link, .mc-flutuante.mc-flutuante:visited, .mc-flutuante.mc-flutuante:hover, .mc-flutuante.mc-flutuante:focus, .mc-flutuante.mc-flutuante:focus-visible, .mc-flutuante.mc-flutuante:active { color: #fff; } .mc-flutuante.mc-flutuante svg, .mc-flutuante.mc-flutuante svg path { fill: currentColor; } /* -------------------------------------------------------------------------- * FAQ e mosaico de fotos: o desenho vindo de nubank.com.br/empresas. * * Entre a 1.3.4 e a 1.3.8 o FAQ era um cartao branco por pergunta. A moldura * era o que dava ar de painel de SaaS ao site inteiro, e o cliente escolheu a * referencia oposta: nada de caixa em volta de nada, e o tamanho da letra a * fazer o trabalho que a borda fazia. Este bloco so acerta o que o widget do * Elementor nao alcanca; as medidas mandam de `acordeao()` em builder.js. * * Classe repetida `.elementor-widget` = (0,2,0), para ganhar do CSS de fabrica * do widget (0,1,0) tambem nas paginas ainda nao regeradas. * -------------------------------------------------------------------------- */ .elementor-widget.elementor-widget-n-accordion { /* o `+` no fim da linha: de fabrica o widget traz order:-1 */ --n-accordion-title-icon-order: initial; --n-accordion-title-justify-content: space-between; --n-accordion-icon-gap: 0 28px; width: 100%; } /* 820px: uma pergunta de 27px em 1200px de caixa passa de 100 caracteres por linha e deixa de se ler como pergunta. */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion { max-width: 820px; margin-inline: auto; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; line-height: 1.28; color: inherit; text-align: start; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title { transition: color .18s ease, border-color .18s ease; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { flex: none; transition: transform .2s ease; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(180deg); } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--mc-laranja-escuro); outline-offset: 4px; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-con p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .elementor-widget.elementor-widget-n-accordion { --n-accordion-icon-gap: 0 16px; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-con { --padding-right: 0px; } } /* --- mosaico de fotos --------------------------------------------------- * O azulejo de foto com o rotulo por cima e o chevron: o bloco que mais se * repete na referencia. Canto reto de proposito — a foto quadrada ao lado do * botao em pilula e a mistura que o Nubank faz, e e ela que da o contraste. * Os topos escalonados sao o que impede a fila de parecer uma grade. * ---------------------------------------------------------------------- */ .mc-mosaico { display: grid; grid-template-columns: repeat(var(--mc-cols, 3), minmax(0, 1fr)); gap: 22px; align-items: start; width: 100%; } .mc-azulejo { position: relative; display: flex; align-items: flex-end; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mc-grafite); text-decoration: none; transition: transform .28s ease; } /* ⚠️ Na referencia o mosaico NAO e uma grade de iguais: cada azulejo tem altura e recuo proprios, e e essa irregularidade que faz a fila parecer composta em vez de gerada. Quatro proporcoes diferentes em rotacao, mais o escalonamento dos topos. */ .mc-mosaico > .mc-azulejo:nth-child(4n + 1) { aspect-ratio: 3 / 4; margin-top: 0; } .mc-mosaico > .mc-azulejo:nth-child(4n + 2) { aspect-ratio: 4 / 3; margin-top: 62px; } .mc-mosaico > .mc-azulejo:nth-child(4n + 3) { aspect-ratio: 1 / 1; margin-top: 26px; } .mc-mosaico > .mc-azulejo:nth-child(4n + 4) { aspect-ratio: 4 / 5; margin-top: 78px; } .mc-azulejo-foto { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; transition: transform .5s ease; } .mc-azulejo-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 16, 26, .84) 4%, rgba(12, 16, 26, 0) 58%); } .mc-azulejo-txt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 24px; color: #fff; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: var(--mc-rot, 25px); font-weight: 700; letter-spacing: -.6px; line-height: 1.2; } .mc-azulejo-txt svg { flex: none; width: 24px; height: 24px; transition: transform .22s ease; } .mc-azulejo:hover .mc-azulejo-foto, .mc-azulejo:focus-visible .mc-azulejo-foto { transform: scale(1.05); } .mc-azulejo:hover .mc-azulejo-txt svg, .mc-azulejo:focus-visible .mc-azulejo-txt svg { transform: translateX(5px); } .mc-azulejo:focus-visible { outline: 3px solid var(--mc-laranja); outline-offset: 3px; } @media (max-width: 1024px) { .mc-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-mosaico > .mc-azulejo:nth-child(n) { aspect-ratio: 4 / 3; margin-top: 0; } .mc-mosaico > .mc-azulejo:nth-child(2n) { margin-top: 38px; } } @media (max-width: 767px) { .mc-mosaico { grid-template-columns: 1fr; gap: 16px; } /* no telemovel o escalonamento vira so buraco: uma coluna nao tem vizinho para escalonar contra, e a proporcao volta a ser uma so. */ .mc-mosaico > .mc-azulejo { margin-top: 0 !important; aspect-ratio: 16 / 10 !important; } .mc-azulejo-txt { padding: 18px; font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .mc-azulejo, .mc-azulejo-foto, .mc-azulejo-txt svg, .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { transition: none; } } /* -------------------------------------------------------------------------- * Botoes do Elementor: sem halo laranja. * O brilho estava gravado no proprio dado da pagina (button_box_shadow), entao * as paginas antigas continuariam a mostra-lo ate serem regeradas. Este bloco * apaga o halo em qualquer caso e devolve profundidade com sombra neutra. * -------------------------------------------------------------------------- */ .elementor-button, .elementor-button-wrapper .elementor-button { box-shadow: 0 6px 18px -10px rgba(40, 38, 36, .45) !important; } .elementor-button:hover, .elementor-button-wrapper .elementor-button:hover { box-shadow: 0 10px 22px -12px rgba(40, 38, 36, .55) !important; } /* Botao fantasma e botoes de texto nao levam sombra nenhuma. */ .elementor-button[class*="elementor-size-sm"], .mc-cabecalho .elementor-button { box-shadow: none !important; } /* -------------------------------------------------------------------------- * O botao "Menu" e navegacao de celular: no desktop o menu horizontal ja esta * na barra, e o hamburguer ao lado dele lia-se como menu mobile vazado para o * desktop. Acima do breakpoint do kit (1025px) ele sai. * -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .mc-abrir-painel.mc-abrir-painel { display: none !important; } } /* -------------------------------------------------------------------------- * Botao flutuante de WhatsApp: rotulo e icone brancos. * `.mc-flutuante` define `color:#fff`, mas `.elementor-kit-6 a` pinta todo * link com a cor de acento, tem mais especificidade (0,1,1 contra 0,1,0) e * entra no depois do martcon.css — o texto e o SVG (fill:currentColor) * saiam laranja escuro sobre o verde. A classe repetida sobe a especificidade * sem precisar de !important. * -------------------------------------------------------------------------- */ .mc-flutuante.mc-flutuante, .mc-flutuante.mc-flutuante:link, .mc-flutuante.mc-flutuante:visited, .mc-flutuante.mc-flutuante:hover, .mc-flutuante.mc-flutuante:focus, .mc-flutuante.mc-flutuante:focus-visible, .mc-flutuante.mc-flutuante:active { color: #fff; } .mc-flutuante.mc-flutuante svg, .mc-flutuante.mc-flutuante svg path { fill: currentColor; } /* -------------------------------------------------------------------------- * FAQ: o acordeao. * * O widget `nested-accordion` estava a sair com o desenho de fabrica — sem * fundo, sem raio, 10px de respiro e o `+` a esquerda a empurrar a pergunta * para a direita — porque os nomes dos controlos gravados no dado da pagina * ate a 1.3.3 nao existiam (ver o comentario de `acordeao()` em builder.js). * * Este bloco e a fonte da verdade do desenho: vale nas 14 paginas ja no ar sem * esperar regeracao, e por isso usa a classe repetida `.elementor-widget` — * (0,2,0) ganha do CSS de fabrica do widget (0,1,0) e da regra por elemento * que o Elementor escreve na pagina (0,1,0), sem precisar de !important. * Os mesmos valores estao em `acordeao()`; mexer aqui pede mexer la. * -------------------------------------------------------------------------- */ .elementor-widget.elementor-widget-n-accordion { /* o `+` no fim da linha: de fabrica o widget traz order:-1 e manda o icone para o inicio, o que com `space-between` atira a pergunta para a direita */ --n-accordion-title-icon-order: initial; --n-accordion-title-justify-content: space-between; --n-accordion-item-title-space-between: 12px; --n-accordion-item-title-distance-from-content: 0px; --n-accordion-padding: 20px 24px; --n-accordion-border-radius: 14px; --n-accordion-border-color: var(--mc-borda); --n-accordion-icon-size: 13px; --n-accordion-icon-gap: 0 16px; --n-accordion-title-font-size: 17.5px; --n-accordion-title-normal-color: var(--mc-grafite); --n-accordion-title-hover-color: var(--mc-grafite); --n-accordion-title-active-color: var(--mc-grafite); --n-accordion-icon-normal-color: var(--mc-laranja); --n-accordion-icon-hover-color: var(--mc-laranja-escuro); --n-accordion-icon-active-color: #fff; width: 100%; } /* 1200px de caixa punha a pergunta esticada por mais de mil pixels. A medida vai na lista e nao no widget: `max-width` no widget perde para `.elementor.elementor .e-con > .elementor-widget{max-width:100%}` (0,3,0) do frontend.min.css, que ainda por cima entra no depois deste ficheiro. */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion { max-width: 880px; margin-inline: auto; } /* cada pergunta e um cartao branco fechado sobre si */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title { background: var(--mc-branco); border: 1px solid var(--mc-borda); box-shadow: 0 1px 2px rgba(40, 38, 36, .04); transition: border-color .18s ease, box-shadow .18s ease; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-text { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-weight: 600; line-height: 1.45; color: inherit; text-align: start; } /* o `+` numa bolha, para nao ficar um sinal solto no fim da linha */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { flex: none; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--mc-laranja-claro); transition: background-color .18s ease; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item:not([open]):hover > .e-n-accordion-item-title { border-color: var(--mc-faq-borda-ativa); box-shadow: 0 8px 20px -14px rgba(40, 38, 36, .5); } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-icon { background: #ffdac3; } /* aberto: o cabecalho perde o canto e a borda de baixo para encostar na resposta — os dois passam a ler-se como um cartao unico */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title { border-color: var(--mc-faq-borda-ativa); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 14px; box-shadow: none; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--mc-laranja); } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--mc-laranja-escuro); outline-offset: 2px; } /* a resposta */ .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-con { background: var(--mc-branco); border: 1px solid var(--mc-faq-borda-ativa); border-top: 0; border-radius: 0 0 14px 14px; --padding-top: 2px; --padding-right: 24px; --padding-bottom: 22px; --padding-left: 24px; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-con p:last-child { margin-bottom: 0; } /* Rede de seguranca do celular: numa pagina ja regerada quem manda e a regra do Elementor (0,3,0), que traz as mesmas medidas de `acordeao()`; este bloco (0,2,0) so entra onde a pagina ainda nao foi regerada. */ @media (max-width: 767px) { .elementor-widget.elementor-widget-n-accordion { --n-accordion-padding: 16px 18px; --n-accordion-title-font-size: 16.5px; --n-accordion-icon-gap: 0 12px; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-con { --padding-right: 18px; --padding-bottom: 18px; --padding-left: 18px; } .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { width: 26px; height: 26px; } } @media (prefers-reduced-motion: reduce) { .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title, .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-icon { transition: none; } } /* -------------------------------------------------------------------------- * Movimento: revelar ao rolar. * * ⚠️ O estado escondido depende da classe `mc-anima`, que o martcon.js poe no * logo no arranque. Sem JS — ou com o JS a falhar — nada fica escondido. * Este cuidado nao e teorico: o efeito nativo do Elementor faz o contrario, * deixa os widgets a `opacity:0` no proprio dado, e por isso cega o editor e * apaga a pagina inteira quando o script nao corre. * Ver a licao `elementor-reveal-ao-rolar-cega-o-editor`. * * O movimento e curto e num sentido so: 18px de subida e 0,55s. A referencia * nao tem nada a saltar nem a rodar — o que ela faz e a pagina assentar. * -------------------------------------------------------------------------- */ html.mc-anima .mc-revela { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } html.mc-anima .mc-revela.mc-visivel { opacity: 1; transform: none; /* fora depois de correr: `will-change` permanente vira bloco de contencao e estraga o `position:fixed` de dentro (o painel lateral, o botao do zap). */ will-change: auto; } /* Numa fila, cada item entra logo a seguir ao anterior. Escadinha curta: cinco passos de 70ms, senao o ultimo cartao chega tarde de mais. */ html.mc-anima .mc-revela[data-mc-passo="1"] { transition-delay: .07s; } html.mc-anima .mc-revela[data-mc-passo="2"] { transition-delay: .14s; } html.mc-anima .mc-revela[data-mc-passo="3"] { transition-delay: .21s; } html.mc-anima .mc-revela[data-mc-passo="4"] { transition-delay: .28s; } html.mc-anima .mc-revela[data-mc-passo="5"] { transition-delay: .35s; } @media (prefers-reduced-motion: reduce) { html.mc-anima .mc-revela { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- * REDESIGN 3.0 (04/09/2026) — o vocabulario das referencias do cliente * (tactus.com.br, contmed.com.br, alume.com/contabilidade) * * Regra que segura o conjunto: o CARTAO e a peca-base e a SOMBRA e o que o * separa do fundo. Cor cheia so em duas pecas (a faixa de processo e a faixa * final da marca); tudo o resto e branco sobre cinza claro. * ---------------------------------------------------------------------- */ :root { --mc-laranja-queimado: #8f3a00; --mc-verde-wpp: #25d366; --mc-sombra-cartao: 0 14px 34px -16px rgba(40, 38, 36, .22); --mc-sombra-alta: 0 22px 46px -18px rgba(40, 38, 36, .30); } /* --- a fila de cartoes que SOBREPOE o pe do heroi ---------------------- */ body .elementor .mc-flutua { position: relative; z-index: 3; margin-top: -74px; } body .elementor .mc-flutua { padding-top: 0; padding-bottom: 0; } @media (max-width: 1024px) { body .elementor .mc-flutua { margin-top: -44px; } } @media (max-width: 767px) { /* No telemovel o heroi acaba com a fotografia e nao ha pe para sobrepor: a fila desce e vira uma seccao normal, com respiro proprio. */ body .elementor .mc-flutua { margin-top: 0; } .mc-flutua { padding-top: 26px; } } /* --- cartao ------------------------------------------------------------ */ .mc-cartao:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -18px rgba(40,38,36,.30); } /* O botao do cartao de servico encosta no fundo, para os quatro cartoes terminarem na mesma linha mesmo com descricoes de tamanhos diferentes. */ .mc-cartao-servico { height: 100%; } .mc-cartao-servico .elementor-widget-button { margin-top: auto; } .mc-cartao-confianca .elementor-icon-box-title { font-size: 17px; } /* --- rotulos ----------------------------------------------------------- */ .mc-rotulo-cartao, .mc-rotulo-secao { display: inline-block; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; } .mc-rotulo-secao { color: #b84a00; background: #fff0e6; padding: 7px 14px; border-radius: 999px; } .mc-selo-heroi { display: inline-block; background: #fff; border: 1px solid #dedad5; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; color: #66625e; box-shadow: 0 14px 34px -16px rgba(40,38,36,.22); } .mc-selo-heroi b { color: #3b3a38; } /* --- heroi 3.0: a fotografia num quadro com sombra --------------------- */ .mc-heroi-quadro .mc-foto, .mc-heroi-quadro .elementor-widget-container > div { box-shadow: 0 22px 46px -18px rgba(40,38,36,.30); border-radius: 24px; } /* ⚠️ O veu laranja do pe do heroi era da rodada de 04/09 de manha, quando o heroi era ESCURO. Sobre o heroi claro ele suja o fundo e ainda passa por baixo da fila de cartoes. Desligado so para o heroi 3.0. */ .mc-heroi-3::after { content: none; } /* --- estrelas e assinatura do depoimento ------------------------------- */ .mc-estrelas { color: #f59e0b; font-size: 19px; letter-spacing: 3px; line-height: 1; } .mc-assina { display: block; line-height: 1.45; margin-top: 4px; } .mc-assina b { display: block; color: #3b3a38; font-size: 15.5px; } .mc-assina em { display: block; font-style: normal; color: #66625e; font-size: 13.5px; } /* --- pilulas de perfil -------------------------------------------------- */ .mc-pilula .elementor-button { border-color: #dedad5 !important; background: #fff !important; color: #3b3a38 !important; box-shadow: 0 14px 34px -16px rgba(40,38,36,.22); } .mc-pilula .elementor-button:hover { border-color: #3b3a38 !important; background: #3b3a38 !important; color: #fff !important; } /* --- faixa de processo numerada ---------------------------------------- */ /* Da Tactus: duas cores separam o que e do CLIENTE do que e da CONTABILIDADE. Branco sobre o grafite #3b3a38 da 15,5:1; o grafite sobre o laranja da 6,5:1. */ .mc-processo { display: flex; width: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 46px -18px rgba(40,38,36,.30); } .mc-processo-lado { padding: 30px 28px 32px; } .mc-processo-seu { background: #3b3a38; flex: 0 0 34%; } .mc-processo-nosso { background: #ff6600; flex: 1 1 66%; } .mc-processo-lado h3 { margin: 0 0 20px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .mc-processo-seu.mc-processo-seu h3 { color: #fff; } .mc-processo-nosso h3 { color: #3b3a38; } .mc-processo-lado ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .mc-processo-seu ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-processo-nosso ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mc-passo-n { display: block; font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 8px; } .mc-processo-seu.mc-processo-seu .mc-passo-n { color: #fff; } .mc-processo-nosso .mc-passo-n { color: #3b3a38; } .mc-processo-lado p { margin: 0; font-size: 14.5px; line-height: 1.5; } .mc-processo-seu.mc-processo-seu p { color: rgba(255, 255, 255, .92); } .mc-processo-nosso p { color: #3b3a38; } @media (max-width: 900px) { .mc-processo { flex-direction: column; border-radius: 18px; } .mc-processo-seu ol, .mc-processo-nosso ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body .elementor .mc-heroi-lp + .mc-flutua { margin-top: 40px; } /* --- barra superior de utilidades -------------------------------------- */ /* A peca da Contmed e da Tactus: telefone, e-mail e horario ACIMA do cabecalho. Branco a 78% sobre o grafite da 11:1; o laranja da marca sobre o grafite da 7,5:1. */ .mc-utilidades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; width: 100%; padding: 9px 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); } .mc-utilidades a { color: rgba(255, 255, 255, .88); text-decoration: none; } .mc-utilidades a:hover, .mc-utilidades a:focus-visible { color: #ff6600; } .mc-util-horario { margin-inline-start: auto; } .mc-util-wpp { font-weight: 700; color: #ff6600; } @media (max-width: 767px) { /* No telemovel sobra o essencial: o horario e o que menos decide um clique. */ .mc-util-horario { display: none; } .mc-utilidades { font-size: 12.5px; gap: 6px 16px; justify-content: center; } } /* -------------------------------------------------------------------------- * FUNDO DESENHADO COM A MARCA — 04/09/2026, 3.3 * * O cliente cortou as fotografias de banco (*"o cliente ja tinha informado que * nao gostou delas"*) e pediu, no lugar, *"um recorte com uma forma de fundo * desenhada, talvez usando a marca"*. As tres pecas abaixo sao isso: o simbolo * do logotipo — as teclas de calculadora — usado como forma, e nao como icone. * ---------------------------------------------------------------------- */ /* --- cartao de servico: branco, com o simbolo em recorte no canto --------- */ .mc-cartao-servico { position: relative; overflow: hidden; } /* ⚠️ So o SIMBOLO vive aqui. O degrade vem da camada de sobreposicao do proprio container (o 'veu' do gerador): sao duas camadas diferentes porque uma imagem e um degrade nao cabem na mesma, e '::before' ja e da sobreposicao do Elementor. */ .mc-cartao-servico::after { content: ''; position: absolute; right: -38px; bottom: -42px; width: 200px; height: 200px; background: url(../../../uploads/martcon/grafismo-teclas-laranja.png) no-repeat center center; background-size: contain; opacity: .17; pointer-events: none; z-index: 0; } .mc-cartao-servico > .e-con-inner, .mc-cartao-servico > .e-con, .mc-cartao-servico > .elementor-element { position: relative; z-index: 1; } /* --- painel do heroi: a marca no lugar do retrato de banco ---------------- */ .mc-painel-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 470px; padding: 36px; border-radius: 24px; background-image: linear-gradient(150deg, #b84a00 0%, #8f3a00 60%, #7a3300 100%); box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .45); color: #fff; } .mc-painel-simbolo { position: absolute; right: -60px; top: -34px; width: 330px; height: 330px; background: url(../../../uploads/martcon/grafismo-teclas-branco.png) no-repeat center center; background-size: contain; opacity: .17; pointer-events: none; } .mc-painel-topo { position: relative; } .mc-painel-rotulo { display: block; margin-bottom: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; /* #ffefe4 sobre #b84a00 da 4,7:1 — o #ffd4b8 que estava aqui dava 3,6:1. */ color: #ffefe4; } .mc-painel-topo strong { display: block; max-width: 16ch; font-size: 27px; line-height: 1.24; font-weight: 700; letter-spacing: -.4px; } .mc-painel-provas { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .mc-painel-provas li { border-top: 1px solid rgba(255, 255, 255, .24); padding-top: 12px; } .mc-painel-provas b { display: block; font-size: 19px; line-height: 1.2; } .mc-painel-provas span { font-size: 13.5px; color: rgba(255, 255, 255, .82); } @media (max-width: 1024px) { .mc-painel-marca { min-height: 0; padding: 28px; } .mc-painel-topo strong { font-size: 23px; } .mc-painel-simbolo { width: 240px; height: 240px; right: -50px; } } /* --- marca d'agua de seccao ---------------------------------------------- */ /* Pedido para a seccao "para quem atendemos": um fundo da marca discreto, que de trabalho ao bloco sem competir com as pilulas. A 5% a trama le-se como textura de papel; acima disso comeca a disputar com o texto. */ .mc-secao-marca { position: relative; overflow: hidden; } .mc-secao-marca::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../../../uploads/martcon/grafismo-trama-laranja.png) repeat center center; background-size: 240px auto; opacity: .05; } body .elementor .mc-secao-marca > .e-con-inner { position: relative; z-index: 1; } .mc-processo-lado li { position: relative; padding-left: 20px; } .mc-processo-lado li + li::before { content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; } .mc-processo-seu li + li::before { background: rgba(255,255,255,.22); } .mc-processo-nosso li + li::before { background: rgba(40,38,36,.28); } .mc-processo-lado li:first-child { padding-left: 0; } @media (max-width: 900px){ .mc-processo-lado li{padding-left:0} .mc-processo-lado li + li::before{display:none} } .mc-utilidades.mc-utilidades a { color: rgba(255,255,255,.88); text-decoration: none; } /* --- painel da marca, versao clara (para fundo branco ou gelo) ------------ */ .mc-painel-marca.mc-painel-claro { background-image: linear-gradient(150deg, #fff 0%, #fff 42%, #ffe9dc 100%); border: 1px solid var(--mc-borda); box-shadow: var(--mc-sombra-cartao); color: var(--mc-grafite); min-height: 400px; } .mc-painel-claro .mc-painel-simbolo { background-image: url(../../../uploads/martcon/grafismo-teclas-laranja.png); opacity: .15; } .mc-painel-claro .mc-painel-topo strong { color: var(--mc-grafite); font-size: 24px; max-width: 22ch; } .mc-painel-claro .mc-painel-provas li { border-top-color: var(--mc-borda); } .mc-painel-claro .mc-painel-provas b { color: var(--mc-grafite); } .mc-painel-claro .mc-painel-provas span { color: var(--mc-texto-claro); } /* -------------------------------------------------------------------------- * 3.4 — a fotografia de volta, e a JORNADA copiada da Tactus * ---------------------------------------------------------------------- */ /* --- foto do heroi, com o selo de prova por cima ------------------------- */ .mc-foto-heroi { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--mc-sombra-alta); } .mc-foto-heroi img { display: block; width: 100%; height: 470px; object-fit: cover; } /* O selo e o tique das tres referencias: um cartao branco pequeno a montar em cima da fotografia, com um numero ou um prazo. */ .mc-foto-selo { position: absolute; left: 18px; bottom: 18px; background: #fff; border-radius: 14px; padding: 12px 18px; box-shadow: var(--mc-sombra-cartao); } .mc-foto-selo b { display: block; font-size: 16px; color: var(--mc-grafite); } .mc-foto-selo span { font-size: 12.5px; color: var(--mc-texto-claro); } @media (max-width: 1024px) { .mc-foto-heroi img { height: 320px; } } /* --- cartao de servico com foto: altura minima para a foto aparecer ------ */ .mc-cartao-servico { min-height: 370px; } /* Com o cartao outra vez escuro em baixo, o simbolo volta a ser o branco. */ .mc-cartao-servico::after { background-image: url(../../../uploads/martcon/grafismo-teclas-branco.png); opacity: .13; } /* --- JORNADA ------------------------------------------------------------- */ .mc-jornada { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; } /* o trilho vertical no meio */ .mc-jornada::before { content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; background: var(--mc-borda); } .mc-jornada-item { position: relative; display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; padding: 16px 0; } .mc-jornada-cartao { grid-column: 1; background: #fff; border-radius: 18px; padding: 24px 26px; box-shadow: var(--mc-sombra-cartao); text-align: right; } .mc-jornada-legenda { grid-column: 3; padding-left: 4px; } .mc-jornada-dir .mc-jornada-cartao { grid-column: 3; text-align: left; } .mc-jornada-dir .mc-jornada-legenda { grid-column: 1; text-align: right; padding: 0 4px 0 0; } .mc-jornada-marco { grid-column: 2; display: flex; justify-content: center; } .mc-jornada-marco span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--mc-laranja-escuro); color: #fff; font-weight: 800; font-size: 17px; /* o anel branco recorta o trilho por tras do marco */ box-shadow: 0 0 0 7px #fff, 0 10px 22px -12px rgba(40, 38, 36, .55); } .mc-jornada-rotulo { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-laranja-escuro); } /* ⚠️ Classe repetida: '.elementor-kit-N h3' e (0,1,1) e entra depois. */ .mc-jornada-cartao.mc-jornada-cartao h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.28; color: var(--mc-grafite); } .mc-jornada-cartao p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mc-texto); } .mc-jornada-legenda b { display: block; font-size: 17px; color: var(--mc-grafite); } .mc-jornada-legenda span { font-size: 13.5px; color: var(--mc-texto-claro); } @media (max-width: 820px) { /* No telemovel o trilho encosta a esquerda e a legenda sai: dois cartoes lado a lado numa coluna de 390px nao sao uma linha do tempo, sao ruido. */ .mc-jornada::before { left: 23px; } .mc-jornada-item { grid-template-columns: 46px 1fr; gap: 16px; } .mc-jornada-marco, .mc-jornada-dir .mc-jornada-marco { grid-column: 1; justify-content: flex-start; } .mc-jornada-cartao, .mc-jornada-dir .mc-jornada-cartao { grid-column: 2; text-align: left; } .mc-jornada-legenda { display: none; } } /* --- 3.5: a foto do cartao, semi-embutida no topo ------------------------ */ /* Proporcao FIXA de 16:10 e 'object-fit: cover'. Como o ficheiro ja vem cortado nessa proporcao por 'fotos-padrao.py', o 'cover' nao tem nada para cortar — a foto aparece inteira, igual nos quatro cartoes, em qualquer largura de ecra. Era esta a queixa: seis proporcoes, seis cortes. */ .mc-cartao-servico { min-height: 0; padding: 0; overflow: hidden; } .mc-cartao-foto { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .mc-cartao-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } /* O degrade que o cliente pediu continua — mas por cima da FOTO, a morrer no branco do cartao, em vez de por baixo do texto. */ .mc-cartao-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(152deg, rgba(184,74,0, 0) 0%, rgba(184,74,0, .10) 46%, rgba(122,51,0, .55) 100%); } /* o simbolo da marca sai daqui: com a foto em faixa ele ficava por cima do texto branco do cartao, que agora e escuro */ .mc-cartao-servico::after { content: none; } /* --- 3.5: a foto do heroi em 4:5 ---------------------------------------- */ .mc-foto-heroi img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; } @media (max-width: 1024px) { .mc-foto-heroi img { aspect-ratio: 16 / 10; height: auto; } } /* Os quatro cartoes acabam na mesma linha: a coluna de texto cresce e o botao e empurrado para o fundo, independentemente do tamanho da descricao. */ .mc-cartao-servico > .e-con-inner { height: 100%; } .mc-cartao-servico > .e-con-inner > .e-con:last-child, .mc-cartao-servico > .e-con:last-child { flex-grow: 1; justify-content: space-between; } /* --- fading laranja (ver martcon.css) — a previa tem de mostrar o mesmo --- */ .mc-heroi{position:relative} .mc-heroi::after{content:'';position:absolute;left:0;right:0;bottom:0;height:190px;z-index:0;pointer-events:none; background-image:linear-gradient(180deg,rgba(255,102,0,0) 0%,rgba(255,102,0,.10) 54%,rgba(255,102,0,.26) 100%)} .mc-heroi > *{position:relative;z-index:1} @supports ((-webkit-background-clip:text) or (background-clip:text)){ h1.mc-degrade,h2.mc-degrade,.mc-degrade{background-image:linear-gradient(166deg,#fff 6%,#ffd6bf 46%,#ff6600 96%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}} hr.mc-filete{border:0 !important;height:1px;background-image:linear-gradient(90deg,#ff6600 0%,rgba(255,102,0,.42) 18%,#dedad5 46%,rgba(221,214,207,0) 100%) !important} .mc-rodape{position:relative} /* a legenda legal do formulario dentro do cartao de vidro e clara, como no WordPress: a previa escrevia-a em cinza escuro sobre o cartao escuro. */ .mc-vidro .mc-aviso{color:rgba(255,255,255,.78) !important} .mc-rodape::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none; background-image:linear-gradient(90deg,#ff6600 0%,rgba(255,102,0,.34) 28%,rgba(255,102,0,0) 64%)} /* AVISO: o respiro da fila que sobrepoe o heroi tem de ser zerado no `.e-con-inner`: e la que o Elementor escreve o padding da seccao. */ body .elementor .mc-flutua.mc-flutua > .e-con-inner { padding-top: 0; padding-bottom: 0; } @media (max-width: 767px) { body .elementor .mc-flutua.mc-flutua > .e-con-inner { padding-top: 26px; } } /* --- painel do heroi das landings: foto em cima, formulario colado -------- */ /* AVISO: o raio vive no INVOLUCRO e o `overflow: hidden` corta os dois filhos. Se cada um mantivesse o seu raio, aparecia um degrau branco na costura. */ .mc-heroi-painel { border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px -30px rgba(40, 38, 36, .55); align-self: flex-start; background: #fff; } .mc-heroi-painel .mc-cartao-foto, .mc-heroi-painel .mc-heroi-form { border-radius: 0; } .mc-heroi-painel .mc-heroi-form { box-shadow: none; border: 0; } @media (max-width: 767px) { .mc-heroi-painel { border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(40, 38, 36, .5); } } /* -------------------------------------------------------------------------- * 3.6 — a rodada de desenho de 04/09 a noite * ---------------------------------------------------------------------- */ /* --- cartao de servico: foto de fundo, texto no canto inferior esquerdo --- */ /* O degrade vem da camada de sobreposicao do container (o `veu` do gerador), ancorado em baixo: os 28% de cima ficam limpos e a cor so fecha onde o texto comeca. Aqui fica so a altura, o recorte e o tamanho do botao. */ .mc-cartao-servico { min-height: 400px; padding: 0; overflow: hidden; position: relative; } .mc-cartao-servico::after { content: none; } /* o texto encosta no canto inferior esquerdo, como o cliente pediu */ .mc-cartao-texto { width: 100%; } /* Botao mais pequeno dentro do cartao: *"nao precisa ter botao tao grande assim, pode diminuir um pouquinho"*. */ .mc-botao-pequeno .elementor-button { padding: 11px 18px !important; font-size: 14.5px !important; } /* --- logotipos de clientes: centrados e sem fundo ------------------------ */ /* Os PNG vieram com fundo branco chapado e nao ha como recorta-los aqui. `multiply` sobre o branco da seccao faz o fundo desaparecer e deixa so o desenho — e o truque padrao para logotipo de cliente. */ .mc-logos img { mix-blend-mode: multiply; height: auto; } .mc-logos .elementor-widget-image { text-align: center; } /* --- para quem atendemos: cartoes em vez de pilulas ---------------------- */ .mc-perfis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; } .mc-perfil { position: relative; display: block; padding: 22px 46px 22px 24px; background: #fff; border-radius: 16px; box-shadow: var(--mc-sombra-cartao); text-decoration: none; border: 1px solid transparent; } .mc-perfil:hover, .mc-perfil:focus-visible { border-color: var(--mc-laranja); box-shadow: var(--mc-sombra-alta); } .mc-perfil b { display: block; font-size: 17.5px; color: var(--mc-grafite); margin-bottom: 5px; } .mc-perfil span { display: block; font-size: 14px; line-height: 1.5; color: var(--mc-texto-claro); } .mc-perfil em { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 26px; line-height: 1; color: var(--mc-laranja-escuro); } @media (max-width: 900px) { .mc-perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .mc-perfis { grid-template-columns: 1fr; } } /* --- faixa de processo: o lado laranja deixa de ter texto escuro --------- */ /* *"o que a Martcon faz por voce esta tudo com texto preto em cima do laranja, nao esta dando leitura"*. O lado passa ao laranja QUEIMADO com texto branco (9,4:1) e ganha o simbolo da marca em marca d'agua, que era o outro pedido: *"traz a marca de fundo com detalhes"*. */ .mc-processo-nosso { background: var(--mc-laranja-queimado); position: relative; } .mc-processo-nosso::after { content: ''; position: absolute; right: -40px; bottom: -46px; width: 230px; height: 230px; background: url(../../../uploads/martcon/grafismo-teclas-branco.png) no-repeat center center; background-size: contain; opacity: .12; pointer-events: none; } .mc-processo-nosso > * { position: relative; z-index: 1; } .mc-processo-nosso.mc-processo-nosso h3 { color: rgba(255, 255, 255, .82); } .mc-processo-nosso.mc-processo-nosso .mc-passo-n { color: #fff; } .mc-processo-nosso.mc-processo-nosso p { color: rgba(255, 255, 255, .92); } .mc-processo-nosso li + li::before { background: rgba(255, 255, 255, .22); } .mc-processo-seu { background: var(--mc-grafite); } /* --- FAQ: a coluna da esquerda acompanha a rolagem ----------------------- */ /* *"faz ela acompanhar enquanto a gente rola"*. ⚠️ `position: sticky` nao prende debaixo de `overflow: hidden` e precisa que a coluna irma seja MAIS ALTA — as duas condicoes estao satisfeitas aqui porque a lista de perguntas e sempre maior que o cabecalho. */ @media (min-width: 1025px) { body .elementor .mc-faq-2col > .e-con-inner > .e-con:first-child { position: sticky; top: 104px; align-self: flex-start; } } /* ========================================================================== * 4.0 — 06/09/2026: movimento, fotografia certa e texto so onde se le. * * *"preciso de um site novo, com mais movimento, dinamico, seguindo as * referencias"*. Medido nas tres referencias: tudo revela ao rolar, os * cartoes sobem ao passar o rato e ha sempre uma peca a mexer na primeira * dobra. Regras deste bloco: * · toda animacao continua (flutuar, derivar, rolar, pulsar) vive dentro de * `prefers-reduced-motion: no-preference` — quem pediu menos movimento * ve a pagina parada, inteira; * · o revelar-ao-rolar depende da classe `mc-anima` no , posta pelo * JS; sem JS nada fica escondido (ver o bloco "Movimento" mais acima); * · classe repetida onde o kit do Elementor (0,1,1) empataria. * ====================================================================== */ /* --- transicoes de base: cartao, botao, perfil ---------------------------- */ .mc-cartao { transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s ease; } .mc-cartao:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -20px rgba(40, 38, 36, .34); } .elementor-button { transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease !important; } .elementor-button:hover { transform: translateY(-2px); } .mc-perfil { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease; } .mc-perfil:hover { transform: translateY(-4px); } .mc-perfil em { transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .3s ease; } .mc-perfil:hover em { transform: translate(5px, -50%); } /* --- revelar ao rolar: mais curso, e com DIRECAO -------------------------- */ html.mc-anima .mc-revela { transform: translateY(26px); transition-duration: .7s, .7s; } html.mc-anima .mc-revela[data-mc-dir="esq"] { transform: translateX(-34px); } html.mc-anima .mc-revela[data-mc-dir="dir"] { transform: translateX(34px); } html.mc-anima .mc-revela[data-mc-passo="6"] { transition-delay: .42s; } html.mc-anima .mc-revela[data-mc-passo="7"] { transition-delay: .49s; } html.mc-anima .mc-revela.mc-visivel { transform: none; } /* --- HEROI 4.0 ------------------------------------------------------------- */ .mc-heroi-4 { position: relative; overflow: hidden; isolation: isolate; } /* O brilho da marca atras da foto. `::before` do container e do Elementor (a sobreposicao), por isso o brilho e um elemento proprio com z-index negativo dentro do contexto que `isolation: isolate` cria. */ .mc-heroi-blob { position: absolute; right: -12%; top: -8%; width: 118%; height: 112%; border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%; background: radial-gradient(circle at 40% 40%, rgba(255,102,0, .55), rgba(255,102,0, .18) 52%, rgba(255,102,0, 0) 72%); filter: blur(28px); z-index: -1; pointer-events: none; } .mc-heroi-visual { position: relative; max-width: 480px; margin: 0 auto; padding: 18px 0 26px; } .mc-heroi-foto { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(40, 38, 36, .45); aspect-ratio: 4 / 5; background: #e9e6e1; } .mc-heroi-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); } .mc-heroi-visual:hover .mc-heroi-foto img { transform: scale(1.04); } /* selo que flutua por cima da foto (heroi e CTA final) */ .mc-selo-flutua { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 12px 16px 12px 12px; box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .38); z-index: 2; max-width: 260px; } .mc-selo-flutua b { display: block; font-size: 15px; line-height: 1.2; color: #3b3a38; } .mc-selo-flutua small { display: block; font-size: 12.5px; line-height: 1.3; color: #66625e; margin-top: 2px; } .mc-selo-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff0e6; color: #b84a00; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .mc-selo-a { left: -26px; bottom: 44px; } .mc-selo-b { right: -22px; top: 44px; } /* o ponto verde "online", com um anel a pulsar */ .mc-ponto-online { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: #25d366; } .mc-ponto-online::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); } /* a palavra em degrade do H1 (a ideia da etek, em laranja de marca) */ .mc-grad { color: #b84a00; background: linear-gradient(92deg, #8f3a00 0%, #b84a00 45%, #d95700 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* a linha de tres micro-provas por baixo dos botoes */ .mc-heroi-provas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .mc-heroi-provas li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #66625e; } .mc-heroi-provas svg { color: #b84a00; font-size: 16px; flex: none; } /* a escadinha de entrada: a classe entra pelo JS (`ligaHeroi`), por isso sem JS nada fica invisivel */ html.mc-heroi-anima .mc-heroi-4 .mc-entra { opacity: 0; transform: translateY(22px); animation: mc-sobe .8s cubic-bezier(.22, .61, .36, 1) forwards; animation-delay: var(--mc-d, 0ms); } html.mc-heroi-anima .mc-heroi-4 .mc-heroi-visual.mc-entra { transform: translateY(0) scale(.96); animation-name: mc-cresce; } @keyframes mc-sobe { to { opacity: 1; transform: none; } } @keyframes mc-cresce { to { opacity: 1; transform: none; } } @media (max-width: 1024px) { .mc-heroi-visual { max-width: 420px; padding-top: 30px; } .mc-selo-a { left: 0; bottom: 30px; } .mc-selo-b { right: 0; top: 30px; } } @media (max-width: 767px) { .mc-heroi-visual { max-width: 100%; padding: 22px 0 18px; } .mc-heroi-foto { aspect-ratio: 4 / 4.4; } .mc-selo-flutua { padding: 10px 12px 10px 10px; max-width: 220px; } .mc-selo-flutua b { font-size: 14px; } .mc-selo-flutua small { font-size: 12px; } .mc-selo-a { left: 8px; bottom: 30px; } .mc-selo-b { right: 8px; top: 34px; } .mc-heroi-provas li { font-size: 13.5px; } /* o brilho fica dentro da tela: a seccao ja corta, mas o QA responsivo mede o `scrollWidth` antes de o corte contar */ .mc-heroi-blob { right: 0; width: 100%; } } /* --- CARTOES DE SERVICO 4.0: foto por tras, texto so onde e escuro -------- */ .mc-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; width: 100%; } .mc-svc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 480px; border-radius: 22px; overflow: hidden; isolation: isolate; background: #3b3a38; box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .30); transition: transform .38s cubic-bezier(.22, .61, .36, 1), box-shadow .38s ease; } .mc-svc:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -22px rgba(40, 38, 36, .42); } .mc-svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); } .mc-svc:hover img { transform: scale(1.07); } /* O degrade que o cliente descreveu: transparente em cima (ve-se a foto) e o laranja queimado a fechar em baixo. Branco sobre a parada de baixo (rgba(96,30,8,.97) sobre a foto) le acima de 8:1; o texto nunca sobe acima dos 42% porque o corpo tem altura maxima (ver `.mc-svc-corpo`). */ .mc-svc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(96, 30, 8, 0) 0%, rgba(96, 30, 8, 0) 34%, rgba(122,51,0, .62) 54%, rgba(96, 30, 8, .97) 100%); } .mc-svc-corpo { position: relative; padding: 26px 24px 24px; color: #fff; max-height: 58%; } .mc-svc-rotulo { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd4b8; margin-bottom: 8px; } .mc-svc h3, .mc-svc.mc-svc h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.22; letter-spacing: -.3px; color: #fff; } .mc-svc.mc-svc h3 a { color: #fff; text-decoration: none; } .mc-svc.mc-svc h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .mc-svc p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); } .mc-svc-botao, .mc-svc.mc-svc .mc-svc-botao { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; color: #b84a00; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform .22s ease, background-color .22s ease, color .22s ease; } .mc-svc.mc-svc .mc-svc-botao:hover { background: #b84a00; color: #fff; transform: translateY(-2px); } .mc-svc-botao svg { font-size: 16px; } @media (max-width: 1024px) { .mc-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-svc { min-height: 440px; } } @media (max-width: 600px) { .mc-svcs { grid-template-columns: 1fr; gap: 18px; } .mc-svc { min-height: 400px; } } /* --- FAIXA ROLANTE DOS SERVICOS ------------------------------------------ */ .mc-rolante { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .mc-rolante-pista { display: flex; gap: 14px; width: max-content; padding: 6px 0; } .mc-chip-servico, .mc-chip-servico.mc-chip-servico { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 999px; background: #fff; border: 1px solid #dedad5; box-shadow: 0 10px 24px -16px rgba(40, 38, 36, .3); font-size: 15px; font-weight: 700; color: #3b3a38; white-space: nowrap; text-decoration: none; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .mc-chip-servico.mc-chip-servico:hover { border-color: #ff6600; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(40, 38, 36, .4); } .mc-chip-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff0e6; color: #b84a00; font-size: 14px; flex: none; } /* a faixa rolante fica sem respiro lateral: as pontas desmaiam pela mascara */ body .elementor .mc-rolante-sec > .e-con-inner { max-width: 100%; } /* --- CTA FINAL 4.0: faixa grafite com a foto e o selo ---------------------- */ .mc-cta-4 { position: relative; overflow: hidden; } .mc-cta-visual { position: relative; max-width: 520px; margin: 0 auto; padding: 14px 0 34px; } .mc-cta-foto { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .6); aspect-ratio: 16 / 10; background: #4a4744; transform: rotate(-1.2deg); transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .mc-cta-visual:hover .mc-cta-foto { transform: rotate(0); } .mc-cta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .mc-selo-c { left: 18px; bottom: 0; } .mc-selo-c .mc-selo-ico { background: #e9fbef; color: #128c4a; } /* o CTA verde do meio: um anel a pulsar em volta do botao de WhatsApp */ .mc-faixa-wpp .elementor-button { position: relative; } /* --- as animacoes continuas, so para quem nao pediu menos movimento ------- */ @media (prefers-reduced-motion: no-preference) { .mc-heroi-blob { animation: mc-deriva 14s ease-in-out infinite alternate; } .mc-selo-a, .mc-selo-c { animation: mc-flutua-y 6s ease-in-out infinite; } .mc-selo-b { animation: mc-flutua-y 7s ease-in-out 1.4s infinite; } .mc-ponto-online::after { animation: mc-anel 2s ease-out infinite; } .mc-rolante-pista { animation: mc-rola 42s linear infinite; } .mc-rolante:hover .mc-rolante-pista { animation-play-state: paused; } .mc-faixa-wpp .elementor-button::after { content: ''; position: absolute; inset: -7px; border-radius: 999px; border: 2px solid rgba(37, 211, 102, .55); animation: mc-anel-grande 2.4s ease-out infinite; pointer-events: none; } } @keyframes mc-deriva { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(-6%, 5%) rotate(9deg) scale(1.06); } } @keyframes mc-flutua-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes mc-anel { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes mc-anel-grande { 0% { transform: scale(.94); opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } } @keyframes mc-rola { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mc-cartao, .mc-svc, .mc-perfil, .elementor-button, .mc-svc img, .mc-heroi-foto img, .mc-cta-foto { transition: none !important; } html.mc-heroi-anima .mc-heroi-4 .mc-entra { opacity: 1; transform: none; animation: none; } .mc-cta-foto { transform: none; } } /* ========================================================================== * 4.1 — 06/09/2026: faixas claras, botoes alinhados, menos branco. * * *"o laranja com cinza ficou muito escuro, tem algo mais claro?"* — as tres * faixas escuras (CTA verde, CTA final e o lado "O que e seu" do passo a * passo) passam a claras, em laranja claro sobre a superficie, com o texto * escuro. So o rodape e a barra de utilidades continuam escuros. * *"alinhar os botoes dos cards"* — o corpo do cartao de servico tinha * `max-height: 58%` com o conteudo a vazar por baixo: o cartao com titulo em * duas linhas empurrava o botao 19px para baixo. Fora o teto. * ====================================================================== */ /* --- cartoes de servico: botoes na mesma linha ---------------------------- */ .mc-svc-corpo { max-height: none; flex: none; } /* o titulo reserva sempre duas linhas: assim o rotulo, o titulo, o texto e o botao ficam na mesma altura nos quatro cartoes, tenha o titulo uma ou duas linhas */ .mc-svc.mc-svc h3 { min-height: 2.44em; display: flex; align-items: flex-end; } .mc-svc p { min-height: 4.5em; } @media (max-width: 600px) { .mc-svc.mc-svc h3 { min-height: 0; } .mc-svc p { min-height: 0; } } /* --- passo a passo: os dois lados claros --------------------------------- */ .mc-processo-seu.mc-processo-seu { background: #eae7e2; } .mc-processo-seu.mc-processo-seu h3 { color: #66625e; } .mc-processo-seu.mc-processo-seu .mc-passo-n { color: #3b3a38; } .mc-processo-seu.mc-processo-seu p { color: #45423f; } .mc-processo-nosso.mc-processo-nosso { background: #ffe3d1; } .mc-processo-nosso.mc-processo-nosso h3 { color: #8f3a00; } .mc-processo-nosso.mc-processo-nosso .mc-passo-n { color: #8f3a00; } .mc-processo-nosso.mc-processo-nosso p { color: #3b3a38; } .mc-processo-nosso li + li::before { background: rgba(154, 52, 18, .22); } .mc-processo-nosso::after { background-image: url(../../../uploads/martcon/grafismo-teclas-laranja.png); opacity: .18; } .mc-processo { box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .22); } /* --- CTA verde, versao clara --------------------------------------------- */ .mc-faixa-clara .elementor-button::after { border-color: rgba(18, 140, 74, .45); } /* --- CTA final, versao clara --------------------------------------------- */ .mc-cta-clara .mc-cta-foto { box-shadow: 0 30px 60px -26px rgba(40, 38, 36, .45); } .mc-cta-clara .mc-selo-c { box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .3); } /* --- "o que esta incluso": a lista num cartao, em duas colunas ------------- */ .mc-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; width: 100%; } .mc-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: #45423f; } .mc-checks svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #fff0e6; color: #b84a00; font-size: 14px; margin-top: 1px; } .mc-cartao-inclui.mc-cartao-inclui:hover { transform: none; } @media (max-width: 767px) { .mc-checks { grid-template-columns: 1fr; gap: 12px; } } /* --- jornada sem rotulo: o cartao nao deixa um vao onde ele nao existe ---- */ .mc-jornada-cartao h3:first-child { margin-top: 0; } /* --- o desmaio laranja do pe do heroi so onde ha a fila de cartoes ------- */ /* Em /sobre/ e /contato/ nao ha fila a sobrepor o heroi: o desmaio acabava numa costura reta cor de pessego. `:has()` decide pela seccao seguinte. */ .mc-heroi.mc-heroi-lp:not(:has(+ .mc-flutua))::after { content: none; } /* --- revelar com direcao: o que ainda nao entrou nao pode alargar a pagina - */ /* Medido a 390px: os cartoes da jornada e a faixa de processo, deslocados 34px para a direita enquanto esperam para entrar, davam scrollWidth 389 em 375 — uma barra de rolagem lateral no celular. `overflow-x: clip` corta sem virar contexto de rolagem (o `sticky` do FAQ continua a funcionar), e o curso encolhe no celular. */ html.mc-anima body { overflow-x: clip; } @media (max-width: 767px) { html.mc-anima .mc-revela[data-mc-dir="esq"] { transform: translateX(-16px); } html.mc-anima .mc-revela[data-mc-dir="dir"] { transform: translateX(16px); } } /* ========================================================================== * 4.2 — 06/09/2026: a pagina interna no modelo da referencia (Tactus), fundos * neutros e o laranja de verdade so onde e acao. * * *"as paginas internas sao muito ruins; os cinzas e os laranjas nao ficaram * bons; analisa as referencias da forma que o cliente passou; tem fotos * tortas"*. A referencia interna e uma pagina de CONTEUDO com barra lateral * fixa, cartoes cinza-claro neutro e um bloco laranja de formulario no fim. * ====================================================================== */ /* --- neutros frios e limpos (a referencia): superficie e borda ----------- */ :root { --mc-superficie: #f3f4f6; --mc-borda: #e3e5e8; } /* os brilhos cor de pessego sairam: faixa de WhatsApp plana, cinza-claro */ .mc-faixa-clara { background-image: none !important; background-color: #f3f4f6 !important; } /* --- a foto do CTA final deixa de estar torta ----------------------------- */ .mc-cta-foto, .mc-cta-visual:hover .mc-cta-foto { transform: none; } /* CTA final: faixa LARANJA de verdade (a do rodape da Tactus), texto branco */ .mc-cta-4.mc-cta-clara .elementor-heading-title, .mc-cta-4.mc-cta-clara .elementor-widget-text-editor, .mc-cta-4.mc-cta-clara .elementor-widget-text-editor p { color: #fff !important; } /* --- passo a passo: lado neutro ------------------------------------------- */ .mc-processo-seu.mc-processo-seu { background: #e9ebee; } /* ========================================================================== * A PAGINA INTERNA * ====================================================================== */ .mc-lp-topo-col { max-width: 860px; } .mc-lp-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: #66625e; } .mc-lp-meta svg { color: #b84a00; font-size: 14px; } /* a coluna principal e a barra lateral */ body .elementor .mc-lp-corpo { padding-top: 8px; padding-bottom: 72px; } .mc-lp-lado { position: sticky; top: 100px; align-self: flex-start; } /* --- moldura da marca para a fotografia ---------------------------------- */ .mc-quadro { position: relative; margin: 0; padding: 8px; border-radius: 22px; background: linear-gradient(135deg, #ff6600, #b84a00); box-shadow: 0 22px 46px -18px rgba(40, 38, 36, .3); } .mc-quadro > img:first-child { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px; } .mc-quadro-menor { padding: 6px; border-radius: 18px; margin: 22px 0 26px; } .mc-quadro-menor > img:first-child { border-radius: 13px; aspect-ratio: 16 / 8; } .mc-quadro-marca { position: absolute; right: 26px; bottom: 24px; width: 132px; height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); } /* --- tipografia do conteudo ---------------------------------------------- */ .mc-lp-main .mc-lp-h2, .mc-lp-main .mc-lp-h2.mc-lp-h2 { margin: 18px 0 14px; font-size: 30px; line-height: 1.2; letter-spacing: -.5px; color: #3b3a38; scroll-margin-top: 110px; } .mc-lp-p { margin: 0 0 16px; font-size: 17.5px; line-height: 1.65; color: #45423f; } /* botao verde entre blocos, como o "FALAR COM ESPECIALISTA" da referencia */ .mc-lp-cta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 6px 0; } .mc-lp-cta-linha span { font-size: 14.5px; color: #66625e; } .mc-lp-verde, .mc-lp-verde.mc-lp-verde { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 12px; background: #1fae52; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(31, 174, 82, .7); transition: transform .22s ease, background-color .22s ease; } .mc-lp-verde.mc-lp-verde:hover { background: #178f43; color: #fff; transform: translateY(-2px); } .mc-lp-verde svg { font-size: 20px; } /* grade de cartoes cinza (as "dores") */ .mc-lp-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 10px; } .mc-lp-cartao { background: #f3f4f6; border-radius: 18px; padding: 22px 22px 20px; } .mc-lp-cartao h3, .mc-lp-main .mc-lp-cartao h3 { margin: 12px 0 6px; font-size: 18px; line-height: 1.3; color: #3b3a38; } .mc-lp-cartao p { margin: 0; font-size: 15px; line-height: 1.55; color: #45423f; } .mc-lp-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #b84a00; font-size: 18px; } /* caixa cinza com a lista de tiques */ .mc-lp-caixa { background: #f3f4f6; border-radius: 20px; padding: 26px 26px 22px; margin: 6px 0 10px; } .mc-lp-caixa h3, .mc-lp-main .mc-lp-caixa h3 { margin: 0 0 16px; font-size: 20px; color: #3b3a38; } .mc-lp-caixa .mc-checks svg { background: #fff; } /* passos verticais, numerados */ .mc-passos-v { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 18px; } .mc-passos-v li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; } .mc-passos-v li + li::before { content: ''; position: absolute; left: 23px; top: -18px; height: 18px; width: 2px; background: #e3e5e8; } .mc-passos-n { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #b84a00; color: #fff; font-weight: 800; font-size: 19px; box-shadow: 0 0 0 6px #fff0e6; } .mc-passos-v h3, .mc-lp-main .mc-passos-v h3 { margin: 10px 0 4px; font-size: 19px; color: #3b3a38; } .mc-passos-v p { margin: 0; font-size: 16px; line-height: 1.55; color: #45423f; } /* a faixa de processo dentro da coluna: empilhada */ .mc-processo-coluna { flex-direction: column; margin: 6px 0 10px; } .mc-processo-coluna .mc-processo-nosso ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* depoimento em citacao */ .mc-lp-depo { margin: 8px 0; padding: 24px 26px; border-left: 4px solid #ff6600; background: #fff8f4; border-radius: 0 18px 18px 0; } .mc-lp-depo p { margin: 8px 0 12px; font-size: 18px; line-height: 1.55; color: #3b3a38; } .mc-lp-depo footer b { display: block; font-size: 15px; color: #3b3a38; } .mc-lp-depo footer span { font-size: 13.5px; color: #66625e; } /* cartao "quem assina" */ .mc-lp-autor { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid #e3e5e8; border-radius: 20px; background: #fff; } .mc-lp-autor img { flex: none; width: 64px; height: auto; margin-top: 4px; } .mc-lp-autor b { display: block; font-size: 17px; color: #3b3a38; margin-bottom: 6px; } .mc-lp-autor p { margin: 0; font-size: 15px; line-height: 1.55; color: #45423f; } .mc-lp-autor a { color: #b84a00; font-weight: 700; } /* o bloco laranja do formulario, no fim do conteudo */ .mc-lp-form.mc-lp-form { background: linear-gradient(135deg, #c24e00, #b84a00); position: relative; overflow: hidden; } .mc-lp-form.mc-lp-form::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: url(../../../uploads/martcon/grafismo-teclas-branco.png) no-repeat center; background-size: contain; opacity: .14; pointer-events: none; } .mc-lp-form.mc-lp-form:hover { transform: none; } .mc-lp-form > .e-con-inner, .mc-lp-form > .elementor-element { position: relative; z-index: 1; } .mc-lp-h2-form.mc-lp-h2-form { color: #fff; margin: 0; font-size: 26px; } .mc-lp-form-sub { margin: 0; color: rgba(255, 255, 255, .92); font-size: 16px; } .mc-lp-form-cartao.mc-lp-form-cartao { background: #fff; } .mc-lp-form-cartao.mc-lp-form-cartao:hover { transform: none; box-shadow: none; } /* --- barra lateral ---------------------------------------------------------- */ .mc-lp-sumario, .mc-lp-lado-lista, .mc-lp-lado-cta { background: #f3f4f6; border-radius: 18px; padding: 22px 22px 20px; } .mc-lp-sumario b, .mc-lp-lado-lista b, .mc-lp-lado-cta b { display: block; font-size: 17px; color: #b84a00; margin-bottom: 12px; } .mc-lp-sumario ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.35; color: #b84a00; font-weight: 700; } .mc-lp-sumario ol a, .mc-lp-lado-lista ul a { color: #3b3a38; text-decoration: none; font-weight: 500; } .mc-lp-sumario ol a:hover, .mc-lp-lado-lista ul a:hover { color: #b84a00; } .mc-lp-sumario ol a.mc-ativo { color: #b84a00; font-weight: 700; } .mc-lp-lado-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; } .mc-lp-lado-lista ul a::before { content: '›'; color: #b84a00; margin-right: 8px; font-weight: 800; } .mc-lp-lado-cta { background: #fff0e6; } .mc-lp-lado-cta b { color: #3b3a38; } .mc-lp-lado-cta p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #45423f; } .mc-lp-lado-cta .mc-lp-verde { width: 100%; justify-content: center; font-size: 14px; padding: 13px 18px; } .mc-lp-lado-cta small { display: block; margin-top: 12px; font-size: 12.5px; color: #66625e; } @media (max-width: 1024px) { .mc-lp-lado { position: static; } .mc-lp-grade { grid-template-columns: 1fr; } .mc-lp-main .mc-lp-h2, .mc-lp-main .mc-lp-h2.mc-lp-h2 { font-size: 26px; } } @media (max-width: 767px) { .mc-quadro { padding: 5px; border-radius: 16px; } .mc-quadro > img:first-child { border-radius: 12px; aspect-ratio: 4 / 3; } .mc-quadro-marca { width: 96px; right: 14px; bottom: 12px; } .mc-lp-p { font-size: 16.5px; } .mc-lp-verde, .mc-lp-verde.mc-lp-verde { width: 100%; justify-content: center; } .mc-processo-coluna .mc-processo-nosso ol { grid-template-columns: 1fr; } } /* --- a barra lateral GRUDA: o container do Elementor poe `position` numa variavel (`--position`) e a regra de (0,1,0) empatava. Medido no ar: `position: relative`. Classe repetida + a propria variavel. */ body .elementor .mc-lp-lado, .mc-lp-lado.mc-lp-lado { --position: sticky; --align-self: flex-start; position: sticky; top: 100px; align-self: flex-start; } @media (max-width: 1024px) { body .elementor .mc-lp-lado, .mc-lp-lado.mc-lp-lado { --position: relative; position: relative; top: auto; } } /* ===================================================================== * 4.3 (06/09/2026) — as pecas da Tactus e o laranja #FF6600 * Medido em tactus.com.br: botao com raio 15px, cartao branco com sombra * 0 0 10px rgba(0,0,0,.1) e raio 10, faixa de declaracao com cantos * redondos, cartoes de segmento com icone, numeros grandes em cor, cartao * "Atendimento" com aba, FAQ com botao duplo, "Ultimas postagens" e * rodape laranja. Classe repetida onde o kit do Elementor empata. * ===================================================================== */ /* botao: retangulo de cantos redondos, nao pilula */ body .elementor .elementor-button, body .elementor .elementor-button.elementor-button, .mc-svc.mc-svc .mc-svc-botao, .mc-botao.mc-botao { border-radius: 14px; } /* a seta dupla por baixo da fila de cartoes */ .mc-seta-baixo.mc-seta-baixo { display: flex; justify-content: center; align-items: center; width: 100%; padding: 26px 0 0; font-size: 34px; line-height: 1; color: var(--mc-laranja); text-decoration: none; animation: mc-seta-baixo 1.6s ease-in-out infinite; } .mc-seta-baixo.mc-seta-baixo:hover, .mc-seta-baixo.mc-seta-baixo:focus-visible { color: var(--mc-laranja-escuro); } @keyframes mc-seta-baixo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .mc-seta-baixo.mc-seta-baixo { animation: none; } } /* --- faixa de declaracao --------------------------------------------- */ .mc-declara { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; width: 100%; border-radius: 28px; overflow: hidden; background: linear-gradient(100deg, #b84a00 0%, #8f3a00 100%); box-shadow: var(--mc-sombra-alta); } .mc-declara-arte { position: relative; min-height: 240px; background: radial-gradient(circle at 40% 45%, #ff6600 0%, #c24e00 55%, #8f3a00 100%); } .mc-declara-simbolo { position: absolute; inset: 0; background: url(../../../uploads/martcon/grafismo-teclas-branco.png) center center / 190px auto no-repeat; opacity: .92; filter: drop-shadow(0 18px 30px rgba(60, 20, 0, .45)); } .mc-declara-txt { display: flex; align-items: center; padding: 44px 56px; } .mc-declara-txt p { margin: 0; color: #fff; font-size: 27px; line-height: 1.35; font-weight: 600; letter-spacing: -.2px; } .mc-declara-txt p b { color: #ffd6bf; font-weight: 800; } @media (max-width: 900px) { .mc-declara { grid-template-columns: 1fr; } .mc-declara-arte { min-height: 170px; } .mc-declara-simbolo { background-size: 140px auto; } .mc-declara-txt { padding: 30px 26px 34px; } .mc-declara-txt p { font-size: 21px; } } /* --- rotulo do compromisso ------------------------------------------- */ .mc-compromisso .mc-rotulo-secao { margin-bottom: 4px; } /* --- cartao de perfil com icone -------------------------------------- */ .mc-perfil.mc-perfil-ico { padding-top: 26px; text-align: center; padding-right: 24px; } .mc-perfil .mc-perfil-icone { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 16px; background: #fff0e6; color: var(--mc-laranja-escuro); font-size: 26px; } .mc-perfil-icone svg { width: 1em; height: 1em; fill: currentColor; } .mc-perfil.mc-perfil-ico b { text-transform: uppercase; letter-spacing: .4px; font-size: 15.5px; } .mc-perfil.mc-perfil-ico em { position: static; display: block; transform: none; margin-top: 10px; } .mc-perfil.mc-perfil-ico:hover .mc-perfil-icone { background: var(--mc-laranja); color: #fff; } /* --- "a Martcon e para voce que" ------------------------------------- */ .mc-pvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; } .mc-pv { background: #fff; border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); padding: 24px 18px 22px; text-align: center; } .mc-pv-ico { display: inline-flex; font-size: 34px; line-height: 1; color: var(--mc-laranja-escuro); margin-bottom: 12px; } .mc-pv-ico svg { width: 1em; height: 1em; fill: currentColor; } .mc-pv h3.mc-pv h3, .mc-pv h3 { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--mc-texto); } @media (max-width: 1024px) { .mc-pvs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .mc-pvs { grid-template-columns: 1fr 1fr; } .mc-pv:last-child { grid-column: 1 / -1; } } /* --- provas grandes + cartao "Atendimento" --------------------------- */ .mc-provas { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; text-align: center; } .mc-prova b { display: block; font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -1.2px; } .mc-prova span { display: block; margin-top: 8px; font-size: 17.5px; font-weight: 700; color: var(--mc-grafite); } .mc-prova-laranja b { color: var(--mc-laranja-escuro); } .mc-prova-grafite b { color: var(--mc-grafite); } .mc-prova-escuro b { color: var(--mc-laranja-queimado); } body .elementor .mc-atende.mc-atende, .mc-atende.mc-atende { --position: relative; position: relative; overflow: visible; padding-top: 58px; border: 1px solid var(--mc-borda); } .mc-atende-aba { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 10px 40px; border-radius: 14px; background: var(--mc-laranja-escuro); color: #fff; font-size: 28px; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(143, 58, 0, .6); } @media (max-width: 767px) { .mc-prova b { font-size: 40px; } .mc-atende-aba { font-size: 21px; padding: 8px 26px; top: -22px; } body .elementor .mc-atende-sec .e-con-inner > .e-con { gap: 56px; } } /* --- depoimentos em carrossel ---------------------------------------- */ .mc-depos { position: relative; width: 100%; } .mc-depos-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 14px; } .mc-depos-pista::-webkit-scrollbar { display: none; } .mc-depo { position: relative; margin: 0; padding: 28px 28px 26px; background: #fff; border-radius: 14px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; } .mc-depo .mc-estrelas { font-size: 17px; letter-spacing: 4px; } .mc-depo blockquote { margin: 0; padding: 0; border: 0; } .mc-depo blockquote b { display: block; font-size: 17.5px; color: var(--mc-grafite); margin-bottom: 6px; } .mc-depo blockquote p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--mc-texto-claro); } .mc-depo figcaption { margin-top: auto; padding-right: 60px; } .mc-depo figcaption b { display: block; color: var(--mc-grafite); font-size: 15.5px; } .mc-depo figcaption em { display: block; font-style: normal; color: var(--mc-texto-claro); font-size: 13.5px; } .mc-depo-aspas { position: absolute; right: 22px; bottom: 6px; font-size: 92px; line-height: 1; font-weight: 800; color: #ffd6bf; pointer-events: none; } .mc-depo-seta { position: absolute; top: 42%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--mc-grafite); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: var(--mc-sombra-cartao); display: none; align-items: center; justify-content: center; padding: 0 0 4px; } .mc-depos.mc-tem-mais .mc-depo-seta { display: flex; } .mc-depo-ant { left: -14px; } .mc-depo-prox { right: -14px; } .mc-depo-seta:hover, .mc-depo-seta:focus-visible { background: var(--mc-laranja-escuro); color: #fff; } .mc-depo-pontos { display: flex; justify-content: center; gap: 8px; margin-top: 8px; } .mc-depo-pontos:empty { display: none; } .mc-depo-ponto { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: #d7d2cc; cursor: pointer; } .mc-depo-ponto[aria-selected="true"] { background: var(--mc-laranja-escuro); } @media (max-width: 1024px) { .mc-depos-pista { grid-auto-columns: calc((100% - 24px) / 2); } } @media (max-width: 640px) { .mc-depos-pista { grid-auto-columns: 100%; } .mc-depo-ant { left: -6px; } .mc-depo-prox { right: -6px; } } /* --- FAQ: botao duplo e perguntas em pilula -------------------------- */ .mc-duplo { display: inline-flex; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(40, 38, 36, .5); max-width: 100%; } .mc-duplo a, .mc-duplo a.mc-duplo-a, .mc-duplo a.mc-duplo-b { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; color: #fff; white-space: nowrap; } .mc-duplo a.mc-duplo-a { background: #1a9c48; } .mc-duplo a.mc-duplo-b { background: var(--mc-laranja-escuro); } .mc-duplo a.mc-duplo-a:hover, .mc-duplo a.mc-duplo-a:focus-visible { background: #157f3b; color: #fff; } .mc-duplo a.mc-duplo-b:hover, .mc-duplo a.mc-duplo-b:focus-visible { background: var(--mc-laranja-queimado); color: #fff; } .mc-duplo svg { width: 1.1em; height: 1.1em; fill: currentColor; } @media (max-width: 480px) { .mc-duplo { display: flex; flex-direction: column; } .mc-duplo a, .mc-duplo a.mc-duplo-a, .mc-duplo a.mc-duplo-b { justify-content: center; white-space: normal; } } .mc-faq-nu .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item { border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-color: transparent; } .mc-faq-nu .elementor-widget.elementor-widget-n-accordion .e-n-accordion-item-title-text { color: var(--mc-laranja-escuro); font-weight: 700; } /* --- ultimas postagens ------------------------------------------------ */ .mc-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; } .mc-post { position: relative; display: block; min-height: 300px; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--mc-grafite); box-shadow: var(--mc-sombra-cartao); } .mc-post-foto { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; } .mc-post:hover .mc-post-foto { transform: scale(1.05); } .mc-post::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 6, .05) 0%, rgba(20, 12, 6, .55) 45%, rgba(20, 12, 6, .92) 100%); } .mc-post-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 22px 22px; color: #fff; } .mc-post-txt small { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 8px; background: var(--mc-laranja); color: #1a1a1a; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .mc-post-txt b { display: block; font-size: 17px; line-height: 1.35; font-weight: 700; color: #fff; } .mc-post-txt p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .84); } .mc-post-destaque { grid-row: span 2; min-height: 620px; } .mc-post-destaque .mc-post-txt b { font-size: 21px; } .mc-posts .mc-post:nth-child(2), .mc-posts .mc-post:nth-child(3) { grid-column: 2 / -1; } @media (max-width: 900px) { .mc-posts { grid-template-columns: 1fr; } .mc-post, .mc-post-destaque { min-height: 260px; grid-row: auto; grid-column: auto; } .mc-posts .mc-post:nth-child(2), .mc-posts .mc-post:nth-child(3) { grid-column: auto; } .mc-post-destaque .mc-post-txt p { display: none; } } /* --- rodape laranja ---------------------------------------------------- */ .mc-rodape-base .mc-rodape-legal, .mc-rodape-base .mc-rodape-legal p { color: rgba(255, 255, 255, .9); } .mc-rodape-base .mc-rodape-links a, .mc-rodape-base .mc-rodape-legal a { color: #fff; } .mc-rodape-base .mc-rodape-legal a:hover, .mc-rodape-base .mc-rodape-legal a:focus-visible { color: #ffd6bf; } .mc-rodape-base .mc-rodape-credito { color: rgba(255, 255, 255, .9); } .mc-rodape-base .mc-assinatura, .mc-rodape-base .mc-assinatura span { color: rgba(255, 255, 255, .92); } .mc-rodape.mc-rodape::after { background-image: linear-gradient(90deg, #ffd6bf 0%, rgba(255, 214, 191, .4) 30%, rgba(255, 214, 191, 0) 64%); } body .elementor .mc-rodape a:hover, body .elementor .mc-rodape a:focus-visible { color: #ffd6bf; } /* rodape laranja: os links das colunas em branco quase cheio (eram .7 no grafite) */ body .elementor .mc-rodape .elementor-icon-list-item a, body .elementor .mc-rodape .elementor-icon-list-text, body .elementor .mc-rodape .elementor-icon-list-icon i, body .elementor .mc-rodape .elementor-icon-list-icon svg { color: rgba(255, 255, 255, .94); fill: rgba(255, 255, 255, .94); } /* a aba "Atendimento" ancora no CARTAO, nao no widget html: o .elementor-widget do Elementor e position:relative e roubava a ancora. */ body .elementor .mc-atende .elementor-widget-html.elementor-widget-html { position: static; } /* --- 4.3.1: FAQ — a coluna da esquerda GRUDA (como a barra lateral da LP). O container do Elementor escreve `position` numa variavel (`--position`); classe repetida + a propria variavel, e `align-self: flex-start` para a coluna ficar curta e correr dentro da fila (a lista e sempre mais alta). */ @media (min-width: 1025px) { body .elementor .mc-faq-lado, .mc-faq-lado.mc-faq-lado { --position: sticky; --align-self: flex-start; position: sticky; top: 104px; align-self: flex-start; } } /* --- 4.3.1: as setas do carrossel de depoimentos sao