/* Padrão visual do site Milia (14/10/2026).
 * Topo, rodapé, fontes e cores tirados da página principal (milia.ia.br, "Seu próximo capítulo"),
 * que é a referência da marca. Toda página nova do site usa este arquivo para o topo e o rodapé
 * ficarem iguais em todo lugar. Marcação esperada:
 *
 *   <header class="mp-header" id="site-header">
 *     <a class="mp-brand" href="https://milia.ia.br/"><img src="/assets/milia-logo-dark.png" alt="milia"></a>
 *     <nav> <a class="mp-sobre">Como funciona</a> <a class="mp-sobre">Sua estratégia</a>
 *           <a class="mp-sobre">Quem somos</a> <a class="mp-planos">Planos</a>
 *           <a class="mp-entrar">Entrar</a> <a class="mp-btn">Começar grátis <span>↗</span></a> </nav>
 *   </header>
 *   <footer class="mp-footer"> <div class="mp-footer-id">logo + frase</div> <nav>links</nav> <span>©</span> </footer>
 */
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}

:root{
  --mp-navy:#071a35;      /* texto principal, botão */
  --mp-teal:#18bfae;      /* destaque em fundo escuro, barras */
  --mp-teal-ink:#168679;  /* destaque em fundo claro (palavras realçadas, links) */
  --mp-mint:#94f4dc;      /* destaque claro */
  --mp-paper:#f3f8f8;     /* fundo das seções claras */
  --mp-muted:#607680;     /* texto secundário */
  --mp-line:#0e3b411c;
  --mp-gutter:clamp(24px,7vw,128px);
  --mp-font:Manrope,'Segoe UI',sans-serif;
}

/* ---------- topo ---------- */
.mp-header{position:fixed;inset:0 0 auto;z-index:50;height:100px;padding:0 var(--mp-gutter);display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(#f3f8f8e8,#f3f8f800);color:var(--mp-navy);font-family:var(--mp-font);transition:background .35s,box-shadow .35s}
.mp-header.scrolled{background:rgba(243,248,248,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #0e3b411a}
.mp-brand{display:block;width:146px;height:47px;flex-shrink:0}
.mp-brand img{display:block;width:146px;height:auto}
.mp-header nav{display:flex;align-items:center;gap:35px;font-size:13px;font-weight:600}
.mp-header nav>a:not(.mp-btn){padding:12px 0;color:inherit;text-decoration:none;transition:color .2s}
.mp-header nav>a:not(.mp-btn):hover{color:var(--mp-teal-ink)}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;border-radius:999px;padding:12px 19px;background:var(--mp-navy);color:#fff;
  font-family:var(--mp-font);font-size:12px;font-weight:800;line-height:1.4;text-decoration:none;transition:background .2s,transform .25s}
.mp-btn:hover{background:#164b66;transform:translateY(-2px)}
.mp-btn>span{font-size:16px;line-height:1}
.mp-header a:focus-visible,.mp-footer a:focus-visible{outline:2px solid var(--mp-teal);outline-offset:3px;border-radius:4px}

/* ---------- rodapé ---------- */
.mp-footer{background:var(--mp-paper);color:var(--mp-navy);display:flex;align-items:flex-start;justify-content:space-between;gap:25px;
  padding:33px var(--mp-gutter);font-family:var(--mp-font);font-size:11px}
.mp-footer a{color:inherit;text-decoration:none}
.mp-footer a:hover{color:var(--mp-teal-ink)}
.mp-footer-id img{display:block;width:106px;height:auto}
.mp-footer-id p{font-size:10px;line-height:1.8;color:var(--mp-muted);margin:14px 0 0}
.mp-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 24px;max-width:550px;font-size:11px;font-weight:600;padding-top:10px}
.mp-footer>span{padding-top:10px;white-space:nowrap;font-size:10px;color:var(--mp-muted)}

/* ---------- telas menores: mesmas regras da página principal ---------- */
@media(max-width:1050px){.mp-header{height:90px}.mp-header nav{gap:23px}.mp-header .mp-sobre{display:none}}
@media(max-width:700px){
  .mp-header{height:78px;padding:0 24px}
  .mp-brand,.mp-brand img{width:114px;height:37px}
  .mp-header nav{gap:15px}
  .mp-header .mp-entrar{display:none}
  .mp-header .mp-planos{font-size:11px}
  .mp-btn{padding:11px 14px;font-size:10px;gap:13px}
  .mp-btn>span{font-size:14px}
  .mp-footer{flex-wrap:wrap;padding:28px 24px;gap:25px}
  .mp-footer-id{width:100%}
  .mp-footer-id p{margin-top:10px}
  .mp-footer nav{justify-content:flex-start;gap:15px 23px;padding:0}
  .mp-footer>span{width:100%;padding-top:0}
}
@media(prefers-reduced-motion:reduce){.mp-header,.mp-btn{transition:none}.mp-btn:hover{transform:none}}

/* ---------- logo claro/escuro (as duas imagens no .mp-brand; a certa aparece conforme o fundo) ---------- */
.mp-brand .mp-logo-claro{display:none}

/* ---------- telas de acesso (login, cadastro, senha): o topo acompanha o tema do site ---------- */
.mp-header.mp-fluxo{position:sticky;top:0}
[data-theme="dark"] .mp-header.mp-tema{color:#f6fbfc;background:linear-gradient(#071a35f0,#071a3500)}
[data-theme="dark"] .mp-header.mp-tema.scrolled,[data-theme="dark"] .mp-header.mp-tema.mp-fluxo{background:#071a35f2;box-shadow:0 1px 0 #ffffff14}
[data-theme="dark"] .mp-header.mp-tema nav>a:not(.mp-btn):hover{color:var(--mp-mint)}
[data-theme="dark"] .mp-header.mp-tema .mp-btn{background:var(--mp-mint);color:#063635}
[data-theme="dark"] .mp-header.mp-tema .mp-btn:hover{background:#beffe8}
[data-theme="dark"] .mp-header.mp-tema .mp-logo-claro{display:block}
[data-theme="dark"] .mp-header.mp-tema .mp-logo-escuro{display:none}
.mp-header.mp-fluxo:not(.scrolled){background:rgba(243,248,248,.97)}
[data-theme="dark"] .mp-header.mp-tema.mp-fluxo:not(.scrolled){background:#071a35f2}

/* ---------- dentro do app (WebView): sem os links da landing nem de planos (regra das lojas) ---------- */
html.mp-app .mp-header .mp-sobre,html.mp-app .mp-header .mp-planos{display:none}