/* Páginas internas, cartões de problema e solução e efeitos de brilho. Carregado depois do estilo.css. */
.menu a[aria-current="page"] { opacity: 1; }
.menu a[aria-current="page"]::after { right: 0; }
.abertura.pagina { padding: 140px 0 72px; text-align: center; }
.abertura.pagina .conteudo { display: block; max-width: 820px; }
.abertura.pagina h1 { font-size: clamp(32px, 4.4vw, 50px); }
.abertura.pagina .sub { margin: 0 auto; }
.grade.dois { grid-template-columns: repeat(2, 1fr); }
.passos.tres { grid-template-columns: repeat(3, 1fr); }
.passos.tres::before { left: 18%; right: 18%; }
.mais { text-align: center; margin-top: 44px; }
.mais a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titulo); font-weight: 600; color: var(--ciano); text-decoration: none; }
.mais a svg.i { width: 20px; height: 20px; transition: transform .2s; }
.mais a:hover svg.i { transform: translateX(5px); }

/* Dor → solução */
.dor {
  position: relative; overflow: hidden; background: var(--branco); border: 1px solid var(--borda); border-radius: 20px; padding: 26px 28px;
  box-shadow: var(--sombra); transition: transform .3s ease, box-shadow .3s ease;
}
.dor:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgb(13 27 46 / .12); }
.dor .antes { display: flex; align-items: center; gap: 10px; color: #8a96a8; font-size: 16px; margin-bottom: 16px; }
.dor .antes span { text-decoration: line-through; text-decoration-color: rgb(241 57 61 / .6); }
.dor .antes svg.i { width: 20px; height: 20px; color: var(--vermelho); }
.dor .depois { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; color: var(--sutil); }
.dor .depois b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 20px; color: var(--texto); line-height: 1.3; margin-bottom: 4px; }
.dor .depois > svg.i { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #e6f5ec; color: var(--verde); stroke-width: 2.4; }

/* Brilho que acompanha o mouse nos cartões */
.cartao, .dor { --mx: 50%; --my: 50%; }
.cartao::before, .dor::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(26 133 186 / .10), transparent 45%);
}
.cartao:hover::before, .dor:hover::before { opacity: 1; }

/* Texto com reflexo passando */
.dourado, .dourado-escuro {
  font-style: normal; background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: reflexo 5s linear infinite;
}
.dourado { background-image: linear-gradient(100deg, #FABB14 0%, #FABB14 38%, #fff3c4 50%, #FABB14 62%, #FABB14 100%); }
.dourado-escuro { background-image: linear-gradient(100deg, var(--verde) 0%, var(--verde) 38%, #5fd59a 50%, var(--verde) 62%, var(--verde) 100%); }

/* Botão com brilho passando e aura pulsando */
.botao.brilho { position: relative; overflow: hidden; isolation: isolate; }
.botao.brilho::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .75), transparent); transform: skewX(-20deg);
  animation: varrer 3.2s ease-in-out infinite;
}
.botao.cheio.brilho { animation: aura-botao 2.6s ease-out infinite; }

/* Faíscas */
.faiscas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.faiscas i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgb(255 255 255 / .7), 0 0 22px 6px rgb(250 187 20 / .35); opacity: 0; animation: piscar-faisca 4.5s ease-in-out infinite;
}
.faiscas i:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; }
.faiscas i:nth-child(2) { top: 72%; left: 14%; animation-delay: 1.4s; width: 4px; height: 4px; }
.faiscas i:nth-child(3) { top: 30%; left: 46%; animation-delay: 2.6s; }
.faiscas i:nth-child(4) { top: 12%; left: 78%; animation-delay: .7s; width: 4px; height: 4px; }
.faiscas i:nth-child(5) { top: 64%; left: 90%; animation-delay: 3.3s; }
.faiscas i:nth-child(6) { top: 86%; left: 56%; animation-delay: 2s; width: 5px; height: 5px; }
.faiscas i:nth-child(7) { top: 44%; left: 30%; animation-delay: 3.9s; width: 3px; height: 3px; }
.faiscas i:nth-child(8) { top: 8%; left: 60%; animation-delay: 1s; width: 3px; height: 3px; }
.abertura > .conteudo { z-index: 1; }

/* Aura atrás da janela do caixa */
.palco { isolation: isolate; }
.palco::before {
  content: ""; position: absolute; inset: 8% 4%; border-radius: 40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(26 133 186 / .75), rgb(250 187 20 / .25), transparent); filter: blur(40px);
  animation: respirar 6s ease-in-out infinite;
}

/* Borda que gira no plano em destaque */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plano.destaque {
  border: 2px solid transparent;
  background: linear-gradient(var(--branco), var(--branco)) padding-box,
              conic-gradient(from var(--giro), var(--ciano), var(--amarelo), var(--verde), var(--ciano)) border-box;
  animation: girar 6s linear infinite;
}

/* Faixa de benefícios com reflexo suave */
.numeros .num {
  background-image: linear-gradient(100deg, var(--azul) 0%, var(--azul) 40%, var(--ciano) 50%, var(--azul) 60%, var(--azul) 100%);
  background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflexo 7s linear infinite;
}

@keyframes reflexo { from { background-position: 200% center; } to { background-position: -20% center; } }
@keyframes varrer { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes aura-botao {
  0% { box-shadow: 0 6px 18px rgb(250 187 20 / .35), 0 0 0 0 rgb(250 187 20 / .45); }
  100% { box-shadow: 0 6px 18px rgb(250 187 20 / .35), 0 0 0 14px rgb(250 187 20 / 0); }
}
@keyframes piscar-faisca { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
@keyframes respirar { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes girar { to { --giro: 360deg; } }

@media (max-width: 920px) {
  .grade.dois { grid-template-columns: 1fr; }
  .abertura.pagina { padding: 116px 0 56px; }
}
@media (max-width: 600px) {
  .passos.tres { grid-template-columns: 1fr; }
  .dor .depois b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .faiscas { display: none; }
}

/* Dentro da chamada final todo filho vira "relative" (estilo.css): as faíscas continuam soltas. */
.final .caixa > .faiscas { position: absolute; }

/* Página não encontrada */
.nao-encontrada { min-height: 100vh; display: grid; place-items: center; }
.logo-404 { height: 64px; width: auto; margin: 0 auto 28px; }
.acoes-404 { margin-top: 28px; }

/* Faixa da página inicial com 3 itens */
.numeros .conteudo.tres { grid-template-columns: repeat(3, 1fr); }
.numeros .conteudo.tres .num { font-size: clamp(22px, 2.4vw, 30px); white-space: nowrap; }
@media (max-width: 920px) {
  .numeros .conteudo.tres { grid-template-columns: 1fr; }
  .numeros .conteudo.tres div { border-right: 0; border-bottom: 1px solid var(--borda); }
  .numeros .conteudo.tres div:last-child { border-bottom: 0; }
}

/* Celular: no toque o "passar o mouse" fica preso depois do toque, então os cartões não sobem nem brilham. */
@media (hover: none) {
  .cartao:hover, .dor:hover, .plano.destaque:hover, .segmentos span:hover, .linha-tempo div:hover, .botao:hover { transform: none; }
  .cartao:hover::before, .dor:hover::before, .cartao:hover::after { opacity: 0; transform: scaleX(0); }
  .segmentos span:hover { background: var(--branco); color: inherit; }
}
@media (max-width: 600px) {
  .abertura h1 { font-size: clamp(31px, 9vw, 36px); }
  .abertura .sub, .cabeca p, .final p, .teste p.sub { font-size: 16.5px; }
  .janela .barra { font-size: 12px; white-space: nowrap; }
  .janela .barra b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .teclas { display: none; }
  .selo-flutuante.a { bottom: -70px; }
  .abertura { padding-bottom: 104px; }
  .whats-flutuante { width: 54px; height: 54px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .whats-flutuante svg { width: 27px; height: 27px; }
  .final .caixa { border-radius: 20px; }
  .linha-tempo div { grid-template-columns: 1fr; gap: 4px; }
  .duvidas summary { padding: 18px; }
  .duvidas details p { padding: 0 18px 18px; }
}

/* Atalho de teclado: só aparece quando recebe o foco (Tab logo ao abrir a página). */
.pular {
  position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--amarelo); color: var(--azul); padding: 12px 18px;
  border-radius: 10px; font-family: var(--titulo); font-weight: 600; text-decoration: none; transition: top .2s ease;
}
.pular:focus { top: 16px; }

/* Rodapé: nome da empresa sem link */
.rodape .empresa { padding: 3px 0; }

/* Celular: convite do teste grátis preso no pé da tela, ao lado do WhatsApp (site.js decide quando aparece). */
.barra-teste { display: none; }
@media (max-width: 600px) {
  .barra-teste {
    display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; z-index: 45;
    left: 16px; right: 80px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 54px; border-radius: 14px;
    background: var(--amarelo); color: var(--azul); font-family: var(--titulo); font-weight: 600; font-size: 15.5px;
    text-decoration: none; box-shadow: 0 10px 28px rgb(0 20 50 / .35);
    transform: translateY(calc(100% + 40px)); transition: transform .3s ease;
  }
  .barra-teste svg.i { width: 20px; height: 20px; }
  .barra-teste.mostrar { transform: none; }
  .rodape { padding-bottom: 96px; }
}