/* Lisboa Next — Static MVP (preto + vermelho premium) */
:root{
  --bg:#0a0a0a;
  --bg2:#111111;
  --card:#121212;
  --border:#242424;
  --text:#f5f5f5;
  --muted:#a3a3a3;
  --red:#e11d2e; /* vermelho premium */
  --red2:#b91c1c;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% 0%, rgba(225,29,46,.14), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(225,29,46,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 18px}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(10,10,10,.72);
  border-bottom:1px solid var(--border);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo{width:44px; height:44px; object-fit:contain; border-radius:12px; border:1px solid var(--border); background:rgba(17,17,17,.9)}
.brand__name{font-weight:900; letter-spacing:.3px}
.brand__tag{font-size:12px; color:var(--muted)}
.brand__text{line-height:1.05}

.nav{display:none; gap:6px; align-items:center}
.nav a{padding:10px 12px; border-radius:14px; color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.05); color:var(--text)}
.topbar__actions{display:flex; align-items:center; gap:10px}
.navToggle{display:inline-flex}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:16px;
  border:1px solid transparent;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--red); border-color:var(--red)}
.btn--primary:hover{background:var(--red2); border-color:var(--red2)}
.btn--outline{background:transparent; border-color:#3a3a3a; color:var(--text)}
.btn--outline:hover{background:rgba(255,255,255,.05)}
.btn--ghost{background:rgba(255,255,255,.04); border-color:#2a2a2a; color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.w-full{width:100%}

.mobileNav{border-top:1px solid var(--border); background:rgba(10,10,10,.92)}
.mobileNav__inner{display:grid; gap:8px; padding:12px 0}
.mobileNav a{padding:12px 12px; border-radius:14px; color:var(--muted)}
.mobileNav a:hover{background:rgba(255,255,255,.05); color:var(--text)}

.section{padding:56px 0}
.hero{padding-top:64px}
.hero__grid{display:grid; gap:18px}
.hero__title{font-size:42px; line-height:1.05; margin:0; letter-spacing:-.4px}
.hero__subtitle{display:block; font-size:22px; color:var(--muted); margin-top:8px; font-weight:900}
.hero__lead{color:var(--text); opacity:.92; max-width:680px}
.muted{color:var(--muted)}
.small{font-size:13px}

.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card--hero{padding:20px}
.card--info{margin-top:16px}
.card__kicker{color:var(--muted); font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.card__title{font-weight:900; font-size:18px; margin-top:6px}
.card__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.pillGrid{display:grid; gap:12px; margin-top:18px}
.pillGrid--one{grid-template-columns:1fr}
.pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  border-radius:var(--radius);
  padding:14px;
}
.pill__title{font-weight:900}
.pill__desc{color:var(--muted); font-size:14px; margin-top:4px}

.sectionHead{margin-bottom:14px}
.kicker{color:var(--muted); font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
h2{margin:6px 0 0 0; font-size:28px; letter-spacing:-.2px}

.filters{display:grid; gap:12px; margin:18px 0}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:800}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid #343434;
  background:rgba(0,0,0,.35);
  color:var(--text);
}
.field input:focus{outline:none; border-color:rgba(225,29,46,.7); box-shadow:0 0 0 4px rgba(225,29,46,.15)}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid #343434;
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.chip--active{border-color:rgba(225,29,46,.8); box-shadow:0 0 0 4px rgba(225,29,46,.12)}

.grid{display:grid; gap:14px}
.grid--2{grid-template-columns:1fr}
.cardLine{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.tag{border:1px solid #343434; color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900}
.tag--red{border-color:rgba(225,29,46,.7); color:#ffd1d1}

.cardActionsRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btnSmall{padding:9px 12px; border-radius:14px; font-weight:900}

.emptyState{
  border:1px dashed #343434;
  border-radius:var(--radius);
  padding:16px;
  color:var(--muted);
}

.list{margin:10px 0 0 18px; color:var(--muted)}
.list li{margin:8px 0}
.callout{
  margin-top:14px;
  border:1px solid rgba(225,29,46,.35);
  background:rgba(225,29,46,.10);
  padding:12px;
  border-radius:16px;
}
.plan{margin-top:12px; padding:12px; border:1px solid #343434; border-radius:16px; background:rgba(255,255,255,.02)}
.plan__name{font-weight:900}
.hint{margin-top:12px; color:var(--muted); font-size:13px; border:1px solid #343434; padding:12px; border-radius:16px; background:rgba(0,0,0,.25)}

.box{margin-top:12px; border:1px solid #343434; padding:12px; border-radius:16px; background:rgba(255,255,255,.02)}
.box__title{font-weight:900}

.footer{border-top:1px solid var(--border); padding:22px 0}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer__brand{display:flex; align-items:center; gap:12px}
.footer__logo{width:40px; height:40px; object-fit:contain; border-radius:12px; border:1px solid var(--border); background:rgba(17,17,17,.9)}
.footer__name{font-weight:900}
.footer__links{display:flex; gap:10px; flex-wrap:wrap}
.footer__links a{padding:10px 12px; border-radius:14px; color:var(--muted)}
.footer__links a:hover{background:rgba(255,255,255,.05); color:var(--text)}
.footer__note{padding-top:12px}

@media (min-width: 900px){
  .nav{display:flex}
  .navToggle{display:none}
  .hero__grid{grid-template-columns:1.2fr .8fr; align-items:start; gap:18px}
  .pillGrid{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr; align-items:end}
  .grid{grid-template-columns:1fr 1fr}
  .grid--2{grid-template-columns:1.2fr .8fr}
}
/* ===== Planos (Parceiros) ===== */
.partnerCard {
  position: relative;
  overflow: hidden;
  border-width: 2px; /* base */
}

/* PREMIUM — mais forte */
.partnerCard--premium{
  border-width: 3.5px; /* mais grossa */
  border-color: rgba(212,175,55,.85); /* dourado forte */
  box-shadow:
    0 0 0 1px rgba(212,175,55,.35),
    0 16px 42px rgba(212,175,55,.18),
    0 10px 30px rgba(0,0,0,.45);
}

/* PRO — destaque médio */
.partnerCard--pro{
  border-width: 2.5px;
  border-color: rgba(190,190,190,.65); /* prata mais suave */
}

/* BASICO — padrão */
.partnerCard--basico{
  border-width: 2px;
  border-color: #2a2a2a;
}

/* ===== Selos ===== */
.badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  border:1px solid #343434;
  background: rgba(0,0,0,.35);
  color: var(--text);
  backdrop-filter: blur(4px);
}

/* Selo PREMIUM — mais chamativo */
.badge--premium{
  padding:9px 14px; /* maior */
  font-size:13px;
  font-weight:900;
  border-width:1.8px;
  border-color: rgba(212,175,55,.9);
  background: linear-gradient(
    135deg,
    rgba(212,175,55,.35),
    rgba(212,175,55,.15)
  );
  color: #ffefc1;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.4),
    0 8px 20px rgba(212,175,55,.35);
}

/* Selo PRO — intermediário */
.badge--pro{
  padding:8px 12px;
  border-color: rgba(180,180,180,.75);
  background: rgba(180,180,180,.18);
  color: #f2f2f2;
}

/* Selo BASICO */
.badge--basico{
  padding:7px 11px;
  border-color:#3a3a3a;
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
/* ===== Animações Premium / Pro ===== */

/* Hover geral (todos) */
.partnerCard{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover PRO — discreto */
.partnerCard--pro:hover{
  transform: translateY(-3px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(190,190,190,.25);
}

/* Hover PREMIUM — mais presente */
.partnerCard--premium:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 2px rgba(212,175,55,.45),
    0 20px 55px rgba(212,175,55,.35),
    0 14px 38px rgba(0,0,0,.55);
}

/* ===== Brilho suave contínuo no selo Premium ===== */

@keyframes premiumGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,.35),
      0 0 10px rgba(212,175,55,.25);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(212,175,55,.55),
      0 0 22px rgba(212,175,55,.55);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,.35),
      0 0 10px rgba(212,175,55,.25);
  }
}

.badge--premium{
  animation: premiumGlow 3.5s ease-in-out infinite;
}


.badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid #343434;
  background: rgba(0,0,0,.25);
  color: var(--text);
}

.badge--premium{
  border-color: rgba(212,175,55,.7);
  background: rgba(212,175,55,.12);
  color: #ffe8b8;
}

.badge--pro{
  border-color: rgba(180,180,180,.7);
  background: rgba(180,180,180,.10);
  color: #f1f1f1;
}

.badge--basico{
  border-color:#343434;
  background: rgba(255,255,255,.03);
  color: var(--muted);
}