.elementor-kit-5{--e-global-color-primary:#181C2B;--e-global-color-secondary:#3A4055;--e-global-color-text:#181C2B;--e-global-color-accent:#0E7FA8;--e-global-color-5039690:#32C6F4;--e-global-color-3a84cef:#E2E6EE;--e-global-color-70d30e2:#767D93;--e-global-color-dc30c47:#F5F8FB;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:600;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ===================================================================== Life'n Tech — CSS companheiro dos templates Cole INTEIRO em: Elementor → Configurações do site → CSS personalizado Sem isso o site fica com texto atravessando a tela e colunas desiguais. ===================================================================== */ /* ---------- 1. LARGURA DE LEITURA ---------- O Elementor estica texto na largura toda do container. Linha longa demais cansa e fica feia. Aqui limitamos como no HTML de referência. */ .elementor .lt-measure { max-width: 62ch; } .elementor .lt-h1 .elementor-heading-title { max-width: 17ch; } @media (max-width: 767px) { .elementor .lt-measure { max-width: 100%; } .elementor .lt-h1 .elementor-heading-title { max-width: 100%; } } /* ---------- 2. COLUNAS IGUAIS ---------- Containers do Elementor são flex e não expõem controle de flex-basis, então cards com textos de tamanhos diferentes ficam com larguras diferentes. Grid resolve: todas as colunas exatamente iguais. */ .e-con.lt-c2, .e-con.lt-c3, .e-con.lt-c4 { display: grid; align-items: start; } .e-con.lt-c2 { grid-template-columns: repeat(2, 1fr); } .e-con.lt-c3 { grid-template-columns: repeat(3, 1fr); } .e-con.lt-c4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .e-con.lt-c3, .e-con.lt-c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .e-con.lt-c2, .e-con.lt-c3, .e-con.lt-c4 { grid-template-columns: 1fr; } } /* ---------- 3. BARRA DE CREDIBILIDADE ---------- Divisórias entre os números, sem sobrar borda no primeiro. */ .e-con.lt-cred-item:first-child { border-left: 0 !important; padding-left: 0 !important; } @media (max-width: 1024px) { .e-con.lt-cred-item { border-left: 0 !important; border-top: 1px solid #EEF2F7 !important; padding: 18px 0 !important; } .e-con.lt-cred-item:first-child { border-top: 0 !important; padding-top: 0 !important; } } /* ---------- 4. TIPOGRAFIA ---------- Tracking do H1 encolhe junto com a fonte, senão as letras colam no mobile. text-wrap:balance distribui as linhas do título de forma mais equilibrada. */ .elementor h1, .elementor h2, .elementor h3 { text-wrap: balance; } @media (max-width: 767px) { .elementor .lt-h1 .elementor-heading-title { letter-spacing: -1.2px !important; } } /* ---------- 5. BLOCOS COM FILETE ---------- Garante respiro uniforme mesmo quando o texto tem alturas diferentes. */ .e-con.lt-item { align-content: start; } /* ---------- 6. AJUSTES GERAIS ---------- */ html { scroll-behavior: smooth; } .elementor img { max-width: 100%; height: auto; } @media (max-width: 767px) { body { overflow-x: hidden; } } a:focus-visible, button:focus-visible, .elementor-button:focus-visible { outline: 2px solid #0E7FA8; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- 7. GTRANSLATE ---------- */ body { top: 0 !important; } .skiptranslate iframe { display: none !important; } #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } .gtranslate_wrapper select, .switcher select { font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #181C2B; background: #fff; border: 1px solid #E2E6EE; border-radius: 7px; padding: 7px 10px; cursor: pointer; } .gtranslate_wrapper select:hover { border-color: #767D93; } .gtranslate_wrapper select:focus-visible { outline: 2px solid #0E7FA8; outline-offset: 2px; } /* ---------- 8. FORMULÁRIOS (Contact Form 7) ---------- */ .fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .fgrid .full { grid-column: 1 / -1; } .fgrid p { margin: 0; } .fgrid label { font-size: .82rem; font-weight: 600; color: #181C2B; display: block; } .fgrid input, .fgrid select, .fgrid textarea { font-size: .96rem; color: #181C2B; background: #fff; border: 1px solid #E2E6EE; border-radius: 6px; padding: 12px 14px; width: 100%; margin-top: 7px; } .fgrid textarea { min-height: 118px; } .fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus { border-color: #0E7FA8; outline: none; box-shadow: 0 0 0 3px rgba(50,198,244,.16); } .fgrid input[type=submit] { background: #181C2B; color: #fff; font-weight: 600; border: 0; padding: 14px 28px; width: auto; cursor: pointer; } .fgrid input[type=submit]:hover { background: #0E7FA8; } .wpcf7-response-output { border-left: 2px solid #32C6F4 !important; border-width: 0 0 0 2px !important; background: #F5F8FB; border-radius: 0 6px 6px 0; padding: 16px 20px !important; margin: 22px 0 0 !important; } @media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } } /* ---------- 9. CABECALHO ---------- Nao force o menu a encolher: min-width:0 faz os itens empilharem. O menu tem largura natural e vira hamburguer antes de faltar espaco. */ .lt-header { flex-wrap: nowrap !important; } .lt-header .lt-marca, .lt-header .lt-idiomas, .lt-header .lt-header-cta, .lt-header .lt-menu { flex: 0 0 auto; } /* o