/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#EBAB2B;
  --gold-dark:#C89125;
  --gold-light:#F5D595;
  --green:#22C55E;
  --green-dark:#16A34A;
  --black:#111111;
  --dark:#1a1a1a;
  --gray-bg:#F5F5F5;
  --gray-light:#E3E3E3;
  --white:#FFFFFF;
  --text-dark:#1a1a1a;
  --text-mid:#444444;
  --text-light:#888888;
  --radius:12px;
  --shadow:0 2px 12px rgba(0,0,0,.12);
  --shadow-lg:0 4px 24px rgba(0,0,0,.18);
}

html{scroll-behavior:smooth}

body{
  font-family:'Ubuntu',sans-serif;
  background:var(--gray-bg);
  color:var(--text-dark);
  font-size:15px;
  line-height:1.5;
}

a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block;height:auto}
button{cursor:pointer;border:none;background:none;font-family:inherit}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

/* ===== NAVBAR ===== */
.navbar{
  background-color:#ebab2b;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.navbar-inner{
  max-width:680px;
  margin:0 auto;
  padding:0 16px;
  height:60px;
  display:flex;
  align-items:center;
  gap:24px;
}

.navbar-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.navbar-logo img{
  height:36px;
  width:auto;
}

.navbar-links{
  display:flex;
  align-items:center;
  gap:20px;
  flex:1;
}

.navbar-links a,
.navbar-links .nav-dropdown span{
  color:#000;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:opacity .2s;
}

.navbar-links a:hover,
.navbar-links .nav-dropdown span:hover{
  opacity:.7;
}

/* ===== HAMBÚRGUER ===== */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  margin-left:auto;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
  border-radius:6px;
  transition:background .2s;
  flex-shrink:0;
}

.hamburger:hover{
  background:rgba(0,0,0,.1);
}

.hamburger-bar{
  display:block;
  width:22px;
  height:2px;
  background:#000;
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}

/* Animação X quando aberto */
.hamburger.is-open .hamburger-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.hamburger.is-open .hamburger-bar:nth-child(2){
  opacity:0;
}
.hamburger.is-open .hamburger-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ===== MENU MOBILE ===== */
.mobile-menu{
  display:none;
  flex-direction:column;
  background:#ebab2b;
  padding:0 16px 12px;
  border-top:1px solid rgba(0,0,0,.1);
}

.mobile-menu a{
  color:#000;
  padding:12px 0;
  font-size:15px;
  font-weight:500;
  border-bottom:1px solid rgba(0,0,0,.1);
  transition:opacity .2s;
}

.mobile-menu a:last-child{
  border-bottom:none;
}

.mobile-menu a:hover{
  opacity:.7;
}

.mobile-menu.open{
  display:flex;
}

/* ===== SORTEIOS DA SEMANA ===== */
.sorteios-grid{
  padding:20px;
  margin:0 auto;
  background:var(--gold);
  overflow:hidden;
}

.sorteio-card{
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid #e5e5e5;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

.sorteio-card-header{
  padding:12px 16px 0;
}

.sorteio-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  text-transform:uppercase;
  margin-bottom:8px;
}

.sorteio-badge.amanha{
  background:#EF4444;
  color:var(--white);
}

.sorteio-card-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
}

.sorteio-nome{
  font-size:18px;
  font-weight:700;
  color:var(--text-dark);
}

.sorteio-desc-sub{
  font-size:12px;
  color:var(--text-mid);
}

.sorteio-card-body{
  padding:0 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sorteio-thumb{
  width:100%;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:4px;
}

.sorteio-thumb picture,
.sorteio-thumb img{
  width:100%;
  display:block;
}

/* ===== WIDGET SUSEP ===== */
.widget-susep{
  display:flex;
  align-items:center;
  gap:6px;
  background:#2a2a2a;
  border-radius:8px;
  padding:6px 10px;
}

.susep-label{color:#aaa;font-size:11px}
.susep-num{color:var(--white);font-size:11px;font-weight:600}

.btn-info-circle{
  color:var(--gold);
  font-size:14px;
  margin-left:auto;
}

/* ===== OPÇÕES DE COMPRA ===== */
.widget-opcoes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

/* opcao-btn agora é <a> — reset visual */
.opcao-btn{
  background:var(--gray-light);
  border-radius:10px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  position:relative;
  transition:background .2s,transform .15s,box-shadow .2s;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}

.opcao-btn:hover{
  background:#d4d4d4;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.opcao-btn.active{
  background:var(--gray-light);
  border-color:var(--gold);
}

.opcao-popular.active{
  background:#fff8e6;
  border-color:var(--gold);
}

.popular-badge-btn{
  position:absolute;
  top:-8px;
  right:4px;
  background:var(--gold);
  color:var(--black);
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  text-transform:uppercase;
  white-space:nowrap;
}

.opcao-plus{
  color:var(--black);
  font-size:12px;
  font-weight:600;
}

.opcao-tags{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
  width:100%;
}

.tag-gold{
  background:var(--gold);
  color:var(--black);
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  text-transform:uppercase;
  white-space:nowrap;
}

.tag-green{
  background:var(--green);
  color:var(--white);
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  text-transform:uppercase;
  white-space:nowrap;
}

.tag-price{
  padding:5px 15px;
  text-align:center;
  line-height:1.4;
  width:100%;
}

/* ===== BOTÃO COMPRAR ===== */
.btn-comprar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:var(--white);
  border-radius:8px;
  padding:12px 16px;
  font-weight:700;
  font-size:16px;
  gap:2px;
  transition:background .2s,transform .15s;
  text-align:center;
  text-decoration:none;
}

.btn-comprar:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}

.comprar-preco{
  font-size:18px;
  font-weight:700;
}

.comprar-sub{
  font-size:11px;
  font-weight:400;
  background:var(--gold);
  color:var(--black);
  padding:2px 10px;
  border-radius:999px;
  text-transform:uppercase;
}

/* ===== GANHADORES ===== */
.ganhadores-section{
  background:var(--gray-bg);
  padding:20px 0;
}

.ganhadores-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}

.section-title{
  font-size:24px;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:4px;
}

.section-subtitle{
  font-size:14px;
  color:var(--text-mid);
  margin-bottom:24px;
}

.btn-ver-mais-link{
  color:var(--gold-dark);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:none;
  border:none;
  text-decoration:underline;
}

.ganhadores-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.ganhador-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .2s;
}

.ganhador-card:hover{transform:translateY(-2px)}

.ganhador-valor{
  background:var(--dark);
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  padding:6px 12px;
  width:100%;
  text-align:center;
}

.destaque-milhao .ganhador-valor{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:var(--white);
}

.ganhador-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.ganhador-nome{
  font-size:13px;
  font-weight:700;
  padding:6px 8px 2px;
}

.ganhador-cidade{
  font-size:12px;
  color:var(--text-mid);
  padding-bottom:10px;
}

/* ===== BENEFÍCIOS / LOJA ===== */
.beneficios-section{
  background:var(--gray-bg);
  padding:40px 0;
}

.beneficios-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.beneficios-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.beneficio-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  transition:transform .2s;
}

.beneficio-card:hover{transform:translateY(-2px)}

.beneficio-img{
  width:100%;
  height:130px;
  background-size:cover;
  background-position:center;
}

.beneficio-nome{
  font-size:13px;
  font-weight:700;
  color:var(--text-dark);
  text-align:center;
  padding:0 8px;
}

.btn-plano{
  display:block;
  text-align:center;
  padding:12px 16px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  transition:background .2s,transform .15s,box-shadow .2s;
  cursor:pointer;
}

.btn-gold{
  background:var(--gold);
  color:var(--black);
}

.btn-gold:hover{
  background:var(--gold-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(235,171,43,.4);
}

.beneficio-card .btn-plano{
  width:calc(100% - 16px);
  padding:9px 12px;
  font-size:13px;
}

/* ===== RODAPÉ ===== */
.footer{
  background:var(--dark);
  padding:32px 0 24px;
  color:#aaa;
}

.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.footer-logo{height:48px;width:auto}

.footer-social{display:flex;gap:14px}

.footer-social a{
  color:#aaa;
  font-size:20px;
  transition:color .2s;
}

.footer-social a:hover{color:var(--gold)}

.footer-legal{
  font-size:11px;
  line-height:1.6;
  color:#888;
  margin-bottom:16px;
}

.footer-divider{
  border:none;
  border-top:1px solid #333;
  margin:16px 0;
}

.footer-parceiros{
  display:flex;
  gap:32px;
  align-items:center;
  flex-wrap:wrap;
}

.footer-parceiros>div{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#aaa;
}

.parceiro-logo{height:28px;width:auto}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:12px;
}

.footer-links a{
  color:#aaa;
  transition:color .2s;
}

.footer-links a:hover{color:var(--gold)}
.footer-links span{color:#666}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .beneficios-grid{grid-template-columns:repeat(3,1fr)}
  .ganhadores-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:600px){
  .desktop-only{display:none!important}
  .hamburger{display:flex}

  .beneficios-grid{grid-template-columns:repeat(3,1fr)}
  .ganhadores-grid{grid-template-columns:repeat(3,1fr)}

  .footer-top{flex-direction:column;gap:12px}
  .footer-parceiros{flex-direction:column;gap:12px}

  .section-title{font-size:20px}
  .widget-opcoes{gap:6px}
  .tag-price{padding:4px 8px}
}

@media(max-width:380px){
  .widget-opcoes{grid-template-columns:repeat(2,1fr)}
  .ganhadores-grid{grid-template-columns:1fr}
}

@media(min-width:601px){
  .mobile-only{display:none!important}
}