/*
 * SPI ESCALAS, PÁGINA DE VENDA (2026-10-12). Escopo: body.venda-escalas (loja/escalas-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 da versão de
 * computador, o par notebook + celular do topo e a grade de três planos.
 *
 * As telas (loja/img/escalas/) são do app de escalas funcionando, abertas por navegador com
 * dados INVENTADOS (nomes, setores e serviço fictícios). Celular a 390 px, computador a 1280 px.
 */
.venda-escalas .spi-main { scroll-padding-top: 1rem; }
.venda-escalas [id] { scroll-margin-top: 1rem; }

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

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

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

/* ------------------------------------------------------------------- dois cartões (celular/PC) */
.esc-telas { margin-top: 1.4rem; }

/* ------------------------------------------------------------------------------------ planos */
.venda-escalas .loja-oferta-grade { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.venda-escalas .loja-oferta { background: var(--sv-painel); border-color: var(--sv-fio); }
.venda-escalas .loja-oferta-preco strong { font-size: 2.3rem; }
.venda-escalas .loja-oferta ul { flex: 1; }
.venda-escalas .loja-oferta .btn-cta-primary { margin-top: 1rem; }
.esc-nota-planos { max-width: 52rem; margin: 1.2rem 0 0; color: var(--sv-mudo); font-size: .92rem; line-height: 1.6; }
.esc-nota-planos a { color: var(--sv-claro); }

@media (min-width: 900px) {
  .esc-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .venda-escalas .loja-oferta-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .esc-note-tela { padding: 6px 6px 7px; border-radius: .7rem .7rem .25rem .25rem; }
  .esc-note-base { height: 9px; }
  .esc-combo .spi-phone { width: 36%; right: -2.5%; }
  .esc-combo-lado .spi-phone { width: 31%; right: 0; }
}
.venda-escalas .loja-oferta-destaque { border: 2px solid var(--sv-borda); box-shadow: 0 0 0 1px rgba(241, 207, 107, .22), 0 20px 50px rgba(0, 0, 0, .5); }