/*
 * SPI COMPLETO, PÁGINA DE VENDA (2026-10-11). Escopo: body.spi-venda (loja/spi.html).
 *
 * O dono, sobre a página anterior: "a propaganda ... é muito ruim. Você não fala dos diferenciais
 * que tem a plataforma". A página passa a mostrar o SPI funcionando: celular com tela real, letra
 * grande no que importa, dourado só no destaque. A moldura de celular é só CSS (sem imagem de
 * aparelho), como na página do Guia; as telas são WebP reais, em loja/img/spi/.
 *
 * Tokens: os da loja (--ouro, --ouro-claro, --ouro-grad, definidos em loja.css) e os do SPI
 * (fundo #0a0a0a, painel #141414, texto #fcf4e8). Nada de cor nova.
 */
.spi-venda {
  --sv-ouro: #e6bb5a;
  --sv-claro: #f8e3a6;
  --sv-borda: #f1cf6b;
  --sv-painel: #141414;
  --sv-linha: rgba(241, 207, 107, .2);
  --sv-fio: #262626;
  --sv-texto: #fcf4e8;
  --sv-mudo: #bdbdbd;
}
/* clip, e não hidden: corta o que sai pela lateral (celular girado, sombra) sem criar rolagem. */
.spi-venda .spi-main { overflow-x: clip; }

/* ------------------------------------------------------------------------------ topo (hero) */
.spi-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2.2rem;
  padding: clamp(1.4rem, 5vw, 3.4rem);
  border: 1px solid rgba(241, 207, 107, .3);
  border-radius: 1.6rem;
  background:
    radial-gradient(70% 60% at 88% 10%, rgba(241, 207, 107, .22), transparent 62%),
    radial-gradient(55% 55% at 4% 100%, rgba(180, 141, 71, .18), transparent 65%),
    linear-gradient(165deg, #1b1b1b 0%, #0c0c0c 55%, #070707 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .06);
}
.spi-hero::before, .spi-neuro::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ouro-grad);
}
.spi-hero-tx { position: relative; z-index: 1; min-width: 0; }
.spi-venda .spi-hero h1 {
  margin: .55rem 0 1rem;
  color: var(--sv-texto);
  font-size: clamp(2rem, 7.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.spi-venda .spi-hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #f8e3a6 0%, #e6bb5a 60%, #b48d47 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spi-lead { max-width: 36rem; margin: 0; color: rgba(252, 244, 232, .86); font-size: clamp(1.02rem, 3.6vw, 1.2rem); line-height: 1.6; }
.spi-lead strong, .spi-intro strong { color: #fff; font-weight: 700; }
.spi-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.spi-venda .spi-chips a {
  display: inline-block; padding: .45rem .85rem;
  border: 1px solid rgba(241, 207, 107, .45); border-radius: 999px;
  color: var(--sv-claro); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.spi-venda .spi-chips a:hover { background: rgba(241, 207, 107, .12); border-color: var(--sv-borda); }
.spi-hero .loja-hero-preco { margin-top: 1.5rem; gap: .1rem .5rem; }
.spi-hero .loja-hero-preco > span:first-child { flex-basis: 100%; }
.spi-hero .btn-ghost {
  padding: .5rem 1rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff;
}
.spi-hero-vis {
  position: relative; z-index: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
}
.spi-hero-vis::before {
  content: ""; position: absolute; inset: 6% 0 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(241, 207, 107, .24), rgba(241, 207, 107, 0));
  filter: blur(8px); pointer-events: none;
}
.spi-nota { position: relative; margin: .6rem 0 0; color: var(--sv-mudo); font-size: .8rem; line-height: 1.45; text-align: center; }

/* ---------------------------------------------------------------- moldura de celular (so CSS) */
.spi-phone {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 270px;
  margin: 0;
  padding: 7px;
  border-radius: 2.2rem;
  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, .24);
}
.spi-phone::before {
  content: ""; position: absolute; z-index: 2; top: 14px; left: 50%;
  width: 28%; height: 14px; transform: translateX(-50%); border-radius: 999px; background: #0a0a0a;
}
/* A faixa de cima faz o papel da barra de status, para o "notch" nao cobrir a tela. */
.spi-phone img {
  display: block; box-sizing: content-box; width: 100%; height: auto;
  border-top: 22px solid #0a0a0a; border-radius: 1.85rem; background: #141414;
}
/* dois celulares sobrepostos */
.spi-par { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: .4rem 0 .6rem; }
.spi-par .spi-phone { width: min(46vw, 220px); }
.spi-par .spi-phone:first-child { z-index: 2; transform: rotate(-2.5deg); }
.spi-par .spi-phone + .spi-phone { z-index: 1; margin-left: -1.5rem; margin-top: 2.6rem; transform: rotate(3deg); }
.spi-par-um .spi-phone { width: min(62vw, 250px); transform: none; }
.spi-par-hero .spi-phone { width: min(45vw, 230px); }

/* ---------------------------------------------------------------------------- faixa de números */
.spi-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.spi-numeros > div { display: grid; gap: .25rem; padding: 1rem 1.1rem; background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1rem; }
.spi-numeros strong { color: var(--sv-claro); font-size: clamp(1.15rem, 4.4vw, 1.5rem); font-weight: 800; line-height: 1.15; }
.spi-numeros span { color: var(--sv-mudo); font-size: .82rem; line-height: 1.4; }

/* ------------------------------------------------------------------------------------- secoes */
.spi-secao { margin-top: clamp(3rem, 8vw, 5.5rem); }
.spi-venda .spi-secao h2,
.spi-venda .loja-spi-secao > h2,
.spi-venda .loja-spi-final h2 {
  max-width: 46rem; margin: .45rem 0 .8rem; color: #fff;
  font-size: clamp(1.9rem, 6.6vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.022em;
}
.spi-venda .loja-spi-secao > h2, .spi-venda .loja-spi-final h2 { font-size: clamp(1.7rem, 5.8vw, 2.7rem); }
.spi-nb { white-space: nowrap; }
.spi-intro { max-width: 42rem; margin: 0 0 1.2rem; color: rgba(252, 244, 232, .84); font-size: clamp(1.02rem, 3.5vw, 1.2rem); line-height: 1.6; }

/* ------------------------------------------------------------------ linhas de diferencial */
.spi-dif {
  display: grid; gap: 1.6rem;
  padding: clamp(2rem, 6vw, 3.4rem) 0;
  border-top: 1px solid var(--sv-linha);
  grid-template-areas: "cab" "vis" "pts";
}
.spi-dif-cab { grid-area: cab; min-width: 0; }
.spi-dif-vis { grid-area: vis; min-width: 0; align-self: center; }
.spi-dif > .spi-pontos { grid-area: pts; }
.spi-etiquetas { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; margin: 0 0 .95rem; }
.spi-tag {
  padding: .34rem .8rem; border-radius: 999px; background: var(--ouro-grad); color: #1a1306;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.spi-plano {
  padding: .3rem .75rem; border: 1px solid rgba(241, 207, 107, .5); border-radius: 999px;
  color: var(--sv-claro); font-size: .78rem; font-weight: 600; line-height: 1.35;
}
.spi-venda .spi-dif h3, .spi-venda .spi-neuro h3 {
  margin: 0 0 .85rem; color: #fff;
  font-size: clamp(1.65rem, 6.2vw, 2.55rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
}
.spi-dif-lead { margin: 0; color: rgba(252, 244, 232, .84); font-size: clamp(1.02rem, 3.6vw, 1.18rem); line-height: 1.6; }
.spi-dif-lead strong { color: var(--sv-claro); font-weight: 700; }
.spi-pontos { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.spi-pontos li {
  position: relative; padding: .9rem 1rem .9rem 3.1rem;
  background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1rem;
}
.spi-pontos li::before {
  content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--sv-ouro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1306' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.spi-pontos strong { display: block; color: #fff; font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.spi-pontos span { display: block; margin-top: .22rem; color: var(--sv-mudo); font-size: .94rem; line-height: 1.55; }

/* ------------------------------------------------------ bloco da analise do neurodesenvolvimento */
.spi-neuro {
  position: relative; overflow: hidden;
  margin: clamp(1rem, 3vw, 1.8rem) 0;
  padding: clamp(1.3rem, 4.5vw, 3rem);
  border: 1px solid rgba(241, 207, 107, .4); border-radius: 1.6rem;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(241, 207, 107, .15), transparent 70%),
    linear-gradient(180deg, #181818, #0b0b0b);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.spi-neuro-cab { max-width: 52rem; }
.spi-venda .spi-neuro h3 { font-size: clamp(1.85rem, 7vw, 3.15rem); }
.spi-tira {
  display: flex; gap: 1rem; margin: 1.6rem 0 0; padding: .4rem .2rem 1.2rem;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #b48d47 transparent;
}
.spi-tira figure { flex: 0 0 min(64vw, 250px); margin: 0; scroll-snap-align: center; }
.spi-tira .spi-phone { max-width: none; }
.spi-tira figcaption, .spi-solo figcaption {
  margin-top: .85rem; color: var(--sv-claro); font-size: .92rem; font-weight: 700; line-height: 1.35; text-align: center;
}
.spi-regras { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.spi-regras li { padding: 1.1rem 1.2rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(241, 207, 107, .24); border-radius: 1rem; }
.spi-regras b { display: block; margin-bottom: .3rem; color: var(--sv-claro); font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.spi-regras span { color: rgba(252, 244, 232, .84); font-size: .96rem; line-height: 1.55; }
.spi-neuro-pe { margin: 1.1rem 0 0; color: var(--sv-mudo); font-size: .92rem; line-height: 1.5; }

.spi-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1.3rem 1.4rem; border: 1px solid rgba(241, 207, 107, .35); border-radius: 1.2rem;
  background: linear-gradient(135deg, rgba(241, 207, 107, .1), rgba(241, 207, 107, .02));
}
.spi-cta p { margin: 0; color: rgba(252, 244, 232, .88); font-size: 1.05rem; line-height: 1.5; }
.spi-cta strong { color: #fff; }
/* Setas, pontos e o aviso de deslizar embaixo das tiras (montados por js/produto-venda.js). */
.spi-tira-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .2rem 0 0; }
.spi-tira-nav[hidden] { display: none; }
.spi-tira-seta { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(241, 207, 107, .55); background: rgba(10, 10, 10, .8); color: var(--sv-claro, #f8e3a6); font: 700 1.5rem/1 "Montserrat", Arial, sans-serif; cursor: pointer; }
.spi-tira-seta:disabled { opacity: .3; cursor: default; }
.spi-tira-meio { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; }
.spi-tira-pontos { display: flex; gap: .45rem; }
.spi-tira-pontos i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(241, 207, 107, .3); transition: background .2s, width .2s; }
.spi-tira-pontos i.ativo { width: 1.3rem; border-radius: 999px; background: #e6bb5a; }
.spi-tira-dica { color: var(--sv-claro, #f8e3a6); font-size: .82rem; font-weight: 700; text-align: center; animation: spi-tira-dica 1.6s ease-in-out 3; }
.spi-tira-nav.usada .spi-tira-dica { display: none; }
@keyframes spi-tira-dica { 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .spi-tira-dica { animation: none; } }
.spi-tira:focus-visible { outline: 2px solid var(--sv-borda); outline-offset: 4px; border-radius: 1rem; }

/* ----------------------------------------------------------------------------- como funciona */
.spi-passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.spi-passos li { padding: 1.2rem; background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1.1rem; }
.spi-passos b {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem;
  border-radius: 50%; background: var(--ouro-grad); color: #1a1306; font-size: 1.1rem; font-weight: 800;
}
.spi-venda .spi-passos h3 { margin: 0 0 .35rem; color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.spi-passos p { margin: 0; color: var(--sv-mudo); font-size: .94rem; line-height: 1.55; }

/* ------------------------------------------------------------------------- o basico, em grade */
.spi-base-cab { display: grid; gap: 1.8rem; align-items: center; }
.spi-solo { margin: 0 auto; width: min(62vw, 230px); }
.spi-solo .spi-phone { max-width: none; }
.spi-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: 1.8rem; }
.spi-grade > div { padding: 1.1rem 1.2rem; background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1rem; }
.spi-venda .spi-grade h3 { margin: 0 0 .35rem; color: var(--sv-claro); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.spi-grade small {
  display: inline-block; margin-left: .35rem; padding: .12rem .5rem; border: 1px solid rgba(241, 207, 107, .5); border-radius: 999px;
  color: var(--sv-claro); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: .12em;
}
.spi-grade-nota { margin: .9rem 0 0; color: var(--sv-mudo); font-size: .86rem; line-height: 1.5; }
.spi-grade p { margin: 0; color: var(--sv-mudo); font-size: .93rem; line-height: 1.55; }

/* -------------------------------------------------------------------------------- tablet e PC */
@media (min-width: 620px) {
  .spi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spi-regras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .spi-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spi-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .spi-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .spi-cta .btn-cta-primary { flex: none; }
}
@media (min-width: 900px) {
  .spi-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 3rem; }
  .spi-par-hero .spi-phone { width: 245px; }
  .spi-par .spi-phone { width: 230px; }
  .spi-par-um .spi-phone { width: 270px; }
  .spi-dif {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "cab vis" "pts vis";
    column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 1.4rem; align-content: center;
  }
  .spi-dif-rev { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "vis cab" "vis pts"; }
  .spi-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-inline: 0; }
  .spi-tira figure { flex: none; }
  .spi-base-cab { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; }
  .spi-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .spi-numeros > div { min-width: 0; padding: .9rem .8rem; }
  .spi-numeros strong { font-size: 1.02rem; overflow-wrap: anywhere; }
  .spi-par .spi-phone { width: 44vw; }
  .spi-par .spi-phone + .spi-phone { margin-left: -1rem; }
}

/* ------------------------------------------------------------------ fecho e demais secoes */
.spi-venda .loja-spi-final {
  position: relative; overflow: hidden;
  border: 1px solid rgba(241, 207, 107, .38);
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(241, 207, 107, .2), transparent 62%),
    linear-gradient(165deg, #1b1b1b 0%, #0b0b0b 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.spi-venda .loja-spi-final::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ouro-grad); }
.spi-venda .loja-spi-final > p:not(.loja-rx-kicker) { color: rgba(252, 244, 232, .82); font-size: 1.05rem; }
.spi-venda .loja-spi-final .loja-rx-kicker { color: var(--sv-claro); }

/* ------------------------------------------------------------------------------------- planos */
/* O selo flutua na borda do cartão (antes cobria o título), e o /mês fica ao lado do preço. */
.spi-venda .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); }
.spi-venda .loja-oferta-selo { top: -.8rem; right: 1rem; background: var(--ouro-grad); color: #1a1306; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.spi-venda .loja-oferta h3 { font-size: 1.3rem; font-weight: 700; }
.spi-venda .loja-oferta-preco strong { white-space: nowrap; }
@media (min-width: 1101px) {
  .spi-venda .loja-oferta-preco strong { font-size: 1.75rem; }
}
.spi-par-um .spi-phone:first-child { transform: none; } /* 2026-10-12: um celular só (saiu o print do laudo em folha) */