:root {
  /* Cores da clínica Vivacis: rosa-blush e marrom-ameixa */
  --fundo: #fbf4f1;
  --texto: #4c3e41;
  --suave: #86716f;
  --destaque: #4c3e41;
  --destaque-escuro: #3a2f32;
  --destaque-claro: #f4dad1;
  --rosa: #c48b83;
  --rosa-claro: #f8e8e2;
  --cartao: #ffffff;
  --borda: #eedbd3;
  --azul: #4f86c6;
  --azul-claro: #e3eef9;
  --amarelo: #b8862b;
  --amarelo-claro: #fbf0d9;
  --roxo: #a8766f;
  --roxo-claro: #f4dad1;
  --verde: #3f8f5e;
  --erro: #b3261e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 17px;
  -webkit-tap-highlight-color: transparent;
}

.tela { min-height: 100dvh; }
.centro { display: flex; align-items: center; justify-content: center; }
.logo { width: 72px; height: 72px; }

.conteudo {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.conteudo.com-abas { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Dentro de cada aba, um respiro entre um cartão e outro. */
.aba { display: flex; flex-direction: column; gap: 22px; }
.aba > .linha { gap: 14px; }
.grupo { margin-top: 10px !important; margin-bottom: -8px !important; }

.topo { text-align: center; }

/* Marca VIVACIS · da gestação à amamentação */
.marca { margin: 14px 0 6px; }
.marca-nome {
  margin: 0; font-size: 2.3rem; font-weight: 300; letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--texto); line-height: 1.1;
}
.marca-frase {
  margin: 8px 0 0 !important; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.22em;
  font-weight: 500; color: var(--destaque-escuro) !important;
}
.instalar-link { margin-top: 4px; }
.botao.esqueci { background: rgba(255, 255, 255, 0.7); border: 2px solid var(--cartao); color: var(--texto); min-height: 54px; }
.botao.esqueci.piscando { border-color: var(--rosa); animation: pulsar-botao 1.6s ease-in-out 3; }
.marca::after {
  content: ""; display: block; width: 48px; height: 2px; background: var(--destaque); margin: 14px auto 0; border-radius: 2px;
}
.marca.pequena .marca-nome { font-size: 1.3rem; }
.marca.pequena .marca-frase { font-size: 0.85rem; }
.marca.pequena::after { margin-top: 10px; }
.boas-vindas { margin-top: 10px !important; line-height: 1.45; }
h1 { font-size: 1.75rem; margin: 12px 0 4px; }
h2 { font-size: 1.3rem; margin: 0; }
.topo p { margin: 0; color: var(--suave); }

/* ---------- Botões ---------- */
button { font: inherit; color: inherit; cursor: pointer; }
.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 12px 16px;
  border: 2px solid var(--borda); border-radius: 18px;
  background: var(--cartao); font-weight: 600; font-size: 1.05rem;
}
.botao:active { transform: scale(0.97); }
.botao.principal { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao.grande { min-height: 72px; font-size: 1.2rem; }
.botao.enorme { min-height: 120px; font-size: 1.35rem; flex-direction: column; gap: 4px; }
.botao.enorme .emoji { font-size: 2.4rem; line-height: 1; }
.botao:disabled { opacity: 0.6; }
.link {
  background: none; border: none; padding: 8px; color: var(--suave);
  text-decoration: underline; font-size: 0.95rem;
}
.linha { display: flex; gap: 12px; }
.linha > * { flex: 1; }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--cartao); border: 2px solid var(--borda); border-radius: 20px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.cartao.destaque { background: var(--destaque-claro); border-color: var(--destaque-claro); }
.rotulo { font-size: 0.9rem; color: var(--suave); margin: 0; }
.grande-texto { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pilula {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--destaque); color: #fff; font-weight: 700; text-transform: uppercase;
  font-size: 0.95rem; letter-spacing: 0.03em;
}

/* ---------- Mamada ---------- */
.pergunta { text-align: center; font-weight: 600; margin: 8px 0 0; }
.lado { position: relative; }
.lado .etiqueta {
  position: absolute; top: -10px; right: 8px; background: var(--texto); color: #fff;
  font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.relogio-cartao { text-align: center; align-items: center; }
.relogio {
  font-size: 4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  margin: 4px 0;
}
.ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ao-vivo::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--destaque);
  animation: pulsar 1.2s infinite;
}
@keyframes pulsar { 50% { opacity: 0.25; } }
.lados-tempo { display: flex; gap: 8px; width: 100%; }
.lados-tempo div {
  flex: 1; background: var(--fundo); border-radius: 12px; padding: 8px;
  font-variant-numeric: tabular-nums;
}
.lados-tempo strong { display: block; font-size: 1.2rem; }

/* ---------- Fraldas ---------- */
.contador {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
}
.contador .emoji { font-size: 2.4rem; }
.contador .numero { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.contador.xixi { background: var(--azul-claro); border-color: var(--azul-claro); }
.contador.coco { background: var(--amarelo-claro); border-color: var(--amarelo-claro); }
.mais {
  width: 96px; height: 72px; border-radius: 18px; border: none; color: #fff;
  font-size: 1.5rem; font-weight: 700;
}
.mais:active { transform: scale(0.94); }
.xixi .mais { background: var(--azul); }
.coco .mais { background: var(--amarelo); }

/* ---------- Sono ---------- */
.sono-cartao { background: var(--roxo-claro); border-color: var(--roxo-claro); text-align: center; align-items: center; }
.botao.sono { background: var(--roxo); border-color: var(--roxo); color: #fff; }
details.cartao summary { font-weight: 600; cursor: pointer; }
.campos-hora { display: flex; gap: 12px; }
.campos-hora label { flex: 1; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.lista li:last-child { border-bottom: none; }
.lista .hora { font-variant-numeric: tabular-nums; color: var(--suave); min-width: 48px; }
.lista .texto { flex: 1; }
.lista .apagar {
  border: none; background: none; color: var(--suave); font-size: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%;
}
.vazio { color: var(--suave); text-align: center; margin: 4px 0; }

/* ---------- Resumo ---------- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade .cartao { gap: 4px; }
.grade .emoji { font-size: 1.6rem; }

/* ---------- Formulário ---------- */
.alternar { display: flex; background: var(--destaque-claro); border-radius: 16px; padding: 4px; }
.alternar button {
  flex: 1; border: none; background: none; padding: 12px; border-radius: 12px; font-weight: 600;
}
.alternar button.ativo { background: var(--cartao); }
.formulario { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
label small { font-weight: 400; color: var(--suave); }
input[type="text"], input[type="email"], input[type="password"], input[type="time"], input[type="date"],
input[type="number"], input[type="tel"], input:not([type]) {
  font: inherit; padding: 14px; border-radius: 14px; border: 2px solid var(--borda);
  background: var(--cartao); color: var(--texto); width: 100%;
}
input:focus { outline: 3px solid var(--destaque-claro); border-color: var(--destaque); }
.aceite { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.aceite input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
.aceite a { color: var(--destaque-escuro); }
.erro { color: var(--erro); margin: 0; min-height: 1em; }

/* ---------- Cabeçalho e abas ---------- */
.cabecalho {
  max-width: 480px; margin: 0 auto; padding: 12px 16px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.abas {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; background: var(--cartao); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas button {
  flex: 1; border: none; background: none; padding: 8px 0 10px; min-height: 68px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.85rem; color: var(--suave); font-weight: 600;
}
.abas button span { font-size: 1.6rem; filter: grayscale(0.6); }
.abas button.ativa { color: var(--destaque-escuro); }
.abas button.ativa span { filter: none; }

/* ---------- Escolha da fase ---------- */
.botao.fase {
  justify-content: flex-start; text-align: left; min-height: 120px; padding: 20px; gap: 16px;
  font-size: 1.3rem;
}
.botao.fase .emoji { font-size: 3rem; }
.botao.fase small { display: block; font-weight: 400; font-size: 0.95rem; color: var(--suave); margin-top: 4px; }
.botao.fase.gestante { background: var(--roxo-claro); border-color: var(--roxo-claro); }
.botao.fase.lactante { background: var(--destaque-claro); border-color: var(--destaque-claro); }

.botao.fase.clinica { background: var(--rosa-claro); border-color: var(--borda); margin-top: 8px; }
.link.voltar { align-self: flex-start; padding-left: 0; }
.video-clinica { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.video-clinica video {
  width: 100%; max-height: 70vh; border-radius: 18px; background: var(--destaque); display: block;
  box-shadow: 0 6px 20px rgba(76, 62, 65, 0.18);
}
.fotos-clinica { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fotos-clinica img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.fotos-clinica img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ---------- Gestação ---------- */
.bebe-cartao { background: var(--roxo-claro); border-color: var(--roxo-claro); text-align: center; align-items: center; }
.bebe-cartao .fruta { font-size: 5rem; line-height: 1.1; }
.bebe-cartao .semanas { font-size: 1.6rem; font-weight: 700; margin: 0; }
.bebe-cartao p { margin: 0; }
.barra { width: 100%; height: 12px; background: #fff; border-radius: 999px; overflow: hidden; }
.barra div { height: 100%; background: var(--roxo); border-radius: 999px; }
.proximo { border-color: var(--roxo); }
.proximo .grande-texto { font-size: 1.25rem; }
.exame { flex-wrap: wrap; }
.exame.feito .texto { text-decoration: line-through; color: var(--suave); }
.exame .marcar { width: 28px; height: 28px; margin: 0; flex-shrink: 0; accent-color: var(--verde); }
.exame .quando { display: block; font-size: 0.9rem; color: var(--suave); }
.exame .quando.atrasado { color: var(--erro); }
.agenda {
  border: 2px solid var(--borda); background: var(--cartao); border-radius: 12px;
  padding: 6px 10px; font-size: 0.9rem; font-weight: 600;
}

/* ---------- Guia de exames ---------- */
.alternar-3 button { font-size: 0.9rem; padding: 12px 6px; }
.grupo { margin: 12px 0 0; font-size: 1.1rem; }
.alerta { border-color: #e9b44c; background: #fff8e8; }
.alerta .quando { display: block; font-size: 0.9rem; color: var(--suave); margin-top: 2px; }
.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  margin-right: 6px; vertical-align: middle; align-self: flex-start;
}
.tag.obrigatorio { background: var(--destaque-claro); color: var(--destaque-escuro); }
.tag.opcional { background: var(--azul-claro); color: #2d5f96; }
.tag.medico { background: var(--rosa-claro); color: var(--texto); }
details.exame-guia { border-left-width: 8px; padding: 14px 16px; }
details.exame-guia summary { list-style: none; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
details.exame-guia summary::-webkit-details-marker { display: none; }
details.exame-guia summary::after { content: "Toque para ver mais ▾"; font-size: 0.8rem; color: var(--suave); font-weight: 400; }
details.exame-guia[open] summary::after { content: "Fechar ▴"; }
details.exame-guia .nome { font-weight: 700; font-size: 1.05rem; }
details.exame-guia .quando { font-size: 0.95rem; font-weight: 600; }
details.exame-guia .detalhes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
details.exame-guia .detalhes p { margin: 0; line-height: 1.4; }
.topicos { margin: 0; padding-left: 20px; line-height: 1.5; }
.dica { background: #fff8e8; border-radius: 12px; padding: 10px 12px; }
.dica.urgente {
  display: block; background: #d93a2b; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.4;
  padding: 12px 14px; border-radius: 12px;
}
.dica.urgente strong { color: #fff; }
.st-agora { border-left-color: var(--verde); }
.st-agora .quando { color: var(--verde); }
.st-ultimos, .st-passou { border-left-color: var(--erro); }
.st-ultimos .quando, .st-passou .quando { color: var(--erro); }
.st-embreve { border-left-color: #e9b44c; }
.st-embreve .quando { color: #8a6514; }
.st-agendado { border-left-color: var(--azul); }
.st-feito { border-left-color: var(--verde); opacity: 0.75; }
.st-futuro .quando, .st-medico .quando { color: var(--suave); }
.agenda.zap { text-decoration: none; color: #128c4a; border-color: #bfe8cf; white-space: nowrap; }

/* ---------- Resultados (anexos) ---------- */
.resultado { background: var(--fundo); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.miniatura { position: relative; aspect-ratio: 1; }
.miniatura a { display: block; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: var(--borda); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .pdf {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 2rem; background: var(--destaque-claro); color: var(--destaque-escuro);
}
.miniatura .pdf small { font-size: 0.8rem; font-weight: 700; }
.apagar-anexo {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.9rem;
}
select {
  font: inherit; padding: 14px; border-radius: 14px; border: 2px solid var(--borda);
  background: var(--cartao); color: var(--texto); width: 100%;
}

/* ---------- Vínculo com o médico ---------- */
.vinculo { border-color: var(--roxo-claro); }
.vinculo h3 { margin: 0; }
.vinculo p { margin: 0; }
.vinculo.ativo { background: #e7f6ec; border-color: #e7f6ec; }
.botao.vinculo-botao { background: var(--roxo-claro); border-color: var(--roxo-claro); }

/* ---------- Botão "colocar prazos na agenda": vermelho e pulsando até ela usar ---------- */
.botao.alerta-agenda { background: #d93a2b; border-color: #d93a2b; color: #fff; min-height: 64px; font-size: 1.1rem; }
.botao.alerta-agenda.pulsando { animation: pulsar-botao 1.6s ease-in-out infinite; }
@keyframes pulsar-botao {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 58, 43, 0.55); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(217, 58, 43, 0); transform: scale(1.03); }
}
/* Quem pediu ao celular "menos movimento" vê o botão vermelho, sem pulsar. */
@media (prefers-reduced-motion: reduce) {
  .botao.alerta-agenda.pulsando { animation: none; }
}

/* ---------- Crescimento (aba Peso) ---------- */
.avaliacao p { margin: 0; line-height: 1.45; }
.avaliacao.bom { background: #e7f6ec; border-color: #e7f6ec; }
.avaliacao.info { background: var(--azul-claro); border-color: var(--azul-claro); }
.avaliacao.atencao { background: #fff4dc; border-color: #f1c96b; }
.avaliacao.alerta { background: #fde8e6; border-color: #f0a39b; }
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-size: 9px; fill: var(--suave); }
.grafico .grade { stroke: var(--borda); stroke-width: 1; }
.grafico .faixa { fill: #dff1e6; }
.grafico .mediana { fill: none; stroke: #6fbf8c; stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .linha-bebe { fill: none; stroke: var(--destaque-escuro); stroke-width: 2.5; stroke-linejoin: round; }
.grafico .ponto { fill: var(--destaque-escuro); stroke: #fff; stroke-width: 1.5; }
.grafico .ponto.nasc { fill: #fff; stroke: var(--destaque-escuro); stroke-width: 2; }
.legenda { margin: 4px 0 0; font-size: 0.8rem; color: var(--suave); line-height: 1.8; }
.legenda .cor { display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: middle; }
.legenda .cor:first-child { margin-left: 0; }
.legenda .cor.faixa { background: #dff1e6; }
.legenda .cor.mediana { background: #6fbf8c; height: 3px; }
.legenda .cor.bebe { background: var(--destaque-escuro); height: 4px; }
.sinais strong.ok { color: var(--verde); }
.sinais strong.baixo { color: #8a6514; }
.sinais .quando { display: block; font-size: 0.85rem; color: var(--suave); }
.abas button { font-size: 0.78rem; }

/* ---------- Instalar o app ---------- */
.instalar-destaque { text-align: center; background: var(--cartao); border-color: var(--cartao); box-shadow: 0 4px 14px rgba(76, 62, 65, 0.10); }
.instalar-destaque p { margin: 0; line-height: 1.4; }
.instalar-destaque .grande-texto { font-size: 1.2rem; }
.passos-instalar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.passos-instalar li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.passos-instalar .numero {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--destaque-claro);
  color: var(--texto); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
details.cartao > summary { font-weight: 600; cursor: pointer; }
details.cartao[open] > summary { margin-bottom: 12px; }

/* ---------- Botão "Voltar ao início" e saudação ---------- */
.botao-inicio {
  border: 1.5px solid var(--borda); background: var(--cartao); color: var(--texto);
  border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(76, 62, 65, 0.08);
}
.botao-inicio:active { transform: scale(0.96); }
.saudacao { max-width: 480px; margin: 14px auto -8px; padding: 0 16px; color: var(--suave); }
.saudacao strong { color: var(--texto); }

/* ---------- Sininho e cartão de avisos ---------- */
.cabecalho-direita { display: flex; align-items: center; gap: 4px; }
.sino {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--cartao); font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.sino.com-aviso span[aria-hidden] { animation: balancar 2.4s ease-in-out infinite; transform-origin: 50% 10%; display: inline-block; }
@keyframes balancar { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 85% { transform: rotate(-12deg); } 92% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .sino.com-aviso span[aria-hidden] { animation: none; } }
.sino .contador {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #d93a2b; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center;
}
.avisos { text-align: center; }
.avisos p { margin: 0; line-height: 1.45; }
.avisos.desligado, .avisos.iphone { background: #fff4dc; border-color: #f1c96b; }
.avisos.ligado { background: #e7f6ec; border-color: #e7f6ec; }

/* ---------- Cartão de profissional (Dr. Renato, Dra. Aline) ---------- */
/* Cartão do profissional todo centralizado: foto em cima, nome, especialidade, atendimento e botões. */
.profissional { gap: 12px; border-color: var(--borda); text-align: center; align-items: stretch; }
.profissional-topo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.profissional-foto {
  width: 84px; height: 84px; border-radius: 50%; background: var(--rosa-claro); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  object-fit: cover; border: 3px solid var(--destaque-claro);
}
.profissional-nome { margin: 0; font-size: 1.15rem; font-weight: 700; }
.profissional-area { margin: 2px 0 0; color: var(--suave); font-weight: 600; }
.modalidades { margin: 0; font-size: 1.1rem; color: var(--texto); }

.botao.instagram {
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
  border: none; color: #fff; min-height: 52px; font-size: 1rem;
}
a.botao.instagram { color: #fff; }

/* ---------- Ajuda / contatos ---------- */
.ajuda { background: var(--rosa-claro); border-color: var(--borda); }
.remedios { display: flex; flex-direction: column; gap: 12px; }
.logo-emoji { font-size: 3.5rem; line-height: 1; }
.botao.fase.remedio-inicio { background: var(--azul-claro); border-color: var(--azul-claro); }
.remedios p { margin: 0; line-height: 1.45; }
.remedios summary { font-weight: 600; cursor: pointer; color: var(--texto); }
.remedios details[open] summary { margin-bottom: 8px; }
.cores-risco { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cor-risco { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
.cor-risco.verde { background: #3f9e4d; }
.cor-risco.amarela { background: #e9c32e; }
.cor-risco.laranja { background: #ef8a2b; }
.cor-risco.vermelha { background: #d93a2b; }
.aviso-remedio { background: #fff4dc; border-radius: 12px; padding: 10px 12px; }
.botao.remedio { background: #fff; border-color: var(--rosa); color: var(--texto); }
a.botao.remedio { color: var(--texto); }
/* Rodapé da aba Exames: crédito do guia centralizado e cartão do Dr. Renato mais afastado. */
.credito-guia { text-align: center; margin: 16px 0 0; line-height: 1.5; }
.espaco-cartao { margin-top: 20px; }
/* Na tela de mamada, separa bem os botões dos peitos do cartão de ajuda. */
#aba-mamada .ajuda { margin-top: 32px; }
/* "Dificuldade para amamentar?": título grande e tudo centralizado */
.ajuda { text-align: center; align-items: stretch; }
.ajuda h3 { margin: 0; font-size: 1.45rem; line-height: 1.25; }
.ajuda .rotulo { font-size: 1rem; line-height: 1.45; margin: 0; }
.botao.whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
/* Botão do Pega Perfeita: texto sempre numa linha só (a letra se ajusta à tela) */
.botao.curso {
  background: var(--destaque); border-color: var(--destaque); color: #fff;
  white-space: nowrap; font-size: clamp(0.82rem, 4.3vw, 1.15rem); padding-left: 10px; padding-right: 10px;
}
a.botao { text-decoration: none; color: inherit; }
a.botao.whatsapp, a.botao.curso { color: #fff; }

.aviso { font-size: 0.85rem; color: var(--suave); text-align: center; line-height: 1.4; margin: 8px 0 0; }

.aviso-rapido {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--texto); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2); max-width: calc(100% - 32px); text-align: center;
}

/* ---------- Marca e telas de abertura com o rosa da clínica ---------- */
#tela-entrar, #tela-fase, #tela-carregando { background: var(--destaque-claro); }
.logo-marca { display: block; width: min(280px, 78vw); height: auto; margin: 8px auto 0; }
.marca h1 { margin: 0; }
.marca.pequena .logo-marca { width: min(190px, 56vw); }
#tela-carregando .logo-marca { width: min(240px, 70vw); }
.botao.fase.gestante, .botao.fase.lactante, .botao.fase.remedio-inicio { background: var(--cartao); border-color: var(--cartao); }
.alternar { background: rgba(255, 255, 255, 0.6); }
.botao.curso { background: var(--rosa); border-color: var(--rosa); }

/* Topo delicado: símbolo pequeno + VIVACIS escrito em letras finas */
.logo-simbolo { display: block; width: 46px; height: auto; margin: 4px auto 10px; opacity: 0.9; }
.marca .marca-nome { font-size: 1.9rem; font-weight: 300; letter-spacing: 0.38em; text-indent: 0.38em; margin: 0; line-height: 1.25; color: var(--texto); }
.marca { padding-top: 12px; }
.marca.pequena .logo-simbolo { width: 34px; margin-bottom: 6px; }
.marca.pequena .marca-nome { font-size: 1.25rem; }
#tela-clinica .logo-marca { width: min(200px, 60vw); }