/* Brava Academy · camada de marca sobre a interface da simulação (que continua igual por baixo, com os 4 temas de cor).
   Mesmo sistema visual do site e da apresentação: EB Garamond nos títulos com itálico dourado, Inter no texto,
   rótulos com fio dourado, faixa verde profunda. A protagonista é a Brava Academy; o Aurum é o professor, dentro das aulas. */
:root{ --f-disp:"EB Garamond",Georgia,serif; --f-body:Inter,"Helvetica Neue",Arial,sans-serif; --ouro-site:#9A8C5C; --ouro-site2:#C9B98A; }
h1,h2{font-weight:500;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;color:var(--gold)}
h3{font-family:var(--f-body);font-weight:600}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-body);font-weight:600;letter-spacing:.28em;color:var(--brand)}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--ouro-site);flex:none}
.demo{display:none!important}
/* topo: logo da Brava Academy (versão clara/escura conforme o tema) */
.brand .mlogo{height:38px;width:auto}
.brand .mlogo.esc{display:none}
:root[data-theme="dark"] .brand .mlogo.cla,:root[data-theme="verde"] .brand .mlogo.cla{display:none}
:root[data-theme="dark"] .brand .mlogo.esc,:root[data-theme="verde"] .brand .mlogo.esc{display:inline}
/* abertura da vitrine: a mesma do site */
.mhero{background:radial-gradient(1100px 700px at 85% 10%,#22704a 0%,#1B5B39 38%,#0B2E1C 100%);color:#fff;border-radius:24px;
  padding:clamp(28px,6vw,80px) clamp(22px,5vw,64px);display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;overflow:hidden;position:relative}
.mhero .mb{display:flex;align-items:center;gap:14px;margin-bottom:38px}
.mhero .mb img{width:54px}
.mhero .mb .t{font:500 28px/1 "EB Garamond",serif;color:#fff}.mhero .mb .t em{color:var(--ouro-site2);font-style:italic}
.mhero .mb .e{font:600 10px Inter;letter-spacing:.24em;color:#9FC2AD;text-transform:uppercase;margin-top:6px}
.mhero .eyebrow{color:var(--ouro-site2)}
.mhero h1{font-family:"EB Garamond",serif;font-size:clamp(50px,7.5vw,100px);line-height:.96;color:#fff;margin:18px 0 0}
.mhero h1 em{color:var(--ouro-site2)}
.mhero .lead{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:#E5EEE8;max-width:620px;margin:26px 0 0}
.mhero .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.mhero .mbtn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;font:600 13.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid #fff;border-radius:2px;cursor:pointer;background:#fff;color:#1B5B39}
.mhero .mbtn.s{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.mhero .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font:500 14px Inter;color:#B9D3C4}
.mhero .meta span::before{content:"✓ ";color:var(--ouro-site2)}
.mhero .stack{position:relative;height:480px}
.mhero .stack img{position:absolute;max-width:100%;border-radius:12px;box-shadow:0 30px 60px -22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
@media (max-width:900px){.mhero{grid-template-columns:1fr}.mhero .stack{height:300px}}
/* faixa de números */
.mnums{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;background:#FAF8F3;border-radius:20px;padding:44px clamp(20px,4vw,48px);margin-top:22px}
:root[data-theme="dark"] .mnums{background:var(--panel)}
.mnums .n{font:500 clamp(40px,4.6vw,60px)/1 "EB Garamond",serif;color:var(--brand)}
.mnums .n em{font-style:italic;color:var(--ouro-site)}
.mnums .l{font:600 11.5px/1.4 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:10px}
@media (max-width:900px){.mnums{grid-template-columns:repeat(3,1fr)}}
/* faixa do certificado e selos */
.mfaixa{background:radial-gradient(900px 600px at 15% 0%,#22704a 0%,#1B5B39 40%,#0B2E1C 100%);color:#fff;border-radius:24px;margin-top:28px;
  padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
.mfaixa h2{color:#fff;font-size:clamp(32px,4vw,52px);line-height:1.05;margin:14px 0 16px}.mfaixa h2 em{color:var(--ouro-site2)}
.mfaixa p{color:#D3E2D9;font-size:17px;line-height:1.6}.mfaixa .eyebrow{color:var(--ouro-site2)}
.mselos{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.mselos img{width:60px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.mcertimg{width:100%;max-width:520px;margin-left:auto;display:block;border-radius:10px;box-shadow:0 30px 60px -22px rgba(0,0,0,.6);transform:rotate(1.5deg)}
@media (max-width:900px){.mfaixa{grid-template-columns:1fr}}
/* app */
.mapp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px;align-items:center}
.mapp img{width:100%;border-radius:22px;box-shadow:0 40px 80px -30px rgba(11,46,28,.55)}
.mapp h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin:12px 0 14px}
.mlojas{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.mloja{display:flex;flex-direction:column;justify-content:center;min-width:170px;padding:10px 18px;border-radius:12px;background:#0B2E1C;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.15)}
.mloja b{font:600 17px Inter}.mloja span{font:500 11px Inter;letter-spacing:.06em;color:#B9D3C4;text-transform:uppercase}
@media (max-width:900px){.mapp{grid-template-columns:1fr}}
/* para empresas */
.memp h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin:12px 0 22px}
.memp .mcol{border-top:2px solid var(--brand);padding-top:16px}
.memp .mcol p{color:var(--mut)}

html,body{overflow-x:hidden}
/* atalhos que só existem na simulação (pular vídeo, pular espera de 24 h, nova janela de tentativas, recomeçar) e avisos de simulação */
#demo,#pula,#nova,#pzera,.simbox{display:none!important}
/* topo: a simulação pinta de branco as imagens do topo nos temas escuros; o logo da Academy já tem a versão certa */
.top .mlogo{filter:none!important;opacity:1!important}
/* Minhas formações */
.mcont{display:flex;align-items:center;gap:28px;background:radial-gradient(900px 500px at 85% 0%,#22704a 0%,#1B5B39 40%,#0B2E1C 100%);color:#fff;
  border-radius:22px;padding:clamp(22px,4vw,40px);margin:0 0 22px;box-shadow:0 30px 60px -30px rgba(11,46,28,.6)}
.mcont>div{flex:1;min-width:0}.mcont .eyebrow{color:var(--ouro-site2)}
.mcont h2{font-family:"EB Garamond",serif;font-size:clamp(26px,3.2vw,40px);line-height:1.1;color:#fff;margin:10px 0 16px}
.mcont p{color:#C9DACF;margin:10px 0 0;font-size:14px}
.mcont .mbar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}.mcont .mbar i{display:block;height:100%;background:var(--ouro-site2);border-radius:99px}
.mcont .mbtn{flex:none;padding:16px 26px;font:600 13.5px Inter;letter-spacing:.08em;text-transform:uppercase;border:0;border-radius:2px;background:#fff;color:#1B5B39;cursor:pointer}
@media (max-width:700px){.mcont{flex-direction:column;align-items:stretch}}
.mmod{position:relative;padding-left:clamp(16px,3vw,24px)}
.mmod .mselo{position:absolute;right:22px;top:52px;width:60px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.mmod h2{padding-right:90px}
.mtermos{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mut);margin:4px 0 14px;line-height:1.45}
.mtermos input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand)}
.mcform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}.mcform .btn,.mcform #cerr{grid-column:1/-1}
@media (max-width:700px){.mcform{grid-template-columns:1fr}}
.mcod{font-size:26px;letter-spacing:.08em;margin:6px 0 8px;color:var(--brand)}
/* compra do curso */
.mformas{display:grid;gap:10px;margin:6px 0 14px}
.mforma{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.mforma:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.mforma input{margin-top:4px;accent-color:var(--brand)}
.mforma b{display:block;font-size:16px}.mforma small{color:var(--mut)}.mforma i{font-style:normal;font-weight:700;color:var(--ink)}

/* modo app (?app=1): dentro da aba Academy do app da Brava */
.modo-app .top { position: static; border: 0; padding: 0; }
.modo-app .topin.appbar { min-height: 0; padding: 8px 0; }
.modo-app .brand, .modo-app .demo, .modo-app .who, .modo-app #mcod { display: none !important; }