/* Home e catálogo: identidade laranja + marinho + creme e estados das animações (motion.js).
   Sem JavaScript ou com "reduzir movimento", tudo aparece no estado final. */
:root{--o:#f45a14;--o-deep:#d9480f;--o-soft:#ff8a3d;--navy:#102e54;--navy-deep:#0b2140;--cream:#fdefd9;--cream-2:#f6dcba}

/* ---------- Hero ---------- */
.hero{width:calc(100% - 32px);max-width:1400px;margin:16px auto 0;padding:clamp(44px,5.5vw,88px) clamp(24px,5vw,76px) clamp(56px,6vw,96px);grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,80px);border:0;border-radius:36px;isolation:isolate;color:#fff;background:radial-gradient(110% 90% at 88% 6%,var(--o-soft) 0%,transparent 55%),radial-gradient(80% 80% at 0% 100%,#e04408 0%,transparent 62%),var(--o);box-shadow:0 30px 80px rgba(196,64,10,.28)}
.hero::before{top:0;right:0;bottom:0;left:0;width:auto;height:auto;border-radius:0;filter:none;z-index:-1;opacity:.22;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-tri{position:absolute;fill:var(--cream)}
.hero-tri-a{width:min(46vw,620px);left:34%;top:-14%;opacity:.13;transform:rotate(-10deg)}
.hero-tri-b{width:min(22vw,280px);right:-70px;bottom:-60px;opacity:.12;transform:rotate(14deg)}
.hero-outline{position:absolute;width:210px;left:-46px;bottom:-40px;fill:none;stroke:var(--cream);stroke-width:3;opacity:.55}
.hero-arrows{position:absolute;right:clamp(24px,4vw,56px);bottom:clamp(20px,3vw,36px);display:flex;gap:10px}
.hero-arrows i{width:22px;height:24px;background:var(--cream);clip-path:polygon(0 0,100% 50%,0 100%);opacity:.35;animation:arrow-run 1.8s ease-in-out infinite}
.hero-arrows i:nth-child(2){animation-delay:.2s}.hero-arrows i:nth-child(3){animation-delay:.4s}
@keyframes arrow-run{0%,100%{opacity:.3;transform:translateX(0)}40%{opacity:1;transform:translateX(5px)}}

.hero-copy{max-width:680px}
.hero-kicker{display:inline-flex;margin:0 0 26px;padding:9px 16px;border-radius:999px;background:var(--cream);color:var(--navy);font-size:.74rem;font-weight:800;letter-spacing:.14em;box-shadow:0 4px 0 rgba(11,33,64,.22)}
.hero h1{margin:0 0 30px;color:#fff;font-family:"Baloo 2",Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:.95;font-size:clamp(3rem,5.6vw,5.4rem)}
.hero-title-main{display:inline-block;padding:.08em .38em 0;border-radius:.34em;background:var(--navy);color:#fff;transform:rotate(-2.5deg);transform-origin:left center;box-shadow:0 .09em 0 var(--navy-deep),0 .3em .5em rgba(11,33,64,.25)}
.hero-title-bridge{margin:.32em 0 0 .08em;color:var(--cream);font-size:.44em;font-weight:700;letter-spacing:0}
.hero-title-price{position:relative;margin-top:.02em;padding:0;color:var(--navy);font-size:1.7em;line-height:.92;letter-spacing:-.02em;-webkit-text-stroke:.07em var(--cream);paint-order:stroke fill;filter:drop-shadow(0 .055em 0 rgba(150,44,4,.55))}
.hero-title-price::after{content:none}
.hero-price-number{background:none;-webkit-text-fill-color:currentColor;animation:none;padding:0;font-variant-numeric:tabular-nums}
.hero-price-currency{font-size:.42em;letter-spacing:0;vertical-align:.6em}
.hero-price-period{color:#fff;font-size:.3em;letter-spacing:0;-webkit-text-stroke:0}
.hero-spark{position:absolute;top:-.12em;right:-.42em;width:.5em;height:.5em;-webkit-text-stroke:0}
.hero-spark i{position:absolute;left:50%;bottom:0;width:.07em;height:.24em;border-radius:99px;background:var(--cream);transform-origin:50% 100%;animation:spark 2.4s ease-in-out infinite}
.hero-spark i:nth-child(1){transform:translateX(-50%) rotate(-48deg) translateY(-.12em)}
.hero-spark i:nth-child(2){transform:translateX(-50%) rotate(0) translateY(-.16em)}
.hero-spark i:nth-child(3){transform:translateX(-50%) rotate(48deg) translateY(-.12em)}
@keyframes spark{0%,100%{opacity:1}50%{opacity:.35}}
.hero .lead{display:inline-block;max-width:540px;padding:13px 18px;border-radius:14px;background:var(--cream);color:var(--navy);font-size:1.05rem;font-weight:600;line-height:1.5;box-shadow:0 6px 0 rgba(11,33,64,.18)}
.hero-actions{gap:24px;margin:30px 0 0}
.hero .hero-cta{min-height:62px;padding:0 34px;gap:12px;border-radius:999px;background:var(--navy);color:#fff;font-size:1.12rem;font-weight:800;box-shadow:0 6px 0 var(--navy-deep),0 18px 34px rgba(11,33,64,.38);position:relative;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.hero .hero-cta:hover{background:#163b6a;transform:translateY(-2px);box-shadow:0 8px 0 var(--navy-deep),0 22px 38px rgba(11,33,64,.42)}
.hero .hero-cta:active{transform:translateY(3px);box-shadow:0 3px 0 var(--navy-deep),0 10px 20px rgba(11,33,64,.3)}
.hero .hero-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(253,239,217,.7);animation:cta-ring 2.6s ease-out infinite;pointer-events:none}
@keyframes cta-ring{0%{box-shadow:0 0 0 0 rgba(253,239,217,.65)}70%,100%{box-shadow:0 0 0 18px rgba(253,239,217,0)}}
.hero-actions .hero-explore{color:#fff;text-decoration-color:var(--cream);text-decoration-thickness:2px}
.hero-actions .hero-explore:hover{color:var(--cream)}
.hero-condition{max-width:540px;margin:26px 0 0;padding:11px 15px;border:2px dashed var(--navy);border-radius:12px;background:#fff;color:var(--navy);font-size:.78rem;font-weight:600;line-height:1.5}

.hero-visual::before,.hero-visual::after{content:none;animation:none}
.hero-frame{position:relative;padding:12px;border-radius:32px;background:var(--cream);transform:rotate(2.2deg);box-shadow:0 34px 64px rgba(120,35,0,.38)}
.hero-photo{height:clamp(380px,40vw,560px);border-radius:22px;box-shadow:none;background:#f6d2b8}
.hero-chip{position:absolute;z-index:2;padding:10px 16px;border-radius:14px;background:var(--cream);color:var(--navy);font:800 1.05rem/1 "Baloo 2",Inter,sans-serif;box-shadow:0 6px 0 rgba(11,33,64,.2),0 14px 28px rgba(60,20,0,.25);white-space:nowrap}
.hero-chip::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--o);vertical-align:.1em}
.hero-chip-1{top:9%;left:-7%;transform:rotate(-6deg)}
.hero-chip-2{bottom:20%;left:-11%;transform:rotate(4deg)}
.hero-chip-3{top:44%;right:-6%;transform:rotate(5deg)}
.hero-badge{position:absolute;z-index:2;right:9%;bottom:-34px;display:grid;place-items:center;align-content:center;width:132px;height:132px;border-radius:50%;background:var(--navy);color:var(--cream);font:700 .95rem/1 "Baloo 2",Inter,sans-serif;text-align:center;transform:rotate(-10deg);box-shadow:0 0 0 6px var(--cream),0 18px 36px rgba(11,33,64,.4)}
.hero-badge strong{display:block;font-size:2.15rem;font-weight:800;color:#fff;line-height:.95}

/* ---------- Faixa de áreas ---------- */
.ticker{position:relative;z-index:2;margin:-26px 0 0;padding:16px 0;overflow:hidden;background:var(--navy);transform:rotate(-1.4deg);box-shadow:0 18px 40px rgba(11,33,64,.25)}
.ticker-track{display:flex;width:max-content;gap:0;animation:ticker 38s linear infinite}
.ticker span{display:inline-flex;align-items:center;padding:0 26px;color:var(--cream);font:800 clamp(1.25rem,2.2vw,1.85rem)/1.1 "Baloo 2",Inter,sans-serif;white-space:nowrap}
.ticker span::after{content:"";width:14px;height:15px;margin-left:52px;background:var(--o);clip-path:polygon(0 0,100% 50%,0 100%)}
@keyframes ticker{to{transform:translateX(-50%)}}
.motion .ticker-track{animation:none}

/* ---------- Escolha do caminho ---------- */
.course-choice{padding-top:72px}
.choice-test,.choice-search{border-radius:28px;padding:44px}
.choice-test{background:var(--navy);box-shadow:0 24px 50px rgba(11,33,64,.22)}
.choice-test::after{border-color:rgba(253,239,217,.14);box-shadow:0 0 0 32px rgba(253,239,217,.05),0 0 0 64px rgba(253,239,217,.03)}
.choice-test .eyebrow{color:var(--o-soft)}
.choice-search{background:var(--cream);border:2px dashed var(--navy)}
.choice-search .eyebrow{color:var(--o-deep)}
.course-choice h2{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;line-height:1.02;font-size:clamp(1.8rem,3vw,2.5rem)}
.choice-test .button{background:var(--o);border-radius:999px;padding:0 26px;box-shadow:0 5px 0 #a33508}
.choice-search .button{background:var(--navy);border-radius:999px;box-shadow:0 4px 0 var(--navy-deep)}
.choice-search input{border:2px solid #e2c6a6;border-radius:999px;padding:0 20px}
.choice-search input:focus{border-color:var(--navy);outline:0}

/* ---------- Catálogo ---------- */
.course-explorer{background:#fff7ef;border-top:0}
.explorer-heading h1,.explorer-heading h2{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;line-height:1;font-size:clamp(2.4rem,4.6vw,4rem)}
.explorer-heading strong{color:var(--o);font-weight:800}
.type-tabs a{border-radius:999px;border-color:#efd5bd}
.type-tabs a[aria-current]{background:var(--navy);border-color:var(--navy)}
.explorer-filters{border-radius:22px;border-color:#f2dcc6;box-shadow:0 18px 40px rgba(120,60,20,.07)}
.explorer-filters .button{border-radius:999px;background:var(--o)}
.listing-card{border-radius:20px;border-color:#f0e0d2;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .2s}
.listing-card:hover{transform:translateY(-6px);border-color:var(--o);box-shadow:0 24px 44px rgba(150,60,10,.14)}
.listing-photo img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.listing-card:hover .listing-photo img{transform:scale(1.06)}
.listing-level{border-radius:999px;background:var(--navy);color:#fff;padding:6px 11px}
.listing-bottom strong{color:var(--navy)}
.listing-link{color:var(--o-deep)}
.catalog-pagination a{border-radius:999px}
.catalog-pagination a[aria-current]{background:var(--navy);border-color:var(--navy)}

/* ---------- Como funciona ---------- */
.steps{width:calc(100% - 32px);max-width:1400px;margin:72px auto 0;padding:clamp(56px,7vw,104px) clamp(24px,5vw,76px);border-radius:36px;background:var(--navy);grid-template-columns:.9fr 1.1fr;align-items:start;overflow:hidden;position:relative}
.steps::after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-200px;background:var(--o);opacity:.12;clip-path:polygon(0 0,100% 50%,0 100%);pointer-events:none;z-index:0}
.steps>*{position:relative;z-index:1}
.steps .eyebrow{color:var(--o-soft)}
.steps h2{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;line-height:1;font-size:clamp(2.3rem,4.4vw,3.8rem)}
.steps-intro>p:not(.eyebrow){color:#c5d2e2;max-width:440px}
.steps .steps-cta{margin-top:20px;min-height:58px;padding:0 30px;gap:12px;border-radius:999px;background:var(--o);font-size:1.05rem;font-weight:800;box-shadow:0 6px 0 #a33508,0 16px 30px rgba(0,0,0,.25)}
.steps .steps-cta:hover{background:#ff6a22}
.steps-track{position:relative;padding-left:34px}
.steps-progress{position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:4px;background:rgba(253,239,217,.15)}
.steps-progress i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(var(--o-soft),var(--o));transform-origin:top}
.steps li{grid-template-columns:64px 1fr;gap:20px;padding:26px 24px;margin:0;border:0;border-radius:22px;background:rgba(253,239,217,.06);transition:background .4s ease,transform .4s ease}
.steps li+li{margin-top:16px}
.steps li>span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--cream);color:var(--navy);font:800 1.35rem/1 "Baloo 2",Inter,sans-serif}
.steps h3{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:0;margin:2px 0 4px}
.steps li p{color:#c5d2e2}
.steps li.is-active{background:rgba(253,239,217,.12)}
.steps li.is-active>span{background:var(--o);color:#fff}

/* ---------- Faixa final ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;width:calc(100% - 32px);max-width:1400px;margin:72px auto;padding:clamp(48px,6vw,88px) clamp(24px,5vw,76px);border-radius:36px;background:radial-gradient(90% 120% at 100% 0%,var(--o-soft),transparent 60%),var(--o);box-shadow:0 30px 70px rgba(196,64,10,.25)}
.cta-deco svg{position:absolute;z-index:-1;fill:var(--cream);pointer-events:none}
.cta-deco svg:first-child{width:340px;right:12%;top:-120px;opacity:.14;transform:rotate(18deg)}
.cta-deco svg:last-child{width:180px;left:-50px;bottom:-60px;opacity:.12;transform:rotate(-12deg)}
.cta-band .eyebrow{display:inline-flex;padding:7px 14px;border-radius:999px;background:var(--cream);color:var(--navy)}
.cta-band h2{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;line-height:1;font-size:clamp(2.3rem,4.6vw,4rem);max-width:760px;margin:6px 0 12px}
.cta-band p:last-child{color:#fff;font-weight:500}
.cta-band .button-light{min-height:66px;padding:0 40px;gap:12px;border-radius:999px;background:var(--navy);color:#fff;font-size:1.2rem;font-weight:800;box-shadow:0 7px 0 var(--navy-deep),0 20px 40px rgba(11,33,64,.4)}
.cta-band .button-light:hover{background:#163b6a}

/* ---------- Dúvidas ---------- */
.faq>h2{font-family:"Baloo 2",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;font-size:clamp(2.2rem,4vw,3.4rem)}
.faq details{border-color:#efdccb}
.faq summary{font-size:1.05rem}
.faq summary::after{display:grid;place-items:center;width:30px;height:30px;top:-4px;border-radius:50%;background:var(--cream);color:var(--o-deep);font-size:1.2rem;transition:transform .3s ease,background .3s}
.faq details[open] summary::after{background:var(--o);color:#fff;transform:rotate(180deg)}

/* ---------- Estados iniciais das animações (só com .motion) ---------- */
.motion [data-hero]{opacity:0;transform:translateY(28px)}
.motion [data-hero-visual]{opacity:0}

/* Lenis (rolagem suave) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){.hero-chip-2{left:-4%}.hero-chip-1{left:-3%}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:48px 32px 72px}
  .hero-visual{margin:0 8px}
  .hero-photo{height:clamp(300px,58vw,460px)}
  .steps{grid-template-columns:1fr;gap:40px}
}
@media (max-width:600px){
  .hero{width:calc(100% - 16px);margin-top:8px;padding:36px 20px 64px;border-radius:26px}
  .hero h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero-title-price{font-size:1.62em}
  .hero .lead{font-size:.95rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:16px}
  .hero .hero-cta{width:100%}
  .hero-actions .hero-explore{align-self:center}
  .hero-frame{padding:8px;border-radius:24px}
  .hero-photo{height:300px;border-radius:18px}
  .hero-chip{font-size:.85rem;padding:8px 12px}
  .hero-chip-1{left:-2%;top:6%}.hero-chip-2{left:-2%;bottom:16%}.hero-chip-3{right:-2%;top:48%}
  .hero-badge{width:100px;height:100px;right:4%;bottom:-28px;font-size:.8rem}.hero-badge strong{font-size:1.65rem}
  .hero-arrows{display:none}
  .ticker{margin-top:-20px}
  .choice-test,.choice-search{padding:28px;border-radius:22px}
  .steps,.cta-band{width:calc(100% - 16px);border-radius:26px;padding:48px 20px}
  .steps-track{padding-left:22px}
  .steps li{grid-template-columns:48px 1fr;padding:20px 16px}
  .steps li>span{width:44px;height:44px;font-size:1.1rem}
  .cta-band .button-light{width:100%}
}
@media (prefers-reduced-motion:reduce){.hero-arrows i,.hero-spark i,.hero .hero-cta::after{animation:none}.ticker-track{animation-duration:120s}}

/* Títulos revelados palavra por palavra (motion.js) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.wi{display:inline-block;will-change:transform}

/* O último passo herdava padding-bottom:0 de uma regra antiga e ficava cortado */
.steps li:last-child{padding-bottom:26px}
@media (max-width:600px){.steps li:last-child{padding-bottom:20px}}

/* Hero mais limpo: aviso de preço discreto (igual às páginas de curso) e celular mais enxuto */
.hero-condition{border:0;background:rgba(11,33,64,.38);color:#fff;font-weight:500;font-size:.72rem;padding:8px 12px;border-radius:10px}
@media (max-width:600px){
  .hero{padding:26px 20px 52px;gap:26px}
  .hero-kicker{margin-bottom:16px;padding:6px 12px;font-size:.6rem;letter-spacing:.12em}
  .hero h1{margin-bottom:18px;font-size:clamp(2.4rem,11vw,3rem)}
  .hero-title-bridge{margin-top:.38em}
  .hero-title-price{font-size:1.55em}
  .hero .lead{padding:10px 14px;border-radius:12px;font-size:.92rem;line-height:1.45}
  .hero-actions{margin-top:20px;gap:12px}
  .hero .hero-cta{min-height:56px;font-size:1.05rem}
  .hero-actions .hero-explore{font-size:.9rem}
  .hero-condition{margin-top:16px;font-size:.68rem}
  .hero-photo{height:230px}
  .hero-frame{transform:rotate(1.5deg)}
  .hero-chip{font-size:.78rem;padding:7px 10px}
  .hero-badge{width:88px;height:88px;bottom:-22px;font-size:.72rem}.hero-badge strong{font-size:1.45rem}
}
/* Hero no celular: conteúdo centralizado */
@media (max-width:600px){
  .hero-copy{margin:0 auto;text-align:center}
  .hero h1{display:flex;flex-direction:column;align-items:center}
  .hero-title-main{transform-origin:center}
  .hero-title-bridge{margin-left:0}
  .hero-title-price{margin-left:auto;margin-right:auto}
  .hero .lead{text-align:center}
  .hero-condition{margin-left:auto;margin-right:auto;text-align:center}
}
/* Foto do hero no mesmo formato do arquivo (1131x1038): o navegador não amplia a imagem nem recorta pixels.
   A arte tem texto embutido (selo "Pague Fácil" à esquerda e frase no rodapé), então nada pode ser cortado */
.hero .hero-photo{height:auto;aspect-ratio:1131/1038}
/* Selos flutuantes fora do texto da arte: "Semipresencial" vai para a direita e "1.051 cursos" para o topo */
.hero-chip-2{left:auto;bottom:auto;right:-6%;top:62%}
.hero-badge{bottom:auto;top:-34px;right:6%}
@media (max-width:600px){
  .hero-chip-2{left:auto;bottom:auto;right:-2%;top:64%}
  .hero-badge{bottom:auto;top:-18px;right:4%}
}

/* Foto nítida: quadro reto (girar a foto obriga o navegador a reamostrar os pixels) */
.hero-frame{transform:none}
@media (max-width:600px){.hero-frame{transform:none}}

/* Faixa inclinada: as pontas da faixa girada passavam da tela e o iPhone deixava rolar a página para o lado
   (o Safari não respeita overflow no body). O contêiner corta as pontas; o padding vertical preserva a sombra
   e a margem negativa compensa o padding, então a posição da faixa não muda */
.ticker-clip{position:relative;z-index:2;overflow:hidden;margin:-56px 0 -50px;padding:30px 0 50px;pointer-events:none}
.ticker-clip .ticker{margin:0;pointer-events:auto}
@media (max-width:600px){.ticker-clip{margin-top:-50px}}

/* Celulares estreitos: busca com campo e botão empilhados (lado a lado o campo ficava com ~90px)
   e botões de largura total, sem quebrar o texto em duas linhas */
@media (max-width:420px){
  .choice-search-field{flex-direction:column}
  .choice-search .button,.choice-test .button{width:100%;justify-content:center}
}
@media (max-width:374px){
  .choice-test,.choice-search{padding:24px 20px}
  .choice-test .button{padding:0 16px}
}