:root {
  --deep: #3b0764; --violet: #7c3aed; --lilac: #c4b5fd; --mist: #f5f3ff;
  --ink: #1e1b2e; --muted: #6b6880; --gold: #f59e0b; --gold-dark: #b45309;
  --card: #fff; --line: #e5e1f2; --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--mist); }
/* o celular não "infla" o texto sozinho ao virar a tela; palavras longas (e-mail, links) quebram em vez de vazar */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
section[id] { scroll-margin-top: 72px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--deep); }
.muted { color: var(--muted); }
.section { padding: 40px 0 8px; }
[hidden] { display: none !important; }

.topbar { background: var(--deep); color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.gem { width: 22px; height: 22px; background: linear-gradient(135deg, #ddd6fe, #7c3aed 60%, #4c1d95); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #ddd6fe; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.nav a:hover { color: #fff; }

.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 400px at 80% -10%, #7c3aed55, transparent), linear-gradient(160deg, #4c1d95, #2e1065 70%); color: #fff; padding: 72px 0 84px; margin-top: 12px; min-height: 340px; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; }
.hero-slides .slide.on { opacity: 1; }
.hero-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0000004d 0%, #00000014 55%, transparent 100%); }
.hero-in { position: relative; z-index: 1; }
.hero h1, .hero .lead { text-shadow: 0 1px 3px #000c, 0 2px 16px #000a; }
.hero-credit { position: absolute; right: 14px; bottom: 8px; z-index: 1; max-width: calc(100% - 28px); font-size: .72rem; color: #e9e3ffdd; text-align: right; text-shadow: 0 1px 4px #000a; }
.hero-credit a { color: inherit; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); max-width: 16ch; }
.lead { font-size: 1.15rem; max-width: 56ch; color: #e9e3ff; margin: 0 0 24px; }
.hero-weather { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin: -8px 0 22px; padding: 7px 14px; border-radius: 16px; background: #0006; color: #fff; font-size: .95rem; backdrop-filter: blur(4px); }
.hero-weather[hidden] { display: none; }
.hero-weather b { font-size: 1.1rem; }
.hero-weather small { color: #ddd6fe; font-size: .72rem; }
.watching { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 99px; background: #000a; color: #fff; font-size: .74rem; font-weight: 700; }
.player-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.player-meta .viewers { color: var(--muted); font-size: .92rem; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; background: #ffffff1f; padding: 4px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 16px; }
.live-pill i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 #ef4444aa; animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px #ef444400; } 100% { box-shadow: 0 0 0 0 #ef444400; } }

.btn { display: inline-block; border: 0; border-radius: 10px; padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn-light { background: #fff; color: var(--deep); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-gold { background: var(--gold); color: #3a2400; }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-ghost { background: transparent; color: var(--violet); border: 1px solid var(--line); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 20px; margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 99px; padding: 7px 14px; font: inherit; font-size: .86rem; cursor: pointer; }
.chip.on { background: var(--violet); color: #fff; border-color: var(--violet); }
.attraction-info { display: flex; flex-direction: column; gap: 10px; }
.attraction-info .btn { text-align: center; }
.attraction-cover { width: 100%; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; background: var(--mist); }
.attraction-cover-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; }
.attraction-cover-btn .attraction-cover { display: block; transition: filter .15s; }
.attraction-cover-btn:hover .attraction-cover { filter: brightness(.85); }
.attraction-cover-btn .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 3rem; text-shadow: 0 2px 12px #000a; }

.map-box { margin-top: 28px; }
.map-box h3 { font-size: 1.05rem; color: var(--deep); margin-bottom: 10px; }
.map { height: 380px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.map-pin { background: none !important; border: none !important; }
.map-pin span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); box-shadow: 0 2px 8px #0004; font-size: 1rem; }
.map-pin span i { display: block; font-style: normal; transform: rotate(-45deg); }
.map-popup { text-align: center; }
.map-popup .btn { margin-top: 8px; width: 100%; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px #4c1d9522; }
.thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #4c1d95, #7c3aed 55%, #a78bfa); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.locked img { filter: blur(9px) brightness(.75); transform: scale(1.1); }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.6rem; text-shadow: 0 2px 12px #0008; }
.badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 99px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; }
.badge-live { background: #ef4444; color: #fff; }
.badge-off { background: #475569; color: #fff; }
.badge-premium { background: var(--gold); color: #3a2400; }
.badge-open { background: #16a34a; color: #fff; }
.badge-cat { background: #fff; color: var(--deep); }
.badge-right { left: auto; right: 10px; }
.card-body { padding: 14px 16px 16px; }
.card-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.card-body p { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.price { font-weight: 800; color: var(--gold-dark); }

.pass { margin: 32px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #451a03, #78350f); color: #fff; border-radius: var(--radius); padding: 22px 26px; }
.pass h3 { margin: 0 0 4px; }
.pass p { margin: 0; color: #fde68a; }

.slot { margin: 16px 0; min-height: 0; text-align: center; }
.slot-wide { margin: 24px auto; }
.slot a, .slot img { display: block; margin-inline: auto; max-width: 100%; }
.slot img { height: auto; border-radius: 10px; max-height: 140px; width: auto; object-fit: contain; }
.slot-empty { display: block; border: 2px dashed var(--lilac); border-radius: 12px; padding: 22px 12px; color: var(--muted); text-decoration: none; font-size: .95rem; }
.slot-empty strong { color: var(--violet); }
.ad-tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.about { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-top: 40px; }
.about p { max-width: 70ch; margin: 0; white-space: pre-line; }

.sp-group { margin-top: 24px; }
.sp-group h3 { font-size: 1.05rem; color: var(--deep); margin-bottom: 10px; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.logos .logo { background: #fff; border: 1px solid var(--line); border-radius: 12px; height: 96px; display: grid; place-items: center; padding: 12px; text-decoration: none; }
.logos img { max-width: 100%; max-height: 72px; object-fit: contain; }
.sp-patrocinador_premium .logos { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.sp-patrocinador_premium .logo { height: 150px; border-color: #f59e0b; }
.sp-patrocinador_premium img { max-height: 120px; }
.sp-patrocinador .logos { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.sp-patrocinador .logo { height: 120px; }
.sp-apoiador_premium .logo { height: 110px; border-color: #c4b5fd; }

/* Destaque para os planos Premium: um brilho suave chama atenção sem incomodar (sem flash rápido). */
.premium-pulse, .sp-patrocinador_premium .logo, .sp-apoiador_premium .logo { animation: premium-glow 2.4s ease-in-out infinite; }
@keyframes premium-glow {
  0%, 100% { box-shadow: 0 0 0 0 #f59e0b55; }
  50% { box-shadow: 0 0 0 7px #f59e0b00; }
}
@media (prefers-reduced-motion: reduce) { .premium-pulse, .sp-patrocinador_premium .logo, .sp-apoiador_premium .logo { animation: none; } }
.sp-apoiador .logos { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
.sp-apoiador .logo { height: 78px; }
.sp-parceiro .logos { grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.sp-parceiro .logo { height: 64px; padding: 8px; }
.sp-parceiro img { filter: grayscale(1); opacity: .85; max-height: 46px; }
button.slot-empty { width: 100%; background: transparent; font: inherit; cursor: pointer; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-top: 8px; }
.plan { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--mist); border: 2px solid var(--line); border-radius: 12px; padding: 14px; font: inherit; color: inherit; cursor: pointer; }
.plan:hover:not(.full) { border-color: var(--violet); }
.plan.full { opacity: .55; cursor: not-allowed; }
.plan-info { font-size: .82rem; color: var(--muted); }
.sponsor-form .hint { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.sp-preview { display: block; max-width: 100%; max-height: 110px; margin: 10px auto 0; border-radius: 8px; background: var(--mist); object-fit: contain; }
.consent { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .85rem !important; margin: 14px 0 0 !important; }
.consent input { width: auto !important; margin-top: 3px; }
.legal-links { margin: 8px 0; }
.wm { position: absolute; z-index: 2; pointer-events: none; color: #fff; font: 600 .8rem/1 system-ui, sans-serif; letter-spacing: .04em; opacity: .55; text-shadow: 0 1px 3px #000c; padding: 6px 10px; background: #0003; border-radius: 6px; animation: wm-move 48s steps(1, end) infinite; }
@keyframes wm-move { 0% { top: 8px; left: 8px; } 25% { top: 8px; right: 8px; left: auto; } 50% { bottom: 44px; right: 8px; top: auto; left: auto; } 75% { bottom: 44px; left: 8px; top: auto; right: auto; } }
.player { -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .hero-slides .slide { transition: none; } .wm { animation: none; top: 8px; left: 8px; } }

.anuncie { margin-top: 40px; background: linear-gradient(120deg, #2e1065, #4c1d95); color: #fff; border-radius: var(--radius); padding: 28px 26px; }
.anuncie h2 { color: #fff; }
.lead-dark { color: #e9e3ff; max-width: 56ch; }
.check-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; max-width: 60ch; }
.check-list li { padding-left: 28px; position: relative; color: #e9e3ff; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 800; }
.anuncie-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.anuncie-actions .btn-ghost { color: #fff; border-color: #ffffff55; }

.apoie { margin: 32px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #4c1d95, #7c3aed); color: #fff; border-radius: var(--radius); padding: 22px 26px; }
.apoie h3 { margin: 0 0 4px; }
.apoie p { margin: 0; color: #e9e3ff; max-width: 60ch; }
.amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }

.footer { margin-top: 56px; background: var(--deep); color: #ddd6fe; padding: 28px 0; text-align: center; }
.footer a { color: #fff; }
.footer .muted { color: #a78bfa; }
.footer .copy { margin: 14px auto 0; padding-top: 14px; border-top: 1px solid #ffffff1f; max-width: 70ch; font-size: .8rem; color: #c4b5fd; }

.modal { position: fixed; inset: 0; background: #0009; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-box { position: relative; background: #fff; border-radius: 16px; width: min(860px, 100%); padding: 22px; max-height: 100%; overflow-y: auto; }
.modal-box h3 { padding-right: 36px; color: var(--deep); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: var(--mist); border-radius: 50%; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }
.cam-logo { position: absolute; z-index: 2; pointer-events: none; height: auto; max-height: 40%; object-fit: contain; }
.cam-logo.pos-top-left { top: 10px; left: 10px; }
.cam-logo.pos-top-right { top: 10px; right: 10px; }
.cam-logo.pos-bottom-left { bottom: 48px; left: 10px; } /* acima da barra de controles do vídeo */
.cam-logo.pos-bottom-right { bottom: 48px; right: 10px; }
.cam-logo.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.fs-btn { position: absolute; z-index: 3; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: #0008; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .75; }
.fs-btn:hover, .fs-btn:focus-visible { opacity: 1; }
.player:has(.fs-btn) .cam-logo.pos-top-right { right: 52px; } /* não cobre o botão de tela cheia */
.player-status { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #000a; text-align: center; padding: 16px; pointer-events: none; }
.checkout { max-width: 460px; margin-inline: auto; }
.checkout label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: .92rem; }
.checkout input, .checkout textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.checkout textarea { font: .78rem/1.3 ui-monospace, monospace; height: 84px; resize: none; }
.checkout .btn { width: 100%; margin-top: 16px; }
.qr { display: block; width: 220px; height: 220px; margin: 12px auto; image-rendering: pixelated; }
.notice { background: var(--mist); border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin: 12px 0; }
.error { color: #b91c1c; font-weight: 600; margin-top: 10px; }
.center { text-align: center; }
.big { font-size: 1.6rem; font-weight: 800; color: var(--gold-dark); }
.legal { padding: 28px 0 8px; max-width: 860px; }
.legal h1 { color: var(--deep); }
.legal h2 { font-size: 1.15rem; color: var(--deep); margin-top: 26px; }
.legal p { max-width: 75ch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 10px 0 14px; background: #fff; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--mist); color: var(--deep); }
@media (max-width: 700px) { .legal-table { display: block; overflow-x: auto; } }

/* ============ Celular ============
   As classes "m" (até 720 px) e "xs" (até 380 px) vêm do public/js/mobile.js, que também corrige o modo
   "Site para computador" do celular (por isso não são @media: com o zoom daquele modo elas veriam 980 px). */
.m .topbar-in { height: auto; flex-wrap: wrap; row-gap: 2px; padding: 8px 0 4px; }
.m .brand { font-size: 1rem; white-space: nowrap; min-width: 0; }
.m .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
.m .nav { width: 100%; gap: 16px; padding: 4px 0 6px; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
.m .nav a { font-size: .9rem; padding: 4px 0; }
.m section[id] { scroll-margin-top: 96px; }
.m .section { padding-top: 28px; }
.m .hero { padding: 44px 0 56px; min-height: 0; margin-top: 8px; }
.m .lead { font-size: 1.02rem; margin-bottom: 18px; }
/* títulos sem "vw": no modo "Site para computador" o vw continua medindo os 980 px falsos */
.m .hero h1 { font-size: 2.1rem; }
.m h2 { font-size: 1.45rem; }
.m .hero-weather { font-size: .88rem; padding: 6px 12px; }
.m .hero-credit { position: static; margin: 10px 16px 0; max-width: none; text-align: left; }
.m .grid { gap: 14px; }
.m .pass, .m .apoie, .m .anuncie { padding: 18px; }
.m .btn { padding: 11px 18px; }
.m .anuncie-actions .btn, .m .pass .btn, .m .apoie .btn { width: 100%; text-align: center; }
/* pontos turísticos: cartão deitado (foto ao lado do texto) para a lista não ficar enorme */
.m #pontos-grid .card { flex-direction: row; align-items: stretch; }
.m #pontos-grid .thumb { flex: 0 0 38%; aspect-ratio: auto; min-height: 118px; }
.m #pontos-grid .badge { top: 6px; left: 6px; font-size: .7rem; padding: 2px 7px; }
.m #pontos-grid .badge-right { left: auto; right: 6px; top: auto; bottom: 6px; }
.m #pontos-grid .card-body { padding: 10px 12px; min-width: 0; }
.m #pontos-grid .card-body h3 { font-size: 1rem; }
.m #pontos-grid .card-body p { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* avisos (player, pagamento, ponto turístico) ocupam a tela toda no celular */
.m .modal { padding: 0; place-items: stretch; }
.m .modal-box { border-radius: 0; padding: 16px 14px 24px; min-height: 100%; width: 100%; }
.m .modal-box h3 { font-size: 1.1rem; }
.m .player { border-radius: 8px; margin-inline: -4px; }
.m .player-meta { flex-direction: column; align-items: stretch; }
.m .share .btn { flex: 1 1 auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.m .checkout { max-width: none; }
.m .qr { width: min(220px, 100%); height: auto; aspect-ratio: 1; }
.m .footer { padding: 22px 0; }
.xs body { font-size: 15px; }
.xs .hero h1 { font-size: 1.75rem; }
.xs #pontos-grid .thumb { flex-basis: 34%; min-height: 104px; }