/* Spotlight cards — os cards de "O problema": cada um inclina para o ponteiro em mola, acende na
   cor de acento, varre um brilho e cresce um sublinhado enquanto os vizinhos escurecem (porte do
   Spotlight Cards do KokonutUI para o site: só CSS + marketing/spotlight.js, sem dependências).
   Carregado depois de site.css: sobrescreve a transição de transform de .prob__card, que o JS dirige. */

.spot { position: relative; }
.spot::before {                                  /* folha pontilhada atrás dos cards */
  content: "";
  position: absolute; inset: -1.25rem; z-index: 0;
  border-radius: var(--k-radius-lg);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--k-navy) 7%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.spot__card {
  --spot-cor: var(--k-emerald);
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.25rem;
  transform: perspective(900px);
  transition: border-color var(--k-mov) var(--k-ease), box-shadow var(--k-mov) var(--k-ease);
}
.spot__card:hover {
  transform: perspective(900px);                 /* o translateY de .prob__card:hover sai; a mola inclina */
  border-color: color-mix(in srgb, var(--spot-cor) 40%, var(--k-border));
}

.spot__tinta, .spot__brilho, .spot__varredura, .spot__linha { position: absolute; pointer-events: none; }
.spot__tinta, .spot__brilho {
  inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--spot-cor) 8%, transparent), transparent 65%);
}
.spot__brilho {                                  /* opacidade dirigida pelo JS (mola 180/22) */
  background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--spot-cor) 18%, transparent), transparent 65%);
  opacity: 0;
}
.spot__varredura {                               /* brilho que varre o card no hover */
  top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--spot-cor) 9%, transparent), transparent);
  transform: translateX(-100%) skewX(-12deg);
  transition: transform 700ms ease-out;
}
.spot__card:hover .spot__varredura { transform: translateX(280%) skewX(-12deg); }

.spot__icone {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--k-radius);
  color: var(--spot-cor);
  background: color-mix(in srgb, var(--spot-cor) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spot-cor) 19%, transparent);
}
.spot__txt { position: relative; z-index: 1; }
.spot__txt h3 { margin-bottom: 0.5rem; }
.spot__seta { display: none; }

.spot__linha {                                   /* sublinhado que cresce no hover */
  left: 0; bottom: 0; height: 2px; width: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, color-mix(in srgb, var(--spot-cor) 50%, transparent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--k-ease);
}
.spot__card:hover .spot__linha { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .spot__varredura, .spot__linha { transition: none; }
}

/* Realce — uma seção sobre uma grade de pontos (célula 16px, ponto r=1.25px) que acendem num círculo de
   200px em volta do ponteiro (porte do Hero Highlight da Aceternity: as duas camadas de pontos + o bloco
   "realce" de efeitos.js, que move a máscara). Marcação:
     <section class="sec realce">
       <div class="realce__fundo" aria-hidden="true"><div class="realce__pontos"></div><div class="realce__pontos realce__pontos--acesos"></div></div>
       … com o bloco de texto em `.realce__texto` (ganha um halo na cor do fundo para ler em chão limpo) …
   A cor do halo e dos pontos segue o fundo da seção (creme, menta ou navy). O contêiner esvai em cima e
   embaixo, para os pontos não pararem secos nas bordas. */
.realce {
  --realce-fundo: var(--k-bg);
  --realce-ponto: color-mix(in srgb, var(--k-navy) 12%, transparent);
  --realce-aceso: var(--k-emerald);
  position: relative;
  isolation: isolate;
  overflow-x: clip;                              /* o halo de .realce__texto passa da coluna; não pode alargar a página */
}
.sec--mint.realce { --realce-fundo: var(--k-bg-alt); }
.sec--navy.realce {
  --realce-fundo: var(--k-bg-inverse);
  --realce-ponto: color-mix(in srgb, var(--k-mint) 14%, transparent);
  --realce-aceso: var(--k-mint);
}
.realce__fundo {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 58%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 58%, transparent);
}
.realce__pontos {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--realce-ponto) 1.25px, transparent 1.7px);
  background-size: 16px 16px;
}
.realce__pontos--acesos {                        /* máscara centrada no ponteiro pelo JS */
  background-image: radial-gradient(circle, var(--realce-aceso) 1.25px, transparent 1.7px);
  opacity: 0;
  transition: opacity 300ms;
  -webkit-mask-image: radial-gradient(200px circle at 0px 0px, black 0%, transparent 100%);
  mask-image: radial-gradient(200px circle at 0px 0px, black 0%, transparent 100%);
}
.realce:hover .realce__pontos--acesos { opacity: 1; }

.realce__texto { position: relative; }
.realce__texto::before {                         /* halo na cor do fundo: o texto lê em chão limpo, os pontos ficam ao redor */
  content: "";
  position: absolute; inset: -12% -16%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, var(--realce-fundo) 42%, color-mix(in srgb, var(--realce-fundo) 75%, transparent) 62%, transparent 82%);
}

/* Palco pontilhado — um campo de pontos (a mesma grade do realce) só atrás de um mock, com a máscara radial
   do demo do Dot Pattern do MagicUI, deslocada para cima e para a direita para "escapar" do card e não virar
   um retângulo pontilhado. Só CSS: envolva o mock em `<div class="palco">`. Herda --realce-ponto da seção
   (creme, menta ou navy) quando ela for `.realce`; fora dela usa navy a 10%. */
.palco { position: relative; }
.palco::before {
  content: "";
  position: absolute; inset: -16% -14% -12% -12%; z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--realce-ponto, color-mix(in srgb, var(--k-navy) 10%, transparent)) 1.25px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(62% 58% at 58% 40%, black 25%, transparent 100%);
  mask-image: radial-gradient(62% 58% at 58% 40%, black 25%, transparent 100%);
}
.palco > * { position: relative; z-index: 1; }
@media (max-width: 899px) {                      /* no celular o card ocupa a coluna toda: os pontos ficam dentro das margens do .wrap */
  .palco::before { left: -1.25rem; right: -1.25rem; }
}

/* Desfoque — os filhos de um `.desfoque` entram em cascata quando ele chega à viewport: opacidade 0→1,
   blur 6px→0 e 6px de descida, 400 ms ease-out, 250 ms de base + 50 ms por item (porte do Blur Fade do
   MagicUI, com os tempos do demo). Só escondidos com JS ligado (`.js`), como o `.reveal` do site; o bloco
   "desfoque" de efeitos.js marca `data-revelado` e o atraso de cada filho. */
.js .desfoque > * {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(6px);
  transition: opacity 400ms ease-out var(--desfoque-atraso, 40ms),
              transform 400ms ease-out var(--desfoque-atraso, 40ms),
              filter 400ms ease-out var(--desfoque-atraso, 40ms);
  will-change: opacity, transform, filter;
}
.js .desfoque > [data-revelado] { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .desfoque > * { transition: none; opacity: 1; transform: none; filter: none; }
}

/* Carrossel de passos — no celular (< 900px) o `passos_no_celular` (home e landings) deixa de empilhar
   cards e vira um carrossel de um viewport: pílulas numeradas em cima, o iPhone com as telas no meio e o
   texto do passo ativo embaixo, avançando sozinho enquanto está na tela (porte do Feature Carousel do
   cult-ui: o texto sai em y −20 e entra em y 20 com número / título / texto deslizando de x −20 em
   cascata, 300 ms; a tela sai e entra em escala 0,95 + opacidade numa mola 300/25 de massa 0,5; as
   pílulas vão a escala 0,8 / opacidade 0,5 fora da vez e ganham um check em mola quando concluídas).
   O JS liga tudo com `.is-carrossel`; sem JS, ou no desktop, nada muda. */
@media (max-width: 899px) {
  .lp-reveal.is-carrossel { display: grid; gap: var(--k-space-3); justify-items: center; }
  .lp-reveal.is-carrossel .lp-pilulas { order: 1; display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .lp-reveal.is-carrossel .lp-reveal__tela { order: 2; display: block; width: 100%; cursor: pointer; }
  .lp-reveal.is-carrossel .lp-reveal__tela .lp-iphone {
    width: min(300px, 64vw, calc((100svh - 22rem) * 433 / 882));
    margin-inline: auto;
    filter: drop-shadow(0 30px 50px rgba(10, 27, 63, .35));
  }
  .lp-reveal.is-carrossel .lp-iphone__tela img { transition: none; }   /* o JS anima a troca */
  .lp-reveal.is-carrossel .lp-passos { order: 3; display: block; width: 100%; min-height: 9.5rem; cursor: pointer; }
  .lp-reveal.is-carrossel .lp-passo { background: none; border: 0; border-radius: 0; }
  .lp-reveal.is-carrossel .lp-passo:not(.is-on) { display: none; }
  .lp-reveal.is-carrossel .lp-passo__img { display: none; }
  .lp-reveal.is-carrossel .lp-passo__txt { padding: 0; text-align: center; max-width: 34ch; margin-inline: auto; }
}
.lp-pilulas { display: none; }
.lp-pilula {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--k-border); border-radius: 999px;
  background: var(--k-surface); color: var(--k-text-muted);
  font: 700 var(--k-step--1) / 1 var(--k-font-mono);
  cursor: pointer;
}
.lp-pilula[data-estado="atual"] { background: var(--k-emerald); border-color: var(--k-emerald); color: #fff; }
.lp-pilula[data-estado="concluido"] { background: var(--k-mint); border-color: var(--k-mint); color: var(--k-emerald); }
.lp-pilula svg { display: none; width: 14px; height: 14px; }
.lp-pilula[data-estado="concluido"] svg { display: block; }
.lp-pilula[data-estado="concluido"] .lp-pilula__num { display: none; }

/* Cards expansíveis — no celular (< 900px) os spotlight cards do `#problema` colapsam em ícone + título e um
   toque abre o texto: a altura do corpo vai de 0 ao conteúdo numa mola 200/20 (a mola do Expandable do
   cult-ui, com o leve quique dela) enquanto o parágrafo entra em fade de 300 ms easeInOut (o preset "fade");
   um aberto por vez, o primeiro começa aberto. O JS liga com `.is-expansivel`; no desktop nada muda. */
@media (max-width: 899px) {
  .spot.is-expansivel .spot__card {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; column-gap: .9rem; align-items: center;
    padding: 1.1rem 1.25rem;
  }
  .spot.is-expansivel .spot__icone { width: 2.5rem; height: 2.5rem; }
  .spot.is-expansivel .spot__txt { display: contents; }   /* título, seta e corpo viram células da grade… */
  .spot.is-expansivel .spot__titulo, .spot.is-expansivel .spot__seta, .spot.is-expansivel .spot__corpo { position: relative; z-index: 1; } /* …acima das camadas de tinta */
  .spot.is-expansivel .spot__titulo { margin: 0; font-size: var(--k-step-0); line-height: 1.3; cursor: pointer; }
  .spot.is-expansivel .spot__seta {
    display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center;
    color: var(--k-text-muted);
    transition: transform var(--k-mov-lento) var(--k-ease);
  }
  .spot.is-expansivel .spot__seta svg { width: 18px; height: 18px; }
  .spot.is-expansivel .spot__card[data-aberto] .spot__seta { transform: rotate(180deg); }
  .spot.is-expansivel .spot__corpo { grid-column: 1 / -1; overflow: hidden; height: 0; }
  .spot.is-expansivel .spot__corpo p { padding-top: .8rem; margin: 0; }
  .spot.is-expansivel .spot__linha { display: none; }
}

/* Abas de planos — no celular (< 900px) os cards de uma `.price__grid` viram abas: um controle segmentado
   cujo marcador desliza em mola (bounce 0,3 / 0,6 s, o layoutId do Tabs da Aceternity) e só o card ativo à
   vista, que quica em y 0→40→0 na troca (o FadeInDiv do original). Rótulo curto em `data-aba` do card. O JS
   monta o controle e liga com `.is-abas`; no desktop nada muda. */
.abas { display: none; }
@media (max-width: 899px) {
  .price__grid.is-abas { display: block; }
  .price__grid.is-abas .price__card:not(.is-on) { display: none; }
  .abas {
    position: relative; display: flex; gap: .25rem;
    margin: var(--k-space-4) 0 var(--k-space-3); padding: .25rem;
    border-radius: 999px; background: color-mix(in srgb, var(--k-navy) 6%, transparent);
  }
  .abas__marca {
    position: absolute; top: .25rem; bottom: .25rem; left: 0; width: 0;
    border-radius: 999px; background: var(--k-surface);
    box-shadow: 0 1px 3px rgba(10, 27, 63, .14);
    pointer-events: none;
  }
  .abas__aba {
    position: relative; flex: 1; min-height: 44px; padding: .6rem .5rem;
    border: 0; border-radius: 999px; background: none;
    font: 600 var(--k-step--1) / 1.2 var(--k-font-text); color: var(--k-text-muted);
    cursor: pointer;
  }
  .abas__aba[aria-selected="true"] { color: var(--k-text); }
}