/* Odontomed Imagem — estilos globais. Os tokens de cor sao injetados no por _includes/base.njk a partir de src/_data/site.json, entao mudar a cor no painel muda o site inteiro. Os valores abaixo sao apenas o retrato de seguranca, caso o bloco falte. */ :root { --cor-primaria: #1B3D6E; --cor-escura: #122C50; --cor-texto: #1B2330; --cor-texto-suave: #4B5563; --cor-borda: #E3E6EB; /* Cinzas de apoio. Os contrastes citados sao o pior caso do site, medido sobre --cor-fundo-azul, que e a superficie mais escura que recebe texto. */ --cor-texto-medio: #3F4855; /* 7,95:1 */ --cor-texto-fraco: #5A6472; /* 5,19:1 — piso do que passa na WCAG AA */ /* Superficies e bordas */ --cor-campo-borda: #DCE3EC; --cor-borda-media: #C3CDDB; --cor-fundo-claro: #F5F7FA; --cor-fundo-suave: #F8FAFC; --cor-fundo-realce: #EEF1F5; --cor-fundo-azul: #EAEFF6; --cor-estrela: #E8B33C; /* so aparece sobre --cor-escura: 7,29:1 */ --cor-erro: #B3261E; /* Vermelho da marca. Ate 21/09/2026 aparecia uma vez so, no botao do fim da animacao — sem um acento constante, tudo tinha o mesmo peso e nada puxava a acao. Sao dois tons de proposito: --cor-acento o vermelho da logo. Branco sobre ele da 4,15:1, que nao passa em AA para texto miudo: use so em peca sem texto (tracos, barras, pontos). --cor-acento-forte o mesmo vermelho 10% mais escuro. Branco sobre ele da 5,00:1 e ele sobre branco tambem: e o tom dos botoes de acao e de qualquer texto vermelho. */ --cor-acento: #EC3136; --cor-acento-forte: #D42C31; /* Escala tipografica: 8 degraus no lugar dos 22 tamanhos soltos anteriores. Subida em 21/09/2026: a base era 15,5px e o piso 12,5px — pequeno demais para quem a clinica atende (idosos, pais com crianca no colo). A base agora e 17px e nenhum texto desce de 14px. */ --txt-xs: 14px; --txt-sm: 14.5px; --txt-md: 15.5px; --txt-base: 17px; --txt-lg: 18px; --txt-xl: 19.5px; --txt-2xl: 21px; --txt-3xl: 23px; --titulo-sm: clamp(20px, 3vw, 24px); --titulo-md: clamp(23px, 4vw, 30px); --titulo-lg: clamp(27px, 5.4vw, 40px); --titulo-xl: clamp(30px, 6.4vw, 46px); --titulo-2xl: clamp(31px, 7vw, 54px); /* Medidas de layout */ --largura-max: 1220px; --respiro-lateral: clamp(18px, 5vw, 32px); /* Reserva: a altura de verdade do cabecalho e medida por assets/site.js e reescrita aqui (ele mede 69px em tela larga e 77px nas demais). O 108px de antes era chute alto demais — a rolagem das ancoras parava ~35px cedo e ainda mostrava o fim da secao anterior. */ --altura-cabecalho: 76px; --raio-pequeno: 6px; --raio: 8px; --raio-grande: 12px; --raio-pilula: 999px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Onde a rolagem para ao clicar numa ancora: o cabecalho e fixo no topo e taparia o comeco do alvo, entao o alvo desce a altura dele. Os 12px sao o respiro de alvos que nao tem respiro proprio (#tabela, #duvidas, uma pergunta do FAQ). */ [id] { scroll-margin-top: calc(var(--altura-cabecalho) + 12px); } /* Ja as secoes tem 84px de respiro proprio no topo: somar mais folga fazia a faixa comecar longe do cabecalho. Aqui a borda de cima da faixa encosta no cabecalho — a secao pedida enche a tela inteira, sem sobra da anterior e sem cortar o comeco dela. */ main > section[id] { scroll-margin-top: var(--altura-cabecalho); } body { margin: 0; background: #fff; font-family: 'Archivo', system-ui, sans-serif; color: var(--cor-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, ul, li { margin: 0; } ul { padding: 0; list-style: none; } img { display: block; } /* O nao deve criar caixa propria: sem isto, o height:100% das fotos passaria a medir contra ele, e nao contra a coluna do grid. */ picture { display: contents; } a { color: var(--cor-primaria); } a:hover { color: var(--cor-escura); } /* :not(.campo-oculto) porque as caixas dos dentes ficam escondidas atras do proprio rotulo — e um seletor de atributo vence uma classe na cascata. */ input[type="checkbox"]:not(.campo-oculto) { accent-color: var(--cor-primaria); width: 18px; height: 18px; flex: 0 0 auto; margin: 0; } /* --------------------------------------------------------------- Foco visivel. Antes o site zerava o outline dos campos, o que deixa quem navega por teclado sem saber onde esta. :focus-visible so aparece para teclado, entao o clique de mouse continua limpo. --------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; border-radius: 3px; } .fc7:focus-visible { border-color: var(--cor-primaria) !important; outline: 2px solid var(--cor-primaria); outline-offset: 1px; } /* Sobre fundo escuro o anel azul some; ali ele vira branco. */ .foco-claro:focus-visible { outline-color: #fff; } /* Pular para o conteudo: invisivel ate receber o foco do teclado */ .pular { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--cor-primaria); color: #fff; padding: 12px 18px; border-radius: var(--raio); font-size: var(--txt-base); font-weight: 700; text-decoration: none; transition: top .15s ease; } .pular:focus { top: 12px; color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pular { transition: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Erro de formulario: sempre junto do campo, nunca so no topo */ .erro-campo { font-size: var(--txt-sm); font-weight: 500; color: var(--cor-erro); line-height: 1.45; } /* --------------------------------------------------------------- Cabecalho Um menu quebrado em tres linhas empurra o conteudo da pagina para baixo; por isso, quando nao cabe numa linha, ele vira o botao "Menu". Hoje todas as paginas usam o mesmo menu de 10 itens (a ordem pedida pela clinica mais Convenios e Conteudo), o que liga a classe .cabecalho--longo: ele cabe em linha a partir de 1280px, com letra e logo um pouco menores, e abaixo disso abre no botao. O bloco compacto vale ate 1279px. O bloco "menus curtos" (1024-1279px) fica de reserva: ele so volta a valer se o menu cair para 8 itens ou menos em src/_data/navegacao.json. --------------------------------------------------------------- */ .cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cor-borda); } .cabecalho-interno { max-width: var(--largura-max); margin: 0 auto; padding: 12px var(--respiro-lateral); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; } .cabecalho-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; } .cabecalho-logo img { height: clamp(38px, 9vw, 52px); width: auto; } .cabecalho-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: var(--txt-md); font-weight: 500; } .cabecalho-nav { align-items: center; } .cabecalho-nav a { color: var(--cor-texto-suave); text-decoration: none; } .cabecalho-nav a:hover { color: var(--cor-primaria); } /* Selecao: a pagina aberta (aria-current) e a secao em que a pessoa esta ao rolar a home (.ativo, escrito por assets/site.js). As duas usam o vermelho da marca — sobre o branco do cabecalho da 5,00:1. Sublinhado, e nao negrito: negrito alarga a palavra e o menu "pula". */ .cabecalho-nav a[aria-current="page"], .cabecalho-nav a.ativo, .cabecalho-sub-botao.ativo { color: var(--cor-acento-forte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; } /* Separa as ancoras da home das paginas (Exames, Resultados). */ .cabecalho-nav-separador { width: 1px; height: 22px; background: var(--cor-borda-media); } /* Opcao "destaque" de navegacao.json. Sem uso hoje: a caixa disputava com o azul-e-negrito da pagina atual e passava a impressao de selecionado. */ .cabecalho-nav a.cabecalho-nav-destaque { padding: 8px 14px; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio); color: var(--cor-primaria); font-weight: 600; } .cabecalho-nav a.cabecalho-nav-destaque:hover { border-color: var(--cor-primaria); } /* Submenu (Sobre > A clinica / Estrutura e equipamentos) */ .cabecalho-sub { position: relative; } .cabecalho-sub-botao { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border: 0; font: inherit; color: var(--cor-texto-suave); cursor: pointer; } .cabecalho-sub-botao:hover { color: var(--cor-primaria); } .cabecalho-sub-botao svg { transition: transform .15s ease; } .cabecalho-sub-botao[aria-expanded="true"] svg { transform: rotate(180deg); } .cabecalho-sub-lista { display: none; position: absolute; top: calc(100% + 14px); left: -12px; min-width: 240px; flex-direction: column; padding: 6px; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: 0 14px 34px rgba(18, 44, 80, .14); } /* Ponte invisivel sobre o vao: o mouse vai do "Sobre" ate a lista sem fechar */ .cabecalho-sub-lista::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .cabecalho-sub-lista a { padding: 10px 12px; border-radius: 6px; white-space: nowrap; } .cabecalho-sub-lista a:hover { background: var(--cor-fundo-claro); } .cabecalho-sub.aberto .cabecalho-sub-lista { display: flex; } @media (hover: hover) and (min-width: 1280px) { .cabecalho-sub:hover .cabecalho-sub-lista { display: flex; } } @media (prefers-reduced-motion: reduce) { .cabecalho-sub-botao svg { transition: none; } } .cabecalho-alternar { display: none; } @media (max-width: 1279px) { .cabecalho-interno { gap: 10px 14px; } .cabecalho-alternar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio); color: var(--cor-texto); font-family: inherit; font-size: var(--txt-md); font-weight: 600; cursor: pointer; } .cabecalho-nav { display: none; order: 9; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--cor-borda); } .cabecalho-nav.aberto { display: flex; } .cabecalho-nav a { padding: 14px 2px; border-bottom: 1px solid var(--cor-borda); font-size: var(--txt-base); } .cabecalho-nav a:last-child { border-bottom: 0; } /* Menu da home tem 11 linhas: rola dentro dele em tela baixa. */ .cabecalho-nav.aberto { max-height: calc(100svh - 80px); overflow-y: auto; } .cabecalho-nav { align-items: stretch; } .cabecalho-nav-separador { width: 100%; height: 8px; background: var(--cor-fundo-claro); border-bottom: 1px solid var(--cor-borda); } .cabecalho-nav a.cabecalho-nav-destaque { padding: 14px 2px; border: 0; border-radius: 0; } /* No celular o submenu fica sempre aberto: "Sobre" vira titulo do grupo e os dois itens aparecem recuados logo abaixo. */ .cabecalho-sub-botao { width: 100%; padding: 14px 2px 6px; font-size: var(--txt-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-fraco); pointer-events: none; } .cabecalho-sub-botao svg { display: none; } .cabecalho-sub-lista { display: flex; position: static; min-width: 0; padding: 0 0 0 14px; border: 0; border-bottom: 1px solid var(--cor-borda); border-radius: 0; box-shadow: none; } .cabecalho-sub-lista::before { display: none; } .cabecalho-sub-lista a { border-radius: 0; } .cabecalho-sub-lista a:hover { background: none; } } /* Menu em linha (1280px ou mais): com letra 14.5px, vao de 14px e logo de 44px ele sobra folga. O menu antigo da home tinha praticamente a mesma largura em caracteres, e a medicao de la sobrava ~40px. */ @media (min-width: 1280px) { .cabecalho--longo .cabecalho-interno { column-gap: 24px; } .cabecalho--longo .cabecalho-logo img { height: 44px; } .cabecalho--longo .cabecalho-nav { font-size: 14.5px; column-gap: 14px; } .cabecalho--longo .cabecalho-nav a.cabecalho-nav-destaque { padding-inline: 12px; } .cabecalho-nav .so-menu-compacto { display: none; } } /* Menus curtos (ate 8 itens): entre 1024 e 1279px cabem numa linha, entao desfazem o formato compacto acima. Sem efeito enquanto o menu tiver 10 itens; fica aqui para o caso de a lista encurtar. */ @media (min-width: 1024px) and (max-width: 1279px) { .cabecalho:not(.cabecalho--longo) .cabecalho-interno { gap: 12px 32px; } .cabecalho:not(.cabecalho--longo) .cabecalho-alternar { display: none; } .cabecalho:not(.cabecalho--longo) .cabecalho-nav { display: flex; order: 0; width: auto; flex-direction: row; align-items: center; gap: 12px 20px; max-height: none; overflow: visible; border-top: 0; } .cabecalho:not(.cabecalho--longo) .cabecalho-nav a { padding: 0; border-bottom: 0; font-size: var(--txt-md); } } @media (max-width: 380px) { .cabecalho-alternar-texto { display: none; } } /* Celular: logo, Agendar e Menu numa linha só. Antes o Menu quebrava para uma segunda linha e o cabeçalho fixo comia o dobro da tela. O logo é quem cede espaço (encolhe), os botões ficam no tamanho de toque. */ @media (max-width: 560px) { .cabecalho-interno { flex-wrap: nowrap; gap: 8px; } .cabecalho-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 0 var(--respiro-lateral); border-bottom: 1px solid var(--cor-borda); } .cabecalho-logo { flex: 0 1 auto; min-width: 0; } .cabecalho-logo img { height: auto; max-height: 38px; max-width: 100%; } .cabecalho-agendar, .cabecalho-alternar { flex: 0 0 auto; padding-inline: 12px; } } /* --------------------------------------------------------------- Estados de interacao herdados: o atributo style= nao aceita :hover, entao cada variacao virou uma classe numerada. Conforme os blocos forem migrando para classes nomeadas, estas somem. --------------------------------------------------------------- */ .hv6:hover { border-color: var(--cor-primaria) !important; } .hv8:hover { color: #fff !important; } .hv9:hover { background: #1877F2 !important; border-color: #1877F2 !important; } .hv10:hover { background: #D62976 !important; border-color: #D62976 !important; } .hv11:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; } /* --------------------------------------------------------------- Botoes Cada acao trazia o proprio tamanho no atributo style=: o site tinha vinte combinacoes de padding, altura e corpo de letra. Agora sao duas alturas, e o que varia entre um botao e outro e so a cor. .btn 48px — toda acao dentro do conteudo .btn-compacto 44px — barras densas (cabecalho, acoes secundarias) Cor (uma por botao): .btn-primario azul cheio; acao principal .btn-claro branco sobre a faixa azul .btn-contorno branco com borda; acao secundaria sobre fundo claro .btn-vidro translucido sobre a faixa azul; acao secundaria .btn-suave cinza de apoio, sobre fundo claro .btn-fantasma sem caixa; "cancelar" e afins Sobre fundo azul, junte .foco-claro para o anel de foco aparecer. --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: 1px solid transparent; border-radius: var(--raio); font-family: inherit; font-size: var(--txt-base); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-compacto { min-height: 44px; padding: 10px 20px; font-size: var(--txt-md); } .btn-primario { background: var(--cor-primaria); color: #fff; } .btn-primario:hover { background: var(--cor-escura); } .btn-acento { background: var(--cor-acento-forte); color: #fff; } .btn-acento:hover { background: #BD272B; } .btn-claro { background: #fff; color: var(--cor-escura); } .btn-claro:hover { background: #E7ECF3; } .btn-contorno { background: #fff; border-color: var(--cor-borda-media); color: var(--cor-texto); font-weight: 600; } .btn-contorno:hover { border-color: var(--cor-primaria); } .btn-vidro { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: #fff; font-weight: 600; } .btn-vidro:hover { background: rgba(255,255,255,.2); } .btn-suave { background: var(--cor-fundo-claro); border-color: var(--cor-borda); color: var(--cor-texto); font-weight: 600; } .btn-suave:hover { border-color: var(--cor-borda-media); background: var(--cor-fundo-realce); } .btn-fantasma { background: transparent; color: var(--cor-texto-fraco); font-weight: 600; } .btn-fantasma:hover { color: var(--cor-texto); } /* Botao de agendar que acompanha a rolagem. Mesma altura dos demais; o que muda e a forma de pilula e a sombra que o separa do conteudo. */ /* Com mais de dois botoes a linha quebra e cada rotulo puxa uma largura diferente — a grade sai torta. Aqui todos ocupam a mesma coluna. Selctor com as duas classes de proposito: .linha-acoes e declarada mais abaixo no arquivo e, com a mesma especificidade, venceria pela ordem. */ .linha-acoes.linha-acoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; } /* Abaixo de 480px dois botoes lado a lado partem o rotulo no meio: cada um passa a ocupar a linha inteira. */ @media (max-width: 480px) { .linha-acoes > .btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* Atalhos para as paginas de cada exame, no alto de exames.html. Nao sao acoes: sao navegacao, e por isso ficam menores que um .btn. A seta diz que o clique leva para outra pagina. */ .chip-exame { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 18px; background: #fff; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio-pilula); color: var(--cor-primaria); font-size: var(--txt-md); font-weight: 600; text-decoration: none; } .chip-exame::after { content: "→"; transition: transform .15s ease; } .chip-exame:hover { border-color: var(--cor-primaria); } .chip-exame:hover::after { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .chip-exame::after { transition: none; } } .chip-exame-ativo { background: var(--cor-fundo-azul); border-color: var(--cor-borda-media); } /* --------------------------------------------------------------- Padroes repetidos, antes copiados dentro de cada atributo style=. Os valores sao os mesmos; o que muda e poderem receber :hover, :focus e media queries. --------------------------------------------------------------- */ /* 123x */ .linha-exame { font-size: var(--txt-md); color: var(--cor-texto-medio); line-height: 1.5; padding: 7px 0; border-bottom: 1px solid var(--cor-fundo-realce); } /* 59x */ .opcao-exame { display: flex; align-items: center; gap: 12px; background: var(--cor-fundo-claro); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 13px 16px; font-size: var(--txt-base); line-height: 1.4; min-height: 48px; cursor: pointer; } /* 52x */ .dente { width: 46px; height: 46px; border-radius: var(--raio); display: inline-flex; align-items: center; justify-content: center; font-size: var(--txt-md); font-weight: 700; cursor: pointer; border: 1px solid var(--cor-campo-borda); background: var(--cor-fundo-claro); color: var(--cor-texto); } /* 52x */ .campo-oculto { position: absolute; opacity: 0; width: 1px; height: 1px; } /* Texto que só o leitor de tela anuncia. Sem ele o link do cartão de exames seria lido como "21 exames", sem dizer o que o clique faz. clip-path em vez de display:none porque o conteúdo precisa continuar existindo para a tecnologia assistiva. */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 49x */ .texto-apoio { font-size: var(--txt-md); color: var(--cor-texto-fraco); line-height: 1.6; } /* 42x */ .item-destacado { font-size: var(--txt-lg); color: var(--cor-texto-medio); line-height: 1.5; padding: 12px 0 12px 16px; border-left: 2px solid var(--cor-primaria); background: var(--cor-fundo-suave); } /* 33x */ .texto-apoio-compacto { font-size: var(--txt-md); color: var(--cor-texto-fraco); line-height: 1.55; } /* 28x */ .titulo-cartao { font-size: var(--txt-lg); font-weight: 700; } /* 28x */ .acao-cartao { margin-top: auto; font-size: var(--txt-sm); font-weight: 700; color: var(--cor-primaria); } /* 27x */ a.cartao-link { text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 24px; display: flex; flex-direction: column; gap: 8px; } /* 23x */ .paragrafo-largo { font-size: var(--txt-lg); color: var(--cor-texto-suave); line-height: 1.75; max-width: 66ch; margin-bottom: 12px; } /* 18x */ .titulo-bloco { font-size: var(--titulo-md); font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; } /* 16x */ .sobrelinha { display: flex; align-items: center; gap: 10px; font-size: var(--txt-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-primaria); margin-bottom: 12px; } /* So na sobrelinha que abre secao: dentro da tabela de exames a mesma classe rotula subgrupos, e o traco ali viraria ruido. */ .sobrelinha-secao::before { content: ""; flex: 0 0 auto; width: 22px; height: 3px; border-radius: 2px; background: var(--cor-acento); } .sobrelinha-clara::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 3px; margin-right: 10px; border-radius: 2px; background: var(--cor-acento); } /* 16x */ .grade-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px 28px; } /* 15x */ .linha-acoes { display: flex; flex-wrap: wrap; gap: 12px; } /* 14x */ a.link-sobre-escuro { color: rgba(255,255,255,.65); text-decoration: none; } /* 14x */ .painel { border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 26px clamp(18px, 4vw, 28px); } /* 14x */ .cartao-lista { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 26px; display: flex; flex-direction: column; gap: 11px; } /* 14x */ .titulo-destaque { font-size: var(--txt-xl); font-weight: 700; } /* 14x */ a.acao-cartao-larga { margin-top: auto; font-size: var(--txt-md); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } /* 13x */ .faixa-primaria { background: var(--cor-primaria); color: #fff; } /* 11x */ .sobrelinha-clara { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; } /* 11x */ .titulo-bloco-largo { font-size: var(--titulo-md); font-weight: 800; letter-spacing: -.025em; margin-bottom: 16px; } /* 11x */ .titulo-painel { font-size: var(--titulo-sm); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; } /* 11x */ .texto-apoio-espacado { font-size: var(--txt-md); color: var(--cor-texto-fraco); line-height: 1.55; margin-bottom: 18px; } /* 10x */ a.cartao-bloco { display: block; text-decoration: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 22px 22px 24px; } /* --------------------------------------------------------------- Carrossel dos planos credenciados Anda sozinho e sem barra de rolagem. A trilha tem a lista duas vezes e desliza exatamente metade: quando a animacao reinicia, o que esta na tela e o inicio da segunda copia, identico ao inicio da primeira. Para isso o vao entre as placas precisa estar na margem de cada uma, nunca em "gap" — com gap, 50% da trilha cai meio vao antes do lugar certo e o laco da um salto visivel a cada volta. --------------------------------------------------------------- */ .carrossel { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } .carrossel::-webkit-scrollbar { display: none; } .carrossel-trilha { display: flex; width: max-content; animation: carrossel-desliza var(--carrossel-duracao, 44s) linear infinite; } @keyframes carrossel-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Parar para ler: no mouse por cima e tambem quando o foco do teclado entra */ .carrossel:hover .carrossel-trilha, .carrossel:focus-within .carrossel-trilha { animation-play-state: paused; } .carrossel-placa { flex: 0 0 clamp(210px, 22vw, 290px); height: clamp(100px, 11vw, 136px); margin-right: 18px; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 12px; } /* O arquivo ja vem com o logo centralizado e no tamanho certo (440x180, a proporcao de 176x72): so precisa preencher a area util da placa. */ .carrossel-logo { display: block; width: 100%; height: 100%; object-fit: contain; } /* Sem animacao, o carrossel volta a ser uma lista que se arrasta — a barra continua escondida, mas o conteudo segue alcancavel. A copia sai de cena para os planos nao aparecerem repetidos. */ @media (prefers-reduced-motion: reduce) { .carrossel { overflow-x: auto; } .carrossel-trilha { animation: none !important; } .carrossel-placa[aria-hidden="true"] { display: none; } } @media print { .naoimprimir { display: none !important; } } /* --------------------------------------------------------------- Diferenciais ("Por que aqui"), na home. Desktop: titulo a esquerda, lista numerada a direita. Abaixo de 860px: pilha unica, numero acima do texto, titulo 30px e itens 17px. As linhas divisorias ficam nos dois tamanhos. --------------------------------------------------------------- */ .diferenciais { background: var(--cor-fundo-azul); } .diferenciais-interno { max-width: var(--largura-max); margin: 0 auto; padding: 80px var(--respiro-lateral); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 72px; align-items: start; } .diferenciais-sobrelinha { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cor-primaria); margin-bottom: 12px; } .diferenciais-titulo { font-size: var(--titulo-lg); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 14ch; } .diferenciais-lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cor-borda-media); } .diferenciais-item { display: flex; align-items: baseline; gap: 28px; padding: 24px 0; border-top: 1px solid var(--cor-borda-media); } .diferenciais-num { flex: 0 0 auto; min-width: 2ch; font-size: var(--txt-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cor-texto-fraco); } .diferenciais-texto { font-size: var(--txt-2xl); font-weight: 500; line-height: 1.4; color: var(--cor-texto); } @media (max-width: 859px) { .diferenciais-interno { grid-template-columns: 1fr; gap: 28px; padding-block: 56px; padding-inline: 24px; } .diferenciais-titulo { font-size: 30px; max-width: none; } .diferenciais-item { flex-direction: column; gap: 8px; padding: 18px 0; } .diferenciais-texto { font-size: 17px; } } /* --------------------------------------------------------------- Aluguel de consultorio .a-definir marca dado comercial que ainda nao foi informado. Aparece de proposito, para ninguem publicar a pagina achando que esta pronta. --------------------------------------------------------------- */ .a-definir { display: inline; background: #FFF4D6; border: 1px dashed #B7791F; border-radius: 4px; padding: 1px 6px; color: #7A4A00; font-size: .92em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* --------------------------------------------------------------- Mapa com o botao "Ir agora" (macro mapaComRota em componentes.njk) --------------------------------------------------------------- */ .mapa-caixa { /* O cartao branco que o Google desenha no alto do mapa (nome do lugar + "Abrir no Maps") nao da para estilizar: esta dentro do iframe. O iframe e mais alto que a caixa e sobe esta medida, empurrando o cartao para fora da area visivel. Eram 72px, que cobriam so parte dele e deixavam uma faixa branca atras do botao "Ir agora". */ --mapa-corte: 120px; position: relative; overflow: hidden; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio-grande); background: var(--cor-fundo-azul); } .mapa-caixa iframe { display: block; width: 100%; height: calc(320px + var(--mapa-corte)); margin-top: calc(-1 * var(--mapa-corte)); border: 0; } /* Um botao, um toque: abre a rota. Sem painel de opcoes na pagina. */ .ir-agora-botao { position: absolute; top: 12px; left: 12px; z-index: 2; box-shadow: 0 6px 18px rgba(18, 44, 80, .3); } /* Campos de formulario com classe, no lugar do style= repetido em cada um. */ .form-campo { display: grid; gap: 6px; font-size: var(--txt-sm); font-weight: 700; color: var(--cor-texto-suave); } .form-entrada { width: 100%; min-height: 46px; padding: 13px 14px; font-family: 'Archivo', sans-serif; font-size: var(--txt-base); color: var(--cor-texto); background: #fff; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio-pequeno); } .form-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; } .form-grupo legend { padding: 0; margin-bottom: 10px; } .form-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } /* --------------------------------------------------------------- Espaco reservado para foto (.foto-vaga) Marca onde entra uma foto que ainda nao chegou. Mesma ideia do .a-definir para texto: aparece de proposito, para o lugar nao ser esquecido nem preenchido com imagem qualquer. --------------------------------------------------------------- */ .foto-vaga { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 160px; padding: 20px; text-align: center; background: repeating-linear-gradient(135deg, #F7F9FC 0 10px, #EFF3F8 10px 20px); border: 2px dashed var(--cor-borda-media); border-radius: var(--raio-grande); color: var(--cor-texto-fraco); } .foto-vaga-titulo { font-size: var(--txt-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria); } .foto-vaga-legenda { font-size: var(--txt-md); line-height: 1.5; max-width: 34ch; } /* --------------------------------------------------------------- Exemplo do resultado de um exame (.exemplo-exame) Ocupa o mesmo lugar que a .foto-vaga guardava. O fundo escuro nao e enfeite: radiografia e preta nas bordas, e com `contain` sobra espaco dos lados — sobre branco a imagem pareceria recortada. --------------------------------------------------------------- */ .exemplo-exame { margin: 0; } .exemplo-exame picture { display: block; } .exemplo-exame img { display: block; width: 100%; height: var(--exemplo-altura, 190px); object-fit: contain; background: #05080C; border: 1px solid var(--cor-borda-media); border-radius: var(--raio-grande); } .exemplo-exame__legenda { margin-top: 8px; font-size: var(--txt-md); line-height: 1.45; color: var(--cor-texto-fraco); } /* --------------------------------------------------------------- Carrossel de fotos (.fotos-carrossel) Ao contrario do carrossel de convenios, este nao anda sozinho: as fotos sao grandes e quem olha manda no ritmo. O deslize e do proprio navegador (scroll-snap), entao arrastar ja funciona sem JavaScript; assets/site.js apenas revela as setas e os pontinhos. --------------------------------------------------------------- */ .fotos-carrossel { position: relative; } .fotos-carrossel-trilha { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--raio-grande); } .fotos-carrossel-trilha::-webkit-scrollbar { display: none; } .fotos-carrossel-trilha:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 3px; } .fotos-carrossel-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; /* A altura padrao serve a galeria da pagina de aluguel. Onde o carrossel divide a linha com um texto (a secao de aluguel da home), a macro passa outra medida em --carrossel-altura para a foto acompanhar a coluna. */ height: var(--carrossel-altura, clamp(240px, 46vw, 420px)); border-radius: var(--raio-grande); overflow: hidden; border: 1px solid var(--cor-borda); background: #fff; } .fotos-carrossel-slide .foto-vaga { height: 100%; border: 0; border-radius: 0; } /* Copias que o site.js poe nas pontas para a volta do loop nao aparecer. Sao decorativas: ja estao com aria-hidden, aqui so saem da navegacao. */ .fotos-carrossel-slide[data-clone] { pointer-events: none; } .fotos-carrossel-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; font-size: var(--txt-md); font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(10, 20, 35, .82), rgba(10, 20, 35, 0)); } .fotos-carrossel-botao { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cor-borda-media); background: rgba(255, 255, 255, .94); color: var(--cor-primaria); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(10, 20, 35, .18); } .fotos-carrossel-botao:disabled { opacity: .35; cursor: default; } .fotos-carrossel-anterior { left: 10px; } .fotos-carrossel-proxima { right: 10px; } .fotos-carrossel-pontos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .fotos-carrossel-ponto { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--cor-borda-media); cursor: pointer; } .fotos-carrossel-ponto[aria-current="true"] { background: var(--cor-primaria); } @media (prefers-reduced-motion: reduce) { .fotos-carrossel-trilha { scroll-behavior: auto; } } /* --------------------------------------------------------------- Regulamento de locacao (macro regulamentoCorpo em componentes.njk) Os mesmos estilos valem no modal e na pagina propria: o texto e o mesmo arquivo de dados renderizado duas vezes. --------------------------------------------------------------- */ .regulamento-abertura { font-size: var(--txt-lg); line-height: 1.75; color: var(--cor-texto-suave); max-width: 66ch; margin-bottom: 28px; } /* O numero visivel e o , desenhado em azul e marcado como decorativo. O marcador do proprio
    desenhava um segundo numero, menor e cinza, ao lado — "4. 4. Materiais e equipamentos". A lista continua sendo
      , entao o leitor de tela segue anunciando a ordem. */ .regulamento-lista { display: grid; gap: 28px; max-width: 66ch; list-style: none; padding-left: 0; } .regulamento-item { border-top: 1px solid var(--cor-borda); padding-top: 20px; } .regulamento-titulo { display: flex; gap: 10px; align-items: baseline; font-size: var(--txt-2xl); font-weight: 700; color: var(--cor-texto); margin-bottom: 10px; } .regulamento-num { color: var(--cor-primaria); font-weight: 800; } .regulamento-texto { font-size: var(--txt-base); line-height: 1.7; color: var(--cor-texto-suave); } .regulamento-texto + .regulamento-texto { margin-top: 10px; } .regulamento-texto strong { color: var(--cor-texto); font-weight: 700; } .regulamento-marcadores { display: grid; gap: 6px; margin: 12px 0; padding-left: 22px; list-style: disc; font-size: var(--txt-base); line-height: 1.7; color: var(--cor-texto-suave); } .regulamento-fecho { margin-top: 28px; padding: 18px 20px; background: var(--cor-fundo-azul); border-left: 4px solid var(--cor-primaria); border-radius: var(--raio); font-size: var(--txt-lg); font-weight: 600; line-height: 1.6; color: var(--cor-texto); } /* --------------------------------------------------------------- Modal () O do navegador ja traz Esc, foco preso e o fundo escuro (::backdrop). O que falta e a forma: caixa branca com topo e rodape fixos e so o miolo rolando, para o botao de fechar nunca sumir. O gatilho e sempre um link de verdade para uma pagina com o mesmo conteudo: sem JavaScript o clique navega, e nada se perde. --------------------------------------------------------------- */ .modal { width: min(760px, 100% - 32px); max-width: none; max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: var(--raio-grande); background: #fff; color: var(--cor-texto); box-shadow: 0 18px 50px rgba(10, 20, 35, .28); overflow: hidden; } .modal::backdrop { background: rgba(10, 20, 35, .72); } .modal[open] { display: flex; } .modal-caixa { display: flex; flex-direction: column; max-height: min(86vh, 860px); width: 100%; } .modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px clamp(18px, 4vw, 30px) 18px; border-bottom: 1px solid var(--cor-borda); } .modal-titulo { font-size: var(--titulo-sm); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .modal-subtitulo { font-size: var(--txt-md); color: var(--cor-texto-fraco); margin-top: 4px; } .modal-fechar { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--cor-borda); border-radius: 50%; background: #fff; color: var(--cor-texto-suave); cursor: pointer; } .modal-fechar:hover { background: var(--cor-fundo-claro); color: var(--cor-primaria); } /* O miolo e o unico que rola; tabindex="0" no HTML para quem usa so o teclado conseguir rolar sem passar por todos os links. */ .modal-corpo { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 24px clamp(18px, 4vw, 30px); } .modal-corpo:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: -3px; } .modal-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px clamp(18px, 4vw, 30px); border-top: 1px solid var(--cor-borda); background: var(--cor-fundo-claro); } /* No celular o modal ocupa a tela toda: caixa pequena com texto longo rende rolagem dentro de rolagem. */ @media (max-width: 600px) { .modal { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; } .modal-caixa { max-height: 100dvh; height: 100dvh; } .modal-rodape { justify-content: stretch; } .modal-rodape .btn { flex: 1 1 auto; justify-content: center; } } /* A coluna do lado do FAQ acompanha a rolagem das respostas, em vez de deixar um vão branco crescendo ao lado do acordeão aberto. Só onde há duas colunas: empilhado, grudar não faz sentido. */ @media (min-width: 900px) { .faq-lateral { position: sticky; top: calc(var(--altura-cabecalho) + 24px); } } /* Fio ligando os três passos de "Como funciona": diz que é uma sequência, e não três cartões soltos. Some quando eles empilham, que é quando a ordem já fica óbvia pela própria pilha. */ @media (min-width: 880px) { .passos-ligados { position: relative; } .passos-ligados::before { content: ""; position: absolute; top: 50px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(to right, var(--cor-borda-media) 0 8px, transparent 8px 16px); } .passos-ligados > * { position: relative; } } /* --------------------------------------------------------------- Agendar no cabecalho Entrou em 21/09/2026 e aposentou o botao flutuante: com o cabecalho sticky, os dois seriam dois CTAs vermelhos iguais na mesma tela. --------------------------------------------------------------- */ .cabecalho-agendar { flex: 0 0 auto; min-height: 44px; padding-inline: 18px; border-radius: var(--raio-pilula); white-space: nowrap; } /* Em linha (1280px+), o botao fecha a direita, depois do menu. */ @media (min-width: 1280px) { .cabecalho-nav { order: 1; } .cabecalho-agendar { order: 2; } } /* Comprimido, o menu vira o botao "Menu" e o Agendar fica ao lado dele — a acao principal nao some dentro da sanfona. */ @media (max-width: 1279px) { .cabecalho-agendar { order: 7; } .cabecalho-alternar { order: 8; } } @media (max-width: 400px) { .cabecalho-agendar { padding-inline: 14px; } .cabecalho-agendar svg { display: none; } } /* --------------------------------------------------------------- Tira de fatos (onde · quando · resultado), logo abaixo do topo Três colunas de largura igual, separadas por um filete. Empilha no celular, e aí o filete vira a linha entre um fato e outro. --------------------------------------------------------------- */ .faixa-fatos { max-width: var(--largura-max); margin: 0 auto; padding-inline: var(--respiro-lateral); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .faixa-fato { padding: 18px 0 18px 28px; border-left: 1px solid var(--cor-borda); } .faixa-fato:first-child { padding-left: 0; border-left: 0; } .faixa-fato__rotulo { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-fraco); margin-bottom: 5px; } .faixa-fato__valor { font-size: var(--txt-lg); font-weight: 600; line-height: 1.4; color: var(--cor-texto); } .faixa-fato__link { text-decoration: none; } .faixa-fato__link:hover { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 760px) { .faixa-fato { padding: 14px 0; border-left: 0; border-top: 1px solid var(--cor-borda); } .faixa-fato:first-child { border-top: 0; } } /* --------------------------------------------------------------- Números de "Quem somos" Três medidas que sustentam o texto ao lado: a nota do Google, o prazo do laudo e quantos planos são atendidos. Todas saem dos dados — mudar o prazo ou acrescentar um convênio muda o número aqui. --------------------------------------------------------------- */ /* Os tres numeros cabem em linha na coluna de texto (~550px no desktop): 3 x 140px + 2 x 28px de vao = 476px. O max-width de 46ch que havia aqui igualava a medida dos paragrafos de cima, mas travava o bloco em ~420px — so entravam dois numeros e o terceiro caia sozinho na linha de baixo. Sem o teto, o auto-fit poe os tres lado a lado e continua quebrando sozinho onde a coluna encolhe (tablet: dois; celular: um). */ .numeros-clinica { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 24px 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--cor-borda); } .numeros-clinica__valor { font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--cor-primaria); margin-bottom: 8px; } .numeros-clinica__legenda { font-size: var(--txt-md); line-height: 1.5; color: var(--cor-texto-fraco); } /* --------------------------------------------------------------- Cabeçalho partido: título grande à esquerda, texto de apoio à direita, alinhados pela base. Quebra a repetição do molde "rótulo + título + parágrafo, tudo empilhado à esquerda". --------------------------------------------------------------- */ .cabecalho-partido { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: 36px; } @media (max-width: 860px) { .cabecalho-partido { grid-template-columns: 1fr; gap: 14px; align-items: start; } } /* --------------------------------------------------------------- Grade de equipamentos (seção Equipamentos da home) Foto em cima, nome e descrição embaixo. Já foi carrossel: com três aparelhos, esconder dois atrás de setas custava mais do que mostrava. --------------------------------------------------------------- */ .grade-equipamentos { display: grid; /* 250px: os quatro cards cabem numa linha no desktop, dois a dois no tablet. */ grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; } .cartao-equipamento { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); overflow: hidden; } .cartao-equipamento__foto { height: clamp(190px, 20vw, 230px); background: var(--cor-fundo-claro); } .cartao-equipamento__foto .foto-vaga { height: 100%; border: 0; border-radius: 0; } .cartao-equipamento__texto { padding: 24px 26px 28px; } .cartao-equipamento__titulo { font-size: var(--txt-2xl); font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .cartao-equipamento__apoio { font-size: var(--txt-base); line-height: 1.65; color: var(--cor-texto-fraco); } /* --------------------------------------------------------------- Grade de exames por grupo (seção Exames da home) Um cartão por grupo, numerado. O rodapé do cartão diz quantos exames o grupo tem e abre a lista num modal. A contagem sai do próprio src/_data/tabelaExames.json (filtro contarExames), então não tem como o número e a lista divergirem. --------------------------------------------------------------- */ .grade-exames { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; } .cartao-exames { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 26px 28px; } .cartao-exames__num { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--txt-md); font-weight: 600; color: var(--cor-texto-fraco); margin-bottom: 16px; } .cartao-exames__titulo { font-size: var(--txt-2xl); font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .cartao-exames__resumo { font-size: var(--txt-base); line-height: 1.6; color: var(--cor-texto-fraco); /* empurra o rodapé para a base, para os cartões fecharem alinhados */ margin-bottom: auto; } /* Rodapé: a contagem e o "+" que abre o grupo. É um link de verdade para exames.html — sem JavaScript ele navega em vez de não fazer nada. */ .cartao-exames__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cor-borda); font-size: var(--txt-md); font-weight: 600; color: var(--cor-texto-suave); text-decoration: none; } .cartao-exames__rodape:hover { color: var(--cor-primaria); } .cartao-exames__mais { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cor-fundo-azul); color: var(--cor-primaria); font-size: var(--txt-xl); font-weight: 700; line-height: 1; } .cartao-exames__rodape:hover .cartao-exames__mais { background: var(--cor-primaria); color: #fff; } /* O cartão de ajuda fecha a grade: fundo escuro e o botão vermelho. */ .cartao-exames--ajuda { background: var(--cor-escura); border-color: var(--cor-escura); color: #fff; justify-content: center; gap: 8px; } .cartao-exames--ajuda .cartao-exames__resumo { color: rgba(255, 255, 255, .8); margin-bottom: 18px; } .cartao-exames--ajuda .btn { align-self: flex-start; } /* Lista de um grupo, dentro do modal. Duas colunas quando cabe: a radiologia médica tem 67 itens e em coluna única viraria rolagem sem fim. */ .lista-exames + .lista-exames { margin-top: 26px; } .lista-exames__titulo { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-primaria); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--cor-borda); } .lista-exames__itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 4px 28px; list-style: none; } .lista-exames__itens li { padding: 7px 0; font-size: var(--txt-base); line-height: 1.5; color: var(--cor-texto-suave); } /* --------------------------------------------------------------- Busca de convênio (seção Convênios da home) Campo e botão empilhados, do tamanho da coluna. Sem JavaScript o botão já abre o WhatsApp com a pergunta pronta: o campo é atalho, não o único caminho. --------------------------------------------------------------- */ .busca-convenio { display: grid; gap: 12px; align-content: start; } .busca-convenio__campo { width: 100%; min-height: 52px; padding: 14px 20px; border: 1px solid var(--cor-campo-borda); border-radius: var(--raio-pilula); background: #fff; font-family: inherit; font-size: var(--txt-base); color: var(--cor-texto); } .busca-convenio__campo::placeholder { color: var(--cor-texto-fraco); } .busca-convenio__botao { border-radius: var(--raio-pilula); justify-content: center; } .busca-convenio__resposta:empty { display: none; } .busca-convenio__resposta { padding: 12px 18px; border-radius: var(--raio); font-size: var(--txt-md); font-weight: 600; line-height: 1.5; } [data-achou="sim"] .busca-convenio__resposta { background: #E7F4EC; color: #14622F; } [data-achou="nao"] .busca-convenio__resposta { background: #FFF4D6; color: #7A4A00; } /* O link do WhatsApp nasce dentro da resposta de "nao encontramos" — herda a cor dela e se distingue pelo sublinhado, para nao competir com o botao principal da caixa, que leva a pagina de convenios. */ .busca-convenio__zap { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* --------------------------------------------------------------- Grade de planos credenciados (.grade-convenios) A lista da pagina de convenios. Ao contrario do carrossel da home, que anda e mostra alguns por vez, aqui todos aparecem de uma vez — quem abriu esta pagina veio conferir se o proprio plano esta nela, e nao quer esperar a fila passar. A altura do logo e fixa para todos: cada marca manda um arquivo com uma sobra diferente em volta, e sem isso as linhas ficariam desencontradas. `contain` cuida das proporcoes. --------------------------------------------------------------- */ .grade-convenios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .convenio-cartao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 16px; text-align: center; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); } /* Mesma area de logo da placa do carrossel da home (clamp(100px, 11vw, 136px) de placa, menos o respiro): o logo chega aqui no mesmo tamanho que a pessoa viu na primeira pagina. O arquivo ja vem centralizado em 440x180, entao so precisa preencher a area — `contain` cuida da proporcao. */ .convenio-cartao__logo { display: block; width: 100%; max-width: none; height: clamp(76px, 8vw, 104px); object-fit: contain; } /* No celular o cartao grande caberia sozinho por linha, e os 13 virariam uma rolagem longa demais para quem so quer bater o olho e achar o proprio plano. Duas colunas fixas, com o logo proporcionalmente menor. */ @media (max-width: 560px) { .grade-convenios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .convenio-cartao { padding: 16px 12px; gap: 10px; } .convenio-cartao__logo { height: clamp(52px, 15vw, 76px); } } .convenio-cartao__nome { display: flex; align-items: center; /* Duas linhas reservadas para todo mundo. Sem isto, o unico nome que quebra ("Bradesco Dental") deixava a linha inteira dele mais alta que as outras. */ min-height: 2.6em; font-size: var(--txt-md); font-weight: 600; line-height: 1.3; color: var(--cor-texto-suave); } /* As pontas do carrossel de logos desbotam, em vez de cortarem a placa na metade — assim fica claro que a fila continua dos dois lados. */ .carrossel { mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } /* --------------------------------------------------------------- Passos numerados (seção Resultados da home) --------------------------------------------------------------- */ .passos-numerados { display: grid; gap: 14px; max-width: 48ch; list-style: none; } .passos-numerados li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--txt-base); line-height: 1.6; color: var(--cor-texto-suave); } .passos-numerados__num { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cor-fundo-azul); color: var(--cor-primaria); font-size: var(--txt-sm); font-weight: 800; } /* --------------------------------------------------------------- Cartão do portal do paciente Sem formulário de protocolo: quem autentica é o portal Image2Doc, e um campo aqui só pareceria login sem ser. O botão leva direto. --------------------------------------------------------------- */ .cartao-portal { background: var(--cor-escura); color: #fff; border-radius: var(--raio-grande); padding: clamp(26px, 4vw, 34px); } .cartao-portal__titulo { font-size: var(--titulo-sm); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; } .cartao-portal__apoio { font-size: var(--txt-base); line-height: 1.6; color: rgba(255, 255, 255, .82); margin-bottom: 22px; } .cartao-portal__botao { width: 100%; justify-content: center; margin-bottom: 18px; } .cartao-portal__nota { font-size: var(--txt-md); line-height: 1.6; color: rgba(255, 255, 255, .72); } .cartao-portal__nota + .cartao-portal__nota { margin-top: 10px; } .cartao-portal__nota strong { color: #fff; font-weight: 600; } .cartao-portal__nota a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------- Cartão da clínica (seção Contato da home): mapa em cima, dados e as duas ações embaixo, tudo numa peça só. --------------------------------------------------------------- */ .cartao-clinica { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); overflow: hidden; } /* O mapa herda a borda do cartão: a dele viraria uma linha dupla. */ .cartao-clinica .mapa-caixa { border: 0; border-radius: 0; border-bottom: 1px solid var(--cor-borda); } .cartao-clinica__corpo { padding: clamp(22px, 3vw, 28px); } .cartao-clinica__rotulo { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-fraco); margin-bottom: 4px; } .cartao-clinica__valor { font-size: var(--txt-lg); line-height: 1.5; color: var(--cor-texto); } .cartao-clinica__link { font-weight: 700; text-decoration: none; color: var(--cor-primaria); } .cartao-clinica__link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Cartão ao lado do título dos convênios: uma linha por tipo de exame, cada uma com a ação que serve para ela. */ .convenios-resumo { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: 6px 28px; } .convenios-resumo__linha { padding: 20px 0; } .convenios-resumo__linha + .convenios-resumo__linha { border-top: 1px solid var(--cor-borda); } .convenios-resumo__rotulo { font-size: var(--txt-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-fraco); margin-bottom: 6px; } .convenios-resumo__valor { font-size: var(--txt-xl); font-weight: 700; letter-spacing: -.01em; color: var(--cor-texto); margin-bottom: 10px; } .convenios-resumo__link { display: inline-block; font-size: var(--txt-md); font-weight: 600; color: var(--cor-primaria); } .convenios-resumo__link:hover { color: var(--cor-escura); } /* Com o cartão mais alto que o texto, alinhar pela base deixava o título solto. */ .cabecalho-partido--centro { align-items: center; } /* ========================================================================== AVISO DE PRIVACIDADE E COOKIES (LGPD) — src/_includes/consentimento.njk Faixa presa ao pé da tela, sem escurecer o site: dá para ler a página antes de escolher. Os dois botões têm o mesmo tamanho e peso visual próximo — recusar precisa ser tão fácil quanto aceitar. ========================================================================== */ .consentimento { position: fixed; inset: auto 0 0 0; z-index: 200; padding: 0 var(--respiro-lateral) 16px; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; } .consentimento--visivel { opacity: 1; transform: none; } .consentimento__caixa { pointer-events: auto; max-width: var(--largura-max); margin: 0 auto; display: flex; align-items: center; gap: 20px 32px; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: 0 12px 40px rgba(16, 32, 64, .18); padding: 20px 24px; } .consentimento__conteudo { flex: 1 1 auto; min-width: 0; } .consentimento__titulo { font-size: var(--txt-base); font-weight: 700; color: var(--cor-texto); margin-bottom: 4px; } .consentimento__texto { font-size: var(--txt-sm); line-height: 1.55; color: var(--cor-texto-fraco); } .consentimento__texto a { color: var(--cor-primaria); font-weight: 600; } .consentimento__acoes { flex: 0 0 auto; display: flex; gap: 10px; } .consentimento__acoes .btn { min-width: 170px; } @media (max-width: 860px) { .consentimento { padding: 0 10px 10px; } .consentimento__caixa { flex-direction: column; align-items: stretch; padding: 18px; } .consentimento__acoes .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding-inline: 10px; font-size: var(--txt-sm); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .consentimento { transition: none; transform: none; } } /* "Preferências de cookies" no rodapé: botão com cara de link, igual aos vizinhos. */ .rodape-cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .rodape-cookies:hover { color: #fff; }