/* ===== FalaMandra =====
Creme #FFF6E8 · Teal #0E4F4F · Coral #E86A4A
T33: o "Pôr do Sol" (gradiente pêssego→roxo da tela de vitória) foi removido — paleta única em todo o site. */
:root{
--creme:#FFF6E8;
--creme-card:#FFFDF6;
--teal:#0E4F4F;
--teal-suave:rgba(14,79,79,.62);
--teal-leve:rgba(14,79,79,.38);
--coral:#E86A4A;
--coral-escuro:#D95B3B;
--coral-glow:rgba(232,106,74,.32);
--coral-leve:rgba(232,106,74,.10);
--borda:rgba(14,79,79,.12);
--borda-ativa:rgba(232,106,74,.55);
--sombra:0 6px 24px rgba(14,79,79,.08);
/* T79: profundidade adicional (aditivo — nenhuma cor aprovada mudou) */
--lift:0 12px 30px rgba(14,79,79,.14);
--coral-tint:#FDECDD; --teal-tint:#F1ECDF;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--creme);color:var(--teal);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .8s ease}
h1,h2,.btn-primary{font-family:'Baloo 2','Nunito',sans-serif}
/* T168 - REGRA BASE DE IMAGEM. NAO REMOVER.
Os atributos width/height do ![]()
entram no CSS como "presentation hint".
Quando uma regra de classe define SO' a largura (era o caso de
.metodo-arte img{width:min(300px,70vw)}), o height do atributo sobrevive
e vira altura fixa: arte-metodo.webp (640x855) renderizava 300x855 em vez
de 300x401 na home, em /ingles/ e em /frances/ - esticada 2,13x.
height:auto mata essa classe inteira de defeito de uma vez; max-width:100%
e a metade mobile (imagem nunca estoura o container).
Regras de classe (.chat-avatar img, .faq .resposta img, .md-mandra img,
.pv-topo img) tem especificidade maior e continuam mandando - por isso
esta regra nao muda nada do que ja funcionava. */
img{max-width:100%;height:auto}
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 20s ease-in-out infinite}
.orb1{width:380px;height:380px;background:radial-gradient(circle,rgba(232,106,74,.18),transparent 70%);top:-120px;left:-90px}
.orb2{width:420px;height:420px;background:radial-gradient(circle,rgba(14,79,79,.10),transparent 70%);bottom:-140px;right:-110px;animation-delay:-7s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(36px,-26px) scale(1.08)}66%{transform:translate(-26px,18px) scale(.96)}}
.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px 24px;text-align:center;
animation:screenIn .55s cubic-bezier(.22,1,.36,1)}
.screen.active{display:flex}
.screen.saindo{animation:screenOut .18s ease forwards}
@keyframes screenIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes screenOut{to{opacity:0;transform:translateY(-12px) scale(.99)}}
/* ===== Header fixo do sistema ===== */
/* T80: barra de anúncio (announcement bar) — padrão SaaS profissional */
.topo-anuncio{position:relative;z-index:61;background:var(--teal);color:#FFF6E8;font-size:13px;font-weight:700;overflow:hidden}
/* T82: fade das pontas REMOVIDO a pedido do dono (22/07) — em % ele comia demais
a barra, principalmente no mobile; corte seco e limpo como Stripe/Linear. */
.ta-track{display:flex;width:max-content;padding:9px 0;animation:taRoda 40s linear infinite;white-space:nowrap;align-items:center}
.topo-anuncio:hover .ta-track{animation-play-state:paused}
@keyframes taRoda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ta-track span{display:inline-flex;align-items:center}
.ta-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--coral);margin:0 22px;flex-shrink:0}
.site-header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 20px;background:rgba(255,246,232,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.site-header .hdr-logo{height:30px;width:auto;display:block}
.header-chip{display:inline-flex;align-items:center;gap:6px;background:var(--creme-card);border:1px solid var(--borda);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:800;color:var(--teal)}
.header-chip[hidden]{display:none} /* T79-fix: [hidden] do UA é sobreposto por display:inline-flex; esta regra (0,2,0) vence e some de verdade na 1ª visita */
.header-chip .hc-lang{color:var(--coral-escuro)}
.btn-header{background:var(--coral);color:#FFF6E8;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;padding:9px 18px;border:none;border-radius:12px;cursor:pointer;transition:background .2s}
.btn-header:hover{background:var(--coral-escuro)}
/* ===== Hero em 2 colunas ===== */
.hero-duo{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;width:100%;max-width:1040px;margin:0 auto}
.hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-visual{display:flex;justify-content:center}
@media(min-width:860px){
.hero-duo{grid-template-columns:1.05fr .95fr;gap:40px}
.hero-txt{align-items:flex-start;text-align:left}
.hero-txt .idiomas-strip{justify-content:flex-start}
}
/* T06: mobile = headline + CTA acima da dobra, mascote compacta depois */
@media(max-width:859px){
#screen-home{padding-top:16px}
.hero-visual{order:2}
.hero-visual .mascote-wrap{width:min(185px,48vw);margin:4px 0 8px}
h1{font-size:clamp(27px,7.5vw,38px)}
.home-sub{margin-bottom:26px}
.idiomas-strip{margin-top:12px}
}
.topbar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:20px 24px 0;max-width:760px;width:100%;margin:0 auto;opacity:0;transition:opacity .4s;pointer-events:none}
.topbar.show{opacity:1;pointer-events:auto}
.back-btn{background:var(--creme-card);border:1px solid var(--borda);color:var(--teal-suave);
width:42px;height:42px;border-radius:12px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.back-btn:hover{border-color:var(--borda-ativa);color:var(--coral)}
.progress{flex:1;height:5px;background:rgba(14,79,79,.10);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--coral);border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.step-label{font-size:13px;font-weight:700;color:var(--teal-suave);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:34px;text-align:right}
.logo-home{width:min(300px,74vw);height:auto;margin-bottom:6px}
/* Mandra viva: corpo e chama em camadas — a chama tremula por conta própria */
.mascote-wrap{position:relative;width:min(280px,64vw);margin:10px 0 26px}
@media(min-width:860px){.hero-visual .mascote-wrap{width:min(380px,38vw);margin:0}}
@keyframes mascoteRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.02) translateY(-3px)}}
.mandra-rig{position:relative;width:100%;aspect-ratio:428/354;animation:mascoteRespira 4.5s ease-in-out infinite;transform-origin:50% 100%}
.mandra-rig .rig-corpo{position:absolute;inset:0;width:100%;height:100%}
.mandra-rig .rig-chama{position:absolute;left:4.2%;top:4.2%;width:23.8%;transform-origin:50% 94%;animation:chamaTremula 4.5s ease-in-out infinite}
.mandra-rig::before{content:"";position:absolute;left:6%;top:5%;width:20%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(232,106,74,.45),transparent 70%);filter:blur(12px);animation:chamaPulsa 4.5s ease-in-out infinite;pointer-events:none}
@keyframes chamaTremula{0%,100%{transform:scale(1) rotate(-3deg)}28%{transform:scale(1.18) rotate(3deg)}52%{transform:scale(1.07) rotate(-2deg)}78%{transform:scale(1.22) rotate(4deg)}}
@keyframes chamaPulsa{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.95;transform:scale(1.45)}}
/* olho em camadas anatômicas: globo fixo, íris+pupila móvel, pálpebra */
.rig-globo{position:absolute;pointer-events:none}
.rig-globo.esq{left:57.7%;top:25.4%;width:10.28%}
.rig-globo.dir{left:76.2%;top:25.4%;width:6.54%}
.rig-iris{position:absolute;pointer-events:none;will-change:transform}
.rig-iris.esq{left:59.8%;top:27.9%;width:6.07%}
.rig-iris.dir{left:77.6%;top:27.1%;width:3.74%}
.rig-palpebra{position:absolute;background:radial-gradient(ellipse at 50% 30%,#FDB050,#F09330);border-radius:50%;transform:scaleY(0);transform-origin:50% 8%;pointer-events:none;transition:transform .05s ease-in}
.rig-palpebra.esq{left:56.8%;top:24.4%;width:11.2%;height:14%}
.rig-palpebra.dir{left:75.4%;top:24.4%;width:8.2%;height:10.4%}
.rig-fagulhas{position:absolute;left:-3%;top:-14%;width:38%;height:52%;pointer-events:none}
.home-tag{display:inline-flex;align-items:center;gap:8px;background:var(--coral-leve);border:1px solid rgba(232,106,74,.35);color:var(--coral-escuro);font-size:13px;font-weight:800;padding:8px 16px;border-radius:99px;margin-bottom:26px;letter-spacing:.3px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--coral-glow)}50%{opacity:.65;box-shadow:0 0 0 6px transparent}}
h1{font-size:clamp(30px,7vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.01em;max-width:680px;margin-bottom:18px}
h1 .grad{color:var(--coral)}
.home-sub{font-size:clamp(16px,2.6vw,20px);color:var(--teal-suave);max-width:520px;margin-bottom:40px;line-height:1.6}
.home-sub strong{color:var(--teal);font-weight:800}
.btn-primary{position:relative;background:var(--coral);color:#FFF6E8;font-size:18px;font-weight:700;padding:19px 50px;border:none;border-radius:16px;cursor:pointer;
box-shadow:0 8px 26px var(--coral-glow);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .2s}
.btn-primary:hover{transform:translateY(-3px);background:var(--coral-escuro);box-shadow:0 14px 36px var(--coral-glow)}
.btn-primary:active{transform:translateY(0) scale(.97)}
/* T09: assinatura premium só no CTA primário */
.btn-primary{z-index:0}
.btn-primary::before{content:"";position:absolute;inset:-3px;border-radius:19px;z-index:-1;
background:linear-gradient(120deg,var(--coral),#FFCBA8,var(--coral));filter:blur(7px);opacity:0;transition:opacity .25s}
.btn-primary:hover::before{opacity:.75}
.hero-duo:has(.btn-primary:hover) .rig-chama{filter:brightness(1.18) drop-shadow(0 0 14px rgba(232,106,74,.85))}
.hero-duo:has(.btn-primary:hover) .mandra-rig::before{opacity:1;transform:scale(1.55)}
.rig-chama{transition:filter .3s ease}
.btn-secondary{background:transparent;border:1.5px solid var(--borda);color:var(--teal-suave);font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;padding:11px 22px;border-radius:12px;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--borda-ativa);color:var(--coral)}
.share-bloco{text-align:center;padding:26px 0 6px} /* T60 */
.share-feedback{display:none;margin-top:8px;font-size:13px;font-weight:700;color:var(--teal-suave)}
.home-note{margin-top:16px;font-size:14px;font-weight:600;color:var(--teal-leve)}
.home-link-resgate{margin-top:10px}
.home-link-resgate a{font-size:13px;font-weight:700;color:var(--teal-suave);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.home-link-resgate a:hover{color:var(--coral)}
.resgate-resultado{border-top:1px solid var(--borda);padding-top:14px}
.idiomas-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.idioma-pill{display:inline-flex;align-items:center;gap:7px;background:var(--creme-card);border:1.5px solid var(--borda);border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:800;box-shadow:var(--sombra)}
.idioma-pill .st{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:99px}
.idioma-pill.on{border-color:var(--borda-ativa)}
.idioma-pill.on .st{background:var(--coral-leve);color:var(--coral-escuro)}
.idioma-pill.off{opacity:.65}
.idioma-pill.off .st{background:rgba(14,79,79,.08);color:var(--teal-suave)}
.screen-title{font-size:clamp(26px,5vw,36px);font-weight:800;margin-bottom:10px;font-family:'Baloo 2',sans-serif}
.screen-desc{font-size:16px;color:var(--teal-suave);margin-bottom:38px;max-width:440px;line-height:1.5}
/* ===== Onboarding em chat com a Mandra ===== */
#screen-chat{justify-content:flex-start;padding-top:28px}
.chat-box{width:100%;max-width:520px;display:flex;flex-direction:column;gap:12px;text-align:left}
.chat-row{display:flex;align-items:flex-end;gap:10px;animation:bubbleIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chat-avatar{width:44px;height:44px;border-radius:50%;background:var(--creme-card);border:1.5px solid var(--borda);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.bubble{max-width:78%;padding:13px 17px;border-radius:18px;font-size:16px;line-height:1.5;font-weight:600}
.bubble.mandra{background:var(--creme-card);border:1.5px solid var(--borda);color:var(--teal);border-bottom-left-radius:6px;box-shadow:var(--sombra)}
.chat-row.user{justify-content:flex-end}
.bubble.aluno{background:var(--coral);color:#FFF6E8;border-bottom-right-radius:6px}
.typing{display:inline-flex;gap:5px;padding:6px 2px}
.typing span{width:8px;height:8px;border-radius:50%;background:var(--teal-leve);animation:tp 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chat-answers{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:6px;animation:bubbleIn .4s .1s both}
.chip{background:var(--creme-card);border:1.5px solid var(--borda-ativa);color:var(--coral-escuro);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;padding:12px 20px;border-radius:99px;cursor:pointer;transition:all .2s;box-shadow:var(--sombra)}
.chip:hover{background:var(--coral);color:#FFF6E8;transform:translateY(-2px)}
.chip:disabled{opacity:.45;cursor:not-allowed;border-color:var(--borda);color:var(--teal-leve)}
.chip .chip-sub{display:block;font-size:11px;font-weight:700;color:inherit;opacity:.75}
.name-form{display:flex;gap:10px;margin-top:6px;justify-content:flex-end;animation:bubbleIn .4s .1s both}
.name-form input{flex:1;max-width:240px;background:var(--creme-card);border:1.5px solid var(--borda-ativa);border-radius:12px;padding:13px 16px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;color:var(--teal)}
.name-form input:focus{outline:3px solid var(--coral);outline-offset:2px}
.name-form button{background:var(--coral);border:none;color:#FFF6E8;font-weight:800;font-size:15px;padding:0 20px;border-radius:12px;cursor:pointer}
/* ===== Quebra-gelo ===== */
.prep-card{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:24px;padding:34px 28px;max-width:440px;width:100%;box-shadow:var(--sombra);margin-bottom:28px}
.prep-frase{font-family:'Baloo 2',sans-serif;font-size:clamp(30px,7vw,40px);font-weight:800;color:var(--coral);margin:16px 0 6px}
.prep-dica{font-size:15px;color:var(--teal-suave);line-height:1.6}
#screen-talk{justify-content:flex-start;padding-top:48px}
.talk-logo{width:180px;margin-bottom:8px}
.talk-context{display:inline-flex;align-items:center;gap:10px;background:var(--creme-card);border:1px solid var(--borda);border-radius:99px;padding:8px 18px;margin:20px 0 34px;font-size:14px;box-shadow:var(--sombra)}
.talk-context .ctx-lang{font-weight:800;color:var(--coral-escuro)}
.talk-context .ctx-sep{color:var(--teal-leve)}
.talk-context .ctx-level{font-weight:700}
.mascote-talk{position:relative;width:min(230px,58vw);margin-bottom:22px}
.tutor-name-big{font-size:24px;font-weight:800;font-family:'Baloo 2',sans-serif;margin-bottom:6px}
.talk-instruction{font-size:15px;color:var(--teal-suave);max-width:360px;line-height:1.6;margin-bottom:28px}
.talk-hint{display:flex;align-items:center;gap:8px;color:var(--coral-escuro);font-size:14px;font-weight:800;margin-bottom:34px}
.talk-hint .arrow-down{animation:bounce 1.5s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* ===== Tela de chamada própria (Frente A) ===== */
#screen-call{justify-content:center;gap:6px}
.call-status{display:inline-flex;align-items:center;gap:9px;background:var(--creme-card);border:1.5px solid var(--borda);border-radius:99px;padding:9px 20px;font-size:14.5px;font-weight:800;color:var(--teal);box-shadow:var(--sombra);margin-bottom:18px}
.call-status .pulse-dot{background:var(--coral)}
.call-mandra{position:relative;width:min(320px,70vw);aspect-ratio:1402/1122;margin-bottom:6px;transition:filter .4s}
#screen-call.falando .call-mandra{filter:drop-shadow(0 0 26px rgba(232,106,74,.45))}
.call-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .35s ease}
.call-video.falando-v{opacity:0}
#screen-call.falando .call-video.calma-v{opacity:0}
#screen-call.falando .call-video.falando-v{opacity:1}
.call-fallback{display:none;width:100%}
.prep-video{width:min(240px,58vw);mix-blend-mode:multiply;display:block;margin:0 auto 4px}
@media(prefers-reduced-motion:reduce){
.call-video,.prep-video{display:none!important}
.call-fallback{display:block}
}
.call-wave{width:min(430px,84vw);height:56px;margin:10px 0 4px}
.call-legenda{min-height:48px;max-height:138px;overflow-y:auto;max-width:500px;width:100%;font-size:17px;line-height:1.55;color:var(--teal-suave);font-weight:600;padding:0 12px;text-align:left} /* T58: historico rolavel + fonte maior (era 15.5px, so ultima frase) */
.call-legenda p{margin:0 0 7px}
.call-legenda strong{color:var(--teal)}
.call-controls{display:flex;gap:16px;margin-top:16px}
.call-btn{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--borda);background:var(--creme-card);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra);transition:transform .15s,background .2s;color:var(--teal)}
.call-btn:hover{transform:translateY(-2px)}
.call-btn.ativo{background:var(--coral-leve);border-color:var(--borda-ativa)}
.call-btn.encerrar{background:var(--coral);border-color:var(--coral);color:#FFF6E8;font-size:24px}
.call-btn.encerrar:hover{background:var(--coral-escuro)}
.call-rotulos{display:flex;gap:16px;margin-top:6px}
.call-rotulos span{width:58px;text-align:center;font-size:11px;font-weight:800;color:var(--teal-leve);letter-spacing:.3px}
/* ===== Vitória: único lugar do Pôr do Sol ===== */
#screen-win .screen-title{color:var(--teal);font-size:clamp(34px,8vw,48px)} /* T33: paleta aprovada, era roxo #5A3E63 */
#screen-win .win-sub{font-size:17px;color:var(--teal-suave);max-width:420px;line-height:1.65;font-weight:700;margin-bottom:30px}
.win-mascote{width:min(250px,60vw);margin-bottom:10px;animation:winPop .7s cubic-bezier(.22,1,.36,1)}
@keyframes winPop{from{opacity:0;transform:scale(.85) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.win-card{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:24px;padding:28px 26px;max-width:440px;width:100%;box-shadow:var(--sombra)}
.win-card h3{font-family:'Baloo 2',sans-serif;font-size:20px;color:var(--teal);margin-bottom:6px}
.win-card p{font-size:14px;color:var(--teal-suave);margin-bottom:18px;line-height:1.5}
/* T33: CTA primário no padrão do site (coral) levando pra /precos/; WhatsApp vira link secundário discreto */
.win-cta{display:block;text-align:center;text-decoration:none;font-size:17px;padding:16px 20px}
.win-whats-sec{margin-top:14px;font-size:13px;text-align:center}
.win-whats-sec a{color:var(--teal-suave);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.win-whats-sec a:hover{color:var(--coral)}
.email-form{display:flex;gap:8px}
.email-form input{flex:1;background:#fff;border:1.5px solid var(--borda);border-radius:12px;padding:13px 14px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;color:var(--teal)}
.email-form input:focus{outline:3px solid var(--coral);outline-offset:2px}
.email-form button{background:var(--coral);border:none;color:#FFF6E8;font-weight:800;font-size:14px;padding:0 18px;border-radius:12px;cursor:pointer}
.win-voltar{margin-top:26px}
/* ===== Seções da landing (abaixo do hero) ===== */
.landing{width:100%;max-width:1040px;margin:0 auto}
.sec{padding:72px 0 8px;width:100%}
.sec-title{font-family:'Baloo 2',sans-serif;font-size:clamp(26px,4.5vw,38px);font-weight:800;margin-bottom:10px;text-align:center}
.sec-sub{font-size:16px;color:var(--teal-suave);max-width:520px;margin:0 auto 40px;text-align:center;line-height:1.6}
.duo{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;text-align:left}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr;gap:56px}}
.passos{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:20px;padding:26px 22px;text-align:left;box-shadow:var(--sombra)}
.passo .n{font-family:'Baloo 2',sans-serif;font-size:15px;font-weight:800;color:var(--coral);letter-spacing:.5px;margin-bottom:8px}
.passo h3{font-family:'Baloo 2',sans-serif;font-size:20px;margin-bottom:6px}
.passo p{font-size:14.5px;color:var(--teal-suave);line-height:1.55}
/* T07: demo de conversa em loop (só CSS) */
.mini-demo{margin-top:16px;display:flex;flex-direction:column;gap:8px;max-width:270px}
.md-b{font-size:13px;font-weight:700;line-height:1.4;padding:8px 12px;border-radius:14px;opacity:0;animation:mdCiclo 6.5s ease-in-out infinite}
.md-aluno{align-self:flex-end;background:var(--coral);color:#FFF6E8;border-bottom-right-radius:5px}
.md-mandra{align-self:flex-start;background:var(--creme);border:1px solid var(--borda);color:var(--teal);border-bottom-left-radius:5px;display:flex;align-items:center;gap:7px}
.md-mandra img{width:22px;height:22px;object-fit:cover;border-radius:50%}
.md-b:nth-child(1){animation-name:mdB1}
.md-b:nth-child(2){animation-name:mdB2}
.md-b:nth-child(3){animation-name:mdB3}
@keyframes mdB1{0%,4%{opacity:0;transform:translateY(6px)}10%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0}}
@keyframes mdB2{0%,30%{opacity:0;transform:translateY(6px)}37%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0}}
@keyframes mdB3{0%,58%{opacity:0;transform:translateY(6px)}65%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0}}
@keyframes mdCiclo{}
@media(prefers-reduced-motion:reduce){.md-b{opacity:1;animation:none}}
.metodo-txt h2{font-family:'Baloo 2',sans-serif;font-size:clamp(24px,3.6vw,34px);line-height:1.2;margin-bottom:16px}
.metodo-txt p{font-size:16px;color:var(--teal-suave);line-height:1.7;margin-bottom:14px}
.metodo-txt strong{color:var(--teal)}
.metodo-arte{display:flex;justify-content:center}
.metodo-arte img{width:min(300px,70vw);height:auto;border-radius:24px;box-shadow:var(--sombra)}
/* T32: mesmo tratamento de glow do .mandra-rig::before (radial-gradient+blur), só que centralizado atrás da foto.
T35: keyframe DEDICADO (chamaPulsaCentro) com translate(-50%,-50%) embutido em todos os stops — animar transform
com o chamaPulsa compartilhado SUBSTITUÍA o translate estático e o glow renderizava deslocado do centro.
NÃO reaproveitar chamaPulsa aqui (ele é do .mandra-rig::before, posicionado sem transform). */
.metodo-arte-glow{position:relative}
.metodo-arte-glow img{box-shadow:none} /* T32-fix: a sombra herdada de .metodo-arte img desenha um disco elíptico visível atrás da imagem transparente */
.metodo-arte-glow::before{content:"";position:absolute;left:50%;top:50%;width:75%;aspect-ratio:1;border-radius:50%;
transform:translate(-50%,-50%);background:radial-gradient(circle,var(--coral-glow),transparent 70%);filter:blur(20px);
animation:chamaPulsaCentro 4.5s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes chamaPulsaCentro{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.45)}}
@media(max-width:859px){.duo .metodo-arte{order:-1}}
@media(min-width:860px){
.passos{position:relative;padding-top:26px}
.passos::before{content:"";position:absolute;top:0;left:6%;right:6%;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--coral),rgba(232,106,74,.15))}
}
.ticker{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,black 24px,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,black 24px,black calc(100% - 24px),transparent)} /* T82: fade encolhido de 8% (uns 120px no desktop, sufocante no mobile) pra 24px fixos — so um acabamento na borda */
.ticker-track{display:flex;gap:16px;width:max-content;animation:tickerRoda 70s linear infinite} /* T80: mais lento = legível */
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tickerRoda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dep{flex-shrink:0;width:320px;display:flex;flex-direction:column;background:var(--creme-card);border:1.5px solid var(--borda);border-radius:18px;padding:24px;text-align:left;box-shadow:var(--sombra)}
.dep p{font-size:15px;line-height:1.62;color:var(--teal);margin-bottom:16px}
.dep .quem{font-size:13.5px;font-weight:800;color:var(--coral-escuro)}
.dep .quem span{display:block;font-weight:600;color:var(--teal-suave);margin-top:1px}
.faq{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:18px;box-shadow:var(--sombra);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:'Baloo 2',sans-serif;font-size:22px;color:var(--coral);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resposta{display:flex;gap:10px;padding:0 20px 18px;align-items:flex-start}
.faq .resposta img{width:38px;height:38px;object-fit:cover;border-radius:50%;border:1.5px solid var(--borda);flex-shrink:0}
.faq .resposta p{font-size:14.5px;line-height:1.6;color:var(--teal-suave)}
/* T37: teaser compacto de preços perto do FAQ — cartões e tabela completos ficam só em /precos/ (decisão do dono) */
.precos-teaser{margin:36px auto 0;max-width:640px;text-align:center}
.pt-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.pt-pill{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:800;box-shadow:var(--sombra)}
.pt-pill.pt-pop{border-color:var(--borda-ativa);color:var(--coral-escuro)}
.pt-btn{display:inline-block;text-decoration:none;font-size:16px;padding:14px 28px}
.cta-final{text-align:center;padding:72px 0 40px}
/* T41: ritmo de cor por seção (mockup aprovado pelo dono) — só os 3 tons aprovados, nenhum hex novo.
.faixa usa o mesmo truque 100vw do .ticker pra faixa full-bleed mantendo o conteúdo alinhado ao .landing. */
.faixa{width:100vw;margin-left:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}
.sec.faixa{padding-top:64px;padding-bottom:64px;margin-top:40px}
/* T61: .hero-duo (max-width 1040, filho do .screen) e .precos-teaser (max-width
640) quebram o truque 100vw da .faixa se so ganharem a classe (banda deslocada,
nao full-bleed - visto em dry-run). max() abaixo: full-bleed com o conteudo
travado na largura aprovada e piso de 24px (padding lateral do .screen). */
.hero-duo.faixa{max-width:none;padding-left:max(24px,calc(50vw - 520px));padding-right:max(24px,calc(50vw - 520px));padding-top:36px;padding-bottom:44px}
.precos-teaser.faixa{max-width:none;padding-left:max(24px,calc(50vw - 320px));padding-right:max(24px,calc(50vw - 320px));padding-top:34px;padding-bottom:40px}
.faixa-teal-tint{background:rgba(14,79,79,.06)}
.faixa-coral-tint{background:rgba(232,106,74,.07)}
.faixa-teal{background:#0E4F4F}
.faixa-teal .sec-title{color:#FFF6E8}
.faixa-teal .sec-sub{color:#FFF6E8}
.faixa-coral{background:#E86A4A}
.faixa-coral .sec-title{color:var(--creme-card)} /* T42-correcao: 3.13:1 sobre coral */
.faixa-coral .sec-title::after{background:#FFF6E8}
.faixa-coral .sec-sub{color:var(--creme-card)}
.cta-final.faixa{padding-top:72px;padding-bottom:72px;margin-top:40px}
.faixa-coral .btn-primary{font-size:19px;background:var(--creme-card);color:#E86A4A;box-shadow:0 8px 26px rgba(14,79,79,.18)} /* T42/T42-correcao: 19px bold = texto grande WCAG; creme-card = 3.13:1 */
.faixa-coral .btn-primary:hover{background:#FFFDF6;color:#D95B3B;box-shadow:0 14px 36px rgba(14,79,79,.22)}
.faixa-coral .btn-primary::before{display:none}
/* T80: o trilho de fogo lateral saiu (lia como ruído amador). A metáfora do
fogo-como-progresso vive na barra fina do topo, em TODAS as larguras —
padrão profissional (Medium/Linear) com a cara da marca. */
.fogo-mobile{position:fixed;top:0;left:0;height:3px;width:0%;z-index:80;border-radius:0 99px 99px 0;
background:linear-gradient(90deg,#FFCBA8,var(--coral));display:block}
/* títulos aquecem ao entrar em cena — visíveis por padrão; JS só adiciona o charme */
.sec-title,.metodo-txt h2{transition:opacity .7s ease,transform .7s ease}
.anim-espera{opacity:.45;transform:translateY(14px)}
.sec-title.quente,.metodo-txt h2.quente{opacity:1;transform:translateY(0)}
.sec-title::after{content:"";display:block;width:0;height:4px;border-radius:99px;background:var(--coral);margin:10px auto 0;transition:width .7s ease .2s}
.sec-title.quente::after{width:56px}
/* T80: sistema de scroll-reveal — classes adicionadas VIA JS (sem JS, tudo 100% visível) */
.rvl{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.rvl-on{opacity:1;transform:none}
/* T80: entrada do hero no primeiro paint */
@keyframes heroSobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-txt>*{animation:heroSobe .65s cubic-bezier(.22,1,.36,1) backwards}
.hero-txt>*:nth-child(1){animation-delay:.05s}
.hero-txt>*:nth-child(2){animation-delay:.13s}
.hero-txt>*:nth-child(3){animation-delay:.21s}
.hero-txt>*:nth-child(4){animation-delay:.29s}
.hero-txt>*:nth-child(5){animation-delay:.37s}
.hero-txt>*:nth-child(6){animation-delay:.45s}
.hero-visual{animation:heroSobe .8s .3s cubic-bezier(.22,1,.36,1) backwards}
/* T80: a 'onda de voz' saiu (lia como barras quebradas). Entram aspas de
marca, avatar de iniciais e rodapé alinhado — pronto pros depoimentos reais. */
.dep::before{content:"\201C";font-family:'Baloo 2',sans-serif;font-size:44px;line-height:.6;display:block;color:var(--coral);opacity:.4;margin-bottom:10px}
.dep-rodape{display:flex;align-items:center;gap:10px;margin-top:auto}
.dep-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;background:var(--coral-leve);color:var(--coral-escuro);border:1.5px solid rgba(232,106,74,.35)}
.dep:nth-child(even) .dep-avatar{background:rgba(14,79,79,.08);color:var(--teal);border-color:rgba(14,79,79,.22)}
@media(prefers-reduced-motion:reduce){.sec-title,.metodo-txt h2{opacity:1;transform:none}.fogo-mobile{display:none!important}.rvl{opacity:1!important;transform:none!important}}
/* T80: rodapé profissional multi-coluna (SEO/GEO: todas as páginas linkadas).
Aprovado na home primeiro; replicar nas outras páginas após OK do dono. */
.site-footer{position:relative;z-index:1;padding:52px 24px 24px;margin-top:40px;border-top:1px solid rgba(255,246,232,.12);background:#0E4F4F;color:rgba(255,246,232,.75);font-size:14px;font-weight:600;font-family:'Nunito',sans-serif}
.sf-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;text-align:left}
@media(min-width:760px){.sf-grid{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:28px}}
.site-footer .sf-brand{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;color:#FFF6E8;margin-bottom:10px}
.sf-tag{font-size:13.5px;line-height:1.6;color:rgba(255,246,232,.65);max-width:280px;margin-bottom:14px}
.sf-col h4{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,246,232,.45);margin-bottom:12px}
.sf-col a{display:block;color:rgba(255,246,232,.78);text-decoration:none;font-size:14px;padding:4px 0;cursor:pointer}
.sf-col a:hover{color:#FFCBA8;text-decoration:underline;text-underline-offset:3px}
.site-footer a{color:rgba(255,246,232,.78)}
.site-footer a:hover{color:#FFCBA8}
.sf-base{max-width:1040px;margin:36px auto 0;padding-top:18px;border-top:1px solid rgba(255,246,232,.12);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;font-size:12.5px;color:rgba(255,246,232,.55)}
button:focus-visible,.back-btn:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
/* T79: microinterações — elevação sutil no hover (a regra global de prefers-reduced-motion abaixo zera tudo isto) */
.passo{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.passo:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:var(--borda-ativa)}
.dep{transition:transform .18s ease,box-shadow .18s ease}
.dep:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.faq summary:hover{color:var(--coral-escuro)}
.pt-pill{transition:transform .15s ease,box-shadow .15s ease}
.pt-pill:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.idioma-pill{transition:transform .15s ease}
.idioma-pill.on:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.fm-nav{position:relative;display:inline-flex}.fm-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:transparent;border:1.5px solid var(--borda,#e7d8c0);border-radius:12px;cursor:pointer;color:var(--teal,#0E4F4F);padding:0}.fm-nav-btn:hover{border-color:var(--teal,#0E4F4F)}.fm-nav-panel{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:224px;background:var(--creme-card,#FFFDF6);border:1.5px solid var(--borda,#e7d8c0);border-radius:14px;box-shadow:0 12px 32px rgba(14,79,79,.14);padding:6px;z-index:80}.fm-nav-panel.on{display:block}.fm-nav-panel a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-family:'Baloo 2','Nunito',sans-serif;font-weight:700;font-size:15px;color:var(--teal,#0E4F4F);text-decoration:none}.fm-nav-panel a:hover{background:var(--bg,#FFF6E8)}.fm-nav-panel svg{flex-shrink:0}@media (max-width:480px){.fm-nav-panel{position:fixed;left:12px;right:12px;top:66px;min-width:0}.fm-nav-cta{gap:6px!important}.fm-nav-btn{width:32px;height:32px}}
.home-oferta{position:relative;overflow:hidden;background:#0E4F4F;color:#FFF6E8;padding:40px clamp(20px,5vw,32px) 44px;text-align:center;max-width:900px;width:100%;margin:6px auto 26px;border-radius:24px;box-shadow:0 22px 55px rgba(14,79,79,.2)}
.home-oferta .ho-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.home-oferta .ho-mascote{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,246,232,.35);background:#FFF6E8}
.home-oferta .ho-chip{display:inline-block;background:rgba(255,246,232,.14);border:1px solid rgba(255,246,232,.3);border-radius:999px;padding:5px 15px;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#FFCBA8;position:relative;overflow:hidden;font-family:'Nunito',sans-serif}
.home-oferta .ho-chip::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,246,232,.4),transparent);animation:hoBrilho 2.6s ease-in-out infinite}
@keyframes hoBrilho{0%{left:-60%}55%{left:120%}100%{left:120%}}
.home-oferta h2{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(28px,5vw,42px);line-height:1.08;margin:6px 0 2px;color:#FFF6E8}
.home-oferta .ho-sub{font-size:15px;font-weight:700;color:rgba(255,246,232,.86);max-width:520px;line-height:1.55}
.home-oferta .ho-cta{display:inline-block;background:#E86A4A;color:#FFF6E8;text-decoration:none;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;border-radius:16px;padding:14px 34px;margin-top:14px;transition:transform .15s ease,background .15s ease;animation:hoPulso 1.8s ease-in-out infinite}
.home-oferta .ho-cta:hover{background:#D65A3B;transform:translateY(-2px)}
@keyframes hoPulso{0%,100%{box-shadow:0 0 0 0 rgba(232,106,74,.55)}50%{box-shadow:0 0 0 14px rgba(232,106,74,0)}}
.home-oferta .ho-nota{font-size:12px;color:rgba(255,246,232,.6);font-weight:700;margin-top:6px}
.sf-v2{position:relative;z-index:1;text-align:left;padding:52px 24px 24px;margin-top:40px;border-top:1px solid rgba(255,246,232,.12);background:#0E4F4F;color:rgba(255,246,232,.78);font-size:14px;font-weight:600;font-family:'Nunito',sans-serif}
.sf-v2 .sf-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;text-align:left}
@media(min-width:760px){.sf-v2 .sf-grid{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:28px}}
.sf-v2 .sf-brand{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;color:#FFF6E8;margin-bottom:10px}
.sf-v2 .sf-tag{font-size:13.5px;line-height:1.6;color:rgba(255,246,232,.68);max-width:280px;margin-bottom:14px}
.sf-v2 .sf-col h4{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,246,232,.65);margin-bottom:12px}
.sf-v2 .sf-col a{display:block;color:rgba(255,246,232,.82);text-decoration:none;font-size:14px;padding:4px 0;cursor:pointer}
.sf-v2 .sf-col a:hover{color:#FFCBA8;text-decoration:underline;text-underline-offset:3px}
.sf-v2 a{color:rgba(255,246,232,.82)}
.sf-v2 a:hover{color:#FFCBA8}
.sf-v2 .sf-base{max-width:1040px;margin:36px auto 0;padding-top:18px;border-top:1px solid rgba(255,246,232,.12);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;font-size:12.5px;color:rgba(255,246,232,.6)}
/* ===== fm.css — folha compartilhada das landings de idioma =====
Origem: blocos