/* ============ Base ============ */ :root{ --primary: #1E40B6; /* azul TECHPAG */ --ink: #0B1020; /* texto escuro */ --muted: #6B7280; /* texto secundário */ --line: #E5E7EB; /* linhas / bordas */ --bg: #FFFFFF; /* fundo */ --bg-soft: #F6F8FC; /* seção suave */ --radius: 16px; --cta:#1b56ff; /* mesma cor do botão */ } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height:1.45; } /* Helpers */ .container{ width:min(1120px, 92%); margin-inline:auto; } .muted{ color: var(--muted); } .center{ text-align:center; } .title{ font-size: clamp(24px, 5vw, 36px); margin:0 0 18px; font-weight: 500; } .section{ padding: clamp(48px, 6vw, 88px) 0; } .section--soft{ background: var(--bg-soft); } .card{ background:#fff; border:1px solid #EEF0F5; border-radius: var(--radius); box-shadow: 0 12px 24px rgba(14,22,44,.06); padding:24px; } .grid{ display:grid; gap:22px; } .features{ grid-template-columns: repeat(4, 1fr); } .products{ grid-template-columns: repeat(3, 1fr); } .trust{ grid-template-columns: repeat(3, 1fr); } @media (max-width:980px){ .features{ grid-template-columns: 1fr 1fr; } .products{ grid-template-columns: 1fr; } .trust{ grid-template-columns: 1fr; } } /* ============ Header ============ */ .header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #EEF0F5; } .header .wrap{ display:flex; align-items:center; gap:18px; padding:12px 0; } .brand img{ height:34px; display:block; } .nav-desktop{ display:flex; gap:22px; margin-left:auto; } .nav-desktop a{ color:var(--ink); text-decoration:none; font-weight:600; } .actions-desktop{ display:flex; gap:10px; } .hamb{ display:none; margin-left:8px; width:40px; height:40px; border:1px solid #E5E7EB; background:#fff; border-radius:12px; } .hamb span{ display:block; width:18px; height:2px; background:var(--ink); margin:6px auto; border-radius:2px; } @media (max-width:980px){ .nav-desktop,.actions-desktop{ display:none; } .hamb{ display:inline-block; } } /* Drawer (mobile menu) */ .drawer[hidden]{ display:none; } .drawer .backdrop{ position:fixed; inset:0; background:rgba(7,13,30,.36); backdrop-filter: blur(2px); } .drawer .sheet{ position:fixed; top:0; right:0; width:min(320px, 86%); height:100dvh; background:#fff; padding:20px; box-shadow:-20px 0 40px rgba(9,15,35,.18); display:flex; flex-direction:column; gap:16px; } .drawer .close{ align-self:flex-end; font-size:28px; background:none; border:0; cursor:pointer; } .nav-mobile{ display:flex; flex-direction:column; gap:10px; } .nav-mobile a{ color:var(--ink); text-decoration:none; font-weight:600; } .drawer .stack{ display:flex; flex-direction:column; gap:10px; margin-top:auto; } /* ============ Botões (AZUL FIXO) ============ */ .btn{ --bg: var(--primary); background: var(--bg); color:#fff; border:1px solid var(--primary); border-radius:12px; padding:10px 18px; font-weight:500; text-decoration:none; display:inline-block; box-shadow: 0 6px 14px rgba(30,64,182,.18); transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease; cursor:pointer; } .btn--sm{ padding:8px 14px; font-weight:500; } .btn--lg{ padding:14px 22px; font-weight:500; } .btn:hover{ background:#1C3BB3; border-color:#1C3BB3; box-shadow: 0 10px 22px rgba(30,64,182,.25); transform: translateY(-1px); } .btn:focus{ outline:none; box-shadow:0 0 0 4px rgba(30,64,182,.22), 0 10px 22px rgba(30,64,182,.25); } .btn:visited, .btn:active{ color:#fff; } /* == GARANTE azul também para combinações comuns (áreas antigas) == */ .actions-desktop .btn, .product-card .btn, .cta-form .btn, .cta-form .btn-submit{ background:var(--primary); color:#fff; border-color:var(--primary); } /* ============ Hero ============ */ .hero{ background: radial-gradient(1200px 600px at 75% 40%, rgba(120,156,255,.20), transparent 55%), linear-gradient(90deg, #0E2A86 0%, #0F3AAA 60%, #1A48C9 100%); color:#fff; padding:70px 0 90px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap:40px; align-items:center; } .hero-copy h1{ font-size: clamp(34px, 6vw, 56px); margin:0 0 12px; } .hero-copy .muted{ color:#D5DBFF; } .rates{ display:flex; flex-wrap:wrap; gap:14px; margin:22px 0; } .rate{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); border-radius:14px; padding:12px 18px; text-align:center; min-width:120px; } .rate strong{ display:block; font-size:20px; } .rate span{ font-size:12px; color:#E8EDFF; } /* container do visual à direita */ .hero-card{ width: min(520px, 42vw); aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; position: relative; /* opcional: sombra bem leve */ box-shadow: 0 20px 60px rgba(0,0,0,.18); background: transparent; /* sem “placa” atrás */ } /* a imagem transparente */ .hero-card .hero-img{ width: 100%; height: 100%; display: block; object-fit: contain; /* mostra TUDO sem cortar */ object-position: center; background: transparent; border: 0; } /* esconder no mobile/tablet */ @media (max-width: 768px){ .hero-card{ display: none; } } /* ============ Features ============ */ .feature .icon{ width:48px; height:48px; border-radius:12px; background:#EEF3FF; border:1px solid #D8E2FF; margin-bottom:12px; } .feature h3{ margin:6px 0 6px; } /* ============ Tabs ============ */ .tabs{ display:flex; gap:10px; margin:10px 0 16px; flex-wrap:wrap; } .tab{ background:#fff; border:1px solid #DFE4EF; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; } .tab.is-active{ color:var(--primary); border-color:var(--primary); background:#F2F6FF; } /* panels */ .panels .panel{ display:none; } .panels .panel.is-active{ display:block; } .panel-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; } .panel-visual{ height:200px; border:1px solid #D7E3FF; background:#F5F8FF; border-radius:14px; } @media (max-width:980px){ .panel-grid{ grid-template-columns:1fr; } } /* ============ Products ============ */ .product .price{ font-size:24px; font-weight:800; margin:8px 0; } .product .price small{ font-size:12px; font-weight:700; margin-right:6px; color:var(--muted); } .product ul{ padding-left:18px; margin:10px 0 18px; } .badge{ background: var(--primary); color:#fff; border:1px solid var(--primary); display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; margin-bottom:8px; } /* ============ Trust ============ */ .kpi{ text-align:center; padding:26px; } .kpi-num{ font-size:36px; font-weight:800; } /* ============ CTA Form ============ */ .cta-card{ padding:28px; } .cta-form{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:10px; } .cta-form input, .cta-form select{ width:100%; padding:14px 16px; border:1px solid #D7DBE7; border-radius:12px; font: inherit; background:#fff; } .cta-form input:focus, .cta-form select:focus{ outline:none; border-color: var(--primary); box-shadow:0 0 0 4px rgba(30,64,182,.15); } .cta-form .btn{ grid-column: 1 / -1; justify-self:center; margin-top:2px; } @media (max-width:720px){ .cta-form{ grid-template-columns: 1fr; } } /* ============ Footer ============ */ .footer{ background:#F5F7FB; border-top:1px solid #E9ECF4; margin-top:40px; } .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:22px; padding:30px 0; } .footer-logo{ height:32px; margin-bottom:12px; } .footer h4{ margin:0 0 10px; } .footer a{ color:var(--ink); text-decoration:none; } .footer a:hover{ color:var(--primary); } .copy{ border-top:1px solid #E9ECF4; padding:14px 0; text-align:center; color:#7A8194; font-size:14px; } @media (max-width:980px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:640px){ .footer-grid{ grid-template-columns: 1fr; } } /* REMOVER NEGRITO DOS BOTÕES */ button, .btn, .button, a.btn, .btn-primary, .btn-secondary, .header .btn, .navbar .btn, .header-actions .btn { font-weight: 500 !important; /* use 400 se quiser ainda mais “leve” */ } /* REMOVER NEGRITO DOS BOTÕES (força leve) */ button, .btn, .btn--sm, .btn--lg, .button, a.btn, .btn-primary, .btn-secondary, .header .btn, .navbar .btn, .header-actions .btn { font-weight: 500 !important; /* use 400 se quiser ainda mais leve */ } /* ===== Ajustes de HERO no mobile (sem mexer no desktop) ===== */ @media (max-width: 640px){ /* Remove o card decorativo azul com borda */ .hero-card{ display: none !important; } /* Enxuga o respiro do hero no mobile */ .hero{ padding: 40px 0 56px; } /* Aproxima os elementos */ .hero-grid{ gap: 20px; } /* Centraliza o texto do hero */ .hero-copy{ text-align: center; } /* Título mais contido e bem ajustado */ .hero-copy h1{ font-size: clamp(28px, 8vw, 36px); line-height: 1.12; margin: 0 0 10px; } /* Subtítulo centralizado e com largura confortável */ .hero-copy .muted{ max-width: 30ch; margin: 0 auto; } /* Quadrinhos das taxas: centralizados e 2 por linha */ .rates{ justify-content: center; gap: 12px 14px; /* linha x coluna */ } .rate{ flex: 0 1 calc(50% - 10px); /* 2 por linha */ min-width: 150px; /* evita ficar pequeno demais */ } /* Botão CTA centralizado */ .hero-copy .btn{ display: inline-block; margin: 6px auto 0; } } /* ===== Menu à direita no mobile ===== */ @media (max-width: 980px){ .header .wrap{ justify-content: space-between; /* empurra extremos: logo à esquerda, menu à direita */ } .hamb{ margin-left: auto !important; /* garante que vá para a ponta direita */ margin-right: 0 !important; } } /* ===== HERO visual (lado direito) ===== */ .hero-grid{ display:grid; grid-template-columns: 1fr auto; gap: 48px; align-items:center; } /* “card” do herói com o mesmo tamanho/estilo da sua 3ª imagem */ .hero-card{ /* largura responsiva: não fica gigante nem pequeno */ width: clamp(460px, 40vw, 640px); aspect-ratio: 16 / 10; border-radius: 24px; padding: 28px; /* respiro interno p/ a imagem não colar nas bordas */ position: relative; overflow: hidden; /* fundo/efeito igual ao que você tinha */ background: radial-gradient(60% 60% at 55% 45%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%); box-shadow: 0 22px 60px rgba(0,0,0,.22); } /* filete arredondado como moldura (igual ao print 3) */ .hero-card::after{ content:""; position:absolute; inset:0; border-radius: inherit; outline: 1.5px solid rgba(255,255,255,.28); outline-offset: -1px; pointer-events:none; } /* a PNG transparente – ocupa o “card” sem cortar */ .hero-card .hero-img{ width: 100%; height: 100%; object-fit: contain; /* mostra as 4 maquininhas inteiras */ object-position: center; display:block; background: transparent; border:0; } /* esconder no mobile/tablet */ @media (max-width: 768px){ .hero-grid{ grid-template-columns: 1fr; } .hero-card{ display:none; } } /* ajuste fino em telas muito largas (deixa um pouco maior, com limite) */ @media (min-width: 1440px){ .hero-card{ width: clamp(560px, 36vw, 720px); } } /* =========================== HERO – layout e responsividade =========================== */ .hero-grid{ display:grid; grid-template-columns: 1fr auto; /* texto à esquerda, imagem à direita */ gap: 48px; align-items:center; } /* container visual à direita (card arredondado) */ .hero-card{ width: clamp(460px, 40vw, 640px); /* escala bem entre notebook e monitor */ aspect-ratio: 16 / 10; border-radius: 24px; padding: 28px; /* respiro interno */ position: relative; overflow: hidden; /* leve glow de fundo como no seu mock bonito */ background: radial-gradient(60% 60% at 55% 45%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%); box-shadow: 0 22px 60px rgba(0,0,0,.22); } /* moldura fina arredondada */ .hero-card::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; outline: 1.5px solid rgba(255,255,255,.28); outline-offset: -1px; pointer-events: none; } /* a PNG transparente – sem corte e centralizada */ .hero-card .hero-img{ width: 100%; height: 100%; display: block; object-fit: contain; /* mostra todas as maquininhas inteiras */ object-position: center; background: transparent; border: 0; } /* ====== Mobile/Tablet: esconder a imagem e usar 1 coluna ====== */ @media (max-width: 768px){ .hero-grid{ grid-template-columns: 1fr; /* só texto */ gap: 28px; } .hero-card{ display: none; /* não aparece no mobile */ } } /* Telas bem largas: um pouco maior, com limite */ @media (min-width: 1440px){ .hero-card{ width: clamp(560px, 36vw, 720px); } } /* ===== HERO – ajuste fino ===== */ /* layout base: um pouco mais de respiro entre texto e imagem */ .hero-grid{ display:grid; grid-template-columns: 1fr auto; gap: 56px; /* antes 48px */ align-items:center; } /* card visual maior e com menos padding p/ a imagem crescer */ .hero-card{ width: clamp(560px, 46vw, 760px); /* antes clamp(460px,40vw,640px) */ aspect-ratio: 16 / 10; border-radius: 24px; padding: 20px; /* antes 28px */ position: relative; overflow: hidden; background: radial-gradient(60% 60% at 55% 45%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); box-shadow: 0 20px 60px rgba(0,0,0,.18); } .hero-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; outline:1.5px solid rgba(255,255,255,.24); /* filete um pouco mais suave */ outline-offset:-1px; pointer-events:none; } /* imagem: mais presença, sem cortar, levemente deslocada à direita */ .hero-card .hero-img{ width:100%; height:100%; display:block; object-fit:contain; object-position: 58% center; /* puxa um pouco à direita */ transform: scale(1.12); /* leve zoom */ transform-origin:center; background:transparent; border:0; } /* notebooks mais comuns: microajuste */ @media (min-width: 1200px) and (max-width: 1439px){ .hero-card{ width: clamp(540px, 44vw, 700px); padding: 18px; } .hero-card .hero-img{ transform: scale(1.10); object-position: 56% center; } } /* 1440p: ainda maior, sem exagero */ @media (min-width: 1440px) and (max-width: 1679px){ .hero-grid{ gap: 64px; } .hero-card{ width: clamp(620px, 42vw, 820px); } .hero-card .hero-img{ transform: scale(1.14); object-position: 60% center; } } /* ultrawide: controla para não estourar */ @media (min-width: 1680px){ .hero-grid{ gap: 72px; } .hero-card{ width: clamp(700px, 40vw, 900px); } .hero-card .hero-img{ transform: scale(1.16); object-position: 60% center; } } /* mobile: continua sem imagem */ @media (max-width: 768px){ .hero-grid{ grid-template-columns:1fr; gap:28px; } .hero-card{ display:none; } } /* remover a borda do card do herói */ .hero-card::after{ content: none !important; /* apaga o pseudo-elemento */ } /* garantia extra: nenhum contorno/borda residual */ .hero-card, .hero-card .hero-img{ border: 0 !important; outline: 0 !important; box-shadow: none; /* tire esta linha se quiser manter a sombra */ } .panel-grid{ display:grid; grid-template-columns: 1fr auto; gap: 40px; align-items:center; } .panel-visual{ width: clamp(420px, 42vw, 560px); /* controla o tamanho visível */ aspect-ratio: 16 / 9; border-radius: 20px; padding: 16px; background: rgba(255,255,255,.08); box-shadow: 0 12px 40px rgba(0,0,0,.12); overflow: hidden; position: relative; } .panel-visual img{ width: 100%; height: 100%; display: block; object-fit: contain; /* mostra tudo sem cortar */ object-position: center; background: transparent; border: 0; } @media (max-width: 768px){ .panel-grid{ grid-template-columns: 1fr; } .panel-visual{ display:none; } /* some no mobile */ } /* ====== SOLUÇÕES – visual do painel (AJUSTE FINO) ====== */ /* layout da grid continua igual */ .panel-grid{ display:grid; grid-template-columns: 1fr auto; gap: 40px; align-items:center; } /* tira fundo, borda e padding do “cartão”; aumenta o tamanho */ .panel-visual{ width: clamp(560px, 48vw, 780px); /* maior e responsivo */ aspect-ratio: 16 / 9; border-radius: 20px; padding: 0; /* sem respiro interno */ background: transparent; /* sem “placa” clara */ box-shadow: none; /* sem sombra aqui */ outline: none; border: 0; overflow: hidden; /* pra borda arredondada cortar a imagem */ position: relative; } /* imagem ocupa tudo e fica bonita */ .panel-visual img{ width: 100%; height: 100%; display: block; object-fit: cover; /* cobre o quadro, sem sobras */ object-position: center; /* centraliza o recorte */ border: 0; } /* mobile: esconde o visual e vira 1 coluna */ @media (max-width: 768px){ .panel-grid{ grid-template-columns: 1fr; } .panel-visual{ display:none; } } .muted span { display: block; } .muted { width: 250px; /* ajuste conforme o layout */ word-wrap: break-word; }/* Logo (PNG) */ .logoImg{ height: 36px; /* tamanho visual no desktop */ width: auto; /* mantém proporção */ display: block; } @media (max-width: 600px){ .logoImg{ height: 32px; } /* um pouco menor no mobile */ } /* Se a sua PNG não for branca, opcionalmente force branco via filtro: .logoImg { filter: brightness(0) invert(1); } */ .logoImg{ height: 22px; /* ajuste fino do tamanho no desktop */ width: auto; display: block; } .headerBrand{ display:flex; align-items:center; gap:10px; } @media (max-width: 600px){ .logoImg{ height: 20px; } /* ligeiro ajuste no mobile */ } .siteFooter{ width:100%; display:flex; flex-direction: column; /* frase em cima, direitos embaixo */ align-items:center; justify-content:center; text-align:center; gap:6px; color:#9fb0d9; padding:12px 16px 24px; } .siteFooter b{ color:#eaf0ff; } .legalLine{ font-size:11px; line-height:1.35; max-width:960px; /* evita linhas muito compridas */ padding:0 8px; } .copyLine{ white-space:nowrap; /* mantém em uma linha no desktop */ font-size:12px; } /* Mobile: tipografia ligeiramente menor */ @media (max-width:480px){ .legalLine{ font-size:10.5px; } .copyLine{ font-size:11px; } } .tp-footer{ background:#f6f7fb; /* igual ao print (cinza claro) */ color:#475066; border-top:1px solid #e7e9f0; } .tp-footer__inner{ max-width:1120px; /* centraliza e limita largura */ margin:0 auto; padding:40px 16px 28px; display:grid; grid-template-columns: 1fr; gap:28px; } .tp-footer__brand{ display:flex; gap:16px; align-items:flex-start; } .tp-logo{ height:26px; width:auto; display:block; } .tp-tagline{ margin:6px 0 0; font-size:14px; color:#6b7590; line-height:1.45; } .tp-footer__cols{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; } .tp-footer__cols h4{ margin:0 0 10px; font-size:14px; font-weight:700; color:#2b3348; } .tp-footer__cols ul{ list-style:none; margin:0; padding:0; } .tp-footer__cols li{ margin:8px 0; } .tp-footer__cols a{ color:#5c6787; text-decoration:none; } .tp-footer__cols a:hover{ color:#2f6df6; } .tp-legal{ border-top:1px solid #e7e9f0; padding-top:12px; font-size:12px; color:#7380a0; text-align:center; } .tp-copy{ display:flex; justify-content:center; align-items:center; gap:6px; font-size:12px; color:#5c6787; white-space:nowrap; /* fica em uma linha no desktop */ } .tp-copy b{ color:#2b3348; } .tp-copy .dot{ opacity:.6; } /* ===== Mobile ===== */ @media (max-width: 768px){ .tp-footer__inner{ gap:24px; padding:32px 16px 24px; } .tp-footer__brand{ flex-direction:column; align-items:flex-start; } .tp-footer__cols{ grid-template-columns: 1fr 1fr; } /* 2 colunas */ } @media (max-width: 520px){ .tp-footer__cols{ grid-template-columns: 1fr; } /* 1 coluna */ .tp-copy{ white-space:normal; /* permite quebrar se precisar */ text-align:center; line-height:1.35; } } .tp-legal{ font-size:12px; color:#7380a0; text-align:center; border-top:1px solid #e7e9f0; padding-top:12px; margin-top:8px; } .tp-accept{ font-size:12px; color:#5c6787; text-align:center; margin-top:6px; } .tp-accept .tp-link{ color:#2f6df6; text-decoration:none; } .tp-accept .tp-link:hover{ text-decoration:underline; } @media (max-width:520px){ .tp-legal,.tp-accept{ font-size:11px; padding:0 10px; } } /* ===== Rodapé TECHPAG ===== */ .siteFooter { background: #0b1630; color: #eaf0ff; padding: 60px 20px 30px; font-family: Inter, Arial, sans-serif; } .footer-wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; } .footer-brand { flex: 1 1 280px; min-width: 260px; } .footer-logo { width: 140px; height: auto; margin-bottom: 12px; } .footer-desc { color: #9fb0d9; font-size: 14px; line-height: 1.6; } .footer-cols { display: flex; flex-wrap: wrap; gap: 40px; flex: 2 1 600px; } .footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; color: #ffffff; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin: 6px 0; } .footer-col ul li a { color: #9fb0d9; text-decoration: none; font-size: 14px; transition: color 0.2s ease; } .footer-col ul li a:hover { color: #ffffff; } .footer-bottom { text-align: center; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; color: #9fb0d9; font-size: 12px; line-height: 1.5; } .footer-bottom b { color: #ffffff; } /* Versão mobile */ @media (max-width: 768px) { .footer-wrap { flex-direction: column; align-items: center; text-align: center; } .footer-cols { justify-content: center; } } /* ===== FOOTER – VARIAÇÃO BRAND (fundo azul, logo branco) ===== */ :root{ /* ajuste este valor para o azul exato do seu logotipo */ --tp-blue: #0d2ef0; /* exemplo; troque se precisar */ --tp-blue-ink: #cfe3ff; /* textos suaves sobre o azul */ --tp-blue-ink-strong:#ffffff; /* títulos e logo */ --tp-blue-ink-dim:#a9c3ff; /* textos mais apagados */ --tp-divider: rgba(255,255,255,.14); } .tp-footer--brand{ background: var(--tp-blue); color: var(--tp-blue-ink); } .tp-footer__inner{ max-width: 1120px; margin: 0 auto; padding: 44px 16px 28px; display: grid; gap: 28px; } .tp-footer__top{ display: grid; grid-template-columns: 1.2fr 2fr; /* brand | colunas */ gap: 28px; align-items: start; } .tp-footer__brand{ display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .tp-logo{ height: 28px; width: auto; display: block; } .tp-tagline{ margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--tp-blue-ink-dim); } .tp-footer__cols{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 28px; } .tp-footer__cols h4{ margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-blue-ink-strong); } .tp-footer__cols ul{ list-style: none; margin: 0; padding: 0; } .tp-footer__cols li{ margin: 8px 0; } .tp-footer__cols a{ color: var(--tp-blue-ink); text-decoration: none; opacity: .9; } .tp-footer__cols a:hover{ opacity: 1; text-decoration: underline; } /* bloco legal/comercial */ .tp-legalBlock{ border-top: 1px solid var(--tp-divider); padding-top: 14px; display: grid; gap: 6px; text-align: center; } .tp-legal{ font-size: 12px; color: var(--tp-blue-ink); opacity: .95; } .tp-accept{ font-size: 12px; color: var(--tp-blue-ink); opacity: .95; } .tp-link{ color: var(--tp-blue-ink-strong); text-decoration: underline; } .tp-link:hover{ text-decoration: none; } /* copyright */ .tp-copy{ display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--tp-blue-ink); white-space: nowrap; /* 1 linha no desktop */ } .tp-copy b{ color: var(--tp-blue-ink-strong); } .tp-copy .dot{ opacity:.7; } /* ===== RESPONSIVO ===== */ @media (max-width: 980px){ .tp-footer__top{ grid-template-columns: 1fr; /* empilha no tablet */ } .tp-footer__brand{ grid-template-columns: auto 1fr; } } @media (max-width: 640px){ .tp-footer__cols{ grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .tp-footer__cols{ grid-template-columns: 1fr; } .tp-copy{ white-space: normal; /* permite quebrar se faltar espaço */ text-align: center; line-height: 1.35; } .tp-footer__inner{ padding: 36px 16px 22px; } .tp-logo{ height: 24px; } } /* === Alinhar logo com os títulos das colunas (desktop) === */ .siteFooter .footer-grid{ align-items: start; } /* topo alinhado entre colunas */ .siteFooter .footer-col{ display:flex; flex-direction:column; justify-content:flex-start; } .siteFooter .footer-brand{ display:flex; flex-direction:column; } .siteFooter .footer-logo{ margin-top: -6px; /* “empurra” o logo levemente pra cima p/ bater com os H4 */ align-self: flex-start; } /* No mobile remove o ajuste (evita desalinho quando empilha) */ @media (max-width: 560px){ .siteFooter .footer-logo{ margin-top: 0; } } :root{ --cta:#1b56ff; } /* mesmo azul do botão */ .siteFooter{ background:linear-gradient(180deg,var(--cta) 0%,#1244c9 100%); color:#eaf0ff; padding:48px 0 24px; margin-top:8px; } .footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:32px; align-items:start; } .footer-brand{min-width:260px; max-width:320px} .footer-logo{width:140px; height:auto; margin-top:-4px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))} .footer-desc{margin:8px 0 0; color:#e7eeff; line-height:1.55; font-size:14px} .footer-col h4{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; color:#fff; } .footer-col ul{list-style:none; margin:0; padding:0} .footer-col li{margin:6px 0} .footer-col a{color:#f0f5ff; opacity:.9; text-decoration:none} .footer-col a:hover{opacity:1; text-decoration:underline} .footer-bottom{ max-width:980px; margin:28px auto 0; text-align:center; border-top:1px solid rgba(255,255,255,.18); padding-top:18px; color:#f0f6ff; } .footer-bottom p{margin:6px 0; line-height:1.5} .footer-bottom .copy{opacity:.9} .footer-bottom b{color:#fff} /* Responsivo */ @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .siteFooter{ padding:32px 0 18px; } .footer-grid{ grid-template-columns:1fr; text-align:center; row-gap:18px; } .footer-brand{ align-items:center; margin:0 auto; } .footer-logo{ margin-top:0; } .footer-col li{ margin:4px 0; } } /* ===== Rodapé TECHPAG — igual ao Hero + ajustes finos ===== */ .siteFooter{ background: radial-gradient(1200px 600px at 75% 40%, rgba(120,156,255,.20), transparent 55%), linear-gradient(90deg, #0E2A86 0%, #0F3AAA 60%, #1A48C9 100%); color:#eaf0ff; padding: 40px 0 20px; /* ↓ encurta o respiro superior/inferior */ margin-top: 8px; } .footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; /* 4 colunas */ gap:32px; align-items:start; /* títulos das colunas alinhados no topo */ } /* COLUNA 1: logo + frase centralizados */ .footer-brand{ min-width:260px; max-width:320px; display:flex; flex-direction:column; align-items:center; text-align:center; margin-left:auto; margin-right:auto; /* mantém centralizado no grid */ } .footer-logo{ width:140px; height:auto; margin-top:-2px; } .footer-desc{ margin:10px 0 0; color:#f1f6ff; font-size:14px; line-height:1.55; max-width:26ch; /* força 2 linhas bonitas */ text-wrap: balance; /* browsers modernos equilibram a quebra */ } /* Colunas 2–4 */ .footer-col h4{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; color:#ffffff; } .footer-col ul{margin:0;padding:0;list-style:none} .footer-col li{margin:6px 0} .footer-col a{color:#f0f5ff;opacity:.92;text-decoration:none} .footer-col a:hover{opacity:1;text-decoration:underline} /* Bloco inferior (linhas + textos) mais “alto” e harmônico */ .footer-bottom{ max-width: 980px; margin: 22px auto 0; /* ↑ “sobe” as linhas */ text-align:center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); color:#eaf0ff; } .footer-bottom p{ margin:6px 0; line-height:1.55; opacity:.95; } .footer-bottom b{ color:#fff } /* Responsivo */ @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .siteFooter{ padding: 30px 0 18px; } .footer-grid{ grid-template-columns:1fr; row-gap:18px; text-align:center; } .footer-col li{ margin:4px 0; } } /* centraliza logo + texto da coluna 1 e permite "puxar" o logo à direita */ :root{ --logo-nudge: 8px; } /* ajuste fino visual: 0–14px costuma resolver */ .siteFooter .footer-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-left:auto; margin-right:auto; } .siteFooter .footer-logo{ display:block; width:140px; height:auto; margin:0 auto 8px; /* garante centralização real */ transform: translateX(var(--logo-nudge)); /* puxa um pouco p/ direita */ } /* se quiser zerar o empurrão no mobile */ @media (max-width:560px){ .siteFooter .footer-logo{ transform:none; } } /* ===== LEGAL PAGES — header elegante, tipografia e respiro ===== */ .legal-hero { padding: clamp(32px, 5vw, 56px) 0 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); /* modo claro */ } @media (prefers-color-scheme: dark) { .legal-hero { border-bottom-color: rgba(234, 240, 255, 0.08); } } .legal-eyebrow { font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 10px; } .legal-title { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 8px; } .legal-meta { color: var(--muted, #9fb0d9); font-size: .95rem; margin: 0 0 6px; } .legal-subline { color: var(--muted, #6b7280); margin: 6px 0 22px; max-width: 60ch; } /* largura confortável para texto */ .legal-body { padding: 26px 0 64px; } .legal-body .container-narrow { max-width: 900px; /* harmonia com seu layout */ margin: 0 auto; } /* títulos de seção numerados e alinhados */ .legal-body h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 28px 0 8px; display: flex; align-items: baseline; gap: 10px; } .legal-body h2 .sec { font-weight: 800; color: #2f6df6; min-width: 28px; text-align: right; } /* listas com respiro */ .legal-body ul { margin: 10px 0 18px 1.1em; } .legal-body li { margin: 6px 0; } /* índice (opcional) com âncoras */ .legal-toc { margin: 14px 0 24px; padding: 12px 14px; border-radius: 12px; background: rgba(47,109,246,.06); } .legal-toc a { display: inline-block; margin: 6px 12px 0 0; font-size: .95rem; opacity: .9; } .legal-toc a:hover { text-decoration: underline; } /* linha divisória sutil entre blocos longos */ .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); margin: 22px 0; } @media (prefers-color-scheme: dark) { .divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); } } /* breadcrumb/back link discreto */ .legal-back { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: inherit; opacity: .8; } .legal-back:hover { opacity: 1; text-decoration: underline; } /* ===== Ajustes página SOBRE ===== */ /* Título menor e mais elegante */ .about-title{ font-size: clamp(24px, 3.6vw, 36px) !important; line-height: 1.1; letter-spacing: -0.01em; } /* Menos “altura” no hero institucional */ .about-hero{ padding: clamp(28px, 5vw, 56px) 0 !important; } /* Nota dos KPIs numa linha, elegante e responsiva */ .kpi-note{ margin-top: 6px; font-size: .92rem; color: var(--tp-muted, #6b7280); display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; /* tenta manter em uma linha */ } @media (max-width: 480px){ .kpi-note{ white-space: normal; } /* no mobile, deixa quebrar se precisar */ } /* Cartão “Quem somos” com leitura confortável */ #quem-somos .card p{ margin: 6px 0; } /* TechPag – Faixa de Bandeiras (sem JS) */ /* Container/texto */ .tp-brands{ padding:24px 0 8px; background:#fff; } .tp-brands__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; } .tp-brands__title{ margin:0 0 12px; font-size:16px; line-height:1.4; color:#111; text-align:left; } .tp-brands__title span{ color:#6E4FFD; } /* ajuste se quiser outra cor */ /* Área de rolagem com fade nas bordas */ .tp-marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } /* Trilhos duplicados para loop perfeito */ .tp-marquee__track{ display:inline-flex; align-items:center; gap:28px; /* espaço entre logos */ padding:8px 0; animation: tp-scroll var(--tp-speed, 22s) linear infinite; /* velocidade média */ will-change: transform; } /* Logos (usar PNGs transparentes) */ .tp-logo{ height:28px; /* mobile */ width:auto; display:block; object-fit:contain; opacity:.98; /* leve suavizada */ } /* Acessibilidade: se o usuário passar o mouse, pausa */ .tp-marquee:hover .tp-marquee__track{ animation-play-state: paused; } /* Direita -> esquerda */ @keyframes tp-scroll{ from{ transform: translateX(0); } to { transform: translateX(-100%); } /* o 2º trilho entra e faz o loop */ } /* ==== responsivo ==== */ @media (min-width:768px){ .tp-brands{ padding:32px 0 12px; } .tp-brands__title{ font-size:18px; margin-bottom:16px; text-align:center; } .tp-logo{ height:36px; } .tp-marquee__track{ gap:36px; } :root{ --tp-speed: 26s; } /* um pouco mais suave no desktop */ } /* Preferências de acessibilidade */ @media (prefers-reduced-motion: reduce){ .tp-marquee__track{ animation:none; } } /* Fallback anti-bullet se o CSS principal do site não zerar lista */ .tp-marquee ul{ list-style:none; margin:0; padding:0; } /* ===== Logo no header ===== */ header .logo img, .navbar .logo img, .navbar-brand img, .site-header .brand img { height: 96px !important; /* ajuste aqui o tamanho do logo */ width: auto; /* mantém a proporção */ display: block; } /* Altura mínima do header para acomodar o logo maior */ header, .site-header, .navbar { min-height: 72px; } /* Tamanhos por breakpoint (opcional) */ @media (max-width: 768px) { header .logo img, .navbar .logo img, .navbar-brand img, .site-header .brand img { height: 40px !important; } } /
* ===== Logo TECHPAG (mesmo tamanho no topo e no rodapé) ===== */ :root{ --logo-h-desktop: 120px; /* ajuste aqui para +/− (ex.: 96px, 120px) */ --logo-h-mobile: 96px; /* altura no celular */ } /* Aplica a mesma altura para os dois */ header .brand img, .footer-logo{ height: var(--logo-h-desktop) !important; width: auto !important; max-height: none !important; display: block; } /* Garante espaço no header para o logo maior */ header.header{ min-height: calc(var(--logo-h-desktop) + 40px) !important; padding-top: 10px !important; padding-bottom: 10px !important; box-sizing: border-box; } /* Mobile */ @media (max-width: 768px){ header .brand img, .footer-logo{ height: var(--logo-h-mobile) !important; } header.header{ min-height: calc(var(--logo-h-mobile) + 16px) !important; } }
/* =========================================================
   LOGO TECHPAG — Controle Único (Topo e Rodapé)
   Cole este bloco no FINAL do styles.css
   ========================================================= */
:root{
  /* Ajuste aqui os tamanhos globais dos logos */
  --logo-h-desktop: 72px;  /* tamanho no desktop (ex.: 64/72/80px) */
  --logo-h-mobile: 40px;   /* tamanho no mobile  (ex.: 36/40/44px) */
}

/* TOP0 — aplica a mesma altura em todos os seletores comuns de logo */
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img{
  height: var(--logo-h-desktop) !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}

/* RODAPÉ — usa a mesma altura; remove larguras fixas anteriores */
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;         /* força proporção correta */
  max-height: none !important;
}

/* Espaço do header para acomodar o logo (evita “corte”) */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 16px) !important;
  box-sizing: border-box;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }

  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 14px) !important;
  }
}

/* ===== Neutralizações específicas (conflitos antigos) ===== */
/* Haviam regras fixando largura do logo do rodapé (100px/140px): */
.footer-logo{ width: auto !important; }

/* Haviam regras definindo 96px no topo; garantimos nossa medida: */
header .logo img,
.navbar .logo img,
.navbar-brand img,
.site-header .brand img{
  height: var(--logo-h-desktop) !important;
}
/* =========================================================
   LOGOS TECHPAG — topo e rodapé do MESMO TAMANHO (½ do anterior)
   Cole este bloco no FINAL do styles.css
   ========================================================= */

/* Ajuste aqui o tamanho final dos logos (desktop e mobile).
   Coloquei 48px no desktop e 28px no mobile,
   que costuma ser ~½ do que você tinha no rodapé (≈ 96px).  */
:root{
  --logo-h-desktop: 48px;   /* tamanho do logo no desktop */
  --logo-h-mobile: 28px;    /* tamanho do logo no mobile  */
}

/* TOP0 + RODAPÉ — mesma altura, proporção preservada */
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;           /* remove larguras fixas */
  max-height: none !important;
  display: block;
  image-rendering: -webkit-optimize-contrast; /* nitidez */
}

/* Espaço do header para não “cortar” o logo */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 16px) !important;
  box-sizing: border-box;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }

  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 14px) !important;
  }
}

/* ===== Neutralizações de conflitos antigos ===== */
/* Tinha width fixo (100px/140px) no rodapé — zera. */
.footer-logo{ width: auto !important; }

/* Tinha regra de 96px pro topo — garante nosso valor. */
header .logo img,
.navbar .logo img,
.navbar-brand img,
.site-header .brand img{
  height: var(--logo-h-desktop) !important;
}
/* =========================================================
   LOGOS TECHPAG — topo e rodapé do MESMO TAMANHO (½ do anterior)
   Cole este bloco no FINAL do styles.css
   ========================================================= */

/* Ajuste aqui o tamanho final dos logos (desktop e mobile).
   Coloquei 48px no desktop e 28px no mobile,
   que costuma ser ~½ do que você tinha no rodapé (≈ 96px).  */
:root{
  --logo-h-desktop: 48px;   /* tamanho do logo no desktop */
  --logo-h-mobile: 28px;    /* tamanho do logo no mobile  */
}

/* TOP0 + RODAPÉ — mesma altura, proporção preservada */
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;           /* remove larguras fixas */
  max-height: none !important;
  display: block;
  image-rendering: -webkit-optimize-contrast; /* nitidez */
}

/* Espaço do header para não “cortar” o logo */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 16px) !important;
  box-sizing: border-box;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }

  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 14px) !important;
  }
}

/* ===== Neutralizações de conflitos antigos ===== */
/* Tinha width fixo (100px/140px) no rodapé — zera. */
.footer-logo{ width: auto !important; }

/* Tinha regra de 96px pro topo — garante nosso valor. */
header .logo img,
.navbar .logo img,
.navbar-brand img,
.site-header .brand img{
  height: var(--logo-h-desktop) !important;
}
/* =========================================================
   LOGOS TECHPAG — topo e rodapé do MESMO TAMANHO (½ do anterior)
   Cole este bloco no FINAL do styles.css
   ========================================================= */

/* Ajuste aqui o tamanho final dos logos (desktop e mobile).
   Coloquei 48px no desktop e 28px no mobile,
   que costuma ser ~½ do que você tinha no rodapé (≈ 96px).  */
:root{
  --logo-h-desktop: 48px;   /* tamanho do logo no desktop */
  --logo-h-mobile: 28px;    /* tamanho do logo no mobile  */
}

/* TOP0 + RODAPÉ — mesma altura, proporção preservada */
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;           /* remove larguras fixas */
  max-height: none !important;
  display: block;
  image-rendering: -webkit-optimize-contrast; /* nitidez */
}

/* Espaço do header para não “cortar” o logo */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 16px) !important;
  box-sizing: border-box;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }

  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 14px) !important;
  }
}

/* ===== Neutralizações de conflitos antigos ===== */
/* Tinha width fixo (100px/140px) no rodapé — zera. */
.footer-logo{ width: auto !important; }

/* Tinha regra de 96px pro topo — garante nosso valor. */
header .logo img,
.navbar .logo img,
.navbar-brand img,
.site-header .brand img{
  height: var(--logo-h-desktop) !important;
}
/* === LOGO — topo e rodapé do MESMO tamanho === */
:root{
  --logo-h-desktop: 48px;  /* mesmo do rodapé */
  --logo-h-mobile: 28px;
}

header.header .brand img,
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}

/* espaço do header para não cortar o logo */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 16px) !important;
  box-sizing: border-box;
}

@media (max-width: 768px){
  header.header .brand img,
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }
  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 14px) !important;
  }
}

/* neutraliza width antigas do rodapé (100px/140px) */
.footer-logo{ width: auto !important; }

/* =========================================================
   AJUSTE DEFINITIVO — LOGOS + HEADER (HOME e demais páginas)
   ========================================================= */

/* 1) Tamanhos globais do logo */
:root{
  /* Desktop: mantenho igual ao rodapé atual (onde está OK) */
  --logo-h-desktop: 48px;    /* se quiser maior: 56px. menor: 44px */

  /* Mobile: AUMENTEI para melhorar a leitura no iPhone */
  --logo-h-mobile: 34px;     /* antes ~28px. ajuste livre: 32–36px */
}

/* 2) Força o MESMO tamanho no topo e no rodapé (todas as páginas) */
header.header .brand img,
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  height: var(--logo-h-desktop) !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}

/* 3) Espaço do header para não cortar o logo */
header.header,
header,
.site-header,
.navbar{
  min-height: calc(var(--logo-h-desktop) + 18px) !important;
  box-sizing: border-box;
}

/* 4) Mobile: aumenta logo e mantém header alinhado */
@media (max-width: 768px){
  header.header .brand img,
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    height: var(--logo-h-mobile) !important;
  }

  header.header,
  header,
  .site-header,
  .navbar{
    min-height: calc(var(--logo-h-mobile) + 16px) !important;
  }

  /* alinhamento do botão hambúrguer com logo maior */
  .header .wrap{
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* 5) Neutralizações de regras antigas que encolhiam o topo */
.brand img{ height: auto !important; }           /* mata o 34px antigo */
header .logo img{ height: var(--logo-h-desktop) !important; }
.footer-logo{ width: auto !important; }          /* remove width 100/140px do rodapé */

/* 6) Home específica (se a Home ainda estiver puxando regra antiga) */
header.header .container.wrap .brand img{
  height: var(--logo-h-desktop) !important;      /* especificidade extra */
}/* === LOGO TECHPAG — topo e rodapé do MESMO tamanho === */
:root{
  --logo-w-desktop: 140px; /* mesmo valor do rodapé */
  --logo-w-mobile: 140px;  /* se quiser menor no celular, use 120px */
}

/* zera qualquer altura fixa e usa LARGURA igual nos dois */
header .brand img,
.site-header .brand img,
.navbar .brand img,
.navbar-brand img,
header .logo img,
.navbar .logo img,
.footer-logo{
  width: var(--logo-w-desktop) !important;
  height: auto !important;
  max-height: none !important;
  display: block;
}

/* garante espaço do header e evita “corte” */
header.header, .site-header, .navbar{
  min-height: calc( var(--logo-w-desktop) + 16px ) !important;
  box-sizing: border-box;
}

/* mobile */
@media (max-width: 768px){
  header .brand img,
  .site-header .brand img,
  .navbar .brand img,
  .navbar-brand img,
  header .logo img,
  .navbar .logo img,
  .footer-logo{
    width: var(--logo-w-mobile) !important;
    height: auto !important;
  }

  header.header, .site-header, .navbar{
    min-height: calc( var(--logo-w-mobile) + 14px ) !important;
  }
}