/* START UP: desportivo e com energia. Amarelo e preto do logótipo, títulos itálicos em maiúsculas como no site, sombras duras. */
:root{
  --bg:#F5F5F2; --bg-2:#ECECE7; --card:#FFFFFF; --card-2:#F2F2EE;
  --line:rgba(17,17,17,.1); --line-2:rgba(17,17,17,.22);
  --text:#111111; --muted:#55554F; --faint:#85857E;
  --accent:#FF5A36; --accent-text:#111111;
  --btn:#FF5A36; --btn-ink:#111111;
  --bubble-me:#111111; --bubble-me-ink:#FFFFFF; --bubble-bot:#EFEFEA;
  --glow:rgba(255,90,54,.6);
  --phone-frame:linear-gradient(145deg,#2B2B2B,#0E0E0E 45%,#222);
  --font:"Barlow","Helvetica Neue",Arial,sans-serif; --display-style:italic; --display-transform:uppercase; --display-weight:900; --display-track:-.01em;
  --r:22px; --r-sm:14px;
  --ink:#111111;
  --shadow-card:0 0 0 2px var(--ink),6px 6px 0 0 var(--ink);
  --shadow-lift:0 0 0 2px var(--ink),10px 10px 0 0 var(--ink);
  --shadow-phone:0 50px 100px -40px rgba(0,0,0,.5);
  --spot:rgba(255,90,54,.28);
}
.btn{border:2px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);font-weight:800;text-transform:uppercase;font-style:italic;letter-spacing:.02em}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink);filter:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}
.nav .btn{background:var(--ink);color:#fff;box-shadow:3px 3px 0 0 var(--accent)}
.link-arrow{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:5px}
.cell:hover,.need:hover,.side-card:hover{transform:translate(-3px,-3px)}
.need,.side-card{transition:transform .5s var(--spring),box-shadow .5s var(--ease)}
.cell,.need,.side-card,.panel{box-shadow:var(--shadow-card)}
.panel{box-shadow:var(--shadow-lift)}
.tint{background:var(--accent)}
.tint .body{color:#3A1200}
.tint .pill{border-color:var(--ink);background:rgba(255,255,255,.45)}
.tint-b{background:var(--ink);color:#fff}
.tint-b .body{color:#BDBDB5}

/* topo cinético: cada linha sobe de trás de uma máscara */
.hero-kinetic{padding-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"title visual" "text visual";column-gap:40px;align-items:center}
.hero-kinetic .kinetic{grid-area:title;align-self:end}
.hero-row{display:contents}
.hero-row > div:first-child{grid-area:text;align-self:start;margin-top:26px}
.hero-kinetic .hero-visual{grid-area:visual}
.kinetic{font-size:clamp(54px,8.6vw,124px);line-height:.9;letter-spacing:-.02em}
.kinetic .line{display:block;overflow:hidden;padding:.02em .06em .06em 0}
.kinetic .in{display:inline-block;transform:translateY(105%) skewY(6deg);animation:linein 1.1s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .12s)}
@keyframes linein{to{transform:none}}
.kinetic mark{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 88%/0% 38%;color:inherit;padding:0 .08em;animation:marker .9s var(--ease) 1.1s forwards}
@keyframes marker{to{background-size:100% 38%}}
.hero-row .lead{max-width:30ch}
.sun{position:absolute;top:50%;left:50%;width:min(440px,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--accent);scale:0;animation:sun 1.2s var(--spring) .5s forwards;z-index:0}
.sun::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:2px solid var(--ink);opacity:.9;animation:spin 30s linear infinite;border-style:dashed}
@keyframes sun{to{scale:1}}
@keyframes spin{to{rotate:360deg}}
.hero-visual .phone{z-index:1;width:300px}

/* faixa de aulas: preta, inclinada, como uma fita de ginásio */
.marquee{background:var(--ink);border:0;transform:rotate(-2deg);margin-block:90px 20px;padding-block:18px;mask-image:none;width:104vw;margin-left:calc(50% - 52vw)}
.marquee-track span{color:var(--accent);font-size:30px;font-weight:900;text-transform:uppercase}
.marquee-track span::after{content:"✶";color:#fff;margin-left:56px;font-style:normal}

.step .num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--ink);box-shadow:0 0 0 2px var(--ink),3px 3px 0 0 var(--ink);font-style:italic}
.flow-dot{background:var(--accent);border-color:var(--ink);box-shadow:3px 3px 0 0 var(--ink)}
.flow-line path{stroke:var(--ink);stroke-dasharray:6 6}
.pill.on{background:var(--accent);border-color:var(--ink);color:var(--ink)}
.stat{box-shadow:0 0 0 2px var(--ink)}
.cta-mark{animation:bounce 2.4s var(--spring) infinite}
@keyframes bounce{0%,100%{transform:none}50%{transform:translateY(-10px) rotate(-8deg)}}
.words mark{background:var(--accent);color:inherit;padding:0 .1em}
@media (max-width:980px){
  .hero-kinetic{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text" "visual";text-align:center}
  .hero-row .lead{margin-inline:auto}
  .hero-row .hero-ctas{justify-content:center}
  .hero-kinetic .hero-visual{margin-top:56px}
}
.js .marquee.reveal{transform:rotate(-2deg) translateY(36px)}
.js .marquee.reveal.in,.marquee{transform:rotate(-2deg)}