@charset "UTF-8";
/* =========================================================
   FitPro ERP — Landing Page v2
   components.css — hero, ecossistema, kiosk, phones,
   charts, dashboard, fluxo, CTA
   ========================================================= */

/* ---------- HERO (mobile: tudo centralizado) ---------- */
.hero{
  padding-block:clamp(48px,7vw,104px) clamp(56px,8vw,128px);
}
.hero__inner{display:grid;gap:var(--space-lg)}
.hero__inner > .btn{justify-self:center}
.hero__copy{min-width:0;text-align:center;justify-items:center}
.hero__copy .label{justify-content:center}
.hero__title{
  font-size:var(--fs-hero);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero__sub{
  margin-top:var(--space-sm);
  max-width:38ch;
  margin-inline:auto;
  font-size:var(--fs-lead);
  color:var(--text-mute);
}
.hero__tagline{
  margin-top:var(--space-md);
  text-align:center;
  font-size:var(--fs-label);
  font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--text-mute-2);
}
.hero__eco{display:grid;gap:var(--space-md);justify-items:center}

/* ---------- ECOSSISTEMA ---------- */
.eco{position:relative;width:100%}
.eco__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-sm);
}
.product-card{
  position:relative;
  display:grid;gap:6px;
  justify-items:center;align-content:center;text-align:center;
  padding:clamp(18px,3.6vw,28px) clamp(14px,3vw,24px);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(83,244,61,.42);
  box-shadow:var(--glow);
}
.product-card__icon{
  width:clamp(26px,5vw,32px);height:clamp(26px,5vw,32px);
  display:grid;place-items:center;margin-bottom:2px;
  color:var(--green);
}
.product-card__icon svg{width:100%;height:100%}
.product-card h3{
  font-size:clamp(1rem,2.4vw,1.25rem);
  font-weight:700;letter-spacing:-.025em;
}
.product-card p{
  max-width:22ch;
  font-size:clamp(.8rem,1.8vw,.92rem);
  line-height:1.45;color:var(--text-mute);
}

/* núcleo central + conectores */
.eco__lines{display:none}
/* núcleo central: só o logo, sem círculo */
.eco__core{
  grid-column:span 2;
  display:flex;justify-content:center;
  margin-top:var(--space-sm);
}
.eco__core-mark{
  display:block;
  position:relative;
}
.eco__core-mark img{
  display:block;
  width:auto;
  height:clamp(48px,9.2vw,70px);
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(83,244,61,.45));
}

/* ---------- TOTEM ---------- */
.totem{
  position:relative;
  margin:0;
  display:grid;
  place-items:center;
  justify-items:center;
}
.totem::before{
  content:"";position:absolute;z-index:-1;
  width:min(120%,620px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(83,244,61,.16) 0%, rgba(83,244,61,.05) 42%, transparent 70%);
  filter:blur(14px);
  pointer-events:none;
}
.totem picture{display:block;line-height:0}
.totem img{
  width:min(100%,330px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
}
@media (min-width:768px){
  .totem img{width:auto;height:clamp(380px,58vh,600px);max-width:100%}
}

/* etapas */
.steps{display:grid;gap:var(--space-sm);margin-top:var(--space-lg);counter-reset:step}
.step{
  position:relative;
  display:flex;align-items:flex-start;gap:var(--space-sm);
  padding:clamp(14px,2.6vw,20px);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.step:hover{transform:translateX(4px);border-color:rgba(83,244,61,.4);background:rgba(83,244,61,.05)}
.step__num{
  font-size:.86rem;font-weight:700;letter-spacing:.08em;
  color:var(--green);
  padding-top:2px;min-width:2.2ch;
}
.step__ic{
  flex:0 0 auto;
  width:clamp(38px,4.4vw,44px);height:clamp(38px,4.4vw,44px);
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(83,244,61,.10);
  color:var(--green);
  box-shadow:inset 0 0 0 1px rgba(83,244,61,.22);
}
.step__ic .material-symbols-rounded{
  font-size:clamp(20px,2.4vw,24px);
  line-height:1;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
}
.step__body{min-width:0}
.step h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.step p{color:var(--text-mute);font-size:.94rem}

/* ---------- FEATURES (App Aluno) ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.feature{
  padding:clamp(14px,2.8vw,20px);
  border:1px solid var(--line-light);
  border-radius:var(--r-md);
  background:var(--light-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(11,17,19,.5);border-color:rgba(31,122,42,.35)}
.feature__ic{
  width:38px;height:38px;display:grid;place-items:center;margin-bottom:10px;
  border-radius:12px;background:rgba(31,122,42,.10);color:var(--green-on-light);
}
.feature__ic svg{width:20px;height:20px}
.feature h3{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--text-dark)}
.feature p{font-size:.86rem;color:var(--text-dark-mute);line-height:1.4}

/* ---------- PHONE MOCKUPS ---------- */
.phones{
  display:flex;
  gap:clamp(16px,3vw,32px);
  align-items:flex-start;
}
.phones--scroll{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px var(--space-sm) var(--space-md);
  margin-inline:calc(var(--space-sm) * -1);
  scrollbar-width:thin;
  scrollbar-color:rgba(83,244,61,.4) transparent;
}
.phones--scroll .phone{scroll-snap-align:center}
.swipe-hint{
  display:block;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dark-mute);margin-top:var(--space-sm);
}

.phone{flex:0 0 auto;width:min(74vw,264px);margin:0}
.phone--hero{width:min(80vw,290px)}
.phone figcaption{
  margin-top:var(--space-sm);
  text-align:center;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute-2);
}
.section--light .phone figcaption{color:var(--text-dark-mute)}
.phone__frame{
  position:relative;
  padding:6px;
  border-radius:34px;
  background:linear-gradient(180deg,#2A3538,#111819);
  box-shadow:var(--shadow-3);
  aspect-ratio:9/18.6;
}
.phone--dark .phone__frame{background:linear-gradient(180deg,#212C2F,#0D1416)}
.phone__notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:26%;height:5px;border-radius:99px;background:rgba(0,0,0,.45);z-index:2;
}
.phone__screen{
  height:100%;
  border-radius:28px;
  padding:clamp(14px,3.4vw,20px) clamp(12px,2.8vw,16px) 8px;
  display:flex;flex-direction:column;gap:clamp(8px,1.8vw,12px);
  overflow:hidden;
}
.phone__screen > *{flex:0 0 auto}
.phone__screen--light{background:linear-gradient(180deg,#FFFFFF,#EFF2F3);color:var(--text-dark)}
.phone__screen--dark{background:linear-gradient(180deg,#0E1618,#080D0E);color:var(--text)}

.app-top{display:grid;gap:2px}
.app-top__hi{font-size:.72rem;color:var(--text-dark-mute)}
.app-top__title{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.app-scr-title{font-size:1rem;font-weight:700;letter-spacing:-.02em}

.app-ring{position:relative;display:grid;place-items:center;margin-block:2px}
.app-ring svg{width:74%;max-width:120px;height:auto}
.ring-bg{fill:none;stroke:#E2E7E8;stroke-width:9}
.ring-fg{
  fill:none;stroke:var(--green-deep);stroke-width:9;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  stroke-dashoffset:28;
}
.app-ring__val{
  position:absolute;display:grid;justify-items:center;
  font-size:.72rem;color:var(--text-dark-mute);
}
.app-ring__val b{font-size:1.5rem;line-height:1;color:var(--text-dark);letter-spacing:-.03em}

.app-rows{display:grid;gap:6px}
.app-rows li{
  display:grid;gap:1px;
  padding:9px 10px;border-radius:12px;background:#fff;
  border:1px solid var(--line-light);
  font-size:.66rem;line-height:1.35;color:var(--text-dark-mute);
}
.app-rows b{font-size:.74rem;color:var(--text-dark);font-weight:600;white-space:nowrap}
.app-rows b.ok{color:var(--green-deep)}

.app-bar{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-around;
  padding:9px 0 4px;border-top:1px solid var(--line-light);
}
.app-bar i{width:16px;height:16px;border-radius:5px;background:#D8DEDF}
.app-bar i:first-child{background:var(--green-deep);opacity:.85}
.app-bar--dark{border-top-color:var(--line-dark)}
.app-bar--dark i{background:rgba(255,255,255,.16)}

/* tabs dentro do app */
.tabs{
  display:flex;gap:4px;padding:3px;
  border-radius:99px;background:rgba(11,17,19,.06);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.phone__screen--dark .tabs{background:rgba(255,255,255,.06)}
.tabs button{
  flex:0 0 auto;white-space:nowrap;
  min-height:30px;padding:4px 9px;border-radius:99px;
  font-size:.66rem;font-weight:600;
  color:var(--text-dark-mute);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.phone__screen--dark .tabs button{color:var(--text-mute-2)}
.tabs button.is-active{background:var(--green-deep);color:#fff}
.phone__screen--dark .tabs button.is-active{background:var(--green);color:var(--green-ink)}

/* gráfico */
.chart{display:grid;gap:8px}
.chart__stats{display:flex;gap:clamp(10px,3vw,20px)}
.chart__stats > div{
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;
  font-size:.66rem;color:var(--text-dark-mute);
}
.chart__stats b{font-size:1.15rem;font-weight:700;color:var(--text-dark);letter-spacing:-.03em}
.chart__stats small{font-size:.6rem}
.chart__svg{width:100%;height:auto;overflow:visible}
.chart__grid line{stroke:rgba(11,17,19,.09);stroke-width:1}
.chart__grid--dark line{stroke:rgba(11,17,19,.12)}
.chart__line{
  fill:none;stroke:var(--green-deep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.4s var(--ease);
}
.chart__line--dark{stroke:var(--green-deep)}
.is-in .chart__line{stroke-dashoffset:0}
.chart__meta circle{fill:var(--green-deep)}
.chart__meta .is-last{fill:var(--green);stroke:#fff;stroke-width:1.5}
.chart__axis{
  display:flex;justify-content:space-between;
  font-size:.6rem;color:var(--text-dark-mute);
}
.chart__axis--dark{color:var(--text-dark-mute)}

.progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px;border-radius:12px;background:#fff;border:1px solid var(--line-light);
  font-size:.72rem;color:var(--text-dark-mute);
}
.progress-card b{color:var(--text-dark);font-size:.8rem}
.bar{
  display:block;position:relative;
  width:52px;height:6px;border-radius:99px;
  background:#E2E7E8;overflow:hidden;margin-right:6px;
}
.bar::after{
  content:"";position:absolute;inset:0;width:var(--p);
  background:var(--green-deep);border-radius:99px;
}

/* bioimpedância */
.bio{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bio__item{
  padding:10px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
}
.bio__item b{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.bio__item span{font-size:.7rem;color:var(--green);margin-left:2px}
.bio__item small{display:block;font-size:.6rem;color:var(--text-mute-2)}
.bio__title{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute-2)}

/* thumbs */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{
  aspect-ratio:3/4;border-radius:10px;
  background:
    radial-gradient(45% 34% at 50% 22%, rgba(83,244,61,.32), transparent 70%),
    linear-gradient(180deg,#1A2427,#0C1214);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
.thumb::after{
  content:"";position:absolute;left:50%;bottom:-8%;
  width:46%;height:66%;transform:translateX(-50%);
  border-radius:50% 50% 18% 18%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
}
.thumb--side::after{left:46%;width:40%}
.thumb--back::after{left:50%}
.thumbs figcaption{
  margin-top:5px;text-align:center;
  font-size:.62rem;color:var(--text-mute-2);
}
.thumbs--wide figcaption{color:var(--text-dark-mute);font-size:.75rem}

/* lista de alunos */
.search{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  color:var(--text-mute-2);
}
.search input{
  border:0;background:none;width:100%;min-width:0;
  font-size:.78rem;color:var(--text);
}
.search input::placeholder{color:var(--text-mute-2)}
.search input:focus{outline:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;min-height:30px;padding:5px 11px;
  border-radius:99px;border:1px solid var(--line-dark);
  font-size:.7rem;font-weight:600;color:var(--text-mute);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip.is-active{background:rgba(83,244,61,.14);border-color:rgba(83,244,61,.45);color:var(--green)}

.students{display:grid;gap:5px}
.students li{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.students li:hover{background:rgba(83,244,61,.08);border-color:rgba(83,244,61,.3)}
.avatar{
  width:30px;height:30px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,rgba(83,244,61,.35),rgba(83,244,61,.08));
  color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.02em;
}
.avatar--lg{width:40px;height:40px;font-size:.8rem}
.students li > div{display:grid;gap:1px;min-width:0}
.students b{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.students small{font-size:.64rem;color:var(--text-mute-2)}
.dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;margin-left:auto}
.dot--ok{background:var(--green);box-shadow:0 0 8px rgba(83,244,61,.6)}
.dot--warn{background:#F5A524}
.dot--muted{background:rgba(255,255,255,.28)}

.profile__head{display:flex;align-items:center;gap:10px}
.profile__head b{font-size:.86rem;font-weight:700;display:block}
.profile__head small{font-size:.64rem;color:var(--text-mute-2)}
.menu-list{display:grid;gap:6px}
.menu-list li{
  display:flex;align-items:center;gap:9px;
  padding:10px;border-radius:12px;
  background:rgba(255,255,255,.04);
  font-size:.76rem;
  transition:background .25s var(--ease);
}
.menu-list li:hover{background:rgba(83,244,61,.1)}
.menu-list__ic{display:grid;place-items:center;color:var(--green);flex:0 0 auto}
.menu-list__ic svg{width:16px;height:16px}
.chev{margin-left:auto;color:var(--text-mute-2);font-size:1rem;line-height:1}

.phones--stack{flex-wrap:wrap;justify-content:center}
.phones--stack .phone{width:min(72vw,230px)}

/* ---------- DASHBOARD (avaliação completa) ---------- */
.dash{display:grid;gap:var(--space-md)}
.dash__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
.metric{
  padding:clamp(16px,3vw,24px);
  border:1px solid var(--line-light);
  border-radius:var(--r-lg);
  background:var(--light-2);
  display:grid;gap:6px;align-content:start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.metric:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(11,17,19,.55)}
.metric--hero{
  background:linear-gradient(160deg,#0E1618,#0A0F10);
  border-color:rgba(83,244,61,.28);
  color:var(--text);
}
.metric__label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dark-mute)}
.metric--hero .metric__label{color:var(--text-mute-2)}
.metric__value{
  display:flex;align-items:baseline;gap:4px;
  font-size:clamp(1.7rem,5vw,2.6rem);
  font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--text-dark);
}
.metric--hero .metric__value{color:var(--text)}
.metric__value small{font-size:.4em;font-weight:600;color:var(--text-dark-mute)}
.metric--hero .metric__value small{color:var(--green)}
.metric__spark svg{width:100%;height:34px}
.metric__spark path{fill:none;stroke:var(--green);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.metric__bar{height:6px;border-radius:99px;background:#E6EAEB;overflow:hidden}
.metric__bar span{display:block;width:var(--p);height:100%;border-radius:99px;background:var(--green-deep)}
.metric__delta{font-size:.75rem;color:var(--text-dark-mute)}
.metric__delta.is-down{color:var(--green-deep)}
.metric__delta.is-up{color:var(--green-deep)}
.metric--hero .metric__delta{color:var(--text-mute-2)}

.dash__cards{display:grid;gap:var(--space-sm)}
.panel{
  padding:clamp(16px,3vw,26px);
  border:1px solid var(--line-light);
  border-radius:var(--r-lg);
  background:var(--light-2);
  display:grid;gap:var(--space-sm);align-content:start;
}
.panel__title{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--text-dark)}
.measures{display:grid;gap:8px}
.measures li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-radius:12px;
  background:#F4F6F7;border:1px solid var(--line-light);
  font-size:.9rem;color:var(--text-dark-mute);
}
.measures b{color:var(--text-dark);font-weight:700;letter-spacing:-.02em}
.panel--photos .thumb{box-shadow:inset 0 0 0 1px var(--line-light)}

/* ---------- FLUXO ---------- */
.flow{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(56px,1fr);
  align-items:center;
  justify-items:center;
  gap:clamp(2px,1vw,12px);
  margin-block:var(--space-lg);
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent);
}
.flow::-webkit-scrollbar{display:none}
.flow__item{display:grid;justify-items:center;gap:8px;text-align:center}
.flow__ic{
  width:clamp(46px,10vw,60px);aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(83,244,61,.08);
  border:1px solid rgba(83,244,61,.3);
  color:var(--green);
  box-shadow:0 0 24px -10px rgba(83,244,61,.5);
}
.flow__ic svg{width:52%;height:52%}
.flow__item b{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--text-soft)}
.flow__arrow{
  width:clamp(10px,3vw,34px);height:1px;position:relative;
  background:linear-gradient(90deg,rgba(83,244,61,.15),rgba(83,244,61,.7));
}
.flow__arrow::after{
  content:"";position:absolute;right:0;top:50%;
  width:6px;height:6px;
  border-top:1px solid var(--green);border-right:1px solid var(--green);
  transform:translateY(-50%) rotate(45deg);
}

/* ---------- CTA ---------- */
.cta{
  margin-top:var(--space-lg);
  padding:clamp(24px,5vw,56px);
  border-radius:var(--r-xl);
  border:1px solid rgba(83,244,61,.22);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(83,244,61,.14), transparent 55%),
    linear-gradient(160deg,#101A19,#0A1012);
  display:grid;gap:var(--space-md);
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;
  right:-12%;top:-40%;
  width:min(60%,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(83,244,61,.16),transparent 65%);
  filter:blur(30px);pointer-events:none;
}
.cta__copy{position:relative;z-index:1}
.cta__title{
  font-size:clamp(1.7rem,5.4vw,3.2rem);
  font-weight:800;line-height:1.05;letter-spacing:-.04em;
  text-wrap:balance;
}
.cta__lead{margin-top:var(--space-sm);max-width:44ch;color:var(--text-mute)}
.cta__actions{
  position:relative;z-index:1;
  display:grid;gap:var(--space-sm);align-content:center;
}

/* ---------- VARIANTES / AJUSTES FINOS ---------- */
.btn--primary{background:linear-gradient(180deg,var(--green-2),var(--green));color:var(--green-ink)}
.phone .btn{border-radius:8px}
.tabs--tiny button{font-size:.56rem;min-height:26px;padding:3px 7px;letter-spacing:-.01em}
.chart--wide .chart__svg{width:100%;height:auto}
.chart__area{transition:d .4s var(--ease)}
.thumb--front{background:
  radial-gradient(45% 34% at 50% 20%, rgba(83,244,61,.36), transparent 70%),
  linear-gradient(180deg,#1A2427,#0C1214)}

/* ---------- RESPONSIVO PROGRESSIVO (componentes) ---------- */
@media (max-width:479px){
  /* fluxo compacto: os 5 passos cabem sem rolagem */
  .flow{grid-auto-columns:minmax(0,1fr);gap:2px}
  .flow__arrow{width:8px}
  .flow__ic{width:clamp(38px,11vw,46px)}
  .flow__item b{font-size:.62rem;white-space:nowrap}
}

@media (min-width:480px){
  .phones--scroll{scroll-padding-inline:var(--space-md)}
}

@media (min-width:768px){
  .eco__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones--stack{flex-wrap:nowrap;justify-content:flex-start}
  .cta__actions{grid-auto-flow:column;justify-content:start;gap:var(--space-sm)}
  .cta__actions .btn--ghost{background:rgba(255,255,255,.04)}
}

@media (min-width:1024px){

  /* mockups do App Aluno continuam em trilho rolável até 1280px
     (a coluna é estreita nesse intervalo — encolher deixaria o app ilegível) */
  .phones--scroll{max-width:860px;width:100%}
  .phones--scroll .phone{width:min(55%,228px)}
  .phones--scroll .phone--hero{width:min(62%,248px)}

  .phones--stack{width:100%;max-width:660px;flex-wrap:nowrap;justify-content:flex-start}
  .phones--stack .phone{flex:1 1 0;min-width:0;width:auto;max-width:300px}
  .phones--stack .phone--profile{max-width:320px}

  .feature-grid{margin-top:var(--space-xl)}
  .dash{gap:var(--space-lg)}
  .dash__grid{grid-template-columns:repeat(4,1fr)}
  .dash__cards{grid-template-columns:repeat(2,1fr)}
  .panel--photos{grid-column:span 2}
  .metric--hero{grid-column:span 1}

  /* CTA final em duas colunas no desktop */
  .cta{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:center;
    column-gap:var(--space-lg);
  }
  .cta__actions{grid-auto-flow:row;grid-template-columns:1fr}

  /* hub-and-spoke: grid 3x3 com conectores diagonais em SVG (decoracao) */
  .eco__grid{
    grid-template-columns:minmax(0,1fr) clamp(30px,5vw,86px) minmax(0,1fr);
    grid-template-areas:
      "c1 . c2"
      ". core ."
      "c3 . c4";
    gap:clamp(10px,1.6vw,22px);
    align-items:center;
  }
  .product-card:nth-child(1){grid-area:1 / 1}
  .product-card:nth-child(2){grid-area:1 / 3}
  .product-card:nth-child(3){grid-area:3 / 1}
  .product-card:nth-child(4){grid-area:3 / 3}
  .eco__core{grid-area:2 / 2;margin-top:0}

  .eco__lines{
    display:block;position:absolute;inset:0;
    pointer-events:none;
  }
  .eco__wires{width:100%;height:100%;overflow:visible}
  .eco__wire{
    stroke:rgba(83,244,61,.62);stroke-width:1.5;
    vector-effect:non-scaling-stroke;
    stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.1s var(--ease);
  }
  .is-in .eco__wire{stroke-dashoffset:0}
  .eco__wire:nth-child(2){transition-delay:.12s}
  .eco__wire:nth-child(3){transition-delay:.24s}
  .eco__wire:nth-child(4){transition-delay:.36s}
}


@media (min-width:1536px){
}

@media (min-width:1280px){
  /* espaço real: os 3 smartphones viram composição estática */
  .phones--scroll{
    overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none;
  }
  .phones--scroll .phone{flex:1 1 0;min-width:0;width:auto;max-width:250px}
  .phones--scroll .phone--hero{max-width:276px}
  .swipe-hint{display:none}

  /* dashboard largo */
  .dash__cards{grid-template-columns:repeat(3,1fr)}
  .panel--photos{grid-column:span 1}
  .feature-grid{grid-template-columns:repeat(4,1fr)}
}
/* ==========================================================
   MOTION — entrada dos elementos conforme a rolagem
   ==========================================================
   Quem dispara é o IntersectionObserver do script.js: ao entrar na tela o
   elemento ganha .is-in. O atraso entre vizinhos (--rd) também vem de lá,
   calculado pelo que entrou junto, sem depender de atributo no HTML.

   Tudo fica sob .js: sem JavaScript nada começa invisível. E se o script.js
   não carregar, o <head> liga .reveal-off depois de 2,5 s e mostra tudo.

   Ao terminar a entrada o script tira estas classes do elemento. Enquanto
   ficavam, a transição daqui passava por cima da de hover dos botões e dos
   cartões, e ainda atrasava o hover. */

.js .reveal{
  opacity:0;
  transform:translate3d(0,30px,0);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1) var(--rd,0ms),
    transform .9s cubic-bezier(.16,1,.3,1) var(--rd,0ms),
    filter .9s cubic-bezier(.16,1,.3,1) var(--rd,0ms);
}

/* Títulos: sobem resolvendo o desfoque. */
.js .reveal--blur{
  transform:translate3d(0,36px,0);
  filter:blur(12px);
}

/* Cartões: sobem crescendo um pouco. */
.js .reveal--scale{
  transform:translate3d(0,26px,0) scale(.94);
}

/* Só aparece, sem deslocar. */
.js .reveal--fade{ transform:none; }

/* Entrada lateral só onde há duas colunas. No celular a coluna é uma só e o
   elemento sobe como os demais. */
@media (min-width:1024px){
  .js .reveal--left{ transform:translate3d(-44px,0,0); }
  .js .reveal--right{ transform:translate3d(44px,0,0); }
}

.js .reveal.is-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* Rede de segurança: script.js não carregou. */
.reveal-off .reveal{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

@media print{
  .js .reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* Quem pede menos movimento no sistema não recebe deslocamento, desfoque nem
   escala: o elemento só aparece, num esmaecer curto. */
@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal--blur,
  .js .reveal--left,
  .js .reveal--right,
  .js .reveal--scale{
    transform:none !important;
    filter:none !important;
    transition:opacity .45s ease var(--rd,0ms) !important;
  }
}
/* ---------- fonte ----------
   A tipografia agora e a Segoe UI, que ja vem no proprio Windows e no macOS
   recem. Antes era Inter auto-hospedada (assets/fonts/Inter.woff2) em primeiro
   lugar da pilha; remover a @font-face e o arquivo deixa de baixar 48 KB de
   fonte que o usuario ja tem instalado.

   Isso mantem o raciocemento do commit anterior: zero requisicao a terceiros.
   O Google nao e mais chamado para fonte de texto nem para icone — os icones
   sao SVG inline do repo oficial. */

/* ==========================================================
   TIPOGRAFIA E PROPORÇÃO — um sistema só
   ==========================================================
   Hierarquia do texto, do maior para o menor:

     título do hero     32 → 58 px   peso 600   caixa alta   entrelinha 1,06
     título de seção    24 → 36 px   peso 600   caixa alta   entrelinha 1,15
     chamada (kicker)   12,5 px      peso 600   caixa alta   espaçamento .22em
     texto de apoio     15,5–16,5 px peso 400   62% de branco
     título de cartão   13,5 px      peso 600   caixa alta   espaçamento .07em
     texto de cartão    13,8 px      entrelinha 1,55
     botão              13 px        peso 600   caixa alta   pílula

   Antes os títulos eram peso 800 com espaçamento negativo e iam de 32 a 62 px:
   o título ficava grande demais para o texto que o acompanha. Este bloco vem
   por último no arquivo de propósito, para valer sobre as camadas anteriores. */

:root{
  --fs-hero:clamp(2rem,5vw,3.625rem);
  --fs-h2:clamp(1.5rem,3.2vw,2.25rem);
  --fs-h3:.84375rem;
  --fs-lead:clamp(.96875rem,1.3vw,1.03125rem);
  --fs-body:1rem;
  --fs-label:.78125rem;
  --header-h:65px;
  --ink-mute:rgba(244,244,242,.62);
}
@media (min-width:768px){ :root{ --header-h:73px; } }

body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}

/* ---- títulos ---- */
.hero__title,
.section__title,
.cta__title{
  font-weight:600;
  text-transform:uppercase;
  text-wrap:balance;
}
.hero__title{
  font-size:var(--fs-hero);
  line-height:1.06;
  letter-spacing:.005em;
  max-width:15ch;
}
.section__title{
  font-size:var(--fs-h2);
  line-height:1.15;
  letter-spacing:.02em;
}
.cta__title{
  font-size:clamp(1.625rem,3.4vw,2.5rem);
  line-height:1.15;
  letter-spacing:.02em;
}

/* ---- chamadas ---- */
.label,
.hero__kicker{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.6;
}
.hero__kicker{ color:var(--green); }

/* ---- texto de apoio ---- */
.hero__sub,
.section__lead,
.cta__lead{
  font-size:var(--fs-lead);
  line-height:1.6;
}
.hero__sub{
  font-size:1.03125rem;
  color:var(--ink-mute);
  max-width:54ch;
}

/* ---- cartões ---- */
.step h3,
.feature h3{
  font-size:var(--fs-h3);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.35;
  margin-bottom:4px;
}
.step p,
.feature p{
  font-size:.8625rem;
  line-height:1.55;
}
.step__num{ font-weight:600; }

/* ---- botões: pílula, caixa alta ---- */
.btn{
  min-height:44px;
  padding:12px 24px;
  border-radius:999px;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  gap:9px;
}
.btn--primary{ background:var(--green); }
.btn--primary:hover{ background:var(--green-2); }
.btn:hover{ box-shadow:0 14px 34px -16px rgba(132,204,22,.6); }
.btn--ghost{ border-color:rgba(255,255,255,.16); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.45); box-shadow:none; }
.btn--sm{ min-height:40px; padding:10px 20px; font-size:.8125rem; }

/* ---- menu do celular e rodapé ---- */
.mobile-menu__list a{
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.acc summary{
  font-size:.71875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.acc a{ font-size:.84375rem; }
.footer__brand p{ font-size:.84375rem; }
.footer__bottom{ font-size:.75rem; }

/* ==========================================================
   HERO — ocupa a primeira tela
   ==========================================================
   Ordem de leitura: selo, chamada, título, apoio, botões, promessa e, no pé,
   a faixa com o que o produto entrega. O hero tem no mínimo a altura da tela
   menos o cabeçalho: a primeira tela é só ele, e a seção seguinte não aparece
   por baixo. svh é a altura com as barras do navegador do celular visíveis;
   vh fica antes como reserva para navegador antigo. */

.hero{
  padding-block:0;
  display:flex;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
}
.hero__inner{
  flex:1;
  display:flex;
  align-items:stretch;
  gap:0;
  padding-block:clamp(24px,4.5vh,64px) clamp(20px,3.5vh,54px);
}
.hero__copy{
  flex:1;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* auto em cima e na faixa do pé: se sobrar altura, o bloco fica no meio */
  margin:auto 0 18px;
  padding:8px 16px;
  border:1px solid rgba(132,204,22,.55);
  border-radius:999px;
  background:rgba(132,204,22,.09);
  color:var(--green);
  font-size:.71875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.6;
}
.hero__kicker{ margin:0 0 16px; }
.hero__title{ margin-top:0; }
.hero__sub{ margin-top:20px; margin-inline:0; }

.hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.hero__cta{
  margin-top:0;
  width:auto;
  justify-self:auto;
}

/* A promessa deixa de ser uma caixa: vira a linha de apoio abaixo dos botões. */
.hero__promise{
  display:block;
  margin:18px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  max-width:44ch;
  font-size:.84375rem;
  line-height:1.6;
  color:var(--ink-mute);
}
.hero__promise strong{
  font-weight:600;
  letter-spacing:0;
  color:#F4F4F2;
}

/* Faixa do pé: fica encostada no fim do hero, com uma distância mínima. */
.hero__features{
  margin:auto 0 0;
  padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
}
/* distância mínima entre a promessa e a faixa, quando o texto ocupa a tela */
.hero__promise{ margin-bottom:28px; }
.feature-chip{ gap:9px; }
.feature-chip__ic{ width:18px; height:18px; }
.feature-chip__label{
  font-size:.65625rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.45;
  color:var(--ink-mute);
}
.feature-chip:last-child{ grid-column:auto; }

/* Celular estreito: duas colunas quebrariam o rótulo mais longo em três
   linhas. Vira uma lista de uma coluna, um item por linha. */
@media (max-width:419px){
  .hero__features{ grid-template-columns:minmax(0,1fr); gap:9px; }
  .feature-chip__label br{ display:none; }
}

/* Tela larga: mesma hierarquia, composição centralizada. Os botões do hero
   continuam fora daqui, porque o cabeçalho já mostra "Agendar demonstração". */
@media (min-width:1024px){
  .hero__inner{ padding-block:clamp(56px,9vh,112px) clamp(40px,7vh,88px); }
  .hero__copy{ align-items:center; text-align:center; justify-content:center; }
  .hero__title{ max-width:18ch; }
  .hero__sub{ margin-inline:auto; }
  .hero__ctas{ display:none; }
  .hero__promise{ margin-top:28px; margin-bottom:56px; }
  .hero__features{
    margin-top:0;
    width:100%;
    max-width:960px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
  }
  .feature-chip__ic{ width:22px; height:22px; }
  .feature-chip__label{ font-size:.6875rem; }
}

/* ==========================================================
   CHAMADA FINAL — textura no fundo da seção, cartão liso
   ==========================================================
   O cartão tinha dois degradês verdes (um radial no canto e um círculo
   desfocado) sobre um degradê escuro. Saíram os três. O cartão agora é o
   preto liso do site, e a textura de desgaste, pó e riscos fica no fundo da
   seção, aparecendo em volta dele. A textura é um arquivo próprio, gerado por
   código (sem foto de terceiros): assets/grunge-secao.webp, com uma versão em
   pé para celular. */

#contato-final{
  background:#0B1113 url("assets/grunge-secao-800.webp") center / cover no-repeat;
}
@media (min-width:768px){
  #contato-final{ background-image:url("assets/grunge-secao.webp"); }
}

.cta{
  margin-top:0;
  padding:clamp(28px,5vw,64px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:#0B1113;
  row-gap:clamp(24px,3vw,40px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.cta::after{ content:none; }

/* marca verde na borda esquerda, na altura da chamada */
.cta::before{
  content:"";
  position:absolute;
  left:0;
  top:clamp(28px,5vw,64px);
  width:3px;
  height:clamp(44px,5vw,64px);
  background:var(--green);
}

.cta__copy .label{ margin-bottom:14px; }
.cta__title{ max-width:20ch; }
.cta__lead{
  margin-top:16px;
  max-width:46ch;
  color:var(--ink-mute);
}
.cta__actions{ gap:14px; }
.cta__actions .btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.22);
}
.cta__actions .btn--ghost:hover{ border-color:rgba(255,255,255,.5); }
@media (min-width:1024px){
  /* os botões não esticam pela coluna inteira */
  .cta__actions{ width:100%; max-width:380px; justify-self:end; }
}

/* ==========================================================
   ATLAS — seção da inteligência artificial
   ==========================================================
   Ocupa o lugar da antiga seção de integração. À esquerda o texto e os três
   pontos; à direita um exemplo de conversa, num painel escuro sobre o fundo
   claro. No celular a ordem é texto, conversa, pontos. */

.atlas{
  display:grid;
  gap:var(--space-lg);
  align-items:start;
}
.atlas__copy{ max-width:56ch; }
.atlas__points{ margin-top:0; }

/* passos sobre fundo claro (o estilo claro antigo era preso ao id da seção) */
#atlas .step{ background:rgba(11,17,19,.035); border-color:rgba(11,17,19,.12); }
#atlas .step:hover{ border-color:rgba(31,122,42,.45); background:rgba(31,122,42,.07); }
#atlas .step__num{ color:var(--green-on-light); }
#atlas .step__ic{ background:rgba(19,107,29,.12); color:var(--green-on-light); box-shadow:inset 0 0 0 1px rgba(31,122,42,.22); }
#atlas .step h3{ color:var(--text-dark); }
#atlas .step p{ color:var(--text-dark-mute); }

@media (min-width:1024px){
  .atlas{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-areas:"copy chat" "points chat";
    column-gap:clamp(40px,5vw,86px);
    row-gap:var(--space-md);
  }
  .atlas__copy{ grid-area:copy; }
  .atlas__points{ grid-area:points; }
  .chat{ grid-area:chat; align-self:center; }
}

/* ---- exemplo de conversa ---- */
.chat{
  margin:0;
  width:100%;
  max-width:560px;
  justify-self:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:#0B1113;
  color:#F4F4F2;
  box-shadow:0 40px 80px -48px rgba(11,17,19,.75);
  overflow:hidden;
}
.chat__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.chat__avatar{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--green);
  color:#0B1113;
  font-weight:700;
  font-size:1rem;
}
.chat__who{ display:grid; line-height:1.25; min-width:0; }
.chat__who strong{ font-size:.875rem; font-weight:600; letter-spacing:.14em; }
.chat__who span{ font-size:.75rem; color:rgba(244,244,242,.62); }
.chat__modes{
  margin-left:auto;
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:.65625rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(244,244,242,.62);
}
.chat__modes span{ padding:4px 10px; border-radius:999px; }
.chat__modes .is-on{ background:rgba(132,204,22,.16); color:var(--green); }

.chat__body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
}
.chat__msg{
  max-width:86%;
  padding:11px 15px;
  font-size:.875rem;
  line-height:1.5;
}
.chat__msg--user{
  align-self:flex-end;
  border-radius:16px 16px 4px 16px;
  background:rgba(255,255,255,.09);
}
.chat__msg--atlas{
  align-self:flex-start;
  border-radius:16px 16px 16px 4px;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(244,244,242,.82);
}
.chat__msg--atlas strong{ color:#F4F4F2; font-weight:600; }

.chat__confirm{
  align-self:flex-start;
  width:min(100%,340px);
  padding:16px;
  border:1px solid rgba(132,204,22,.40);
  border-radius:16px 16px 16px 4px;
  background:rgba(132,204,22,.07);
}
.chat__confirm-title{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--green);
}
.chat__confirm dl{ margin:12px 0 0; display:grid; gap:7px; }
.chat__confirm dl div{ display:flex; justify-content:space-between; gap:16px; font-size:.84375rem; }
.chat__confirm dt{
  font-size:.65625rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(244,244,242,.62);
  align-self:center;
}
.chat__confirm dd{ margin:0; text-align:right; }
.chat__actions{ display:flex; gap:8px; margin-top:14px; }
.chat__btn{
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.chat__btn--ok{ border-color:transparent; background:var(--green); color:#0B1113; }

.chat figcaption{
  padding:12px 20px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.71875rem;
  color:rgba(244,244,242,.48);
}

/* ==========================================================
   SEÇÕES COM FORMA PRÓPRIA
   ==========================================================
   Antes as quatro seções de valor eram a mesma coisa: texto à esquerda e uma
   pilha de cartões à direita. Agora cada uma mostra o assunto dela:

     recepção        a tela do totem, com o texto ao lado e os benefícios em lista
     retenção        cabeçalho centralizado, radar de frequência e a linha de três passos
     acompanhamento  gráfico de evolução num mosaico com os outros três pontos
     financeiro      comprovante de fechamento de caixa ao lado da lista

   Os números 01, 02, 03 ficaram só na retenção, que é a única sequência de
   fato (registra, avisa, chega ao professor). */

/* ---- lista simples: título e texto separados por um fio ---- */
.plain{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.plain li{
  padding:16px 0;
  border-top:1px solid var(--line-light);
}
.plain h3{
  font-size:var(--fs-h3);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--text-dark);
  margin-bottom:4px;
}
.plain p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--text-dark-mute);
}
.plain--dark li{ border-top-color:rgba(255,255,255,.14); }
.plain--dark h3{ color:#F4F4F2; }
.plain--dark p{ color:var(--ink-mute); }

/* legenda dos exemplos */
.tot figcaption,
.slip figcaption{
  margin-top:14px;
  font-size:.72rem;
  text-align:center;
}

/* ---------- 1. RECEPÇÃO ---------- */
.rcp{
  display:grid;
  gap:var(--space-lg);
  align-items:start;
}
.rcp__copy{ max-width:56ch; }
.rcp__list li:last-child{ border-bottom:1px solid var(--line-light); }

.tot{
  margin:0;
  justify-self:center;
  width:min(100%,320px);
  display:grid;
  justify-items:center;
}
.tot__screen{
  width:100%;
  padding:24px 18px 20px;
  border:8px solid #1B2528;
  border-radius:28px;
  background:#0B1113;
  color:#F4F4F2;
  box-shadow:0 44px 70px -44px rgba(11,17,19,.75);
}
.tot__brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.65625rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.tot__brand::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
}
.tot__hello{
  margin-top:22px;
  font-size:1.5rem;
  font-weight:600;
  line-height:1.15;
}
.tot__ask{
  margin-top:6px;
  font-size:.84rem;
  color:var(--ink-mute);
}
.tot__grid{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.tot__grid li{
  display:grid;
  gap:2px;
  padding:14px 12px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
}
.tot__ic{
  width:24px;
  height:24px;
  margin-bottom:10px;
  color:var(--green);
}
.tot__ic svg{ width:100%; height:100%; display:block; }
.tot__grid strong{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.tot__grid small{
  font-size:.72rem;
  color:var(--ink-mute);
}
.tot__grid .is-done{
  border-color:rgba(132,204,22,.5);
  background:rgba(132,204,22,.09);
}
.tot__grid .is-done small{ color:var(--green); }
.tot__neck{
  width:54px;
  height:42px;
  background:#1B2528;
}
.tot__base{
  width:176px;
  height:12px;
  border-radius:6px;
  background:#1B2528;
}
.tot figcaption{ color:var(--text-dark-mute); }

@media (min-width:1024px){
  .rcp{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    grid-template-areas:"totem copy" "totem list";
    column-gap:clamp(40px,6vw,110px);
    row-gap:var(--space-md);
    align-items:center;
  }
  .rcp__copy{ grid-area:copy; align-self:end; }
  .rcp__list{ grid-area:list; align-self:start; }
  .tot{ grid-area:totem; }
}

/* ---------- 2. RETENÇÃO ---------- */
.ret{
  display:grid;
  gap:var(--space-lg);
}
.ret__head{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.ret__head .label{ justify-content:center; }
.ret__head .label::before{ display:none; }
.ret__head .section__lead{ margin-inline:auto; max-width:58ch; }

.radar{
  margin:0;
  width:100%;
  max-width:860px;
  justify-self:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.radar ul{ list-style:none; margin:0; padding:0; }
.radar__head,
.radar li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px 16px;
  padding:14px 18px;
}
.radar__head{
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:.65625rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.radar__head span:last-child{ display:none; }
.radar li + li{ border-top:1px solid rgba(255,255,255,.07); }
.radar__name{ font-size:.9rem; font-weight:600; }
.radar__dots{ display:flex; gap:7px; }
.radar__dots i{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.24);
}
.radar__dots i.on{ background:var(--green); border-color:var(--green); }
.radar__last{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.82rem;
  color:var(--ink-mute);
}
.radar__tag{
  padding:3px 10px;
  border-radius:999px;
  background:var(--green);
  color:#0B1113;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.radar .is-flag{ background:rgba(132,204,22,.07); }
.radar .is-flag .radar__last{ color:#F4F4F2; }
.radar figcaption{
  padding:12px 18px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem;
  color:rgba(244,244,242,.48);
}
@media (min-width:640px){
  .radar__head,
  .radar li{
    grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);
    padding:15px 24px;
  }
  .radar__head span:last-child{ display:block; text-align:right; }
  .radar__last{ grid-column:auto; justify-content:flex-end; }
  .radar__dots{ gap:9px; }
  .radar figcaption{ padding-inline:24px; }
}

/* a sequência: registra, avisa, chega ao professor */
.seq{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-md);
}
.seq__n{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--green);
}
.seq__n::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.16);
}
.seq h3{
  font-size:var(--fs-h3);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.35;
  margin-bottom:6px;
}
.seq p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--ink-mute);
}
@media (min-width:768px){
  .seq{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3vw,48px);
  }
}

/* ---------- 3. ACOMPANHAMENTO ---------- */
.acp{
  display:grid;
  gap:var(--space-lg);
}
.acp__head{
  display:grid;
  gap:var(--space-sm);
}
.acp__head .section__lead{ margin-top:0; }
@media (min-width:1024px){
  .acp__head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,86px);
    align-items:end;
  }
  .acp__head .section__lead{ max-width:none; }
}

.bento{
  display:grid;
  gap:14px;
}
.bento__chart,
.bento__card{
  margin:0;
  border:1px solid var(--line-light);
  border-radius:20px;
  background:#fff;
  padding:clamp(18px,2.4vw,28px);
}
.bento h3{
  font-size:var(--fs-h3);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--text-dark);
  margin-bottom:4px;
}
.bento p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--text-dark-mute);
}
.bento__card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;
  align-content:center;
}
.bento__card .feature__ic{
  grid-row:1 / span 2;
  margin:0;
}
.bento__charthead{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 24px;
}
.bento__charthead > div{ max-width:44ch; }
.bento__delta{
  padding:7px 14px;
  border-radius:999px;
  background:rgba(30,89,10,.10);
  color:var(--green-on-light);
  font-size:.75rem;
  font-weight:600;
}
.bento__chart svg{
  display:block;
  width:100%;
  height:auto;
  margin-top:18px;
  font-family:inherit;
}
.evo__grid{ stroke:rgba(11,17,19,.08); stroke-width:1; }
.evo__area{ fill:rgba(132,204,22,.16); }
.evo__line{
  fill:none;
  stroke:var(--green-on-light);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bento__chart circle{ fill:#fff; stroke:var(--green-on-light); stroke-width:3; }
.bento__chart circle.is-last{ fill:var(--green-on-light); }
.evo__v{ font-size:15px; font-weight:600; fill:var(--text-dark); }
.evo__x{ font-size:12px; fill:var(--text-dark-mute); }
@media (max-width:767px){
  .evo__v{ font-size:26px; }
  .evo__x{ font-size:21px; }
}
.bento__chart figcaption{
  margin-top:6px;
  font-size:.72rem;
  color:var(--text-dark-mute);
}
@media (min-width:768px){
  .bento{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    grid-auto-rows:1fr;
  }
  .bento__chart{ grid-row:1 / span 3; }
}

/* ---------- 4. FINANCEIRO ---------- */
.fin{
  display:grid;
  gap:var(--space-lg);
  align-items:center;
}
.fin__list{ margin-top:var(--space-md); }
@media (min-width:600px){
  .fin__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(24px,3vw,40px);
  }
}
@media (min-width:1024px){
  .fin{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    column-gap:clamp(40px,6vw,110px);
  }
}

/* o comprovante: papel claro sobre o fundo escuro, com a borda de baixo picotada */
.slip{
  margin:0;
  justify-self:center;
  width:min(100%,360px);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.slip__paper{
  padding:26px 24px 36px;
  background:#F4F6F7;
  color:#0B1113;
  transform:rotate(-1.5deg);
  font-variant-numeric:tabular-nums;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;
}
.slip__title{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.slip__when{
  margin-top:2px;
  font-size:.75rem;
  color:#5A686C;
}
.slip dl{
  margin:18px 0 0;
  display:grid;
}
.slip dl div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-top:1px dashed rgba(11,17,19,.22);
  font-size:.875rem;
}
.slip dt{ color:#2A3437; }
.slip dd{ margin:0; white-space:nowrap; }
.slip .slip__sum{ font-weight:600; }
.slip .slip__sum dt{ color:#0B1113; }
.slip__diff{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:12px;
  padding:12px 14px;
  background:#0B1113;
  color:#F4F4F2;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.slip__diff strong{
  font-size:1rem;
  letter-spacing:0;
  color:#FFB547;            /* único uso de âmbar na página: sinal de atenção */
  white-space:nowrap;
}
.slip__note{
  margin-top:8px;
  font-size:.75rem;
  color:#5A686C;
}
.slip figcaption{
  margin-top:22px;
  color:rgba(244,244,242,.48);
}

/* ---------- 5. ATLAS: os três pontos não são sequência, saem os números ---------- */
.atlas__points .step__num{ display:none; }