/* ==========================================================================
   Aplicação · Diagnóstico Individual. Só o que é novo em relação ao
   base.css (cópia do form.css do dossie-carolinalore, visual NOIRÉ v3 com
   os retornos da cliente). Mesmas regras: canto reto, pedra nas linhas,
   oxblood nos blocos, nada dourado fora do carimbo, nada de luz atrás de
   texto corrido no celular.
   ========================================================================== */

/* abertura: o botão de começar no lugar do campo do @ */
.comecar { margin: var(--space-5) 0 0; }
.comecar .btn-primario { width: 100%; min-height: 60px; font-size: 15px; }
@media (min-width: 760px) { .comecar .btn-primario { width: auto; min-width: 0; padding-inline: 36px; margin-left: 0; margin-right: 0; } }

/* número das perguntas do bloco 1 (dentro do rótulo) */
.q-num-mini {
  display: inline-block; min-width: 28px; margin-right: 8px;
  font: italic 400 17px/1 var(--font-display); font-variation-settings: "opsz" 14; color: var(--oxblood-claro);
}

/* múltipla escolha: opções grandes para o dedo, retas, com o oval da casa como marcador */
.opcoes { display: grid; gap: 8px; margin: 14px 0 0; clear: both; }
.opcoes.par { grid-template-columns: 1fr 1fr; }
.opcao {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 16px;
  background: var(--noite-0); border: 1px solid var(--pedra-media); border-radius: 3px; cursor: pointer;
  color: var(--marfim-texto); font: 400 16px/1.35 var(--font-sans);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opcao::before {
  content: ""; flex: 0 0 auto; width: 13px; height: 18px; border: 1.5px solid var(--pedra-clara); border-radius: 50%;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.opcao:hover { border-color: var(--pedra-clara); }
.opcao:has(input:checked) { border-color: var(--oxblood-claro); background: rgba(74, 18, 16, 0.38); }
.opcao:has(input:checked)::before { background: var(--oxblood-claro); border-color: var(--oxblood-claro); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--oxblood-claro); outline-offset: 3px; }
.q.com-erro .opcao, .opcoes:has(input[aria-invalid="true"]) .opcao { border-color: rgba(229, 104, 90, 0.55); }

.campo-quem { margin-top: 16px; }

/* horários */
.dias { display: grid; gap: 22px; margin: 0 0 24px; }
.dia-titulo {
  margin: 0 0 10px; font: 600 14px/1.35 var(--font-heading); font-variant-numeric: lining-nums; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marfim-corpo);
}
.horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .horas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hora {
  appearance: none; min-height: 52px; padding: 0 8px; cursor: pointer;
  background: var(--noite-0); color: var(--marfim-texto); border: 1px solid var(--pedra-media); border-radius: 3px;
  font: 400 19px/1 var(--font-display); font-variation-settings: "opsz" 14; letter-spacing: 0.02em;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hora:hover { border-color: var(--pedra-clara); }
.hora[aria-pressed="true"] { background: var(--oxblood); border-color: var(--oxblood-claro); box-shadow: inset 0 0 0 1px var(--oxblood-claro); }
.hora:focus-visible { outline: 2px solid var(--oxblood-claro); outline-offset: 3px; }

.escolha { margin: 0 0 var(--space-5); }
.escolha .mono { margin: 0 0 6px; }
.escolha-quando { margin: 0 0 18px; font: 500 24px/1.2 var(--font-heading); font-variant-numeric: lining-nums; color: var(--tinta); }
.escolha.papel .campo .campo-rotulo { color: var(--chocolate); font-size: 14px; font-weight: 500; }
.escolha input[type="email"] {
  width: 100%; min-height: 50px; padding: 0 14px; font: 400 16px/1 var(--font-sans);
  background: #fbfaf7; color: var(--tinta); border: 1px solid var(--bronze-areia); border-radius: 3px;
}
.escolha input[type="email"]:focus { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.escolha .erro-campo, .escolha .erro-geral { color: #8e2a22; }
.escolha .btn-primario { width: 100%; margin-top: 16px; }
.escolha .link-discreto { display: block; margin: 14px auto 0; color: var(--chocolate); }

/* sessão marcada */
.marcado-quando { margin: 6px 0 14px; font: 500 clamp(26px, 2vw + 18px, 36px)/1.15 var(--font-heading); font-variant-numeric: lining-nums; color: var(--marfim-texto); }
.carol-marcado { margin: var(--space-6) auto 0; max-width: 440px; text-align: left; }

/* o link pessoal da agenda abre direto nos horários: sem rodapé comprido */
.so-agenda .tela { padding-top: 40px; }

/* fundo da sala da sessão (sala-*.webp, 25/09): a parede é ripado de madeira, não veludo. O brilho acetinado que
   corre pela cortina (.palco-brilho do base.css) tingia a madeira de vermelho: sai. */
.palco-brilho { display: none; }

/* a Carol da aplicação (carol-sala*.webp, IMG_6653, 25/09): recorte da cabeça ao meio da coxa e maior no palco */
.palco { --carol-w: 330px; }
@media (min-width: 760px) { .palco { --carol-w: 420px; } }
@media (min-width: 1024px) { .palco { --carol-w: 540px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .palco { --carol-w: 480px; } }
/* no celular o nome "Quem vai te ler" entra por cima da base dela: a calça clara some antes, o texto fica no escuro */
@media (max-width: 759px) {
  .palco-carol { -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0) 76%); mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0) 76%); }
}

/* horário pré-reservado (25/09): parabéns, agenda limitada, confirmar no convite, sem remarcação */
.tela[data-tela="marcado"] { max-width: 560px; }
.tela[data-tela="marcado"] h2 { font-size: clamp(30px, 2.2vw + 22px, 42px); line-height: 1.12; }
.marcado-fuso { margin: -6px 0 18px; font: 600 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pedra-clara); }
.marcado-confirmar { margin: var(--space-5) 0 0; text-align: left; }
.marcado-confirmar .mono { margin: 0 0 8px; }
.marcado-confirmar p:not(.mono) { margin: 0; color: var(--chocolate); font-size: 15.5px; line-height: 1.55; }
.marcado-botoes { display: grid; gap: 10px; margin-top: 16px; }
.marcado-botoes .btn-primario, .marcado-botoes .btn-secundario { margin: 0; width: 100%; min-width: 0; text-decoration: none; }
.marcado-aviso { margin: 14px 0 0; padding: 18px 20px; border-radius: var(--raio-cartao); text-align: left; color: var(--marfim-texto); }
.marcado-aviso p { margin: 0; position: relative; font-size: 15px; line-height: 1.55; }
.marcado-aviso .marcado-aviso-titulo { margin: 0 0 6px; font: 600 13px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; }