/* Página /sistemas-prontos — sistemas prontos por segmento (04/11/2026).
   Sandro: "uma página só, senão vai ficar cheio de página". Cada produto que nasceu de um cliente vira uma SEÇÃO
   (#infantil, #moda…). Carrega DEPOIS do paginas.css e do escolinha.css (reaproveita esc-video, esc-cel, esc-tela,
   esc-recurso, esc-plano, esc-demo). Tudo preso em body.pg--sp ou em classes sp-*: não muda as outras páginas.
   A cor de cada produto vale só dentro da seção dele; a página segue o preto/cinza/dourado da SanWeb. */

/* ── Ícones que o swcore-sob-medida.min.css ainda não tem (códigos do SWCore 2.1.0 completo) ── */
.swi-cart:before{content:"\ea36"} .swi-ruler:before{content:"\ebf0"} .swi-closet:before{content:"\ea5f"}
.swi-box:before{content:"\e9fc"} .swi-trending-up:before{content:"\ec53"} .swi-group:before{content:"\eaff"}
.swi-calculator:before{content:"\ea14"} .swi-key:before{content:"\eb28"} .swi-cut:before{content:"\ea92"}

/* ── Cor de cada seção ──────────────────────────────────────── */
.sp-produto { --esc-cor: var(--color-accent-2); --sp-escuro: #0b0c10; scroll-margin-top: 13rem; }
/* 04/11: a demo infantil trocou o amarelo por lavanda #8b6fd0 + rosa claro #f5b5cc */
.sp-produto--infantil { --color-accent-2: #a891e6; --esc-cor: #a891e6; --sp-escuro: #160f2b; }
html[sw-theme="light"] .sp-produto--infantil { --color-accent-2: #6b4fb8; --esc-cor: #6b4fb8; }
/* 04/11: SanWeb Loja na cor dela (terracota #c2562b da demo "Empório Central", tom creme no escuro) — Sandro: "cada um na sua cor" */
.sp-produto--loja { --color-accent-2: #e8a477; --color-primary: #e8a477; --esc-cor: #e8a477; --sp-escuro: #2b1a12; --text-muted: #cdb9a6; }
html[sw-theme="light"] .sp-produto--loja { --color-accent-2: #b14d24; --color-primary: #b14d24; --esc-cor: #b14d24; --text-muted: #7a5a46; }
.sp-produto .pg-btn--pri { background: var(--esc-cor); color: var(--sp-escuro); }
html[sw-theme="light"] .sp-produto .pg-btn--pri { color: #fff; }
.sp-produto .esc-plano__selo { background: var(--esc-cor); color: var(--sp-escuro); }
html[sw-theme="light"] .sp-produto .esc-plano__selo { color: #fff; }

/* ── Abas no topo: um botão por produto, presas abaixo do cabeçalho ── */
.sp-abas { position: sticky; top: 6.6rem; z-index: 40; margin: 0 0 2rem; padding: .8rem 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px);
  border-block: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.sp-abas__trilho { display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none; }
.sp-abas a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.6rem; border-radius: .8rem;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); font-size: 1.45rem; font-weight: 650; text-decoration: none; }
.sp-abas a:hover, .sp-abas a.is-ativa { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.sp-abas small { color: var(--text-muted); font-weight: 500; }

/* ── Cabeça de cada produto ─────────────────────────────────── */
.sp-produto { padding-top: clamp(4rem, 6vw, 7.2rem); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.sp-nome { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.sp-nome img { height: clamp(4.4rem, 5vw, 6rem); width: auto; }
.sp-titulo { font-family: var(--font-titulo); font-size: clamp(3.4rem, 4.6vw, 5.6rem); line-height: 1; letter-spacing: -.03em; margin: 0; color: var(--text); font-weight: 400; }
.sp-titulo span { color: var(--esc-cor); }
.sp-nasceu { display: inline-block; margin: 0 0 1.6rem; padding: .5rem 1rem; border-radius: .6rem; font-size: 1.3rem;
  background: color-mix(in srgb, var(--esc-cor) 12%, transparent); color: var(--text); }
.pg h2.sp-dor { margin: 0 0 1.2rem; font-family: var(--font-titulo); font-size: clamp(2.4rem, 2.8vw, 3.4rem); letter-spacing: -.02em; line-height: 1.2; color: var(--text); }

/* ── Vídeo de apresentação em destaque ─────────────────────── */
.sp-video { margin: 0 0 clamp(4rem, 6vw, 6.4rem); }
.sp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 1.4rem; background: #0d0d10;
  border: 1px solid color-mix(in srgb, var(--esc-cor) 35%, transparent); box-shadow: 0 2.4rem 6rem color-mix(in srgb, #000 35%, transparent); }
.sp-video figcaption { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: baseline; padding: 1.4rem .4rem 0; color: var(--text-muted); font-size: 1.45rem; }
.sp-video figcaption strong { color: var(--text); font-size: 1.6rem; }

.sp-bloco { margin-top: clamp(4.8rem, 7vw, 8rem); }
.sp-bloco > h3 { margin: 0 0 2.4rem; font-family: var(--font-titulo); font-size: clamp(2.6rem, 3vw, 3.6rem) !important; font-weight: 400; }
.sp-bloco > h3 em { color: var(--esc-cor); }

/* "O que vem junto" — lista em duas colunas */
.sp-junto { display: grid; gap: 1rem 3.2rem; margin: 0; padding: 0; list-style: none; }
.sp-junto li { display: flex; gap: 1rem; font-size: 1.6rem; line-height: 1.5; }
.sp-junto i { flex: 0 0 auto; margin-top: .3rem; color: var(--esc-cor); }
@media (min-width: 800px) { .sp-junto { grid-template-columns: 1fr 1fr; } }

/* Preço único (Moda): duas coisas, um valor */
.sp-preco { display: grid; gap: 2.4rem; align-items: center; padding: clamp(2.8rem, 4vw, 4.8rem); border-radius: 1.8rem;
  border: 2px solid var(--esc-cor); background: color-mix(in srgb, var(--esc-cor) 6%, transparent); }
.sp-preco__dois { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.sp-preco__dois li { padding: .6rem 1.2rem; border-radius: .6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.pg .sp-preco__valor { margin: 0; font-family: var(--font-titulo); font-size: clamp(4.4rem, 5vw, 6.4rem); line-height: 1; letter-spacing: -.04em; color: var(--text); }
.pg .sp-preco__valor small { font-size: .34em; letter-spacing: 0; color: var(--text-muted); }
.sp-preco__mais { margin: 1rem 0 0 !important; font-size: 1.6rem; }
.sp-preco__mais strong { color: var(--text); }
.sp-preco .pg-btns { margin: 0; }
@media (min-width: 900px) { .sp-preco { grid-template-columns: 1.3fr 1fr; } .sp-preco .pg-btns { justify-content: flex-end; } }

/* Imagens com versão dia e noite (telas da demo nos dois temas) */
.esc-tela img[sw-day-img-light], .esc-cel img[sw-day-img-light] { background: #0d0d10; }

/* Próximos segmentos */
.sp-proximo { padding: clamp(2.4rem, 3vw, 3.6rem); border-radius: 1.4rem; border: 2px dashed color-mix(in srgb, var(--text) 18%, transparent); }
.sp-proximo p { margin: .8rem 0 1.6rem; }
.esc-demo__cartao h4 { margin: 0; font-family: var(--font-titulo); font-size: clamp(2.4rem, 2.6vw, 3.2rem); font-weight: 400; color: var(--text); }
.esc-demo__cartao .pg-btn + .pg-btn { margin-left: .8rem; }

@media (min-width: 900px) { .sp-abas { top: 7.4rem; } }
html[sw-theme="light"] .sp-abas { background: color-mix(in srgb, #fff 92%, transparent); }

/* ── Vídeo do YouTube com embed leve (04/11/2026): capa local + ▶; o iframe só entra no clique (assets/js/yt.js) ── */
.sp-yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.4rem; background: #0d0d10;
  border: 1px solid color-mix(in srgb, var(--esc-cor) 35%, transparent); box-shadow: 0 2.4rem 6rem color-mix(in srgb, #000 35%, transparent); }
.sp-yt--cel { aspect-ratio: 9 / 16; max-width: 34rem; margin-inline: auto; border-radius: 2.8rem; border: .8rem solid #0d0d10; }
.sp-yt__play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
.sp-yt__play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.sp-yt__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8.4rem; height: 8.4rem; translate: -50% -50%;
  border-radius: 50%; background: color-mix(in srgb, #0b0c10 70%, transparent);
  border: 2px solid var(--esc-cor); transition: scale .25s ease, background .25s ease; }
.sp-yt__play::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; translate: -35% -50%;
  border-style: solid; border-width: 1.4rem 0 1.4rem 2.3rem; border-color: transparent transparent transparent #fff; }
.sp-yt__play:hover img { transform: scale(1.02); filter: brightness(.9); }
.sp-yt__play:hover::after, .sp-yt__play:focus-visible::after { scale: 1.08; background: var(--esc-cor); }
.sp-yt__play:focus-visible { outline: 3px solid var(--esc-cor); outline-offset: -3px; }
.sp-yt__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video .sp-yt + figcaption { padding-top: 1.4rem; }
.sp-aulas { display: grid; gap: 2.4rem; align-items: start; }
.sp-aulas .sp-video { margin: 0; }
@media (min-width: 900px) { .sp-aulas { grid-template-columns: 1fr 1fr; } .sp-aulas--cel { grid-template-columns: 2.2fr 1fr; } }
/* 04/11/2026 (Sandro: "menor, um ao lado do outro, só os dois grandes do YouTube"): apresentação + aula lado a lado */
.sp-aulas--par { margin-block: 0 clamp(4rem, 6vw, 6.4rem); }
/* 04/11/2026 (Sandro: "o botão azul nada a ver — verde predomina; na escola, lilás"): botão de voltar ao topo */
.pg--sp .pg-topo-btn { background: var(--color-accent-2); color: #0b0b0d; transition: transform .2s ease, background-color .4s ease; }
.pg--sp.sp-na-escola .pg-topo-btn { background: #8b6fd0; color: #fff; }
.pg--sp.sp-na-loja .pg-topo-btn { background: #c2562b; color: #fff; }
@media (min-width: 700px) { .sp-aulas--par { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .sp-yt__play img, .sp-yt__play::after { transition: none; } }