/* =====================================================================
   extras/agendar-modal.css — Modal "Agendar demonstração", compartilhado
   por TODAS as páginas do site (home, /classica/, bancos, legais, blog e
   ferramentas). Visual aprovado na rodada 2 da LP plataforma (variante B).

   Depende de proposta.css + landing-v5.css (publicados juntos em
   /extras/landing.css), que trazem .agenda, .campo, .entrada, .seletor,
   .marcar, .enviar, .form-msg, .turnstile, .foto e .botao. Aqui ficam só
   o modal em si e a faixa de 7 dias. Nenhum hex novo: só tokens.
   O markup é injetado por extras/agendar-modal.js (ids com prefixo am-).
   ===================================================================== */
/* ================================================================== MODAL: agendar demonstração */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__pano { position: absolute; inset: 0; background: color-mix(in oklab, var(--petroleo-fundo) 74%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__caixa { position: relative; z-index: 1; width: min(100%, 1000px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: var(--sombra-flutua); outline: none; animation: modal-entra 240ms var(--facil); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .modal__caixa, .agenda__ok { animation: none; } }
.modal__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--linha); }
.modal__eyebrow { font: 600 11px/14px var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.modal__titulo { margin-top: 4px; font: 600 clamp(1.15rem, 1.8vw, 1.45rem)/1.2 var(--fonte-titulo); letter-spacing: -.02em; color: var(--tinta); }
.modal__fechar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px 0 0; border-radius: 12px; color: var(--tinta-2); }
.modal__fechar:hover { background: var(--grade); color: var(--tinta); }
.modal__fechar .ic { width: 20px; height: 20px; }
.modal .agenda__corpo { min-height: 0; }
.modal .cal__mes { text-transform: none; }
/* Desktop: 7 dias em cima e horários embaixo, na mesma coluna; os três turnos lado a lado. */
@media (min-width: 900px) {
  .modal .agenda__corpo { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "info dias" "info slots"; grid-template-rows: auto 1fr; }
  .modal .agenda__info { grid-area: info; }
  .modal .agenda__dias { grid-area: dias; padding-bottom: 14px; }
  .modal .agenda__slots { grid-area: slots; border-left: 0; border-top: 1px solid var(--linha); padding: 18px 20px 24px; }
  .modal .slots__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
/* Faixa de 7 dias (no lugar do calendário de mês) */
.agenda__dias { padding: 22px 20px; }
.dias7__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dias7__faixa { font: 500 12.5px/16px var(--fonte); color: var(--tinta-3); white-space: nowrap; }
.dias7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia7 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 2px; border-radius: 12px; background: var(--petroleo-tinta); color: var(--tinta); transition: background 120ms ease, color 120ms ease, transform 160ms var(--mola); }
.dia7 small { font: 600 10.5px/12px var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.dia7 b { font: 600 18px/22px var(--fonte-titulo); letter-spacing: -.02em; }
.dia7:hover { background: color-mix(in oklab, var(--petroleo) 18%, var(--card)); }
.dia7[aria-pressed="true"] { background: var(--petroleo); color: #fff; transform: scale(1.03); }
.dia7[aria-pressed="true"] small { color: var(--sobre-2); }
.dia7[disabled] { background: transparent; border: 1px dashed var(--linha); color: var(--tinta-3); cursor: not-allowed; }
.dia7[disabled] b { text-decoration: line-through; }
@media (max-width: 599px) { .dias7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dia7 { min-height: 60px; } }
.modal .agenda__nota { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); font: 400 13px/18px var(--fonte); color: var(--tinta-2); }
.modal .campos__nota { margin: 0 0 12px; font: 400 12.5px/16px var(--fonte); color: var(--tinta-3); }
.modal .obrig { color: var(--erro); font-style: normal; }
.modal .agenda__opcoes { margin-top: 18px; }
.modal .agenda__ok { padding: 36px 28px 40px; }
body.tem-modal { overflow: hidden; }
/* O bottom sheet do seletor é anexado ao body: precisa ficar acima do modal. */
.seletor__pano { z-index: 110 !important; }
.seletor.is-sheet .seletor__pop { z-index: 120 !important; }
@media (max-width: 899px) {
  .modal { padding: 0; place-items: stretch; }
  .modal__caixa { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .modal__cab { position: sticky; top: 0; z-index: 2; background: inherit; }
  .modal .agenda__corpo { min-height: 0; }
  .modal .agenda__info { padding: 18px 20px; }
  .modal .agenda__slots { padding-bottom: 28px; }
}
@media (max-width: 599px) {
  .modal__cab { padding: 16px 16px 12px; }
  .modal .agenda__form { padding: 18px 16px 28px; }
  .modal .agenda__cal, .modal .agenda__info, .modal .agenda__slots { padding-inline: 16px; }
  .modal .agenda__ok { padding: 28px 16px 36px; }
  .modal .agenda__ok-ctas .botao { width: 100%; }
}
/* Dentro do modal a caixa é .agenda (branca no claro, cartão no escuro): o cabeçalho fixo herda esse fundo. */
.modal__cab { background: inherit; }
.modal .form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.modal .turnstile { margin-top: 14px; }
/* Em páginas longas (blog, ferramentas) o pano cobre tudo, inclusive barras fixas delas. */
.modal { z-index: 1000; }
.seletor__pano { z-index: 1010 !important; }
.seletor.is-sheet .seletor__pop { z-index: 1020 !important; }