/* Typography follows css/tokens.css: Figtree for text, Inter for data.
Norman/Nielsen: visible state and direct control of every demonstration.
Rams/Krug: progressive detail, explicit prices and separate audiences. */
:root{
  color-scheme:light dark;

  --panel:var(--surface);
  --ink:var(--text);
  --muted:var(--text-2);
  --line:var(--border);
  --green:var(--accent);
  --quiet:var(--text-3);
  --display:var(--font);
  --data:var(--font-mono);
  --sans:var(--font)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--green);
  outline-offset:6px
}
button{
  border:0
}
svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
h1,h2,h3,h4,p{
  margin:0
}
h1,h2,h3,h4{
  font-weight:500
}
h1,h2,h3{
  font-family:var(--display);
  line-height:1.07
}
p{
  color:var(--muted)
}
[hidden]{
  display:none!important
}
.symbols{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.wrap{
  width:min(1180px,calc(100% - 64px));
  margin-inline:auto
}
.skip{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:10;
  background:var(--ink);
  color:var(--bg);
  padding:12px
}
.skip:focus{
  top:10px
}
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg)
}
.nav{
  height:86px;
  display:flex;
  align-items:center;
  gap:40px
}
.wordmark{
  filter:invert(1);
  display:block;
  height:auto
}
.nav-links{
  display:flex;
  gap:30px;
  margin-left:auto;
  color:var(--muted);
  font-size:14px
}
.nav-links a:hover,.footer a:hover{
  color:var(--ink)
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:12px 19px;
  border-radius:9px;
  border:1px solid var(--line);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  min-height:46px;
  transition:background .2s,border-color .2s
}
.button svg{
  width:19px;
  height:19px
}
.button.light{
  color:var(--bg);
  background:var(--ink);
  border-color:var(--ink)
}
.button.small{
  min-height:40px;
  padding:9px 14px;
  font-size:13px
}
.subnav{
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}
.subnav .wrap{
  height:45px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.subnav a{
  color:var(--muted)
}
.hero{
  text-align:center;
  padding:67px 0 44px
}
.hero-emblem{
  position:relative;
  display:grid;
  place-items:center;
  width:240px;
  height:100px;
  margin:0 auto 27px
}
.hero-emblem img{

  z-index:1
}
.hero-intro{
  font-size:14px;
  margin-bottom:16px
}
.hero h1{
  font-size:clamp(48px,6.2vw,78px);
  letter-spacing:-1.8px;
  line-height:1.02
}
.hero-copy{
  font-size:17px;
  line-height:1.65;
  margin-top:24px
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  color:var(--ink)
}
.hero .text-link{
  margin-top:22px
}
.text-link:hover{
  text-decoration:underline;
  text-underline-offset:5px
}
.audience{
  display:flex;
  width:fit-content;
  margin:0 auto 34px;
  padding:5px;
  gap:4px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px
}
.audience button{
  padding:10px 24px;
  border-radius:10px;
  background:none;
  font-size:14px;
  min-height:44px
}
.audience button[aria-selected=true]{
  background:var(--ink);
  color:var(--bg)
}
.plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.plan{
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.plan.featured{
  background:var(--surface);
  border-color:var(--marca)
}
.plan-top{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.line-icon{
  width:40px;
  height:40px;
  stroke-width:1.3
}
.sketch-icon{
  width:54px;
  height:40px;
  stroke-width:1.4
}
.pill{
  font-size:10px;
  line-height:1.3;
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  white-space:nowrap
}
.plan h2{
  font-size:31px;
  min-height:2.14em;
  margin:25px 0 12px;
  letter-spacing:-.5px
}
.plan>p{
  font-size:14px;
  line-height:1.6;
  min-height:68px
}
.price{
  font-size:28px;
  line-height:1.25;
  margin:26px 0 23px;
  letter-spacing:-.5px
}
.price span{
  display:block;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin-top:8px;
  letter-spacing:0
}
.price-text{
  font-size:26px
}
/* o valor minimo do card (14/10/2026): "a partir de" pequeno, em cima do numero */
.price-de{
  display:block;
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  margin-bottom:2px
}
.plan .button{
  width:100%;
  justify-content:space-between;
  font-size:13px
}
.checks{
  list-style:none;
  padding:21px 0 0;
  margin:0;
  width:100%;
  font-size:13px;
  line-height:1.6
}
.checks li{
  padding:7px 0 7px 22px;
  position:relative
}
.checks li:before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--green)
}
.plan .fine{
  font-size:11px;
  margin-top:16px;
  min-height:0
}
.fine{
  font-size:11px;
  color:var(--muted)
}
.plan-note{
  text-align:center;
  font-size:11px;
  line-height:1.8;
  margin:23px auto 0;
  max-width:850px
}
.section{
  padding-top:120px;
  scroll-margin-top:24px
}
.section-heading{
  text-align:center;
  margin-bottom:44px
}
.section-heading>p:first-of-type{
  font-size:13px;
  margin-bottom:18px
}
.section-heading h2{
  font-size:clamp(34px,4.2vw,52px);
  letter-spacing:-.8px
}
.section-intro{
  max-width:555px;
  margin:22px auto 0;
  font-size:15px
}
.frame{
  padding:10px;
  border:1px solid var(--line);
  border-radius:32px;
  background:var(--surface);
  overflow:hidden
}
.walkthrough,.coach-demo{
  display:grid;
  grid-template-columns:43% 57%;
  border-radius:23px;
  border:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
  min-height:505px
}
.demo-copy{
  padding:40px 32px
}
.demo-copy h3{
  font-size:30px;
  line-height:1.1;
  margin-bottom:18px
}
.demo-copy>p{
  font-size:14px;
  max-width:335px
}
.steps{
  margin-top:26px
}
.step{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:15px 10px;
  background:transparent;
  border-top:1px solid var(--line);
  text-align:left;
  border-radius:0
}
.step>span{
  color:var(--text-3);
  font-size:12px;
  font-variant-numeric:tabular-nums
}
.step strong{
  display:block;
  font-weight:500;
  font-size:14px
}
.step small{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}
.step.active{
  background:var(--certo-fundo)
}
.step.active>span{
  color:var(--green)
}
.pause{
  background:none;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--muted);
  font-size:11px;
  padding:10px 0;
  margin-top:8px;
  min-height:44px
}
.athlete-stage{
  position:relative;
  min-height:505px;
  background:radial-gradient(ellipse at 58% 100%,var(--accent-tint) 0,transparent 65%);
  display:grid;
  place-items:center;
  padding:30px 30px 38px;
  overflow:hidden
}
.orbit-grid{
  position:absolute;
  width:570px;
  height:570px;
  border:1px solid var(--border);
  border-radius:50%;
  top:80px;
  left:10px;
  opacity:.6
}
.orbit-grid:before,.orbit-grid:after{
  content:'';
  position:absolute;
  border:1px solid var(--border);
  border-radius:50%;
  inset:38px
}
.orbit-grid:after{
  inset:76px
}
.phone{
  width:277px;
  min-height:404px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:29px 29px 0 0;
  background:var(--bg-elev);
  position:relative;
  transform:translate(23px,23px);
  box-shadow:0 16px 60px #0003
}
.phone-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  padding-bottom:25px;
  color:var(--muted)
}
.phone-top img,.dashboard-bar img{
  filter:invert(1)
}
.phone-label{
  font-size:10px;
  margin:0 0 8px
}
.phone h4{
  font-family:var(--display);
  font-size:19px;
  line-height:1.2;
  min-height:65px
}
.mini-route{
  margin:12px -5px
}
.mini-route svg{
  display:block;
  width:100%;
  height:115px
}
.map-street{
  stroke:var(--border);
  stroke-width:.8
}
.route-line{
  stroke:var(--green);
  stroke-width:2.5;
  stroke-dasharray:360;
  stroke-dashoffset:0
}
.phone-metrics{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--border);
  padding-top:13px
}
.phone-metrics small{
  font-size:9px;
  color:var(--muted);
  display:block
}
.phone-metrics strong{
  font-size:13px;
  font-weight:500;
  display:block;
  margin-top:4px
}
.phone-action,.dash-action{
  margin-top:20px;
  font-size:10px;
  padding:10px 12px;
  background:var(--accent);
  color:var(--on-accent);
  display:flex;
  justify-content:space-between;
  border-radius:5px
}
.phone-week{
  display:flex;
  justify-content:space-between;
  color:var(--text-2);
  font-size:9px;
  margin:20px 0 0
}
.insight{
  position:absolute;
  top:52%;
  left:4%;
  width:270px;
  display:flex;
  gap:12px;
  padding:17px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 40px #0003;
  transition:transform .6s
}
.insight strong{
  font-size:11px;
  font-weight:500
}
.insight p{
  font-family:var(--display);
  font-size:16px;
  line-height:1.4;
  color:var(--text);
  margin-top:5px
}
.demo[data-scene="1"] .insight{
  transform:translateY(-25px)
}
.demo[data-scene="2"] .insight{
  transform:translateY(-45px)
}
.demo-disclaimer{
  position:absolute;
  bottom:15px;
  left:0;
  width:100%;
  text-align:center;
  color:var(--text-2);
  font-size:10px
}
.technology-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.tech-card{
  height:100%;
  padding:32px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:23px
}
.tech-card h3{
  font-size:28px;
  margin-bottom:15px
}
.tech-card>p{
  font-size:14px
}
.chart-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:38px;
  font-size:12px
}
.chart{
  position:relative;
  padding-left:39px;
  margin-top:25px
}
.chart>svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.chart-axis{
  position:absolute;
  left:0;
  top:-4px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted)
}
.chart-grid{
  stroke:var(--border);
  stroke-width:1
}
.chart-line{
  stroke:var(--accent);
  stroke-width:2.5
}
.chart-points{
  fill:var(--accent);
  stroke:var(--bg);
  stroke-width:2
}
.chart-weeks{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:10px
}
.chart-caption{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px!important
}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green)
}
.tech-card .fine{
  font-size:10px;
  margin-top:10px
}
.engine-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:27px 0;
  font-size:10px;
  color:var(--muted);
  gap:10px
}
.engine-flow i{
  flex:1;
  height:1px;
  background:var(--line)
}
.engine-core{
  border:1px solid var(--border);
  padding:14px;
  border-radius:10px;
  background:var(--surface)
}
.engine-core svg{
  width:35px;
  height:35px;
  color:var(--green)
}
.engine-list>div{
  padding:13px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px
}
.engine-list strong{
  font-size:12px;
  font-weight:500
}
.engine-list p{
  font-size:12px;
  line-height:1.5
}
.comparison{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  margin-top:60px;
  padding:0 20px
}
.comparison h3{
  font-size:31px
}
.comparison p{
  font-size:15px
}
.comparison p+p{
  margin-top:18px
}
.heading-sketch{
  width:82px;
  height:68px;
  stroke-width:1.2;
  margin-bottom:22px
}
.coach-demo{
  grid-template-columns:42% 58%
}
.coach-stage{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  padding:25px 22px;
  background:radial-gradient(ellipse at 75% 100%,var(--accent-tint),transparent 65%);
  overflow:hidden
}
.dashboard{
  width:100%;
  position:relative;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-elev);
  box-shadow:0 20px 70px #0003;
  transform:translateY(20px)
}
.dashboard-bar{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:16px;
  font-size:10px
}
.dash-status{
  margin-left:auto;
  color:var(--muted);
  font-size:9px
}
.dashboard-body{
  display:grid;
  grid-template-columns:90px 1fr;
  min-height:260px
}
.dashboard aside{
  border-right:1px solid var(--line);
  padding:18px 7px;
  font-size:9px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted)
}
.dashboard aside span{
  padding:5px 7px;
  border-radius:4px
}
.dashboard aside .selected{
  background:var(--certo-fundo);
  color:var(--text)
}
.dashboard-content{
  padding:20px 16px
}
.dashboard-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.dashboard-title h4{
  font-family:var(--display);
  font-size:19px;
  line-height:1.2
}
.dashboard-title svg{
  width:40px;
  height:32px;
  flex-shrink:0
}
.dashboard-content>p{
  font-size:9px;
  margin:7px 0 14px
}
.athlete-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.avatar{
  border:1px solid var(--border);
  background:var(--surface);
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px
}
.athlete-row b{
  display:block;
  font-size:10px;
  font-weight:500
}
.athlete-row small{
  display:block;
  font-size:8px;
  color:var(--muted)
}
.row-status{
  font-size:8px;
  margin-left:auto;
  color:var(--text-2)
}
.dashboard-notice{
  font-size:9px;
  color:var(--muted);
  margin-top:14px
}
.dash-action{
  margin-top:13px;
  width:fit-content;
  min-width:140px
}
.desk-sketch{
  position:absolute;
  top:30px;
  left:25px;
  right:15px;
  color:var(--text-2)
}
.desk-sketch svg{
  width:100%;
  height:110px;
  stroke-width:1.5
}
.coach-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:35px;
  padding:0 15px
}
.coach-benefits h3{
  font-family:var(--sans);
  font-size:16px;
  margin-bottom:12px;
  line-height:1.4
}
.coach-benefits p{
  font-size:13px
}
.center{
  text-align:center;
  margin-top:32px
}
.downloads{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  padding-bottom:90px;
  border-bottom:1px solid var(--line)
}
.downloads>div>p:first-child{
  font-size:12px;
  margin-bottom:15px
}
.downloads h2{
  font-size:44px;
  margin-bottom:22px
}
.downloads p{
  font-size:15px
}
.store-row{
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding:19px 0
}
.store-row:first-of-type{
  margin-top:25px
}
.store-row>svg{
  width:22px;
  height:27px
}
.store-row strong{
  font-size:14px;
  font-weight:500
}
.store-row small{
  display:block;
  color:var(--muted);
  font-size:11px
}
.store-row .button,.coming{
  margin-left:auto
}
.coming{
  font-size:12px;
  color:var(--muted);
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px
}
.web-link{
  margin-top:20px;
  font-size:12px
}
.download-art{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:36px;
  min-height:360px
}
.download-art>img{
  z-index:1;
  filter:none
}
.download-art>span{
  font-family:var(--display);
  font-size:26px;
  z-index:1
}
.running-rings{
  position:absolute;
  width:410px;
  height:260px;
  border:1px solid var(--border);
  border-radius:50%;
  transform:rotate(-28deg);
  opacity:.75
}
.running-rings:before,.running-rings:after{
  content:'';
  position:absolute;
  border:1px solid var(--border);
  border-radius:50%;
  inset:-26px
}
.running-rings:after{
  inset:26px
}
.purpose{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.purpose h2{
  font-size:44px
}
.purpose-items article{
  margin-bottom:43px
}
.purpose-items article:last-child{
  margin-bottom:0
}
.purpose-items span{
  color:var(--muted);
  font-size:11px
}
.purpose-items h3{
  font-size:24px;
  line-height:1.15;
  margin:12px 0
}
.purpose-items p{
  font-size:14px
}
.faq{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px
}
.faq h2{
  font-size:44px
}
.faq details{
  border-bottom:1px solid var(--line)
}
.faq summary{
  padding:22px 35px 22px 0;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  position:relative
}
.faq summary::-webkit-details-marker{
  display:none
}
.faq summary:after{
  content:'+';
  position:absolute;
  right:5px;
  top:18px;
  font-size:23px;
  font-weight:300
}
.faq details[open] summary:after{
  content:'−'
}
.faq details p{
  padding:0 30px 24px 0;
  font-size:14px
}
.faq details a{
  text-decoration:underline
}
.closing{
  text-align:center;
  padding:125px 0 100px
}
.closing img{

  margin-bottom:25px
}
.closing h2{
  font-size:53px
}
.closing p{
  margin:17px 0 27px;
  font-size:16px
}
.footer{
  border-top:1px solid var(--line);
  padding:30px 0 40px;
  display:flex;
  align-items:center;
  gap:32px;
  font-size:11px;
  color:var(--muted)
}
.footer nav{
  display:flex;
  gap:22px;
  margin-left:auto
}
.price,.phone-metrics,.chart-axis,.chart-weeks{
  font-family:var(--data);
  font-variant-numeric:tabular-nums
}
@media(min-width:761px){
  .demo[data-visible="true"]:not([data-paused="true"]) .route-line{
    animation:route-draw 6s ease-in-out infinite
  }
}
@keyframes route-draw{
  0%,10%{
    stroke-dashoffset:360
  }
  75%,100%{
    stroke-dashoffset:0
  }
}
@media(max-width:1050px){
  .plan{
    padding:24px
  }
  .plan-top{
    align-items:flex-start
  }
  .plan-top .pill{
    font-size:8px;
    padding:5px
  }
  .nav-links{
    gap:18px
  }
  .nav{
    gap:25px
  }
  .walkthrough,.coach-demo{
    grid-template-columns:44% 56%
  }
  .demo-copy{
    padding:30px 24px
  }
  .insight{
    left:0;
    width:240px
  }
  .dashboard-body{
    grid-template-columns:65px 1fr
  }
  .dashboard aside{
    padding-inline:3px;
    font-size:8px
  }
  .dashboard-content{
    padding:15px 10px
  }
  .row-status{
    font-size:7px
  }
  .tech-card{
    padding:25px
  }
  .engine-list>div{
    grid-template-columns:100px 1fr
  }
  .price{
    font-size:25px
  }
  .price-text{
    font-size:23px
  }
}
@media(max-width:760px){
  .wrap{
    width:calc(100% - 36px)
  }
  .nav{
    height:72px;
    justify-content:space-between
  }
  .nav-links{
    display:none
  }
  .wordmark{
    width:92px
  }
  .nav .button{
    font-size:12px
  }
  .subnav .wrap{
    height:41px;
    font-size:10px
  }
  .hero{
    padding:43px 0 38px
  }
  .hero-emblem{
    transform:scale(.85);
    margin-bottom:13px
  }
  .hero h1{
    font-size:46px
  }
  .hero-copy{
    font-size:15px
  }
  .hero-intro{
    font-size:12px
  }
  .plans{
    grid-template-columns:1fr;
    gap:16px;
    max-width:480px;
    margin:auto
  }
  .plan{
    padding:28px
  }
  .plan>p{
    min-height:0
  }
  .plan h2{
    margin-top:18px
  }
  .plan-top .pill{
    font-size:10px
  }
  .price{
    font-size:29px;
    margin:22px 0
  }
  .plan-note{
    max-width:420px
  }
  .section{
    padding-top:80px
  }
  .section-heading{
    margin-bottom:30px
  }
  .section-heading h2{
    font-size:34px
  }
  .section-intro{
    font-size:14px
  }
  .walkthrough,.coach-demo{
    grid-template-columns:1fr
  }
  .demo-copy{
    padding:29px 24px 5px
  }
  .demo-copy>p{
    max-width:none
  }
  .demo-copy h3{
    font-size:27px
  }
  .athlete-stage{
    min-height:470px
  }
  .phone{
    transform:translate(20px,10px)
  }
  .insight{
    left:5%;
    top:50%;
    width:245px
  }
  .technology-grid{
    grid-template-columns:1fr;
    gap:20px
  }
  .tech-card{
    padding:26px 23px
  }
  .tech-card h3{
    font-size:28px
  }
  .comparison{
    grid-template-columns:1fr;
    gap:22px;
    margin-top:38px;
    padding:0 5px
  }
  .comparison h3{
    font-size:29px
  }
  .comparison p{
    font-size:14px
  }
  .coach-stage{
    min-height:405px;
    padding:30px 15px 45px
  }
  .desk-sketch{
    top:5px
  }
  .dashboard-body{
    grid-template-columns:65px 1fr
  }
  .dashboard-title h4{
    font-size:18px
  }
  .dashboard-content{
    padding:16px 12px
  }
  .dashboard{
    transform:translateY(12px)
  }
  .coach-benefits{
    grid-template-columns:1fr;
    gap:25px;
    padding:0 6px;
    margin-top:28px
  }
  .coach-benefits h3{
    margin-bottom:7px
  }
  .downloads{
    grid-template-columns:1fr;
    gap:15px;
    padding-bottom:55px
  }
  .downloads h2{
    font-size:36px
  }
  .download-art{
    min-height:280px
  }
  .download-art>img{
    width:65px;
    height:92px
  }
  .running-rings{
    width:300px;
    height:180px
  }
  .purpose{
    grid-template-columns:1fr;
    gap:37px
  }
  .purpose h2{
    font-size:36px
  }
  .purpose h2 br:last-child{
    display:none
  }
  .purpose-items h3{
    font-size:23px
  }
  .purpose-items article{
    margin-bottom:30px
  }
  .faq{
    grid-template-columns:1fr;
    gap:26px
  }
  .faq h2{
    font-size:36px
  }
  .faq h2 br{
    display:none
  }
  .faq summary{
    font-size:14px
  }
  .closing{
    padding:90px 0 65px
  }
  .closing h2{
    font-size:38px
  }
  .footer{
    flex-wrap:wrap;
    gap:20px
  }
  .footer>span{
    font-size:10px
  }
  .footer nav{
    margin-left:0;
    width:100%
  }
  .frame{
    padding:7px;
    border-radius:27px
  }
}
@media(max-width:370px){
  .hero h1{
    font-size:39px
  }
  .hero-intro{
    font-size:11px
  }
  .subnav a{
    max-width:165px;
    text-align:right
  }
  .plan{
    padding:23px
  }
  .insight{
    left:2%;
    width:220px
  }
  .phone{
    width:248px;
    transform:translate(9px,10px)
  }
  .dashboard aside{
    display:none
  }
  .dashboard-body{
    grid-template-columns:1fr
  }
  .audience button{
    padding:10px 20px
  }
  .engine-list>div{
    grid-template-columns:90px 1fr
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}
/* Motion and product illustration refinement. */
.button.light {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.button.light:active, .phone-action:active, .dash-action:active {
  background: var(--accent-preso); color: var(--accent);
}
.hero-emblem { height: 112px; }
.hero-emblem img { width: 43px; height: 60px; object-fit: contain; }
.sketch-icon, .heading-sketch { overflow: visible; }
.pro-medal {
  width: 56px; height: 42px; overflow: visible; color: var(--text);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sketch-icon, .heading-sketch { animation: sketch-breathe 6s ease-in-out infinite; }
.athlete-stage {
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px; padding: 34px 28px 45px; min-height: 640px;
}
.phone { transform: none; border-radius: 29px; width: 277px; max-width: 100%; }
.insight, .demo[data-scene="1"] .insight, .demo[data-scene="2"] .insight {
  position: relative; inset: auto; transform: none; width: 310px; max-width: 100%;
  flex-shrink: 0; margin: 0; box-shadow: none;
}
.insight img { flex-shrink: 0; object-fit: contain; }
.insight p { font-size: 14px; line-height: 1.45; }
.mini-route { position: relative; margin: 14px -5px; }
.mini-route svg { height: 145px; border-radius: 10px; background: var(--bg); }
.map-block { fill: var(--surface); stroke: none; }
/* cartography mirrors the app's mapbox/dark-v11 hierarchy (js/config.js):
   quiet blocks, low-contrast footprints, neutral roads, green route. */
.map-footprint { fill: var(--surface-2); stroke: none; }
.map-park { fill: var(--bg-elev); stroke: none; }
.map-avenue-edge { stroke: var(--surface-2); stroke-width: 7; }
.map-avenue { stroke: var(--border); stroke-width: 3; }
.map-labels { font: 6px var(--font); fill: var(--text-3); stroke: none; }
.map-finish { fill: var(--text); stroke: var(--accent); stroke-width: 1.5; }
.map-street { stroke: var(--border); stroke-width: 2.5; }
.gps-origin { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.map-destination { stroke: var(--accent); fill: var(--bg); stroke-width: 1.5; }
.gps-position {
  fill: var(--accent); stroke: var(--bg); stroke-width: 1.5;
  offset-path: path('M24 118H59V58H129V118H199V35');
  animation: gps-progress 7s ease-in-out infinite;
}
.gps-halo { fill: var(--accent-tint); stroke: var(--accent-line); stroke-width: 1; }
.gps-label { display: flex; align-items: center; gap: 6px; padding: 8px 5px 0; font-size: 9px; color: var(--text-2); }
.gps-label i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.demo .route-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
.phone-action, .dash-action { position: relative; gap: 12px; align-items: center; min-height: 40px; }
.phone-action > span:first-child, .dash-action > span:first-child { flex: 1; min-width: 0; }
.action-target { display: grid; place-items: center; position: relative; flex: 0 0 32px; width: 32px; height: 26px; }
.coach-stage { display: flex; flex-direction: column; justify-content: center; padding: 28px 22px 48px; }
.desk-sketch {
  position: relative; inset: auto; display: flex; justify-content: space-between;
  align-items: end; width: 100%; padding: 8px 20px 0; height: 110px; flex-shrink: 0;
}
.desk-sketch svg { width: 83px; height: 90px; overflow: visible; stroke-width: 1.4; }
.coach-medal { transform-origin: 50% 8%; animation: medal-sway 6s ease-in-out infinite; }
.coach-shoe { animation: shoe-stride 4s ease-in-out infinite; }
.dashboard { transform: none; flex-shrink: 0; }
.dash-action { width: 100%; }
.demo[data-paused="true"] *, .demo:not([data-visible="true"]) * { animation-play-state: paused !important; }
:root[data-motion="paused"] * { animation-play-state: paused !important; }
@keyframes gps-progress { 0%, 8% { offset-distance: 0%; } 88%, 100% { offset-distance: 100%; } }
@keyframes sketch-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes medal-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes shoe-stride { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-5px) rotate(-5deg); } }
@media (max-width: 760px) {
  .athlete-stage { min-height: 0; padding: 25px 18px 44px; }
  .coach-stage { min-height: 0; padding: 10px 15px 44px; }
  .desk-sketch { padding-inline: 14px; height: 100px; }
  .phone { width: 277px; transform: none; }
  .insight { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .gps-position { offset-distance: 70%; }
}

/* The product mark shares one silhouette across the plan and engine cards. */
.engine-core svg.pro-medal { width: 44px; height: 33px; color: var(--text); }
.chart-line { stroke-linecap: round; }
.chart-area { stroke: none; }
.chart[data-visible="true"] .chart-line { animation: chart-climb 7s ease-in-out infinite; }
.chart[data-visible="true"] .chart-area,
.chart[data-visible="true"] .chart-points { animation: chart-reveal 7s ease-in-out infinite; }
@keyframes chart-climb {
  0%, 8% { stroke-dasharray: 1; stroke-dashoffset: 1; }
  65%, 100% { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes chart-reveal {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  65%, 100% { clip-path: inset(0 0 0 0); }
}

/* Both appearances reuse the application's semantic palette. */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
:root[data-tema="claro"] .wordmark,
:root[data-tema="claro"] .phone-top img,
:root[data-tema="claro"] .dashboard-bar img { filter: none; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); white-space: nowrap; font-size: 12px;
}
.theme-toggle svg { width: 18px; height: 18px; }
.nav { gap: 24px; }
#planos-map { position: relative; width: 100%; height: 190px; border-radius: 10px; overflow: hidden; background: var(--surface); }
#planos-map .map-status { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; padding: 14px; text-align: center; }
#planos-map .mapboxgl-ctrl-attrib { font-size: 9px; line-height: 16px; }
#planos-map .mapboxgl-ctrl-logo { transform: scale(.75); transform-origin: bottom left; }
.pro-medal, .engine-core svg.pro-medal { width: 36px; height: 45px; stroke-width: 1.6; color: var(--text); }
.pro-medal .icon-drawing { fill: none; stroke: currentColor; }
.animated-icon { overflow: visible; animation: none; }
.animated-icon.icon-visible { animation: icon-arrive 1s cubic-bezier(.22,1,.36,1) both; }
.animated-icon[data-icon="shoe"].icon-visible { animation: shoe-arrive 1.6s cubic-bezier(.22,1,.36,1) both; }
.animated-icon[data-icon="shoe"].icon-visible .icon-drawing { animation: shoe-settle 4.8s 1.6s ease-in-out infinite; transform-origin: center; }
.animated-icon[data-icon="pro-medal"].icon-visible .icon-drawing,
.animated-icon[data-icon="medal"].icon-visible .icon-drawing { animation: medal-settle 6s 1s ease-in-out infinite; transform-origin: 50% 8%; }
/* the trophy stands on its base: it rocks from the bottom, not the ribbon */
.animated-icon[data-icon="trophy"].icon-visible .icon-drawing { animation: medal-settle 6s 1s ease-in-out infinite; transform-origin: 50% 79%; }
.icon-visible .team-head { transform-box: fill-box; transform-origin: center; animation: team-nod 5s ease-in-out infinite; }
.icon-visible .head-left { animation-delay: -.8s; }
.icon-visible .head-right { animation-delay: -1.6s; }
.icon-visible .team-ray { stroke-dasharray: 1; animation: ray-appear 4.8s ease-in-out infinite; }
.icon-visible .ray-two { animation-delay: .22s; }
@keyframes icon-arrive { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes shoe-arrive {
  0% { opacity: 0; transform: translateX(-42px) rotate(-12deg); }
  35% { opacity: 1; transform: translate(-24px,-7px) rotate(4deg); }
  65% { transform: translate(-9px,0) rotate(-5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes shoe-settle { 0%,65%,100% { transform: none; } 80% { transform: translate(2px,-2px) rotate(-3deg); } }
@keyframes medal-settle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes team-nod { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(2deg); } }
@keyframes ray-appear { 0%,12%,100% { stroke-dashoffset: 1; opacity: 0; } 32%,80% { stroke-dashoffset: 0; opacity: 1; } }
@media(max-width:760px) {
  .nav { gap: 12px; }
  .theme-toggle { margin-left: auto; padding: 10px; }
  .theme-toggle span { display: none; }
}

/* The app's own controls (css/components.css), not a site variant: .btn
   (radius --r, no hover, only the press), .segmented for the audience switch
   and .pill--muted for tags. Outline is the grey --border, green is the action. */
.button {
  gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--r);
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  border: 1px solid var(--border); background: none; color: var(--text);
  transition: transform .12s var(--ease), opacity .12s var(--ease);
}
.button:active { transform: scale(.985); opacity: .9; }
.button.light { border-color: transparent; }
.button.light:active { opacity: 1; }
.button svg { width: 18px; height: 18px; }
.button.small { min-height: 42px; padding: 0 16px; font-size: var(--fs-sm); }
.button { white-space: nowrap; text-align: center; }
.plan .button { justify-content: center; font-size: var(--fs-sm); min-height: 58px; padding: 0 16px; }
.audience { border: 0; padding: 5px; gap: 0; background: var(--surface); border-radius: var(--r-pill); }
.audience button {
  min-height: 42px; padding: 0 24px; border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 500; color: var(--text-2);
}
.audience button[aria-selected=true] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.theme-toggle { border-radius: var(--r); background: none; font-size: var(--fs-sm); font-weight: 600; min-height: 42px; padding: 0 14px; }
.theme-toggle:active { transform: scale(.985); opacity: .9; }
.pill, .coming {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-2); font-weight: 600;
}
.coming { min-height: 42px; padding: 0 16px; font-size: var(--fs-sm); }
.phone-action, .dash-action { border-radius: 8px; font-weight: 600; }
.dashboard aside span { border-radius: var(--r-pill); }
.steps { display: grid; gap: 4px; }
.step { border-top: 0; border-radius: var(--r); padding: 13px 14px; transition: background .3s; }
.engine-core { border-radius: var(--r); }

/* The pointer from the Coach tutorial (treinador/guia.js): it glides to the
   scene's target, presses and the screen answers. */
.demo-pointer {
  position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: flex-start;
  color: var(--accent); opacity: 0; pointer-events: none;
  transition: transform .95s cubic-bezier(.5, .1, .2, 1), opacity .3s;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}
.demo-pointer svg { flex: none; width: 26px; height: 26px; transition: transform .16s; transform-origin: 4px 4px; }
.demo-pointer.is-toque svg { transform: scale(.8); }
.demo-pointer b {
  margin: 15px 0 0 -3px; padding: 2px 8px; border-radius: 8px; background: var(--accent);
  color: var(--on-accent); font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.phone-action, .dash-action { transition: background .16s, color .16s, transform .16s; }
.phone-action.is-toque, .dash-action.is-toque { background: var(--accent-preso); color: var(--accent); transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .demo-pointer { display: none; }
}

/* ============================================================
   Os planos do Tryzen Coach (13/10/2026, migration 0135)
   ------------------------------------------------------------
   Uma linha por faixa, no mesmo quadro (.frame) das demonstracoes.
   A barra mede a capacidade contra a maior faixa (250): o verde e
   sempre o mesmo pedaco, as dez gratuitas; o traco claro sao as
   adicionais. Sem cor alem do verde da marca.
   ============================================================ */
.tiers{
  border-radius:23px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:8px 28px
}
.tier{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 110px minmax(160px,2.2fr) minmax(170px,1.4fr) 130px;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-top:1px solid var(--line)
}
.tier:first-child{border-top:0}
.tier-cabeca{
  font-size:11px;
  color:var(--muted);
  padding:16px 0 12px
}
.tier-nome{font-size:17px;font-weight:600;letter-spacing:-.2px}
.tier-cap{font-family:var(--data);font-size:13px;color:var(--muted)}
.tier-barra{
  display:flex;
  gap:3px;
  height:8px;
  align-items:stretch
}
.tier-barra i{
  display:block;
  width:var(--w);
  border-radius:999px
}
.tier-gratis{background:var(--green)}
.tier-adic{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.tier-legenda{display:flex;align-items:center;gap:8px}
.tier-legenda i{display:inline-block;width:10px;height:6px;border-radius:999px;margin-left:6px}
.tier-legenda i:first-child{margin-left:0}
.tier-vagas{font-size:13px;color:var(--muted)}
.tier-vagas b{color:var(--ink);font-weight:600;font-family:var(--data)}
.tier-preco{
  text-align:right;
  font-family:var(--data);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.2px
}
.tier-preco small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0}
.tier-cabeca .tier-vagas-cabeca{visibility:hidden}
.tier-cabeca span:last-child{text-align:right}
.tier-mais .tier-preco{font-family:var(--sans);font-size:13px}
.tier-notas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:35px;
  padding:0 15px
}
.tier-notas p{font-size:13px}
.tier-notas b{font-weight:600}

/* ---------- os papeis de cada produto ---------- */
.papeis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.papeis article{
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel)
}
.papeis span{font-size:12px;color:var(--muted)}
.papeis h3{font-size:24px;letter-spacing:-.4px;margin:14px 0 12px}
.papeis p{font-size:14px}
.papeis .papel-destaque{border-color:var(--marca,var(--green))}
.papeis-regras{
  max-width:720px;
  margin:28px auto 0;
  font-size:14px
}

/* ---------- os seis blocos do Coach ---------- */
.coach-benefits--seis{row-gap:44px}
.coach-benefits--seis p b{font-weight:600;color:var(--ink)}
.selo-mini{
  display:inline-block;
  font-size:10px;
  line-height:1.3;
  padding:3px 7px;
  margin:0 2px 2px 0;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  white-space:nowrap
}
.faq + .faq{padding-top:90px}

@media(max-width:1050px){
  .tier{grid-template-columns:minmax(100px,1fr) 96px minmax(120px,1.6fr) 120px;gap:16px}
  .tier-vagas,.tier-cabeca .tier-vagas-cabeca{display:none}
  .papeis{grid-template-columns:1fr}
  .tier-notas{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  .tiers{padding:4px 18px}
  .tier{
    grid-template-columns:1fr auto;
    grid-template-areas:"nome preco" "barra barra" "vagas vagas";
    gap:8px 12px;
    padding:16px 0
  }
  .tier-cabeca{grid-template-areas:"nome preco" "leg leg";display:grid}
  .tier-cabeca span:nth-child(2){display:none}
  .tier-cabeca .tier-legenda{grid-area:leg}
  .tier-nome{grid-area:nome}
  .tier-cap{display:none}
  .tier-barra{grid-area:barra}
  .tier-vagas{grid-area:vagas;display:block}
  .tier-preco{grid-area:preco}
  .tier-mais .tier-barra{display:none}
  .papeis article{padding:24px}
  .tier-notas{padding:0}
}

/* ============================================================
   A pagina como historia (14/10/2026) — par do historia.js
   ------------------------------------------------------------
   Estudo da claude.com/pricing: o que da a sensacao premium la nao e
   quantidade de movimento, e a curva. Saida exponencial
   (cubic-bezier(.19,1,.22,1)) em 0,75 a 1 s, subidas de 16 px, nada
   que pule ou quique. Aqui a mesma regua, a servico da virada da
   marca: da impotencia a autoconfianca.
   Tudo que esconde algo mora debaixo de `.mov` (tema-inicial.js), entao
   sem JavaScript ou com menos movimento a pagina aparece inteira.
   ============================================================ */
:root{
  --expo:cubic-bezier(.19,1,.22,1);
  --suave:cubic-bezier(.25,1,.5,1)
}

/* ---------- o cabecalho fica, com vidro, e desce ao abrir ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px)
}
.mov .site-header .nav{animation:nav-desce 1s var(--suave) both}
@keyframes nav-desce{from{opacity:0;transform:translateY(-20px)}}
.progresso{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none
}

/* ---------- entrar em cena ---------- */
.mov .revela{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1s var(--suave),transform 1s var(--suave);
  transition-delay:calc(var(--ordem,0) * 70ms)
}
.mov .revela.visto{opacity:1;transform:none}
/* o titulo inteiro aparece na hora; quem entra sao as palavras */
.mov .revela:is(h1,h2,h3).em-palavras,.mov .revela .em-palavras{opacity:1;transform:none}
.em-palavras .pal{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;
  margin-bottom:-.08em
}
.em-palavras .pal>span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform 1.1s var(--expo);
  transition-delay:calc(var(--i) * 55ms + 80ms)
}
.visto.em-palavras .pal>span,.visto .em-palavras .pal>span{transform:none}

/* o comeco: o emblema pousa, o halo respira */
.hero-emblem:before{
  content:'';
  position:absolute;
  inset:-30px 30px;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-glow),transparent);
  opacity:.55;
  filter:blur(6px);
  animation:halo 7s ease-in-out infinite
}
@keyframes halo{50%{transform:scale(1.12);opacity:.9}}
.mov .hero-emblem.revela{transform:translateY(10px) scale(.92)}
.mov .hero-emblem.revela.visto{transform:none}

/* ---------- botoes e cartoes respondem ---------- */
.button{transition:background .2s,border-color .2s,color .2s,scale .5s var(--expo),box-shadow .5s var(--expo)}
.button svg{transition:transform .6s var(--expo)}
.button:hover svg{transform:translateX(4px)}
.button:active{scale:.98}
.text-link span{display:inline-block;transition:transform .6s var(--expo)}
.text-link:hover span{transform:translateY(3px)}
.mov .plan.visto,.mov .papeis article.visto,.mov .coach-benefits article.visto{
  transition:opacity 1s var(--suave),transform 1s var(--suave),translate .75s var(--expo),box-shadow .75s var(--expo),border-color .3s
}
.plan,.papeis article,.coach-benefits article{transition:translate .75s var(--expo),box-shadow .75s var(--expo)}
@media(hover:hover){
  .plan:hover,.papeis article:hover,.coach-benefits article:hover{
    translate:0 -4px;
    box-shadow:0 22px 50px -28px color-mix(in srgb,var(--ink) 45%,transparent)
  }
  .plan.featured:hover{box-shadow:0 26px 60px -26px var(--accent-glow)}
}
.com-luz{position:relative;isolation:isolate}
.com-luz:after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--accent-tint),transparent 60%);
  opacity:0;
  transition:opacity .5s var(--expo);
  pointer-events:none;
  z-index:-1
}
.com-luz:hover:after{opacity:1}
.plan.featured{position:relative}
.plan.featured:before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--giro,0deg),transparent 0 70%,var(--marca) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:giro 6s linear infinite;
  pointer-events:none
}
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes giro{to{--giro:360deg}}

/* ---------- abas com pilula que desliza ---------- */
.audience.com-pilula{position:relative}
.audience-pilula{
  position:absolute;
  top:5px;bottom:5px;left:5px;
  border-radius:var(--r-pill);
  background:var(--accent);
  transition:transform .55s var(--expo),width .55s var(--expo)
}
.audience.com-pilula button{position:relative;transition:color .35s var(--expo)}
.audience.com-pilula button[aria-selected=true]{background:none}

/* ---------- os icones sao desenhados ----------
   Por classe (.traco), e nao por [pathLength]: o Chrome nao reavalia um
   seletor de atributo com maiuscula em SVG quando so a classe do pai muda. */
.mov .animated-icon .icon-drawing>.traco{
  stroke-dasharray:1;
  stroke-dashoffset:1.01
}
.mov .animated-icon .icon-drawing.desenhado>.traco{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.8s var(--expo) .15s
}

/* ---------- capitulo 1: a virada ---------- */
.historia{position:relative;margin-top:30px}
.historia.vivo{height:320vh}
.historia-palco{padding:40px 0 70px;overflow:hidden}
.historia.vivo .historia-palco{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  padding:0;
  overflow:hidden;
  display:grid;
  place-items:center
}
.historia-cena{
  position:relative;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:26px
}
.historia.vivo .historia-cena{
  --a:clamp(0,calc((var(--p,0) - .12) * 4.5),1);
  --v:clamp(0,min(calc((var(--p,0) - .27) * 7),calc((.53 - var(--p,0)) * 7)),1);
  --b:clamp(0,calc((var(--p,0) - .47) * 4.5),1);
  --c:clamp(0,calc((var(--p,0) - .38) * 2.2),1);
  /* o atleta chega (--r) e rompe a fita (--q) */
  --r:clamp(0,calc((var(--p,0) - .48) * 2.6),1);
  --q:clamp(0,calc((var(--p,0) - .72) * 4),1);
  grid-template-areas:"palco" "linha"
}
.historia-fundo{
  position:absolute;
  inset:-30vh -20vw;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(30% 34% at 50% 42%,var(--accent-glow),transparent 70%);
  opacity:0
}
.historia.vivo .historia-fundo{opacity:calc(var(--b) * .28);transform:scale(calc(.85 + var(--b) * .15))}
.historia-estado{max-width:920px}
.historia.vivo .historia-estado{grid-area:palco}
.historia-olho{font-size:13px;margin-bottom:16px;letter-spacing:.02em}
.historia-estado h2{font-size:clamp(46px,6vw,82px);letter-spacing:-2px;line-height:1}
.historia-texto{font-size:17px;line-height:1.6;margin:22px auto 0;max-width:520px}
.historia-antes h2{color:var(--text-2)}
.historia-depois h2{color:var(--accent-texto)}
.historia:not(.vivo) .historia-depois{margin-top:40px}
.historia.vivo .historia-antes{
  opacity:calc(1 - var(--a));
  transform:translateY(calc(var(--a) * -40px)) scale(calc(1 - var(--a) * .04));
  filter:blur(calc(var(--a) * 10px))
}
.historia.vivo .historia-depois{
  opacity:var(--b);
  transform:translateY(calc((1 - var(--b)) * 40px));
  filter:blur(calc((1 - var(--b)) * 10px))
}
.historia-virada{display:none}
.historia.vivo .historia-virada{
  display:block;
  grid-area:palco;
  align-self:center;
  font-family:var(--display);
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.15;
  letter-spacing:-.6px;
  color:var(--ink);
  opacity:var(--v);
  transform:scale(calc(.96 + var(--v) * .04));
  filter:blur(calc((1 - var(--v)) * 6px))
}
.historia-linha{width:min(600px,90%);height:auto;overflow:visible}
.historia.vivo .historia-linha{grid-area:linha}
.linha-parada{stroke:var(--text-3);stroke-width:2;stroke-dasharray:2 7}
.linha-sobe{stroke:var(--accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}
.linha-ponto{fill:var(--accent);stroke:var(--bg);stroke-width:3}
.historia.vivo .linha-parada{opacity:calc(1 - var(--a))}
.historia.vivo .linha-sobe{stroke-dashoffset:calc(1.01 - var(--c) * 1.01)}
.historia.vivo .linha-ponto{opacity:clamp(0,calc((var(--c) - .9) * 10),1);transform-box:fill-box;transform-origin:center;transform:scale(clamp(0,calc((var(--c) - .9) * 10),1))}
.historia-vozes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;font-size:14px;width:min(640px,100%)}
.historia-vozes li{display:grid;gap:4px;text-align:left}
.historia-vozes s{color:var(--text-3)}
.historia-vozes span{color:var(--accent-texto);font-weight:500}
.historia.vivo .historia-vozes{position:absolute;inset:0;display:block;pointer-events:none;width:auto}
.historia.vivo .historia-vozes li{
  position:absolute;
  left:calc(50% + var(--x) * 40%);
  top:calc(50% + var(--y) * 40%);
  translate:-50% -50%;
  display:grid;
  white-space:nowrap;
  text-align:center
}
.historia.vivo .historia-vozes li>*{grid-area:1/1}
.historia.vivo .historia-vozes s{
  text-decoration:none;
  font-size:15px;
  opacity:calc((1 - var(--a)) * .85);
  transform:translate(calc(var(--x) * var(--a) * 50px),calc(var(--y) * var(--a) * 30px));
  filter:blur(calc(var(--a) * 6px))
}
.historia.vivo .historia-vozes span{
  font-size:15px;
  opacity:var(--b);
  transform:translate(calc(var(--x) * (1 - var(--b)) * -30px),0);
  padding:8px 14px;
  border-radius:999px;
  background:none;
  border:.5px solid var(--accent-line)
}
.historia-dica{display:none}
.historia.vivo .historia-dica{
  display:block;
  position:absolute;
  bottom:-16vh;
  font-size:12px;
  color:var(--text-3);
  opacity:calc(1 - var(--a) * 3)
}
.historia-dica span{display:inline-block;animation:dica 2s var(--suave) infinite}
@keyframes dica{50%{transform:translateY(5px)}}

/* ---------- capitulo 2: as emocoes ---------- */
.emocoes{
  border-radius:23px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:8px 28px
}
.emo{
  display:grid;
  grid-template-columns:minmax(180px,1.15fr) minmax(200px,1.3fr) 44px minmax(150px,1fr);
  align-items:center;
  gap:22px;
  padding:19px 0;
  border-top:1px solid var(--line)
}
.emo-cabeca{font-size:11px;color:var(--muted);border-top:0;padding:16px 0 12px}
.emo-grupo{padding:26px 0 8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);max-width:760px}
.emo-grupo b{color:var(--ink);font-weight:600}
.emo-sol{font-size:16px;font-weight:600;letter-spacing:-.2px}
.emo-de{font-size:14px;color:var(--muted)}
.emo-de s{
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 55%/0% 1px no-repeat;
  transition:background-size .9s var(--expo) .1s,color .6s
}
.emo-seta{width:44px;height:12px;color:var(--text-3)}
.emo-seta path{stroke-dasharray:1;stroke-dashoffset:1.01;transition:stroke-dashoffset .8s var(--expo) .45s}
.emo-para{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.2px;
  color:var(--text-3);
  filter:blur(4px);
  opacity:.35;
  transition:color .8s var(--expo) .7s,filter .9s var(--expo) .7s,opacity .9s var(--expo) .7s
}
.emo-para i{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  transform:scale(0);
  transition:transform .7s var(--expo) .85s;
  flex:none
}
.emo.virou .emo-de s{background-size:100% 1px;color:var(--text-3)}
.emo.virou .emo-seta path{stroke-dashoffset:0}
.emo.virou .emo-seta{color:var(--accent)}
.emo.virou .emo-para{color:var(--accent-texto);filter:none;opacity:1}
.emo.virou .emo-para i{transform:none;animation:pulso 2.4s 1.6s ease-out}
@keyframes pulso{0%{box-shadow:0 0 0 0 var(--accent-glow)}100%{box-shadow:0 0 0 12px transparent}}
@media(hover:hover){.emo:not(.emo-cabeca):hover{background:linear-gradient(90deg,transparent,var(--accent-tint) 50%,transparent)}}
.emo{transition:background .4s}

/* ---------- planos Coach: as barras crescem ---------- */
.mov .tier .tier-barra i{width:0;transition:width 1.3s var(--expo)}
.mov .tier.visto .tier-barra i{width:var(--w)}
.mov .tier.visto .tier-barra .tier-gratis{transition-delay:.25s}
.mov .tier.visto .tier-barra .tier-adic{transition-delay:.55s}
@media(hover:hover){
  .tier:not(.tier-cabeca){transition:background .35s}
  .tier:not(.tier-cabeca):hover{background:color-mix(in srgb,var(--accent-tint) 70%,transparent)}
  .tier:not(.tier-cabeca):hover .tier-adic{background:color-mix(in srgb,var(--ink) 40%,transparent)}
}

/* ---------- FAQ: o + vira − girando ---------- */
.faq summary{transition:color .3s}
.faq summary:hover{color:var(--ink)}
.faq summary:after{
  content:'';
  top:50%;
  right:6px;
  width:14px;height:14px;
  margin-top:-7px;
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat;
  transition:transform .5s var(--expo)
}
.faq summary:before{
  content:'';
  position:absolute;
  top:50%;
  right:6px;
  width:14px;height:14px;
  margin-top:-7px;
  background:linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform .5s var(--expo)
}
/* a haste em pe deita e some dentro da deitada: o + vira − */
.faq details[open]:not(.fechando) summary:before{transform:rotate(90deg)}
.faq details[open]:not(.fechando) summary:after{content:'';transform:rotate(180deg)}

/* ---------- capitulo final: a frase acende ---------- */
.manifesto{text-align:center;padding-top:150px;max-width:980px}
.manifesto-olho{font-size:13px;margin-bottom:28px}
.manifesto-frase{
  font-family:var(--display);
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.12;
  letter-spacing:-1px;
  color:var(--ink);
  font-weight:500
}
.manifesto-frase.acende .pal>span{transform:none;transition:none}
.mov .manifesto-frase.acende .pal>span{
  opacity:clamp(.14,calc(var(--p,0) * (var(--n) + 4) - var(--i)),1);
  transition:opacity .25s linear
}
.manifesto-frase .pal{overflow:visible}
.manifesto-tres{display:grid;gap:6px;margin-top:56px;font-size:clamp(18px,2vw,22px)}
.manifesto-tres p{color:var(--muted)}
.manifesto-tres b{color:var(--ink);font-weight:600}
.manifesto-tres p:nth-child(2) b{color:var(--accent-texto)}
.manifesto-tres p:nth-child(3) b{
  background:linear-gradient(transparent 62%,var(--accent-tint) 0) 0 0/0% 100% no-repeat;
  transition:background-size 1.2s var(--expo) .6s
}
.manifesto-tres p.visto:nth-child(3) b,html:not(.mov) .manifesto-tres p:nth-child(3) b{background-size:100% 100%}


@media(max-width:1050px){
  .emo{grid-template-columns:1fr 1.2fr 36px 1fr;gap:14px}
}
@media(max-width:760px){
  .site-header{background:color-mix(in srgb,var(--bg) 88%,transparent)}
  .historia.vivo{height:300vh}
  .historia-estado h2{font-size:44px;letter-spacing:-1.2px}
  .historia-texto{font-size:15px}
  .historia.vivo .historia-cena{gap:18px}
  /* no celular as vozes saem do contorno e viram duas fileiras, em cima e embaixo */
  .historia.vivo .historia-palco{padding-top:72px}
  .historia.vivo .historia-cena{grid-template-columns:1fr 1fr;grid-template-areas:"v1 v2" "palco palco" "linha linha" "v3 v4";gap:22px 12px}
  .historia.vivo .historia-vozes{display:contents}
  .historia.vivo .historia-vozes li{position:static;translate:none;white-space:normal;align-self:center}
  .historia.vivo .historia-vozes li:nth-child(1){grid-area:v1}
  .historia.vivo .historia-vozes li:nth-child(2){grid-area:v2}
  .historia.vivo .historia-vozes li:nth-child(3){grid-area:v3}
  .historia.vivo .historia-vozes li:nth-child(4){grid-area:v4}
  .historia.vivo .historia-vozes s,.historia.vivo .historia-vozes span{font-size:12.5px;line-height:1.35}
  .historia.vivo .historia-vozes span{padding:8px 10px;border-radius:14px}
  .historia.vivo .historia-linha{width:100%}
  .historia.vivo .historia-dica{bottom:-9vh}
  .historia-vozes{grid-template-columns:1fr}
  .emocoes{padding:4px 18px}
  .emo{grid-template-columns:1fr auto;grid-template-areas:"sol sol" "de de" "para seta";gap:6px 12px;padding:16px 0}
  .emo-cabeca{display:none}
  .emo-sol{grid-area:sol;font-size:15px}
  .emo-de{grid-area:de;font-size:13px}
  .emo-seta{grid-area:seta;justify-self:end}
  .emo-para{grid-area:para;font-size:16px}
  .manifesto{padding-top:100px}
  .manifesto-frase{font-size:32px;letter-spacing:-.6px}
}
@media(prefers-reduced-motion:reduce){
  .plan.featured:before,.hero-emblem:before{animation:none}
}
/* telas de 320: o botao Entrar passava 32 px da borda e a pagina rolava pro lado */
@media(max-width:370px){
  .nav{gap:10px}
  .nav .button.small{padding:9px 12px;gap:8px}
  .nav .button.small svg{display:none}
}

/* ============================================================
   Vencer (14/10/2026, terceira versao): o podio e a constelacao
   ------------------------------------------------------------
   O dono pediu menos luz e mais traco: fino, detalhado, com
   profundidade, "como os riscos do tenis". E mostrar espaco.
     · o podio mora na cena da autoconfianca, no lugar da corrida. E
       desenhado em perspectiva (topo, lado, sombra no chao, piso com
       linhas de fuga) e SE DESENHA com a rolagem: cada traco tem o seu
       --s (quando comeca) e anda com --r; o trofeu e o louro andam
       com --q. Sem movimento, --r e --q valem 1: tudo desenhado.
     · TRY + ZEN viram uma constelacao, como a da claude.com/product:
       fios principais entre os nos, fios curtos e apagados ate os
       conceitos, cada um desenhado na sua vez (--t).
   ============================================================ */
.podio-cena{display:block;width:min(540px,88%);height:auto;margin:0 auto 6px;overflow:visible;color:var(--text);stroke-width:1}
.podio-cena .tr{stroke-dasharray:1;stroke-dashoffset:calc(1.01 - clamp(0,calc((var(--r,1) - var(--s,0)) * 3),1) * 1.01)}
.podio-cena .tq{stroke-dasharray:1;stroke-dashoffset:calc(1.01 - clamp(0,calc((var(--q,1) - var(--s,0)) * 3),1) * 1.01)}
.podio-cena .tro{opacity:clamp(0,calc((var(--r,1) - var(--s,0)) * 4),1)}
.podio-cena .piso .tr{stroke:var(--line);stroke-width:.8}
.podio-cena .face{stroke:var(--text-2);stroke-width:1.05}
.podio-cena .friso{stroke:var(--text-3);stroke-width:.6;opacity:.7}
.podio-cena .d1 .face{stroke:var(--accent-texto)}
.podio-cena .d1 .friso{stroke:var(--accent-texto);opacity:.45}
.podio-cena text{stroke:none;fill:var(--muted);font-family:var(--sans);font-size:10px;letter-spacing:.06em}
.podio-cena .d1 text{fill:var(--accent-texto);font-weight:600}
.podio-cena .hachura .tr{stroke:var(--text-3);stroke-width:.7}
.podio-cena .hachura.fina .tr{stroke-width:.6;opacity:.8}
.podio-cena .sombra{stroke:var(--text-3);stroke-width:.6;fill:none}
.podio-cena .trajeto{stroke:var(--accent);stroke-width:1.1;stroke-linecap:round}
.podio-cena .pouso{fill:none;stroke:var(--accent);stroke-width:.9}
.podio-cena .ouro{stroke:var(--accent-texto);stroke-width:1.1}
.podio-cena .detalhe{stroke:var(--accent-texto);stroke-width:.6;opacity:.8}
.podio-cena .brilho{stroke:var(--accent);stroke-width:.8;opacity:.9}
.podio-cena .louro{stroke:var(--accent-texto);stroke-width:.9}
.podio-cena .folha{stroke:var(--accent-texto);stroke-width:.75;fill:none}
.podio-cena .nervura{stroke:var(--accent-texto);stroke-width:.4;opacity:.7}
.podio-cena .faisca{stroke:var(--accent);stroke-width:.7}
.podio-cena .raio{stroke:var(--text-3);stroke-width:.7;stroke-dasharray:1}

/* ---------- TRY + ZEN: a constelacao ---------- */
.constelacao-fig{margin:72px auto 0;max-width:940px}
.constelacao{display:block;width:100%;height:auto;overflow:visible}
.c-estreita{display:none}
.constelacao .fio{stroke:var(--text-3);stroke-width:1.1}
.constelacao .fio-sec{stroke:var(--text-3);stroke-width:.7;opacity:.6}
.constelacao text{stroke:none}
.constelacao .no-sigla{fill:var(--ink);font-family:var(--data);font-size:24px;font-weight:600;letter-spacing:.38em}
.constelacao .no-leg{fill:var(--muted);font-family:var(--sans);font-size:12px}
.constelacao .no-fim{fill:var(--accent-texto);font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.3px}
.constelacao .sat{fill:var(--muted);font-family:var(--sans);font-size:13px}
.mov .constelacao :is(.fio,.fio-sec){stroke-dasharray:1;stroke-dashoffset:1.01}
.mov .constelacao text{opacity:0;transform:translateY(4px)}
.mov .constelacao-fig.desenhado :is(.fio,.fio-sec){stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.25,.1,.25,1) var(--t)}
.mov .constelacao-fig.desenhado text{opacity:1;transform:none;transition:opacity .7s var(--suave) var(--t),transform .9s var(--expo) var(--t)}
@media(max-width:760px){
  .c-larga{display:none}
  .c-estreita{display:block;max-width:420px;margin:0 auto}
  .constelacao .no-sigla{font-size:22px}
  .constelacao .sat{font-size:12.5px}
  .constelacao-fig{margin-top:56px}
  .podio-cena{width:min(330px,92%)}
}

/* ---------- medalha e trofeu nos grupos e titulos ---------- */
.emo-grupo span{display:block}
.emo-icone{width:30px;height:36px;float:left;margin:-2px 12px 0 0;color:var(--accent-texto);stroke-width:2;overflow:visible}
.heading-medal,.heading-trophy{color:var(--accent-texto);stroke-width:1.8}
.heading-trophy{width:60px;height:72px}
@media(max-width:760px){
  .historia.vivo .historia-linha{max-height:90px}
  .emo-icone{width:24px;height:30px}
}

/* ============================================================
   Estudo da claude.com/product/claude-code (14/10/2026)
   ------------------------------------------------------------
   Quatro pecas: a abertura dividida com o app ao vivo, os blocos de
   onde usar, os casos em abas que digitam e a faixa escura no fim.
   Mesma regua do resto da pagina: traco fino, saida exponencial.
   ============================================================ */
/* ---------- a abertura dividida ---------- */
.hero--dividido{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas:"texto app" "plat plat";
  align-items:center;
  gap:40px 56px;
  text-align:left;
  padding:64px 0 40px
}
.hero--dividido .hero-texto{grid-area:texto}
.hero--dividido .hero-emblem{margin:0 0 18px;width:64px;height:76px;place-items:center}
/* sem luz atras da logo (pedido do dono, 14/10/2026) */
.hero--dividido .hero-emblem:before{content:none}
.hero--dividido .hero-emblem img{width:34px;height:48px}
.hero--dividido h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-1.4px}
.hero--dividido .hero-copy{font-size:16px}
.hero-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-acoes .button{gap:14px}
.hero-nota{font-size:12px;margin-top:14px;color:var(--text-3)}
.hero-app{grid-area:app;position:relative;min-width:0;text-align:left}

.app-aviso{position:static;display:block;margin-top:10px;text-align:right}

/* ---------- onde usar ---------- */
.plataformas{grid-area:plat;text-align:center;margin-top:18px}
.plataformas-rot{font-size:13px;margin-bottom:14px}
.plataformas-lista{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.plataforma{
  display:grid;justify-items:center;gap:6px;width:104px;padding:14px 8px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font-size:12px;color:var(--ink);
  transition:translate .6s var(--expo),border-color .3s,box-shadow .6s var(--expo)
}
.plataforma svg{width:30px;height:30px;stroke-width:1.2;color:var(--ink)}
.plataforma small{font-size:10px;color:var(--text-3);margin-top:-4px}
.plataforma.em-breve{color:var(--muted)}
.plataforma.em-breve svg{color:var(--text-3)}
@media(hover:hover){
  a.plataforma:hover{translate:0 -3px;border-color:var(--accent-line);box-shadow:0 14px 30px -22px color-mix(in srgb,var(--ink) 50%,transparent)}
  a.plataforma:hover svg{color:var(--accent-texto)}
}

/* ---------- casos em abas ---------- */
.casos-abas{margin-bottom:28px;flex-wrap:wrap;justify-content:center}
.caso{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.caso-prompt{color:#30D158;margin-right:8px}
.caso-digita.digitando:after{content:'';display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:#30D158;animation:cursor .9s steps(1) infinite}
.mov .caso-fim{opacity:0;transform:translateY(5px);transition:opacity .5s var(--suave),transform .6s var(--expo)}
.mov .caso-fim.chegou{opacity:1;transform:none}
.caso-texto h3{font-size:30px;line-height:1.1;margin-bottom:14px;letter-spacing:-.4px}
.caso-texto p{font-size:15px}
.casos-aviso{text-align:center;margin-top:22px}

/* ---------- a faixa escura do fim ---------- */
.fecho{
  margin-top:130px;
  background:#121110;color:#f2efe8;
  position:relative;overflow:hidden;
  --ink:#f2efe8;--muted:#a9a59c
}
.fecho-dentro{position:relative;text-align:center;padding:120px 0 110px}
.fecho-rota{position:absolute;inset:auto 0 0;width:100%;height:60%;pointer-events:none}
.fecho-rota path{stroke:#30D158;stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.mov .fecho-rota path{stroke-dashoffset:1.01}
.mov .fecho-rota.visto path{stroke-dashoffset:0}
.fecho-rota path{transition:stroke-dashoffset 2.4s var(--expo) .3s}
.fecho img{margin:0 auto 25px;position:relative}
.fecho h2{font-size:clamp(40px,5vw,60px);color:#f2efe8;position:relative}
.fecho p{color:#a9a59c;margin:17px 0 30px;font-size:16px;position:relative}
.fecho-acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;position:relative}
.fecho .button.fecho-sec{color:#f2efe8;border-color:rgba(255,255,255,.22);background:none}
.fecho .button.fecho-sec:hover{border-color:rgba(255,255,255,.5)}
body:has(.fecho) .footer{border-top:0}

@media(max-width:1050px){
  .hero--dividido{grid-template-columns:1fr;grid-template-areas:"texto" "app" "plat";text-align:center}
  .hero--dividido .hero-emblem{margin:0 auto 18px}
  .hero-acoes{justify-content:center}
  .hero-app{max-width:620px;margin:0 auto;width:100%}
  .caso{grid-template-columns:1fr;gap:24px}
}
@media(max-width:760px){
  .hero--dividido{padding:40px 0 30px;gap:30px}
  .hero--dividido h1{font-size:42px}
  .plataforma{width:calc(50% - 5px)}
  .caso-texto h3{font-size:24px}
  .casos-abas{width:100%;border-radius:18px}
  .casos-abas button{flex:1 1 45%;padding:10px 12px;font-size:13px}
  .fecho{margin-top:90px}
  .fecho-dentro{padding:90px 0 80px}
}
/* no tema escuro a faixa do fim fica um tom abaixo da pagina, com um fio em cima */
[data-tema="escuro"] .fecho{background:#121110;border-top:1px solid var(--line)}

/* ============================================================
   As telas reais do app (14/10/2026)
   ------------------------------------------------------------
   O dono pediu a tela original do app (corrida, mapa, painel Coach)
   no lugar das conversas ilustrativas, com uma leve edicao visual:
   moldura fina de aparelho, uma inclinacao suave entre as duas telas
   da abertura e selos discretos dizendo o que cada uma e. Cada tela
   vem nos dois temas e acompanha o tema da pagina.
   ============================================================ */
.tela-escuro{display:none}
[data-tema="escuro"] .tela-claro{display:none}
[data-tema="escuro"] .tela-escuro{display:block}

.cel{
  position:relative;width:100%;aspect-ratio:390/844;padding:6px;border-radius:40px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 40px 80px -48px color-mix(in srgb,var(--ink) 55%,transparent),0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent)
}
.cel-tela{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--bg);container-type:inline-size}
.cel-tela img{width:100%;height:100%;object-fit:cover}
/* o mapa da corrida: redesenhado em codigo (#i-mapa), no lugar exato da area do mapa da tela,
   com as cores dos estilos light e dark que o app usa na Mapbox */
.cel-tela .tela-mapa{position:absolute;left:5.64%;top:13.51%;width:88.72%;height:46.42%;border-radius:4.6cqw;overflow:hidden;
  --m-terra:#EFEDE8;--m-predio:#E5E2DC;--m-parque:#DCE7D2;--m-agua:#C8DBE4;--m-rua:#FFFFFF;--m-borda:#E2DFD8;--m-nome:#8E897F;--m-rota:#24913E;--m-rota-borda:#FFFFFF}
[data-tema="escuro"] .cel-tela .tela-mapa{--m-terra:#252523;--m-predio:#2B2A28;--m-parque:#25302A;--m-agua:#1C2428;--m-rua:#3B3A37;--m-borda:#2F2E2C;--m-nome:#8A857C;--m-rota:#30D158;--m-rota-borda:#1E1E1D}
#i-mapa *{stroke:none}
.m-terra{fill:var(--m-terra)}
.m-predio{fill:var(--m-predio)}
.m-parque{fill:var(--m-parque)}
.m-agua{fill:var(--m-agua)}
.m-rua-borda,.m-rua,.m-av-borda,.m-av,.m-rota-borda,.m-rota{fill:none;stroke-linecap:round;stroke-linejoin:round}
#i-mapa .m-rua-borda{stroke:var(--m-borda);stroke-width:7}
#i-mapa .m-rua{stroke:var(--m-rua);stroke-width:5}
#i-mapa .m-av-borda{stroke:var(--m-borda);stroke-width:14}
#i-mapa .m-av{stroke:var(--m-rua);stroke-width:11}
#i-mapa .m-nome text{fill:var(--m-nome);font:500 8.5px var(--sans);letter-spacing:.02em;stroke:var(--m-terra);stroke-width:3px;paint-order:stroke}
#i-mapa .m-rota-borda{stroke:var(--m-rota-borda);stroke-width:8}
#i-mapa .m-rota{stroke:var(--m-rota);stroke-width:4.5}
#i-mapa .m-inicio{fill:var(--m-rota-borda);stroke:var(--m-rota);stroke-width:2.5}
#i-mapa .m-ponto{fill:var(--m-rota);stroke:var(--m-rota-borda);stroke-width:2.5}
.m-halo{fill:var(--m-rota);opacity:.18;transform-box:fill-box;transform-origin:center;animation:m-halo 2.4s ease-out infinite}
@keyframes m-halo{0%{scale:.6;opacity:.35}100%{scale:1.8;opacity:0}}
@media(prefers-reduced-motion:reduce){.m-halo{animation:none}}

.telas-palco{position:relative;height:560px;max-width:520px;margin:0 auto}
.telas-palco .cel{position:absolute;width:250px}
.cel--frente{right:18px;top:0;z-index:2}
.cel--tras{left:18px;top:56px;width:226px !important;rotate:-5deg;opacity:.96}
.tela-selo{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  box-shadow:0 12px 30px -18px color-mix(in srgb,var(--ink) 50%,transparent);white-space:nowrap
}
.tela-selo i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.selo-ia{right:24px;top:-16px}
.selo-mapa{left:-10px;top:82px}
.mov .telas-palco .cel,.mov .tela-selo{opacity:0;translate:0 16px;transition:opacity .8s var(--suave),translate 1s var(--expo)}
.mov .hero-app.visto .cel,.mov .hero-app.visto .tela-selo{opacity:1;translate:0 0}
.mov .hero-app.visto .cel--tras{opacity:.96;transition-delay:.15s}
.mov .hero-app.visto .selo-ia{transition-delay:.5s}
.mov .hero-app.visto .selo-mapa{transition-delay:.65s}

/* casos: a pergunta digitada vira um balao em cima da tela, e o desfecho fica embaixo */
.caso-palco{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.caso-palco .cel{width:min(250px,68vw)}
.caso-pergunta{
  align-self:center;max-width:100%;min-height:2.6em;margin:0;padding:10px 16px;border-radius:16px 16px 4px 16px;
  background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;border:1px solid var(--line)
}
.caso-prompt{color:var(--accent-texto,var(--accent))}
.caso-fim{
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border-radius:999px;font-size:13px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line)
}
.caso-fim span{color:var(--accent-texto,var(--accent))}
.janela{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 40px 80px -50px color-mix(in srgb,var(--ink) 55%,transparent)}
.janela-barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line)}
.janela-barra i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.janela-barra span{flex:1;text-align:center;font-size:11px;color:var(--text-3);margin-right:30px}
.janela-tela img{width:100%;height:auto;aspect-ratio:1280/800}

@media(max-width:1050px){
  .hero-app .app-aviso{text-align:center}
}
@media(max-width:760px){
  .telas-palco{height:440px;max-width:360px}
  .telas-palco .cel{width:196px}
  .cel--frente{right:4px}
  .cel--tras{left:4px;top:44px;width:178px !important}
  .cel{border-radius:32px;padding:5px}
  .cel-tela{border-radius:27px}
  .selo-ia{right:10px;top:-14px}
  .selo-mapa{left:-4px;top:62px}
  .tela-selo{font-size:11px;padding:6px 10px}
  /* no celular o painel inteiro ficaria ilegivel: mostra so o miolo, onde esta o briefing */
  .janela-tela{aspect-ratio:5/4;overflow:hidden}
  .janela-tela img{width:175%;max-width:none;margin-left:-31.5%}
}
@media(prefers-reduced-motion:reduce){
  .mov .telas-palco .cel,.mov .tela-selo{opacity:1;translate:none;transition:none}
}

/* ============================================================
   A abertura animada (15/10/2026, pedido do dono)
   ------------------------------------------------------------
   Na tela vazia de conversa do app (o circulo e o campo de verdade),
   historia.js digita a pergunta no campo, sobe o balao e a Tryzen
   responde digitando. As medidas sao as da tela (390 de largura),
   escritas em cqw pra acompanhar o tamanho do celular. No mapa da
   corrida, o percurso se desenha em laco e o ponto chega no fim.
   ============================================================ */
.cv-msgs{
  position:absolute;left:0;right:0;top:7.6%;height:73%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2.6cqw;
  padding:0 5.6cqw 4cqw;background:#fff;opacity:0;transition:opacity .45s ease;
  font-family:var(--sans);font-size:4.1cqw;line-height:1.45;color:#1d1d1f;overflow:hidden
}
.cv-msgs.on{opacity:1}
.cv-campo{position:absolute;left:8.6%;top:82.3%;width:62%;height:4.2%;background:#f2f2f7;
  display:flex;align-items:center;font-family:var(--sans);font-size:4.1cqw;color:#1d1d1f;opacity:0;transition:opacity .2s}
.cv-campo.on{opacity:1}
.cv-digita{white-space:nowrap;overflow:hidden;text-overflow:clip}
.cv-digita:after,.cv-ia-txt.digitando:after{content:'';display:inline-block;width:.5cqw;height:4.2cqw;margin-left:.4cqw;vertical-align:-.7cqw;background:#24913E;animation:cursor .9s steps(1) infinite}
.cv-voce{align-self:flex-end;font-size:3.1cqw;color:#86868b;margin-bottom:-1.4cqw}
.cv-eu{align-self:flex-end;max-width:82%;padding:3cqw 3.8cqw;border-radius:4.4cqw 4.4cqw 1.2cqw 4.4cqw;background:#E6F8EB}
.cv-quem{display:flex;align-items:center;gap:1.4cqw;font-size:3.1cqw;color:#86868b;margin-bottom:-1.4cqw}
.cv-quem img{width:2.6cqw;height:auto}
.cv-pensa{display:inline-flex;gap:1cqw;padding:3.4cqw 3.8cqw;border-radius:4.4cqw;background:#F2F2F7;align-self:flex-start}
.cv-pensa i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#86868b;animation:cv-pula 1s ease-in-out infinite}
.cv-pensa i:nth-child(2){animation-delay:.15s}.cv-pensa i:nth-child(3){animation-delay:.3s}
@keyframes cv-pula{40%{transform:translateY(-1cqw);opacity:.5}}
.cv-ia{align-self:flex-start;max-width:86%;padding:3cqw 3.8cqw;border-radius:4.4cqw 4.4cqw 4.4cqw 1.2cqw;background:#F2F2F7}
.cv-ia ul{margin:1.6cqw 0;padding:0;list-style:none}
.cv-ia li{position:relative;padding-left:3.4cqw;display:none}
.cv-ia li.on{display:block;animation:cv-item .45s cubic-bezier(.22,1,.36,1)}
@keyframes cv-item{from{opacity:0;transform:translateY(1cqw)}}
.cv-ia ul:not(:has(li.on)){margin:0}
.cv-ia li:before{content:'';position:absolute;left:.4cqw;top:2.6cqw;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#30D158}
.cv-chega{opacity:0;transform:translateY(2cqw);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.cv-chega.on{opacity:1;transform:none}
[data-tema="escuro"] .cv-msgs{background:#1E1E1D;color:#F2EFE8}
[data-tema="escuro"] .cv-campo{background:#292927;color:#F2EFE8}
[data-tema="escuro"] .cv-eu{background:#1F2F23}
[data-tema="escuro"] .cv-ia,[data-tema="escuro"] .cv-pensa{background:#292927}
[data-tema="escuro"] .cv-digita:after,[data-tema="escuro"] .cv-ia-txt.digitando:after{background:#30D158}

/* o percurso no mapa da corrida: desenha, segura, recomeca */
#i-mapa .m-rota,#i-mapa .m-rota-borda{stroke-dasharray:1;stroke-dashoffset:1;animation:m-percurso 9s cubic-bezier(.45,0,.2,1) infinite}
#i-mapa .m-ponto{animation:m-chega 9s ease infinite}
@keyframes m-percurso{0%{stroke-dashoffset:1}38%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes m-chega{0%,34%{opacity:0}40%,88%{opacity:1}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  #i-mapa .m-rota,#i-mapa .m-rota-borda{stroke-dashoffset:0;animation:none}
  #i-mapa .m-ponto{animation:none;opacity:1}
}
@keyframes cursor{50%{opacity:0}}

/* Desenho exterior da abertura: um percurso que revela o primeiro celular. */
.telas-palco{isolation:isolate}
.cel-cenario{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}
.cenario-contornos{stroke:var(--text-2);stroke-width:1;opacity:.16}
.cenario-percurso{stroke:var(--accent-texto);stroke-width:2;opacity:.55}
.cenario-estrela,.cenario-passos{stroke:var(--accent-texto);stroke-width:1.5;opacity:.65}
.cenario-origem,.cenario-destino{fill:var(--bg);stroke:var(--accent-texto);stroke-width:2}
.mov .cel-cenario{opacity:0;transform:translateY(18px) scale(.94);transition:opacity 1s ease,transform 1.8s cubic-bezier(.16,1,.3,1)}
.mov .hero-app.visto .cel-cenario{opacity:1;transform:none}
.mov .hero-app.visto .cenario-percurso{animation:cenario-tracar 2.6s .25s cubic-bezier(.65,0,.25,1) both}
.mov .hero-app.visto .cenario-contornos{animation:cenario-revelar 1.8s .4s both}
.mov .hero-app.visto .cenario-estrela{animation:cenario-revelar 1.2s 1.5s both}
.mov .hero-app.visto .cel--frente{animation:celular-revelar 1.5s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes cenario-tracar{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:.55}}
@keyframes cenario-revelar{from{opacity:0}to{opacity:.18}}
@keyframes celular-revelar{from{opacity:0;transform:translate(12px,26px) rotate(3deg) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cel-cenario,.cel-cenario *,.hero-app.visto .cel--frente{animation:none!important;transition:none!important;transform:none!important}.cel-cenario{opacity:1}}

/* Landing no mesmo dark do Admin; identidade em escala grande atras do hero. */
:root[data-tema="escuro"]{--bg:#141414;--bg-elev:#191919;--surface:#1F1F1F;--surface-2:#252525;--border:#2B2B2B;--border-soft:#202020}
.cel-cenario--marca{inset:-105px -20px auto auto;width:145%;height:800px;max-width:none}
.cenario-marca-fundo{fill:var(--accent);opacity:.055;stroke:none}
.cenario-marca-traco{stroke:var(--accent-texto);stroke-width:1.5;opacity:.42;vector-effect:non-scaling-stroke}
.mov .hero-app.visto .cenario-marca-traco{animation:marca-surge 3.4s .15s cubic-bezier(.4,0,.2,1) both}
@keyframes marca-surge{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:.42}}
.evolucao-relevo{stroke:var(--text-2);stroke-width:1;opacity:.13}
.evolucao-sombra,.evolucao-rota{fill:none;stroke:var(--accent-texto);stroke-linecap:round;stroke-linejoin:round}
.evolucao-sombra{stroke-width:16;opacity:.08}
.evolucao-rota{stroke-width:3.5}
.evolucao-marcos circle{fill:var(--bg);stroke:var(--accent-texto);stroke-width:2.5}
.evolucao-legendas{fill:var(--text-2);font:500 11px var(--font)}
.evolucao-pulso{fill:var(--accent);opacity:.13;transform-box:fill-box;transform-origin:center}
.mov .hero-app.visto .evolucao-rota{animation:evolucao-percurso 3s .6s ease both}
.mov .hero-app.visto .evolucao-pulso{animation:evolucao-respira 2.8s ease-in-out 3}
@keyframes evolucao-percurso{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes evolucao-respira{50%{transform:scale(1.6);opacity:.04}}
@media(max-width:760px){.cel-cenario--marca{height:590px;top:-65px;right:0;width:130%}}
@media(prefers-reduced-motion:reduce){.cel-cenario--marca *,.mapa-evolucao *{animation:none!important}}

.mapa-evolucao{stroke:none}.evolucao-legendas,.evolucao-pulso{stroke:none}

/* A marca termina inteira dentro do palco, com pontas limpas. */
.telas-palco{height:620px}
.cel-cenario--marca{height:720px;top:-120px}
.mov .hero-app.visto .evolucao-rota{animation:none}
.evolucao-viajante{fill:var(--accent);stroke:var(--bg);stroke-width:2;filter:drop-shadow(0 0 4px var(--accent))}
.ia-aura{position:absolute;left:13%;top:20%;width:74%;height:42%;display:grid;place-items:center;background:var(--bg);opacity:1;transition:opacity .5s;pointer-events:none}
.ia-aura i{position:absolute;width:83%;aspect-ratio:1;border-radius:48% 52% 44% 56%;border:1px solid var(--accent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--accent) 12%,transparent);opacity:.55}
.ia-aura i:nth-child(2){width:75%;border-radius:43% 57% 55% 45%;opacity:.35}
.ia-aura i:nth-child(3){width:66%;opacity:.18}
.ia-aura span{width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.cel-tela:has(.cv-msgs.on) .ia-aura{opacity:0}
.mov .hero-motion-active .ia-aura i{animation:ia-orbitar 6s linear infinite,ia-respirar 3s ease-in-out infinite}
.mov .hero-motion-active .ia-aura i:nth-child(2){animation-direction:reverse;animation-duration:9s,4s}
.mov .hero-motion-active .ia-aura i:nth-child(3){animation-duration:12s,5s}
.cv-quem:after{content:'';width:1.3cqw;height:1.3cqw;background:var(--accent);border-radius:50%}
.mov .cv-quem.on:after{animation:ia-respirar 1.8s ease-in-out infinite}
@keyframes ia-orbitar{to{rotate:360deg}}
@keyframes ia-respirar{50%{scale:1.06;opacity:.8}}
@media(max-width:760px){.telas-palco{height:490px}.cel-cenario--marca{height:550px;top:-70px}}
@media(prefers-reduced-motion:reduce){.ia-aura *,.cv-quem:after{animation:none!important}.evolucao-viajante{display:none}}

/* A aura se integra ao fundo da captura original do app. */
.ia-aura{background:#fff}
[data-tema="escuro"] .ia-aura{background:#1E1E1D}

/* Orbitas amplas e iluminacao verde, seguindo a referencia da demonstracao. */
.caso-palco{isolation:isolate}
.caso-orbitas{position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;translate:-50% -50%;width:600px;max-width:calc(100vw - 24px);height:auto;aspect-ratio:1;overflow:visible;background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);border-radius:50%;stroke:var(--accent-texto);stroke-width:.8}
.caso-orbitas circle{opacity:.14;vector-effect:non-scaling-stroke}
.caso-orbitas circle:nth-child(2){opacity:.19}
.caso-orbitas circle:nth-child(3){opacity:.24}
.caso-orbitas circle:nth-child(4){opacity:.16}
.cel,.janela,.phone,.dashboard{box-shadow:0 24px 70px -32px color-mix(in srgb,var(--accent) 38%,transparent),0 0 42px -24px color-mix(in srgb,var(--accent) 26%,transparent)}
.tela-selo{box-shadow:0 12px 30px -18px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-tema="claro"] .caso-orbitas{background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 68%)}
.mov .caso:not([hidden]) .caso-orbitas{animation:orbitas-entrada 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes orbitas-entrada{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
@media(max-width:760px){.caso-orbitas{width:510px}}
@media(prefers-reduced-motion:reduce){.caso-orbitas{animation:none!important}}