/* Enfermeira Deimy Miranda · tokens da marca (web)
Gerado por _gerador/gerar.js a partir de identidade-visual/_fonte/marca.json (versão 1.0 (rebranding 31/10/2026)).
NÃO edite à mão: mude marca.json e rode o gerador de novo.
Antes deste arquivo, carregue as fontes (ver LEIA-ME.txt):
https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Lora:ital,wght@1,500&display=swap
Só as seis cores de marca.json, nenhum tom derivado. Contrastes: WCAG 2.x, calculados pelo gerador.
Todo token de texto passa 4,5:1 no fundo e na superfície do seu tema. */
:root {
/* ---------- Cores da marca (marca.json, imutáveis) ---------- */
--dm-caramelo: #B97A44; /* Cor-mãe */
--dm-esmeralda: #1F5C55; /* Contraste e profundidade, vinda dos uniformes */
--dm-marrom: #865E34; /* Texto sobre fundo claro (marrom não tão escuro) */
--dm-areia: #D8B496; /* Apoio */
--dm-creme: #FFF0D6; /* Fundo claro principal (o creme do arco da logo) */
--dm-branco: #FFFFFF; /* Texto sobre véu, caramelo, esmeralda e marrom */
/* ---------- Tipografia ---------- */
--dm-fonte: "Montserrat", "Segoe UI", Arial, sans-serif; /* tudo: títulos, texto, rótulos, botões */
--dm-fonte-destaque: "Lora", Georgia, "Times New Roman", serif; /* só itálico 500: até 5 palavras e numerais grandes */
--dm-peso-texto: 400;
--dm-peso-lista: 500;
--dm-peso-subtitulo: 600; /* subtítulos, rótulos, botões */
--dm-peso-titulo: 700;
--dm-peso-destaque: 500;
/* escala fluida: mínimo no celular (390 px), máximo no desktop (1440 px) */
--dm-fs-display: clamp(2.75rem, 1.6rem + 4.7vw, 5.25rem); /* 44 a 84 px · título branco sobre o véu */
--dm-fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* 36 a 60 px */
--dm-fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem); /* 30 a 48 px */
--dm-fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22 a 28 px */
--dm-fs-grande: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20 a 24 px · parágrafo de abertura */
--dm-fs-texto: 1.125rem; /* 18 px · corpo, nunca menor */
--dm-fs-pequeno: 1rem; /* 16 px · menor tamanho permitido */
--dm-fs-rotulo: 1rem; /* 16 px · Montserrat 600, caixa-alta, +0,18em */
--dm-fs-numeral: clamp(2.75rem, 2.2rem + 2vw, 4rem); /* 44 a 64 px · Lora itálico */
--dm-lh-titulo: 1.1;
--dm-lh-texto: 1.6;
--dm-tracking-titulo: -0.01em;
--dm-tracking-rotulo: 0.18em;
--dm-medida: 62ch; /* largura máxima de linha de texto */
/* ---------- Espaçamento (base 4 px) ---------- */
--dm-e-1: 0.25rem; /* 4 */
--dm-e-2: 0.5rem; /* 8 */
--dm-e-3: 0.75rem; /* 12 */
--dm-e-4: 1rem; /* 16 */
--dm-e-5: 1.25rem; /* 20 */
--dm-e-6: 1.5rem; /* 24 */
--dm-e-8: 2rem; /* 32 */
--dm-e-10: 2.5rem; /* 40 · distância mínima entre forma e texto */
--dm-e-12: 3rem; /* 48 */
--dm-e-16: 4rem; /* 64 */
--dm-e-20: 5rem; /* 80 */
--dm-e-24: 6rem; /* 96 */
--dm-e-32: 8rem; /* 128 */
--dm-gutter: clamp(1rem, 0.375rem + 2.5vw, 2.5rem); /* 16 a 40 px · margem lateral */
--dm-secao-espaco: clamp(4rem, 2.8rem + 5vw, 7.5rem); /* 64 a 120 px · respiro vertical de seção */
--dm-largura-max: 75rem; /* 1200 px */
/* ---------- Forma ---------- */
--dm-raio: 12px; /* botões, campos */
--dm-raio-g: 24px; /* cartões */
--dm-raio-reto: 0; /* bloco ou faixa sobre foto: sempre borda reta */
--dm-alvo-min: 48px; /* alvo de toque mínimo (público idoso) */
--dm-foco-largura: 3px;
--dm-foco-distancia: 3px;
/* ---------- Véu (foto inteira, cor chapada, sem gradiente) ---------- */
--dm-veu-cor: var(--dm-caramelo);
--dm-veu-opacidade: 0.7; /* padrão */
--dm-veu-opacidade-forte: 0.8; /* foto clara atrás do título */
/* ---------- Formas orgânicas (fitas e seixos de _fonte/fitas.js) ---------- */
--dm-forma-traco: clamp(1rem, 0.75rem + 1vw, 1.75rem); /* 16 a 28 px · traço da fita (não escala com o desenho) */
--dm-forma-traco-fino: calc(var(--dm-forma-traco) * 0.53); /* fita fina que acompanha um seixo (18/34 do traço) */
/* ---------- Movimento ---------- */
--dm-dur-rapida: 150ms; /* hover, foco */
--dm-dur-media: 300ms; /* entrada de elementos */
--dm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* ---------- Papéis · tema creme (padrão) ---------- */
--dm-fundo: var(--dm-creme);
--dm-superficie: var(--dm-branco);
--dm-cartao-borda: var(--dm-branco); /* igual à superfície: cartão sem contorno aparente */
--dm-texto: var(--dm-marrom); /* 5,10:1 no fundo · 5,73:1 na superfície */
--dm-texto-2: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-titulo: var(--dm-marrom); /* 5,10:1 no fundo · 5,73:1 na superfície */
--dm-destaque: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-link: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-rotulo: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-acento: var(--dm-caramelo); /* 3,15:1 no fundo · 3,54:1 na superfície: SÓ numeral grande (>= 40 px) e gráfico, nunca texto */
--dm-botao-fundo: var(--dm-esmeralda); /* texto do botão: 7,72:1 */
--dm-botao-texto: var(--dm-branco); /* 7,72:1 no botão · 5,73:1 no hover */
--dm-botao-hover: var(--dm-marrom); /* texto do botão: 5,73:1 */
--dm-foco: var(--dm-esmeralda); /* 6,87:1 no fundo (mínimo 3:1 para contorno) */
--dm-borda: var(--dm-areia); /* decorativa (1,72:1): divisórias, nunca única pista de um controle */
--dm-borda-forte: var(--dm-marrom); /* 5,10:1: contorno de campo de formulário */
--dm-fita-1: var(--dm-areia); /* cor da forma orgânica (fita ou seixo), tom sobre tom; nunca leva texto */
--dm-fita-2: var(--dm-caramelo); /* fita fina que acompanha um seixo */
}
/* ---------- Tema creme: padrão: fundo creme, texto marrom ---------- */
[data-tema="creme"] {
--dm-fundo: var(--dm-creme);
--dm-superficie: var(--dm-branco);
--dm-cartao-borda: var(--dm-branco); /* igual à superfície: cartão sem contorno aparente */
--dm-texto: var(--dm-marrom); /* 5,10:1 no fundo · 5,73:1 na superfície */
--dm-texto-2: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-titulo: var(--dm-marrom); /* 5,10:1 no fundo · 5,73:1 na superfície */
--dm-destaque: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-link: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-rotulo: var(--dm-esmeralda); /* 6,87:1 no fundo · 7,72:1 na superfície */
--dm-acento: var(--dm-caramelo); /* 3,15:1 no fundo · 3,54:1 na superfície: SÓ numeral grande (>= 40 px) e gráfico, nunca texto */
--dm-botao-fundo: var(--dm-esmeralda); /* texto do botão: 7,72:1 */
--dm-botao-texto: var(--dm-branco); /* 7,72:1 no botão · 5,73:1 no hover */
--dm-botao-hover: var(--dm-marrom); /* texto do botão: 5,73:1 */
--dm-foco: var(--dm-esmeralda); /* 6,87:1 no fundo (mínimo 3:1 para contorno) */
--dm-borda: var(--dm-areia); /* decorativa (1,72:1): divisórias, nunca única pista de um controle */
--dm-borda-forte: var(--dm-marrom); /* 5,10:1: contorno de campo de formulário */
--dm-fita-1: var(--dm-areia); /* cor da forma orgânica (fita ou seixo), tom sobre tom; nunca leva texto */
--dm-fita-2: var(--dm-caramelo); /* fita fina que acompanha um seixo */
}
/* ---------- Tema branco: leitura longa: fundo branco, cartões creme ---------- */
[data-tema="branco"] {
--dm-fundo: var(--dm-branco);
--dm-superficie: var(--dm-creme);
--dm-cartao-borda: var(--dm-creme); /* igual à superfície: cartão sem contorno aparente */
--dm-texto: var(--dm-marrom); /* 5,73:1 no fundo · 5,10:1 na superfície */
--dm-texto-2: var(--dm-esmeralda); /* 7,72:1 no fundo · 6,87:1 na superfície */
--dm-titulo: var(--dm-marrom); /* 5,73:1 no fundo · 5,10:1 na superfície */
--dm-destaque: var(--dm-esmeralda); /* 7,72:1 no fundo · 6,87:1 na superfície */
--dm-link: var(--dm-esmeralda); /* 7,72:1 no fundo · 6,87:1 na superfície */
--dm-rotulo: var(--dm-esmeralda); /* 7,72:1 no fundo · 6,87:1 na superfície */
--dm-acento: var(--dm-caramelo); /* 3,54:1 no fundo · 3,15:1 na superfície: SÓ numeral grande (>= 40 px) e gráfico, nunca texto */
--dm-botao-fundo: var(--dm-esmeralda); /* texto do botão: 7,72:1 */
--dm-botao-texto: var(--dm-branco); /* 7,72:1 no botão · 5,73:1 no hover */
--dm-botao-hover: var(--dm-marrom); /* texto do botão: 5,73:1 */
--dm-foco: var(--dm-esmeralda); /* 7,72:1 no fundo (mínimo 3:1 para contorno) */
--dm-borda: var(--dm-areia); /* decorativa (1,93:1): divisórias, nunca única pista de um controle */
--dm-borda-forte: var(--dm-marrom); /* 5,73:1: contorno de campo de formulário */
--dm-fita-1: var(--dm-areia); /* cor da forma orgânica (fita ou seixo), tom sobre tom; nunca leva texto */
--dm-fita-2: var(--dm-caramelo); /* fita fina que acompanha um seixo */
}
/* ---------- Tema esmeralda: seção escura: fundo esmeralda, texto branco e creme ---------- */
[data-tema="esmeralda"] {
--dm-fundo: var(--dm-esmeralda);
--dm-superficie: var(--dm-esmeralda); /* igual ao fundo: o cartão se destaca pelo contorno */
--dm-cartao-borda: var(--dm-areia); /* contorno do cartão (4,00:1 no fundo) */
--dm-texto: var(--dm-branco); /* 7,72:1 no fundo · 7,72:1 na superfície */
--dm-texto-2: var(--dm-creme); /* 6,87:1 no fundo · 6,87:1 na superfície */
--dm-titulo: var(--dm-branco); /* 7,72:1 no fundo · 7,72:1 na superfície */
--dm-destaque: var(--dm-creme); /* 6,87:1 no fundo · 6,87:1 na superfície */
--dm-link: var(--dm-creme); /* 6,87:1 no fundo · 6,87:1 na superfície */
--dm-rotulo: var(--dm-creme); /* 6,87:1 no fundo · 6,87:1 na superfície */
--dm-acento: var(--dm-creme); /* 6,87:1: numerais grandes e detalhes gráficos */
--dm-botao-fundo: var(--dm-creme); /* texto do botão: 6,87:1 */
--dm-botao-texto: var(--dm-esmeralda); /* 6,87:1 no botão · 7,72:1 no hover */
--dm-botao-hover: var(--dm-branco); /* texto do botão: 7,72:1 */
--dm-foco: var(--dm-creme); /* 6,87:1 no fundo (mínimo 3:1 para contorno) */
--dm-borda: var(--dm-areia); /* decorativa (4,00:1): divisórias, nunca única pista de um controle */
--dm-borda-forte: var(--dm-creme); /* 6,87:1: contorno de campo de formulário */
--dm-fita-1: var(--dm-caramelo); /* cor da forma orgânica (fita ou seixo), tom sobre tom; nunca leva texto */
--dm-fita-2: var(--dm-areia); /* fita fina que acompanha um seixo */
}
/* ---------- Tema marrom: rodapé e fundo escuro alternativo: fundo marrom, texto branco ---------- */
[data-tema="marrom"] {
--dm-fundo: var(--dm-marrom);
--dm-superficie: var(--dm-marrom); /* igual ao fundo: o cartão se destaca pelo contorno */
--dm-cartao-borda: var(--dm-creme); /* contorno do cartão (5,10:1 no fundo) */
--dm-texto: var(--dm-branco); /* 5,73:1 no fundo · 5,73:1 na superfície */
--dm-texto-2: var(--dm-creme); /* 5,10:1 no fundo · 5,10:1 na superfície */
--dm-titulo: var(--dm-branco); /* 5,73:1 no fundo · 5,73:1 na superfície */
--dm-destaque: var(--dm-creme); /* 5,10:1 no fundo · 5,10:1 na superfície */
--dm-link: var(--dm-creme); /* 5,10:1 no fundo · 5,10:1 na superfície */
--dm-rotulo: var(--dm-creme); /* 5,10:1 no fundo · 5,10:1 na superfície */
--dm-acento: var(--dm-creme); /* 5,10:1: numerais grandes e detalhes gráficos */
--dm-botao-fundo: var(--dm-creme); /* texto do botão: 5,10:1 */
--dm-botao-texto: var(--dm-marrom); /* 5,10:1 no botão · 5,73:1 no hover */
--dm-botao-hover: var(--dm-branco); /* texto do botão: 5,73:1 */
--dm-foco: var(--dm-creme); /* 5,10:1 no fundo (mínimo 3:1 para contorno) */
--dm-borda: var(--dm-areia); /* decorativa (2,97:1): divisórias, nunca única pista de um controle */
--dm-borda-forte: var(--dm-creme); /* 5,10:1: contorno de campo de formulário */
--dm-fita-1: var(--dm-caramelo); /* cor da forma orgânica (fita ou seixo), tom sobre tom; nunca leva texto */
--dm-fita-2: var(--dm-areia); /* fita fina que acompanha um seixo */
}
/* Todo elemento com data-tema pinta o próprio fundo (cor chapada) */
[data-tema] { background-color: var(--dm-fundo); color: var(--dm-texto); }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--dm-fonte); font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background-color: var(--dm-fundo); color: var(--dm-texto); font-size: var(--dm-fs-texto); font-weight: var(--dm-peso-texto); line-height: var(--dm-lh-texto); }
h1, h2, h3, h4 { font-family: var(--dm-fonte); font-weight: var(--dm-peso-titulo); line-height: var(--dm-lh-titulo); letter-spacing: var(--dm-tracking-titulo); color: var(--dm-titulo); margin: 0 0 var(--dm-e-4); text-wrap: balance; }
h1 { font-size: var(--dm-fs-h1); }
h2 { font-size: var(--dm-fs-h2); }
h3 { font-size: var(--dm-fs-h3); }
p { margin: 0 0 var(--dm-e-4); max-width: var(--dm-medida); }
strong, b { font-weight: var(--dm-peso-titulo); }
img, video { max-width: 100%; height: auto; }
/* Link: sempre sublinhado (não depende só da cor) */
a { color: var(--dm-link); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--dm-dur-rapida) var(--dm-ease); }
a:hover { text-decoration-thickness: 0.16em; }
/* Foco visível em tudo que recebe teclado */
:focus-visible { outline: var(--dm-foco-largura) solid var(--dm-foco); outline-offset: var(--dm-foco-distancia); }
/* ---------- Tipografia da marca ---------- */
/* Destaque: Lora itálico, trecho curto de até 5 palavras dentro de um título. Nunca caixa-alta, nunca texto corrido. */
.dm-destaque { font-family: var(--dm-fonte-destaque); font-style: italic; font-weight: var(--dm-peso-destaque); color: var(--dm-destaque); letter-spacing: 0; text-transform: none; }
/* Rótulo: Montserrat 600, caixa-alta, +0,18em. Sobre creme é esmeralda (caramelo pequeno reprova). */
.dm-rotulo { display: block; font-family: var(--dm-fonte); font-size: var(--dm-fs-rotulo); font-weight: var(--dm-peso-subtitulo); letter-spacing: var(--dm-tracking-rotulo); text-transform: uppercase; line-height: 1.4; color: var(--dm-rotulo); margin: 0 0 var(--dm-e-3); }
.dm-grande { font-size: var(--dm-fs-grande); line-height: 1.5; }
.dm-numeral { display: block; font-family: var(--dm-fonte-destaque); font-style: italic; font-weight: var(--dm-peso-destaque); font-size: var(--dm-fs-numeral); line-height: 1; color: var(--dm-acento); }
.dm-display { font-size: var(--dm-fs-display); }
/* ---------- Layout ---------- */
.dm-container { width: min(100% - 2 * var(--dm-gutter), var(--dm-largura-max)); margin-inline: auto; }
.dm-secao { padding-block: var(--dm-secao-espaco); }
.dm-grade { display: grid; gap: var(--dm-e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.dm-cartao { background-color: var(--dm-superficie); color: var(--dm-texto); border: 2px solid var(--dm-cartao-borda); border-radius: var(--dm-raio-g); padding: var(--dm-e-8); }
.dm-cartao > :last-child { margin-bottom: 0; }
/* Bloco chapado de borda reta (use com data-tema="esmeralda" sobre foto) */
.dm-bloco { background-color: var(--dm-fundo); color: var(--dm-texto); border-radius: var(--dm-raio-reto); padding: var(--dm-e-8); }
.dm-bloco > :last-child { margin-bottom: 0; }
/* ---------- Botão ---------- */
.dm-botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--dm-e-2); min-height: var(--dm-alvo-min); min-width: var(--dm-alvo-min); padding: var(--dm-e-3) var(--dm-e-6); border: 2px solid transparent; border-radius: var(--dm-raio); background-color: var(--dm-botao-fundo); color: var(--dm-botao-texto); font-family: var(--dm-fonte); font-size: var(--dm-fs-texto); font-weight: var(--dm-peso-subtitulo); line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dm-dur-rapida) var(--dm-ease); }
.dm-botao:hover { background-color: var(--dm-botao-hover); color: var(--dm-botao-texto); }
/* ---------- Véu: foto + camada caramelo chapada (sem gradiente) ----------
Título
...
Direto no véu, SÓ o título branco Montserrat 700 grande (até 3 linhas), sobre a área mais escura da foto.
Qualquer outro texto vai num .dm-bloco com data-tema="esmeralda". Retrato da Deimy ou de paciente: sem véu. */
.dm-veu { position: relative; isolation: isolate; overflow: hidden; background-color: var(--dm-veu-cor); --dm-titulo: var(--dm-branco); --dm-fita-1: var(--dm-caramelo); color: var(--dm-branco); }
.dm-veu::after { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--dm-veu-cor); opacity: var(--dm-veu-opacidade); pointer-events: none; }
.dm-veu--forte { --dm-veu-opacidade: var(--dm-veu-opacidade-forte); }
.dm-veu > .dm-veu__foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dm-veu > :not(.dm-veu__foto) { position: relative; z-index: 2; }
/* ---------- Formas orgânicas (SVG inline com a geometria de _fonte/fitas.js) ----------
Uma forma por seção, e não em todas as seções (respiro). Sempre cortada pela borda da seção,
tom sobre tom (--dm-fita-1), a 40 px ou mais de qualquer texto, logo ou botão (ou por trás de um
bloco chapado). A seção recebe .dm-com-forma; o