:root{
  /* Paleta extraída da arte da bandeira */
  --blue-900:#0A2E6E;   /* headers, nav, faixas escuras */
  --blue-700:#12429E;   /* azul do lettering ARTHUR / 4412 */
  --blue-500:#1E6BD6;   /* acentos */
  --sky-1:#93D4F7;      /* céu (topo) */
  --sky-2:#46A6E6;      /* céu (base) */
  --green:#2FA84F;      /* MAIA, ações primárias */
  --green-d:#23883F;
  --yellow:#FFC20E;     /* dourado dos cantos / destaques */
  --gold:#F2A31C;
  --bg:#EDF2F8;
  --ink:#16233c;
  --muted:#5a6a82;
  --card:#ffffff;
  --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins",system-ui,sans-serif;
  background:#d7e0ea;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px rgba(3,30,72,.12)}

.icon-btn{background:rgba(255,255,255,.55);border:0;color:var(--blue-900);padding:7px;border-radius:12px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(2px)}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ===== BANNER BANDEIRA ===== */
.flag-hero{
  position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 12px) 16px 34px;
  background:linear-gradient(180deg,var(--sky-1),var(--sky-2));
}
.hero-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

/* Quando a arte final da bandeira existe: ela vira o banner e a recriação some */
.flag-banner{display:block;width:100%;height:auto}
.flag-hero.has-art{padding:0;background:none}
.flag-hero.has-art .clouds,
.flag-hero.has-art .pole,
.flag-hero.has-art .flag{display:none}
.flag-hero.has-art .hero-top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 10px) 14px 0;margin:0}
.clouds{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60px 26px at 20% 30%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(80px 30px at 80% 22%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(70px 26px at 60% 70%, rgba(255,255,255,.6), transparent 70%);
}
.pole{position:absolute;left:14px;top:62px;bottom:0;width:8px;border-radius:6px;
  background:linear-gradient(90deg,#9aa6b4,#e7edf3,#8b97a6);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pole::before{content:"";position:absolute;top:-10px;left:-4px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe07a,var(--gold));box-shadow:0 2px 6px rgba(0,0,0,.25)}

.flag{
  position:relative;margin-left:20px;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 16px 30px rgba(3,30,72,.28);
  transform:rotate(-.6deg);
}
.corner{position:absolute;width:0;height:0;z-index:2}
.corner.tl{top:0;left:0;border-top:52px solid var(--yellow);border-right:52px solid transparent}
.corner.br{bottom:0;right:0;border-bottom:52px solid var(--gold);border-left:52px solid transparent}

.flag-grid{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:18px 16px}
.flag-logo{flex:1;min-width:0;width:100%;height:auto;object-fit:contain;display:block}

.flag-photo{width:33%;max-width:126px;flex:none;align-self:stretch;display:flex;align-items:flex-end}
.photo-ph{width:100%;min-height:132px;border-radius:10px;
  background:linear-gradient(180deg,#e9f1fb,#cfe0f4);
  border:2px dashed #9db8db;color:#5f7aa2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.photo-ph span{font-size:11px;font-weight:600}

/* Install card */
.install-card{
  margin:-18px 16px 0;background:var(--card);border-radius:18px;padding:14px;
  display:flex;align-items:center;gap:12px;position:relative;z-index:5;
  box-shadow:0 12px 28px rgba(3,30,72,.18);border:1px solid #e7edf5;
}
.install-ico{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(30,107,214,.12);color:var(--blue-500);display:grid;place-items:center}
.install-txt{flex:1;display:flex;flex-direction:column;line-height:1.25}
.install-txt strong{font-size:14px;color:var(--blue-900)}
.install-txt span{font-size:12px;color:var(--muted)}

/* Countdown */
.countdown{margin:16px 16px 0;background:var(--blue-900);color:#fff;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.count-box{background:var(--yellow);color:var(--blue-900);border-radius:12px;padding:6px 12px;text-align:center;line-height:1}
.count-box b{font-family:"Archivo Black",sans-serif;font-size:26px;display:block}
.count-box span{font-size:10px;letter-spacing:1px}
.count-info{flex:1;display:flex;flex-direction:column;line-height:1.3}
.count-info strong{font-size:13px}
.count-info span{font-size:11px;color:#b9cdec}

/* Atalhos */
.grid-actions{margin:16px 16px 0;background:var(--card);border-radius:var(--radius);padding:18px 8px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 8px 22px rgba(3,30,72,.06)}
.action{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--blue-900);text-align:center;text-decoration:none;cursor:pointer}
.a-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff}
.a-ico.green{background:var(--green)}
.a-ico.blue{background:var(--blue-700)}
.a-ico.yellow{background:var(--yellow);color:var(--blue-900)}

/* Cards */
.card{margin:16px 16px 0;background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 8px 22px rgba(3,30,72,.06)}
.card-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.card-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff}
.card-ico.blue{background:var(--blue-700)}
.card-ico.green{background:var(--green)}
.card-head h2{font-size:18px;color:var(--blue-900)}
.card-head p{font-size:12px;color:var(--muted)}

/* Player */
.player{background:var(--blue-900);border-radius:14px;padding:12px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.play{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:#fff;color:var(--blue-900);display:grid;place-items:center;cursor:pointer}
.track{flex:1;display:flex;align-items:center;gap:8px;color:#cfe0f6;font-size:11px}
.bar{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.bar i{display:block;width:36%;height:100%;background:linear-gradient(90deg,var(--green),var(--yellow))}

/* Figurinhas */
.stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.sticker{aspect-ratio:1;border-radius:14px;background:#eef3fa;border:1px solid #e0e8f3;display:grid;place-items:center;text-align:center;font-family:"Archivo Black",sans-serif;font-size:9px;color:var(--blue-700);padding:6px;line-height:1.1}

/* Botões */
.btn{border:0;border-radius:14px;padding:12px 16px;font-family:"Poppins";font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.wide{width:100%}
.btn.sm{padding:8px 12px;font-size:12px;border-radius:10px}
.btn-green{background:var(--green);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--blue-900)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}

.legal{text-align:center;font-size:10px;color:#8a97ab;padding:22px 24px 8px;line-height:1.4}

/* Tabbar */
.tabbar{position:sticky;bottom:0;max-width:480px;margin:0 auto;width:100%;background:var(--blue-900);display:flex;justify-content:space-around;align-items:center;padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8ea6c8;font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;flex:1}
.tab.active{color:var(--yellow)}
.tab-mid svg{background:var(--green);color:#fff;border-radius:12px;padding:7px;width:38px;height:38px;box-sizing:content-box;margin-bottom:-6px}
.tab-mid{color:var(--blue-900)}
.tab-mid span{color:#8ea6c8}

/* iOS sheet */
.ios-sheet{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.ios-card{background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:22px 22px calc(env(safe-area-inset-bottom) + 26px);position:relative}
.ios-close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:26px;color:#8a97a8;cursor:pointer;line-height:1}
.ios-card h3{color:var(--blue-900);font-size:18px;margin-bottom:14px}
.ios-card ol{padding-left:20px;display:flex;flex-direction:column;gap:12px;color:var(--ink);font-size:14px}
.ios-share{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--blue-500);border-radius:6px;color:var(--blue-500);font-size:13px}

/* ===== Subpáginas ===== */
.subhead{position:sticky;top:0;z-index:15;background:var(--blue-900);color:#fff;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 12px 12px}
.icon-btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.subhead-title{flex:1;display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px}
.subhead-logo{height:24px;width:auto}
.page{padding:16px}
.page-intro h1{font-size:22px;color:var(--blue-900)}
.page-intro p{font-size:13px;color:var(--muted);margin-top:2px}
.section-title{font-size:16px;color:var(--blue-900);margin:18px 0 10px}
.tab-gap{height:16px}
.vazio{color:var(--muted);text-align:center;padding:30px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;-webkit-overflow-scrolling:touch}
.chip{flex:none;border:1.5px solid #cdd8e6;background:#fff;color:var(--blue-900);border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer}
.chip.on{background:var(--blue-700);border-color:var(--blue-700);color:#fff}

/* eventos */
.eventos{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.evento{position:relative;display:flex;gap:12px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(3,30,72,.07)}
.evento.destaque{border:1.5px solid var(--yellow)}
.badge{position:absolute;top:-9px;left:16px;background:var(--yellow);color:var(--blue-900);font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px}
.evento-data{flex:none;width:56px;background:var(--blue-900);color:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0}
.evento-data b{font-family:"Archivo Black",sans-serif;font-size:24px;line-height:1}
.evento-data span{font-size:11px;font-weight:700;color:var(--yellow)}
.evento-data small{font-size:9px;color:#b9cdec}
.evento-info{flex:1;min-width:0}
.evento-info h3{font-size:16px;color:var(--blue-900)}
.evento-info .linha{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px}
.evento-desc{font-size:12.5px;color:#39465a;margin:8px 0 10px}
.btn-confirmed{background:#e7f4ea;color:var(--green-d);border:1px solid #bfe2c8}

/* fale */
.fale-hero{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.fale-avatar{width:56px;height:56px;flex:none;border-radius:50%;background:var(--blue-900);color:#fff;display:grid;place-items:center}
.fale-hero h1{font-size:18px;color:var(--blue-900)}
.fale-hero p{font-size:12.5px;color:var(--muted)}
.segmented{display:flex;background:#eaf0f7;border-radius:14px;padding:4px;margin-bottom:8px}
.seg{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.seg.on{background:#fff;color:var(--blue-900);box-shadow:0 2px 8px rgba(3,30,72,.1)}
.form{display:flex;flex-direction:column}
.form label{font-weight:600;font-size:13px;color:var(--blue-900);margin:12px 0 6px}
.form label em{color:var(--muted);font-weight:400;font-style:normal}
.form select,.form input,.form textarea{border:1.5px solid #cdd8e6;border-radius:12px;padding:12px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;width:100%}
.form textarea{resize:vertical}
.counter{text-align:right;font-size:11px;color:var(--muted);margin-top:4px}
.lgpd{display:flex;gap:10px;background:#eaf2fb;color:#2c4a70;border-radius:12px;padding:12px;font-size:12px;margin:14px 0;align-items:flex-start}
.lgpd svg{flex:none;color:var(--blue-500)}

/* sobre / timeline */
.sobre-card{background:#fff;border-radius:20px;padding:20px;text-align:center;box-shadow:0 6px 18px rgba(3,30,72,.07)}
.sobre-foto{width:110px;height:110px;margin:0 auto 12px;border-radius:50%;background:#dfe8f4;border:3px solid var(--yellow);display:grid;place-items:center;color:#7c93b3;font-size:11px}
.sobre-card h1{font-size:22px;color:var(--blue-900)}
.sobre-cargo{font-size:12px;color:var(--green-d);font-weight:600;margin:2px 0 10px}
.sobre-resumo{font-size:13.5px;color:#39465a;line-height:1.5}
.timeline{list-style:none;position:relative;padding-left:20px;margin-top:6px}
.timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:#cdd8e6}
.timeline li{position:relative;padding:0 0 16px 14px}
.timeline li::before{content:"";position:absolute;left:-19px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff}
.tl-ano{font-family:"Archivo Black",sans-serif;color:var(--blue-700);font-size:14px}
.timeline p{font-size:13px;color:#39465a;margin-top:2px}

/* posts */
.posts{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.post{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(3,30,72,.07)}
.post-capa{height:150px;background:#dfe8f4;display:grid;place-items:center;color:#8ba3c4;background-size:cover;background-position:center;position:relative}
.post-capa.video{color:#fff}
.play-badge{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:2px 6px;border-radius:6px}
.post-body{padding:14px}
.post-tag{font-size:10px;font-weight:800;letter-spacing:.5px}
.post-tag.v{color:var(--blue-700)}
.post-tag.n{color:var(--green-d)}
.post-body h3{font-size:16px;color:var(--blue-900);margin:4px 0 6px}
.post-body p{font-size:13px;color:#39465a;margin-bottom:10px}

/* redes */
.redes{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.rede{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;text-decoration:none;box-shadow:0 6px 18px rgba(3,30,72,.06)}
.rede-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff}
.rede-txt{flex:1;display:flex;flex-direction:column}
.rede-txt b{color:var(--blue-900);font-size:15px}
.rede-txt small{color:var(--muted);font-size:12px}
.rede-cta{color:var(--blue-700);font-weight:700;font-size:13px}

/* menu (Mais) */
.menu-list{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(3,30,72,.06);margin-bottom:16px}
.menu-item{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid #eef2f8;text-decoration:none;color:var(--blue-900);cursor:pointer}
.menu-item:last-child{border-bottom:0}
.menu-ico{width:40px;height:40px;flex:none;border-radius:11px;background:rgba(18,66,158,.1);color:var(--blue-700);display:grid;place-items:center}
.menu-t{flex:1;font-weight:600;font-size:15px}
.soon{font-size:10px;background:#fff3cd;color:#7a5b00;padding:2px 7px;border-radius:6px;font-weight:700}
.menu-arrow{color:#b7c2d3;font-size:20px}

/* kit */
.kit-text{font-size:13.5px;color:#39465a;line-height:1.5;background:#f3f6fb;border-radius:12px;padding:12px;margin-bottom:12px}

/* extras */
.btn-ghost{background:#eef2f8;color:var(--blue-900)}
.btn.big{padding:15px;font-size:15px}
.grid-actions.two{grid-template-columns:repeat(2,1fr)}
.embreve{text-align:center;padding:50px 20px;color:var(--muted)}
.embreve-ico{font-size:44px}
.embreve h2{color:var(--blue-900);margin:8px 0}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--blue-900);color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Onda 2 ===== */
.grid-actions.eight{grid-template-columns:repeat(4,1fr);gap:16px 2px}

/* Figurinhas */
.stickers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sticker-btn{border:0;border-radius:16px;padding:18px 10px;min-height:86px;font-family:"Archivo Black",sans-serif;font-size:13px;line-height:1.15;cursor:pointer;box-shadow:0 4px 12px rgba(3,30,72,.1)}
.sticker-btn:active{transform:scale(.97)}
.aviso{font-size:12px;color:#8a6d00;background:#fff8e1;border-radius:10px;padding:8px 10px;margin-bottom:10px;text-align:center}

/* Banner CTA (santinho) */
.banner-cta{display:block;position:relative;width:100%;border:0;padding:0;border-radius:18px;overflow:hidden;margin:16px 0;cursor:pointer;box-shadow:0 6px 18px rgba(3,30,72,.12)}
.banner-cta img{width:100%;display:block;height:120px;object-fit:cover}
.banner-cta span{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px;background:linear-gradient(transparent,rgba(3,20,50,.75));color:#fff;font-weight:700;font-size:14px}

/* Materiais */
.materiais-lista{display:flex;flex-direction:column;gap:10px}
.material{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 4px 14px rgba(3,30,72,.06)}
.material-thumb{width:52px;height:52px;flex:none;border-radius:10px;object-fit:cover;background:#e7eef7}
.material-info{flex:1;min-width:0;display:flex;flex-direction:column}
.material-info b{color:var(--blue-900);font-size:14px}
.material-info small{color:var(--muted);font-size:12px}
.material-acoes{display:flex;gap:8px}
.icon-pill{width:38px;height:38px;border:0;border-radius:11px;background:#eef2f8;color:var(--blue-700);display:grid;place-items:center;cursor:pointer}
.icon-pill.green{background:var(--green);color:#fff}

/* Santinho fullscreen */
.santinho{min-height:100dvh;background:linear-gradient(180deg,var(--blue-900),#061d47);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:16px;position:relative}
.santinho-close{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:16px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:26px;cursor:pointer;z-index:2}
.santinho-art{width:100%;max-width:420px;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.santinho-art img{width:100%;display:block}
.santinho-hint{color:#cfe0f6;font-size:14px}
.santinho-acoes{display:flex;gap:10px;width:100%;max-width:420px}
.santinho-acoes .btn{flex:1}

/* É Fake? */
.alerta-suspeito{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1.5px solid #ffe08a;border-radius:16px;padding:14px;margin-bottom:16px;cursor:pointer;text-align:left}
.alerta-suspeito>span{font-size:22px}
.alerta-suspeito b{color:var(--blue-900);font-size:14px;display:block}
.alerta-suspeito small{color:var(--muted);font-size:12px}
.fakes{display:flex;flex-direction:column;gap:14px}
.fake-card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(3,30,72,.07)}
.fake-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.selo{font-family:"Archivo Black",sans-serif;font-size:12px;padding:5px 12px;border-radius:8px;color:#fff}
.selo.falso{background:#d92d2d}
.selo.verdade{background:var(--green)}
.fake-data{font-size:11px;color:var(--muted)}
.fake-card h3{color:var(--blue-900);font-size:16px;margin-bottom:6px}
.fake-card p{font-size:13px;color:#39465a;margin-bottom:12px;line-height:1.5}

/* Checkbox (voluntário) */
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px !important;font-weight:400 !important;color:#39465a !important;font-size:12.5px;line-height:1.45}
.check input{width:22px;height:22px;flex:none;margin-top:1px}

/* Gerador de Card */
.card-preview{position:relative;width:100%;max-width:330px;margin:0 auto;aspect-ratio:1080/1350;background:#eef2f8;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(3,30,72,.12)}
.card-preview canvas{width:100%;height:100%;display:block}
.card-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9db0c9;font-size:13px}
.privacidade{font-size:12px;color:var(--muted);text-align:center;margin:14px 0;background:#eef2f8;border-radius:10px;padding:10px}