/* ========================================================================
   MEGA TICKETS BRASIL — estilos compartilhados das páginas "Mega"
   (Mega Five, Connect, Connect Business, Moments, Sponsors)
   Usa os tokens do mtb-design-system.css. Tema claro verde/amarelo.
   ======================================================================== */

/* ---- HERO de produto ---- */
.mega-hero { position: relative; overflow: hidden; padding: clamp(56px,9vw,108px) 0 clamp(40px,6vw,72px);
  background:
    radial-gradient(55% 75% at 10% 6%, rgba(0,168,89,.12), transparent 60%),
    radial-gradient(55% 70% at 92% 0%, rgba(255,196,0,.18), transparent 55%),
    var(--mtb-bg); }
.mega-hero--split { }
.mega-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.mega-hero h1 { font-size: clamp(32px,5.2vw,58px); font-weight: 800; line-height: 1.06; overflow-wrap: break-word; }
.mega-hero h1 .hl { color: var(--mtb-green-deep); position: relative; }
.mega-hero h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.28em; background: var(--mtb-yellow); opacity:.5; z-index:-1; border-radius:4px; }
.mega-hero__sub { margin-top: 18px; max-width: 560px; }
@media (max-width: 880px){ .mega-hero__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Faixa de posicionamento ---- */
.mega-band { text-align:center; }
.mega-band .mtb-display { max-width: 820px; margin: 0 auto; }

/* ---- Grid de serviços / features (cards) ---- */
.mega-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.mega-card { background:#fff; border:1px solid var(--mtb-border); border-radius: var(--radius-lg); padding: 26px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.mega-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mtb-border-green); }
.mega-card__ico { width: 56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px;
  background: var(--mtb-success-bg); margin-bottom: 14px; }
.mega-card--feature { grid-column: span 2; background: var(--mtb-gradient-ink); color:#fff; border:0; }
.mega-card--feature h3 { color:#fff; }
.mega-card--feature .mega-card__ico { background: rgba(255,255,255,.12); }
@media (max-width: 720px){ .mega-card--feature { grid-column: span 1; } }

/* ---- Passos numerados (fluxo) ---- */
.mega-flow { display:grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.mega-step { position: relative; }
.mega-step__n { width: 46px; height:46px; border-radius:50%; background: var(--mtb-gradient-brand); color:#fff;
  font-family: var(--font-display); font-weight:800; font-size:20px; display:grid; place-items:center;
  box-shadow: var(--shadow-green); margin-bottom: 14px; }
.mega-step h3 { font-size: 17px; margin-bottom: 6px; }

/* ---- Órbita (hero do Mega Five) ---- */
.orbit { position: relative; width: min(440px, 86vw); aspect-ratio: 1; margin: 0 auto; }
.orbit__core { position:absolute; inset: 34%; border-radius:50%; background: var(--mtb-gradient-brand);
  display:grid; place-items:center; color:#fff; text-align:center; font-family:var(--font-display); font-weight:800;
  box-shadow: var(--shadow-green); padding: 10px; font-size: 14px; }
.orbit__ring { position:absolute; inset:0; border:2px dashed var(--mtb-border-strong); border-radius:50%; animation: spin 40s linear infinite; }
.orbit__chip { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.orbit__chip span { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--mtb-border);
  box-shadow: var(--shadow-sm); border-radius: var(--radius-full); padding: 9px 14px; font-weight:700; font-size:13px; white-space:nowrap; }
.orbit__chip--1 { transform: translate(-50%,-50%) rotate(0deg) translateY(calc(-1 * min(220px,43vw))); }
.orbit__chip--2 { transform: translate(-50%,-50%) rotate(72deg) translateY(calc(-1 * min(220px,43vw))); }
.orbit__chip--3 { transform: translate(-50%,-50%) rotate(144deg) translateY(calc(-1 * min(220px,43vw))); }
.orbit__chip--4 { transform: translate(-50%,-50%) rotate(216deg) translateY(calc(-1 * min(220px,43vw))); }
.orbit__chip--5 { transform: translate(-50%,-50%) rotate(288deg) translateY(calc(-1 * min(220px,43vw))); }
.orbit__chip--1 span,.orbit__chip--2 span,.orbit__chip--3 span,.orbit__chip--4 span,.orbit__chip--5 span { transform: rotate(0deg); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit__ring { animation: none; } }

/* ---- Coluna dupla (para marcas / para organizadores) ---- */
.mega-two { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px){ .mega-two { grid-template-columns: 1fr; } }

/* ---- Lista com check ---- */
.mega-check { list-style:none; padding:0; margin: 18px 0 0; display:grid; gap:12px; }
.mega-check li { display:flex; gap:10px; align-items:flex-start; }
.mega-check svg { width:22px; height:22px; flex:none; fill: var(--mtb-green); margin-top:1px; }

/* ---- Pacotes / pricing ---- */
.pkgs { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
.pkg { background:#fff; border:1px solid var(--mtb-border); border-radius: var(--radius-lg); padding: 28px; display:flex; flex-direction:column; }
.pkg--featured { border: 2px solid var(--mtb-green); box-shadow: var(--shadow-md); position: relative; }
.pkg__tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.pkg__price { font-family: var(--font-display); font-weight:800; font-size: 30px; color: var(--mtb-green-deep); margin: 10px 0 4px; }
.pkg .mega-check { flex:1; }
@media (max-width: 820px){ .pkgs { grid-template-columns: 1fr; } }

/* ---- Tabela comparativa ---- */
.compare { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare__col { border:1px solid var(--mtb-border); border-radius: var(--radius-lg); padding: 24px; }
.compare__col--win { border-color: var(--mtb-border-green); background: var(--mtb-success-bg); }
.compare__col ul { list-style:none; padding:0; margin: 14px 0 0; display:grid; gap:10px; }
.compare__col li { display:flex; gap:10px; align-items:flex-start; color: var(--mtb-ink-2); }
.compare__col li::before { content:"✕"; color: var(--mtb-error); font-weight:700; }
.compare__col--win li::before { content:"✓"; color: var(--mtb-green); }
@media (max-width: 640px){ .compare { grid-template-columns: 1fr; } }

/* ---- Anel de match ---- */
.matchring { width:140px; height:140px; border-radius:50%; display:grid; place-items:center; margin: 0 auto;
  background: conic-gradient(var(--mtb-green) var(--p,92%), var(--mtb-bg-mute) 0); }
.matchring__in { width:108px; height:108px; border-radius:50%; background:#fff; display:grid; place-items:center;
  font-family: var(--font-display); font-weight:800; font-size: 28px; color: var(--mtb-green-deep); }

/* ---- Chips ---- */
.mega-chips { display:flex; flex-wrap:wrap; gap:10px; }
.mega-chip { border:1px solid var(--mtb-border-strong); border-radius: var(--radius-full); padding: 8px 16px; font-weight:600; font-size:14px; color: var(--mtb-ink-2); background:#fff; }

/* ---- Faixa de stats ---- */
.mega-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:center; }
.mega-stats b { display:block; font-family: var(--font-display); font-size: clamp(26px,3vw,38px); color: var(--mtb-yellow); }
.mega-stats--ink b { color: var(--mtb-yellow); }
@media (max-width: 640px){ .mega-stats { grid-template-columns: 1fr 1fr; } }

/* ---- Badge "em breve" ---- */
.soon { font-size: 11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--mtb-warning);
  background: var(--mtb-warning-bg); border:1px solid rgba(255,196,0,.4); border-radius: var(--radius-full); padding: 3px 9px; }