/*
 * PROTOCOLOS INSTITUCIONAIS, PÁGINA DE VENDA (2026-10-12). Escopo: body.venda-protocolos
 * (loja/protocolos-institucionais.html).
 *
 * O NOME DO ARQUIVO: loja/protocolos.html JÁ EXISTE e é o app em si, com porta de acesso. Esta
 * página é só a propaganda dele, no mesmo padrão das páginas do SPI Completo, do SPI Plantão e do
 * SPI Escalas (loja/css/spi-venda.css). Aqui fica só o que é desta página: a moldura de NOTEBOOK
 * (só CSS, copiada de loja/css/venda-escalas.css), o par notebook + celular do topo e as grades de
 * notebooks.
 *
 * As telas (loja/img/protocolos/) são do app de protocolos funcionando, abertas por navegador com
 * um SERVIÇO FICTÍCIO (Hospital Exemplo, responsáveis inventados e logo desenhada para isto).
 * Celular a 390 px de largura, computador a 1280 px.
 */
.venda-protocolos .spi-main { scroll-padding-top: 1rem; }
.venda-protocolos [id] { scroll-margin-top: 1rem; }

.venda-protocolos .spi-hero .loja-cfm-linha { margin-top: 1.1rem; max-width: 36rem; color: rgba(252, 244, 232, .7); opacity: 1; }
.venda-protocolos .spi-numeros strong { word-break: normal; }

/* ------------------------------------------------------------- moldura de notebook (so CSS) */
.prt-note { position: relative; width: 100%; margin: 0; }
.prt-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);
}
.prt-note-tela::before {
  content: ""; position: absolute; top: 3.5px; left: 50%; width: 5px; height: 5px;
  transform: translateX(-50%); border-radius: 50%; background: #050505;
}
.prt-note-tela img {
  display: block; width: 100%; height: auto; border-radius: .35rem; background: #0a0a0a;
}
.prt-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);
}
.prt-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;
}
.prt-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 */
.prt-combo { position: relative; width: 100%; max-width: 580px; margin: 0 auto; padding: 0 0 2.6rem; }
.prt-combo .spi-phone {
  position: absolute; z-index: 2; right: -1.5%; bottom: 0;
  width: 33%; max-width: 175px; transform: rotate(3deg);
}
.prt-combo .spi-phone img { border-top-width: 14px; }
/* o celular não cobre a lista do notebook: notebook mais estreito, celular na ponta */
.prt-combo-lado .prt-note { width: 80%; }
.prt-combo-lado .spi-phone { right: 0; width: 30%; transform: rotate(2deg); }

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

/* ------------------------------------------------------------------- cartões de duas colunas */
.prt-telas { margin-top: 1.4rem; }

/* ------------------------------------------------------------------ o aviso institucional */
.prt-aviso {
  margin: 1.4rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid rgba(241, 207, 107, .5); border-left-width: 5px; border-radius: 1rem;
  background: rgba(241, 207, 107, .08); color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.5;
}
.prt-nota { max-width: 52rem; margin: 1.2rem 0 0; color: var(--sv-mudo); font-size: .92rem; line-height: 1.6; }
.prt-nota a { color: var(--sv-claro); }

@media (min-width: 900px) {
  .prt-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
@media (max-width: 460px) {
  .prt-note-tela { padding: 6px 6px 7px; border-radius: .7rem .7rem .25rem .25rem; }
  .prt-note-base { height: 9px; }
  .prt-combo .spi-phone { width: 36%; right: -2.5%; }
  .prt-combo-lado .spi-phone { width: 31%; right: 0; }
}