/*
 * SPI AGENDA DE PLANTÃO, PÁGINA DE VENDA (2026-10-12). Escopo: body.venda-agenda (loja/agenda-plantao.html).
 *
 * A página usa as classes de loja/css/spi-venda.css (hero escuro e dourado, celulares com tela real,
 * diferenciais em linhas alternadas, tira de telas, grade). Aqui fica só o que é desta página: a
 * moldura de NOTEBOOK (só CSS, como a de celular) para os prints do computador, o par notebook +
 * celular do topo, o quadro "calendário comum x agenda" e o aviso de que ainda não há checkout.
 *
 * As telas (loja/img/agenda-plantao/) são da agenda funcionando, abertas por navegador com dados
 * INVENTADOS (locais e valores fictícios). Celular a 390 px, computador a 1280 px.
 */
.venda-agenda .spi-main { scroll-padding-top: 1rem; }
.venda-agenda [id] { scroll-margin-top: 1rem; }
.venda-agenda .spi-hero .loja-cfm-linha { margin-top: 1.1rem; max-width: 36rem; color: rgba(252, 244, 232, .7); opacity: 1; }
.venda-agenda .spi-numeros strong { word-break: normal; }

/* ------------------------------------------------------------- moldura de notebook (so CSS) */
.ag-note { position: relative; width: 100%; margin: 0; }
.ag-note-tela {
  position: relative; box-sizing: border-box;
  padding: 9px 9px 10px;
  border-radius: 1rem 1rem .3rem .3rem;
  background: linear-gradient(160deg, #3a3a3a 0%, #151515 60%, #0b0b0b 100%);
  box-shadow:
    0 0 0 1px rgba(241, 207, 107, .38),
    inset 0 0 0 1.5px rgba(255, 255, 255, .07),
    0 28px 50px -18px rgba(0, 0, 0, .95),
    0 0 50px -12px rgba(241, 207, 107, .22);
}
.ag-note-tela::before {
  content: ""; position: absolute; top: 3.5px; left: 50%; width: 5px; height: 5px;
  transform: translateX(-50%); border-radius: 50%; background: #050505;
}
.ag-note-tela img { display: block; width: 100%; height: auto; border-radius: .35rem; background: #0a0a0a; }
.ag-note-base {
  position: relative; height: 12px; margin: 0 -2.5%;
  border-radius: 0 0 1.3rem 1.3rem / 0 0 100% 100%;
  background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 45%, #121212 100%);
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(241, 207, 107, .18);
}
.ag-note-base::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 18%; height: 5px;
  transform: translateX(-50%); border-radius: 0 0 .5rem .5rem; background: #0d0d0d;
}
.ag-note figcaption {
  margin-top: 1rem; color: var(--sv-claro); font-size: .92rem; font-weight: 700; line-height: 1.35; text-align: center;
}

/* ---------------------------------------------------------- topo: notebook e celular juntos */
.ag-combo { position: relative; width: 100%; max-width: 580px; margin: 0 auto; padding: 0 0 2.6rem; }
.ag-combo .spi-phone {
  position: absolute; z-index: 2; right: -1.5%; bottom: 0;
  width: 33%; max-width: 175px; transform: rotate(3deg);
}
.ag-combo .spi-phone img { border-top-width: 14px; }

/* ------------------------------------------------------------- notebooks lado a lado, em grade */
.ag-pcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem 2rem; margin-top: 2.6rem; }
.ag-pc-grande { max-width: 980px; margin: 2rem auto 0; }

/* -------------------------------------------------------- calendário comum x a agenda (quadro) */
.ag-comp { display: grid; gap: .7rem; margin-top: 1.6rem; }
.ag-comp-cab { display: none; }
.ag-linha {
  display: grid; gap: .45rem; padding: 1rem 1.1rem;
  border: 1px solid var(--sv-fio); border-radius: 1rem; background: var(--sv-painel);
}
.ag-linha b { color: var(--sv-texto); font-size: 1.02rem; line-height: 1.3; }
.ag-linha span { display: block; font-size: .93rem; line-height: 1.5; color: var(--sv-mudo); }
.ag-linha .ag-sim { color: var(--sv-claro); }
.ag-linha .ag-sim::before { content: "Agenda de Plantão: "; font-weight: 700; color: var(--sv-borda); }
.ag-linha .ag-nao::before { content: "Calendário comum: "; font-weight: 700; color: var(--sv-texto); }

/* -------------------------------------------------------------- aviso de compra em preparação */
.ag-aviso {
  display: block; margin-top: .75rem; max-width: 36rem;
  color: rgba(252, 244, 232, .78); font-size: .88rem; line-height: 1.5;
}
.ag-acesso {
  margin-top: 1.2rem; padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid var(--sv-linha); border-radius: 1.2rem; background: var(--sv-painel);
}
.ag-acesso p { margin: 0 0 .8rem; color: var(--sv-mudo); line-height: 1.6; }
.ag-acesso p strong { color: var(--sv-texto); }
.ag-acesso .loja-spi-acoes { margin-top: 1rem; }

@media (min-width: 900px) {
  .ag-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .ag-comp-cab, .ag-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr); align-items: start; gap: 1.2rem; }
  .ag-comp-cab { display: grid; padding: 0 1.1rem; color: var(--sv-borda); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .ag-linha .ag-sim::before, .ag-linha .ag-nao::before { content: none; }
}
@media (max-width: 460px) {
  .ag-note-tela { padding: 6px 6px 7px; border-radius: .7rem .7rem .25rem .25rem; }
  .ag-note-base { height: 9px; }
  .ag-combo .spi-phone { width: 36%; right: -2.5%; }
}