/* ============================================================================ GHV — folha de estilo do site ============================================================================ O DESENHO APROVADO PELO DONO (19/08/2026): abertura com movimento, resto parado. O movimento existe só na primeira tela da home, onde ele convence. Da lista de produtos em diante nada se move — ali o comprador do hospital está PROCURANDO alguma coisa, e animação atrapalha quem procura. As cores são as da marca, não escolhidas aqui: navy, teal e azul saem dos arquivos em MARK GHV/Logo. Mudar uma delas aqui e não lá faz o site brigar com o logo em cima dele. ========================================================================= */ :root { --navy: #15527e; --teal: #0e8c9a; --azul: #29abe2; --escuro: #0a1420; --tinta: #111418; --texto: #3d4650; --fraco: #79828d; --areia: #f6f7f9; --linha: rgba(17, 20, 24, 0.09); --env: 1080px; } * { box-sizing: border-box; } body { margin: 0; background: #fff; color: var(--tinta); overflow-x: hidden; font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } img, svg { max-width: 100%; } .env { max-width: var(--env); margin: 0 auto; padding: 0 24px; } /* Só para leitor de tela: o atalho "pular para o conteúdo" e os rótulos que o olho não precisa mas quem usa leitor precisa. Hospital público às vezes exige acessibilidade em licitação — e é barato fazer certo desde o começo. */ .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 8px; } .pular:focus { left: 16px; } /* ─── Topo ──────────────────────────────────────────────────────────────── Na home ele começa transparente sobre a abertura escura e vira branco ao rolar. Nas outras páginas já nasce branco (classe .fixo). */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; border-bottom: 1px solid transparent; transition: background .3s, backdrop-filter .3s, border-color .3s; } header.rolou, header.fixo { background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px); border-bottom-color: var(--linha); } .topo { display: flex; align-items: center; gap: 28px; height: 76px; } /* CUIDADO COM O PESO DOS SELETORES AQUI. A regra de tamanho abaixo tem duas classes; se a de esconder tivesse só uma, a de tamanho venceria e os DOIS logos apareceriam ao mesmo tempo — foi o que aconteceu em 19/08/2026. Por isso todas as regras de trocar o logo passam por .topo .marca. */ .topo .marca svg, .topo .marca img { height: 38px; width: auto; display: block; } .topo .marca .marca-escura { display: none; } header.rolou .topo .marca .marca-clara, header.fixo .topo .marca .marca-clara { display: none; } header.rolou .topo .marca .marca-escura, header.fixo .topo .marca .marca-escura { display: block; } nav { margin-left: auto; display: flex; gap: 26px; font-size: 15px; color: rgba(255,255,255,.78); } header.rolou nav, header.fixo nav { color: var(--texto); } nav a { text-decoration: none; padding: 4px 0; white-space: nowrap; } nav a:hover, nav a[aria-current="page"] { color: var(--azul); } /* NO CELULAR O MENU NÃO SOME. A primeira versão escondia a navegação abaixo de 860px, e o site é aberto principalmente no CELULAR — o comprador recebe o link no WhatsApp. Ficava sem como chegar em Produtos ou Contato sem rolar até o rodapé. Aqui o topo vira duas linhas: marca e botão em cima, os links embaixo. */ @media (max-width: 860px) { .topo { height: auto; padding-top: 12px; padding-bottom: 10px; flex-wrap: wrap; gap: 12px 18px; row-gap: 10px; } .topo .marca img { height: 32px; } .topo .bt { margin-left: auto; padding: 10px 16px; font-size: 14px; } nav { order: 3; width: 100%; margin-left: 0; gap: 20px; font-size: 15px; /* Se um dia entrar mais um item que a linha, ele rola de lado em vez de quebrar o topo inteiro. */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } /* O topo cresceu; a abertura e as capas descem junto para não ficar escondidas atrás dele. */ .abre { padding-top: 156px; } .capa { padding-top: 124px; } } /* ─── Botões ──────────────────────────────────────────────────────────── */ .bt { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; transition: transform .2s, box-shadow .2s; } .bt:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(21,82,126,.26); } .bt.azul { background: var(--azul); color: #04121e; font-weight: 700; border-radius: 999px; } .bt.vazado { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; } .bt.vazado:hover { background: rgba(255,255,255,.09); box-shadow: none; } .bt.claro { background: #fff; color: var(--navy); border: 1px solid var(--linha); } /* ─── Abertura escura (só a home) ─────────────────────────────────────── */ .abre { position: relative; background: var(--escuro); color: #fff; padding: 180px 0 110px; overflow: hidden; } .brilho { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .b1 { width: 620px; height: 620px; background: #15527e; opacity: .5; top: -230px; right: -120px; animation: flutua 14s ease-in-out infinite; } .b2 { width: 460px; height: 460px; background: #0e8c9a; opacity: .3; bottom: -200px; left: -140px; animation: flutua 18s ease-in-out infinite reverse; } @keyframes flutua { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px,-32px); } } .abre .env { position: relative; z-index: 2; } .selo { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8fd4f0; background: rgba(41,171,226,.12); border: 1px solid rgba(41,171,226,.28); padding: 7px 15px; border-radius: 999px; margin-bottom: 26px; } .pisca { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: pulsa 2s infinite; } @keyframes pulsa { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 50% { opacity: .6; box-shadow: 0 0 0 7px rgba(74,222,128,0); } } h1 { font-size: 62px; line-height: 1.05; letter-spacing: -.033em; margin: 0 0 22px; max-width: 15ch; font-weight: 700; } h1 em { font-style: normal; background: linear-gradient(100deg, #29abe2, #0e8c9a); -webkit-background-clip: text; background-clip: text; color: transparent; } .chamada { font-size: 20px; color: rgba(255,255,255,.72); max-width: 58ch; margin: 0 0 36px; } .acoes { display: flex; gap: 13px; flex-wrap: wrap; } .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 28px; margin-top: 74px; padding-top: 42px; border-top: 1px solid rgba(255,255,255,.13); } .num b { display: block; font-size: 38px; letter-spacing: -.03em; background: linear-gradient(100deg,#fff,#8fd4f0); -webkit-background-clip: text; background-clip: text; color: transparent; } .num span { font-size: 14px; color: rgba(255,255,255,.5); } /* Aparecer suave — só na abertura, e só uma vez. */ .sobe { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .sobe.vem { opacity: 1; transform: none; } /* Quem pede menos movimento no sistema não vê nenhum. Não é enfeite: pessoa com enxaqueca vestibular passa mal com isso. */ @media (prefers-reduced-motion: reduce) { .sobe { opacity: 1; transform: none; transition: none; } .brilho, .pisca { animation: none; } * { scroll-behavior: auto !important; } } /* ─── Cabeçalho das páginas internas ──────────────────────────────────── */ .capa { padding: 132px 0 46px; border-bottom: 1px solid var(--linha); } .capa h1 { font-size: 44px; color: var(--tinta); max-width: 22ch; margin-bottom: 14px; } .capa p { font-size: 19px; color: var(--texto); max-width: 62ch; margin: 0; } /* ─── Blocos ──────────────────────────────────────────────────────────── */ section { padding: 66px 0; } h2 { font-size: 15px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fraco); margin: 0 0 26px; } h3 { letter-spacing: -.01em; } .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; } .cat { border: 1px solid var(--linha); border-radius: 14px; padding: 26px 24px; text-decoration: none; display: block; color: inherit; transition: border-color .15s, transform .15s; } .cat:hover { border-color: var(--navy); transform: translateY(-2px); } .cat .ic { width: 38px; height: 38px; margin-bottom: 16px; } .cat h3 { font-size: 19px; margin: 0 0 8px; } .cat p { margin: 0; font-size: 15px; color: var(--texto); } .cat .itens { margin: 14px 0 0; font-size: 13px; color: var(--fraco); } .confia { background: var(--areia); padding: 58px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); } .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .dupla p { margin: 0 0 14px; color: var(--texto); } dl { margin: 0; font-size: 15px; } dt { color: var(--fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 15px; } dt:first-child { margin-top: 0; } dd { margin: 3px 0 0; font-variant-numeric: tabular-nums; } /* ─── Catálogo ────────────────────────────────────────────────────────── */ /* A linha inteira é clicável (é um