/* * site.css — regras não críticas do site público (tudo que não é necessário * para o primeiro paint do cabeçalho/hero, que fica inline em — ver * templates/critical.css e o mecanismo de carregamento assíncrono no * de cada página gerada). Usa os tokens de assets/design-tokens/tokens.css * (linkado como css/tokens.css) — não redeclara cor/tipografia/espaçamento. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Hero ---------- * As regras do hero saíram daqui e foram para templates/critical.css: o hero é * a primeira dobra, e este arquivo é carregado de forma assíncrona — o que * estiver aqui só chega depois do primeiro paint. Lá também está o registro do * defeito do aspect-ratio que isto substituiu. */ /* ---------- Seções gerais ---------- */ /* O padding assimétrico de antes (80px 5px 25px 10px) encostava o conteúdo na borda em tela estreita e dava respiros diferentes acima e abaixo. O recuo lateral é do .container, que já existe para isso. */ .secao { padding: var(--espaco-10) 0; } .secao-atendimento { background: var(--cor-primaria-50); } .secao--alt { background: var(--cor-fundo-secao); } .secao__cabecalho { margin-bottom: var(--espaco-6); } /* Variante centralizada, usada em "Como funciona". O sobretítulo nomeia a seção e libera o

para dizer o que ela entrega — antes o h2 fazia os dois papéis e sobrava "Como funciona" como título de uma seção que explica justamente isso. */ .secao__cabecalho--centro { text-align: center; max-width: 44rem; margin-left: auto; margin-right: auto; } .secao__cabecalho--centro .secao__apoio { margin-left: auto; margin-right: auto; font-size: 18px; } .secao__sobretitulo { margin: 0 0 var(--espaco-3); font-size: var(--texto-xs); font-weight: var(--peso-negrito); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cor-primaria-700); } /* Alinhado à esquerda, e não centralizado: as cinco seções centralizadas davam o mesmo ritmo a coisas de peso diferente, e um título centralizado sobre conteúdo alinhado à esquerda não tem eixo comum. */ /* --peso-medio (500), o mesmo do .hero__titulo: o peso leve é o padrão de título da página. Em 1,85rem o 800 fechava o miolo das letras. O tamanho é que carrega o título. */ .secao__titulo { font-size: var(--texto-2xl); font-weight: var(--peso-medio); letter-spacing: -0.01em; margin: 0; } .secao__apoio { margin: var(--espaco-2) 0 0; font-size: 18px; color: var(--cor-texto-secundario); max-width: 34em; } /* ---------- Como funciona (fluxo de cinco etapas) ---------- */ .fluxo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-8); } .fluxo__etapa { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Ladrilho quadrado arredondado, e não mais o círculo com a pastilha do número: quem numera agora é o rótulo "Passo N" logo abaixo, em palavras — que é o que um leitor de tela também lê. */ .fluxo__icone { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: var(--raio-md); background: var(--cor-primaria-100); color: var(--cor-primaria-700); } .fluxo__icone svg { width: 30px; height: 30px; } .fluxo__passo { margin-top: var(--espaco-6); margin-bottom: 10px; font-size: var(--texto-xs); font-weight: var(--peso-negrito); text-transform: uppercase; letter-spacing: 0.08em; /* primaria-700 e não -500: sobre branco o 700 mede 6:1; o 500 mede 2,8:1 e reprovaria num rótulo de 12,8px. */ color: var(--cor-primaria-700); } .fluxo__titulo { margin: var(--espaco-1) 0 0; font-size: var(--texto-base); font-weight: var(--peso-medio); } .fluxo__texto { margin: var(--espaco-2) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-secundario); max-width: 24em; } /* Cinco colunas só a partir de 992px: abaixo disso cada uma teria menos de 180px e "Consulta por vídeo" quebraria em três linhas. Até lá, empilhado. */ @media (min-width: 992px) { /* Sem divisória entre as colunas: o que as separa é o espaço. */ .fluxo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-8); } } /* Com cinco colunas, aumentar o respiro entre elas sai da largura do texto: dentro dos 1072px úteis do container, ir de 32px para 48px de gap tirava 13px de cada coluna. A partir de 1360px a lista estoura o container em 80px de cada lado (e SÓ ela), então o respiro é de graça: as colunas ganham largura em vez de perder. Gatilho em 1360 e não antes porque abaixo disso a margem lateral da página ficaria menor que 64px. */ @media (min-width: 1360px) { .fluxo { margin-inline: -80px; } } /* Nota, não alerta. --cor-aviso-* é o tom de ERRO do sistema; numa página de venda a caixa amarela lia como algo dando errado. O texto continua visível, como rodapé da seção. */ .nota-legal { margin: var(--espaco-6) 0 0; padding-left: var(--espaco-3); border-left: 3px solid var(--cor-borda); font-size: var(--texto-xs); color: var(--cor-texto-secundario); max-width: 46em; } /* ---------- Cobertura nacional ---------- */ .cobertura__grid { display: grid; gap: var(--espaco-6); align-items: center; } .cobertura__lista { list-style: none; margin: var(--espaco-6) 0 0; padding: 0; display: grid; gap: var(--espaco-4); } .cobertura__item { display: flex; gap: var(--espaco-3); } .cobertura__icone { display: flex; align-items: center; justify-content: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--raio-sm); background: var(--cor-primaria-100); color: var(--cor-primaria-700); } .cobertura__icone svg { width: 22px; height: 22px; } .cobertura__item-titulo { display: block; font-size: var(--texto-base); font-weight: var(--peso-medio); } .cobertura__item-texto { display: block; margin-top: 2px; font-size: var(--texto-sm); color: var(--cor-texto-secundario); } /* O PNG do mapa tem fundo BRANCO, não transparente. Sobre o tingido de --cor-primaria-50 ele aparecia como um retângulo branco; multiply descarta o branco sem precisar reeditar a imagem. */ .cobertura__mapa { width: 100%; height: auto; mix-blend-mode: multiply; } @media (min-width: 768px) { /* 1fr / 340px e não 1fr / 1.2fr: o mapa é apoio, o texto é o argumento. Com 1.2fr o PNG de 963x997 ficava maior que o texto e a coluna de leitura sobrava cercada de vazio. */ .cobertura__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--espaco-8); } } /* ---------- Instale o app ---------- */ /* Os três não são etapas de uma sequência (ver o comentário no template), então nada de número: cada um leva o ícone da sua plataforma. */ .plataformas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-8); } /* Mesma anatomia de .fluxo__etapa: coluna centralizada, ladrilho de ícone no topo. Sem borda e sem fundo — o card fechado brigava com as colunas soltas de "Como funciona" logo acima. */ .plataforma { display: flex; flex-direction: column; align-items: center; text-align: center; } .plataforma__icone { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: var(--raio-md); /* primaria-100/700 como em .fluxo__icone. Era neutro-100/900 para diferenciar as duas seções; agora a diferença fica por conta do conteúdo, não da cor. */ background: var(--cor-primaria-100); color: var(--cor-primaria-700); } .plataforma__icone svg { width: 30px; height: 30px; } .plataforma__titulo { margin: var(--espaco-4) 0 0; font-size: var(--texto-base); font-weight: var(--peso-medio); } .plataforma__texto { margin: var(--espaco-2) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-secundario); max-width: 26em; } /* O CTA desceu para o fim da seção, centralizado: com o cabeçalho centralizado ele não tinha mais uma borda direita onde se apoiar. */ .instalar-app__acao { display: flex; justify-content: center; margin-top: var(--espaco-8); } @media (min-width: 992px) { /* justify-content: center porque as faixas têm largura MÁXIMA de 8rem — as três somam 448px dentro dos 1072px úteis do container, e sem isto o grid encosta o grupo todo na esquerda. Os ícones já estavam centralizados dentro de cada coluna; o que estava fora de eixo era o conjunto. */ .plataformas { grid-template-columns: repeat(3, minmax(0, 8rem)); gap: 0rem; justify-content: center; } } /* ---------- FAQ ---------- */ .faq { display: grid; gap: var(--espaco-4); } .faq-item { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-5); /* align-self: start para o item aberto não esticar o irmão da outra coluna. */ align-self: start; } .faq-item summary { cursor: pointer; font-weight: var(--peso-medio); padding: var(--espaco-3) 0; list-style: none; position: relative; padding-right: var(--espaco-6); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); line-height: 1; font-size: var(--texto-xl); /* primaria-700 e não -600: elemento gráfico pequeno, precisa dos 3:1. */ color: var(--cor-primaria-700); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { margin: 0 0 var(--espaco-4); color: var(--cor-texto-secundario); } @media (min-width: 768px) { /* Duas colunas: oito perguntas em fila única davam ~800px de seção que se rola sem ler. A ordem é por LINHA (1-2 / 3-4 / ...), que é a ordem do DOM e a do leitor de tela. */ .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-6); } } /* ---------- Rodapé ---------- */ .site-footer { border-top: 1px solid var(--cor-borda); background: var(--cor-fundo-secao); padding: var(--espaco-10) 0 var(--espaco-6); margin-top: var(--espaco-10); } .site-footer__topo { display: grid; gap: var(--espaco-8); padding-bottom: var(--espaco-8); } .site-footer__marca { max-width: 320px; } .site-footer__logo { display: inline-flex; align-items: center; gap: var(--espaco-2); font-size: 1.25rem; font-weight: 500; text-decoration: none; } .site-footer__logo-icone { width: 28px; height: 28px; flex-shrink: 0; } .site-footer__tagline { margin: var(--espaco-3) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-secundario); } .site-footer__coluna { display: flex; flex-direction: column; gap: var(--espaco-3); } .site-footer__coluna a { font-size: var(--texto-sm); color: var(--cor-texto); text-decoration: none; } .site-footer__coluna a:hover { color: var(--cor-primaria-700); text-decoration: underline; } .site-footer__titulo-coluna { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-negrito); color: var(--cor-neutro-900); text-transform: uppercase; letter-spacing: 0.03em; } .site-footer__base { display: flex; justify-content: center; padding-top: var(--espaco-6); border-top: 1px solid var(--cor-borda); } .site-footer__legal p { width: 300px; margin: 5px 0 var(--espaco-1); font-size: var(--texto-xs); color: var(--cor-texto-secundario); } .site-footer__copyright { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-secundario); white-space: nowrap; } @media (min-width: 768px) { .site-footer__topo { grid-template-columns: 1.4fr 1fr 1fr; } } /* ---------- Páginas de conteúdo (Termos/Política) ---------- */ /* padding-block e não o atalho: estas classes andam com .container, e o atalho zerava o recuo lateral dele — o texto encostava na borda no celular (visto na réplica, em /cadastro-medico.html). */ .conteudo-legal { max-width: 760px; margin: 0 auto; padding-block: var(--espaco-8); } .conteudo-legal h2 { margin-top: var(--espaco-8); font-size: var(--texto-xl); } .conteudo-legal p, .conteudo-legal li { color: var(--cor-texto-secundario); } .aviso-placeholder { background: var(--cor-erro-100); border: 1px solid var(--cor-erro-600); color: var(--cor-neutro-900); border-radius: var(--raio-md); padding: var(--espaco-4) var(--espaco-5); font-weight: var(--peso-medio); margin-bottom: var(--espaco-6); } /* ---------- Formulário (cadastro de médico) ---------- */ .form-cadastro { max-width: 640px; margin: 0 auto; padding-block: var(--espaco-8); } .form-grupo { margin-bottom: var(--espaco-5); } .form-grupo label { display: block; font-weight: var(--peso-medio); margin-bottom: var(--espaco-2); } .form-grupo .dica { font-size: var(--texto-xs); color: var(--cor-texto-secundario); margin-top: var(--espaco-1); } .form-grupo input[type="text"], .form-grupo input[type="email"], .form-grupo input[type="tel"], .form-grupo input[type="date"], .form-grupo select, .form-grupo textarea { width: 100%; padding: var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); font-size: var(--texto-base); font-family: var(--fonte-base); background: var(--cor-superficie); color: var(--cor-texto); } .form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus { border-color: var(--cor-primaria-500); } .form-linha { display: grid; gap: var(--espaco-4); } @media (min-width: 640px) { .form-linha--2 { grid-template-columns: 1fr 1fr; } } .form-erro { color: var(--cor-erro-600); font-size: var(--texto-sm); margin-top: var(--espaco-2); display: none; } .form-grupo.invalido .form-erro { display: block; } .form-grupo.invalido input, .form-grupo.invalido select, .form-grupo.invalido textarea { border-color: var(--cor-erro-600); } .upload-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-2); padding: var(--espaco-6) var(--espaco-4); border: 2px dashed var(--cor-primaria-400); border-radius: var(--raio-md); background: var(--cor-primaria-50); text-align: center; cursor: pointer; transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida); } .upload-dropzone:hover, .upload-dropzone--arrasto { border-color: var(--cor-primaria-600); background: var(--cor-primaria-100); } .upload-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .upload-dropzone__texto { color: var(--cor-primaria-700); font-size: var(--texto-sm); } .upload-dropzone__texto strong { text-decoration: underline; } .upload-dropzone__arquivo { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--cor-texto); } .upload-dropzone__arquivo:empty { display: none; } .upload-dropzone__remover { position: relative; z-index: 1; border: none; background: none; padding: 0; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--cor-erro-600); text-decoration: underline; cursor: pointer; } .upload-dropzone__remover[hidden] { display: none; } .form-grupo.invalido .upload-dropzone { border-color: var(--cor-erro-600); } .form-status { border-radius: var(--raio-md); padding: var(--espaco-4) var(--espaco-5); margin-top: var(--espaco-5); display: none; } .form-status--sucesso { background: var(--cor-sucesso-100); color: var(--cor-sucesso-600); display: block; } .form-status--erro { background: var(--cor-erro-100); color: var(--cor-erro-600); display: block; } /* ---------- Validação de documento ---------- */ .validar { max-width: 560px; margin: 0 auto; padding-block: var(--espaco-10); text-align: center; } .validar__resultado { margin-top: var(--espaco-6); border-radius: var(--raio-lg); padding: var(--espaco-6); text-align: left; box-shadow: var(--sombra-md); } .validar__resultado--ok { background: var(--cor-sucesso-100); border: 1px solid var(--cor-sucesso-600); } .validar__resultado--erro { background: var(--cor-erro-100); border: 1px solid var(--cor-erro-600); } .validar__resultado dt { font-weight: var(--peso-negrito); margin-top: var(--espaco-3); } .validar__resultado dd { margin: 0; color: var(--cor-texto-secundario); } .validar__spinner { margin: var(--espaco-6) auto; } /* ========================================================================== Cartão flutuante da Home — fila estimada, preço e o caminho para consultar. Marcação em templates/index.template.html, comportamento em js/widget-fila.js. Dois estados visuais: a PASTILHA (padrão de quem já fechou, e o padrão no celular) e o CARTÃO. O JavaScript alterna [hidden] entre os dois; o CSS não esconde nem mostra nada por conta própria, para não haver duas fontes de verdade sobre o que está visível. ========================================================================== */ /* O atributo [hidden] vale display: none pela folha do navegador — e QUALQUER declaração de display do autor ganha dele. Como o