/* ======================================= RESET GERAL — Remove margens e padding padrão do navegador ========================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; scroll-behavior: smooth; } /* ======================================= ESTILO BASE DO BODY — Mobile-First, Tema Padrão (Escuro) ========================================== */ body { font-family: Arial, sans-serif; /* Fonte principal */ background-color: #121212; /* Cor de fundo (modo escuro: #1e1e1e) */ color: #f0f0f0; /* Cor do texto padrão */ line-height: 1.6; min-height: 100vh; } main section h2 { font-size: 2rem; color: #4CAF50; margin-bottom: 20px; } /* ======================================= TEMA CLARO — Ativado com class 'light-mode' no ========================================== */ body.light-mode { background-color: #ffffff; /* Fundo claro */ color: #222; /* Texto escuro */ } body.light-mode .site-header { background-color: #f0f0f0; /* Header claro */ } body.light-mode .nav-links { background-color: #f0f0f0; /* Menu mobile claro */ transition: background-color 1.1s, color 1.1s; } body.light-mode .logo { color: #4CAF50; } body.light-mode .hamburger, body.light-mode .nav-links li a, body.light-mode .lang-button, body.light-mode .theme-toggle { color: #222; } body.light-mode main section { background-color: #f0f0f0; /* Fundo claro das secções */ color: #222; /* Texto escuro */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); } body.light-mode main h2, body.light-mode main p { color: #222; } body.light-mode main section h2 { color: #4CAF50; } body.light-mode footer { background-color: #f0f0f0; /* Rodapé claro */ color: #222; } .hero-slider { /* Image Clara*/ position: relative; width: 100%; height: 100vh; background-image: url('img/slider1.png'); background-size: cover; background-position: center; display: flex; align-items: flex-start; /* Começa no topo */ justify-content: center; padding-top: 10vh; } body.light-mode .hero-slider { background-image: url('img/slider1W.png'); } /* = Modo claro furmulário = */ body.light-mode .form-context-text { color: #222; } .theme-toggle { font-size: 1.6rem; background: none; border: none; cursor: pointer; color: inherit; } /* = Modo claro footer = */ body.light-mode .site-footer { background-color: #f0f0f0; color: #222; } body.light-mode .site-footer a { color: #2e7d32; } body.light-mode .footer-section h4 { color: #2e7d32; } body.light-mode .footer-bottom { color: #666; border-top: 1px solid #ccc; } /* ======================================= CABEÇALHO DO SITE ========================================== */ .site-header { background-color: #1e1e1e;/* Cor de fundo do header, remover fica sem */ /*position: absolute; */ /* Altera se o menu fica fixo ou não */ position: fixed; padding: 10px 20px; margin-bottom: 20px; top: 0; left: 0; width: 100%; z-index: 10; } /* ======================================= NAVBAR — Mobile-First ========================================== */ .navbar { display: flex; flex-direction: column; /* Mobile: vertical */ align-items: center; gap: 10px; } /* Logotipo */ .navbar .logo { font-size: 1.5rem; /* Tamanho do logo */ font-weight: bold; color: white; } /* Links do menu */ .nav-links { list-style: none; display: flex; flex-direction: column; /* Menu vertical por padrão */ gap: 10px; padding: 0; margin: 0; } .nav-links li a { color: white; /* Cor dos links */ text-decoration: none; font-size: 1.2rem; /* Tamanho dos links */ transition: color 0.3s ease; } .nav-links li a:hover { color: #4CAF50; /* Verde profissional */ text-decoration: underline; } body.light-mode .nav-links li a:hover { color: #4CAF50; } .nav-actions { display: flex; align-items: center; gap: 10px; /* Espaço entre os botões */ } /* ============================== Logo imagem da navbar ============================== */ .logo-img { display: none; /* escondido no mobile */ } .logo-img img { max-height: 38px; /* altura ajustada */ width: auto; display: block; } /* Desktop */ @media (min-width: 1100px) { .navbar { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; } .site-header { padding: 3px 1px; } .logo-img { display: block; flex: 0 0 auto; /* só ocupa o tamanho da imagem */ margin-right: 12px; } .logo-img img { max-height: 38px; width: auto; } .nav-links { display: flex !important; flex-direction: row; gap: 20px; background-color: transparent; width: auto; padding: 0; justify-content: flex-start; /* alinha à esquerda */ } .nav-actions { margin-left: auto; /* empurra as ações (tema/idioma) para a direita */ display: flex; gap: 10px; align-items: center; } } /* ======================================= BOTÕES: Hambúrguer, Idioma, Tema ========================================== */ .hamburger, .lang-button, .theme-toggle { background: none; border: none; font-size: 1.6rem; /* Tamanho dos ícones */ color: white; cursor: pointer; } .theme-toggle { margin-right: 10px; /* Espaço entre botões */ } /* ======================================= Logotipo sem hiperligação ========================================== */ .logo a { color: inherit; /* usa a cor herdada */ text-decoration: none; /* remove sublinhado */ cursor: pointer; /* mantém “link” no cursor */ display: inline-block; /* permite animações de transformação */ transition: transform 0.3s ease, color 0.3s ease; } /* Animação ao passar o rato */ .logo a:hover { transform: scale(1.05); /* cresce ligeiramente */ color: #4CAF50; /* muda para verde suave */ } /* ======================================= CONTEÚDO PRINCIPAL ========================================== */ main { flex: 1; display: flex; flex-direction: column; align-items: center; } main section, footer, .site-header, .nav-links li a { transition: background-color 0.6s ease, color 0.6s ease; } main section { width: 100vw; /* Largura das seções */ padding: 15px; /* Espaço interno das seções */ background-color: #1e1e1e; border-radius: 6px; box-shadow: 0 0 5px rgba(0,0,0,0.1); } main h2 { font-size: 1.4rem; /* Tamanho dos títulos */ margin-bottom: 10px; color: #ffffff; } main p { font-size: 1rem; /* Tamanho dos parágrafos */ } /* ======================================= RODAPÉ ========================================== */ footer { text-align: center; padding: 20px; background-color: #1e1e1e; /* Cor do rodapé */ color: white; font-size: 0.9rem; } /* ======================================= HERO SLIDER — Imagem de fundo de boas-vindas ========================================== */ .hero-slider { position: relative; /* Permite posicionar o conteúdo dentro */ width: 100%; height: 100vh; /* Ocupa a altura total da viewport */ background-image: url('img/slider1.png');/* Imagem de fundo do slider */ background-size: cover; /* Imagem cobre toda a área */ background-position: center; /* Centraliza a imagem */ display: flex; /* Flexbox para centralizar conteúdo */ align-items: center; justify-content: center; text-align: center; } .slider-content { position: sticky; /* Fixa o conteúdo enquanto estiver visível */ top: 20vh; /* Distância do topo ao iniciar o sticky */ z-index: 2; color: white; background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente */ padding: 20px 30px; border-radius: 10px; width: fit-content; margin: 0 auto; text-align: center; transition: opacity 0.5s ease; } /* ======================================= LANG SELECTOR — Menu suspenso de idiomas ========================================== */ .lang-selector { position: relative; /* Posição relativa para posicionar o dropdown */ } .lang-dropdown { display: none; /* Esconde o menu por padrão */ position: absolute; /* Posicionamento absoluto abaixo do botão */ top: 120%; /* Distância do botão 🌐 */ right: 0; background-color: #1e1e1e; /* Fundo escuro */ border: 1px solid #444; border-radius: 4px; list-style: none; padding: 5px 0; z-index: 99; /* Fica acima de outros elementos */ min-width: 140px; /* Largura mínima */ } .lang-dropdown li { padding: 8px 15px; cursor: pointer; color: white; } .lang-dropdown li:hover { background-color: #333; /* Efeito hover */ } /* Tema claro do dropdown */ body.light-mode .lang-dropdown { background-color: #f0f0f0; border-color: #ccc; } body.light-mode .lang-dropdown li { color: #222; } body.light-mode .lang-dropdown li:hover { background-color: #ddd; } .hero-logo { width: 100vw; /* 40% da largura da viewport */ max-width: 300px; /* Limite máximo opcional */ height: auto; /* Mantém a proporção */ margin-bottom: 20px; /* Espaço abaixo do logo */ } /* ======================================= SECÇÃO: Nossa Missão ========================================== */ .section-missao { padding: 60px 20px; background: linear-gradient(55deg,#0f0f0f 0%,#1e1e1e 100%); } body.light-mode .section-missao { background: linear-gradient(55deg,#e8f5e9 0%,#f0f0f0 100%); } .missao-wrapper { max-width: 900px; margin: 0 auto; } .missao-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .missao-texto { flex: 1; max-width: 600px; } .missao-texto h2 { font-size: 2rem; margin-bottom: 20px; color: #4CAF50; } .missao-texto p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; } .missao-beneficios { list-style: none; padding-left: 0; } .missao-beneficios li { margin-bottom: 12px; font-size: 1.05rem; line-height: 1.6; } .missao-imagem { flex: 1; max-width: 280px; } .missao-imagem img { width: 100%; border-radius: 12px; max-width: 280px; box-shadow: 0 10px 25px rgba(0,0,0,0.25); } /* ======================================= SECÇÃO: Serviços ========================================== */ .section-servicos.fancy { padding: 60px 20px; background: linear-gradient(55deg,#0f0f0f 0%,#1e1e1e 90%); } body.light-mode .section-servicos.fancy { background: linear-gradient(55deg,#e8f5e9 0%,#f0f0f0 90%); } .servicos-wrapper { max-width: 1000px; margin: 0 auto; } .servicos-container { display: flex; flex-direction: column; /* mobile */ gap: 25px; margin-top: 40px; } /* ---------- Menu ---------- */ .servicos-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } .servico-tab { flex: 1 1 auto; background: transparent; border: 1px solid #4CAF50; font-weight: bold; color: #f0f0f0; padding: 12px 16px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; transition: all .3s ease; } body.light-mode .servico-tab { color:#222; } .servico-tab:hover, .servico-tab.active { background: #4CAF50; color: #fff; } /* ---------- Painel de conteúdo ---------- */ .servicos-content { background: rgba(255,255,255,0.03); border-radius: 16px; padding: 30px 25px; min-height: 180px; position: relative; } body.light-mode .servicos-content { background: rgba(255,255,255,0.9); } .servico-pane-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; flex-direction: row-reverse; /* imagem à direita */ } .servico-pane-inner img { width: 240px; flex-shrink: 0; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.25); object-fit: cover; } .servico-pane-inner div { flex: 1; min-width: 250px; text-align: justify; } /* ---------- Cores no Light Mode ---------- */ body.light-mode .servico-tab.active, body.light-mode .servico-tab:hover { background:#4CAF50; color:#fff; } .servico-pane { display:none; } .servico-pane.active { display:block; animation: fade-in .4s ease; } @keyframes fade-in { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } /* ======================================= SECÇÃO: Vantagens da Rega Gota-a-Gota ========================================== */ .section-vantagens.fancy { padding: 60px 20px; background: linear-gradient(55deg,#0f0f0f 0%,#1e1e1e 90%); text-align: center; } body.light-mode .section-vantagens.fancy { background: linear-gradient(55deg,#e8f5e9 0%,#f0f0f0 90%); } .section-vantagens.fancy h2 { color: #4CAF50; font-size: 2rem; margin-bottom: 25px; } body.light-mode .section-vantagens.fancy h2 { color: #4CAF50; } .vantagens-wrapper { max-width: 1100px; margin: 0 auto; } .vantagens-grid { display: grid; gap: 25px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* ---------- Card individual ---------- */ .vantagem-card { --shadow: rgba(0,0,0,0.25); background: rgba(255,255,255,0.03); border: 1px solid var(--color); border-radius: 16px; padding: 35px 25px; position: relative; overflow: hidden; transform: translateY(40px); opacity: 0; transition: transform .6s ease, opacity .6s ease, box-shadow .3s ease; } body.light-mode .vantagem-card { background: rgba(255,255,255,0.9); --shadow: rgba(0,0,0,0.1); } .vantagem-card i { font-size: 2.8rem; color: var(--color); margin-bottom: 20px; } .vantagem-card h3 { font-size: 1.1rem; line-height: 1.4; color: #f0f0f0; } body.light-mode .vantagem-card h3 { color: #222; } /* ======================================= SECÇÃO: Sobre Nós ========================================== */ body:not(.light-mode) .section-sobre { background: linear-gradient(55deg,#0f0f0f 0%,#1e1e1e 70%); /* gradiente escuro */ } .section-sobre { background: linear-gradient(55deg,#e8f5e9 0%,#f0f0f0 70%); /* gradiente leve */ padding: 60px 20px; } .sobre-wrapper { max-width: 1000px; margin: 0 auto; } .section-sobre h2 { font-size: 2.2rem; color: #4CAF50; margin-bottom: 30px; text-align: center; } .sobre-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px; } .sobre-texto { flex: 1; min-width: 250px; text-align: justify; font-size: 1.1rem; line-height: 1.8; } .sobre-imagem { flex: 0 0 320px; /* ocupa máx. 320 px */ } .sobre-imagem img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.18); object-fit: cover; } .section-sobre::before { content:""; display:block; width:90px; height:6px; margin:0 auto 35px; background:#4CAF50; border-radius:3px; } .sobre-content{ opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s ease; } .sobre-content.appear{ opacity:1; transform:translateY(0); } .sobre-lista{ list-style:none; padding:0; margin:0; flex: 1; } .sobre-lista li{ margin:14px 0; font-size:1.05rem; line-height:1.7; } .sobre-lista i{ color:#4CAF50; margin-right:10px; } @media (max-width: 1100px) { .sobre-content { flex-direction: column; text-align: justify; } .sobre-imagem { order: 1; max-width: 100%; } .sobre-lista { order: 2; } } /* ======================================= SECÇÃO: Projetos ======================================= */ .section-projetos { padding: 60px 20px; background: linear-gradient(55deg,#0f0f0f 0%,#1e1e1e 90%); } body.light-mode .section-projetos { background: linear-gradient(55deg,#e8f5e9 0%,#f0f0f0 90%); } .projetos-wrapper { max-width: 1100px; margin: 0 auto; } /* título alinhado à esquerda como em Serviços */ .section-projetos h2 { font-size: 2rem; margin-bottom: 10px; color: #4CAF50; text-align: left; } .projetos-descricao { margin-bottom: 28px; font-size: 1.05rem; line-height: 1.7; color: inherit; text-align: left; opacity: .95; } .projetos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .projeto-card { background: rgba(255,255,255,0.03); border: 1px solid #2e7d32; /* mantém a palete */ border-radius: 16px; padding: 16px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } body.light-mode .projeto-card { background: rgba(255,255,255,0.9); border-color: #a5d6a7; } .projeto-media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #0f0f0f; box-shadow: 0 6px 18px rgba(0,0,0,.22); margin-bottom: 12px; } body.light-mode .projeto-media { background: #f5f5f5; } .projeto-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: filter .3s ease, transform .3s ease; } .projeto-card:hover .projeto-media img { filter: saturate(1.05); transform: scale(1.02); } .projeto-titulo { font-weight: 700; margin-bottom: 6px; color: #f0f0f0; font-size: 1.05rem; } body.light-mode .projeto-titulo { color: #222; } .projeto-meta { font-size: .95rem; opacity: .85; line-height: 1.5; } /* ---------- Texto oculto/hover ---------- */ .projeto-meta { font-size: .95rem; opacity: 0; /* escondido inicialmente */ line-height: 1.5; max-height: 0; overflow: hidden; transition: opacity .4s ease, max-height .4s ease; } /* aparece apenas no hover */ .projeto-card:hover .projeto-meta { opacity: 1; max-height: 200px; /* espaço suficiente para texto */ margin-top: 8px; } .projetos-grid:hover .projeto-meta, .projetos-grid:focus-within .projeto-meta { opacity: 1; max-height: 120px; /* altura controlada para evitar muita distância */ margin-top: 8px; } @media (hover: none), (max-width: 1100px) { /* ======================================= Projetos — Mostrar texto de TODOS os cards ao hover no grid ======================================= */ .projetos-grid:hover .projeto-meta, .projetos-grid:focus-within .projeto-meta { opacity: 1; max-height: 120px; /* altura controlada para evitar excesso de espaço */ margin-top: 8px; } } /* ======================================= SECÇÃO: Formulário de Contacto ========================================== */ .container-form-contacto { max-width: 1200px; margin: 0 auto; padding: 5px 15px; } .form-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; } .form-image-area { display: none; } .section-contacto h2 { font-size: 2rem; margin-bottom: 20px; color: #4CAF50; } .section-contacto { padding: 40px 20px; background-color: rgba(255,255,255,0.02); } .section-contacto h2 { text-align: center; } .formulario-contacto { width: 100%; max-width: 600px; } .formulario-contacto label { display: block; margin-bottom: 5px; font-weight: bold; } .formulario-contacto input, .formulario-contacto textarea { width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 2px solid #4CAF50; /* Borda verde igual ao botão */ background-color: #fff; color: #222; font-size: 1rem; transition: border-color 0.3s ease; } .formulario-contacto input:focus, .formulario-contacto textarea:focus { border-color: #388e3c; /* tom mais escuro no foco */ outline: none; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); } .formulario-contacto button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; } .formulario-contacto button:hover { background-color: #388e3c; } .form-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .form-bottom button { flex-shrink: 0; } #form-mensagem { font-size: 1.05rem; margin: 0; color: red; /* ou verde no JS */ text-align: right; flex-grow: 1; } .campo-form { position: relative; margin-bottom: 5px; } .campo-form i { position: absolute; top: 32%; left: 12px; transform: translateY(-45%); color: #4CAF50; font-size: 1.1rem; line-height: 1; pointer-events: none; } .campo-form input, .campo-form textarea { padding-left: 40px !important; /* espaço extra para ícone bem visível */ } body.light-mode .form-context-mobile { color: #222; font-weight: bold; } body.light-mode .formulario-contacto input, body.light-mode .formulario-contacto textarea { background-color: #f5f5f5; color: #222; } /* Texto extra visível só no mobile */ .form-context-mobile { font-size: 1rem; font-weight: bold; font-weight: 500; color: #ccc; text-align: center; margin-top: 10px; margin-bottom: 20px; padding: 0 10px; } /* ======================================= Footer — Footer tipo 1 ========================================== */ .site-footer { background-color: #1e1e1e; color: white; padding: 40px 20px 20px; font-size: 0.95rem; } .site-footer a { color: #4CAF50; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; max-width: 1200px; margin: 0 auto; } .footer-section { flex: 1; min-width: 250px; } .footer-section h4 { margin-bottom: 10px; font-size: 1.1rem; color: #4CAF50; } .footer-bottom { text-align: center; margin-top: 30px; border-top: 1px solid #333; padding-top: 10px; font-size: 0.85rem; color: #bbb; } /* ======================================= MEDIA QUERY — Estilo para telas pequenas (Mobile) ========================================== */ @media (max-width: 1100px) { .navbar { flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 20px; position: relative; height: 60px; /* Define altura da barra de navegação */ } .logo { display: block; font-size: 1.4rem; } .hamburger { display: block; z-index: 101; } .nav-links { position: fixed; top: 80px; left: -75vw; width: 75vw; background-color: rgba(30, 30, 30, 0.904); flex-direction: column; align-items: flex-start; padding: 20px; gap: 20px; transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 100; border-bottom-right-radius: 10px; height: auto; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; } .nav-links.active { left: 0; opacity: 1; pointer-events: auto; } .nav-links li { width: 100%; } .nav-links li a { font-size: 1.2rem; color: white; display: block; padding: 10px 0; } .lang-dropdown { position: absolute; top: 40px; right: 10px; } .nav-actions { z-index: 101; } body.light-mode .nav-links { background-color: rgba(240, 240, 240, 0.904); opacity: 0; pointer-events: none; transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out; } body.light-mode .nav-links.active { opacity: 1; pointer-events: auto; } body.light-mode .nav-links li a { color: #222; font-size: 1.2rem; /* Igual ao modo escuro */ } /* formatação para os serviços */ .slider-content { width: 100%; padding: 20px; box-sizing: border-box; border-radius: 0; } .servico-pane-inner { flex-direction: column; align-items: center; } .servico-pane-inner img { width: 100%; max-width: 320px; } .servico-pane-inner div { text-align: justify; } } /* ======================================= MEDIA QUERY — Estilo para telas grandes (Desktop) ========================================== */ @media (min-width: 1100px) { .navbar { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; } .nav-group { display: flex; align-items: center; gap: 30px; } .nav-links { display: flex !important; flex-direction: row; gap: 20px; background-color: transparent; width: auto; padding: 0; } .nav-links li { text-align: left; } .hamburger { display: none; /* Esconde botão mobile no desktop */ } .lang-button, .theme-toggle { display: block; } .logo { /* Centra o logotipo */ position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.6rem; font-weight: bold; color: inherit; display: block; } /* Nossa missão */ .missao-container { flex-direction: row; align-items: center; justify-content: flex-start; /* ✅ Evita separação entre os dois blocos */ gap: 4px; /* ou menos, como 16px, para controlar manualmente a distância */ } .missao-texto { text-align: left; padding-right: 0; /* ✅ Remove o espaço forçado */ margin-right: 0; } /* Formulário */ .form-wrapper { flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; /* Valor que pediste */ } .form-image-area { display: block; max-width: 300px; text-align: center; margin-top: 0; flex: 1; } .formulario-contacto { flex: 1; max-width: 600px; } .form-image { width: 100%; max-width: 250px; margin-bottom: 15px; } .form-context-text { font-size: 1.05rem; font-weight: bold; color: #ccc; line-height: 1.5; max-width: 250px; margin: 0 auto; text-align: center; } /* Esconde no desktop */ .form-context-mobile { display: none; font-weight: bold; } /* CSS dos serviços */ .servicos-container { flex-direction: row; } .servicos-menu { flex-direction: column; min-width: 260px; } .servico-pane-inner { flex-direction: column; align-items: center; text-align: center; } .servico-pane-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; flex-direction: row-reverse; /* 👈 Coloca a imagem à direita */ } } @media (hover:hover) { .vantagem-card:hover { box-shadow: 0 8px 20px var(--shadow); transform: translateY(-4px); } } /* ---------- Animação “reveal” ---------- */ @keyframes slide-up-fade { to { transform: translateY(0); opacity: 1; } } .vantagem-card.appear { animation: slide-up-fade .8s ease forwards; } @media (min-width: 1100px) and (max-width: 1760px) { .navbar .logo { display: none; } } /* ===================================================== CATALOGO — BLOCO COMPLETO (layout + alinhamento + mobile) (sobrepõe regras genéricas de `main section` nesta página) ===================================================== */ /* Fundo e estrutura do catálogo */ .catalogo-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px 20px 40px; /* Safe-area p/ dispositivos com notch */ padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); background: linear-gradient(55deg, #0f0f0f 0%, #1e1e1e 90%); } body.light-mode .catalogo-main { background: linear-gradient(55deg, #e8f5e9 0%, #f0f0f0 90%); } /* Neutraliza o estilo global "main section" dentro do catálogo */ .catalogo-main .catalogo-container, .catalogo-main .catalogo-section { width: 100%; /* em vez de 100vw do estilo global */ background: transparent; box-shadow: none; border-radius: 0; padding: 0; } /* Container centralizado */ .catalogo-container { max-width: 1100px; margin: 0 auto; padding: 0 15px; text-align: left; } .catalogo-container h1 { font-size: 2rem; margin-bottom: 10px; color: #4CAF50; } .catalogo-intro { opacity: .9; margin-top: 6px; } /* Secções e tabelas */ .catalogo-section { margin-top: 40px; } .catalogo-section-header h2 { font-size: 1.6rem; color: #4CAF50; margin-bottom: 12px; } .catalogo-table-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(76,175,80,.4); border-radius: 12px; overflow: hidden; /* em mobile abaixo trocamos para overflow-x:auto */ } body.light-mode .catalogo-table-wrap { background: rgba(255,255,255,0.95); border-color: #a5d6a7; } .catalogo-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; } .catalogo-table thead th { text-align: left; padding: 14px 16px; background: rgba(76,175,80,.12); border-bottom: 1px solid rgba(76,175,80,.35); position: sticky; top: 0; z-index: 1; } body.light-mode .catalogo-table thead th { background: rgba(76,175,80,.15); color: #1b1b1b; } .catalogo-table tbody td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } body.light-mode .catalogo-table tbody td { border-bottom: 1px solid #eee; color: #222; } .catalogo-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } body.light-mode .catalogo-table tbody tr:nth-child(even) { background: #fafafa; } .catalogo-table tbody tr:hover { background: rgba(76,175,80,.08); } body.light-mode .catalogo-table tbody tr:hover { background: rgba(76,175,80,.12); } /* Botões */ .btn-interesse { padding: 8px 12px; background: #4CAF50; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; transition: background .25s ease, color .25s ease, border-color .25s ease; display: inline-block; margin: 0 auto; } .btn-interesse:hover { background: #388e3c; } /* Estado selecionado (toggle on) */ .btn-interesse[aria-pressed="true"], .btn-interesse.active { background: transparent; color: #4CAF50; border: 2px solid #4CAF50; font-weight: 700; } .btn-interesse[aria-pressed="true"]:hover { background: rgba(76,175,80,.1); } /* Lista de Interesse */ .catalogo-section.interesse { margin-top: 60px; } .catalogo-section.interesse .catalogo-intro { margin-top: 6px; } /* === Ajustes Mobile === */ @media (max-width: 720px) { .catalogo-container { padding-left: 14px; padding-right: 14px; } .catalogo-container h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 12px; } .catalogo-section-header h2 { font-size: 1.35rem; margin: 10px 0 12px; } .catalogo-table-wrap { border-radius: 10px; padding-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .catalogo-table thead th, .catalogo-table tbody td { padding: 12px; } .catalogo-table { min-width: 560px; } /* scroll horizontal curto no mobile */ .btn-interesse { width: 100%; padding: 10px 12px; } } /* Scrollbar mais discreta apenas neste wrapper */ .catalogo-table-wrap::-webkit-scrollbar { height: 8px; } .catalogo-table-wrap::-webkit-scrollbar-thumb { background: rgba(76,175,80,.45); border-radius: 6px; } .catalogo-table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }