/* ==========================================================================================================
   ML ORIGINS — PÁGINA INICIAL "ALVORADA"
   O M do logotipo é uma cordilheira: duas montanhas e um vale. É no vale que o sol nasce.
   A página é um único amanhecer: céu de alvorada no topo, seções de dia no meio, uma noite de estrelas para as redes.
   Cores com significado: verde = português, azul = inglês, violeta = espanhol (as mesmas do programa de edição).
   Texto grande e de alto contraste de propósito: boa parte de quem chega pelas redes tem mais de 45 anos.
   ========================================================================================================== */

@font-face{font-family:'Bricolage';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-ext-wdth-normal.woff2) format('woff2-variations'),url(/assets/fonts/bricolage-grotesque-latin-ext-wdth-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-wdth-normal.woff2) format('woff2-variations'),url(/assets/fonts/bricolage-grotesque-latin-wdth-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2-variations'),url(/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noite:#080826; --noite-2:#12104A; --indigo:#171352;
  --papel:#F3F2FF; --papel-2:#E7E6FF; --tinta:#15123F; --tinta-2:#4A4876; --linha:rgba(21,18,63,.16);
  --sol:#FFC24D; --sol-2:#FF7A59; --coral:#FF6A52;
  --pt:#12B886; --en:#2F8BFF; --es:#8B5CF6;
  --pt-c:#41E8B2; --en-c:#6BBBFF; --es-c:#B79BFF;
  --f-d:'Bricolage',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-c:'Atkinson',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(1.25rem,4.4vw,4.5rem); --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--papel);color:var(--tinta);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5.5rem}
body{font:400 1.125rem/1.62 var(--f-c);min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:6px}
::selection{background:var(--sol);color:#2A1700}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--sol);color:#2A1700;padding:.8rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none;transition:top .2s}
.pular:focus{top:1rem}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--f-d);font-weight:800;font-stretch:78%;letter-spacing:-.022em;line-height:.96;text-wrap:balance}
h2{font-size:clamp(2.4rem,6vw,5rem)}
.lead{font-size:clamp(1.15rem,1.7vw,1.36rem);line-height:1.55;max-width:38rem;margin-top:1.1rem;text-wrap:pretty}
p{text-wrap:pretty}

/* ─────────────── BOTÕES ─────────────── */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.2rem;padding:.8rem 1.6rem;border-radius:999px;border:1.5px solid transparent;font:700 1.06rem/1.1 var(--f-c);text-decoration:none;cursor:pointer;text-align:center;transition:transform .25s,box-shadow .3s,background .25s,border-color .25s}
.botao:active{transform:scale(.98)}
.botao--sol{background:linear-gradient(135deg,#FFD66B,#FF7A59);color:#2A1100;box-shadow:0 12px 38px -12px rgba(255,122,89,.8)}
@media (hover:hover){.botao--sol:hover{transform:translateY(-2px);box-shadow:0 18px 46px -10px rgba(255,122,89,.95)}}
.botao--vidro{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover){.botao--vidro:hover{background:rgba(255,255,255,.24);border-color:#fff}}

/* ─────────────── TOPO: uma ilha de vidro que serve sobre o céu e sobre o papel ─────────────── */
.topo{position:fixed;top:max(.8rem,env(safe-area-inset-top));left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 .9rem;pointer-events:none}
.topo__ilha{pointer-events:auto;position:relative;width:min(1180px,100%);display:flex;align-items:center;gap:1.4rem;padding:.5rem .55rem .5rem 1.1rem;border-radius:999px;background:rgba(14,11,58,.55);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:0 14px 40px -18px rgba(8,8,38,.7);transition:background .4s}
.topo--rolou .topo__ilha{background:rgba(14,11,58,.82)}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.marca__sinal{filter:drop-shadow(0 0 12px rgba(255,194,77,.5))}
.marca__nome{font:800 1.2rem/1 var(--f-d);font-stretch:82%;letter-spacing:-.005em}
.topo__nav{margin-left:auto;display:flex;gap:1.8rem}
.topo__nav a{padding:.45rem 0;text-decoration:none;font-weight:600;color:rgba(255,255,255,.8);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.topo__nav a[aria-current]{color:#fff;border-color:var(--sol)}
@media (hover:hover){.topo__nav a:hover{color:#fff;border-color:var(--sol)}}
.idiomas{display:flex;gap:.12rem;padding:.16rem;border-radius:999px;background:rgba(255,255,255,.1)}
.idiomas__b{display:inline-flex;align-items:center;justify-content:center;min-width:2.8rem;min-height:2.3rem;padding:.2rem .8rem;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;color:rgba(255,255,255,.82);transition:background .2s,color .2s}
@media (hover:hover){.idiomas__b:hover{color:#fff;background:rgba(255,255,255,.16)}}
.idiomas__b[aria-current="true"]{background:#fff;color:var(--tinta)}
.topo__menu{display:none;min-height:2.4rem;padding:.3rem 1rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:transparent;font-weight:700;cursor:pointer}

/* ─────────────── ALVORADA (hero): uma tela, sem prender a rolagem ─────────────── */
.hero{position:relative;background:var(--indigo)}
.hero__palco{position:relative;height:clamp(700px,94vh,980px);height:clamp(700px,94svh,980px);overflow:hidden;background:linear-gradient(180deg,#04051C 0%,#080C38 36%,#101456 62%,#1C1B68 80%,#0A0730 100%)}
.sem-js .hero__palco{background:linear-gradient(180deg,#171352 0%,#4B2F8F 45%,#D9507C 78%,#FFAE5A 100%)}
.hero__fundo,.hero__terra{position:absolute;inset:0;width:100%;height:100%}
/* o letreiro do fundo (logotipo ML + Origins): vetor único, escala uniforme; a luz do sol por trás é feita por degradês que o JS move */
.hero__lockup{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 34px rgba(8,8,38,.28))}
.lk-palavra{font-family:var(--f-d);font-weight:800;font-stretch:75%;letter-spacing:-.045em}
.hero__lockup{opacity:0}.hero__lockup.pronto,.sem-js .hero__lockup{opacity:1}.hero__lockup.pronto{transition:opacity 1.4s ease}
.hero__texto{position:absolute;left:var(--pad);bottom:calc(clamp(50px,7vw,100px) + 1.1rem);max-width:min(37rem,46vw);color:#fff}
.hero__texto::before{content:"";position:absolute;inset:-4rem -6rem -3rem -4rem;z-index:-1;background:radial-gradient(70% 80% at 30% 55%,rgba(8,8,38,.62),rgba(8,8,38,0) 72%);pointer-events:none}
.hero__texto h1{font-size:clamp(2.4rem,min(5.2vw,8vh),5rem);font-stretch:76%;line-height:.92;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(8,8,38,.45)}
.hero__lead{margin-top:.9rem;font-size:clamp(1.05rem,min(1.4vw,2.5vh),1.26rem);max-width:32rem;color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(8,8,38,.6)}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.pausa{position:absolute;right:var(--pad);bottom:calc(clamp(50px,7vw,100px) + 1.1rem);display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.3rem 1rem .3rem .8rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:rgba(8,8,38,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:.92rem;cursor:pointer;transition:background .25s,border-color .25s}
.pausa svg{width:1.15rem;height:1.15rem}
@media (hover:hover){.pausa:hover{background:rgba(8,8,38,.62);border-color:#fff}}
.hero__ponte{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,7vw,100px);fill:var(--tinta);z-index:3;pointer-events:none}

/* Siga o canal: os cinco perfis do idioma da página, a um toque */
.seguir{margin-top:1.25rem}
.seguir__rotulo{font-weight:700;font-size:1rem;color:rgba(255,255,255,.9);margin-bottom:.65rem}
.seguir__lista{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem .8rem}
.seguir__item{display:grid;justify-items:center;gap:.3rem;width:4rem;text-decoration:none;color:#fff}
.seguir__bolha{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .3s}
.seguir__bolha svg{width:1.55rem;height:1.55rem}
.seguir__nome{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(8,8,38,.7)}
.seguir__item:focus-visible .seguir__bolha{transform:translateY(-3px);background:rgba(255,255,255,.28);border-color:#fff;box-shadow:0 10px 26px -10px rgba(255,194,77,.95)}
@media (hover:hover){.seguir__item:hover .seguir__bolha{transform:translateY(-3px);background:rgba(255,255,255,.28);border-color:#fff;box-shadow:0 10px 26px -10px rgba(255,194,77,.95)}}
.seguir__item.is-origem .seguir__bolha{background:linear-gradient(135deg,#FFD66B,#FF7A59);border-color:transparent;color:#2A1100;box-shadow:0 0 0 5px rgba(255,194,77,.3),0 10px 28px -8px rgba(255,122,89,.9);animation:pulso 2.6s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 4px rgba(255,194,77,.28),0 10px 28px -8px rgba(255,122,89,.9)}50%{box-shadow:0 0 0 9px rgba(255,194,77,.12),0 10px 28px -8px rgba(255,122,89,.9)}}
.seguir__dica{margin-top:.7rem;font-weight:700;color:#FFE3A8;text-shadow:0 1px 10px rgba(8,8,38,.7)}

/* faixa com os nomes dos três canais */
.faixa{background:var(--tinta);color:var(--papel);overflow:hidden;padding:.4rem 0 1.4rem;position:relative;z-index:2}
.faixa__trilho{display:flex;width:max-content;animation:faixa 46s linear infinite}
@media (hover:hover){.faixa:hover .faixa__trilho{animation-play-state:paused}}
.faixa__metade{display:flex;flex:none}
.faixa__item{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font:800 clamp(1.9rem,4.8vw,3.8rem)/1.1 var(--f-d);font-stretch:76%;letter-spacing:-.012em;white-space:nowrap}
.faixa__item i{width:.62em;height:.62em;border-radius:50%;background:var(--c);box-shadow:0 0 18px var(--c)}
.faixa__item--pt{--c:var(--pt-c)}.faixa__item--en{--c:var(--en-c)}.faixa__item--es{--c:var(--es-c)}
@keyframes faixa{to{transform:translateX(-50%)}}

/* ─────────────── PILARES ─────────────── */
.pilares{background:var(--papel);padding:clamp(3rem,6vw,5.4rem) var(--pad)}
.pilar{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:clamp(64px,8vw,96px) minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1rem,3.4vw,3.4rem);align-items:center;padding:clamp(1.6rem,3.6vw,2.8rem) 0;border-top:1.5px solid var(--linha)}
.pilar:last-child{border-bottom:1.5px solid var(--linha)}
.pilar__icone{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pilar:hover .pilar__icone{transform:rotate(-8deg) scale(1.08)}}
.pilar h2{font-size:clamp(2.1rem,5.4vw,4.6rem);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pilar:hover h2{transform:translateX(.6rem)}}
.pilar p{color:var(--tinta-2);font-size:clamp(1.1rem,1.5vw,1.28rem);max-width:30rem}

/* ─────────────── HISTÓRIAS: as seis cenas à vista, sem rolar para o lado ─────────────── */
.historias{background:var(--papel-2);padding:clamp(3.2rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.historias__cab{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.historias__ctrl{display:none}
.cenas{max-width:var(--max);margin:clamp(1.8rem,4vw,3rem) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.3rem)}
.cena{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;margin:0;background:#1a1450;box-shadow:0 24px 46px -24px rgba(21,18,63,.7);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;isolation:isolate}
@media (hover:hover){.cena:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 34px 58px -24px rgba(21,18,63,.8)}}
.cena__arte{position:absolute;inset:0;width:100%;height:100%}
.cam{transform-box:view-box;transform-origin:50% 50%;transform:translate(calc(var(--nx)*var(--d)*-18px),calc(var(--ny)*var(--d)*-11px)) scale(1.09);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cena figcaption{position:absolute;left:0;right:0;bottom:0;padding:3.6rem 1rem 1rem;color:#fff;background:linear-gradient(180deg,rgba(8,8,38,0),rgba(8,8,38,.8));display:flex;flex-direction:column;gap:.1rem}
.cena figcaption span{font-weight:600;font-size:.9rem;color:rgba(255,255,255,.85)}
.cena figcaption b{font:800 clamp(1.25rem,1.7vw,1.7rem)/1 var(--f-d);font-stretch:80%;letter-spacing:-.015em}
.historias__dica{display:none;padding:0 var(--pad);color:var(--tinta-2);font-size:1rem}
@media (min-width:1180px){.cenas{grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}.cena{border-radius:20px}}
@media (max-width:759px){
  .cenas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;max-width:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .cenas::-webkit-scrollbar{display:none}
  .cena{flex:none;width:min(70vw,280px);scroll-snap-align:center}
  .historias__dica{display:block}
}

/* ─────────────── REDES: a noite das constelações VIVAS ─────────────── */
.redes{position:relative;background:linear-gradient(180deg,var(--noite) 0,#0E0C3C 100%);color:#EDEBFF;padding:clamp(3.6rem,7vw,6rem) var(--pad) clamp(3rem,6vw,5rem);overflow:hidden;--ouro:#FFC24D}
.redes__ceu{position:absolute;inset:0;width:100%;height:100%}
.redes__cab,.constelacoes,.contador{position:relative}
.redes__cab{max-width:var(--max);margin:0 auto}
.redes__cab .lead{color:rgba(237,235,255,.82)}
.redes__dica{margin-top:1rem;color:rgba(237,235,255,.7);font-size:1rem}
.constelacoes{max-width:var(--max);margin:clamp(2.4rem,6vw,4.6rem) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,3rem)}
/* fora da tela, todo movimento da seção pausa (economiza bateria) */
.constelacoes.fora *,.constelacoes.fora *::before,.constelacoes.fora *::after{animation-play-state:paused!important}
.const{margin:0;position:relative;transition:opacity .6s,filter .6s}
.const--pt{--c:var(--pt-c)}.const--en{--c:var(--en-c)}.const--es{--c:var(--es-c)}
/* ao apontar uma constelação, as outras recuam e ela ganha a cena */
.constelacoes[data-foco] .const:not(.is-foco){opacity:.45;filter:saturate(.6)}
.const__ceu{position:relative;aspect-ratio:1/.96;margin:0 1.4rem;animation:flutua 9s ease-in-out infinite}
/* mirar numa estrela é mais fácil se ela fica parada: a constelação para de flutuar enquanto o mouse (ou o foco do teclado) está sobre ela */
.const:focus-within .const__ceu{animation-play-state:paused}
@media (hover:hover){.const:hover .const__ceu{animation-play-state:paused}}
.const--en .const__ceu{animation-duration:11s;animation-delay:-3.5s}
.const--es .const__ceu{animation-duration:10s;animation-delay:-6s}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* os fios: linha fina de luz + aura; a linha se desenha na entrada e um pulso de luz viaja por ela */
.const__fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fio{fill:none;stroke:var(--c);stroke-width:.42;stroke-linecap:round;opacity:.55;stroke-dasharray:1;stroke-dashoffset:0;transition:opacity .35s,stroke-width .35s,stroke .5s}
.fio__aura{fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;opacity:0;transition:opacity .4s,stroke .5s}
.fio.is-viva{opacity:1;stroke-width:.7}
.fio__aura.is-viva{opacity:.28}
.fio--ouro{stroke:var(--ouro);opacity:.85}.fio__aura.fio--ouro{stroke:var(--ouro);opacity:.14}
.pulso__halo{fill:var(--c);opacity:.34}.pulso__nucleo{fill:#fff}
.pulso--rajada .pulso__halo{opacity:.55}
html[data-calmo="1"] .pulso{display:none}

/* a entrada: cada constelação se acende sozinha quando chega à tela (estrelas surgem, fios se desenham, o nome aparece) */
.const--pre .fio{stroke-dashoffset:1}
.const--pre .estrela{opacity:0;scale:.25}
.const--pre .estrela,.const--acesa:not(.const--pronta) .estrela{pointer-events:none}   /* só reage ao mouse quando a entrada terminou */
.const--pre figcaption{opacity:0;transform:translateY(12px)}
.const--acesa .fio{transition:stroke-dashoffset .8s ease calc(.45s + var(--i)*.22s),opacity .35s,stroke-width .35s,stroke .5s}
.const--acesa .estrela{transition:opacity .5s ease calc(.1s + var(--k)*.15s),scale .8s cubic-bezier(.2,1.5,.3,1) calc(.1s + var(--k)*.15s)}
.const--acesa figcaption{transition:opacity .7s ease 1s,transform .7s ease 1s}

/* a estrela: aura com brilho em cruz, órbita com um satélite de luz que gira, e o ícone da rede para reconhecer */
.estrela{--s:3.5rem;position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-decoration:none;z-index:1}
.estrela__aura{position:absolute;left:50%;top:50%;width:calc(var(--s)*3.1);height:calc(var(--s)*3.1);translate:-50% -50%;border-radius:50%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 85%,#fff) 50%,transparent) center/84% 1.5px no-repeat,linear-gradient(0deg,transparent,color-mix(in srgb,var(--c) 85%,#fff) 50%,transparent) center/1.5px 84% no-repeat,radial-gradient(circle,color-mix(in srgb,var(--c) 50%,transparent) 0,color-mix(in srgb,var(--c) 16%,transparent) 42%,transparent 66%);}
@keyframes gira{from{rotate:0deg}to{rotate:360deg}}
.estrela__orbita{position:absolute;left:50%;top:50%;width:calc(var(--s)*1.5);height:calc(var(--s)*1.5);translate:-50% -50%;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--c) 52%,transparent);pointer-events:none;animation:gira 20s linear infinite;animation-delay:calc(var(--k)*-3.3s);transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),border-color .4s}
.estrela__orbita::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px var(--c)}
.estrela__corpo{position:relative;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;color:#0B0A30;background:radial-gradient(circle at 34% 28%,#fff 0,color-mix(in srgb,var(--c) 70%,#fff) 30%,var(--c) 64%,color-mix(in srgb,var(--c) 55%,#0b0a30) 100%);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 14px color-mix(in srgb,var(--c) 75%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.estrela__corpo svg{width:54%;height:54%}
@keyframes cintila{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.estrela.is-ativa .estrela__corpo{animation:none;transform:scale(1.2);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 30%,transparent),0 0 38px var(--c),0 0 96px var(--c)}
.estrela:focus-visible .estrela__corpo{animation:none;transform:scale(1.2);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 30%,transparent),0 0 38px var(--c),0 0 96px var(--c)}
@media (hover:hover){.estrela:hover .estrela__corpo{animation:none;transform:scale(1.2);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 30%,transparent),0 0 38px var(--c),0 0 96px var(--c)}}
.estrela.is-ativa .estrela__orbita{width:calc(var(--s)*1.85);height:calc(var(--s)*1.85);border-color:var(--c);animation-duration:6s}
.estrela:focus-visible .estrela__orbita{width:calc(var(--s)*1.85);height:calc(var(--s)*1.85);border-color:var(--c);animation-duration:6s}
@media (hover:hover){.estrela:hover .estrela__orbita{width:calc(var(--s)*1.85);height:calc(var(--s)*1.85);border-color:var(--c);animation-duration:6s}}
.estrela:focus-visible{outline:none}.estrela:focus-visible .estrela__corpo{outline:3px solid #fff;outline-offset:6px}
.estrela.ping .estrela__corpo{animation:eco .75s ease-out}
@keyframes eco{0%{transform:scale(1);box-shadow:0 0 0 0 var(--c),0 0 26px var(--c)}45%{transform:scale(1.16)}100%{transform:scale(1);box-shadow:0 0 0 22px transparent,0 0 26px var(--c)}}
.estrela__rotulo{position:absolute;top:100%;margin-top:.7rem;display:flex;flex-direction:column;align-items:center;white-space:nowrap;font-weight:700;font-size:.98rem;color:#fff;text-shadow:0 1px 10px #080826}
.estrela__rotulo small{display:none;font-weight:500;font-size:.84rem;color:rgba(237,235,255,.82)}
/* visitada: a estrela fica dourada (órbita, satélite e anel) e os fios entre duas visitadas também */
.estrela--visitada .estrela__orbita{border-color:var(--ouro)}
.estrela--visitada .estrela__orbita::after{background:var(--ouro);box-shadow:0 0 12px 3px var(--ouro)}
.estrela--visitada .estrela__corpo{box-shadow:0 0 0 5px color-mix(in srgb,var(--ouro) 38%,transparent),0 0 14px color-mix(in srgb,var(--c) 75%,transparent)}

/* o cartão ao apontar uma estrela: a rede, o @ e a ação (mostra para onde o clique leva) */
.cartao{position:absolute;z-index:6;left:0;top:0;display:flex;align-items:center;gap:.7rem;padding:.55rem .95rem .55rem .6rem;border-radius:16px;background:rgba(12,10,56,.92);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 40px -12px rgba(0,0,0,.7),0 0 34px -8px var(--c);color:#fff;white-space:nowrap;opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.2,.9,.3,1.25)}
.cartao.is-on{opacity:1;transform:none}
.cartao__icone{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--c);color:#0B0A30;flex:none}.cartao__icone svg{width:55%;height:55%}
.cartao__txt{display:grid;line-height:1.22}.cartao__nome{font-size:.98rem}.cartao__arroba{font-size:.84rem;color:rgba(237,235,255,.88)}
.cartao__abrir{font-style:normal;font-weight:700;font-size:.76rem;color:var(--c)}.cartao__abrir::after{content:" ↗"}
@media (hover:none){.cartao{display:none}}

/* a legenda: nome do idioma, "Seu idioma", progresso e a recompensa de completar */
.const figcaption{margin-top:3.6rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem}
.const figcaption b{font:800 clamp(1.7rem,2.6vw,2.2rem)/1 var(--f-d);font-stretch:80%;letter-spacing:-.015em;color:var(--c)}
.const figcaption span{color:rgba(237,235,255,.82)}
.const__info{display:block;min-height:1.7rem;margin-top:.4rem;font-style:normal;font-weight:700;font-size:.9rem;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s}
.const__info.is-on{opacity:1;transform:none}
.const__seu{margin-top:.55rem;font-style:normal;font-weight:800;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#0B0A30;background:var(--c);padding:.22rem .75rem;border-radius:999px;box-shadow:0 0 18px -2px var(--c)}
.const--seu .estrela__aura{opacity:.85}
.const__prog{display:flex;gap:.5rem;margin-top:.8rem}
.const__prog i{width:.58rem;height:.58rem;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c) 75%,transparent);transition:background .4s,border-color .4s,box-shadow .4s}
.const__prog i.on{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 10px var(--ouro)}
.const__completa{margin-top:.6rem;font-style:normal;font-weight:700;font-size:.82rem;color:var(--ouro);border:1px solid color-mix(in srgb,var(--ouro) 60%,transparent);padding:.2rem .8rem;border-radius:999px;box-shadow:0 0 20px -4px var(--ouro);animation:surge .8s cubic-bezier(.2,1.4,.3,1)}
.const__completa[hidden]{display:none}
@keyframes surge{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.contador{max-width:var(--max);margin:clamp(2.4rem,5vw,3.6rem) auto 0;color:rgba(237,235,255,.84);font-size:1rem;min-height:1.6rem}
.contador b{color:#fff;display:inline-block}
.contador.mudou b{animation:salta .6s cubic-bezier(.2,1.6,.3,1)}
@keyframes salta{0%{transform:scale(1)}40%{transform:scale(1.7);color:var(--ouro)}100%{transform:scale(1)}}
/* aparelho fraco (a página mede o próprio desempenho): nível 1 para a flutuação; nível 2 também a órbita, a rotação e os pulsos */
html[data-q="1"] .const__ceu{animation:none}
html[data-q="2"] .estrela__orbita{animation:none}
html[data-q="2"] .pulso{display:none}
@media (max-width:860px){.const--seu{order:-1}.constelacoes{gap:3rem}}

/* ─────────────── CURSOS: duas portas em arco ─────────────── */
.cursos{background:var(--papel);padding:clamp(3rem,6.5vw,5.6rem) var(--pad)}
.cursos__cab{max-width:var(--max);margin:0 auto}
.cursos__cab .lead{color:var(--tinta-2)}
.portas{max-width:var(--max);margin:clamp(2.4rem,5vw,4rem) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2.6rem);align-items:stretch}
.porta{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;min-height:34rem;justify-content:flex-end;padding:clamp(5rem,12vw,9rem) clamp(1.4rem,3.4vw,3rem) clamp(1.8rem,3vw,2.6rem);border-radius:50% 50% 30px 30px / 34% 34% 30px 30px;text-decoration:none;overflow:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s}
.porta::before{content:"";position:absolute;left:50%;top:6%;width:23%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--aro);opacity:.9;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.porta:hover{transform:translateY(-10px)}}
@media (hover:hover){.porta:hover::before{transform:translateX(-50%) translateY(-14%) scale(1.12)}}
.porta--aula{background:var(--sol);color:#2A1700;--aro:#FF7A59;box-shadow:0 30px 60px -30px rgba(255,122,89,.9)}
.porta--curso{background:var(--tinta);color:var(--papel);--aro:#6B7CFF;box-shadow:0 30px 60px -30px rgba(21,18,63,.9)}
.porta__tag{position:relative;display:inline-flex;padding:.3rem .95rem;border-radius:999px;font-weight:700;font-size:.95rem;background:rgba(255,255,255,.28)}
.porta--curso .porta__tag{background:rgba(255,255,255,.14)}
.porta__nome{position:relative;font:800 clamp(2.4rem,5vw,4.2rem)/.94 var(--f-d);font-stretch:76%;letter-spacing:-.025em;text-wrap:balance}
.porta__texto{position:relative;max-width:22rem;font-size:1.12rem;opacity:.9}
.porta__cta{position:relative;display:inline-flex;align-items:center;gap:.6rem;margin-top:.5rem;font-weight:700;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.porta__cta svg{width:1.3rem;height:1.3rem;transition:transform .3s}
@media (hover:hover){.porta:hover .porta__cta svg{transform:translateX(5px)}}

/* ─────────────── SOBRE ─────────────── */
.sobre{background:var(--papel);padding:clamp(2.4rem,5vw,4.4rem) var(--pad) clamp(6rem,11vw,9rem)}
.sobre__grade{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:end;border-top:1.5px solid var(--linha);padding-top:clamp(2.4rem,5vw,4.4rem)}
.sobre h2{font-size:clamp(2.4rem,5.8vw,4.9rem)}
.sobre__texto{display:flex;flex-direction:column;gap:1.1rem;color:var(--tinta-2)}
.sobre__texto p{max-width:34rem}
.sobre__contato{color:var(--tinta)}
.sobre__contato a{font-weight:700;color:var(--tinta);text-decoration-color:var(--sol-2);text-decoration-thickness:2px}

/* ─────────────── RODAPÉ ─────────────── */
.rodape{position:relative;background:var(--noite);color:#EDEBFF;padding:clamp(2.6rem,6vw,5rem) var(--pad) 2.2rem;overflow:hidden}
.rodape__borda{display:block;position:relative;z-index:1;width:100%;height:clamp(60px,8vw,120px);margin-top:calc(-1*clamp(60px,8vw,119px));fill:var(--noite);pointer-events:none}
.rodape__sinal{position:absolute;right:-2vw;bottom:-3vw;width:clamp(240px,34vw,520px);height:auto;opacity:.07;pointer-events:none}
.rodape__grade{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:1.6rem 3rem;align-items:end}
.rodape__frase{grid-column:1/-1;font:800 clamp(2.4rem,7vw,6rem)/.92 var(--f-d);font-stretch:76%;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.rodape__links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.rodape__links a{color:rgba(237,235,255,.82);text-decoration:none;font-weight:600;padding:.3rem 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
@media (hover:hover){.rodape__links a:hover{color:#fff;border-color:var(--sol)}}
.rodape .idiomas{background:rgba(255,255,255,.1)}
.rodape__copy{color:rgba(237,235,255,.6);font-size:.95rem}
.rodape__enviar{display:inline-flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:.4rem 1.2rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s}
.rodape__enviar svg{width:1.2rem;height:1.2rem}
@media (hover:hover){.rodape__enviar:hover{background:rgba(255,255,255,.12);border-color:#fff}}
.rodape__topo{justify-self:end;display:inline-flex;align-items:center;gap:.5rem;color:rgba(237,235,255,.8);text-decoration:none;font-weight:600}
.rodape__topo svg{width:1.2rem;height:1.2rem}
@media (hover:hover){.rodape__topo:hover{color:#fff}}

/* ─────────────── RESPONSIVO ─────────────── */
@media (max-width:1000px){
  .constelacoes{grid-template-columns:1fr;max-width:460px}
  .const figcaption{margin-top:3.2rem}
  .portas{grid-template-columns:1fr}
  .sobre__grade{grid-template-columns:1fr;align-items:start}
  .pilar{grid-template-columns:clamp(56px,14vw,84px) minmax(0,1fr)}
  .pilar p{grid-column:2}
}
@media (max-width:860px){
  .topo__menu{display:inline-flex;align-items:center;margin-left:auto}
  .topo__ilha{gap:.6rem;padding-left:.9rem}
  .topo__nav{position:absolute;left:0;right:0;top:calc(100% + .5rem);margin:0;flex-direction:column;gap:0;padding:.5rem 1.2rem 1rem;border-radius:26px;background:rgba(14,11,58,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
  .topo--aberto .topo__nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .topo__nav a{padding:1rem 0;font-size:1.2rem;border-bottom:1px solid rgba(255,255,255,.14)}
  .hero__palco{height:auto;min-height:max(92vh,780px);min-height:max(92svh,780px)}
  .hero__texto{position:relative;left:auto;bottom:auto;max-width:none;padding:var(--topo-texto,430px) var(--pad) 1.2rem}
  .hero__texto::before{inset:-1.5rem -1rem -2rem -1rem;background:linear-gradient(180deg,rgba(8,8,38,0),rgba(8,8,38,.62) 14%)}
  .pausa{position:relative;right:auto;bottom:auto;margin:0 var(--pad) 1.6rem}
  .historias__cab{flex-direction:column;align-items:flex-start}
  .historias__ctrl{display:none}
  .rodape__grade{grid-template-columns:1fr}
  .rodape__topo{justify-self:start}
}
@media (max-width:560px){
  body{font-size:1.1rem}
  .seguir__lista{gap:.5rem .35rem;flex-wrap:nowrap}.seguir__lista li{flex:1 1 0;min-width:0}.seguir__item{width:100%}.seguir__bolha{width:min(3.1rem,100%);height:auto;aspect-ratio:1}.seguir__nome{font-size:.76rem}
  .topo{padding:0 .6rem}
  .topo__ilha{padding:.4rem .4rem .4rem .8rem;gap:.4rem}
  .marca{gap:.45rem}.marca__sinal{width:30px;height:30px}.marca__nome{font-size:1rem;white-space:nowrap}
  .idiomas__b{min-width:2.2rem;min-height:2.2rem;padding-inline:.45rem;font-size:.85rem}
  .topo__menu{padding:.3rem .75rem;font-size:.92rem}
  .botao{width:100%}.hero__acoes{flex-direction:column}
  .porta{min-height:27rem}
  .faixa__item{gap:1rem;padding-right:1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .faixa__trilho{animation:none}
}

/* modo calmo: o botão "Pausar animações" e a preferência do aparelho desligam todo o movimento */
html[data-calmo="1"] *,html[data-calmo="1"] *::before,html[data-calmo="1"] *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-calmo="1"] .faixa__trilho{animation:none}

/* ─────────────── COMPATIBILIDADE: aparelhos e navegadores mais antigos (iOS 15, Android WebView antigo, navegador embutido de apps) ───────────────
   Cada bloco só vale onde o recurso moderno NÃO existe; nos demais navegadores é ignorado. Sem isto, uma única regra não entendida some inteira. */
.const--pt{--rgb:65,232,178}.const--en{--rgb:107,187,255}.const--es{--rgb:183,155,255}.redes{--ouro-rgb:255,194,77}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .estrela__aura{background:linear-gradient(90deg,transparent,rgba(var(--rgb),.95) 50%,transparent) center/84% 1.5px no-repeat,linear-gradient(0deg,transparent,rgba(var(--rgb),.95) 50%,transparent) center/1.5px 84% no-repeat,radial-gradient(circle,rgba(var(--rgb),.5) 0,rgba(var(--rgb),.16) 42%,transparent 66%)}
  .estrela__orbita{border:1.5px dashed rgba(var(--rgb),.52)}
  .estrela__corpo{background:radial-gradient(circle at 34% 28%,#fff 0,var(--c) 30%,var(--c) 64%,rgba(var(--rgb),.6) 100%);box-shadow:0 0 0 5px rgba(var(--rgb),.22),0 0 14px rgba(var(--rgb),.75)}
  .estrela.is-ativa .estrela__corpo,.estrela:focus-visible .estrela__corpo{box-shadow:0 0 0 7px rgba(var(--rgb),.3),0 0 38px var(--c),0 0 96px var(--c)}
  .estrela--visitada .estrela__corpo{box-shadow:0 0 0 5px rgba(var(--ouro-rgb),.38),0 0 14px rgba(var(--rgb),.75)}
  .cartao{border:1px solid rgba(var(--rgb),.55)}
  .const__prog i{border:1.5px solid rgba(var(--rgb),.75)}
  .const__completa{border:1px solid rgba(var(--ouro-rgb),.6)}
}
@supports not (color:color-mix(in srgb,red 50%,blue)){@media (hover:hover){.estrela:hover .estrela__corpo{box-shadow:0 0 0 7px rgba(var(--rgb),.3),0 0 38px var(--c),0 0 96px var(--c)}}}
@supports not (aspect-ratio:1/1){
  .cena::before{content:"";display:block;padding-top:177.78%}
  .const__ceu::before{content:"";display:block;padding-top:96%}
  .porta::before{height:0;padding-top:23%}
}
@supports not (translate:1px 1px){
  .estrela__aura,.estrela__orbita{transform:translate(-50%,-50%)}
}
@supports not (aspect-ratio:1/1){@media (max-width:560px){.seguir__bolha{height:3.1rem}}}