/* =============================================== * CSS ESTRITAMENTE MOBILE-FIRST (CORRIGIDO) * Estilos base = Smartphone (até 767px) * @media (min-width: 768px) = Tablet * @media (min-width: 1024px) = Desktop * =============================================== */ :root { /* ... (Paleta de cores inalterada) ... */ --color-primary: #b98b4c; --color-secondary: #1a1a1a; --color-text: #333333; --color-text-light: #555555; --color-bg: #ffffff; --color-bg-alt: #f4f4f4; --color-white: #ffffff; --font-family: "Montserrat", sans-serif; --font-family-headings: "Merriweather", serif; } /* 1. Reset e Configurações Globais */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* Garante que nada vaze */ } body { font-family: var(--font-family); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x: hidden; (Movido para ) */ } /* ESTILOS BASE (MOBILE) */ h1, h2, h3, h4 { font-family: var(--font-family-headings); color: var(--color-secondary); line-height: 1.2; margin-bottom: 1rem; text-align: center; overflow-wrap: break-word; word-break: break-word; /* <--- MUDANÇA ANTERIOR */ -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } h1 { font-size: 1.9rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.15rem; } p { margin-bottom: 1rem; text-align: center; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color 0.3s ease; } a:hover { filter: brightness(0.9); } /* 2. Componentes Reutilizáveis (Mobile) */ .container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 0; } .btn { display: block; width: fit-content; max-width: 350px; margin: 1.5rem auto 0; background-color: var(--color-primary); color: var(--color-white); padding: 0.8rem 1.5rem; border-radius: 5px; font-weight: 700; text-align: center; text-transform: uppercase; transition: background-color 0.3s ease, transform 0.3s ease; } .btn:hover { filter: brightness(0.9); transform: scale(1.03); } .section-bg { background-color: var(--color-bg-alt); } /* 3. Header e Navegação (Mobile) */ .header { background-color: var(--color-secondary); color: var(--color-white); padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; position: fixed; /* width: 100%; */ /* <--- REMOVIDO */ top: 0; left: 0; /* <--- ADICIONADO */ right: 0; /* <--- ADICIONADO */ z-index: 1000; height: 70px; } /* ... (Restante do .header, .nav, .menu-toggle inalterado) ... */ .header .logo { font-size: 1.25rem; font-weight: 700; color: var(--color-white); } .header .nav { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 70px; left: 0; width: 100%; height: calc(100vh - 70px); background-color: var(--color-secondary); transform: translateX(100%); transition: transform 0.3s ease-in-out; visibility: hidden; } .header .nav.active { transform: translateX(0); visibility: visible; } .header .nav a { color: var(--color-white); font-size: 1.5rem; font-weight: 500; padding: 1.5rem 0; width: 100%; text-align: center; } .header .nav .btn-nav-contact { background-color: var(--color-primary); color: var(--color-white); padding: 1.5rem 0; border-radius: 0; margin-top: 1rem; font-size: 1.5rem; display: block; width: 100%; } .header .nav .btn-nav-contact:hover { filter: brightness(0.9); } .menu-toggle { display: block; font-size: 1.8rem; cursor: pointer; background: none; border: none; color: var(--color-white); z-index: 1001; } /* 4. Seção Hero (Mobile) */ #hero { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-top: 100px; text-align: center; } #hero .hero-image { order: -1; width: 100%; /* <--- CORREÇÃO APLICADA */ } #hero .hero-content { order: 2; width: 100%; } #hero .subtitle { font-size: 1.25rem; color: var(--color-primary); font-weight: 700; margin-bottom: 1rem; } /* 5. Seção Qualificação (Mobile) */ /* ... (Inalterado, já corrigido) ... */ #qualificacao h2, #qualificacao p { text-align: center; margin-left: auto; margin-right: auto; } #qualificacao .grid-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } #qualificacao .card { background-color: var(--color-white); border: 1px solid #eee; border-left: 5px solid var(--color-primary); padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); text-align: left; } #qualificacao .card h3 { color: var(--color-secondary); margin-bottom: 0.5rem; text-align: left; } #qualificacao .cta-qualificada { text-align: center; margin-top: 2rem; font-size: 1.1rem; font-weight: 500; } #qualificacao .disclaimer { font-size: 0.9rem; color: var(--color-text-light); text-align: center; margin-top: 1.5rem; border: 1px dashed var(--color-text-light); padding: 1rem; border-radius: 5px; } #qualificacao .btn { margin: 1rem auto 0; } /* 6. Seção Motivos (Mobile) */ /* ... (Inalterado, já corrigido) ... */ #motivos h2 { text-align: center; } #motivos p, #motivos ul { text-align: left; margin-left: auto; margin-right: auto; } #motivos ul { list-style: none; margin: 1.5rem auto; } #motivos li { position: relative; padding-left: 30px; margin-bottom: 0.5rem; font-size: 1.1rem; } #motivos li::before { content: "»"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 900; font-size: 1.2rem; } #motivos .alert-box { background-color: #fffbeb; border: 1px solid #fde68a; padding: 1.5rem; border-radius: 8px; text-align: center; font-weight: 500; margin: 2rem auto 0; } #motivos .btn { margin: 1.5rem auto 0; } /* 7. Seção Diferenciais (Mobile) */ /* ... (Inalterado) ... */ #diferenciais h2 { text-align: center; } #diferenciais .grid-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } #diferenciais .card { background-color: var(--color-bg); padding: 1.5rem; border-radius: 8px; text-align: center; border: 1px solid #eee; } #diferenciais .card-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: 1rem; height: 40px; display: flex; align-items: center; justify-content: center; } #diferenciais .card-icon svg { width: 40px; height: 40px; } /* 8. Seção Recursos (Mobile) */ #recursos { display: flex; flex-direction: column; gap: 2rem; align-items: center; text-align: center; } #recursos .family-image { order: -1; width: 100%; /* <--- CORREÇÃO APLICADA */ } #recursos .recursos-content { text-align: left; width: 100%; } /* ... (restante de #recursos inalterado) ... */ #recursos .recursos-list { list-style: none; margin: 1rem 0; } #recursos .recursos-list li { position: relative; padding-left: 30px; margin-bottom: 0.5rem; } #recursos .recursos-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 900; } #recursos .btn { margin: 1.5rem auto 0; } /* 9. Seção Sobre Nós (Mobile) */ #sobre { display: flex; flex-direction: column; gap: 2rem; align-items: center; text-align: center; } #sobre .about-image { order: -1; width: 100%; /* <--- CORREÇÃO APLICADA (O problema do print) */ } #sobre .about-image img { border-radius: 8px; border: 5px solid var(--color-primary); width: 100%; /* <--- Adicionado para garantir */ } #sobre .about-content { text-align: left; width: 100%; } /* 10. Seção FAQ (Mobile) */ /* ... (Inalterado, já corrigido) ... */ #faq h2 { text-align: center; } .faq-item summary { font-size: 1.1rem; font-weight: 600; color: var(--color-secondary); padding: 1rem; background-color: var(--color-bg-alt); border: 1px solid #eee; border-radius: 5px; cursor: pointer; list-style: none; position: relative; padding-right: 30px; text-align: left; transition: background-color 0.2s ease; } .faq-item summary:hover { background-color: #f0ede6; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; transition: transform 0.2s; color: var(--color-primary); } .faq-item[open] summary { background-color: #f0ede6; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item div { padding: 1rem; border: 1px solid #eee; border-top: none; border-radius: 0 0 5px 5px; text-align: left; } .faq-item { margin-bottom: 0.5rem; margin-left: auto; margin-right: auto; } /* 11. Seção CTA Final (Mobile) */ #cta-final { background-color: var(--color-bg-alt); text-align: center; } #cta-final img { margin: 0 auto 2rem; border-radius: 8px; width: 100%; /* <--- CORREÇÃO APLICADA */ } #cta-final h2 { margin-left: auto; margin-right: auto; } #cta-final p { margin-top: 1rem; margin-left: auto; margin-right: auto; } #cta-final .btn { margin: 1.5rem auto 0; } /* 12. Footer (Mobile) */ /* ... (Inalterado) ... */ .footer .social-links a { color: var(--color-white); font-size: 1.5rem; transition: color 0.3s ease; display: inline-block; width: 24px; height: 24px; } .footer .social-links a svg { width: 100%; height: 100%; } .footer .social-links a:hover { color: var(--color-primary); } .footer { background-color: var(--color-secondary); color: var(--color-white); text-align: center; padding: 2.5rem 5%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .footer .logo { font-size: 1.5rem; font-weight: 700; } .footer .social-links { display: flex; gap: 1.5rem; } .footer .social-links a { color: var(--color-white); font-size: 1.5rem; transition: color 0.3s ease; } .footer .social-links a:hover { color: var(--color-primary); } .footer .footer-links { display: flex; flex-direction: column; gap: 0.8rem; } .footer .footer-links a { color: var(--color-white); font-size: 0.9rem; transition: color 0.3s ease; } .footer .footer-links a:hover { color: var(--color-primary); } .footer .copyright { font-size: 0.85rem; opacity: 0.8; margin-top: 0; } /* ... (Restante do CSS, Media Queries, Modal, WhatsApp Float inalterado) ... */ /* =============================================== * MEDIA QUERY - TABLET (min-width: 768px) * =============================================== */ @media (min-width: 768px) { /* ... (regras de fonte, container, btn) ... */ h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.4rem; } p { text-align: left; } .container { padding: 3rem 0; } .btn { width: auto; display: inline-block; margin: 1.5rem 0 0; } #qualificacao .btn, #cta-final .btn, #motivos .btn { display: block; margin: 1.5rem auto 0; } /* ... (Header inalterado) ... */ .menu-toggle { display: none; } .header .nav { display: flex; flex-direction: row; position: static; width: auto; height: auto; background: none; transform: none; visibility: visible; gap: 1.5rem; } .header .nav a { padding: 0; font-size: 1rem; width: auto; } .header .nav .btn-nav-contact { background-color: var(--color-primary); color: var(--color-white); padding: 0.5rem 1rem; border-radius: 5px; margin-top: 0; font-size: 0.9rem; display: inline-block; width: auto; } /* Hero (Tablet) */ #hero { display: grid; flex-direction: initial; grid-template-columns: 1fr 1fr; text-align: left; padding-top: 100px; align-items: center; } #hero .hero-content { order: 1; width: auto; /* Reseta o width: 100% */ } #hero .hero-image { order: 2; width: auto; /* Reseta o width: 100% */ } /* Qualificação (Tablet) */ /* ... (Inalterado) ... */ #qualificacao h2, #qualificacao p, #qualificacao .cta-qualificada, #qualificacao .disclaimer { text-align: center; } #qualificacao .grid-cards { grid-template-columns: repeat(2, 1fr); } #qualificacao .card h3 { text-align: left; } #qualificacao .card p { text-align: left; } /* Motivos (Tablet) */ /* ... (Inalterado) ... */ #motivos h2 { text-align: center; } #motivos p, #motivos ul, #motivos .alert-box { margin-left: auto; margin-right: auto; } #motivos .alert-box { margin: 2rem auto 0; } /* Diferenciais (Tablet) */ #diferenciais .grid-cards { grid-template-columns: repeat(2, 1fr); } /* Recursos (Tablet) */ #recursos { display: grid; flex-direction: initial; grid-template-columns: 1.2fr 1fr; text-align: left; align-items: center; gap: 2rem; } #recursos .family-image { order: 2; width: auto; /* Reseta o width: 100% */ } #recursos .recursos-content { text-align: left; max-width: none; width: auto; /* Reseta o width: 100% */ } #recursos .btn { margin: 1.5rem 0 0; display: inline-block; } /* Sobre Nós (Tablet) */ #sobre { display: grid; flex-direction: initial; grid-template-columns: 1fr 1.2fr; text-align: left; align-items: center; gap: 2rem; } #sobre .about-image { order: 1; width: auto; /* Reseta o width: 100% */ } #sobre .about-image img { width: auto; /* Reseta o width: 100% */ } #sobre .about-content { max-width: none; width: auto; /* Reseta o width: 100% */ } #sobre h2 { text-align: left; } /* FAQ (Tablet) */ /* ... (Inalterado) ... */ #faq h2 { text-align: center; } .faq-item { margin-left: auto; margin-right: auto; } /* CTA Final (Tablet) */ #cta-final h2, #cta-final p { text-align: center; } #cta-final img { width: auto; /* Reseta o width: 100% */ } #cta-final .btn { margin: 1.5rem auto 0; display: block; } /* Footer (Tablet) */ /* ... (Inalterado) ... */ .footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; gap: 1rem; } .footer .logo { flex-basis: 100%; margin-bottom: 0.5rem; text-align: center; } .footer .social-links { order: 3; flex-basis: 100%; justify-content: center; } .footer .footer-links { order: 2; flex-direction: row; gap: 1rem; justify-content: center; flex-grow: 1; } .footer .copyright { order: 4; flex-basis: 100%; text-align: center; font-size: 0.8rem; } .whatsapp-float { width: 60px; height: 60px; bottom: 20px; right: 20px; } .whatsapp-float svg { width: 32px; height: 32px; } } /* =============================================== * MEDIA QUERY - DESKTOP (min-width: 1024px) * =============================================== */ @media (min-width: 1024px) { /* ... (regras de fonte, container, grids) ... */ h1 { font-size: 3rem; } h2 { font-size: 2.5rem; } .container { padding: 4rem 0; } #qualificacao .grid-cards { grid-template-columns: repeat(3, 1fr); } #qualificacao p, #motivos p, #motivos ul, #motivos .alert-box, .faq-item { max-width: 700px; } #diferenciais .grid-cards { grid-template-columns: repeat(3, 1fr); } #recursos .recursos-content, #sobre .about-content { max-width: 600px; } #cta-final h2, #cta-final p { max-width: 600px; } #cta-final img { max-width: 600px; /* Adiciona um max-width na img do cta-final */ } /* Footer (Desktop) */ /* ... (Inalterado) ... */ .footer { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; justify-items: start; gap: 1.5rem 2rem; padding: 3rem 5%; } .footer .logo { grid-column: 1 / 2; grid-row: 1 / 2; margin-bottom: 0; text-align: left; } .footer .footer-links { grid-column: 2 / 3; grid-row: 1 / 2; flex-direction: row; justify-content: flex-start; gap: 1.5rem; } .footer .social-links { grid-column: 3 / 4; grid-row: 1 / 2; justify-content: flex-end; } .footer .copyright { grid-column: 1 / -1; grid-row: 2 / 3; text-align: center; margin-top: 0; } } /* 13. Botão Flutuante de WhatsApp (Mobile-First) */ /* ... (Inalterado) ... */ .whatsapp-float { position: fixed; width: 50px; height: 50px; bottom: 15px; right: 15px; background-color: #25d366; color: var(--color-white); border-radius: 50px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1001; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background-color 0.3s ease; } .whatsapp-float svg { width: 28px; height: 28px; } .whatsapp-float:hover { transform: scale(1.1); background-color: #1eae50; } /* 14. Estilos do Modal (Popup) */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; /* <--- CORREÇÃO ANTERIOR */ bottom: 0; /* <--- CORREÇÃO ANTERIOR */ background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s ease; align-items: center; justify-content: center; padding: 1rem; } /* ... (Restante do modal inalterado) ... */ .modal-overlay.active { display: flex; opacity: 1; } .modal-content { background-color: var(--color-bg); padding: 1.5rem; border-radius: 8px; max-width: 600px; width: 95%; max-height: 80vh; overflow-y: auto; position: relative; transform: translateY(-20px); transition: transform 0.3s ease; } .modal-overlay.active .modal-content { transform: translateY(0); } .modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 2rem; color: var(--color-text-light); background: none; border: none; cursor: pointer; line-height: 1; } .modal-content h3 { font-size: 1.5rem; margin-bottom: 1rem; text-align: left; margin-right: 2rem; } .modal-content p, .modal-content h4 { text-align: left; margin-bottom: 1rem; } .modal-content h4 { font-size: 1.1rem; color: var(--color-secondary); font-family: var(--font-family); font-weight: 700; }