:root{
  --amarelo:#FFC700;
  --amarelo-hover:#FFD93B;
  --azul-escuro:#0a1929;
  --azul-medio:#142a44;
  --azul-claro:#1e3a5f;
  --preto:#000;
  --branco:#fff;
  --cinza:#8a9bb4;
  --cinza-card:#1a2942;
  --borda:rgba(255,199,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Segoe UI',sans-serif;
  background:var(--azul-escuro);
  color:var(--branco);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;
  background:rgba(10,25,41,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--borda);
  z-index:100;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-left{display:flex;align-items:center;gap:14px}
.back-btn{
  background:none;border:none;
  color:var(--amarelo);
  font-size:24px;
  cursor:pointer;
  padding:4px 6px;
  display:flex;align-items:center;
  font-weight:700;
}
.header-title{
  font-weight:800;
  font-size:14px;
  letter-spacing:1.5px;
  color:var(--branco);
}
.header-badge{
  background:var(--amarelo);
  color:var(--preto);
  font-weight:900;
  font-size:10px;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:1px;
}

/* ===== HERO HOME ===== */
.hero{
  position:relative;
  width:100%;
  background:var(--preto);
}
.hero img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== INTRO HOME ===== */
.intro{
  padding:32px 24px 20px;
  text-align:center;
}
.intro h1{
  font-size:24px;
  font-weight:900;
  letter-spacing:.5px;
  margin-bottom:12px;
  color:var(--branco);
  text-transform:uppercase;
}
.intro h1 span{color:var(--amarelo)}
.intro p{
  font-size:14px;
  color:var(--cinza);
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}

/* ===== SECTION TITLE ===== */
.section-title{
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 24px 12px;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--amarelo);
}
.section-title::before,
.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--borda),transparent);
}

/* ===== LIST OF CATEGORIES ===== */
.lista{
  padding:0 16px 40px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cat-card{
  background:var(--cinza-card);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.cat-card:active{transform:scale(.98)}
.cat-card:hover{
  background:var(--azul-claro);
  border-color:var(--amarelo);
}
.cat-card-thumb{
  width:80px;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--azul-medio);
  position:relative;
}
.cat-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cat-card-info{
  flex:1;
  min-width:0;
}
.cat-card-title{
  font-size:15px;
  font-weight:800;
  color:var(--branco);
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.2;
  margin-bottom:4px;
}
.cat-card-desc{
  font-size:12px;
  color:var(--cinza);
  line-height:1.4;
}
.cat-card-arrow{
  color:var(--amarelo);
  font-size:24px;
  font-weight:300;
  padding-right:8px;
}
.cat-card-badge{
  position:absolute;
  top:6px;
  right:6px;
  background:var(--amarelo);
  color:var(--preto);
  font-size:9px;
  font-weight:900;
  padding:3px 7px;
  border-radius:6px;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(255,199,0,.3);
}
.cat-card.em-breve{opacity:.7}
.cat-card.em-breve .cat-card-thumb{filter:grayscale(.4)}
.cat-card.bonus{
  border-color:rgba(16,185,129,.28);
  background:linear-gradient(135deg,var(--cinza-card) 0%,rgba(16,185,129,.06) 100%);
}
.cat-card.bonus:hover{border-color:#10b981;background:rgba(16,185,129,.1)}
.cat-card-badge.bonus{
  background:#10b981;
  color:#fff;
  box-shadow:0 4px 12px rgba(16,185,129,.45);
}
.cat-card-thumb-icon{
  width:80px;
  height:80px;
  border-radius:10px;
  flex-shrink:0;
  background:linear-gradient(135deg,#10b981 0%,#34d399 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  box-shadow:0 6px 18px rgba(16,185,129,.25);
}
.section-title.bonus-section{color:#10b981}
.cat-hero-banner.bonus{
  background:linear-gradient(135deg,#0a3d2e 0%,#10b981 120%);
  border-bottom-color:#10b981;
}
.cat-hero-banner.bonus::before{background:radial-gradient(ellipse,rgba(52,211,153,.22) 0%,transparent 70%)}
.cat-hero-banner.bonus .cat-hero-icon{background:linear-gradient(135deg,#10b981 0%,#34d399 100%);color:#fff;box-shadow:0 12px 32px rgba(16,185,129,.4)}
.cat-hero-banner.bonus .cat-hero-num{color:#34d399}
.btn-drive.bonus{
  background:linear-gradient(135deg,#10b981 0%,#34d399 100%);
  color:#fff;
  box-shadow:0 8px 24px rgba(16,185,129,.3);
}
.btn-drive.bonus:hover{box-shadow:0 14px 36px rgba(16,185,129,.45)}

/* ===== CATEGORY PAGE — COMPACT BANNER ===== */
.cat-hero-banner{
  position:relative;
  background:linear-gradient(135deg,var(--azul-medio) 0%,var(--azul-claro) 100%);
  padding:44px 24px 36px;
  text-align:center;
  border-bottom:3px solid var(--amarelo);
  overflow:hidden;
}
.cat-hero-banner::before{
  content:"";
  position:absolute;
  top:-60%;
  right:-30%;
  width:80%;
  height:220%;
  background:radial-gradient(ellipse,rgba(255,199,0,.18) 0%,transparent 70%);
  pointer-events:none;
}
.cat-hero-banner::after{
  content:"";
  position:absolute;
  bottom:-60%;
  left:-30%;
  width:70%;
  height:200%;
  background:radial-gradient(ellipse,rgba(30,58,95,.6) 0%,transparent 70%);
  pointer-events:none;
}
.cat-hero-inner{
  position:relative;
  z-index:2;
}
.cat-hero-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  background:linear-gradient(135deg,var(--amarelo) 0%,#FFD93B 100%);
  color:var(--preto);
  border-radius:20px;
  font-size:36px;
  margin-bottom:18px;
  box-shadow:0 12px 32px rgba(255,199,0,.28);
}
.cat-hero-num{
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--amarelo);
  margin-bottom:8px;
  text-transform:uppercase;
}
.cat-hero-title{
  font-size:30px;
  font-weight:900;
  color:var(--branco);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
  line-height:1.05;
}
.cat-hero-sub{
  font-size:12px;
  color:var(--cinza);
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:700;
}
.cat-content{
  padding:32px 24px 48px;
  max-width:680px;
  margin:0 auto;
}
.cat-desc{
  font-size:15px;
  color:var(--cinza);
  line-height:1.7;
  margin-bottom:28px;
}
.cat-stats{
  display:flex;
  gap:12px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.stat-pill{
  background:var(--cinza-card);
  border:1px solid var(--borda);
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--amarelo);
  letter-spacing:.5px;
}
.btn-drive{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:linear-gradient(135deg,var(--amarelo) 0%,#FFD93B 100%);
  color:var(--preto);
  padding:18px 24px;
  border-radius:14px;
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.5px;
  box-shadow:0 8px 24px rgba(255,199,0,.25);
  transition:transform .15s ease,box-shadow .15s ease;
  cursor:pointer;
  border:none;
}
.btn-drive:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(255,199,0,.4);
}
.btn-drive:active{transform:translateY(0)}
.btn-drive-icon{font-size:22px;flex-shrink:0}
.btn-drive-text{
  flex:1;
  min-width:0;
  text-align:center;
  line-height:1.25;
  word-break:keep-all;
}
.btn-drive.disabled{
  background:linear-gradient(135deg,#2a3d5a 0%,#1e3a5f 100%);
  color:var(--cinza);
  box-shadow:none;
  cursor:not-allowed;
  pointer-events:none;
  opacity:.85;
}
.btn-drive.disabled:hover{transform:none;box-shadow:none}
.em-producao-tag{
  display:inline-block;
  background:rgba(255,199,0,.12);
  color:var(--amarelo);
  border:1px solid var(--amarelo);
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:14px;
  text-transform:uppercase;
}
.cat-aviso{
  margin-top:20px;
  padding:14px 16px;
  background:rgba(255,199,0,.06);
  border-left:3px solid var(--amarelo);
  border-radius:8px;
  font-size:13px;
  color:var(--cinza);
  line-height:1.5;
}
.cat-aviso strong{color:var(--amarelo)}

/* ===== FOOTER ===== */
.footer{
  text-align:center;
  padding:32px 24px;
  font-size:12px;
  color:var(--cinza);
  border-top:1px solid var(--borda);
  margin-top:20px;
}
.footer strong{color:var(--amarelo);font-weight:800}

/* ===== RESPONSIVE ===== */
@media (min-width:720px){
  .intro h1{font-size:30px}
  .cat-hero-title{font-size:38px}
  .cat-card-thumb{width:100px;height:100px}
  .cat-card-title{font-size:17px}
  .cat-card-desc{font-size:13px}
  .cat-hero-banner{padding:56px 32px 48px}
  .cat-hero-icon{width:80px;height:80px;font-size:40px}
}

@media (max-width:520px){
  .header{padding:11px 14px}
  .header-title{font-size:12px;letter-spacing:1px}
  .header-badge{font-size:9px;padding:3px 8px;letter-spacing:.5px}
  .back-btn{font-size:22px;padding:2px 4px}

  .intro{padding:24px 18px 14px}
  .intro h1{font-size:20px}
  .intro p{font-size:13px}
  .section-title{padding:18px 18px 10px;font-size:11px;letter-spacing:1.5px}

  .lista{padding:0 12px 32px;gap:8px}
  .cat-card{padding:8px;border-radius:12px;gap:11px}
  .cat-card-thumb,.cat-card-thumb-icon{width:64px;height:64px;border-radius:8px;font-size:30px}
  .cat-card-title{font-size:13px;letter-spacing:.2px;margin-bottom:2px}
  .cat-card-desc{font-size:11px;line-height:1.3}
  .cat-card-arrow{font-size:20px;padding-right:4px}
  .cat-card-badge{font-size:8px;padding:2px 5px;top:4px;right:4px}

  .cat-hero-banner{padding:30px 18px 26px}
  .cat-hero-icon{width:56px;height:56px;font-size:26px;border-radius:14px;margin-bottom:12px}
  .cat-hero-num{font-size:10px;letter-spacing:2.5px;margin-bottom:6px}
  .cat-hero-title{font-size:22px;letter-spacing:.5px;line-height:1.1;margin-bottom:8px}
  .cat-hero-sub{font-size:10px;letter-spacing:1.5px}

  .cat-content{padding:22px 18px 36px}
  .cat-stats{gap:6px;margin-bottom:18px}
  .stat-pill{font-size:11px;padding:6px 10px;letter-spacing:.3px}
  .cat-desc{font-size:14px;line-height:1.6;margin-bottom:22px}

  .btn-drive{padding:15px 16px;font-size:12.5px;letter-spacing:.6px;border-radius:12px;gap:8px}
  .btn-drive-icon{font-size:18px}

  .em-producao-tag{font-size:10px;letter-spacing:1.5px;padding:5px 11px;margin-bottom:12px}

  .cat-aviso{font-size:12px;padding:12px 14px;margin-top:16px}

  .footer{padding:24px 18px;font-size:11px}
}

@media (max-width:360px){
  .cat-card-thumb{width:56px;height:56px}
  .cat-card-title{font-size:12px}
  .cat-card-desc{font-size:10px}
  .cat-hero-title{font-size:20px}
  .intro h1{font-size:18px}
}