/* ===== Reset/Vars ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --bg: #f7f7f7;
  --text: #333;
  --muted: #444;
  --muted-border: #4444;
  --primary: #0b5ed7;
  --success: #4b711d;
  --pill: #0047AB;
  --card: #fff;
  --shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body{ font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }

.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#fff;
}
.logo{display:flex;align-items:center;gap:8px}
.logo img{height:32px;display:block}
.pill-compras{
  background:#fff;border:2px solid #d6c297;color:#2b2b2b;
  padding:8px 14px;border-radius:999px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.03) inset;text-decoration: none;
}


/* ===== Hero/Banner ===== */
.hero{ text-align:center; }
.hero__banner{ width:100%; display:block; }

/* ===== Barra de info ===== */
.info-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px; background: var(--bg); font-weight:600; font-size:14px;
}
.info-bar__sorteio{ display:flex; align-items:center; gap:8px; }
.info-bar__icon{ width:24px; height:24px; object-fit:contain; }
.info-bar__preco{ display:flex; align-items:center; gap:8px; }
.pill{
  background:var(--pill); color:#fff; padding:6px 10px; border-radius:6px;
}
.divider{ border:0; border-top:1px solid #ddd; margin:6px 0; }

/* ===== Planos (Combos) ===== */
.planos{ padding:16px 12px 8px; background:#fff; border-radius:10px; }
.planos__titulo{
  margin:0 0 12px; font-size:18px; font-weight:800; color:#2b3a4a;
  display:flex; align-items:center; gap:8px;
}

/* sempre 2 colunas, inclusive no celular */
.planos__grid{
  display:grid !important; grid-template-columns:repeat(2, 1fr) !important;
  gap:14px; width:100%;
}
.plano-box{
  position:relative; background:#fff;
  border:2px solid var(--primary) !important; border-radius:12px;
  padding:18px 16px; box-shadow:0 2px 0 rgba(11,94,215,0.08) inset;
  transition: box-shadow .2s ease; text-align:left; cursor:pointer;
}
.plano-box:hover{ box-shadow:0 0 0 3px rgba(11,94,215,0.12); }
.plano-box h2{ margin:0 0 8px; font-size:18px; color:#2b3a4a; }
.preco-linha{ font-size:18px; color:#2b3a4a; }
.preco-linha strong{ font-weight:800; }
.badge{
  position:absolute; top:-12px; left:14px; background:var(--primary); color:#fff;
  font-size:12px; line-height:1; padding:6px 10px; border-radius:999px;
  font-weight:800; box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.plano-box.destaque{ box-shadow:0 0 0 3px rgba(11,94,215,0.12); }

/* ===== Botão Minhas Compras (seção dentro do main) ===== */
.minhas-compras{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border:2px solid var(--muted-border);
  border-radius:14px; background:#fff; font-weight:bold; font-size:1em;
  color:var(--text); box-shadow:0 2px 5px rgba(0,0,0,0.03);
  margin:20px 10px; gap:10px; cursor:pointer; width:calc(100% - 20px);
}
.minhas-compras__left{ display:flex; align-items:center; gap:6px; }
.minhas-compras img{ width:20px; height:20px; object-fit:contain; filter:hue-rotate(60deg) saturate(5); }
.seta{ font-size:1.5em; color:#444; }

/* ===== Barra fixa pagamento ===== */
.fixo-pagamento{
  position:fixed; bottom:0; left:0; width:100%; background:#fff;
  border-top:1px solid #ddd; padding:15px 20px; box-shadow:0 -2px 5px rgba(0,0,0,0.05);
  z-index:1000;
}
.fixo-pagamento__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.info-oferta .qtd{ font-weight:bold; font-size:14px; color:#333; }
.info-oferta .de{ color:red; text-decoration:line-through; font-size:.9em; }
.info-oferta .por{ font-weight:bold; font-size:1.2em;margin-top: 5px; }
.quantidade-controls{ display:flex; align-items:center; gap:10px; }
.quantidade-controls button{
  font-size:1.2em; padding:8px 16px; border-radius:10px; border:1px solid #ccc; background:#fff; font-weight:bold; cursor:pointer;
}
.qtd-display{
  font-size:1.2em; padding:8px 40px; border-radius:10px; border:1px solid #ccc; background:#fff; font-weight:bold;
}
.btn-pagamento{
  width:100%; background:var(--success); color:#fff; border:none; padding:16px;
  border-radius:10px; font-size:1em; font-weight:bold; cursor:pointer;
}

/* ===== Footer ===== */
.footer{ 
    padding:20px; 
    text-align:center; 
    color:#aaa;
    margin-bottom: 180px;
 }
.footer__legal{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:20px; }
.footer__logo{ width:80%; max-width:560px; }
.footer__copy{ font-size:.9em; }

button,
.btn,
a[href],
[role="button"],
input[type="button"],
input[type="submit"] {
  touch-action: manipulation;        /* Chrome/Edge/Firefox + iOS modernos */
  -ms-touch-action: manipulation;    /* Edge legado/IE em touch */
}