. Assim não precisa de wrapper no HTML. */ .site-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px max(24px, calc((100% - 1180px) / 2)); border-bottom: 1px solid rgba(20, 93, 160, 0.06); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Depois de sair do topo a barra ganha fundo para o conteúdo não passar por baixo dela ilegível (classe posta por js/ui.js). */ body.header-stuck .site-header { background-color: rgba(255, 255, 255, 0.97); border-bottom-color: var(--line); box-shadow: var(--shadow-md); } /* O desfoque fica só no desktop. No celular, backdrop-filter num elemento sticky faz o cabeçalho piscar, atrasar a rolagem e soltar do topo — é bug de composição conhecido de iOS e Android. Com o fundo quase opaco acima o resultado visual é praticamente o mesmo. */ @media (min-width: 821px) { body.header-stuck .site-header { background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .brand { display: inline-flex; align-items: center; gap: 12px; } /* Assinatura da marca: mesma fonte, peso e tracking da logo oficial (Montserrat Light, caixa-alta). O caixa-alta e o peso leve so funcionam com o espacamento largo — os tres andam juntos. O tracking sobra depois da ultima letra; a margem negativa devolve esse espaco para o texto nao parecer deslocado a esquerda. */ .brand-text, .footer-logo-text { font-family: 'Montserrat', sans-serif; font-weight: 300; letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; } .brand-text { font-size: 15px; line-height: 1.2; transition: color 0.3s ease; } .brand-text strong, .footer-logo-text strong { color: var(--blue-main); font-weight: 300; } .header-actions { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } .header-actions a:not(.client-button) { color: var(--muted); transition: var(--transition); position: relative; } .header-actions a:not(.client-button)::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: var(--blue-main); transform: scaleX(0); transform-origin: right; transition: transform 0.25s ease; } .header-actions a:not(.client-button):hover { color: var(--blue-main); } .header-actions a:not(.client-button):hover::after { transform: scaleX(1); transform-origin: left; } /* Botão Área do Cliente Premium */ .client-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-md); color: var(--white); font-weight: 600; background: var(--blue-main); box-shadow: var(--shadow-sm); transition: var(--transition); } .client-button:hover { background: var(--blue-bright); box-shadow: 0 4px 14px rgba(46, 143, 230, 0.3); transform: translateY(-2px); } /* Marca (ícone "S") ao lado do wordmark no cabeçalho */ .brand-mark { display: block; height: 40px; width: auto; transition: filter 0.3s ease; } /* Botão hambúrguer e fundo do menu: só entram em cena no mobile */ .nav-toggle { display: none; } .nav-backdrop { display: none; } @keyframes navBackdropIn { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------------------------- Seção Hero (Home) ------------------------------------------------------------- */ main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: auto; padding: 96px 0 80px; } .hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; } .eyebrow { margin: 0 0 16px; color: var(--blue-main); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .hero h1 { max-width: 960px; margin: 0 auto; font-size: clamp(34px, 4.8vw, 48px); line-height: 1.15; letter-spacing: -0.02em; } .hero-subtítulo { max-width: 780px; margin: 20px auto 0; color: var(--muted); font-size: 17px; line-height: 1.6; } .hero-ctas { display: flex; justify-content: center; gap: 16px; margin-top: 36px; width: 100%; } .cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: var(--radius-md); font-weight: 650; font-size: 15px; transition: var(--transition); border: none; cursor: pointer; font-family: inherit; } .cta-button.primary { background-color: var(--blue-main); color: var(--white); box-shadow: var(--shadow-sm); } .cta-button.primary:hover { background-color: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(46, 143, 230, 0.3); } .cta-button.secondary { background-color: transparent; color: var(--blue-main); border: 2px solid var(--blue-main); } .cta-button.secondary:hover { border-color: var(--blue-bright); color: var(--blue-bright); background-color: var(--blue-light); transform: translateY(-2px); } /* ------------------------------------------------------------- Unidades de negócio na hero da home Substituem os botões soltos: cada área ganha ícone, nome e a frase que resume a sua atuação. Vivem sobre a foto, por isso o vidro escuro (fundo translúcido + borda clara). ------------------------------------------------------------- */ .hero-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 880px; margin: 40px auto 0; } .hero-unit { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.22); background-color: rgba(11, 31, 58, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: left; transition: var(--transition); } .hero-unit-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md); background-color: rgba(255, 255, 255, 0.1); color: var(--blue-bright); } /* 24px dentro do quadro de 44px: os traços finos das janelas do prédio viram borrão se o ícone ficar menor que isso. */ .hero-unit-icon svg { width: 24px; height: 24px; } .hero-unit-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hero-unit-text strong { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600; color: var(--white); } .hero-unit-text span { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.76); } .hero-unit:hover { transform: translateY(-3px); border-color: rgba(46, 143, 230, 0.7); background-color: rgba(11, 31, 58, 0.68); } .hero-unit:hover .hero-unit-icon { background-color: var(--blue-main); color: var(--white); } /* Fora da hero com foto o card precisa de contraste no claro */ body:not(.hero-photo) .hero-unit { border-color: var(--line); background-color: var(--surface); box-shadow: var(--shadow-sm); } body:not(.hero-photo) .hero-unit-icon { background-color: var(--blue-light); color: var(--blue-main); } body:not(.hero-photo) .hero-unit-text strong { color: var(--ink); } body:not(.hero-photo) .hero-unit-text span { color: var(--muted); } @media (max-width: 700px) { .hero-units { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; } .hero-unit { padding: 16px 18px; } } /* ------------------------------------------------------------- Hero com imagem de fundo (páginas com body.hero-photo) A faixa .hero-bg fica atrás de todo o conteúdo (z-index -1), começa no topo do documento e vai até o fim da hero — por isso passa por trás do cabeçalho. A altura exata e o fade ao rolar são calculados em js/ui.js; os valores abaixo são o estado inicial / fallback. ------------------------------------------------------------- */ .hero-bg { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-bg-height, 100svh); z-index: -1; overflow: hidden; background-color: var(--blue-navy); pointer-events: none; } /* Quem some ao rolar é só a foto: o fundo azul continua firme, senão o texto branco da hero perderia contraste no meio da rolagem. */ .hero-bg img { position: absolute; top: 0; left: 0; width: 100%; /* Folga de altura para o deslocamento não descobrir a base da faixa. O valor certo depende do quanto a foto sobe e vem do js/ui.js. */ height: calc(100% + var(--hero-bg-slack, 160px)); object-fit: cover; object-position: 50% 62%; /* Dessatura e escurece um pouco: a foto vira textura, não protagonista */ filter: saturate(0.8) contrast(1.05) brightness(0.98); /* Ao rolar a foto sobe (--hero-bg-shift) e se aproxima (--hero-bg-zoom). A escala vem depois no encadeamento, então ela não multiplica o deslocamento: a foto sobe exatamente os pixels calculados. */ transform: translate3d(0, calc(var(--hero-bg-shift, 0px) * -1), 0) scale(var(--hero-bg-zoom, 1)); opacity: var(--hero-bg-fade, 1); will-change: transform, opacity; } /* O texto da hero sobe mais rápido que a foto e some antes dela — é o descompasso entre as duas camadas que faz a saída ser percebida. Os valores vêm do js/ui.js; sem ele os fallbacks deixam tudo parado e visível, então uma falha nunca esconde o conteúdo. */ .hero-photo .hero-copy { transform: translate3d(0, calc(var(--hero-copy-shift, 0px) * -1), 0); opacity: var(--hero-copy-fade, 1); will-change: transform, opacity; } .hero-photo .hero.hero-copy-gone .hero-copy { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero-photo .hero-copy { transform: none; opacity: 1; } .hero-photo .hero.hero-copy-gone .hero-copy { pointer-events: auto; } } /* Véu azul-marinho: é ele que garante contraste do texto sobre a foto. São três camadas: um miolo escuro logo atrás do texto, um degradê vertical que fecha topo e base, e um tom azul da marca por cima. */ .hero-bg-veil { position: absolute; inset: 0; background: radial-gradient( 82% 68% at 50% 54%, rgba(11, 31, 58, 0.6) 0%, rgba(11, 31, 58, 0.24) 58%, transparent 100% ), linear-gradient( 180deg, rgba(11, 31, 58, 0.88) 0%, rgba(11, 31, 58, 0.6) 36%, rgba(11, 31, 58, 0.56) 66%, rgba(11, 31, 58, 0.8) 100% ), radial-gradient( 120% 90% at 50% 40%, rgba(20, 93, 160, 0.34) 0%, rgba(11, 31, 58, 0.12) 60%, transparent 100% ); } /* Cabeçalho sobre a imagem: some a linha e clareia marca e menu */ .hero-photo .site-header { border-bottom-color: transparent; } .hero-photo .brand-text { color: var(--white); } .hero-photo .brand-text strong { color: var(--blue-bright); } /* Halo suave para o símbolo escuro não se perder no fundo azul */ .hero-photo .brand-mark { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 6px rgba(11, 31, 58, 0.45)); } /* Links do menu só invertem no desktop: no mobile eles vivem no drawer branco */ @media (min-width: 821px) { .hero-photo .header-actions a:not(.client-button) { color: rgba(255, 255, 255, 0.82); } .hero-photo .header-actions a:not(.client-button):hover { color: var(--white); } .hero-photo .header-actions a:not(.client-button)::after { background-color: var(--white); } /* Grudada, a barra fica clara: o menu volta ao tom escuro */ body.header-stuck.hero-photo .header-actions a:not(.client-button) { color: var(--muted); } body.header-stuck.hero-photo .header-actions a:not(.client-button):hover { color: var(--blue-main); } body.header-stuck.hero-photo .header-actions a:not(.client-button)::after { background-color: var(--blue-main); } } /* Idem para a marca: sai do branco sobre foto e volta ao azul da marca */ body.header-stuck.hero-photo .brand-text { color: var(--ink); } body.header-stuck.hero-photo .brand-text strong { color: var(--blue-main); } /* Sobre fundo claro o símbolo dispensa o halo */ body.header-stuck.hero-photo .brand-mark { filter: none; } /* Conteúdo da hero em versão clara. A hero ocupa a tela inteira menos o cabeçalho, para a foto encher a primeira dobra e a seção seguinte só aparecer ao rolar. */ /* svh, não dvh: no celular o dvh encolhe e cresce conforme a barra do navegador some ao rolar, e a hero (com a página inteira abaixo dela) pulava ~72px durante a rolagem. O svh é fixo na menor viewport, então a altura não muda mais no meio do scroll. */ .hero-photo .hero { position: relative; justify-content: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 72px 0 80px; } .hero-photo .hero .eyebrow { color: rgba(255, 255, 255, 0.72); } .hero-photo .hero h1 { color: var(--white); text-shadow: 0 2px 28px rgba(11, 31, 58, 0.45); } .hero-photo .hero-subtítulo { color: rgba(255, 255, 255, 0.85); } .hero-photo .hero .cta-button.primary { box-shadow: 0 10px 28px rgba(11, 31, 58, 0.35); } .hero-photo .hero .cta-button.secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.65); } .hero-photo .hero .cta-button.secondary:hover { background-color: rgba(255, 255, 255, 0.14); border-color: var(--white); color: var(--white); } /* Frase de impacto assentada na base da imagem da hero */ .hero-statement { position: relative; width: min(1180px, calc(100% - 48px)); margin: 8px auto 0; padding-left: 18px; border-left: 3px solid var(--green-health); text-align: left; font-family: 'Outfit', sans-serif; font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 20px rgba(11, 31, 58, 0.6); } @media (max-width: 700px) { .hero-statement { margin-top: 24px; padding-left: 14px; } } /* Quem pediu menos animação não recebe o deslocamento, só o fade */ @media (prefers-reduced-motion: reduce) { .hero-bg img { transform: none; will-change: auto; } } /* ------------------------------------------------------------- Seção Sobre o Grupo Salute ------------------------------------------------------------- */ .sobre-section { background-color: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sobre-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .sobre-content h2 { font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 12px; line-height: 1.2; } .sobre-content .sobre-tagline { margin: 0 0 24px; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600; color: var(--blue-main); } .sobre-content p { color: var(--muted); font-size: 16px; margin: 0 0 20px; } .sobre-quote { margin: 32px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--green-health); font-family: 'Outfit', sans-serif; font-size: 19px; font-style: italic; font-weight: 600; color: var(--blue-main); line-height: 1.45; } .mvv-container { display: flex; flex-direction: column; gap: 24px; } .mvv-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background-color: var(--soft-bg); } .mvv-card h3 { margin: 0 0 8px; font-size: 18px; } /* Linha de apoio do card, logo abaixo do título */ .mvv-card .mvv-tagline { margin: 0 0 14px; color: var(--blue-main); font-size: 14px; font-weight: 600; line-height: 1.5; } /* Lista de entregas dentro do card (ex.: Soluções em Engenharia) */ .mvv-lista { margin: 0; padding: 0; list-style: none; } .mvv-lista li { position: relative; padding-left: 18px; margin-bottom: 9px; color: var(--muted); font-size: 14px; line-height: 1.5; } .mvv-lista li:last-child { margin-bottom: 0; } .mvv-lista li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--green-health); } .mvv-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* ------------------------------------------------------------- Seção Valores Institucionais ------------------------------------------------------------- */ .valores-section { background-color: transparent; } .valores-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .valor-card { padding: 28px; background-color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column; } .valor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(46, 143, 230, 0.3); } .valor-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--blue-main); } .valor-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; } /* ------------------------------------------------------------- Seção Diferenciais ------------------------------------------------------------- */ .diferenciais-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .diferencial-card { padding: 32px; background-color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); } .diferencial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(46, 143, 230, 0.35); } .diferencial-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 24px; background-color: var(--blue-light); color: var(--blue-main); border-radius: var(--radius-md); } .diferencial-icon svg { width: 24px; height: 24px; } .diferencial-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; } .diferencial-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; } /* ------------------------------------------------------------- Grid de Frentes / Cards de Acesso ------------------------------------------------------------- */ .atracao-section { background-color: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .division-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .division-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 480px; padding: 44px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: var(--transition); } .card-header-top { margin-bottom: 28px; } .card-kicker { display: inline-block; margin-bottom: 16px; color: var(--blue-slate); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .division-card h2 { margin: 0; font-size: 26px; line-height: 1.2; } .division-card p { margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; } .card-list { margin: 16px 0 32px; padding: 0; list-style: none; } .card-list li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 14px; color: var(--muted); } .card-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--blue-bright); } /* Bloco final do card: convite curto + botão */ .card-footer { margin-top: 32px; } .card-cta-line { margin: 0 0 16px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.5; } .card-action { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; padding: 0 24px; border-radius: var(--radius-md); color: var(--blue-main); font-weight: 600; font-size: 15px; background: var(--blue-light); transition: var(--transition); } .division-card.engineering { background: linear-gradient(135deg, rgba(20, 93, 160, 0.015) 0%, transparent 60%), var(--white); } .division-card.administration { background: linear-gradient(135deg, rgba(37, 185, 154, 0.01) 0%, transparent 60%), var(--white); } .division-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .division-card.engineering:hover { border-color: rgba(20, 93, 160, 0.35); } .division-card.administration:hover { border-color: rgba(37, 185, 154, 0.35); } .division-card:hover .card-action { background: var(--blue-main); color: var(--white); box-shadow: 0 4px 12px rgba(20, 93, 160, 0.2); } /* ------------------------------------------------------------- Seção Metodologia ------------------------------------------------------------- */ .metodologia-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; position: relative; } /* Variante de 6 etapas (metodologia da Administração) */ .metodologia-flow.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; } .metodologia-flow::before { content: ''; position: absolute; top: 25px; left: 40px; right: 40px; height: 2px; background-color: var(--blue-light); z-index: 0; } .metodologia-step { position: relative; z-index: 1; } .step-num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 24px; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700; background-color: var(--white); color: var(--blue-main); border: 2px solid var(--blue-light); border-radius: 50%; box-shadow: var(--shadow-sm); transition: var(--transition); } .metodologia-step:hover .step-num { background-color: var(--blue-main); color: var(--white); border-color: var(--blue-main); transform: scale(1.08); } .metodologia-step h4 { margin: 0 0 8px; font-size: 18px; } .metodologia-step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } /* Seis colunas só cabem em telas largas: abaixo disso viram duas fileiras de três, e o traço que liga as etapas sai de cena. */ @media (min-width: 821px) and (max-width: 1100px) { .metodologia-flow.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .metodologia-flow.seis::before { display: none; } } /* Fecho de cada etapa: o ganho concreto que ela entrega */ .metodologia-step .step-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); } .metodologia-step .step-result span { color: var(--green-health); font-weight: 700; } /* ------------------------------------------------------------- Seção de Contato ------------------------------------------------------------- */ .contato-section { background-color: transparent; } .contato-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; } .form-group { display: flex; flex-direction: column; gap: 6px; text-align: left; } .form-group label { font-size: 13px; font-weight: 600; color: var(--blue-navy); } .form-group input, .form-group textarea { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background-color: var(--soft-bg); color: var(--ink); font-family: inherit; font-size: 14px; transition: var(--transition); width: 100%; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue-bright); background-color: var(--white); box-shadow: 0 0 0 3px rgba(46, 143, 230, 0.1); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-submit-wrapper { margin-top: 12px; } .email-button { width: 100%; } .form-status-message { margin-top: 16px; font-size: 14.5px; font-weight: 500; text-align: left; border-radius: var(--radius-md); transition: var(--transition); } .form-status-message.success { color: var(--green-health); background-color: rgba(37, 185, 154, 0.08); border: 1px solid rgba(37, 185, 154, 0.2); padding: 12px 16px; } .form-status-message.error { color: #d9534f; background-color: rgba(217, 83, 79, 0.08); border: 1px solid rgba(217, 83, 79, 0.2); padding: 12px 16px; } button.cta-button:disabled { opacity: 0.7; cursor: not-allowed; } /* ------------------------------------------------------------- Rodapé (Footer) ------------------------------------------------------------- */ .site-footer { background-color: var(--blue-navy); color: rgba(255, 255, 255, 0.65); padding: 80px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; } .footer-brand-section { max-width: 440px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } /* Fonte, peso e tracking vêm da regra da marca lá em cima; aqui só o tamanho e as cores sobre o fundo escuro do rodapé. */ .footer-logo-text { font-size: 17px; color: var(--white); } .footer-logo-text strong { color: var(--blue-bright); } .footer-tagline { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.55); } /* Instagram: mesma lógica de cor dos ícones da hero — quadro claro translúcido com o traço em azul da marca, invertendo no hover. Sem o roxo/gradiente do Instagram, que brigaria com a paleta. */ .footer-social { margin-top: 26px; } .footer-social-link { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 500; transition: var(--transition); } .footer-social-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--blue-bright); transition: var(--transition); } .footer-social-icon svg { width: 17px; height: 17px; } .footer-social-link:hover { border-color: rgba(46, 143, 230, 0.6); background-color: rgba(46, 143, 230, 0.12); color: var(--white); } .footer-social-link:hover .footer-social-icon { background-color: var(--blue-main); color: var(--white); } .footer-social-link:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; } .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .footer-column h4 { color: var(--white); font-size: 14px; margin: 0 0 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .footer-column a { display: block; color: rgba(255, 255, 255, 0.55); font-size: 14px; margin-bottom: 14px; transition: var(--transition); } .footer-column a:hover { color: var(--white); transform: translateX(3px); } .footer-bottom { width: min(1180px, calc(100% - 48px)); margin: 64px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.45); } /* ------------------------------------------------------------- Estilos específicos da Área do Cliente ------------------------------------------------------------- */ .text-center-hero { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 380px !important; } .text-center-hero .hero-center-content { max-width: 800px; margin: 0 auto; } .justify-center { justify-content: center; } .dev-badge { display: inline-block; padding: 6px 14px; background-color: var(--blue-light); color: var(--blue-main); border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 24px; } /* ------------------------------------------------------------- Responsividade (Mobile) ------------------------------------------------------------- */ @media (max-width: 820px) { .section { padding: 64px 0; } .section-header { margin-bottom: 40px; } /* Segue grudada no topo também aqui — só o respiro diminui */ .site-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(24px, calc((100% - 1180px) / 2)); } .brand { justify-content: flex-start; } .brand-mark { height: 34px; } /* Botão hambúrguer */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; z-index: 60; } .nav-toggle span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: var(--transition); } /* Hambúrguer vira "X" quando o menu está aberto */ body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu lateral (drawer) que desliza pela direita */ .header-actions { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(320px, 84vw); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 92px 22px 28px; background: var(--surface); box-shadow: -24px 0 60px rgba(11, 31, 58, 0.18); transform: translateX(100%); /* Fechado ele precisa sumir de verdade, não só sair de vista: parado a 315px da borda direita, o painel ainda era um objeto real na tela e o celular deixava arrastar a página de lado até ele. O visibility sai só depois da animação de fechar terminar. */ visibility: hidden; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s; overflow-y: auto; z-index: 55; } body.nav-open .header-actions { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .header-actions a:not(.client-button) { display: block; width: 100%; padding: 14px; border-radius: var(--radius-md); color: var(--ink); font-size: 16px; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .header-actions a:not(.client-button)::after { display: none; } .header-actions a:not(.client-button):hover { background: var(--soft-bg); color: var(--blue-main); } .client-button { width: 100%; margin-top: 12px; min-height: 50px; } /* Fundo escurecido atrás do menu */ body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 31, 58, 0.5); z-index: 50; animation: navBackdropIn 0.25s ease; } /* Rolar dentro do menu não arrasta a página atrás dele */ .header-actions { overscroll-behavior: contain; } .hero { padding: 48px 0; } /* Hero com imagem: enche a tela aqui também, só com respiro menor. Ver a nota sobre svh x dvh na regra equivalente do desktop. */ .hero-photo .hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 40px 0 48px; } .hero-bg { height: var(--hero-bg-height, calc(100svh - var(--header-h))); } /* No retrato o corte é vertical: sobe um pouco para pegar as colunas */ .hero-bg img { object-position: 50% 46%; } .hero h1 { font-size: 28px; line-height: 1.2; } .hero-subtítulo { font-size: 15.5px; } .hero-ctas { flex-direction: column; gap: 12px; } .cta-button { width: 100%; } .sobre-grid { grid-template-columns: 1fr; gap: 40px; } .sobre-content h2 { font-size: 24px; } .sobre-quote { font-size: 17px; margin-top: 24px; } .diferenciais-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .diferencial-card { padding: 24px; } .division-grid { grid-template-columns: 1fr; gap: 24px; } .division-card { min-height: auto; padding: 32px; } .division-card h2 { font-size: 22px; } .division-card p { font-size: 14.5px; } .card-action { width: 100%; margin-top: 24px; } .metodologia-flow, .metodologia-flow.seis { grid-template-columns: 1fr; gap: 24px; } .metodologia-flow::before { display: none; } /* Empilhado: número à esquerda, título ao lado e os textos abaixo dele */ .metodologia-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; row-gap: 8px; align-items: start; text-align: left; } .metodologia-step .step-num { grid-column: 1; grid-row: 1; margin-bottom: 0; width: 44px; height: 44px; font-size: 16px; } .metodologia-step h4 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; } .metodologia-step p { grid-column: 2; } .footer-container { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr; gap: 24px; } /* Cards de valores no tablet */ .valores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } /* Responsividade específica para Celulares (Mobile Pequeno) */ @media (max-width: 576px) { .section { padding: 48px 0; } .valores-grid { grid-template-columns: 1fr; gap: 16px; } .valor-card { padding: 20px; } .diferenciais-grid { grid-template-columns: 1fr; } /* Passos da metodologia empilhados no celular (evita 3 colunas espremidas) */ .metodologia-step { display: block; } .metodologia-step .step-num { margin-bottom: 14px; } .form-row { grid-template-columns: 1fr; gap: 16px; } } /* ------------------------------------------------------------- Áreas de Atuação (Salute Administração) Catálogo de serviços de consultoria. Cards no padrão do site (borda, sombra, hover) com título de acento sublinhado. ------------------------------------------------------------- */ .servicos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* Variante de 4 colunas (pilares do conceito da marca na home) */ .servicos-grid.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } .servico-card { padding: 28px; background-color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); } .servico-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(46, 143, 230, 0.35); } .servico-card h3 { position: relative; margin: 0 0 16px; padding-bottom: 14px; font-size: 18px; font-weight: 700; color: var(--blue-main); border-bottom: 1px solid var(--line); } .servico-card h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background-color: var(--green-health); } .servico-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; } @media (max-width: 820px) { .servicos-grid, .servicos-grid.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 576px) { .servicos-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- Formulário de contato (card único e centralizado) ------------------------------------------------------------- */ .contato-form-card { max-width: 660px; margin: 0 auto; padding: 40px; background-color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .contato-form-card .contato-form { margin-top: 0; } @media (max-width: 576px) { .contato-form-card { padding: 28px 22px; } } /* ------------------------------------------------------------- Portfólio de Projetos (rota /projetos) ------------------------------------------------------------- */ /* Também gruda no topo, mas logo abaixo da barra do cabeçalho — senão as duas disputam o mesmo lugar e o índice fica escondido. */ .projetos-indice-section { position: sticky; top: var(--header-h); z-index: 30; background-color: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; } /* Desfoque só no desktop, mesma razão do cabeçalho */ @media (min-width: 821px) { .projetos-indice-section { background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } .projetos-indice { display: flex; gap: 10px; overflow-x: auto; /* Mesma contenção dos carrosséis: o swipe não vaza para o navegador */ overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; } .projetos-indice a { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background-color: var(--white); color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: var(--transition); } .projetos-indice a:hover { border-color: var(--blue-bright); color: var(--blue-main); background-color: var(--blue-light); } .projeto-bloco.alt { background-color: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .projeto-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .projeto-head h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0; } .projeto-head .section-kicker { margin-bottom: 6px; } .projeto-desc { max-width: 78ch; margin: 0 0 32px; color: var(--muted); font-size: 15.5px; line-height: 1.7; } .projeto-desc strong { color: var(--ink); font-weight: 600; } .pranchas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .prancha { display: block; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--white); box-shadow: var(--shadow-sm); cursor: zoom-in; transition: var(--transition); overflow: hidden; } .prancha:hover { transform: translateY(-4px); border-color: rgba(46, 143, 230, 0.4); box-shadow: var(--shadow-lg); } .prancha img { display: block; width: 100%; height: 230px; object-fit: contain; border-radius: var(--radius-sm); background-color: #fbfcfe; } /* ----- Amostra do portfólio na página de Engenharia ----- */ .projetos-amostra-section { background-color: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pranchas-grid.amostra .prancha { position: relative; cursor: pointer; background-color: var(--soft-bg); } .prancha-tag { display: block; padding: 12px 6px 4px; color: var(--blue-main); font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-align: center; } /* Selos de capacidade técnica sob o portfólio: comunicam o tipo de trabalho entregue, no lugar de um quantitativo de arquivos. */ .selos-tecnicos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 36px 0 0; padding: 0; list-style: none; } .selos-tecnicos li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 14px; font-weight: 600; } .selos-tecnicos li::before { content: '✓'; color: var(--green-health); font-size: 14px; font-weight: 700; } .amostra-cta { margin-top: 36px; text-align: center; } .amostra-nota { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; } /* ----- Galeria de fotos (obras executadas) ----- */ .fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } /* Amostra na pagina de Engenharia: 4 fotos em linha */ .fotos-grid.amostra-fotos { grid-template-columns: repeat(4, 1fr); } .foto { display: block; padding: 0; border: none; border-radius: var(--radius-md); overflow: hidden; background-color: var(--soft-bg); box-shadow: var(--shadow-sm); cursor: zoom-in; aspect-ratio: 4 / 3; transition: var(--transition); } .foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .foto:hover { box-shadow: var(--shadow-md); } .foto:hover img { transform: scale(1.05); } @media (max-width: 820px) { .fotos-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .fotos-grid.amostra-fotos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .fotos-grid, .fotos-grid.amostra-fotos { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ----- Lightbox ----- */ .lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; background-color: rgba(11, 31, 58, 0.92); backdrop-filter: blur(4px); } .lightbox[hidden] { display: none; } .lb-conteudo { margin: 0; max-width: min(1500px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: 12px; } .lb-conteudo img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); background-color: var(--white); } .lb-conteudo figcaption { text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; } .lb-fechar { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: var(--white); font-size: 28px; line-height: 1; transition: var(--transition); } .lb-fechar:hover { background-color: var(--danger); } .lb-nav { flex: 0 0 auto; width: 50px; height: 50px; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: var(--white); font-size: 30px; line-height: 1; transition: var(--transition); } .lb-nav:hover { background-color: var(--blue-main); } @media (max-width: 820px) { .pranchas-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .prancha img { height: 190px; } } @media (max-width: 576px) { .pranchas-grid { grid-template-columns: 1fr; } .prancha img { height: 220px; } .lightbox { padding: 10px; gap: 4px; } .lb-nav { width: 40px; height: 40px; font-size: 24px; } .lb-conteudo img { max-height: 70vh; } } /* ------------------------------------------------------------- Conceito da Marca (home) ------------------------------------------------------------- */ .marca-claim { margin: -16px auto 24px; text-align: center; font-family: 'Outfit', sans-serif; font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); } /* As quatro frases do conceito: uma por linha, com marcador em traço */ .marca-evolucao { max-width: 620px; margin: 0 auto 28px; padding: 0; list-style: none; text-align: center; } .marca-evolucao li { margin-bottom: 10px; color: var(--muted); font-size: 16.5px; line-height: 1.6; } .marca-evolucao li strong { color: var(--blue-main); font-weight: 600; } .marca-intro { max-width: 82ch; margin: 0 auto 32px; text-align: center; color: var(--muted); font-size: 16.5px; line-height: 1.75; } .marca-acr { max-width: 760px; margin: 0 auto 44px; text-align: center; padding: 28px 24px; border-radius: var(--radius-lg); background-color: var(--blue-navy); background-image: radial-gradient(at 15% 20%, rgba(46, 143, 230, 0.28) 0, transparent 45%), radial-gradient(at 90% 90%, rgba(37, 185, 154, 0.22) 0, transparent 45%); box-shadow: var(--shadow-md); } /* Mesmo tratamento da logo: nome em caixa-alta leve sobre a linha de atributos, como na logo oficial */ .marca-acr b { display: block; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 300; color: var(--white); letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; } .marca-acr span { display: block; margin-top: 8px; color: var(--green-health); font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 576px) { .marca-acr b { font-size: 26px; } .marca-acr span { font-size: 13px; letter-spacing: 0.06em; } } /* ------------------------------------------------------------- Botão flutuante do WhatsApp (todas as rotas) ------------------------------------------------------------- */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background-color: #25d366; color: #ffffff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42); transition: var(--transition); } .whatsapp-float svg { width: 32px; height: 32px; } .whatsapp-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5); } @media (max-width: 576px) { .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; } .whatsapp-float svg { width: 29px; height: 29px; } } /* ------------------------------------------------------------- "Ver mais" (padroniza o tamanho do texto dos cards no mobile/tablet) ------------------------------------------------------------- */ .ver-mais { display: inline-block; margin-top: 8px; padding: 0; border: none; background: none; color: var(--blue-main); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; } .ver-mais:hover { text-decoration: underline; } @media (max-width: 820px) { .clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } } /* ------------------------------------------------------------- Carrossel deslizante no mobile (scroll-snap) para as grades de cards ------------------------------------------------------------- */ .snap-dots { display: none; } @media (max-width: 576px) { .valores-grid, .diferenciais-grid, .servicos-grid, .pranchas-grid, .fotos-grid.amostra-fotos { display: flex; flex-wrap: nowrap; grid-template-columns: none; overflow-x: auto; /* proximity, não mandatory: com mandatory o navegador é obrigado a parar num card, então qualquer mudança de tamanho no meio da rolagem puxa o carrossel de volta e ele briga com o dedo. */ scroll-snap-type: x proximity; /* Prende o swipe horizontal aqui dentro. Sem isso, ao chegar na ponta do carrossel o gesto vaza para a página e para o navegador, que interpreta como gesto de borda (voltar / puxar painel). */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; gap: 14px; padding: 2px 0 14px; scrollbar-width: none; } .valores-grid::-webkit-scrollbar, .diferenciais-grid::-webkit-scrollbar, .servicos-grid::-webkit-scrollbar, .pranchas-grid::-webkit-scrollbar, .fotos-grid.amostra-fotos::-webkit-scrollbar { display: none; } .valores-grid > *, .diferenciais-grid > *, .servicos-grid > *, .pranchas-grid > *, .fotos-grid.amostra-fotos > * { scroll-snap-align: start; flex: 0 0 85%; min-width: 85%; } .snap-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; } .snap-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background-color: var(--line); cursor: pointer; transition: var(--transition); } .snap-dots button.active { background-color: var(--blue-main); transform: scale(1.3); } } /* ------------------------------------------------------------- Entrada dos blocos ao rolar (js/ui.js aplica as classes) As classes so aparecem quando o JS roda e o visitante nao pediu menos movimento — sem isso, tudo continua visivel normalmente. ------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } /* Nas grades quem anima sao os cards, um apos o outro */ .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal-stagger.is-visible > * { opacity: 1; transform: none; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.21s; } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; } .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.35s; } .reveal-stagger.is-visible > *:nth-child(n + 7) { transition-delay: 0.42s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; } }