*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:      #FFFFFF;
  --surface: #F5F5F5;
  --card:    #FAFAFA;
  --border:  #E0E0E0;
  --red:     #D00000;
  --red-dim: rgba(208,0,0,0.08);
  --red-glow:rgba(208,0,0,0.18);
  --black:   #111111;
  --ink:     #1A1A1A;
  --stone:   #555555;
  --muted:   #999999;
  --muted2:  #CCCCCC;
}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Roboto Condensed',sans-serif;
  font-weight:300;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── BANDEIRA TOPO ── */
.bandeira-bar{display:flex;height:6px;width:100%}
.faixa-preta{flex:1;background:#111111}
.faixa-branca{flex:1;background:#E8E8E8;border-left:1px solid #ddd;border-right:1px solid #ddd}
.faixa-vermelha{flex:1;background:var(--red)}

/* ── HERO ── */
.hero{
  padding:20px 24px 16px;
  text-align:center;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.logo-wrap{
  width:80px;height:80px;
  margin:0 auto 14px;
  background:#fff;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  padding:8px;
  border:1px solid var(--border);
  box-shadow:0 4px 20px var(--red-glow);
}
.logo-wrap img{width:100%;height:100%;object-fit:contain}
.hero-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;
  letter-spacing:4px;
  color:var(--black);
  line-height:1;
  margin-bottom:2px;
}
.hero-name span{color:var(--red)}
.hero-stripe{
  display:flex;
  width:100px;margin:10px auto 10px;
  height:3px;overflow:hidden;border-radius:2px;
}
.hs-p{flex:1;background:#111111}
.hs-b{flex:1;background:#CCCCCC}
.hs-r{flex:1;background:var(--red)}
.hero-desc{
  font-family:'Roboto Condensed',sans-serif;
  font-size:13.5px;
  font-weight:300;
  color:var(--stone);
  line-height:1.7;
  max-width:330px;
  margin:0 auto;
}

/* ── SECTION ── */
.section{padding:16px 20px 0}
.section-label{
  font-family:'Oswald',sans-serif;
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── PAINEL CARD ── */
.painel-card{
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid transparent;
  border-radius:10px;
  margin-bottom:8px;
  text-decoration:none;
  display:block;
  transition:all .2s;
  position:relative;
  overflow:hidden;
}
.card-available{border-left-color:var(--red)}
.card-available:hover{
  background:#FFF8F8;
  box-shadow:0 4px 20px var(--red-dim);
  transform:translateX(2px);
}
.card-soon{border-left-color:var(--muted2);opacity:0.6}
.card-soon:hover{opacity:0.75}
.card-inner{padding:12px 18px;display:flex;align-items:center;gap:14px}
.card-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  color:var(--muted2);
  line-height:1;
  min-width:26px;
  flex-shrink:0;
  transition:color .2s;
}
.card-available:hover .card-num{color:var(--red)}
.card-text{flex:1;min-width:0}
.card-status{
  font-family:'Oswald',sans-serif;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.status-on{color:var(--red)}
.status-off{color:var(--muted)}
.card-title{
  font-family:'Oswald',sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--black);
  line-height:1.3;
}
.card-soon .card-title{color:var(--stone)}
.card-sub{
  font-size:11.5px;
  color:var(--stone);
  margin-top:3px;
  font-weight:300;
}
.card-soon .card-sub{color:var(--muted)}
.card-arrow{
  color:var(--muted2);
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  flex-shrink:0;
  transition:color .2s,transform .2s;
}
.card-available:hover .card-arrow{color:var(--red);transform:translateX(3px)}
.soon-badge{
  position:absolute;top:10px;right:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;
  padding:2px 9px;
  font-family:'Oswald',sans-serif;
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--stone);
}

/* ── CTA ── */
.cta-section{padding:12px 20px 16px}
.cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--red);
  color:#fff;
  border-radius:10px;
  padding:14px 20px;
  text-decoration:none;
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  letter-spacing:3px;
  text-transform:uppercase;
  transition:background .2s,transform .2s;
  box-shadow:0 4px 20px var(--red-dim);
}
.cta-btn:active{background:#AA0000;transform:scale(0.97)}

/* ── FOOTER ── */
footer{
  padding:12px 24px 16px;
  border-top:1px solid var(--border);
  text-align:center;
  background:var(--bg);
}
.footer-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:15px;
  letter-spacing:4px;
  color:var(--muted);
  margin-bottom:3px;
}
.footer-sub{font-size:11px;color:var(--muted);font-family:'Roboto Condensed',sans-serif}

/* ── ANIMS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero{animation:fadeUp .6s ease forwards}
.section{animation:fadeUp .5s ease .1s both}
.cta-section{animation:fadeUp .5s ease .2s both}