/* =====================================================================
   PREMIUM -- 23/09/2026 (v2). Carrega POR ULTIMO.
   So aparencia e efeito: nao muda conteudo, URL nem hierarquia de titulo.
   Para reverter: remover o <link> de premium.css e o <script> de efeitos.js
   em app/Views/layouts/site.php.

   Por que a v1 "nao mudou nada" na home: home.css usa seletores
   ".home-page .btn" (mais especificos que ".btn"). Tudo que a v1 fazia em
   botao perdia a disputa. Aqui, o que precisa vencer na home tem o mesmo
   prefixo .home-page.

   Direcao: escuro profundo + aurora azul/ciano, vidro, luz. Verde continua
   significando UMA coisa: WhatsApp.
   ===================================================================== */

:root{
  --bg-0:#030b18;          /* quase preto azulado */
  --bg-1:#061529;
  --bg-2:#0a2140;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-line:rgba(255,255,255,.10);
  --glass-line-2:rgba(255,255,255,.18);
  --txt:#eaf2ff;
  --txt-2:rgba(234,242,255,.72);
  --txt-3:rgba(234,242,255,.52);
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --wa:#25d366;

  --fs-display:clamp(36px,4.1vw,62px);
  --fs-h2:clamp(28px,3vw,44px);
  --fs-h3:clamp(18px,1.5vw,21px);

  --r-sm:12px; --r-md:18px; --r-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-glow:0 0 0 1px rgba(59,130,246,.25),0 20px 60px -10px rgba(59,130,246,.35);
}

/* ================================================================ TIPO */
/* Fundo base escuro: o topo e translucido, e sobre fundo branco ele ficava
   cinza. As secoes de leitura continuam brancas por conta propria. */
html,body{background:#030b18}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.006em;
  line-height:1.65;
}
h1,h2,h3,.mid-cta-title,.offer-title{font-weight:700;letter-spacing:-.025em;line-height:1.12}
h1{font-size:var(--fs-display);letter-spacing:-.038em;line-height:1.02}
.eyebrow{font-weight:600;letter-spacing:.14em;font-size:12px}
.prose p,.prose li{max-width:70ch}

/* ============================================================== TOPO */
.topbar{
  min-height:74px;
  background:rgba(3,11,24,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .35s var(--ease),min-height .35s var(--ease),box-shadow .35s var(--ease);
}
.topbar.is-scrolled{
  min-height:62px;
  background:rgba(3,11,24,.86);
  box-shadow:0 10px 40px -10px rgba(0,0,0,.5);
}
/* Logo: versao clara (atconsys-logo-claro.svg). Sem filter -- o invert()
   antigo apagava o icone e deixava um bloco branco. */
.topbar .brand img,.footer-logo{filter:none !important}
.topbar .brand img{transition:transform .35s var(--ease)}
.topbar.is-scrolled .brand img{transform:scale(.92)}
.nav{gap:26px}
.nav a{font-size:14.5px;font-weight:500}
.nav a:not(.btn){
  position:relative;color:var(--txt-2);padding:6px 0;border-bottom:0;
  transition:color .2s var(--ease);
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav a:not(.btn):hover{color:#fff}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.menu-toggle{background:transparent;color:#fff;border-color:var(--glass-line-2)}

/* ============================================================= BOTAO
   Brilho que atravessa o botao no hover ("shine"). */
.btn,.home-page .btn{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:48px;padding:13px 24px;border-radius:var(--r-sm);
  font-weight:600;letter-spacing:-.005em;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border:1px solid rgba(255,255,255,.14);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -8px rgba(37,99,235,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn::before,.home-page .btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover,.home-page .btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 40px -10px rgba(37,99,235,.75)}
.btn:hover::before,.home-page .btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0)}

/* WhatsApp: verde, com pulso discreto -- e a acao que converte. */
.btn-whatsapp,.home-page .btn-whatsapp,.home-page .hero .actions .btn.btn-whatsapp{
  background:linear-gradient(180deg,#34e07a,#1fbf5b);color:#03210e;
  border-color:rgba(255,255,255,.2);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -8px rgba(37,211,102,.65);
}
.btn-whatsapp:hover,.home-page .btn-whatsapp:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 44px -10px rgba(37,211,102,.85);
}

/* Secundario: vidro. */
.btn-outline,.home-page .btn-outline,.home-page .hero .actions .btn:nth-child(2),
.btn-light,.home-page .btn-light{
  background:var(--glass);color:#fff;border:1px solid var(--glass-line-2);
  box-shadow:none;backdrop-filter:blur(8px);
}
.btn-outline:hover,.home-page .btn-outline:hover,.btn-light:hover,.home-page .btn-light:hover{
  background:var(--glass-2);border-color:rgba(255,255,255,.3);box-shadow:none;
}
/* Terceiro botao do hero da home: link discreto. */
.home-page .hero .actions .btn:nth-child(3){
  background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;
  color:var(--txt-2);text-decoration:none;
}
.home-page .hero .actions .btn:nth-child(3)::after{content:" \2192";transition:margin .25s var(--ease)}
.home-page .hero .actions .btn:nth-child(3):hover{color:#fff}
.home-page .hero .actions .btn:nth-child(3):hover::after{margin-left:4px}
.home-page .hero .actions .btn:nth-child(3)::before{display:none}

/* CTA do topo: vidro claro, nao compete com o WhatsApp. */
.topbar .nav .btn{
  min-height:40px;padding:9px 18px;
  background:rgba(255,255,255,.95);color:var(--bg-1);border-color:transparent;
  box-shadow:0 8px 24px -8px rgba(255,255,255,.35);
}
.topbar .nav .btn:hover{background:#fff;color:var(--bg-0)}

/* ============================================================== HERO
   Aurora: tres manchas de luz desfocadas que derivam devagar.
   Grade fina por cima, apagando nas bordas (mask). */
.hero,.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-0);color:var(--txt);
}
/* min() e nao min-height+max-height: quando os dois brigam, min-height
   vence, e em monitor vertical/4K o hero crescia sem limite. */
.hero{min-height:min(calc(100vh - 74px),860px);padding:96px clamp(20px,5vw,88px) 110px;gap:64px}
.hero::after{display:none}

/* SEM filter:blur e SEM mix-blend-mode. A primeira versao usava os dois, e
   blur(70px) em manchas de 55vw animadas custava tanto que a captura de tela
   do navegador travava esperando a pintura terminar -- em celular fraco isso
   e travamento e bateria. O radial-gradient ja nasce suave; a animacao usa so
   transform, que roda no compositor. */
.fx-aurora{position:absolute;inset:-20%;z-index:-2;pointer-events:none;overflow:hidden}
.fx-aurora span{position:absolute;border-radius:50%;will-change:transform}
.fx-aurora span:nth-child(1){width:55vw;height:55vw;left:40%;top:-10%;
  background:radial-gradient(circle,rgba(59,130,246,.42),rgba(59,130,246,.12) 40%,transparent 70%);animation:aurora-a 22s ease-in-out infinite alternate}
.fx-aurora span:nth-child(2){width:45vw;height:45vw;left:65%;top:35%;
  background:radial-gradient(circle,rgba(34,211,238,.30),rgba(34,211,238,.08) 40%,transparent 70%);animation:aurora-b 26s ease-in-out infinite alternate}
.fx-aurora span:nth-child(3){width:40vw;height:40vw;left:10%;top:45%;
  background:radial-gradient(circle,rgba(139,92,246,.24),rgba(139,92,246,.06) 40%,transparent 70%);animation:aurora-c 30s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(-18%,14%) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(-22%,-18%) scale(.9)}}
@keyframes aurora-c{to{transform:translate(20%,-10%) scale(1.2)}}

.fx-grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
}
/* Fio de luz no pe do hero. */
.fx-horizon{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.6),rgba(59,130,246,.6),transparent)}

.hero .eyebrow,.page-hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 10px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);color:#bcd8ff;
  backdrop-filter:blur(8px);opacity:1;
}
.hero .eyebrow::before,.page-hero .eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(34,211,238,.18),0 0 12px var(--cyan);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
/* Anima opacity, nao box-shadow: box-shadow em keyframe forca repintura a
   cada quadro; opacity roda no compositor. */
@keyframes pulse-dot{50%{opacity:.45}}

/* Titulo com gradiente de luz. */
.hero h1,.page-hero h1{
  margin:22px 0 22px;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 45%,#a9c8f5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.hero p,.page-hero p{color:var(--txt-2);font-size:18px;line-height:1.7;max-width:58ch;opacity:1}
.hero .actions,.page-hero .hero-actions{gap:12px;margin-top:34px}

/* Credenciais do hero: pilulas de vidro. */
.hero-credentials{gap:10px !important;margin-top:34px !important}
.hero-credentials li{
  padding:10px 16px 10px 36px !important;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--txt-2);
  font-size:14px !important;backdrop-filter:blur(8px);opacity:1 !important;
}
.hero-credentials li::before{left:14px !important;top:50% !important;transform:translateY(-50%);
  width:9px !important;height:9px !important;background:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.2),0 0 10px var(--cyan) !important}
.hero-credentials strong{color:#fff}

/* Visual do hero: moldura de vidro flutuando. */
.hero-visual{perspective:1400px}
.hero-visual img{
  border-radius:var(--r-lg);
  border:1px solid var(--glass-line-2);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04),0 0 80px -20px rgba(59,130,246,.5);
  animation:float 7s ease-in-out infinite;
  transform:rotateY(-6deg) rotateX(3deg);
}
@keyframes float{50%{transform:rotateY(-6deg) rotateX(3deg) translateY(-14px)}}
.floating-badge{
  border-radius:999px;background:rgba(10,33,64,.75);color:#fff;
  border:1px solid var(--glass-line-2);backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);font-weight:600;
  animation:float-badge 6s ease-in-out infinite;
}
.floating-badge.badge-two{animation-delay:-3s}
@keyframes float-badge{50%{transform:translateY(-10px)}}

/* ============================================================ MARQUEE
   Faixa infinita logo abaixo do hero. So fatos ja publicados no site. */
.fx-marquee{
  position:relative;overflow:hidden;background:var(--bg-1);
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.fx-marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 38s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-marquee-track span{
  display:inline-flex;align-items:center;gap:56px;white-space:nowrap;
  color:var(--txt-3);font-size:15px;font-weight:600;letter-spacing:.02em;
}
.fx-marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(34,211,238,.6)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================ SECOES ESCURAS DA HOME
   A home inteira vira uma superficie escura continua. */
.home-page{background:var(--bg-0);color:var(--txt)}
.home-page section.section,.home-page .product-buttons-section{
  position:relative;background:transparent;color:var(--txt);
  padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px);
}
.home-page section.section:nth-of-type(even){background:linear-gradient(180deg,var(--bg-0),var(--bg-1) 50%,var(--bg-0))}
.home-page .section-head{padding-left:0;margin-bottom:clamp(36px,4vw,60px);max-width:820px}
.home-page .section-head::before{display:none}
.home-page .section-head h2,.home-page .product-buttons-head h2{
  font-size:var(--fs-h2);
  background:linear-gradient(180deg,#fff,#b8cff0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-page .section-head p{color:var(--txt-2);font-size:17px}
.home-page .eyebrow{color:var(--cyan)}
.home-page p{color:var(--txt-2)}
.home-page h3{color:#fff}
.home-page a:not(.btn){color:#9cc3ff}

/* ============================================================== CARDS
   Vidro + borda de gradiente + holofote que segue o mouse (--mx/--my vem
   do efeitos.js). */
.home-page .solution-card,.home-page .partner-card,.home-page .card,
.home-page .product-button,.home-page .product,.related-card{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--glass-line);border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -20px rgba(0,0,0,.6);
  color:var(--txt);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.home-page .solution-card::before,.home-page .partner-card::before,.home-page .card::before,
.home-page .product-button::before,.related-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.18),transparent 45%);
  transition:opacity .4s var(--ease);
}
.home-page .solution-card:hover,.home-page .partner-card:hover,.home-page .card:hover,
.home-page .product-button:hover,.related-card:hover{
  transform:translateY(-6px);
  border-color:rgba(96,165,250,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(59,130,246,.2),0 0 60px -15px rgba(59,130,246,.45);
}
.home-page .solution-card:hover::before,.home-page .partner-card:hover::before,.home-page .card:hover::before,
.home-page .product-button:hover::before,.related-card:hover::before{opacity:1}

.home-page .solution-card img{border-radius:12px;transition:transform .7s var(--ease)}
.home-page .solution-card:hover img{transform:scale(1.04)}
.home-page .solution-card span{color:var(--cyan);opacity:.9;font-weight:600;letter-spacing:.1em;font-size:12px}
.home-page .solution-card.primary{
  background:linear-gradient(160deg,rgba(59,130,246,.22),rgba(34,211,238,.06) 60%,rgba(255,255,255,.02));
  border-color:rgba(96,165,250,.35);
}
.home-page .mini-links a{
  background:var(--glass);border:1px solid var(--glass-line);color:var(--txt-2) !important;
  border-radius:999px;transition:all .25s var(--ease);
}
.home-page .mini-links a:hover{background:rgba(59,130,246,.2);border-color:rgba(96,165,250,.5);color:#fff !important}
.home-page .text-link{color:#9cc3ff !important;font-weight:600}
.home-page .text-link::after{content:" \2192";transition:margin .25s var(--ease)}
.home-page .solution-card:hover .text-link::after{margin-left:5px}

.home-page .product-button small{color:var(--cyan)}
.home-page .product-button span{color:#fff}

/* Bandas (value strip, treinamentos) */
.home-page .band,.home-page .compact-band{background:transparent}
.home-page .value-strip > div{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-md);
  padding:22px;backdrop-filter:blur(8px);
}
.home-page .value-strip strong{color:#fff}
.home-page .value-strip span{color:var(--txt-2)}
.home-page .checks li{color:var(--txt-2)}

/* CTA final: painel com aurora propria. */
.home-page .final-cta{
  margin:0 clamp(16px,4vw,64px) clamp(56px,7vw,96px);
  border-radius:var(--r-lg);border:1px solid var(--glass-line-2);
  background:
    radial-gradient(600px 300px at 15% 0%,rgba(59,130,246,.35),transparent 60%),
    radial-gradient(500px 300px at 90% 100%,rgba(34,211,238,.22),transparent 60%),
    var(--bg-1) !important;
  box-shadow:0 40px 100px -30px rgba(59,130,246,.45);
}

/* Mapa de links internos da home */
.home-page .link-map,.home-page .link-map-grid{color:var(--txt)}
.home-page .link-map h3{color:#fff}
.home-page .link-map a{color:var(--txt-2) !important}
.home-page .link-map a:hover{color:#fff !important}

/* ===================================================== PAGINAS INTERNAS
   Hero escuro com a mesma aurora; corpo do texto continua claro, que e
   onde se le. */
.page-hero{padding:92px clamp(20px,5vw,88px) 84px;gap:56px}
.page-hero img{
  border-radius:var(--r-lg);border:1px solid var(--glass-line-2);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7),0 0 70px -20px rgba(59,130,246,.45);
  animation:float 8s ease-in-out infinite;transform:rotateY(-5deg) rotateX(2deg);
}
.page-hero .btn-outline{background:var(--glass);color:#fff;border-color:var(--glass-line-2)}

.trust-strip{background:var(--bg-1);border-bottom:1px solid rgba(255,255,255,.06)}
.trust-strip li{color:var(--txt-2)}
.trust-strip li span{color:var(--cyan)}

/* Corpo de leitura: claro, calmo, com titulos marcados. */
.section.prose{background:#fff}
.section.prose h2{
  position:relative;padding-top:18px;margin-top:2.2em;
  font-size:var(--fs-h2);color:#061529;
}
.section.prose h2::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.section.prose h3{color:#0a2140}

/* FAQ como acordeao visual (sem mudar marcacao). */
.section.prose .faq h3{
  margin:0;padding:20px 22px;border:1px solid #e3ecf7;border-radius:14px 14px 0 0;
  background:#f7faff;font-size:17.5px;
}
.section.prose .faq h3 + p{
  margin:0 0 14px;padding:16px 22px 20px;border:1px solid #e3ecf7;border-top:0;
  border-radius:0 0 14px 14px;background:#fff;max-width:none;
}

/* CTA do meio do texto e bloco de oferta: paineis escuros de luz. */
.section.prose .mid-cta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid rgba(96,165,250,.3);
  background:
    radial-gradient(500px 240px at 0% 0%,rgba(59,130,246,.45),transparent 60%),
    radial-gradient(400px 240px at 100% 100%,rgba(34,211,238,.25),transparent 60%),
    #061529;
  box-shadow:0 30px 80px -30px rgba(37,99,235,.55);
}
.offer-box{
  border-radius:var(--r-lg);border:1px solid rgba(37,211,102,.35);
  background:
    radial-gradient(420px 200px at 0% 0%,rgba(37,211,102,.16),transparent 65%),
    linear-gradient(180deg,#f3fff7,#ffffff);
  box-shadow:0 24px 60px -30px rgba(37,211,102,.5);
}
.offer-box .btn-outline{background:#fff;color:#0b2d5c;border-color:#d5e3f3;backdrop-filter:none}
.offer-box .btn-outline:hover{background:#f4f8fc}

/* Paginas relacionadas: fundo escuro, cards de vidro. */
.related-links{background:var(--bg-0);color:var(--txt)}
.related-links .section-head h2{color:#fff}
.related-links .eyebrow{color:var(--cyan)}
.related-card strong{color:#fff}
.related-card span{color:var(--txt-2)}

/* ============================================================= RODAPE */
.footer{
  position:relative;background:var(--bg-0);color:var(--txt);
  padding:88px clamp(20px,5vw,88px) 64px;gap:48px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),rgba(59,130,246,.5),transparent)}
.footer .footer-heading{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--txt-3);margin-bottom:16px}
.footer a{color:var(--txt-2);margin:11px 0;transition:color .2s var(--ease)}
.footer a:hover{color:#fff}
.footer p{color:var(--txt-3);max-width:44ch}

/* Botao flutuante de WhatsApp: anel pulsando. */
.whatsapp{
  background:linear-gradient(180deg,#34e07a,#1fbf5b) !important;color:#03210e !important;
  font-weight:700;border-radius:999px;
  box-shadow:0 12px 34px -8px rgba(37,211,102,.7);
}
/* Anel: um contorno que cresce (transform) e some (opacity). Mesmo efeito
   visual do box-shadow animado, sem repintar a pagina a cada quadro. */
.whatsapp::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(37,211,102,.7);
  animation:wa-ring 2.6s ease-out infinite;
}
@keyframes wa-ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}

/* Barra fixa do mobile: vidro escuro. */
.mobile-cta-bar{background:rgba(3,11,24,.85) !important;backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08)}

/* ========================================================= REVELACAO
   Ativada pelo efeitos.js (adiciona .fx-ready no <html>). Sem JS, tudo
   aparece normal -- o conteudo nunca depende do script. */
.fx-ready [data-reveal]{
  opacity:0;transform:translateY(28px);filter:blur(4px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0s);
}
.fx-ready [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* Foco visivel */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ========================================================== MOBILE */
@media (max-width:980px){
  .hero{min-height:0;padding-top:72px;padding-bottom:80px}
  .hero-visual img,.page-hero img{transform:none;animation:none}
  .nav{background:rgba(3,11,24,.97)}
  .nav a:not(.btn){color:var(--txt-2)}
}

/* Quem pediu menos movimento no sistema: nada anima. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .fx-ready [data-reveal]{opacity:1;transform:none;filter:none}
}

/* Hero: texto ganha mais largura -- o H1 da home quebrava em 5 linhas. */
@media (min-width:981px){
  .hero{grid-template-columns:1.18fr .82fr}
  .hero h1{max-width:none}
}

/* Link "Ver ..." dos cards: home.css o pintava de botao verde de largura
   total. Verde e so WhatsApp -- aqui vira link de vidro. */
.home-page .solution-card .text-link{
  background:var(--glass) !important;border:1px solid var(--glass-line) !important;
  color:#cfe0ff !important;box-shadow:none !important;
  border-radius:999px !important;width:auto !important;align-self:flex-start;
  padding:9px 16px !important;
}
.home-page .solution-card:hover .text-link{
  background:rgba(59,130,246,.22) !important;border-color:rgba(96,165,250,.5) !important;color:#fff !important;
}

/* Corpo de leitura com fundo branco de ponta a ponta.
   .section.prose tem largura maxima; com o fundo da pagina escuro, a sobra
   dos lados aparecia preta. A sombra de 100vmax pinta branco ate as bordas e
   o clip-path corta o excesso vertical -- layout e medida de leitura intactos. */
.section.prose{
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}

/* Lista de treinamentos da home: o fundo branco antigo com o texto claro
   novo deixava barras brancas sem texto legivel. */
.home-page .checks li{
  background:var(--glass) !important;border:1px solid var(--glass-line) !important;
  color:var(--txt) !important;border-radius:var(--r-sm);box-shadow:none !important;
}

/* ---------------------------------------------------------- CELULAR
   A ilustracao vinha ANTES do texto: a primeira tela do celular mostrava um
   painel decorativo e empurrava titulo e botao de WhatsApp para baixo da
   dobra. No celular, oferta primeiro; ilustracao depois, menor. */
@media (max-width:980px){
  .hero .hero-copy{order:1}
  .hero .hero-visual{order:2;max-width:420px;margin:8px auto 0}
  .page-hero > div{order:1}
  .page-hero > img{order:2}
  .hero .eyebrow,.page-hero .eyebrow{font-size:10.5px;letter-spacing:.1em;padding:6px 12px 6px 9px}
  .hero{gap:36px}
}