/* =========================================================
   ale. — landing
   ========================================================= */

:root{
  /* cor tema — trocada em runtime pelo seletor do hero.
     as derivadas (--on-theme etc.) são recalculadas no JS a partir
     da luminância, para o texto continuar legível em amarelo/lima */
  --theme:#E91E63;
  --theme-ink:#E91E63;                   /* tema como TEXTO sobre fundo claro */
  --on-theme:#FFFFFF;                    /* texto sobre o tema   */
  --on-theme-dim:rgba(255,255,255,.92);
  --theme-soft:rgba(255,255,255,.16);    /* nuvens sobre o tema  */
  --theme-veil:rgba(255,255,255,.20);    /* pílula do seletor    */
  --theme-track:rgba(255,255,255,.35);   /* trilho de barras     */

  --brand:#FF1865;                       /* rosa do logo         */
  --ink:#12100F;
  --ink-2:#3B3735;
  --ink-3:#6B6462;
  --cream:#FBF3DC;                       /* nuvens da sessão 2   */
  --soft:#F7F6F5;                        /* cards claros         */
  --track:#E6E4E3;                       /* trilho de barras     */
  --good:#8BC34A;                        /* indicadores positivos*/
  --white:#fff;

  --r-card:18px;

  --nav-h:84px;
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  background:var(--white);
  transition:box-shadow .3s var(--ease);
}
.nav--stuck{box-shadow:0 2px 24px rgba(0,0,0,.09)}

.nav__inner{
  max-width:var(--maxw);
  height:100%;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nav__logo img{width:78px;height:auto}

.nav__links{display:flex;align-items:center;gap:clamp(28px,4vw,58px)}
.nav__links a{
  position:relative;
  color:var(--ink-2);
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  border-radius:2px;
  background:var(--theme-ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--theme-ink)}
.nav__links a.is-active{color:var(--theme-ink);font-weight:600}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__burger{display:none;width:42px;height:42px;padding:9px;flex-direction:column;justify-content:space-between}
.nav__burger span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* =========================================================
   NUVENS (forma compartilhada)
   ========================================================= */
.cloud{position:absolute;fill:currentColor}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  position:relative;
  margin-top:var(--nav-h);
  padding:clamp(40px,6vw,80px) clamp(20px,4vw,90px) clamp(48px,5vw,72px);
  background:var(--theme);
  overflow:hidden;
  isolation:isolate;
  transition:background-color .55s var(--ease);
}

.hero__clouds{position:absolute;inset:0;color:var(--theme-soft);pointer-events:none;z-index:0}
.cloud--1{width:300px;top:8%;left:-4%}
.cloud--2{width:210px;top:4%;left:14%}
.cloud--3{width:250px;top:22%;left:2%}
.cloud--4{width:330px;top:6%;right:-3%}
.cloud--5{width:230px;top:2%;right:16%}
.cloud--6{width:270px;top:26%;right:4%}

/* 3 colunas: o título mora na calha da esquerda e o mockup fica
   centralizado na do meio — assim nunca há sobreposição */
.hero__stage{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(10px,1.4vw,24px);
}

.hero__devices{margin:0;width:min(38vw,720px)}
.hero__devices img{
  width:100%;height:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.22));
  animation:floatY 7s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero__title{
  grid-column:1;
  align-self:end;
  padding-bottom:clamp(8px,2vw,40px);
  color:var(--on-theme);
  display:grid;
  line-height:1.06;
  letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(0,0,0,.14);
}
/* "todas as matérias" ocupa ~9em; o 2.7vw é o maior tamanho que ainda
   cabe na calha da esquerda sem quebrar linha */
.hero__title-light{font-size:clamp(1.35rem,2.7vw,3rem);font-weight:300}
.hero__title-bold{font-size:clamp(1.35rem,2.7vw,3rem);font-weight:700}

/* --- seletor de cor --- */
.picker{position:relative;z-index:2;margin-top:clamp(32px,4vw,54px);text-align:center}

.picker__label{
  color:var(--on-theme);
  font-size:clamp(1rem,1.4vw,1.28rem);
  font-weight:400;
  margin-bottom:18px;
}

.picker__track{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(8px,1.1vw,16px);
  max-width:900px;
  margin-inline:auto;
  padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,28px);
  border-radius:999px;
  background:var(--theme-veil);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.swatch{
  --sw:clamp(28px,2.6vw,38px);
  width:var(--sw);
  height:var(--sw);
  border-radius:50%;
  background:var(--c);
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.swatch:hover{transform:scale(1.16)}
.swatch:focus-visible{outline:3px solid #fff;outline-offset:4px}

.swatch[aria-checked="true"]{
  transform:scale(1.06);
  box-shadow:0 0 0 4px var(--theme),0 0 0 7px rgba(255,255,255,.95);
}

/* =========================================================
   2. SUPER-RESPONSIVO
   ========================================================= */
.responsive{
  position:relative;
  padding:clamp(64px,8vw,110px) clamp(20px,4vw,64px) clamp(20px,4vw,40px);
  background:var(--white);
  overflow:hidden;
}

.responsive__clouds{position:absolute;inset:0;color:var(--cream);pointer-events:none;z-index:0}
.cloud--r1{width:min(430px,32vw);top:9%;left:-7%}
.cloud--r2{width:min(260px,20vw);top:24%;left:1%}
.cloud--r3{width:min(450px,34vw);top:10%;right:-8%}

.responsive__head{position:relative;z-index:1;text-align:center;margin-bottom:clamp(36px,5vw,60px)}
.responsive__title{
  font-size:clamp(2.1rem,5vw,3.55rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.responsive__title .accent{color:var(--theme-ink);transition:color .55s var(--ease)}
.responsive__sub{
  margin-top:.35em;
  font-size:clamp(1.05rem,1.9vw,1.6rem);
  font-weight:400;
  color:var(--ink-2);
}

/* --- carrossel coverflow --- */
.carousel{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
}

.carousel__viewport{
  position:relative;
  height:clamp(400px,38vw,600px);
  perspective:1600px;
}

.carousel__track{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.carousel__track{--w:clamp(178px,15vw,262px)}

.slide{
  position:absolute;
  width:var(--w);
  transform:translate3d(var(--x,0),0,0) scale(var(--s,1));
  opacity:var(--o,1);
  filter:blur(var(--b,0));
  z-index:var(--z,1);
  transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
  will-change:transform,opacity;
}

/* a moldura é sempre a mesma; a imagem é recortada dentro dela */
.slide__frame{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:320/696;
  border-radius:clamp(8px,.9vw,12px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.slide__frame img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  max-width:none;          /* o reset global travaria o recorte horizontal */
  object-fit:cover;
}
/* estica a imagem para fora da moldura, escondendo a margem transparente */
.slide--inset .slide__frame img{
  left:-4.65%;
  top:-2.1%;
  width:109.3%;
  height:104.2%;
}

.carousel__arrow{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:20;
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--theme-ink);
  background:var(--white);
  box-shadow:0 6px 22px rgba(0,0,0,.14);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .55s var(--ease);
}
.carousel__arrow svg{width:24px;height:24px}
.carousel__arrow:hover{transform:scale(1.1);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.carousel__arrow:focus-visible{outline:3px solid var(--theme-ink);outline-offset:3px}
.carousel__arrow--prev{left:clamp(0px,2vw,28px)}
.carousel__arrow--next{right:clamp(0px,2vw,28px)}

.carousel__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:clamp(20px,2.5vw,34px);
}
.dot{
  width:9px;height:9px;
  border-radius:999px;
  background:#D9D4D2;
  transition:width .35s var(--ease),background-color .35s var(--ease);
}
.dot[aria-selected="true"]{width:30px;background:var(--theme-ink)}
.dot:focus-visible{outline:2px solid var(--theme-ink);outline-offset:3px}

/* =========================================================
   3. APRENDER MAIS E MELHOR
   ========================================================= */
.learn{
  background:var(--theme);
  padding:clamp(48px,6vw,72px) clamp(20px,4vw,64px);
  overflow:hidden;
  transition:background-color .55s var(--ease);
}

.learn__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(28px,4vw,64px);
}

/* barra lateral branca */
.railcard{
  display:grid;
  gap:clamp(20px,2.4vw,34px);
  padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,26px);
  border-radius:clamp(14px,1.4vw,20px);
  background:var(--white);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.railcard__item{display:grid;justify-items:center;gap:8px;color:var(--theme-ink);transition:color .55s var(--ease)}
.railcard__item svg{width:clamp(24px,2.2vw,30px);height:auto;fill:currentColor}
.railcard__item span{font-size:clamp(.75rem,1vw,.88rem);font-weight:600}

.learn__copy{color:var(--on-theme)}
.learn__title{
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
}
.learn__sub{
  margin-top:.7em;
  font-size:clamp(1rem,1.5vw,1.35rem);
  font-weight:400;
  line-height:1.45;
  opacity:.96;
}

.learn__art{margin:0;justify-self:end;width:min(46vw,560px)}
.learn__art img{width:100%;height:auto}

/* =========================================================
   BENTO — base compartilhada pelas sessões 4 e 5
   ========================================================= */
.bentosec{
  padding:clamp(48px,6vw,86px) clamp(20px,4vw,64px);
  background:var(--white);
}

.bento{
  max-width:1240px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.card--w2{grid-column:span 2}

.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,44px);
}
.card--soft{background:var(--soft)}
.card--theme{background:var(--theme);color:var(--on-theme);transition:background-color .55s var(--ease)}

/* título grande dentro de um card */
.card__title{
  position:relative;
  z-index:1;
  font-size:clamp(2rem,3.6vw,3.6rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
}

/* ilustração decorativa dentro do card */
.card__art{position:absolute;z-index:0;pointer-events:none}
.card__art--hearts{right:2%;bottom:6%;width:min(48%,300px)}
/* sangra no canto: encosta na direita e é cortada embaixo pelo card */
.card__art--corner{right:0;bottom:0;height:88%;width:auto;max-width:52%;object-fit:contain;object-position:bottom right}
.card__art--books{height:92%;right:1%}

.card__badge{
  position:absolute;
  top:clamp(18px,2vw,34px);
  right:clamp(18px,2vw,34px);
  width:clamp(64px,7vw,96px);
  border-radius:50%;
  background:var(--white);
}

/* --- barra de progresso --- */
.meter{
  position:relative;
  height:8px;
  border-radius:999px;
  background:var(--track);
  overflow:hidden;
}
.meter--lg{height:15px}
.meter span{
  display:block;
  width:var(--fill,0%);
  height:100%;
  border-radius:inherit;
  background:var(--theme-ink);
  transition:background-color .55s var(--ease);
}
.card--theme .meter{background:var(--theme-track)}
.card--theme .meter span{background:var(--on-theme)}

/* =========================================================
   4. INDICADORES + GESTORES (grid único)
   ========================================================= */
.card--headline{display:grid;align-content:center;min-height:clamp(240px,24vw,356px)}

.card--pitch{display:grid;align-content:center;gap:clamp(18px,2vw,30px)}
.card__lead{
  font-size:clamp(1.1rem,1.75vw,1.6rem);
  font-weight:700;
  line-height:1.32;
  max-width:26ch;
}
.card__body{
  font-size:clamp(.98rem,1.25vw,1.2rem);
  line-height:1.45;
  color:var(--ink-2);
  max-width:38ch;
}

.card--stat{min-height:clamp(230px,22vw,330px);display:grid;align-content:center}
.stat{position:relative;z-index:1;display:grid;gap:6px;justify-items:start}
.stat__label{font-size:clamp(1rem,1.3vw,1.25rem);font-weight:700}
.stat__value{
  font-size:clamp(3rem,5.4vw,5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--theme-ink);
  transition:color .55s var(--ease);
}
.card--theme .stat__value{color:var(--on-theme)}
.stat .meter{width:min(210px,60%);margin:10px 0 4px}
.stat__caption{font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.35;color:var(--ink-2)}
.stat__caption strong{color:var(--theme-ink);font-weight:600;transition:color .55s var(--ease)}
.card--theme .stat__caption{color:var(--on-theme-dim)}
.card--theme .stat__caption strong{color:var(--on-theme)}

/* --- card de relatórios --- */
.reports{display:grid;align-content:center;gap:clamp(18px,2.4vw,32px)}
.reports__widgets{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)}

.widget{
  border-radius:12px;
  padding:clamp(12px,1.4vw,20px);
  display:grid;
  justify-items:center;
  align-content:center;
  gap:4px;
  text-align:center;
  min-height:clamp(150px,15vw,196px);
}
.widget--good{background:var(--good)}
.widget--plain{background:var(--white)}
.widget__label{font-size:clamp(.8rem,.95vw,.95rem);font-weight:600;color:var(--ink)}
.widget__value{
  font-size:clamp(1.9rem,3.2vw,3rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--white);
}
.widget__caption{font-size:clamp(.72rem,.85vw,.86rem);line-height:1.3;color:var(--white)}

.donut{
  --pct:0;
  position:relative;
  width:clamp(84px,8.5vw,116px);
  aspect-ratio:1;
  margin-top:6px;
  border-radius:50%;
  background:conic-gradient(var(--good) calc(var(--pct) * 1%),#E0E0E0 0);
  display:grid;
  place-items:center;
}
.donut::before{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:var(--white);
}
.donut__value{
  position:relative;
  font-size:clamp(1.1rem,1.6vw,1.55rem);
  font-weight:700;
  color:var(--good);
}

.reports__title{
  font-size:clamp(1.25rem,2.2vw,2.1rem);
  font-weight:700;
  letter-spacing:-.02em;
}

/* --- tiles com ilustração ---
   flex + flex:1 na arte para ela ocupar toda a altura que sobra */
.tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.8vw,24px);
  min-height:clamp(240px,24vw,340px);
  text-align:center;
}
.tile__art{
  flex:1 1 auto;
  min-height:0;
  width:min(94%,280px);
  object-fit:contain;
}
.tile__title{flex:none;font-size:clamp(.95rem,1.25vw,1.2rem);font-weight:700}

/* --- cards de aula --- */
.lesson{display:grid;align-content:start;gap:10px;padding:clamp(16px,1.6vw,24px)}
.lesson__kind{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:clamp(.85rem,1.05vw,1.02rem);
  font-weight:500;
  color:var(--ink-2);
}
.lesson__mark{width:15px;height:15px;fill:#E53935;flex:none}
.lesson__live{width:11px;height:11px;border-radius:50%;background:#E53935;flex:none}

.lesson__thumb{width:100%;border-radius:9px;aspect-ratio:16/9;object-fit:cover}
.lesson__title{font-size:clamp(.85rem,1.02vw,1rem);font-weight:500;line-height:1.3}
.lesson__teacher{font-size:clamp(.75rem,.9vw,.88rem);color:var(--ink-3);margin-top:-6px}

.subjects{display:grid;gap:8px;margin-top:4px}
.subject{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:9px;
  padding:7px 10px 7px 7px;
  border-radius:9px;
  background:var(--sbg);
}
.subject__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:7px;
  /* o quadradinho é um tom mais forte que a linha */
  background:color-mix(in srgb,var(--sfg) 22%,var(--sbg));
  color:var(--sfg);
  font-weight:700;
  font-size:.9rem;
  flex:none;
}
.subject__icon svg{width:19px;height:19px;fill:currentColor}
.subject__icon--fx{font-size:.95rem;letter-spacing:-.02em}
.subject__icon--fx em{font-style:italic;font-family:Georgia,serif}
.subject__icon--fx i{font-style:normal}

.subject__text{display:grid;gap:1px;min-width:0}
.subject__text strong{
  font-size:clamp(.7rem,.82vw,.8rem);
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
}
.subject__text{font-size:clamp(.62rem,.72vw,.7rem);color:var(--ink-3);line-height:1.25}

/* cores das disciplinas — pares Material 100 / 500 */
.subject--amber {--sbg:#FFECB3;--sfg:#FFC107}
.subject--purple{--sbg:#EDE7F6;--sfg:#9C27B0}
.subject--red   {--sbg:#FFCDD2;--sfg:#E53935}
.subject--green {--sbg:#C8E6C9;--sfg:#43A047}
/* a linha "fantasma" tem só o ícone colorido, o fundo fica limpo */
.subject--ghost{background:transparent;padding-left:0}

/* =========================================================
   6. CALENDÁRIO
   ========================================================= */
.agenda{
  /* o .bentosec acima já traz o respiro de baixo */
  padding:clamp(12px,2vw,32px) clamp(20px,4vw,64px) clamp(56px,7vw,100px);
  background:var(--white);
  overflow:hidden;
}
.agenda__inner{
  max-width:1240px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(28px,4vw,72px);
}
.agenda__shot{margin:0}
.agenda__shot img{width:100%;height:auto}

.agenda__title{
  font-size:clamp(1.7rem,3.1vw,3rem);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.02em;
}
.agenda__body{
  margin-top:1em;
  font-size:clamp(1rem,1.3vw,1.22rem);
  line-height:1.5;
  color:var(--ink-2);
  max-width:34ch;
}

/* =========================================================
   7. PLATAFORMA — carrossel de sessão inteira
   O índigo é fixo (#3F51B5): a arte do soldado do slide 1 já
   traz essa cor achatada no arquivo, então não segue o tema.
   ========================================================= */
.showcase{
  --indigo:#3F51B5;
  position:relative;
  background:var(--indigo);
  color:var(--white);
  padding:clamp(48px,6vw,90px) clamp(56px,7vw,120px);
  overflow:hidden;
  transition:background-color .5s var(--ease);
}

/* todos os slides na mesma célula: a altura é a do maior,
   então a sessão não pula de tamanho ao trocar */
.showcase__track{
  display:grid;
  max-width:var(--maxw);
  margin-inline:auto;
}

.pane{
  grid-area:1/1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(24px,4vw,72px);
  opacity:0;
  visibility:hidden;
  transform:translateX(28px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
}
.pane[data-active]{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s;
}

.pane__copy{display:grid;gap:clamp(14px,1.8vw,26px);align-content:center}
.pane__title{
  font-size:clamp(1.6rem,3vw,2.9rem);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.015em;
  max-width:16ch;
  text-wrap:balance;      /* evita linha órfã com uma palavra só */
}
.pane__body{
  font-size:clamp(.98rem,1.35vw,1.25rem);
  line-height:1.45;
  max-width:34ch;
}
.pane__body--strong{font-weight:700}

.pane__art{margin:0;display:grid;place-items:center}
.pane__art img{width:100%;height:auto}

/* --- slide 1 ---
   a 3ª coluna fica vazia de propósito: é o espaço do soldado do fundo */
.pane--intro{grid-template-columns:1fr 1.15fr .55fr}
.pane--intro .pane__title{max-width:10ch;font-size:clamp(1.8rem,3.2vw,3.1rem);font-weight:800}

.badge{
  justify-self:start;
  display:grid;
  justify-items:center;
  gap:6px;
  padding:16px 22px;
  border-radius:12px;
  background:var(--white);
  color:var(--indigo);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.badge svg{width:28px;height:28px;fill:currentColor}
.badge span{font-size:.95rem;font-weight:600}

/* a arte do soldado é o fundo do slide, sangrando na direita */
.showcase[data-pane="0"]{
  background:var(--indigo) url("../assets/bastidores-fundo.avif") right center / auto 100% no-repeat;
}
/* a arte do slide 3 é um recorte de tela e traz o índigo achatado num tom
   um tico diferente; casar o fundo da sessão evita o retângulo aparente */
.showcase[data-pane="2"]{background-color:#3350B9}

.pane__art--monitor{justify-self:center}
.pane__art--monitor img{max-width:540px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.28))}

/* --- slide 2 ---
   é a arte mais alta do carrossel e, como os slides dividem a mesma
   célula, era ela que puxava a altura da sessão inteira */
.pane__art--sim img{max-width:440px}

/* --- slide 3 --- */
.pane__art--shapes{width:100%}
.pane__art--shapes img{width:100%;max-width:560px;height:auto}

/* --- slide 5 --- */
.pane--files .pane__copy{gap:clamp(12px,1.4vw,20px)}
.folders{width:clamp(120px,13vw,190px);height:auto;margin-bottom:6px}

/* --- controles --- */
.showcase__arrow{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:5;
  width:clamp(38px,3.4vw,48px);
  aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--white);
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.5);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.showcase__arrow svg{width:56%;height:auto}
.showcase__arrow:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.showcase__arrow:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.showcase__arrow--prev{left:clamp(10px,1.6vw,28px)}
.showcase__arrow--next{right:clamp(10px,1.6vw,28px)}

.showcase__dots{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:clamp(24px,3vw,44px);
  padding:7px 12px;
  width:max-content;
  margin-inline:auto;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}
.showcase__dots .dot{background:rgba(255,255,255,.45)}
.showcase__dots .dot[aria-selected="true"]{background:var(--white)}
.showcase__dots .dot:focus-visible{outline:2px solid var(--white)}

/* =========================================================
   8 e 9. FAIXAS COM ILUSTRAÇÃO
   ========================================================= */
.band{
  padding:clamp(48px,6vw,90px) clamp(20px,4vw,64px);
  color:var(--on-theme);
  overflow:hidden;
}
/* o teal é fixo: a ilustração da girafa já traz #009688 no arquivo */
.band--teal{--on-theme:#fff;background:#009688}
.band--theme{background:var(--theme);transition:background-color .55s var(--ease)}

.band__inner{
  max-width:1240px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(24px,4vw,64px);
}

.band__copy{display:grid;gap:clamp(14px,1.8vw,26px);justify-items:start;max-width:34rem}
.band__title{
  font-size:clamp(1.6rem,2.9vw,2.7rem);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.015em;
  max-width:17ch;
  text-wrap:balance;
}
.band__title--short{max-width:11ch}
.band__body{font-size:clamp(.98rem,1.3vw,1.18rem);line-height:1.5;max-width:38ch}
.band__body--strong{font-weight:700}

.band__art{margin:0;justify-self:center}
/* a margem negativa deixa a arte maior que a faixa: ela sangra em cima e
   embaixo e o overflow:hidden da .band corta, como no mockup */
.band__art img{width:100%;height:auto;max-width:600px;margin-block:clamp(-56px,-4vw,0px)}

/* --- botão --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 20px;
  border:1.5px solid currentColor;
  border-radius:8px;
  color:inherit;
  font-size:clamp(.85rem,1vw,.95rem);
  font-weight:700;
  text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--on-theme);color:#111}
.btn:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.btn--pill{border-radius:999px;padding:13px 26px;gap:18px}
.btn__icon{width:20px;height:20px;fill:currentColor;flex:none}
.btn__arrow{width:60px;height:12px;flex:none}

/* =========================================================
   10. NÚMEROS + CLIENTES
   ========================================================= */
.stats{
  background:#232323;
  color:var(--white);
  padding:clamp(48px,6vw,86px) clamp(20px,4vw,64px) clamp(40px,5vw,70px);
  overflow:hidden;
}
.stats__inner{max-width:1240px;margin-inline:auto}

.stats__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(30px,4vw,56px);
}
.stats__title{
  font-size:clamp(1.5rem,2.9vw,2.6rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
}
.stats__title .accent{color:var(--theme);transition:color .55s var(--ease)}
/* o logo é rosa no arquivo; aqui ele precisa ser branco */
.stats__logo{width:clamp(64px,6vw,90px);height:auto;filter:brightness(0) invert(1)}

.stats__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,26px);
}

.statcard{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,18px);
  min-height:clamp(120px,12vw,176px);
  padding:clamp(16px,1.8vw,26px) clamp(16px,2vw,30px);
  border-radius:8px;
  background:var(--white);
  color:#1A1A1A;
  overflow:hidden;
}
.statcard__icon{
  flex:none;
  width:clamp(66px,7vw,96px);
  height:auto;
  /* o card é branco, então aqui vale a variante escurecida do tema */
  color:var(--theme-ink);
  transition:color .55s var(--ease);
}
.statcard__text{display:grid;gap:1px}
.statcard__over{font-size:clamp(.8rem,1vw,1.02rem)}
.statcard__value{
  font-size:clamp(2rem,3.6vw,3.4rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--theme-ink);
  transition:color .55s var(--ease);
}
.statcard__text span{font-size:clamp(.8rem,1vw,1.02rem);line-height:1.3}
.statcard__text em{font-style:normal;color:var(--theme-ink);transition:color .55s var(--ease)}

/* --- carrossel infinito de logos --- */
.marquee{
  display:flex;
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(36px,5vw,70px);
  width:100%;
  overflow:hidden;
  /* desbota nas pontas para o corte não ficar seco */
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__row{
  display:flex;
  flex:none;
  align-items:center;
  gap:clamp(28px,4vw,64px);
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__row img{
  width:clamp(96px,9vw,132px);
  height:auto;
  opacity:.9;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - clamp(28px,4vw,64px)))}
}

/* =========================================================
   11. FAQ
   ========================================================= */
.faq{
  background:var(--white);
  padding:clamp(48px,6vw,86px) clamp(20px,4vw,64px) clamp(40px,5vw,72px);
}

.faq__head{text-align:center;margin-bottom:clamp(28px,3.6vw,52px)}
.faq__title{
  font-size:clamp(1.8rem,3.4vw,3.1rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.faq__sub{
  margin-top:.35em;
  font-size:clamp(1rem,1.5vw,1.35rem);
  color:var(--ink-2);
}

.faq__list{
  max-width:940px;
  margin-inline:auto;
  padding:clamp(6px,1vw,14px) clamp(14px,2.4vw,34px);
  border-radius:12px;
  background:var(--soft);
}

.qa + .qa{border-top:1px solid #E4E2E1}

.qa__q{
  width:100%;
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,24px);
  padding:clamp(16px,1.8vw,24px) 0;
  text-align:left;
  font-size:clamp(.92rem,1.1vw,1.05rem);
  font-weight:600;
  color:var(--ink);
}
.qa__q:focus-visible{outline:3px solid var(--theme-ink);outline-offset:-3px;border-radius:6px}

/* "+" que gira 45° virando "×" quando aberto */
.qa__mark{
  position:relative;
  flex:none;
  width:15px;
  height:15px;
  color:#8C8785;
  transition:transform .35s var(--ease),color .25s var(--ease);
}
.qa__mark::before,
.qa__mark::after{
  content:"";
  position:absolute;
  inset:50% 0 auto 0;
  height:1.6px;
  border-radius:2px;
  background:currentColor;
  translate:0 -50%;
}
.qa__mark::after{rotate:90deg}
.qa__q[aria-expanded="true"] .qa__mark{transform:rotate(45deg);color:var(--ink)}
.qa__q:hover .qa__mark{color:var(--ink)}

/* grid 0fr -> 1fr anima a altura sem precisar medir em JS */
.qa__wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
.qa__wrap > .qa__a{overflow:hidden;min-height:0}
.qa[data-open] .qa__wrap{grid-template-rows:1fr}

.qa__a p{
  font-size:clamp(.88rem,1.05vw,1rem);
  line-height:1.6;
  color:var(--ink-2);
  padding-left:calc(15px + clamp(12px,1.6vw,24px));
}
.qa__a p:first-child{padding-top:2px}
.qa__a p:last-child{padding-bottom:clamp(16px,1.8vw,24px)}
.qa__a p + p{margin-top:1em}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{
  background:var(--white);
  padding:clamp(32px,4vw,56px) clamp(20px,4vw,64px) clamp(24px,3vw,40px);
}
.foot__inner{max-width:1240px;margin-inline:auto}

.foot__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:clamp(20px,2.6vw,36px);
}

.foot__logo{
  display:flex;
  align-items:baseline;
  gap:2px;
  text-decoration:none;
  color:var(--brand);
}
.foot__logo img{width:clamp(78px,8vw,116px);height:auto}
.foot__logo span{
  font-size:clamp(1.5rem,2.6vw,2.35rem);
  font-weight:400;
  letter-spacing:-.01em;
}

.foot__social{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.foot__social p{font-size:clamp(.9rem,1.1vw,1.05rem);color:var(--ink)}
.foot__social ul{display:flex;gap:clamp(10px,1.4vw,20px)}
.foot__social a{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--ink);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.foot__social svg{width:100%;height:100%;fill:currentColor}
.foot__social a:hover{color:var(--theme-ink);transform:translateY(-2px)}
.foot__social a:focus-visible{outline:3px solid var(--theme-ink);outline-offset:3px;border-radius:6px}

.foot__legal{
  border-top:1px solid #E4E2E1;
  padding-top:clamp(16px,2vw,26px);
  text-align:center;
  font-size:clamp(.78rem,.92vw,.9rem);
  color:var(--ink-2);
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .learn__inner{grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px)}
  .learn__art{grid-column:1/-1;justify-self:center;width:min(78vw,460px)}

  .bento{grid-template-columns:repeat(2,1fr)}
  .agenda__inner{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  /* sem a coluna reservada ao soldado */
  .pane--intro{grid-template-columns:1fr 1.1fr}
  .stats__grid{grid-template-columns:1fr}
  .statcard{min-height:auto}
  .agenda__shot{order:2}
  .agenda__body{max-width:none}
}

@media (max-width:860px){
  .nav__links{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px clamp(20px,4vw,64px) 20px;
    background:var(--white);
    box-shadow:0 18px 30px rgba(0,0,0,.10);
    /* sobe o menu inteiro + a altura da navbar para não vazar embaixo dela */
    transform:translateY(calc(-100% - var(--nav-h)));
    visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s;
  }
  .nav__links.is-open{
    transform:none;
    visibility:visible;
    transition:transform .35s var(--ease),visibility 0s;
  }
  .nav__links a{padding:16px 0;border-bottom:1px solid #EEE9E7}
  .nav__burger{display:flex}

  /* empilha: título em cima, mockup embaixo */
  .hero__stage{grid-template-columns:1fr;justify-items:center;gap:8px}
  .hero__title{
    grid-column:1;
    grid-row:1;
    align-self:auto;
    padding-bottom:0;
    margin-bottom:26px;
    text-align:center;
    justify-items:center;
  }
  .hero__devices{grid-column:1;grid-row:2;width:min(100%,560px)}

  /* empilhado, as seis nuvens se amontoavam em cima do título. Restam duas,
     na faixa vertical do mockup (22%–61% do hero), sangrando pelas laterais */
  .cloud--2,.cloud--3,.cloud--5,.cloud--6{display:none}
  .cloud--1{width:56vw;top:26%;left:-20%}
  .cloud--4{width:48vw;top:36%;right:-18%}

  .learn__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .railcard{grid-auto-flow:column;grid-template-columns:repeat(3,1fr)}
  .learn__art{width:min(64vw,340px)}

  .carousel__arrow{width:44px;height:44px}
  .carousel__arrow--prev{left:0}
  .carousel__arrow--next{right:0}

  /* a ilustração do canto desbota pra não brigar com o texto no estreito */
  .card__art--corner{opacity:.35}

  /* carrossel da plataforma: empilha texto em cima, arte embaixo */
  .showcase{padding-inline:clamp(20px,5vw,44px)}
  /* align-content:start encosta o conteúdo no topo — os slides dividem a
     mesma célula, então o mais alto deixaria um vão no meio dos outros */
  .pane,.pane--intro{grid-template-columns:1fr;gap:clamp(20px,4vw,34px);align-content:start}
  .pane__title,.pane__body{max-width:none}
  .pane__art{order:2}
  .pane__art--shapes svg{max-height:46vh}
  .pane__art--monitor img{max-width:min(100%,460px)}
  /* o soldado ficaria cortado num recorte estreito */
  .showcase[data-pane="0"]{background-image:none}
  .showcase__arrow{top:auto;bottom:14px;translate:0 0}
  .showcase__arrow--prev{left:clamp(12px,6vw,40px)}
  .showcase__arrow--next{right:clamp(12px,6vw,40px)}

  .band__inner{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .band__copy{max-width:none}
  .band__title,.band__body{max-width:none}
  .band__art{order:2}
  .band__art img{max-width:min(72vw,380px)}

  .stats__head{flex-direction:column-reverse;align-items:flex-start;gap:18px}

  .foot__top{flex-direction:column;align-items:flex-start}
  .foot__social{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width:560px){
  :root{--nav-h:70px}
  .picker__track{border-radius:26px;padding:16px}
  .cloud--r1,.cloud--r2,.cloud--r3{opacity:.6}

  .bento{grid-template-columns:1fr}
  .card--w2{grid-column:span 1}
}