/* ========================================================= 1. RESET BÁSICO ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x aqui (além do body) é essencial: em vários navegadores mobile é o , não o , quem controla a rolagem da página. Sem isso, mesmo com o body bloqueado, dá pra arrastar a página inteira pro lado e sobra um espaço em branco. */ html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } /* Respeita usuários que pedem menos movimento na interface */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= 2. TOKENS DE DESIGN Paleta extraída da logo (verde + amarelo/laranja) e complementada com tons naturais de madeira. ========================================================= */ :root { /* Verdes — vindos do "M" da logo e reforçados para uso em UI */ --verde-folha: #4C8C34; --verde-escuro: #1F3D24; /* footer, textos fortes sobre claro */ --verde-profundo:#16281A; /* seções escuras / overlays */ /* Amarelo/laranja — vindo do triângulo em degradê da logo */ --amarelo: #F2B233; --laranja: #DE7C2E; --degrade-marca: linear-gradient(135deg, var(--amarelo) 0%, var(--laranja) 100%); /* Tons de madeira / neutros quentes */ --madeira-escura: #4A2E1E; --madeira-media: #8A5A34; --areia: #EFE6D6; --bege: #F7F2E9; --off-white: #FBF9F4; --branco: #FFFFFF; /* Texto */ --texto-principal: #241B14; --texto-suave: #5B5245; --texto-sobre-escuro: #F3EDE0; /* Tipografia */ --fonte-titulo: 'Fraunces', Georgia, serif; --fonte-label: 'Barlow Condensed', sans-serif; --fonte-corpo: 'Inter', -apple-system, sans-serif; /* Espaçamento em escala — usado nas seções para manter ritmo vertical */ --espaco-xs: 0.5rem; --espaco-sm: 1rem; --espaco-md: 2rem; --espaco-lg: 4rem; --espaco-xl: 7rem; /* Container padrão */ --largura-max: 1240px; /* Sombra suave para cards */ --sombra-card: 0 10px 30px -12px rgba(36, 27, 20, 0.18); --sombra-card-hover: 0 18px 40px -14px rgba(36, 27, 20, 0.28); /* Raio de borda — cantos levemente arredondados, sem exagero */ --raio: 6px; } body { font-family: var(--fonte-corpo); color: var(--texto-principal); background: var(--off-white); line-height: 1.6; overflow-x: hidden; max-width: 100%; /* Rede de segurança: qualquer texto comprido sem espaço (e-mail, link) quebra a linha em vez de estourar a largura da tela. */ word-wrap: break-word; overflow-wrap: break-word; } .container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 1.5rem; } /* Eyebrow = pequeno rótulo acima dos títulos de seção, no estilo industrial/condensado — reforça a identidade "de obra" da marca */ .eyebrow { font-family: var(--fonte-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.85rem; color: var(--laranja); display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--espaco-sm); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--laranja); display: inline-block; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--verde-escuro); font-weight: 600; line-height: 1.08; } .titulo-secao { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 720px; margin-bottom: var(--espaco-md); } .subtitulo-secao { font-family: var(--fonte-corpo); font-size: 1.05rem; color: var(--texto-suave); max-width: 560px; margin-bottom: var(--espaco-lg); } /* ========================================================= BOTÕES ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 2rem; font-family: var(--fonte-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; border-radius: var(--raio); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primario { background: var(--degrade-marca); color: var(--verde-profundo); box-shadow: 0 10px 24px -10px rgba(222, 124, 46, 0.55); } .btn-primario:hover { box-shadow: 0 14px 30px -10px rgba(222, 124, 46, 0.7); transform: translateY(-2px); } .btn-secundario { background: transparent; color: var(--branco); border: 1.5px solid rgba(255,255,255,0.6); } .btn-secundario:hover { background: rgba(255,255,255,0.12); border-color: var(--branco); } .btn-outline-escuro { background: transparent; color: var(--verde-escuro); border: 1.5px solid var(--verde-escuro); } .btn-outline-escuro:hover { background: var(--verde-escuro); color: var(--texto-sobre-escuro); } .btn-whatsapp { background: var(--verde-escuro); color: #FFFFFF; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.6); } .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.75); } /* ========================================================= 3. HEADER FIXO ========================================================= */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.1rem 0; transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; } /* Estado inicial: transparente sobre o hero */ .header.no-topo { background: transparent; } /* Quando o menu mobile está aberto, desliga o efeito de vidro fosco do header — ele quebra o posicionamento em tela cheia do menu (bug de containing block do backdrop-filter) */ .header.rolado { background: rgba(251, 249, 244, 0.96); backdrop-filter: none; box-shadow: 0 4px 24px -8px rgba(36,27,20,0.15); padding: 0.65rem 0; } .header-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header-logo { display: flex; align-items: center; gap: 0.6rem; } .header-logo img { height: 198px; width: auto; transition: height 0.35s ease; } .header.rolado .header-logo img { height: 138px; } .header-nav { display: flex; align-items: center; gap: 2.1rem; } .header-nav a { font-family: var(--fonte-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--branco); position: relative; padding: 0.3rem 0; transition: color 0.25s ease; } .header.rolado .header-nav a { color: var(--verde-escuro); } .header-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0%; height: 2px; background: var(--laranja); transition: width 0.25s ease; } .header-nav a:hover::after { width: 100%; } .header-acoes { display: flex; align-items: center; gap: 1rem; } /* Botão hamburguer — some no desktop, aparece no mobile */ .menu-toggle { display: none; flex-direction: column; gap: 5px; z-index: 1100; } .menu-toggle span { width: 26px; height: 2.5px; background: var(--branco); transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; } .header.rolado .menu-toggle span { background: var(--verde-escuro); } .menu-toggle.aberto span { background: var(--verde-escuro); } .menu-toggle.aberto span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .menu-toggle.aberto span:nth-child(2) { opacity: 0; } .menu-toggle.aberto span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ========================================================= 4. HERO ========================================================= */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; color: var(--branco); background: linear-gradient(180deg, rgba(15,25,15,0.55) 0%, rgba(15,20,14,0.35) 40%, rgba(10,15,10,0.85) 100%), url('../images/capa/teste.png') center/cover no-repeat; } .hero-conteudo { position: relative; z-index: 2; padding-top: 6rem; max-width: 760px; } .hero .eyebrow { color: var(--amarelo); } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); color: var(--branco); margin-bottom: var(--espaco-sm); } .hero h1 span { color: var(--amarelo); } .hero p.hero-desc { style="text-align: justify;"; --fonte-titulo: 'Fraunces', Georgia, serif; font-size: 1.15rem; color: rgba(255,255,255,0.88); max-width: 520px; margin-bottom: var(--espaco-lg); } .hero-botoes { display: flex; gap: 1rem; flex-wrap: wrap; } /* Indicador de "role para baixo" — sutil, some em telas pequenas */ .hero-scroll { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.75); font-family: var(--fonte-label); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; } .hero-scroll .linha { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent); animation: escorrer 1.8s ease-in-out infinite; } @keyframes escorrer { 0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; } } /* ========================================================= FAIXA DE DIFERENCIAIS (logo abaixo do hero) ========================================================= */ .faixa-diferenciais { background: var(--verde-escuro); padding: 1.7rem 0; } .faixa-diferenciais .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .diferencial-item { display: flex; align-items: center; gap: 0.8rem; color: var(--texto-sobre-escuro); } .diferencial-item svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--amarelo); } .diferencial-item span { font-family: var(--fonte-label); font-weight: 600; letter-spacing: 0.02em; font-size: 1rem; text-transform: uppercase; } /* ========================================================= SEÇÃO GENÉRICA — espaçamento consistente entre blocos ========================================================= */ .secao { padding: var(--espaco-xl) 0; } .secao-clara { background: var(--off-white); } .secao-bege { background: var(--bege); } /* ========================================================= SOBRE A MADEURIDES ========================================================= */ .sobre-grid { display: grid; grid-template-columns: 0.75fr 0.95fr; gap: var(--espaco-xl); align-items:center; } .sobre-texto p { color: var(--texto-suave); margin-bottom: 1.1rem; max-width: 540px; } .sobre-lista { display: grid; gap: 0.9rem; margin-top: var(--espaco-md); } .sobre-lista li { display: flex; align-items: flex-start; gap: 0.8rem; font-family: var(--fonte-corpo); font-weight: 500; color: var(--texto-principal); } .sobre-lista svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--verde-folha); } .sobre-imagem-wrap { position: relative; border-radius: var(--raio); overflow: hidden; } .sobre-imagem-wrap img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--raio); } /* Selo flutuante sobre a imagem — reforça tempo de mercado */ .selo-flutuante { position: absolute; bottom: -1px; right: -1px; background: var(--degrade-marca); color: var(--verde-profundo); padding: 1.6rem 1.9rem; border-radius: var(--raio) 0 0 0; text-align: center; font-family: var(--fonte-titulo); } .selo-flutuante strong { display: block; font-size: 2.1rem; line-height: 1; } .selo-flutuante span { font-family: var(--fonte-label); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================= PRODUTOS — grid de cards ========================================================= */ .produtos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .produto-card { background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-card); transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex; flex-direction: column; } .produto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-card-hover); } .produto-imagem { position: relative; width: 100%; height: 380px; overflow: hidden; } .produto-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .produto-card:hover .produto-imagem img { transform: scale(1.08); } .produto-corpo { padding: 1.4rem 1.3rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .produto-corpo h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .produto-corpo p { color: var(--texto-suave); font-size: 0.92rem; flex: 1; margin-bottom: 1.1rem; } .produto-link { font-family: var(--fonte-label); font-weight: 600; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--verde-folha); display: inline-flex; align-items: center; gap: 0.4rem; } .produto-link svg { width: 14px; height: 14px; transition: transform 0.25s ease; } .produto-card:hover .produto-link svg { transform: translateX(4px); } /* ========================================================= SOLUÇÕES — cards com imagem grande e texto sobreposto ========================================================= */ .solucoes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .solucao-card { position: relative; height: 340px; border-radius: var(--raio); overflow: hidden; display: flex; align-items: flex-end; } .solucao-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .solucao-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(15,20,14,0.88) 100%); z-index: 1; } .solucao-card:hover img { transform: scale(1.1); } .solucao-titulo { position: relative; z-index: 2; padding: 1.5rem; color: var(--branco); font-family: var(--fonte-titulo); font-size: 1.35rem; display: flex; align-items: center; justify-content: space-between; width: 100%; } .solucao-titulo svg { width: 20px; height: 20px; color: var(--amarelo); } /* ========================================================= SEÇÃO DE DESTAQUE — "Do material ao projeto" ========================================================= */ .destaque { position: relative; min-height: 70vh; display: flex; align-items: center; color: var(--branco); background: linear-gradient(120deg, rgba(15,20,14,0.85) 20%, rgba(15,20,14,0.35) 100%), url('../images/destaque/destaque_image.png') center/cover no-repeat; background-attachment: fixed; } .destaque-conteudo { max-width: 620px; } .destaque h2 { color: var(--branco); font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1rem; } .destaque p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: var(--espaco-md); max-width: 480px; } /* ========================================================= GALERIA — grid estilo masonry (colunas CSS) ========================================================= */ .galeria-item { break-inside: avoid; border-radius: var(--raio); overflow: hidden; position: relative; cursor: pointer; } .galeria-item img { width: 100%; display: block; transition: transform 0.6s ease, filter 0.6s ease; } .galeria-item:hover img { transform: scale(1.06); filter: brightness(0.85); } .galeria-carrossel { display: flex; flex-direction: column; gap: 1rem; } .galeria-viewport { overflow: hidden; width: 100%; } .galeria-trilho { display: flex; gap: 0.8rem; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .galeria-trilho .galeria-item { flex-shrink: 0; margin-bottom: 0; } .galeria-trilho .galeria-item img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .galeria-navegacao { display: flex; justify-content: center; gap: 1rem; } @media (max-width: 640px) { .galeria-carrossel { gap: 0.6rem; } } /* ========================================================= POR QUE ESCOLHER — blocos com ícone ========================================================= */ .porque-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .porque-item { text-align: left; padding: 2rem 1.6rem; background: var(--branco); border-radius: var(--raio); border-top: 3px solid var(--laranja); transition: transform 0.3s ease, box-shadow 0.3s ease; } .porque-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); } .porque-icone { width: 52px; height: 52px; border-radius: 50%; background: var(--areia); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .porque-icone svg { width: 24px; height: 24px; color: var(--verde-folha); } .porque-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .porque-item p { color: var(--texto-suave); font-size: 0.92rem; } /* ========================================================= DEPOIMENTOS ========================================================= */ .depoimentos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .depoimentos-carrossel { display: flex; align-items: center; gap: 1.2rem; } .depoimentos-viewport { flex: 1; min-width: 0; overflow: hidden; } .depoimentos-trilho { display: flex; align-items: flex-start; /* Impede que o card estique verticalmente */ gap: 24px; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .depoimentos-trilho .depoimento-card { flex-shrink: 0; width: 100%; /* Garante que o card ocupe o espaço exato da tela */ box-sizing: border-box; } .depoimento-card { background: var(--branco); border-radius: var(--raio); padding: 2rem; box-shadow: var(--sombra-card); height: auto; /* Garante altura automática conforme o conteúdo */ } .estrelas { display: flex; gap: 3px; margin-bottom: 1rem; } .estrelas svg { width: 17px; height: 17px; color: var(--amarelo); } .depoimento-card p.texto-depoimento { color: var(--texto-principal); font-style: italic; margin-bottom: 1.3rem; font-size: 0.98rem; } .depoimento-autor { display: flex; align-items: center; gap: 0.8rem; } .avatar-iniciais { width: 42px; height: 42px; border-radius: 50%; background: var(--verde-escuro); color: var(--branco); display: flex; align-items: center; justify-content: center; font-family: var(--fonte-label); font-weight: 700; font-size: 0.95rem; } .depoimento-autor strong { display: block; font-size: 0.95rem; } .depoimento-autor span { font-size: 0.82rem; color: var(--texto-suave); } .avatar-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } /* Regras específicas para celulares */ @media (max-width: 640px) { .depoimentos-carrossel { gap: 0.5rem; } .depoimento-card { padding: 1.25rem; /* Reduz a sobra interna de borda no mobile */ } } /* ========================================================= CTA FINAL ========================================================= */ .cta-final { position: relative; padding: var(--espaco-xl) 0; text-align: center; color: var(--branco); background: linear-gradient(180deg, rgba(15,20,14,0.6), rgba(10,14,10,0.92)), url('../images/cta/IMG_1216.png') center/cover no-repeat; } .cta-final h2 { color: var(--branco); font-size: clamp(2rem, 5vw, 3.3rem); max-width: 700px; margin: 0 auto 1rem; } .cta-final p { color: rgba(255,255,255,0.85); max-width: 480px; margin: 0 auto var(--espaco-lg); font-size: 1.05rem; } .cta-botoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ========================================================= CONTATO ========================================================= */ .contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-xl); align-items: start; } .contato-info-lista { display: grid; gap: 1.4rem; margin-bottom: var(--espaco-md); } .contato-info-item { display: flex; gap: 1rem; align-items: flex-start; } .contato-info-item > div:last-child { min-width: 0; } .contato-info-item .icone { width: 44px; height: 44px; border-radius: 50%; background: var(--verde-escuro); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contato-info-item .icone svg { width: 20px; height: 20px; color: var(--branco); } .contato-info-item strong { display: block; font-family: var(--fonte-label); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--texto-suave); margin-bottom: 0.15rem; } .contato-info-item p, .contato-info-item a { font-size: 1rem; color: var(--texto-principal); } .mapa-wrap { border-radius: var(--raio); overflow: hidden; height: 240px; margin-top: var(--espaco-md); filter: grayscale(0.3) contrast(1.05); } .mapa-wrap iframe { width: 100%; height: 100%; border: 0; } /* Painel de contato direto — substitui o formulário: o cliente toca e já é levado direto pro WhatsApp ou pro discador do celular, sem precisar preencher nada. Não estica para acompanhar a altura do bloco de informações ao lado (que tem mapa) — fica com altura natural, alinhado ao topo, para não sobrar espaço vazio. Fundo claro (em vez de um verde sólido forte) para ficar coerente com o resto da seção, com o verde entrando só como contorno/detalhe. */ .contato-direto { position: relative; overflow: hidden; align-self: start; background: var(--areia); border: 1px solid rgba(31, 61, 36, 0.14); border-radius: var(--raio); padding: 2.6rem 2.4rem; } /* Anéis de crescimento como marca d'água decorativa no canto — repete o elemento-assinatura do site também aqui no contato */ .contato-direto::before { content: ""; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M235 35 C190 5 135 15 120 55 C105 95 150 125 195 110 C225 100 235 75 220 55 C205 35 170 35 155 55 C140 75 155 95 180 92 C200 90 210 75 202 62' fill='none' stroke='%234C8C34' stroke-width='2'/%3E%3Cpath d='M235 65 C195 35 150 45 145 75 C140 105 175 120 205 108' fill='none' stroke='%234C8C34' stroke-width='1.5'/%3E%3Cpath d='M235 95 C215 80 195 82 188 95 C182 107 195 115 210 112' fill='none' stroke='%234C8C34' stroke-width='1'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.12; pointer-events: none; } /* Logo centralizada no card — antes tinha um deslocamento manual (left: 10rem) que jogava ela pra direita sem necessidade */ .contato-direto-logo { position: relative; z-index: 1; margin-bottom: 1rem; display: flex; justify-content: center; } .contato-direto{ background-color:#FBF9F4; } .contato-direto-logo img { height: 120px; width: auto; display: block; } .contato-direto-cabecalho { position:relative; z-index: 1; text-align: center; } .contato-direto h3 { color: var(--verde-escuro); font-family: var(--fonte-titulo); font-size: 1.5rem; margin-bottom: 0.6rem; } .contato-direto p { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 1.8rem; max-width: 340px; } /* Número em destaque — dá peso visual e reforça o contato antes dos botões. Empilha rótulo + número em uma linha cada, sem quebrar o número no meio (o hífen do telefone é um ponto de quebra válido pro navegador, então sem "white-space: nowrap" ele corta o número ao meio). */ .contato-direto-numero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; margin-bottom: 1rem; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(31, 61, 36, 0.14); } .contato-direto-numero strong { font-family: "times new roman", Georgia, serif; font-size: 1.8rem; color: var(--verde-escuro); letter-spacing: 0.01em; white-space: nowrap; } .contato-direto-numero span { font-family: var(--fonte-label); font-size: 0.90rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); } .contato-direto-botoes { position: relative; z-index: 1; display: grid; gap: 0.9rem; } .contato-direto-botoes { min-width: 0; } .contato-direto-botoes .btn { width: 100%; min-width: 0; padding: 1.1rem 1.5rem; font-size: 0.95rem; white-space: normal; text-align: center; line-height: 1.3; } /* Sobre o fundo claro, os botões seguem o mesmo estilo do resto do site: WhatsApp preenchido em verde-de-marca, ligar com contorno. */ .contato-direto-botoes .btn-whatsapp { background: #316136; color: #FFFFFF; border: none; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.45); } .contato-direto-botoes .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.6); } .contato-direto-botoes .btn-primario { background: transparent; color: var(--verde-escuro); border: 1.5px solid var(--verde-escuro); box-shadow: none; } .contato-direto-botoes .btn-primario:hover { background: var(--verde-escuro); color: var(--texto-sobre-escuro); transform: translateY(-2px); box-shadow: none; } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--verde-profundo); color: rgba(243,237,224,0.82); padding: var(--espaco-xl) 0 var(--espaco-md); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--espaco-lg); margin-bottom: var(--espaco-lg); } .footer-logo { height: 120px; margin-bottom: 1.1rem; filter: brightness(1.1); } .footer-col h4 { font-family: var(--fonte-label); color: var(--texto-sobre-escuro); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.88rem; margin-bottom: 1.1rem; } .footer-col ul { display: grid; gap: 0.7rem; } .footer-col a { font-size: 0.92rem; transition: color 0.2s ease; } .footer-col a:hover { color: var(--amarelo); } .footer-sociais { display: flex; gap: 0.8rem; margin-top: 1.9rem; } .footer-sociais a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(243,237,224,0.3); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, border-color 0.25s ease; } .footer-sociais a:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--verde-profundo); } .footer-sociais svg { width: 17px; height: 17px; } .footer-baixo { border-top: 1px solid rgba(243,237,224,0.14); padding-top: 1.6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; } /* ========================================================= BOTÃO FLUTUANTE DO WHATSAPP ========================================================= */ .whats-flutuante { position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 900; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(37,211,102,0.65); animation: pulsar 2.6s ease-in-out infinite; } .whats-flutuante svg { width: 28px; height: 28px; color: #fff; } .whats-flutuante:hover { animation-play-state: paused; transform: scale(1.06); } @keyframes pulsar { 0%, 100% { box-shadow: 0 10px 26px -8px rgba(37,211,102,0.65); } 50% { box-shadow: 0 10px 26px -8px rgba(37,211,102,0.95), 0 0 0 10px rgba(37,211,102,0.12); } } /* ========================================================= ANIMAÇÃO DE ENTRADA AO ROLAR A PÁGINA Elementos com a classe .reveal começam levemente deslocados e ganham a classe .visivel via JS (IntersectionObserver). ========================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visivel { opacity: 1; transform: translateY(0); } .reveal-atraso-1 { transition-delay: 0.1s; } .reveal-atraso-2 { transition-delay: 0.2s; } .reveal-atraso-3 { transition-delay: 0.3s; } .reveal-atraso-4 { transition-delay: 0.4s; } /* ========================================================= 5. RESPONSIVIDADE ========================================================= */ @media (max-width: 1080px) { .produtos-grid { grid-template-columns: repeat(2, 1fr); } .solucoes-grid { grid-template-columns: repeat(2, 1fr); } .porque-grid { grid-template-columns: repeat(2, 1fr); } .depoimentos-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; } .galeria-grid { columns: 3 220px; } } @media (max-width: 860px) { .header-nav { display: none; } .menu-toggle { display: flex; } .header-logo img { height: 78px; } .header.rolado .header-logo img { height: 56px; } .hero-conteudo { padding-top: 9rem; } /* Menu mobile em tela cheia */ .header-nav.aberto { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--off-white); padding: 6.5rem 2rem 2rem; gap: 1.6rem; z-index: 1050; } .header-nav.aberto a { color: var(--verde-escuro); font-size: 1.3rem; } .header-nav.aberto .header-acoes-mobile { margin-top: 1rem; } .faixa-diferenciais .container { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; } .sobre-grid { grid-template-columns: 1fr; } .sobre-imagem-wrap img { height: 380px; } .contato-grid { grid-template-columns: 1fr; } .destaque { background-attachment: scroll; } /* fixed atrapalha performance no mobile */ } @media (max-width: 640px) { .secao { padding: 4rem 0; } .produtos-grid { grid-template-columns: 1fr; } .solucoes-grid { grid-template-columns: 1fr; } .porque-grid { grid-template-columns: 1fr; } .faixa-diferenciais .container { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .galeria-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.8rem; row-gap: 0.8rem; columns: unset; } .galeria-item { margin-bottom: 0; } .galeria-item img { aspect-ratio: 1 / 1; object-fit: cover; height: 100%; } .produto-imagem { aspect-ratio: 1 / 1; height: auto; } .hero-botoes, .cta-botoes { flex-direction: column; align-items: stretch; } .footer-baixo { flex-direction: column; align-items: flex-start; } .selo-flutuante { position: static; margin-top: -6px; border-radius: 0 0 var(--raio) var(--raio); } /* ========================================================= CORREÇÃO 1: CARROSSEL DE PRODUTOS / DEPOIMENTOS NO IPHONE ========================================================= */ .produtos-carrossel, .depoimentos-carrossel { gap: 0.4rem; } /* Garante que o card ocupe 100% da largura visível do carrossel */ .produtos-trilho .produto-card, .depoimentos-trilho .depoimento-card { width: 100%; min-width: 100%; max-width: 100%; flex: 0 0 100%; box-sizing: border-box; } /* Melhora a área de clique das setas no Safari iOS */ .carrossel-seta { width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; z-index: 10; } /* ========================================================= CORREÇÃO 2: BOTÕES DE CONTATO (NÃO CORTAR TEXTO) ========================================================= */ .contato-direto { padding: 1.8rem 1rem; } .contato-direto-botoes .btn { white-space: normal !important; /* Força quebra de linha no iPhone */ font-size: 0.8rem; letter-spacing: 0.01em; padding: 0.85rem 0.5rem; text-align: center; line-height: 1.25; word-break: break-word; } } /* ========================================================= SETAS DE NAVEGAÇÃO DENTRO DOS CARDS DE SOLUÇÕES Permite trocar entre várias fotos do mesmo card usando setas nas laterais, sem sair do card. ========================================================= */ .seta-imagem { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; /* garante que fica acima de qualquer sobreposição no iOS */ width: 34px; height: 34px; touch-action: manipulation; border-radius: 50%; background: rgba(15, 20, 14, 0.45); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background 0.25s ease, opacity 0.25s ease; opacity: 0; /* some por padrão, só aparece ao passar o mouse no card */ } .solucao-card:hover .seta-imagem, .produto-card:hover .seta-imagem { opacity: 1; } .seta-imagem:hover { background: rgba(15, 20, 14, 0.75); } .seta-imagem::before { content: ''; position: absolute; inset: -12px; } .seta-anterior { left: 10px; } .seta-proxima { right: 10px; } /* Em telas de toque (celular) não tem "hover", então deixamos as setas sempre visíveis para não ficarem escondidas */ @media (hover: none) { .seta-imagem { opacity: 1; } } /* ========================================================= CARROSSEL DE PRODUTOS (3 cards por página, com setas) ========================================================= */ .produtos-carrossel { display: flex; flex-direction: column; gap: 1rem; } .produtos-viewport { overflow: hidden; flex: 1; min-width: 0; } .produtos-trilho { display: flex; gap: 1.6rem; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .produtos-trilho .produto-card { flex-shrink: 0; } .produtos-navegacao { display: flex; justify-content: center; gap: 1.2rem; } .carrossel-seta { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--verde-escuro); background: var(--branco); color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease, visibility 0.25s ease; } .carrossel-seta:hover { background: var(--verde-escuro); color: var(--texto-sobre-escuro); } .carrossel-seta.escondida { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 640px) { .produtos-carrossel { gap: 0.5rem; } .carrossel-seta { width: 36px; height: 36px; font-size: 1.1rem; } } /* ========================================================= ACESSIBILIDADE E TOQUE — CARROSSEL DE PRODUTOS Reforça a experiência em celular: área de toque maior, foco visível para navegação por teclado, e indicador de página. ========================================================= */ @media (max-width: 640px) { .carrossel-seta { width: 44px; height: 44px; font-size: 1.2rem; } } @media (max-width: 640px) { .seta-imagem { width: 40px; height: 40px; } } .carrossel-seta:focus-visible, .seta-imagem:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; } .produtos-indicador { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; } .produtos-indicador button { width: 8px; height: 8px; border-radius: 50%; background: rgba(31, 61, 36, 0.25); border: none; padding: 0; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .produtos-indicador button.ativo { background: var(--verde-escuro); transform: scale(1.3); } .produtos-indicador button { position: relative; } .produtos-indicador button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; } @media (hover: none) { .produtos-viewport { cursor: grab; } }