/* ===== 27B · Landing (marketing) · ★App-Store detail★ · Compact · Mobile-first · Emerald+Gold VIP · SEM topbar ===== */
:root{
  --bg:#08291d; --bg2:#0c3528; --surface:#0f3d2e; --surface2:#0a2f22; --tint:#114433;
  --green:#10b981; --green-l:#34d399; --green-d:#059669; --green-soft:rgba(16,185,129,0.13);
  --gold:#fbbf24; --gold-l:#fcd34d; --amber:#f59e0b; --gold-soft:rgba(251,191,36,0.15);
  --text:#e8f5ee; --text2:#9fc4b1; --text3:#6f9683;
  --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.14); --line-g:rgba(251,191,36,0.32); --line-e:rgba(16,185,129,0.32);
  --grad:linear-gradient(135deg,#059669,#10b981); --grad-g:linear-gradient(135deg,#fcd34d,#f59e0b);
  --sh:0 8px 24px rgba(0,0,0,0.32); --green-glow:rgba(16,185,129,0.28); --gold-glow:rgba(251,191,36,0.26);
  --r:13px; --r2:18px; --t:.16s ease; --wrap:1000px; --read:740px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--green-l);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--gold-l)}
h1,h2,h3,h4{line-height:1.18;color:var(--text)}
.b27-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 14px}
.b27-read{max-width:var(--read);margin:0 auto;padding:0 14px}

/* Botões */
.b27-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 22px;border-radius:11px;font-weight:800;font-size:.92rem;cursor:pointer;border:none;white-space:nowrap;transition:transform var(--t),box-shadow var(--t),filter var(--t);text-align:center}
.b27-btn-grad{background:var(--grad);color:#04130c;box-shadow:0 6px 18px var(--green-glow)}
.b27-btn-grad:hover{transform:translateY(-2px);filter:brightness(1.07);color:#04130c}
.b27-btn-gold{background:var(--grad-g);color:#3a2606;box-shadow:0 6px 18px var(--gold-glow)}
.b27-btn-gold:hover{transform:translateY(-2px);color:#3a2606}
.b27-btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line2)}
.b27-btn-ghost:hover{border-color:var(--green-l);color:var(--green-l)}
.b27-btn-sm{padding:8px 14px;font-size:.82rem}.b27-btn-lg{padding:14px 28px;font-size:1.02rem}.b27-btn-block{display:flex;width:100%}

/* Header (compact top-nav, SEM topbar) */
.b27-header{position:sticky;top:0;z-index:100;background:rgba(8,41,29,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.b27-nav{display:flex;align-items:center;gap:10px;height:58px;max-width:var(--wrap);margin:0 auto;padding:0 14px}
.b27-brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.15rem;color:var(--text)}
.b27-brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 0 12px var(--gold-glow)}
.b27-links{display:none}
.b27-nav-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.b27-nav-cta .b27-btn{padding:8px 16px;font-size:.82rem}
.b27-burger{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;color:var(--text);font-size:1.2rem;cursor:pointer;width:40px;height:40px;flex-shrink:0}
.b27-links.b27-open{display:flex;flex-direction:column;position:absolute;top:58px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 12px;gap:1px;box-shadow:var(--sh)}
.b27-links.b27-open a{padding:12px 8px;color:var(--text2);border-bottom:1px solid var(--line);font-weight:600;font-size:.95rem}
.b27-links.b27-open a:hover,.b27-links.b27-open a.b27-active{color:var(--gold-l)}

/* ===== App header card (ícone oficial) ===== */
.b27-apphero{background:radial-gradient(ellipse 80% 70% at 80% -10%,var(--green-soft),transparent 60%),radial-gradient(ellipse 60% 50% at 0% 100%,var(--gold-soft),transparent 60%);border-bottom:1px solid var(--line);padding:26px 14px}
.b27-apphead{max-width:var(--wrap);margin:0 auto;display:flex;gap:15px;align-items:center}
.b27-apphead-icon{width:96px;height:96px;border-radius:24px;flex-shrink:0;border:1px solid var(--line-g);box-shadow:0 0 36px var(--gold-glow),0 12px 30px rgba(0,0,0,.5)}
.b27-apphead-info{flex:1;min-width:0}
.b27-apphead-info h1{font-size:clamp(1.4rem,5vw,2rem);font-weight:900;line-height:1.1}
.b27-apphead-info .b27-sub{color:var(--text2);font-size:.86rem;margin:3px 0 8px}
.b27-apphead-info .b27-rating{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text2);flex-wrap:wrap}
.b27-apphead-info .b27-stars{color:var(--gold)}
.b27-badge-leg{display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:var(--green-l);border:1px solid var(--line-e);border-radius:999px;padding:2px 9px;font-size:.7rem;font-weight:800}
.b27-apphead-cta{max-width:var(--wrap);margin:16px auto 0;display:flex;gap:10px;flex-wrap:wrap}
.b27-metabar{max-width:var(--wrap);margin:16px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.b27-meta{background:var(--surface);padding:11px 8px;text-align:center}
.b27-meta b{display:block;font-size:.95rem;color:var(--text);font-weight:800}
.b27-meta span{font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}

/* gallery (screenshots) */
.b27-gallery{display:flex;gap:11px;overflow-x:auto;max-width:var(--wrap);margin:0 auto;padding:4px 0 6px;scrollbar-width:none}
.b27-gallery::-webkit-scrollbar{display:none}
.b27-shot{flex-shrink:0;width:148px;border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative}
.b27-shot img{width:148px;height:263px;object-fit:cover}
.b27-shot .b27-shot-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(180deg,transparent,rgba(4,19,12,.85));font-size:.74rem;font-weight:700;color:#fff;z-index:2}

/* sections */
.b27-sec{padding:28px 14px;border-top:1px solid var(--line)}
.b27-sechead{max-width:var(--wrap);margin:0 auto 16px}
.b27-sechead h2{font-size:clamp(1.25rem,4.5vw,1.8rem);font-weight:900;display:flex;align-items:center;gap:9px}
.b27-sechead h2 .b27-bar{width:5px;height:21px;background:var(--grad-g);border-radius:3px;flex-shrink:0}
.b27-sechead p{color:var(--text2);font-size:.92rem;margin-top:6px}

/* VIP tiers */
.b27-vip{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr;gap:11px}
.b27-vipcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden}
.b27-vipcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-g)}
.b27-vipcard .b27-vt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-l);font-weight:800}
.b27-vipcard h3{font-size:1.15rem;font-weight:900;margin:4px 0 6px}
.b27-vipcard p{font-size:.84rem;color:var(--text2)}

/* destaques (offer cards) */
.b27-dest{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr;gap:11px}
.b27-destcard{background:radial-gradient(130% 130% at 0% 0%,var(--gold-soft),var(--surface));border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:13px;align-items:center}
.b27-destcard .b27-di{font-size:1.7rem;flex-shrink:0;width:48px;height:48px;border-radius:13px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.b27-destcard .b27-dv{font-size:1.25rem;font-weight:900;background:var(--grad-g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.b27-destcard h3{font-size:.95rem;font-weight:800;margin-bottom:2px}
.b27-destcard p{font-size:.8rem;color:var(--text2)}

/* about */
.b27-about{max-width:var(--read);margin:0 auto;color:var(--text2);font-size:.96rem;line-height:1.8}
.b27-about img{display:inline-block;border-radius:22px;box-shadow:0 0 28px var(--gold-glow);border:1px solid var(--line-g)}

/* providers */
.b27-prov{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.b27-prov span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;color:var(--text2);font-size:.84rem}

/* novidades (what's new) */
.b27-news{max-width:var(--read);margin:0 auto;display:grid;gap:9px}
.b27-newsitem{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.b27-newsitem .b27-ni{color:var(--green-l);font-size:1.05rem;flex-shrink:0}
.b27-newsitem b{font-size:.92rem;display:block}
.b27-newsitem span{font-size:.82rem;color:var(--text2)}

/* reviews */
.b27-reviews{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr;gap:11px}
.b27-review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.b27-review .b27-stars{color:var(--gold);font-size:.82rem;letter-spacing:1px}
.b27-review p{font-size:.9rem;color:var(--text);margin:7px 0;font-style:italic}
.b27-review .b27-who{font-size:.76rem;color:var(--text3);font-weight:600}

/* informações table */
.b27-info{max-width:var(--read);margin:0 auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.b27-info dl{display:grid;grid-template-columns:auto 1fr}
.b27-info dt{padding:11px 14px;background:var(--surface2);color:var(--text3);font-size:.84rem;border-bottom:1px solid var(--line)}
.b27-info dd{padding:11px 14px;color:var(--text);font-weight:600;font-size:.88rem;border-bottom:1px solid var(--line);text-align:right}

/* FAQ */
.b27-faq{max-width:var(--read);margin:0 auto}
.b27-faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--surface);overflow:hidden}
.b27-faq summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;font-size:.95rem;color:var(--text);display:flex;justify-content:space-between;gap:12px;align-items:center}
.b27-faq summary::-webkit-details-marker{display:none}
.b27-faq summary::after{content:"+";color:var(--green-l);font-weight:400;font-size:1.4rem;flex-shrink:0}
.b27-faq details[open] summary::after{content:"\2212"}
.b27-faq details p{padding:0 16px 14px;color:var(--text2);font-size:.9rem}

/* CTA */
.b27-cta{padding:44px 14px;text-align:center;border-top:1px solid var(--line);background:radial-gradient(ellipse 70% 100% at 50% 100%,var(--green-soft),transparent)}
.b27-cta h2{font-size:clamp(1.5rem,5vw,2.1rem);font-weight:900;margin-bottom:10px}
.b27-cta h2 .b27-hl{background:var(--grad-g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b27-cta p{color:var(--text2);margin-bottom:20px;max-width:460px;margin-left:auto;margin-right:auto;font-size:.95rem}

/* Article */
.b27-art{max-width:var(--read);margin:0 auto;padding:28px 14px 0}
.b27-arttag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-l);margin-bottom:12px}
.b27-art h1{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:900;margin-bottom:14px;line-height:1.12}
.b27-meta2{display:flex;flex-wrap:wrap;gap:7px 15px;font-size:.78rem;color:var(--text3);border-bottom:1px solid var(--line);padding-bottom:18px}
.b27-meta2 .b27-verif{color:var(--green-l)}
.b27-artfig{max-width:var(--read);margin:20px auto 0;padding:0 14px}
.b27-artfig img{width:100%;border-radius:var(--r2);border:1px solid var(--line)}
.b27-body{max-width:var(--read);margin:0 auto;padding:22px 14px;color:var(--text2);font-size:1.01rem;line-height:1.8}
.b27-body h2{font-size:1.32rem;font-weight:800;margin:26px 0 10px;color:var(--text)}
.b27-body h3{font-size:1.1rem;font-weight:700;margin:20px 0 7px;color:var(--text)}
.b27-body p{margin-bottom:14px}.b27-body ul,.b27-body ol{margin:0 0 15px 20px}.b27-body li{margin-bottom:7px}
.b27-body strong{color:var(--gold-l)}
.b27-body blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 16px;margin:20px 0;color:var(--text);font-style:italic}
.b27-keybox{max-width:var(--read);margin:20px auto 0;padding:0 14px}
.b27-keybox-in{border:1px solid var(--line-g);border-radius:var(--r);padding:18px;background:var(--tint)}
.b27-keybox-in strong.b27-kt{display:block;color:var(--gold-l);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:11px}
.b27-keybox-in dl{display:grid;grid-template-columns:auto 1fr;gap:8px 15px;font-size:.92rem}
.b27-keybox-in dt{color:var(--text3)}.b27-keybox-in dd{color:var(--text);font-weight:600}
.b27-related{max-width:var(--read);margin:34px auto 0;padding:0 14px}
.b27-related h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:13px}
.b27-related-grid{display:grid;grid-template-columns:1fr;gap:9px}
.b27-related a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;color:var(--text)}
.b27-related a:hover{border-color:var(--line-g)}
.b27-related a span{font-size:.68rem;color:var(--gold-l);text-transform:uppercase;letter-spacing:.06em}
.b27-related a b{font-size:.96rem;font-weight:700;display:block;margin-top:2px}

/* Footer */
.b27-foot{border-top:1px solid var(--line);padding:32px 14px 26px;background:var(--bg2)}
.b27-foot-in{max-width:var(--wrap);margin:0 auto}
.b27-foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}
.b27-foot-brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.1rem;margin-bottom:10px}
.b27-foot-brand img{width:30px;height:30px;border-radius:8px}
.b27-fc-lead{font-size:.82rem;color:var(--text3);max-width:280px;line-height:1.7}
.b27-foot-col h4{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.b27-foot-col a{display:block;color:var(--text2);font-size:.86rem;padding:4px 0}
.b27-foot-col a:hover{color:var(--gold-l)}
.b27-foot-note{font-size:.74rem;color:var(--text3);line-height:1.8;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.b27-foot-note strong{color:var(--text2)}

/* 404 */
.b27-err{text-align:center;padding:64px 14px 84px}
.b27-err h1{font-size:4.5rem;font-weight:900;background:var(--grad-g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b27-err-links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.b27-err-links a{border:1px solid var(--line2);border-radius:999px;padding:8px 16px;font-size:.84rem;color:var(--text)}

/* ===== Responsive ===== */
@media(min-width:560px){
  .b27-vip{grid-template-columns:repeat(3,1fr)}
  .b27-dest{grid-template-columns:repeat(2,1fr)}
  .b27-reviews{grid-template-columns:repeat(3,1fr)}
  .b27-related-grid{grid-template-columns:repeat(2,1fr)}
  .b27-foot-grid{grid-template-columns:2fr 1fr 1fr}
}
@media(min-width:1000px){
  .b27-burger{display:none}
  .b27-links{display:flex;align-items:center;gap:2px;margin-left:12px}
  .b27-links a{padding:8px 12px;color:var(--text2);font-weight:600;font-size:.86rem;border-radius:8px}
  .b27-links a:hover,.b27-links a.b27-active{color:var(--gold-l);background:var(--green-soft)}
  .b27-apphead-icon{width:120px;height:120px}
}
