/* ============================================================================
   CASE SIMPLES · Gabriel Amaral
   Só desta página. Depende de tokens, base, components e case.
   A história anda em capítulos (prólogo, 01 a 06), cada um com passos
   numerados na ordem do material bruto. A cor de destaque é o rosa da
   própria Simples, só em detalhe (fio, número, marcador), nunca em texto
   pequeno: #C2547F passa 4,6:1 no card branco e é usado só em peso grande.
   ========================================================================= */
.sp{ --sp-rosa:#E2A6C0; --sp-rosa-forte:#B0436E; --sp-rosa-claro:#F7E3EC; }

/* --- ABERTURA --------------------------------------------------------- */
.sp-hero__grade{ display:grid; gap:var(--s-10); }
@media (min-width:960px){
  .sp-hero__grade{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:var(--s-16); align-items:center; }
  .sp-hero__ficha, .sp-sumario{ grid-column:1 / -1; }
}
.sp-hero__foto{ margin:0; }
.sp-hero__foto img{ display:block; width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--on-anchor-rule); }
.sp-hero__foto figcaption{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--on-anchor-muted); }
.sp-hero .ficha{ margin-top:0; }
.sp-sumario .label{ color:var(--on-anchor-muted); margin-bottom:var(--s-3); }
.sp-sumario ol{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.sp-sumario a{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-4);
  border:1px solid var(--on-anchor-rule); border-radius:var(--r-full);
  color:var(--on-anchor); text-decoration:none; font-size:var(--t-small);
  transition:background-color var(--d-fast) var(--ease-toque), border-color var(--d-fast) var(--ease-toque), color var(--d-fast) var(--ease-toque);
}
.sp-sumario a span{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--marca); }
.sp-sumario a:hover{ background:var(--marca); border-color:var(--marca); color:#232323; }
.sp-sumario a:hover span{ color:#232323; }
.sp-sumario a:focus-visible{ outline:3px solid var(--marca); outline-offset:3px; }

/* --- NAVEGAÇÃO DE CAPÍTULOS (presa sob o topo) ----------------------------
   Aparece depois da abertura (js/simples.js). Mostra onde a pessoa está e
   leva a qualquer capítulo; o fio embaixo enche com a leitura. */
.sp-capnav{
  position:sticky; top:64px; z-index:40;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.js .sp-capnav{ transform:translateY(-110%); opacity:0; pointer-events:none;
  transition:transform var(--d-medium) var(--ease-toque), opacity var(--d-normal) var(--ease-toque); }
.js .sp-capnav.is-on{ transform:none; opacity:1; pointer-events:auto; }
.sp-capnav ol{
  display:flex; gap:var(--s-1); margin:0; padding:var(--s-2) 0; list-style:none;
  overflow-x:auto; scrollbar-width:none;
}
.sp-capnav ol::-webkit-scrollbar{ display:none; }
.sp-capnav a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--s-3);
  border-radius:var(--r-full); white-space:nowrap; text-decoration:none;
  font-size:var(--t-small); color:var(--ink-muted);
  transition:background-color var(--d-normal) var(--ease-toque), color var(--d-normal) var(--ease-toque);
}
.sp-capnav a span{ font-weight:700; font-variant-numeric:tabular-nums; }
.sp-capnav a:hover{ color:var(--ink); background:var(--card); }
.sp-capnav a[aria-current="true"]{ background:var(--ink); color:var(--paper); }
.sp-capnav a:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.sp-capnav__fio{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--sp-rosa-forte);
  transform:scaleX(var(--lido, 0)); transform-origin:left; }

/* --- CAPÍTULO ------------------------------------------------------------ */
.sp-cap{ padding-block:var(--section-y); border-top:1px solid var(--rule); scroll-margin-top:120px; }
.sp-cap--escura{ border-top:0; }
.sp-cap__head{ margin-bottom:var(--s-10); }
.sp-cap__num{ display:flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-3);
  font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-faint); }
.sp-cap__num span{
  display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--r-full);
  background:var(--ink); color:var(--paper); letter-spacing:0; font-variant-numeric:tabular-nums;
}
.sp-cap--escura .sp-cap__num{ color:var(--on-anchor-muted); }
.sp-cap--escura .sp-cap__num span{ background:var(--marca); color:#232323; }
.sp-cap__h2{ max-width:18ch; font-size:clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height:1.05; letter-spacing:-.025em; text-wrap:balance; }

.sp-texto{ display:grid; gap:var(--s-4); max-width:var(--measure); }
.sp-texto p, .sp-bloco__txt p, .sp-intro{ color:var(--ink-muted); font-size:1.0625rem; line-height:1.65; }
.sp-texto strong, .sp-bloco__txt strong{ color:var(--ink); }
.sp-texto--abre p{ font-size:var(--t-lead); color:var(--ink); line-height:1.55; }
.sp-texto--abre{ margin-bottom:var(--s-12); }
.sp-legenda{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--ink-faint); }

/* o passo numerado de cada capítulo (1 · Inspiração, 2 · Logo...) */
.sp-passo{
  display:inline-flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-5);
  font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink);
}
.sp-passo span{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--ink); font-size:12px; letter-spacing:0;
}
.sp-cap--escura .sp-passo{ color:var(--on-anchor); }
.sp-cap--escura .sp-passo span{ border-color:var(--on-anchor); }

/* bloco: texto de um lado, mídia do outro, alternando */
.sp-bloco{ display:grid; gap:var(--s-6); margin-top:var(--s-16); }
.sp-bloco > .sp-passo{ grid-column:1 / -1; margin-bottom:0; }
@media (min-width:900px){
  .sp-bloco--esq{ grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); column-gap:var(--s-12); align-items:start; }
  .sp-bloco--dir{ grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); column-gap:var(--s-12); align-items:start; }
  .sp-bloco--dir > .sp-bloco__txt{ grid-column:2; grid-row:2; }
  .sp-bloco--dir > :not(.sp-passo):not(.sp-bloco__txt){ grid-column:1; grid-row:2 / span 3; }
  .sp-bloco--esq > .sp-bloco__txt{ position:sticky; top:150px; }
  .sp-bloco--dir > .sp-bloco__txt{ position:sticky; top:150px; }
}
.sp-bloco__txt{ display:grid; gap:var(--s-4); align-content:start; }
.sp-bloco__midia{ display:grid; gap:var(--s-5); min-width:0; }

/* pranchas ampliáveis */
.sp-prancha{ margin:0; }
.sp-prancha img{ border-radius:var(--r-lg); border:1px solid var(--rule); }
.sp-prancha--mini{ max-width:300px; }
.sp-prancha--mini figcaption{ font-size:12px; }

/* vídeos que tocam sozinhos (com pausa) */
.sp-video{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#FFFFFF; border:1px solid var(--rule); }
.sp-video video{ display:block; width:100%; height:auto; }
.sp-video--solto{ border:0; background:transparent; }
.sp-video--branco{ background:#FFFFFF; }
.sp-video--tela{ background:#F5F5F5; }
.sp-video__pausa{
  position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(35,35,35,.78); color:#FFFFFF; cursor:pointer;
  opacity:0; transition:opacity var(--d-normal) var(--ease-toque);
}
.sp-video:hover .sp-video__pausa, .sp-video__pausa:focus-visible, .sp-video.is-pausado .sp-video__pausa{ opacity:1; }
@media (hover:none){ .sp-video__pausa{ opacity:.85; } }
.sp-video__pausa:focus-visible{ outline:3px solid var(--marca); outline-offset:2px; }
/* ícone: duas barras (pausar) ou triângulo (tocar) */
.sp-video__pi{ width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
.sp-video.is-pausado .sp-video__pi{ width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor; margin-left:3px; }

/* --- PRÓLOGO: A BATATA QUENTE ------------------------------------------- */
.sp-duo{ display:grid; gap:var(--s-8); align-items:center; }
@media (min-width:900px){ .sp-duo{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--s-12); } }
.sp-duo .sp-video{ max-width:440px; justify-self:center; }

.sp-batata{
  position:relative; margin-top:var(--s-16); padding:var(--s-8);
  background:var(--card); border:1px solid var(--rule-strong); border-radius:var(--r-lg);
}
.sp-batata__topo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-8); }
.sp-batata__t{ font-size:var(--t-h3); }
.sp-batata__topo .small{ color:var(--ink-muted); margin-top:var(--s-1); }
.sp-batata__play .ico{ --ico:16px; }
.sp-batata__mesa{ display:grid; gap:var(--s-4); grid-template-columns:repeat(2, minmax(0, 1fr)); margin:0; padding:0; list-style:none; }
@media (min-width:760px){ .sp-batata__mesa{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.sp-batata__mesa li{
  position:relative; display:grid; align-content:start; gap:var(--s-3); min-height:150px; padding:var(--s-5);
  border:1.5px dashed var(--rule-strong); border-radius:var(--r-md);
  transition:border-color var(--d-normal) var(--ease-toque), background-color var(--d-normal) var(--ease-toque);
}
.sp-batata__mesa b{ font-size:1.0625rem; }
.sp-batata__fala{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.45;
  opacity:0; transform:translateY(6px); transition:opacity var(--d-normal) var(--ease-toque), transform var(--d-normal) var(--ease-toque); }
.sp-batata__mesa li.is-com{ border-style:solid; border-color:#E8762C; background:#FFF4EC; }
.sp-batata__mesa li.is-falou .sp-batata__fala{ opacity:1; transform:none; }
.sp-batata__fim.is-com{ border-color:#B0261E; background:#FDECEA; }
.sp-batata__fim.is-falou b{ color:#9E1F18; }
/* a batata: bolinha laranja que pula de mesa em mesa */
.sp-batata__bola{
  position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50% 46% 52% 48%;
  background:radial-gradient(circle at 35% 30%, #FFC37A, #E8762C 55%, #B8501A);
  box-shadow:0 0 0 6px rgba(232,118,44,.18), 0 8px 16px -6px rgba(184,80,26,.7);
  transform:translate(var(--bx, 40px), var(--by, 120px)); opacity:0; pointer-events:none;
  transition:transform 620ms cubic-bezier(.5,-0.35,.4,1.45), opacity var(--d-normal) var(--ease-toque);
}
.sp-batata.is-jogando .sp-batata__bola, .sp-batata.is-fim .sp-batata__bola{ opacity:1; }
.sp-batata.is-jogando .sp-batata__bola{ animation:treme 260ms ease-in-out infinite alternate; }
@keyframes treme{ from{ rotate:-8deg; } to{ rotate:8deg; } }
.sp-batata__moral{ margin-top:var(--s-6); font-size:var(--t-lead); font-weight:700; color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity var(--d-medium) var(--ease-toque), transform var(--d-medium) var(--ease-toque); }
.sp-batata.is-fim .sp-batata__moral{ opacity:1; transform:none; }
html:not(.js) .sp-batata__fala, html:not(.js) .sp-batata__moral{ opacity:1; transform:none; }
html:not(.js) .sp-batata__play{ display:none; }

/* --- 01 · A MARCA --------------------------------------------------------- */
.sp-credito{
  display:grid; grid-template-columns:56px minmax(0, 1fr); gap:var(--s-2) var(--s-3); align-items:center;
  padding:var(--s-4); background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
}
.sp-credito > img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.sp-credito p{ display:grid; gap:2px; font-size:var(--t-small); color:var(--ink-muted); line-height:1.4; }
.sp-credito b{ color:var(--ink); }
.sp-credito ul{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-2); margin:var(--s-2) 0 0; padding:0; list-style:none; }
.sp-credito ul img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); }

/* mural de ícones: entram em cascata e mexem com o mouse */
.sp-contador{ font-size:var(--t-small); color:var(--ink-muted); }
.sp-contador b{ display:block; font-size:clamp(3rem, 2rem + 3vw, 4.5rem); line-height:1; letter-spacing:-.04em; color:var(--sp-rosa-forte); }
.sp-mural{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-2); margin:0; padding:var(--s-4);
  list-style:none; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
}
@media (min-width:560px){ .sp-mural{ grid-template-columns:repeat(8, minmax(0, 1fr)); } }
.sp-mural li{ display:grid; place-items:center; aspect-ratio:1; border-radius:var(--r-md);
  transition:background-color var(--d-fast) var(--ease-toque); }
.sp-mural img{ width:72%; height:auto; transition:transform var(--d-medium) cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover) and (pointer:fine){
  .sp-mural li:hover{ background:var(--sp-rosa-claro); }
  .sp-mural li:hover img{ transform:scale(1.22) rotate(-6deg); }
}
.sp-mural.is-espera li img{ opacity:0; transform:scale(.6); }
.sp-mural.is-vem li img{ transition:opacity 380ms var(--ease-entra) calc(var(--i) * 28ms), transform 520ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 28ms); }
@media (min-width:900px){
  .sp-bloco--esq > .sp-mural{ grid-column:2; }
  .sp-bloco--esq > .sp-mural + .sp-prancha{ grid-column:2; }
}

.sp-dupla{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
@media (max-width:560px){ .sp-dupla{ grid-template-columns:1fr; } }

.sp-lili{ align-items:center; }
.sp-citacao{ margin:0; padding:0; }
.sp-citacao p{ font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height:1.4; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty; }
.sp-citacao p::before{ content:"“"; display:block; font-size:3.5em; line-height:.6; color:var(--sp-rosa); margin-bottom:var(--s-2); }
.sp-lili__img{ display:block; width:min(100%, 360px); height:auto; justify-self:center;
  transition:transform var(--d-slow) cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .sp-lili__img:hover{ transform:rotate(-4deg) translateY(-6px); }
}

.sp-fotos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); margin:0; padding:0; list-style:none; }
@media (min-width:900px){ .sp-fotos{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.sp-fotos li{ display:grid; gap:var(--s-2); }
.sp-fotos img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-lg);
  transition:transform var(--d-medium) var(--ease-toque); }
.sp-fotos span{ font-size:var(--t-small); color:var(--ink-faint); }
@media (hover:hover) and (pointer:fine){ .sp-fotos li:hover img{ transform:translateY(-4px) rotate(-1deg); } }

/* o filme: card escuro com o play grande */
.sp-filme{
  display:grid; gap:var(--s-6); margin-top:var(--s-16); padding:var(--s-6);
  background:var(--anchor); color:var(--on-anchor); border-radius:var(--r-lg);
}
@media (min-width:900px){ .sp-filme{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); align-items:center; gap:var(--s-10); padding:var(--s-10); } }
.sp-filme .sp-passo{ color:var(--on-anchor); }
.sp-filme .sp-passo span{ border-color:var(--on-anchor); }
.sp-filme__txt p:not(.sp-passo){ font-size:var(--t-lead); line-height:1.5; color:var(--on-anchor-muted); }
.sp-filme__tela{ position:relative; border-radius:var(--r-md); overflow:hidden; background:#000; }
.sp-filme__tela video{ display:block; width:100%; height:auto; }
.sp-filme__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  border:0; background:rgba(20,20,20,.32); color:#232323; cursor:pointer;
  font:inherit; font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase;
}
.sp-filme__play::before{ content:""; position:absolute; width:96px; height:96px; border-radius:50%; background:var(--marca);
  box-shadow:0 0 0 0 rgba(255,204,0,.5); animation:pulsa 2.2s var(--ease-toque) infinite; }
.sp-filme__play .ico{ position:relative; --ico:30px; }
.sp-filme__play span{ position:absolute; top:calc(50% + 60px); padding:6px 12px; border-radius:var(--r-full); background:var(--marca); }
.sp-filme__play .sp-filme__dur{ top:calc(50% + 100px); background:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
.sp-filme__play:focus-visible{ outline:3px solid var(--marca); outline-offset:-6px; }
.sp-filme.is-tocando .sp-filme__play{ display:none; }
html:not(.js) .sp-filme__play{ display:none; }
@keyframes pulsa{ 0%{ box-shadow:0 0 0 0 rgba(255,204,0,.55); } 70%, 100%{ box-shadow:0 0 0 22px rgba(255,204,0,0); } }

/* --- 02 · O PLANEJAMENTO --------------------------------------------------- */
.sp-historia{
  max-width:62ch; margin:var(--s-16) auto 0; padding:var(--s-8) var(--s-8) var(--s-8) var(--s-10);
  border-left:4px solid var(--sp-rosa); background:var(--card); border-radius:0 var(--r-lg) var(--r-lg) 0;
  display:grid; gap:var(--s-4);
}
.sp-historia p{ font-size:1.125rem; line-height:1.65; color:var(--ink-muted); }
.sp-historia__virada{
  font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem) !important; font-weight:700; color:var(--ink) !important; line-height:1.25 !important;
  background:linear-gradient(transparent 62%, var(--sp-rosa-claro) 62%); background-repeat:no-repeat;
  background-size:var(--marca-x, 100%) 100%; width:fit-content;
  transition:background-size 900ms cubic-bezier(.65,0,.35,1);
}
.sp-historia__virada.is-espera{ --marca-x:0%; }

.sp-problema{ display:grid; gap:var(--s-8); }
.sp-problema__t{ font-size:clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight:700; line-height:1.2; max-width:30ch; text-wrap:balance; }
.sp-problema__lista{ display:grid; gap:var(--s-4); margin:0; padding:0; list-style:none; }
@media (min-width:760px){ .sp-problema__lista{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.sp-problema__lista li{ display:grid; gap:var(--s-2); align-content:start; padding:var(--s-6);
  background:var(--card); border:1px solid var(--rule-strong); border-radius:var(--r-lg); }
.sp-problema__lista img{ width:64px; height:auto; }
.sp-problema__lista h3, .sp-serv h3{ font-size:1.125rem; }
.sp-problema__lista p, .sp-serv p{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.5; }

.sp-jornada{ display:grid; gap:var(--s-2); margin:var(--s-2) 0 0; padding:0; list-style:none; counter-reset:j; }
.sp-jornada li{ counter-increment:j; display:flex; align-items:center; gap:var(--s-3); font-size:var(--t-small); color:var(--ink); }
.sp-jornada li::before{ content:counter(j); display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--sp-rosa-claro); color:var(--ink); font-size:12px; font-weight:700; }

.sp-intro{ max-width:var(--measure); margin-bottom:var(--s-6); }
.sp-servicos{ display:grid; gap:var(--s-4); margin:0 0 var(--s-6); padding:0; list-style:none; }
@media (min-width:560px){ .sp-servicos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1000px){ .sp-servicos{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.sp-serv{ display:grid; gap:var(--s-2); align-content:start; padding:var(--s-6); background:var(--card);
  border:1px solid var(--rule-strong); border-radius:var(--r-lg);
  transition:transform var(--d-medium) var(--ease-toque), box-shadow var(--d-medium) var(--ease-toque); }
.sp-serv img{ width:60px; height:auto; transition:transform var(--d-medium) cubic-bezier(.34,1.56,.64,1); }
.sp-serv__preco{ margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--rule); font-weight:700; color:var(--ink) !important; }
@media (hover:hover) and (pointer:fine){
  .sp-serv:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -20px rgba(176,67,110,.55); }
  .sp-serv:hover img{ transform:rotate(-8deg) scale(1.08); }
}

/* --- 03 · A INFRAESTRUTURA ---------------------------------------------- */
/* comparador antes e depois: um input range invisível por cima faz tudo
   (mouse, toque e teclado); a linha e a alça são só desenho */
.sp-compara{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--rule-strong); background:#FFFFFF;
  touch-action:pan-y; user-select:none; }
.sp-compara img{ display:block; width:100%; height:auto; pointer-events:none; }
.sp-compara__antes{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.sp-compara__antes img{ width:100%; height:100%; object-fit:cover; }
.sp-compara__linha{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#232323; pointer-events:none; }
.sp-compara__linha > span{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:2px; padding:10px 12px; border-radius:var(--r-full);
  background:#232323; color:#FFFFFF; box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.sp-compara__linha .ico{ --ico:16px; }
.sp-compara__selo{
  position:absolute; top:var(--s-4); padding:6px 12px; border-radius:var(--r-full);
  font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase;
  background:rgba(35,35,35,.86); color:#FFFFFF; pointer-events:none;
}
.sp-compara__selo--v1{ left:var(--s-4); }
.sp-compara__selo--v2{ right:var(--s-4); }
.sp-compara__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.sp-compara:has(.sp-compara__range:focus-visible){ outline:3px solid var(--ink); outline-offset:4px; }
.sp-compara.is-dica .sp-compara__linha > span{ animation:balanca 1.6s var(--ease-toque) 2; }
@keyframes balanca{ 0%, 100%{ transform:translate(-50%, -50%); } 30%{ transform:translate(calc(-50% - 10px), -50%); } 60%{ transform:translate(calc(-50% + 10px), -50%); } }

/* abas com os vídeos do sistema */
.sp-abas{ margin-top:var(--s-4); }
.sp-abas__lista{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.sp-abas__aba{
  min-height:44px; padding:0 var(--s-5); border:1px solid var(--rule-strong); border-radius:var(--r-full);
  background:var(--card); color:var(--ink-muted); font:inherit; font-size:var(--t-small); font-weight:600; cursor:pointer;
  transition:background-color var(--d-normal) var(--ease-toque), color var(--d-normal) var(--ease-toque), border-color var(--d-normal) var(--ease-toque);
}
.sp-abas__aba:hover{ color:var(--ink); border-color:var(--ink); }
.sp-abas__aba[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.sp-abas__aba:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.sp-abas__painel[hidden]{ display:none; }
.sp-abas__painel{ animation:painel-entra var(--d-medium) var(--ease-entra); }
@keyframes painel-entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.sp-cap .sp-passo:not(:first-child){ margin-top:var(--s-12); }

/* --- 04 · O PRODUTO ------------------------------------------------------- */
.sp-dash{ position:relative; max-width:1000px; }
.sp-dash > img{ display:block; width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--rule); }
.sp-dash__pontos{ margin:0; padding:0; list-style:none; }
.sp-ponto{ position:absolute; left:var(--x); top:var(--y); }
.sp-ponto__btn{
  position:relative; display:grid; place-items:center; width:44px; height:44px; margin:-22px 0 0 -22px;
  border:0; border-radius:50%; background:transparent; cursor:pointer; font:inherit;
}
.sp-ponto__btn > span[aria-hidden]{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:#232323; color:#FFFFFF; font-size:13px; font-weight:700;
  box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.3);
  transition:transform var(--d-normal) cubic-bezier(.34,1.56,.64,1), background-color var(--d-fast) var(--ease-toque);
}
.sp-ponto__btn::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:2px solid #232323; opacity:.5;
  animation:onda 2.4s var(--ease-toque) infinite; animation-delay:calc(var(--n, 0) * .3s); }
@keyframes onda{ 0%{ transform:scale(1); opacity:.5; } 80%, 100%{ transform:scale(1.9); opacity:0; } }
.sp-ponto__btn:hover > span[aria-hidden], .sp-ponto__btn[aria-expanded="true"] > span[aria-hidden]{ transform:scale(1.15); background:var(--sp-rosa-forte); }
.sp-ponto__btn:focus-visible{ outline:3px solid #232323; outline-offset:2px; }
.sp-ponto__card{
  position:absolute; z-index:3; left:50%; top:30px; width:min(260px, 70vw); transform:translateX(-50%) translateY(6px);
  display:grid; gap:4px; padding:var(--s-4); border-radius:var(--r-md);
  background:#232323; color:#FFFFFF; font-size:var(--t-small); line-height:1.45; box-shadow:0 18px 36px -14px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--d-normal) var(--ease-toque), transform var(--d-normal) var(--ease-toque), visibility 0s linear var(--d-normal);
}
.sp-ponto__card b{ color:var(--marca); }
.sp-ponto.is-aberto .sp-ponto__card{ opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto; transition-delay:0s; }
.sp-ponto[style*="--x:16%"] .sp-ponto__card{ left:-10px; transform:translateY(6px); }
.sp-ponto[style*="--x:16%"].is-aberto .sp-ponto__card{ transform:none; }
.sp-ponto[style*="--x:79%"] .sp-ponto__card{ left:auto; right:-10px; transform:translateY(6px); }
.sp-ponto[style*="--x:79%"].is-aberto .sp-ponto__card{ transform:none; }
html:not(.js) .sp-dash__pontos{ display:none; }
/* No celular o balão vira uma faixa presa à base do painel: sempre dentro
   da tela, qualquer que seja o ponto tocado. */
@media (max-width:760px){
  .sp-ponto{ position:static; }
  .sp-ponto__btn{ position:absolute; left:var(--x); top:var(--y); }
  .sp-ponto .sp-ponto__card, .sp-ponto[style] .sp-ponto__card{
    left:8px !important; right:8px !important; top:auto; bottom:8px; width:auto; transform:translateY(6px) !important;
  }
  .sp-ponto.is-aberto .sp-ponto__card, .sp-ponto[style].is-aberto .sp-ponto__card{ transform:none !important; }
}

/* galeria do site: faixa com encaixe, o celular no meio */
.sp-galeria{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 520px); gap:var(--s-4);
  margin:0 calc(-1 * clamp(20px, 5vw, 40px)); padding:0 clamp(20px, 5vw, 40px) var(--s-3); list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(20px, 5vw, 40px); overscroll-behavior-x:contain;
}
.sp-galeria li{ scroll-snap-align:start; }
.sp-galeria img{ display:block; width:100%; height:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-lg); }
.sp-galeria__cel{ display:grid; place-items:center; background:#F2DCE6; border-radius:var(--r-lg); aspect-ratio:1; }
.sp-celular{ width:46%; padding:8px; border-radius:30px; background:#1B1B1B; box-shadow:0 20px 40px -18px rgba(0,0,0,.6); }
.sp-celular .sp-video{ border-radius:22px; border:0; }
.sp-galeria:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }

/* --- 05 · O RESULTADO (faixa escura) --------------------------------------- */
.sp-cap--escura .sp-cap__h2{ color:var(--on-anchor); }
.sp-numeros6{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:var(--s-8) var(--s-6) !important; }
@media (min-width:760px){ .sp-numeros6{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } }
.sp-recs__t{ margin:var(--s-16) 0 var(--s-6); font-size:var(--t-h3); color:var(--on-anchor); }
.sp-recs{ display:grid; gap:var(--s-4); }
@media (min-width:760px){ .sp-recs{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1100px){ .sp-recs{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.sp-rec{
  display:grid; gap:var(--s-5); align-content:space-between; margin:0; padding:var(--s-6);
  background:rgba(255,255,255,.04); border:1px solid var(--on-anchor-rule); border-radius:var(--r-lg);
  transition:border-color var(--d-normal) var(--ease-toque), transform var(--d-medium) var(--ease-toque);
}
.sp-rec:first-child{ border-color:var(--marca); }
@media (min-width:1100px){ .sp-rec:first-child{ grid-row:span 2; } .sp-rec:first-child blockquote p{ font-size:1.375rem; } }
.sp-rec blockquote{ margin:0; }
.sp-rec blockquote p{ color:var(--on-anchor); font-size:1.0625rem; line-height:1.55; }
.sp-rec blockquote p::before{ content:"“"; display:block; font-size:2.4em; line-height:.6; color:var(--marca); margin-bottom:var(--s-2); }
.sp-rec figcaption{ display:flex; align-items:center; gap:var(--s-3); }
.sp-rec figcaption img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.sp-rec figcaption > span{ display:grid; gap:2px; font-size:var(--t-small); color:var(--on-anchor-muted); line-height:1.35; }
.sp-rec figcaption b{ color:var(--on-anchor); }
.sp-rec figcaption em{ font-style:normal; color:var(--marca); }
@media (hover:hover) and (pointer:fine){ .sp-rec:hover{ border-color:var(--on-anchor-muted); transform:translateY(-3px); } }

/* --- 06 · O FIM ---------------------------------------------------------- */
.sp-razoes li{ grid-template-columns:auto minmax(0, 1fr); column-gap:var(--s-6); row-gap:var(--s-2); }
.sp-razoes li::before{ grid-row:1 / span 2; color:var(--sp-rosa-forte); font-size:clamp(2rem, 1.4rem + 2vw, 3rem); }
.sp-razoes li > *{ grid-column:2; }
.sp-razoes h3{ margin-bottom:0; }
@media (max-width:520px){ .sp-razoes li{ grid-template-columns:1fr; } .sp-razoes li::before{ grid-row:auto; } .sp-razoes li > *{ grid-column:1; } }
.sp-licoes__t{ margin:var(--s-16) 0 var(--s-6); font-size:var(--t-h3); }
.licoes .licao{ padding:var(--s-6); background:var(--card); border:1px solid var(--rule-strong); border-radius:var(--r-lg); }
.sp-fecho{ margin:var(--s-16) 0 0; padding:var(--s-10) 0 0; border-top:1px solid var(--rule); }
.sp-fecho p{ max-width:26ch; font-size:clamp(1.625rem, 1.1rem + 2vw, 2.5rem); font-weight:700; line-height:1.2; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }

@media (prefers-reduced-motion: reduce){
  .sp *, .sp-capnav{ transition:none !important; animation:none !important; }
}