/*
 * AG3 complemento (CEO, 16/10/2026): o site segue a casca INTERNA do Acolhe.
 * Marca compacta, Acolhe Serena, barra pública marinho e rodapé discreto; medidas
 * de AcolheLayout.tsx, acolhe.css e MarcaArea.tsx. A ordem substitui o visual AG3 R3.
 * Marcellus 400 nos títulos, Arial no texto, fontes locais, cantos retos, sem sombra.
 * Fluxos, campos e botões mantêm a régua e os eventos existentes do agendamento.
 */
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontes/Marcellus-Regular.woff2") format("woff2");
}
:root {
  /* As cinco cores da marca. */
  --marinho: #242f63;
  --marinho-profundo: #1a2247;
  --esmeralda: #157a5c;
  --off-white: #f9f8f4;
  --areia: #f2efe6;
  /* Apoio (derivados, nunca outra cor de marca). */
  --esmeralda-fundo: #e7f3ee;
  --branco: #ffffff;
  --texto: #1a2247;
  --texto2: #5b6072;
  --borda: #e5e1d6;
  --borda-campo: #7b849d;
  --campo-fundo: #f5f5f7;
  --erro: #a4262c;
  --erro-fundo: #fbeceb;
  --ambar: #8a5a00;
  --ambar-fundo: #fff4d6;
  --titulo: "Marcellus", Georgia, "Times New Roman", serif;
  --texto-fonte: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--off-white); color: var(--texto); font: 15px/1.5 var(--texto-fonte); }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.faixa-previa { background: var(--areia); color: var(--texto2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 16px; text-align: right; }

/* MarcaArea + Acolhe: o link conserva o rascunho ao voltar ao início. */
.pular-conteudo { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 12px; background: var(--branco); color: var(--marinho); }
.pular-conteudo:focus { top: 12px; }
.topo { background: var(--branco); }
.topo-dentro { min-height: 86px; margin: 0 auto; padding: 16px 36px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.topo-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.marca { display: inline-flex; gap: 24px; align-items: center; color: var(--texto); text-decoration: none; min-width: 0; }
.marca-clinica { display: inline-flex; gap: 10px; align-items: center; min-width: 0; }
.marca .logo { width: 34px; height: 40px; object-fit: contain; flex: none; }
.marca-nome { display: block; font-family: var(--texto-fonte); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--texto); }
.marca-legenda { display: block; font-size: 14px; color: var(--esmeralda); }
.marca-divisor { width: 1px; height: 34px; background: var(--borda); }
.acolhe-nome { font-family: var(--titulo); font-weight: 400; font-size: 24px; color: var(--texto); white-space: nowrap; }
.acolhe-nome span { color: var(--esmeralda); }
.navegacao-site { background: var(--marinho-profundo); }
.navegacao-dentro { padding: 0 36px; display: flex; align-items: stretch; }
.navegacao-dentro a { min-height: 54px; display: inline-flex; align-items: center; padding: 12px 20px; font-size: 14px; color: var(--branco); text-decoration: none; background: var(--marinho); }
.navegacao-dentro a:hover { text-decoration: underline; text-underline-offset: 4px; }
.casca { flex: 1 0 auto; width: 100%; max-width: 1680px; margin: 0 auto; padding: 38px 36px 56px; outline: none; }
.rodape-site { margin: 0 36px; border-top: 1px solid var(--borda); color: var(--texto2); font-size: 14px; }
.casca-rodape { padding: 22px 0; display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.rodape-marca, .rodape-slogan { font-family: var(--texto-fonte); }

/* O contexto da etapa usa o mesmo ritmo do título de página do Acolhe. */
.chapeu { font-size: 14px; color: var(--esmeralda); margin: 0 0 8px; }
.titulo-bloco { margin: 0 0 26px; }
.apoio { font-size: 17px; color: var(--texto2); margin: 0 0 16px; }
h1 { font-family: var(--titulo); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--texto); margin: 0 0 8px; }
.titulo-bloco.entrada h1 { font-size: 28px; }
h2 { font-family: var(--titulo); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--marinho); margin: 0 0 8px; }
h3 { font-family: var(--titulo); font-weight: 400; font-size: 17px; color: var(--marinho); margin: 0 0 6px; }
p { margin: 0 0 12px; }
.ajuda, .pequeno { font-size: 14px; color: var(--texto2); }
.rotulo { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2); margin: 0 0 6px; }

/* A entrada: os caminhos lado a lado na tela larga, um embaixo do outro no celular; cartões grandes com chapéu, título e o botão largo. */
.caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: 16px 0; }
.caminho { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.caminho h2 { font-size: 20px; }
.caminho p:not(.chapeu) { font-size: 17px; color: var(--texto2); }
.botao.largo { padding: 14px 28px; min-height: 48px; font-weight: bold; }
.botao.marinho { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.botao.marinho:hover:not(:disabled) { background: var(--marinho-profundo); border-color: var(--marinho-profundo); }
.cartao { background: var(--branco); border: 1px solid var(--borda); padding: 20px; }
.cartao.destaque { border-top: 4px solid var(--esmeralda); }
.cartao h2 { margin-bottom: 6px; }

/* O formulário: o trilho das etapas ao lado na tela larga. */
.assistente { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .assistente { grid-template-columns: 1fr; } .trilho { display: none; } }
.trilho { background: var(--branco); border: 1px solid var(--borda); padding: 16px; }
.trilho ol { margin: 0; padding: 0 0 0 20px; }
.trilho li { margin: 6px 0; color: var(--texto2); }
.trilho li.atual { color: var(--marinho); font-weight: bold; }
.trilho li.atual::marker { color: var(--esmeralda); }
.trilho li.feita { color: var(--esmeralda); }
.trilho li.nao-se-aplica { color: var(--texto2); font-style: italic; }
.progresso { margin: 0 0 16px; }
.progresso .barra { height: 6px; background: var(--areia); }
.progresso .barra > span { display: block; height: 100%; background: var(--esmeralda); }
.progresso .texto { font-size: 14px; color: var(--texto2); margin: 6px 0 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px 18px; }
.campo { display: flex; flex-direction: column; }
.campo.largo { grid-column: 1 / -1; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select {
  font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--borda-campo); background: var(--campo-fundo); color: var(--texto); border-radius: 0; width: 100%;
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: 4px; }
.navegacao-dentro a:focus-visible { outline-color: #7fd4b4; outline-offset: -4px; }
.erro-campo { color: var(--erro); font-size: 14px; margin: 4px 0 0; }
.campo.com-erro input, .campo.com-erro select { border-color: var(--erro); }
.lido { font-size: 14px; color: var(--texto2); margin: 4px 0 0; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--borda); background: var(--branco); color: var(--texto); cursor: pointer; border-radius: 0; text-align: left; min-height: 44px; }
.opcao:hover:not(:disabled) { border-color: var(--marinho); }
.opcao[aria-pressed="true"] { border-color: var(--esmeralda); background: var(--esmeralda-fundo); color: var(--marinho); font-weight: bold; }
.opcao:disabled { opacity: .5; cursor: default; }

.botao { min-height: 44px; display: inline-block; font: inherit; font-size: 15px; padding: 11px 16px; border: 1px solid var(--marinho); background: var(--branco); color: var(--marinho); cursor: pointer; text-decoration: none; border-radius: 0; text-align: center; }
.botao.principal { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--branco); font-weight: bold; }
.botao:hover:not(:disabled) { background: var(--areia); }
.botao.principal:hover:not(:disabled) { background: var(--marinho); border-color: var(--marinho); }
.botao.discreto { border-color: transparent; background: none; color: var(--esmeralda); text-decoration: underline; padding-left: 0; padding-right: 0; }
.botao:disabled { opacity: .55; cursor: default; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 0; }
/* O número da Central escrito ao lado do botão do WhatsApp (AG3 item 5b). */
.linha-numero { font-size: 15px; margin: 10px 0 0; }
.numero-central { font-weight: bold; color: var(--marinho); white-space: nowrap; }

.aviso { padding: 12px 14px; margin: 0 0 14px; border-left: 4px solid var(--marinho); background: var(--areia); }
.aviso.erro { border-color: var(--erro); background: var(--erro-fundo); color: var(--erro); }
.aviso.ok { border-color: var(--esmeralda); background: var(--esmeralda-fundo); }
.aviso.atencao { border-color: var(--ambar); background: var(--ambar-fundo); color: var(--texto); }

.documentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.doc-arquivo { font-size: 14px; color: var(--esmeralda); margin: 6px 0; }
input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.dias-horarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 8px 0 0; }
.hora { font: inherit; font-size: 15px; padding: 10px 4px; border: 1px solid var(--borda); background: var(--branco); color: var(--texto); cursor: pointer; border-radius: 0; }
.hora[aria-pressed="true"] { border-color: var(--esmeralda); background: var(--esmeralda-fundo); font-weight: bold; }
.hora small { display: block; font-size: 14px; color: var(--texto2); font-weight: normal; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.resumo dl { margin: 0; }
.resumo dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2); margin: 8px 0 0; }
.resumo dd { margin: 2px 0 0; }
.instrucao-whatsapp { font-size: 17px; color: var(--marinho); margin: 16px 0 8px; }
.mensagem-pronta { margin: 16px 0 0; }
.texto-da-mensagem { white-space: pre-wrap; word-break: break-word; background: var(--areia); border: 1px solid var(--borda); padding: 12px; font: 14px/1.5 var(--texto-fonte); margin: 0 0 8px; }
.prazo { font-size: 17px; color: var(--marinho); margin: 16px 0 8px; }
.consentimento { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.consentimento input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

.codigo { font-size: 26px; letter-spacing: .35em; text-align: center; max-width: 260px; }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--areia); flex-wrap: wrap; }
.linha:first-child { border-top: none; }

.dialogo-fundo { position: fixed; inset: 0; background: color-mix(in srgb, var(--marinho-profundo) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.dialogo { background: var(--branco); border: 1px solid var(--borda); max-width: 480px; width: 100%; padding: 20px; }
.rodape { color: var(--texto2); font-size: 14px; margin: 32px 0 0; }
/* O título do grupo (responsável) fica DENTRO da caixa, não em cima da borda. */
fieldset.cartao { margin: 0; min-width: 0; }
fieldset.cartao > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; }
fieldset.cartao > legend + * { clear: both; }
.robo { margin: 12px 0; }
/* RCC5 item 2: "← Voltar" e "Começar de novo" em toda etapa (Começar de novo pergunta antes). */
.navegacao-etapa { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; margin: 0 0 12px; }
.navegacao-etapa .confirmar-recomeco { flex: 1 1 100%; margin: 8px 0 0; }
.marca:hover .marca-nome, .marca:focus-visible .marca-nome { text-decoration: underline; text-underline-offset: 4px; }
.botao.discreto:hover:not(:disabled) { background: none; color: var(--marinho); }
@media (max-width: 1100px) {
  .topo-dentro, .navegacao-dentro { padding-left: 24px; padding-right: 24px; }
  .casca { padding: 30px 24px 48px; }
  .rodape-site { margin: 0 24px; }
}
@media (max-width: 820px) {
  .acolhe-nome { font-size: 20px; }
  .marca { gap: 16px; }
}
/* RCC5 C12 — no celular, um passo por tela: botões e campos na largura da coluna, o principal por cima. */
@media (max-width: 640px) { /* celular */
  .topo-dentro { padding: 18px 16px; gap: 16px; }
  .marca { width: 100%; justify-content: space-between; gap: 10px; }
  .marca-divisor { display: none; }
  .topo-acoes { width: 100%; }
  .topo-acoes .botao { flex: 1 1 0; }
  .navegacao-dentro { padding: 0 8px; }
  .navegacao-dentro a { min-height: 44px; padding: 12px 10px; }
  .casca { padding: 28px 16px 36px; }
  .rodape-site { margin: 0 16px; }
  .casca-rodape { align-items: flex-start; flex-direction: column; gap: 8px; }
  .botoes { flex-direction: column; align-items: stretch; }
  .botoes .botao, .botoes .opcao { width: 100%; }
  .navegacao-etapa { justify-content: space-between; }
  .caminhos .botao { width: 100%; }
  h1 { font-size: 24px; }
  .titulo-bloco.entrada h1 { font-size: 24px; }
}