/* /_lp-comercial/lp.css  -  componentes das LPs comerciais que o tailwind.css (purgado) da
   /anuncie-no-google/ não tem: CTA padrão, cartões, números, foto, abas automáticas.
   Mexeu aqui? Suba o LPC_V em base.php. */
.card-destaque{ border-color: rgba(167,139,250,.65) !important; box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 18px 50px -20px rgba(124,58,237,.6); animation: pulso 3.2s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{ box-shadow:0 0 0 1px rgba(167,139,250,.35),0 18px 50px -20px rgba(124,58,237,.6); } 50%{ box-shadow:0 0 0 1px rgba(167,139,250,.75),0 24px 64px -18px rgba(124,58,237,.9); } }
/* CTA padrão: brilho que atravessa o botão e leve subida no hover */
.btn-cta-padrao{ position:relative; overflow:hidden; transition: transform .2s ease; }
.btn-cta-padrao::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%); transform:translateX(-130%); animation: brilho 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes brilho{ 0%,62%{ transform:translateX(-130%); } 88%,100%{ transform:translateX(130%); } }
.btn-cta-padrao:hover{ transform: translateY(-2px); }
@media (max-width: 480px){
  .btn-cta-padrao{ white-space: normal; max-width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; font-size: 1.05rem; line-height: 1.3; }
  .stat-num{ font-size: 1.75rem; white-space: nowrap; }
}
/* Ícones que respiram (aceleram no hover do cartão) */
.icone-img{ width:34px; height:34px; display:block; }
.icone-vivo{ animation: flutua 4s ease-in-out infinite; }
@keyframes flutua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.spot:hover .icone-vivo{ animation-duration: 1.3s; }
/* Brilho que segue o mouse nos cartões */
.spot{ position:relative; isolation:isolate; }
.spot::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(167,139,250,.17), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; z-index:-1; }
.spot:hover::before{ opacity:1; }
/* Faixa de números */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media (min-width:768px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; } }
.stat-num{ font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight:800; line-height:1.05; background:linear-gradient(90deg,#fff 10%,#c4b5fd 90%); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric: tabular-nums; }
/* Foto do Gê */
.foto-ge{ max-width: 22rem; margin: 0 auto; border-radius:1.5rem; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -30px rgba(124,58,237,.75); transform: rotate(-1.5deg); transition: transform .45s ease; }
.foto-ge:hover{ transform: rotate(0deg) scale(1.015); }
.foto-ge img{ display:block; width:100%; height:auto; }
.lista-icones li{ display:flex; gap:.75rem; align-items:flex-start; text-align:left; }
.lista-icones li svg{ flex-shrink:0; margin-top:.1rem; }
/* Barra de tempo das abas automáticas */
.tab-timer{ height:3px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:.6rem; }
.tab-timer > span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.tab-timer.rodando > span{ animation: timer var(--t,5s) linear forwards; }
@keyframes timer{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .btn-cta-padrao::after, .icone-vivo, .card-destaque, .tab-timer > span{ animation:none !important; }
  .foto-ge{ transform:none; }
}
.preco-grande{ font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.chip{ display:inline-block; padding:.55rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); font-weight:700; font-size:.92rem; color:rgba(255,255,255,.88); transition:border-color .2s, background .2s; }
.chip:hover{ border-color: rgba(167,139,250,.7); background: rgba(167,139,250,.12); }
.lista-check li{ position:relative; padding-left:1.6rem; }
.lista-check li::before{ content:"✓"; position:absolute; left:0; top:0; color:#a78bfa; font-weight:800; }
.vs-titulo{ font-size:1.25rem; font-weight:800; }
@media (max-width: 768px){ .lista-check li{ text-align:left; } }
/* Hero no celular: o style.css da LP usa 100svh, mas o hero começa depois do cabeçalho
   fixo (~82px), então o botão ficava abaixo da primeira tela. Desconta o cabeçalho. */
@media (max-width: 768px){ #hero.hero-bg{ min-height: calc(100svh - 82px); } }

/* ---- Fotos padrão das LPs comerciais (definidas pelo Gê em 21/10/2026) ----
   Hero: camiseta cinza com painéis. Sobre: blazer (ge-sobre.webp, usado direto no HTML).
   CTA final (.cta-foto): camisa azul apontando pro texto. Trocar foto = trocar o arquivo em img/. */
#hero.hero-bg{ background-image: url("img/ge-hero-mobile.webp"); }
@media (min-width: 769px){
  #hero.hero-bg{ background-image: url("img/ge-hero-desktop.webp"); background-position: right center; }
}
/* CTA final. Celular: texto no topo escuro da foto, o Gê aparece embaixo.
   Desktop: texto à esquerda, foto à direita com o Gê apontando pro texto. */
.cta-foto{ background: url("img/ge-cta-mobile.webp") center bottom / 100% auto no-repeat; }
.cta-foto .cta-texto{ padding-bottom: 20rem; }
@media (min-width: 769px){
  .cta-foto{ background: linear-gradient(90deg, rgba(9,0,18,.92) 0%, rgba(9,0,18,.7) 45%, rgba(9,0,18,0) 75%), url("img/ge-cta-desktop.webp") right center / cover no-repeat; }
  .cta-foto .cta-texto{ max-width: 34rem; text-align: left; padding-bottom: 0; }
  .cta-foto .cta-texto > div{ align-items: flex-start; text-align: left; }
  .cta-foto .cta-texto .justify-center{ justify-content: flex-start; }
  .cta-foto .cta-texto h2, .cta-foto .cta-texto p{ margin-left: 0; margin-right: 0; }
}