.elementor-5359 .elementor-element.elementor-element-242cb6e4{--display:flex;--min-height:156px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-23px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:51px;--padding-left:0px;--padding-right:0px;}.elementor-5359 .elementor-element.elementor-element-242cb6e4:not(.elementor-motion-effects-element-type-background), .elementor-5359 .elementor-element.elementor-element-242cb6e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#5F4B40;}.elementor-5359 .elementor-element.elementor-element-42941d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5359 .elementor-element.elementor-element-42941d6:not(.elementor-motion-effects-element-type-background), .elementor-5359 .elementor-element.elementor-element-42941d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF8EB;}@media(min-width:768px){.elementor-5359 .elementor-element.elementor-element-42941d6{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-ec1107f *//* ============================================================ ============================================================ DÚVIDAS FREQUENTES — MARÚ ============================================================ ✓ DESKTOP CORRIGIDO ✓ TABLET ✓ MOBILE ✓ ACCORDION ✓ RESPONSIVO ✓ SEM HOVER AZUL/ROXO DO ELEMENTOR PALETA: FUNDO .............. #faf8eb VERDE .............. #525e3a MARROM ............. #5f4b40 ============================================================ */ /* ============================================================ SEÇÃO ============================================================ */ .maru-faq { position: relative !important; width: 100% !important; margin: 0 !important; padding: 100px 0 110px !important; background: #faf8eb !important; overflow: hidden !important; box-sizing: border-box !important; } /* ============================================================ CONTAINER PRINCIPAL >>> LARGURA GERAL DA SEÇÃO NO DESKTOP <<< Atual: 84% Se quiser mais aberto: 88% Se quiser mais fechado: 78% ============================================================ */ .maru-faq-container { position: relative !important; width: 84% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* ============================================================ ============================================================ CABEÇALHO ============================================================ ============================================================ */ .maru-faq-cabecalho { width: 100% !important; max-width: none !important; margin: 0 0 72px !important; padding: 0 !important; } /* ============================================================ LABEL — DÚVIDAS FREQUENTES ============================================================ */ .maru-faq-label { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 0 20px !important; } .maru-faq-label-texto { font-family: "Sora", sans-serif !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: #5f4b40 !important; white-space: nowrap !important; } /* ============================================================ RISQUINHOS DO LABEL >>> TAMANHO DOS RISQUINHOS <<< Atual: 32px ============================================================ */ .maru-faq-label-linha { display: block !important; width: 32px !important; height: 1px !important; flex: 0 0 32px !important; background: rgba(82,94,58,.38) !important; } /* ============================================================ ============================================================ HEADLINE ============================================================ CORREÇÃO DESKTOP: A headline agora possui mais largura e um tamanho mais equilibrado. Isso evita deixar "MARÚ." sozinho em uma terceira linha. ============================================================ */ .maru-faq-titulo { width: 100% !important; max-width: 1000px !important; margin: 0 !important; padding: 0 !important; font-family: "MEKONA", serif !important; /* ===================================================== >>> TAMANHO DO TÍTULO NO DESKTOP <<< Atual: 56px Maior: 58px / 60px Menor: 52px / 54px ====================================================== */ font-size: 56px !important; font-weight: 400 !important; /* ===================================================== >>> ESPAÇO ENTRE AS LINHAS <<< ====================================================== */ line-height: 1.01 !important; /* ===================================================== >>> ESPAÇAMENTO ENTRE LETRAS <<< ====================================================== */ letter-spacing: -0.02em !important; color: #525e3a !important; /* ===================================================== IMPORTANTE: NÃO FORÇA QUEBRA. O navegador decide a quebra conforme a largura. ====================================================== */ white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ============================================================ ============================================================ SUBTEXTO ============================================================ DESKTOP: MANTÉM O TEXTO EM UMA LINHA. ============================================================ */ .maru-faq-intro { width: auto !important; max-width: none !important; /* ===================================================== >>> DISTÂNCIA ENTRE TÍTULO E SUBTEXTO <<< Atual: 25px ====================================================== */ margin: 25px 0 0 !important; padding: 0 !important; font-family: "Sora", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.75 !important; color: #5f4b40 !important; white-space: nowrap !important; } /* ============================================================ ============================================================ LISTA FAQ ============================================================ ============================================================ */ .maru-faq-lista { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(95,75,64,.24) !important; } /* ============================================================ ITEM ============================================================ */ .maru-faq-item { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(95,75,64,.24) !important; box-sizing: border-box !important; } /* ============================================================ ============================================================ PERGUNTA ============================================================ ============================================================ */ .maru-faq-pergunta { position: relative !important; width: 100% !important; /* ===================================================== >>> ALTURA / ESPAÇAMENTO DAS PERGUNTAS <<< Atual: 30px ====================================================== */ padding: 30px 0 !important; margin: 0 !important; display: grid !important; /* ===================================================== COLUNAS: NÚMERO | PERGUNTA | ÍCONE ====================================================== */ grid-template-columns: 52px minmax(0, 1fr) 30px !important; align-items: center !important; gap: 20px !important; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; cursor: pointer !important; text-align: left !important; box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; } /* ============================================================ REMOVE HOVER / ACTIVE DO ELEMENTOR ============================================================ */ .maru-faq-pergunta:hover, .maru-faq-pergunta:focus, .maru-faq-pergunta:active, .maru-faq-pergunta:focus-visible { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: none !important; box-shadow: none !important; } /* ============================================================ NÚMERO ============================================================ */ .maru-faq-numero { font-family: "Sora", sans-serif !important; font-size: 8px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: .08em !important; color: rgba(95,75,64,.55) !important; } /* ============================================================ TEXTO DA PERGUNTA ============================================================ */ .maru-faq-pergunta-texto { font-family: "Sora", sans-serif !important; /* >>> TAMANHO DA PERGUNTA <<< */ font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: #5f4b40 !important; transition: color .25s ease !important; } /* ============================================================ HOVER DA PERGUNTA ============================================================ */ .maru-faq-pergunta:hover .maru-faq-pergunta-texto { color: #525e3a !important; } /* ============================================================ ============================================================ ÍCONE + / - ============================================================ ============================================================ */ .maru-faq-icone { position: relative !important; display: block !important; width: 16px !important; height: 16px !important; justify-self: end !important; } /* ============================================================ LINHA HORIZONTAL ============================================================ */ .maru-faq-icone::before { content: "" !important; position: absolute !important; top: 50% !important; left: 0 !important; width: 16px !important; height: 1px !important; transform: translateY(-50%) !important; background: #525e3a !important; transition: transform .3s ease !important; } /* ============================================================ LINHA VERTICAL ============================================================ */ .maru-faq-icone::after { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 1px !important; height: 16px !important; transform: translateX(-50%) !important; background: #525e3a !important; transition: transform .3s ease, opacity .3s ease !important; } /* ============================================================ ITEM ABERTO + VIRA - ============================================================ */ .maru-faq-item.is-open .maru-faq-icone::after { transform: translateX(-50%) rotate(90deg) !important; opacity: 0 !important; } /* ============================================================ ============================================================ RESPOSTA ============================================================ ============================================================ */ .maru-faq-resposta { display: grid !important; grid-template-rows: 0fr !important; overflow: hidden !important; transition: grid-template-rows .45s ease !important; } /* ============================================================ RESPOSTA ABERTA ============================================================ */ .maru-faq-item.is-open .maru-faq-resposta { grid-template-rows: 1fr !important; } /* ============================================================ CONTEÚDO INTERNO ============================================================ */ .maru-faq-resposta-interno { min-height: 0 !important; overflow: hidden !important; /* ===================================================== 72px À ESQUERDA: ALINHA A RESPOSTA COM O TEXTO DA PERGUNTA. ====================================================== */ padding: 0 80px 0 72px !important; opacity: 0 !important; transform: translateY(-6px) !important; transition: opacity .35s ease, transform .35s ease, padding .35s ease !important; } /* ============================================================ CONTEÚDO QUANDO ABERTO ============================================================ */ .maru-faq-item.is-open .maru-faq-resposta-interno { padding-bottom: 31px !important; opacity: 1 !important; transform: translateY(0) !important; } /* ============================================================ TEXTO DA RESPOSTA ============================================================ */ .maru-faq-resposta p { width: 100% !important; max-width: 690px !important; margin: 0 !important; padding: 0 !important; font-family: "Sora", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.75 !important; color: #5f4b40 !important; } /* ============================================================ ============================================================ CTA / LINK ============================================================ ============================================================ */ .maru-faq-link, .maru-faq-link:link, .maru-faq-link:visited, .maru-faq-link:hover, .maru-faq-link:focus, .maru-faq-link:active { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; margin: 20px 0 0 !important; padding: 0 0 6px !important; font-family: "Sora", sans-serif !important; font-size: 8px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #525e3a !important; text-decoration: none !important; border-bottom: 1px solid rgba(82,94,58,.45) !important; background: transparent !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; transition: opacity .25s ease !important; } /* ============================================================ HOVER CTA ============================================================ */ .maru-faq-link:hover { opacity: .58 !important; } /* ============================================================ SETA CTA ============================================================ */ .maru-faq-link span { display: inline-block !important; font-size: 13px !important; line-height: 1 !important; transition: transform .25s ease !important; } .maru-faq-link:hover span { transform: translateX(4px) !important; } /* ============================================================ ============================================================ DESKTOP — 1025+ ============================================================ CORREÇÃO ESPECÍFICA DO DESKTOP. NÃO AFETA TABLET NEM CELULAR. ============================================================ */ @media (min-width: 1025px) { /* ===================================================== CONTAINER DEIXAMOS UM POUCO MAIS ABERTO PARA O TÍTULO RESPIRAR MELHOR. ====================================================== */ .maru-faq-container { width: 84% !important; max-width: 1280px !important; } /* ===================================================== HEADLINE PRINCIPAL CORREÇÃO DA IMAGEM QUE VOCÊ ENVIOU. Atual: 56px / 1000px Isso evita deixar somente "MARÚ." na terceira linha. ====================================================== */ .maru-faq-titulo { width: 100% !important; max-width: 1000px !important; font-size: 56px !important; line-height: 1.01 !important; letter-spacing: -0.02em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } } /* ============================================================ ============================================================ DESKTOP GRANDE — 1440+ ============================================================ IMPORTANTE: NÃO VOLTAMOS PARA 68PX / 900PX. ERA ISSO QUE ESTAVA CAUSANDO A QUEBRA RUIM. ============================================================ */ @media (min-width: 1440px) { /* ===================================================== ESPAÇAMENTO DA SEÇÃO ====================================================== */ .maru-faq { padding: 115px 0 125px !important; } /* ===================================================== CONTAINER >>> DESKTOP GRANDE <<< ====================================================== */ .maru-faq-container { width: 84% !important; max-width: 1320px !important; } /* ===================================================== CABEÇALHO ====================================================== */ .maru-faq-cabecalho { margin-bottom: 80px !important; } /* ===================================================== HEADLINE DESKTOP GRANDE MANTEMOS O TAMANHO CONTROLADO. NÃO USAMOS MAIS: font-size: 68px max-width: 900px ====================================================== */ .maru-faq-titulo { width: 100% !important; max-width: 1080px !important; font-size: 58px !important; line-height: 1.01 !important; letter-spacing: -0.02em !important; } /* ===================================================== SUBTEXTO ====================================================== */ .maru-faq-intro { width: auto !important; max-width: none !important; white-space: nowrap !important; } /* ===================================================== PERGUNTAS ====================================================== */ .maru-faq-pergunta { padding: 32px 0 !important; } .maru-faq-pergunta-texto { font-size: 13.5px !important; } } /* ============================================================ ============================================================ TABLET 768 — 1024 ============================================================ ============================================================ */ @media (max-width: 1024px) and (min-width: 768px) { /* ===================================================== SEÇÃO ====================================================== */ .maru-faq { padding: 80px 0 90px !important; } /* ===================================================== CONTAINER ====================================================== */ .maru-faq-container { width: 86% !important; max-width: none !important; } /* ===================================================== CABEÇALHO ====================================================== */ .maru-faq-cabecalho { max-width: none !important; margin-bottom: 60px !important; } /* ===================================================== HEADLINE TABLET ====================================================== */ .maru-faq-titulo { width: 100% !important; max-width: 760px !important; font-size: 52px !important; line-height: 1.01 !important; } /* ===================================================== SUBTEXTO TABLET ====================================================== */ .maru-faq-intro { width: auto !important; max-width: none !important; white-space: nowrap !important; font-size: 10px !important; } /* ===================================================== PERGUNTA ====================================================== */ .maru-faq-pergunta { grid-template-columns: 45px minmax(0,1fr) 28px !important; gap: 17px !important; padding: 27px 0 !important; } .maru-faq-pergunta-texto { font-size: 12px !important; } /* ===================================================== RESPOSTA ====================================================== */ .maru-faq-resposta-interno { padding-left: 62px !important; padding-right: 55px !important; } } /* ============================================================ ============================================================ MOBILE ATÉ 767 ============================================================ CORREÇÃO QUE JÁ FIZEMOS: ✓ SEM
FIXO ✓ MAIS LARGURA ✓ TÍTULO MENOR ✓ MENOS QUEBRAS ============================================================ */ @media (max-width: 767px) { /* ===================================================== SEÇÃO ====================================================== */ .maru-faq { padding: 65px 0 75px !important; } /* ===================================================== CONTAINER 92% = MAIS ESPAÇO HORIZONTAL Mais largo: 94% Mais margem: 88% ====================================================== */ .maru-faq-container { width: 92% !important; max-width: none !important; margin: 0 auto !important; } /* ===================================================== CABEÇALHO ====================================================== */ .maru-faq-cabecalho { width: 100% !important; max-width: none !important; margin-bottom: 48px !important; } /* ===================================================== LABEL ====================================================== */ .maru-faq-label { gap: 9px !important; margin-bottom: 16px !important; } .maru-faq-label-texto { font-size: 8px !important; } .maru-faq-label-linha { width: 23px !important; flex-basis: 23px !important; } /* ===================================================== HEADLINE MOBILE Atual = 32px Maior: 34px Menor: 30px ====================================================== */ .maru-faq-titulo { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: "MEKONA", serif !important; font-size: 32px !important; font-weight: 400 !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; color: #525e3a !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ===================================================== SUBTEXTO MOBILE ====================================================== */ .maru-faq-intro { width: 100% !important; max-width: none !important; margin: 20px 0 0 !important; padding: 0 !important; font-family: "Sora", sans-serif !important; font-size: 10.5px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #5f4b40 !important; white-space: normal !important; } /* ===================================================== PERGUNTAS ====================================================== */ .maru-faq-pergunta { grid-template-columns: 30px minmax(0,1fr) 22px !important; gap: 11px !important; padding: 23px 0 !important; } /* ===================================================== NÚMERO ====================================================== */ .maru-faq-numero { font-size: 7px !important; } /* ===================================================== TEXTO DA PERGUNTA ====================================================== */ .maru-faq-pergunta-texto { font-size: 10.5px !important; line-height: 1.5 !important; } /* ===================================================== ÍCONE ====================================================== */ .maru-faq-icone { width: 14px !important; height: 14px !important; } .maru-faq-icone::before { width: 14px !important; } .maru-faq-icone::after { height: 14px !important; } /* ===================================================== RESPOSTA ====================================================== */ .maru-faq-resposta-interno { padding: 0 32px 0 41px !important; } .maru-faq-item.is-open .maru-faq-resposta-interno { padding-bottom: 25px !important; } .maru-faq-resposta p { max-width: none !important; font-size: 10.5px !important; line-height: 1.7 !important; } /* ===================================================== CTA ====================================================== */ .maru-faq-link, .maru-faq-link:link, .maru-faq-link:visited, .maru-faq-link:hover, .maru-faq-link:focus, .maru-faq-link:active { margin-top: 17px !important; font-size: 7.5px !important; gap: 13px !important; } } /* ============================================================ ============================================================ CELULAR PEQUENO ATÉ 420PX ============================================================ ============================================================ */ @media (max-width: 420px) { .maru-faq { padding: 58px 0 68px !important; } /* ===================================================== CONTAINER ====================================================== */ .maru-faq-container { width: 92% !important; } /* ===================================================== CABEÇALHO ====================================================== */ .maru-faq-cabecalho { margin-bottom: 42px !important; } /* ===================================================== HEADLINE Atual = 30px IMPORTANTE: NÃO VOLTAR PARA 37PX. ====================================================== */ .maru-faq-titulo { width: 100% !important; max-width: none !important; font-size: 30px !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ===================================================== SUBTEXTO ====================================================== */ .maru-faq-intro { width: 100% !important; max-width: none !important; margin-top: 18px !important; white-space: normal !important; } /* ===================================================== PERGUNTAS ====================================================== */ .maru-faq-pergunta { grid-template-columns: 26px minmax(0,1fr) 20px !important; gap: 9px !important; padding: 21px 0 !important; } .maru-faq-pergunta-texto { font-size: 10px !important; } /* ===================================================== RESPOSTA ====================================================== */ .maru-faq-resposta-interno { padding-left: 35px !important; padding-right: 25px !important; } } /* ============================================================ ============================================================ CELULAR MUITO PEQUENO ATÉ 360PX ============================================================ ============================================================ */ @media (max-width: 360px) { /* ===================================================== TÍTULO REDUZ SOMENTE EM TELAS MUITO ESTREITAS. ====================================================== */ .maru-faq-titulo { font-size: 28px !important; line-height: 1.05 !important; } .maru-faq-container { width: 92% !important; } }/* End custom CSS */