/* =================================================== */ /* --- ARQUIVO DE RESPONSIVIDADE (responsive.css) --- */ /* =================================================== */ /* --- 1. Estilos do Menu Mobile --- */ /* (Estilos base para o menu hambúrguer e painel, escondidos por padrão no desktop) */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 32px; height: 28px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; /* Fica acima do conteúdo, mas abaixo do menu */ margin-right: 20px; } .mobile-menu-toggle .bar { width: 100%; height: 4px; background-color: #333; /* Cor dos ícones - ajuste se o fundo for escuro */ border-radius: 2px; transition: all 0.3s ease; } /* Painel do menu que desliza */ .mobile-nav { display: none; /* Começa escondido */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); z-index: 1000; /* Fica acima de todo o conteúdo */ flex-direction: column; align-items: center; justify-content: center; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(4px); } .mobile-nav-content { display: flex; flex-direction: column; align-items: center; gap: 25px; } .mobile-nav a { color: white; text-decoration: none; font-size: 24px; font-weight: 500; padding: 10px; transition: opacity 0.3s; } .mobile-nav a:hover { opacity: 0.7; } .mobile-nav-welcome { font-size: 16px; color: #888; /* Cinza para a mensagem de boas-vindas */ margin-bottom: 15px; padding: 5px; border-bottom: 1px solid #555; text-align: center; } /* --- 2. Estados Ativos (via JS) --- */ /* Quando o ganha a classe .mobile-menu-open */ .mobile-menu-open { overflow: hidden; /* Impede o scroll da página principal */ } .mobile-menu-open .mobile-nav { display: flex; transform: translateX(0); /* Mostra o menu */ } /* Botão de fechar (X) - fica fixo */ .mobile-menu-open .mobile-menu-toggle { position: fixed; right: 20px; top: 20px; transform: none; /* Reseta a posição */ } .mobile-menu-open .mobile-menu-toggle .bar { background-color: white; /* Cor do X */ } .mobile-menu-open .mobile-menu-toggle .bar:nth-child(1) { transform: translateY(12px) rotate(45deg); } .mobile-menu-open .mobile-menu-toggle .bar:nth-child(2) { opacity: 0; } .mobile-menu-open .mobile-menu-toggle .bar:nth-child(3) { transform: translateY(-12px) rotate(-45deg); } /* =================================================== */ /* --- 3. Media Queries (Início da Responsividade) --- */ /* =================================================== */ @media (max-width: 768px) { /* Regra Global de Imagens (Corrigida) */ img, video, iframe { max-width: 100%; height: auto; display: block; } /* --- CABEÇALHO --- */ .site-header { padding: 15px 20px; position: relative; min-height: 28px; /* Altura do botão */ } /* Esconde o menu desktop */ .header-content-left, .header-content-right, .logo-wrapper { display: none; } /* Mostra o botão hambúrguer */ .mobile-menu-toggle { display: flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } /* --- REGRAS DO MODAL DA CONTA --- */ .modal-overlay#accountModal { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; padding: 20px; box-sizing: border-box; } #accountModal .content-container { width: 90vw; max-width: 500px; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; } #accountModal .account-container { width: 100% !important; position: relative !important; top: auto !important; left: auto !important; margin: 0 !important; display: flex; flex-direction: column; gap: 25px; } #accountModal .profile-section { display: flex; flex-direction: column; align-items: center; text-align: center; } #accountModal .company-info-line { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 15px; } #accountModal .btn-single.btn-set-company { width: 100%; max-width: 250px; } /* --- Outras regras de 768px --- */ .container { padding-top: 30px; } .container, .footer-content { padding-left: 20px; padding-right: 20px; } .hero { padding: 40px 15px; } .hero-title { font-size: 36px; } .hero-subtitle { font-size: 18px; } .features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* * ============================================= * --- AJUSTE DO RODAPÉ (SEU ÚLTIMO PEDIDO) --- * ============================================= */ .footer-content { flex-direction: column; /* Empilha o texto e a logo */ align-items: center; /* Centraliza os itens */ gap: 20px; /* Espaço entre o texto e a logo */ padding-top: 20px; padding-bottom: 20px; text-align: center; /* Garante que o texto fique centralizado */ } /* Reseta o posicionamento da logo */ .footer-content img, .footer-content .footer-logo { /* Pega a tag ou uma classe .footer-logo */ position: relative !important; right: auto !important; top: auto !important; margin: 0; } } /* =================================================== */ /* --- 4. Ajustes para Celulares (Telas Pequenas) --- */ /* =================================================== */ @media (max-width: 480px) { .container, .footer-content { padding-left: 15px; padding-right: 15px; } .container { padding-top: 20px; } .mobile-menu-open .mobile-menu-toggle { right: 15px; top: 15px; } .site-header { padding: 15px; } .mobile-menu-toggle { right: 15px; } /* Posição no estado fechado */ .hero { padding: 30px 10px; } .hero-title { font-size: 28px; } .hero-subtitle { font-size: 16px; } .cta-button { padding: 14px 25px; font-size: 16px; width: 100%; box-sizing: border-box; } .features-grid { grid-template-columns: 1fr; } /* --- Ajuste Fino do Modal da Conta --- */ #accountModal .content-container { width: 95vw; padding: 0; } #accountModal .account-container { /* Padding menor para telas bem pequenas */ padding: 15px !important; } } .btn-subscribe { background-color: #e180ff; color: white; border: none; padding: 12px 25px; border-radius: 20px; font-size: 1.1em; cursor: pointer; text-transform: uppercase; font-weight: bold; width: 60%; align-self: center; /* Garante que o botão fique centralizado horizontalmente */ margin-top: auto; /* Empurra o botão para a base do card */ margin-bottom: 10px; /* Adiciona 20px de espaço extra na base */ transition: background-color 0.4s ease; } /* Classe para textos centralizados */ .text-center { text-align: center; line-height: 1; margin-bottom: 80px; } /* Classe para imagens centralizadas */ .image-center { text-align: center; margin-bottom: 40px; } .mobile-overlay-message { color: #f1495a; font-size: 1.1em; font-weight: bold; } @media (max-width: 768px) { .about-grid { /* Muda a direção para 'coluna' (empilhado) */ flex-direction: column; gap: 20px; } /* * Força os filhos (texto e imagem) * a ocuparem 100% da largura no mobile */ .about-grid > .about-text, .about-grid > .about-image1, .about-grid > .about-image2 { width: 100%; max-width: 100%; flex-basis: auto; } .about-grid img { width: 100%; height: auto; } }