/*
 * A página inicial do Avaly no visual da nova versão das telas (desenho
 * "Avaly — index"). Só esta página usa este arquivo; os tokens são os de
 * resources/js/Layouts/v2.css.
 */
.ix{--paper:#F3F2EC;--surface:#FCFBF7;--sunken:#ECEBE4;--ink:#123D2E;--ink2:#44524B;--muted:#5F6B65;--line:#E2E0D6;--line2:#D2D0C4;--forest:#123D2E;--f700:#2C7258;--f100:#E3EEE6;--lime:#CDEB6E;--lime6:#B9DA52;--amber:#f59e0b;--ease:cubic-bezier(.2,.75,.15,1);--fd:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--fs:"Instrument Serif",Georgia,serif;--fu:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--fu);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ix *{box-sizing:border-box}
.ix h1,.ix h2,.ix h3,.ix p,.ix ol,.ix ul{margin:0}
.ix ol,.ix ul{padding:0;list-style:none}
.ix a{text-decoration:none}
.ix :focus-visible{outline:2px solid var(--lime6);outline-offset:3px}
.ix em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.1em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--f700)}
.h2{font-family:var(--fd);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.h2 em{color:var(--f700)}
.sub{color:var(--ink2);font-size:17px;max-width:560px;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .3s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--ink2)}
.btn:active{transform:scale(.97)}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.btn.lime:hover{background:var(--lime6);border-color:var(--lime6);box-shadow:0 14px 30px -14px rgba(205,235,110,.8)}
.btn.primary{background:var(--forest);border-color:var(--forest);color:#fff}
.btn.primary:hover{background:var(--f700);border-color:var(--f700);color:#fff;box-shadow:0 10px 24px -12px rgba(18,61,46,.7)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn.ghost:hover{border-color:#fff;color:#fff}
.btn .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.navlink{color:#B9CCC2;font-weight:500;font-size:14.5px;padding:12px 14px;border-radius:12px;transition:background .2s,color .2s}
.navlink:hover{color:#fff;background:rgba(255,255,255,.07)}
.dots{background-image:radial-gradient(rgba(205,235,110,.14) 1px,transparent 1.3px);background-size:16px 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 1px 2px rgba(10,42,31,.05);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.card.lift:hover{transform:translateY(-6px);box-shadow:0 26px 44px -24px rgba(10,42,31,.38);border-color:var(--line2)}
.tile{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--f100);color:var(--f700);transition:background .3s,color .3s,transform .45s var(--ease)}
.card.lift:hover .tile{background:var(--lime);color:var(--forest);transform:rotate(-6deg) scale(1.06)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.meter{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:99px;background:var(--lime);transform-origin:left center}

/* ---------- movimento ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(205,235,110,.55)}70%{box-shadow:0 0 0 10px rgba(205,235,110,0)}100%{box-shadow:0 0 0 0 rgba(205,235,110,0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes passo{0%,18%{background:rgba(255,255,255,.12);box-shadow:none}26%,100%{background:var(--lime);box-shadow:none}}
@keyframes passo-agora{0%,62%{background:rgba(255,255,255,.12);box-shadow:none}70%,100%{background:var(--lime);box-shadow:0 0 0 5px rgba(205,235,110,.2)}}
.in{animation:rise .9s var(--ease) backwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.42s}.d6{animation-delay:.52s}
.float{animation:float 7s ease-in-out infinite}
.live{width:9px;height:9px;border-radius:50%;background:var(--lime);display:inline-block;flex:none;animation:pulse 2.2s ease-out infinite}
.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.12)}
.bar.b1{animation:passo 6s var(--ease) infinite}
.bar.b2{animation:passo 6s var(--ease) 1s infinite}
.bar.b3{animation:passo 6s var(--ease) 2s infinite}
.bar.b4{animation:passo-agora 6s var(--ease) infinite}
.faixa{display:flex;width:max-content;animation:marquee 34s linear infinite}
.faixa-item{display:flex;align-items:center;gap:18px;padding:0 18px;font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:-.03em;white-space:nowrap}
.faixa-item::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--forest);opacity:.45}
/* Ao rolar: só quando o script marca a página, para nada sumir sem ele. */
.anima [data-ver]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anima [data-ver].visto{opacity:1;transform:none}
.anima [data-ver="2"]{transition-delay:.1s}.anima [data-ver="3"]{transition-delay:.2s}.anima [data-ver="4"]{transition-delay:.3s}
.anima .cresce>span{transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.anima .visto .cresce>span,.anima .cresce.visto>span{transform:scaleX(var(--parte,1))}
.linha-passos{position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--line2);transform-origin:left center}
.anima .linha-passos{transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.anima .visto>.linha-passos{transform:scaleX(1)}
.num{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:20px;background:var(--surface);border:1px solid var(--line2);color:var(--forest);position:relative;transition:background .3s,transform .45s var(--ease)}
.passo:hover .num{background:var(--lime);border-color:var(--lime);transform:translateY(-4px)}
.quem{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#DCE7E0;transition:background .3s,border-color .3s,transform .45s var(--ease)}
.quem:hover{background:rgba(255,255,255,.09);border-color:rgba(205,235,110,.4);transform:translateX(6px)}
.pe a{color:#B9CCC2}.pe a:hover{color:#fff}

/* ---------- planos ---------- */
.troca{display:inline-flex;flex-wrap:wrap;padding:4px;gap:2px;border-radius:999px;background:var(--sunken);border:1px solid var(--line)}
.troca button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:600;font-size:14px;color:var(--ink2);cursor:pointer;transition:background .3s var(--ease),color .2s,box-shadow .3s}
.troca button:hover{color:var(--ink)}
.troca button.on{background:var(--forest);color:#fff;box-shadow:0 6px 14px -8px rgba(18,61,46,.7)}
.plano-versao{background:var(--f100);color:var(--f700)}
.plano-desc{color:var(--ink2)}
.preco{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.preco strong{font-family:var(--fd);font-weight:700;font-size:52px;letter-spacing:-.045em;line-height:1}
.preco .moeda{font-weight:600;font-size:16px;color:var(--muted)}
.preco .periodo{font-size:15px;color:var(--muted)}
.preco.pulsoA{animation:pop .5s var(--ease)}
.preco.pulsoB{animation:pop2 .5s var(--ease)}
@keyframes pop2{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.preco{transform-origin:left center}
.plano-item{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2)}
.plano-item .ic{width:18px;height:18px;margin-top:2px;color:var(--f700)}
.plano-btn{background:var(--forest);border-color:var(--forest);color:#fff}
.plano-btn:hover{background:var(--f700);border-color:var(--f700);color:#fff}
.plano-conversa{align-self:center;font-size:13.5px;font-weight:600;min-height:32px;display:inline-flex;align-items:center}
/* O plano do meio em verde-floresta, para a grade ter um ponto de apoio. */
.plano.escuro{background:var(--forest);border-color:var(--forest);color:#fff}
.plano.escuro .plano-desc,.plano.escuro .plano-item{color:#DCE7E0}
.plano.escuro .preco .moeda,.plano.escuro .preco .periodo{color:#B9CCC2}
.plano.escuro .preco strong{color:var(--lime)}
.plano.escuro .plano-item .ic{color:var(--lime)}
.plano.escuro .plano-versao{background:rgba(255,255,255,.1);color:#DCE7E0}
.plano.escuro .plano-btn{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.plano.escuro .plano-btn:hover{background:var(--lime6);border-color:var(--lime6);color:var(--forest)}
.plano.escuro .plano-conversa{color:#B9CCC2}
.plano.escuro .plano-conversa:hover{color:#fff}
.recarga{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid #D2E3D7;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.recarga:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px rgba(10,42,31,.4)}
.recarga-nome{font-size:12.5px;font-weight:600;color:var(--f700)}
.recarga strong{font-family:var(--fd);font-weight:700;font-size:32px;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.recarga-nota{font-size:12.5px;color:var(--muted)}

/* ---------- telas estreitas ---------- */
@media (max-width:900px){
.wrap{padding:0 20px}
.so-largo{display:none !important}
.heroi{padding-top:36px !important;padding-bottom:64px !important}
.linha-passos{display:none}
.secao{padding-top:72px !important;padding-bottom:72px !important}
}
@media (prefers-reduced-motion:reduce){
.ix *,.ix *::before,.ix *::after{animation:none !important;transition:none !important}
.anima [data-ver]{opacity:1;transform:none}
.anima .cresce>span{transform:scaleX(var(--parte,1))}
.anima .linha-passos{transform:none}
.bar{background:var(--lime)}
}

/* ---------- a página ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:#F3F2EC}
.ix a{color:#2C7258}.ix a:hover{color:#123D2E}
.ix a.btn.lime,.ix a.btn.lime:hover{color:var(--forest)}
.ix a.btn.primary,.ix a.btn.primary:hover,.ix a.btn.ghost,.ix a.btn.ghost:hover,.ix a.btn.plano-btn,.ix a.btn.plano-btn:hover{color:#fff}
.ix a.btn{color:var(--ink)}
.ix a.navlink{color:#B9CCC2}.ix a.navlink:hover{color:#fff}
.ix .plano.escuro a.btn.plano-btn,.ix .plano.escuro a.btn.plano-btn:hover{color:var(--forest)}
.ix .pe a{color:#B9CCC2}.ix .pe a:hover{color:#fff}
.pular{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:12px;background:#CDEB6E;color:#123D2E;font-weight:600;text-decoration:none}
.pular:focus{top:16px}
/* As seções do menu cabem só em tela larga; abaixo disso, ficam a marca, o aluno e o Entrar. */
@media (max-width:1180px){.ix .navlink{display:none}}
/* No celular, Entrar fica ao lado da marca e o botão do aluno desce para a linha de baixo. */
@media (max-width:560px){.ix .nav-aluno{order:3;flex:1 1 100%;margin-left:0 !important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- planos: o seletor é só CSS (rádios escondidos + rótulos) ---------- */
.pricing-choice{display:flex;flex-direction:column;gap:24px}
.pricing-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pricing-toggle{align-self:flex-start}
.troca label{min-height:44px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;color:var(--ink2);cursor:pointer;transition:background .3s var(--ease),color .2s,box-shadow .3s}
.troca label:hover{color:var(--ink)}
#planos-com-ia:checked~.pricing-toggle label[for=planos-com-ia],#planos-sem-ia:checked~.pricing-toggle label[for=planos-sem-ia]{background:var(--forest);color:#fff;box-shadow:0 6px 14px -8px rgba(18,61,46,.7)}
#planos-com-ia:focus-visible~.pricing-toggle label[for=planos-com-ia],#planos-sem-ia:focus-visible~.pricing-toggle label[for=planos-sem-ia]{outline:2px solid var(--f700);outline-offset:3px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch}
.price-card{display:flex;flex-direction:column;gap:16px}
#planos-com-ia:checked~.pricing-grid .versao-sem-ia:not(.versao-unica),#planos-sem-ia:checked~.pricing-grid .versao-com-ia:not(.versao-unica){display:none}
#planos-sem-ia:checked~.pricing-grid .versao-sem-ia .preco,#planos-com-ia:checked~.pricing-grid .versao-com-ia .preco{animation:pop .5s var(--ease)}
.plan-version{font-size:12.5px;font-weight:600;color:var(--f700);margin-top:-8px}
.plano.escuro .plan-version{color:var(--lime)}
.price-badge{background:var(--lime);color:var(--forest)}
.recarga-link{margin-top:6px;font-size:13px;font-weight:600;min-height:32px;display:inline-flex;align-items:center}

/* ---------- dúvidas ---------- */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:border-color .3s,box-shadow .45s var(--ease)}
.faq details[open]{border-color:var(--line2);box-shadow:0 18px 30px -22px rgba(10,42,31,.35)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 20px;font-family:var(--fd);font-weight:650;font-size:17px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--f700);border-bottom:2px solid var(--f700);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 20px 20px;color:var(--ink2);font-size:15px;text-wrap:pretty}

/* ---------- rodapé ---------- */
.pe-coluna{display:flex;flex-direction:column;gap:10px;font-size:14px;align-items:flex-start}
.pe-coluna h2{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8FA89C;margin-bottom:4px}

/* ---------- a marca que se desenha (a mesma do menu do painel) ---------- */
.av-lg-a{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:22;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:av-lg-draw 3.4s cubic-bezier(.6,0,.2,1) infinite}
.av-lg-doc{opacity:0;animation:av-lg-doc 3.4s ease infinite}
.av-lg-h{transform-box:fill-box;transform-origin:20% 80%;opacity:0;animation:av-lg-head 3.4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes av-lg-draw{0%{stroke-dashoffset:1;fill-opacity:0;opacity:1}42%{stroke-dashoffset:0;fill-opacity:0}56%{fill-opacity:1;stroke-dashoffset:0}86%{fill-opacity:1;stroke-dashoffset:0;opacity:1}100%{fill-opacity:1;stroke-dashoffset:0;opacity:0}}
@keyframes av-lg-doc{0%,8%{opacity:0}24%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes av-lg-head{0%,48%{opacity:0;transform:translate(-18%,18%) scale(.3)}62%{opacity:1;transform:translate(0,0) scale(1.15)}70%{transform:scale(1)}86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.av-lg.uma-vez .av-lg-a{animation:av-lg-draw-1 2.2s cubic-bezier(.6,0,.2,1) .45s both}
.av-lg.uma-vez .av-lg-doc{animation:av-lg-doc-1 2.2s ease .45s both}
.av-lg.uma-vez .av-lg-h{animation:av-lg-head-1 2.2s cubic-bezier(.34,1.56,.64,1) .45s both}
.av-lg.parada .av-lg-a{animation:none;fill-opacity:1;stroke-dashoffset:0}
.av-lg.parada .av-lg-doc,.av-lg.parada .av-lg-h{animation:none;opacity:1}
@keyframes av-lg-draw-1{0%{stroke-dashoffset:1;fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}80%,100%{fill-opacity:1;stroke-dashoffset:0}}
@keyframes av-lg-doc-1{0%,10%{opacity:0}35%,100%{opacity:1}}
@keyframes av-lg-head-1{0%,68%{opacity:0;transform:translate(-18%,18%) scale(.3)}88%{opacity:1;transform:translate(0,0) scale(1.15)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.av-lg-a{animation:none;fill-opacity:1;stroke-dashoffset:0}.av-lg-doc,.av-lg-h{animation:none;opacity:1}}
.av-lg{display:block;flex:none}
@media print{.faixa,.float{display:none}}