:root {
/* Fontes */
  --font-main:"SN Pro", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500;

/* Tamanhos Aplicáveis em todo Projeto */ 
  --nav: 72px;
  --dsb: 240px;

/* Cores */
  --darkblue: #457aa4;
  --lightblue: #70b8f3;
  --lightyellow:#f1b100;
  --lightgreen:#60d060;
  --lightred:#da4242;

/* Cores de Fundo - Dark Mode */
  --bg1: #353535;
  --bg2: #1d1d1d;
  --bg3: #020202;
  --sf: #171c3abc;
  
/* Cores de Bordas - Dark Mode */
  --bd1: rgba(192, 192, 192, 0.512);
  --bd2: rgba(128, 128, 128, 0.512);

/* Cores de Textos - Dark Mode */
  --tx1: #ffffff;
  --tx2: #cccccc;
  --tx3: #aaaaaa;
}

/* Cores de Modo Claro - Light Mode */ 
.lm {
  --bg1: #fffffff0;
  --bg2: #edededf0;
  --bg3: #e7e7e7ec;
  --sf: #ffffff;

/* Cores de Bordas - Light Mode */
  --bd1: rgba(215, 215, 215, 0.256);
  --bd2: rgba(150, 150, 150, 0.512);

/* Cores de Textos - Light Mode */
  --tx1: #0f0f1a;
  --tx2: #56565e;
  --tx3: #d4d5e0be;}
*,
*::before,
*::after {box-sizing: border-box;}
#msgText{white-space: pre-line;}
html {scroll-behavior: smooth;}
body {font-family:var(--font-main); background: var(--bg1); color: var(--tx1); overflow-x: hidden; transition: background 0.3s, color 0.3s;}

/* Ocultar barra de rolagem - Chrome, Edge, Opera e Safari */
::-webkit-scrollbar {width: 0px;height: 0px;}
::-webkit-scrollbar-thumb {background: transparent;}
::-webkit-scrollbar-track {background: transparent;}

a {text-decoration: none; color: inherit;}
.gt-y {background: var(--lightyellow); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.gt-b {background: var(--lightblue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.gt-r {background: var(--lightred); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.slbl-b {color: var(--lightblue); display: inline-flex; align-items: center; gap: 15px; font-weight:700 ; font-size: 1rem; letter-spacing: 0.5em;  margin-bottom: 14px;}
.slbl-b::before {background: var(--lightblue); content: ""; width: 24px; height: 1.5px;}
.slbl-y {color: var(--lightyellow); display: inline-flex; align-items: center; gap: 15px; font-weight:700; font-size: 1rem; letter-spacing: 0.5em; margin-bottom: 14px;}
.slbl-y::before {background: var(--lightyellow); content: ""; width: 24px; height: 1.5px;}
.slbl-r {color: var(--lightred); display: inline-flex; align-items: center; gap: 15px; font-weight:700; font-size: 1rem; letter-spacing: 0.5em; margin-bottom: 14px;}
.slbl-r::before {background: var(--lightred); content: ""; width: 24px; height: 1.5px;}
.stitle {font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.025em; margin-bottom: 24px;}
.ssub {font-size: 1.2rem; color: var(--tx1); max-width: 1200px;}

/* Imagens Estáticas */
.img-dif{display:block; width:100%; max-width:600px; max-height:380px; height:auto; object-position:center; border-radius:12px; margin: 0 auto}

/* Playlist - Página Inicial */
.playlist-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.playlist-thumb{width:128px;border-radius:12px;}
.playlist-table{width:100%;color:var(--tx1); background:var(--bg3); border-radius:12px;}

/* Playlist - Cabeçalho */
.playlist-table thead th{border: 0px; font-size:15px; font-weight:700; padding:2px; background:var(--lightyellow); color:var(--bg1); text-align:center; border:none;}
/* Playlist - Corpo */
.playlist-table tbody td{border: 0px; font-size:12px; padding:2px; background:var(--bg1); color:var(--tx1); vertical-align:middle;}

/* Playlist - Remove a linha da primeira linha do corpo */
.playlist-table tbody tr:first-child td{border: 0px}
.playlist-table thead tr th:first-child{border-top-left-radius:12px;}
.playlist-table thead tr th:last-child{border-top-right-radius:12px;}
.playlist-table tbody tr:last-child td:first-child{border-bottom-left-radius:12px;}
.playlist-table tbody tr:last-child td:last-child{border-bottom-right-radius:12px;}

/* Playlist - Hover */
.playlist-table tbody tr:hover td{background: var(--tx3);}

/* Playlist - Arredondamento */
.playlist-pagination{display:flex; justify-content:center; align-items:center; gap:12px; margin-top:24px;}
.playlist-pagination button{background: var(--bd2); color: var(--tx1); border: 0px; width:64px; height:64px; border-radius:50%;}
.playlist-pagination button:hover{background:var(--tx3);}

/* Carrossel - Galeria */
.gallery-box{position:relative; display: inline-flex; flex-direction: column; align-items: center;}
.gallery-box img{display:block;}
.gallery-btn{background:var(--bg1); color:var(--tx1); border: 1px solid var(--bd2); width:64px; height:64px; position:absolute; top:50%; transform:translateY(-50%); border:none; border-radius:50%;cursor:pointer; transition:.5s; z-index:5;}
.gallery-btn:hover{background:var(--tx3);}
.gallery-prev{left:-128px;}
.gallery-next{right:-128px;}
.gallery-caption{margin-top:24px;}
.gallery-caption h3{color:var(--tx1); font-size:1.2rem; font-weight:700; margin-bottom:10px;}
.gallery-caption p{color:var(--tx2); line-height:1.5;font-size:.9rem;}

/* HERO */
.aur {position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; z-index: 0;}
.aur-a {max-width: 400px; max-height: 400px; background: radial-gradient(circle, rgba(120, 125, 130, 0.2), transparent 64% );}
.aur-b {max-width: 400px; max-height: 400px; background: radial-gradient(circle, rgba(60, 70, 80, 0.2), transparent 64% );}
.gc {background: var(--bg1); border: 1px solid var(--bd2); border-radius: 18px; transition: 0.3s;}
.gc:hover {border-color: var(--bg2);transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);}
.rv {opacity: 0; transform: translateY(26px); transition: opacity 0.75s, transform 0.75s;}
.rv.in {opacity: 1; transform: none;}
.sp {padding: 128px 0;}
.h1 {font-size: clamp(2.5vw, 2.5rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 15px;}
.dd {width: 12px; height: 12px; border-radius: 50%;}
.dsi {font-size: 0.7rem; color: var(--tx3); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; margin-bottom: 3px; cursor: pointer; background: transparent; border: none; width: 100%; font-family: var(--font-main), sans-serif; text-align: center; transition: 0.2s;}
.dsi i {width: 24px;text-align: center;}
.dsi.on, .dsi:hover {background: rgba(92, 140, 240, 0.30); color: var(--lightblue);}
.hero-text{font-size:1rem;}
#hero {overflow: hidden; position: relative; padding-top: var(--nav); display: flex; flex-direction: column; justify-content: center;}
/* Imagem Desktop / Imagem Mobile */
.hero-desktop{display: block; max-height: 500px; gap:12px;}
.hero-mobile{display: none; margin: 0 auto;gap:6px;}

/* Cores de Fundo de Botões Primários - */
.boc-0 {
  font-size: 0.9rem;
  background: var(--lightgreen);
  border: 1px solid var(--bd2);
  color: var(--tx1);
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  border-radius: 12px;
  transition: 0.25s;
  cursor: pointer;}
.boc-0:hover {border-color: var(--bd2); background: var(--bd2);  color: var(--tx1);}
.boc-0:disabled{
    background: transparent;
    border: 1px solid var(--bd2);
    color: var(--tx2);
    cursor: not-allowed;
    opacity: .64;}
.boc-0:disabled:hover{border: 1px solid var(--bd1); color: var(--tx2);}
.boc-1 {
  font-size: 0.9rem;
  background: var(--lightblue);
  border: 1px solid var(--bd2);
  color: var(--tx1);
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  border-radius: 12px;
  transition: 0.25s;
  cursor: pointer;}
.boc-1:hover {border-color: var(--bd2); background: var(--bd2);  color: var(--tx1);}
.boc-1:disabled{background: transparent;
    border: 1px solid var(--bd2);
    color: var(--tx2);
    cursor: not-allowed;
    opacity: .64;}

/* Cores de Fundo de Botões Secundários - */
.boc-2 {
  background: var(--lightyellow);
  font-size: 0.9rem;
  border: 1px solid var(--bd2);
  color: var(--tx1);
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  border-radius: 12px;
  transition: 0.25s;
  cursor: pointer;}
.boc-2:hover {border-color: var(--bd2); background: var(--bd2); color: var(--tx1);}

/* Cores de Fundo de Botões Terciários - */
.boc-3 {
  font-size: 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--bd2);
  color: var(--tx1);
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  border-radius: 12px;
  transition: 0.25s;
  cursor: pointer;}
.boc-3:hover {background: var(--bd2); color: var(--tx1);}
.boc-3.on {background: var(--bd1); color: var(--tx1); border-radius: 12px; transition: 0.25s; cursor: pointer;}

/* Cores de Fundo de Botões Quarternários - */
.boc-4 {
  font-size: 0.9rem;
  background: var(--lightred);
  border: 1px solid var(--bd2);
  color: var(--tx1);
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  border-radius: 12px;
  transition: 0.25s;
  cursor: pointer;}
.boc-4:hover {background: var(--bd2); color: var(--tx1);}
.boc-4.on {background: var(--bd1); color: var(--tx1); border-radius: 12px; transition: 0.25s; cursor: pointer;}

/* LATERAL - Contêiner dos botões do Card Lateral Offcanvas - */
.tab-switch {background: transparent; border: 0px solid var(--bd1); border-radius: 24px; padding: 12px; display: flex; justify-content: space-between; align-items: center;}

/* NAVBAR - LINK TEXTOS */
#desktopMenu{display:flex; flex:1; align-items:center; justify-content:center; gap:3px;}
.nav-link {font-weight: 700; font-size: 0.9rem; border-radius: 12px; color: var(--tx2) !important; padding: 10px 12px !important; transition: 0.5s !important;}
.nav-link:hover {color: var(--tx1) !important; background: rgba(255, 255, 255, 0.15) !important;}
.lm .nav-link:hover {background: rgba(0, 0, 0, 0.05) !important;}

/* NAVBAR - ÍCONES MENU MOBILE - DARK MODE */
#mbtog{display:none;}
#thbtn, #mbtog{background: var(--bg1); width: 42px; height: 42px; border-radius: 12px; border-color: var(--bd2);}

/* NAVBAR - ÍCONES MENU MOBILE - LIGHT MODE */
.lm #thbtn, .lm #mbtog{background: var(--bg1); border-color: var(--bd1);}

/* NAVBAR - BARRA EM MODO ESCURO */
#nbar{padding:2px; overflow-x:hidden; backdrop-filter:blur(25px); border-bottom:1px solid var(--bd2); position:fixed; top:0; left:0; right:0; z-index:1000; align-items:center; height:var(--nav); display:flex; transition:background .3s, box-shadow .3s; background:rgba(8,8,15,.64);}
#nbar.scr{box-shadow:0 5px 20px rgba(0,0,0,.50);} /* NAVBAR - BARRA EM SCROLL */
/* NAVBAR - BARRA EM MODO CLARO */
.lm #nbar{background:rgba(192,192,192,.30);}
.lm #nbar.scr{box-shadow:0 5px 20px rgba(0,0,0,.30);} /* NAVBAR - BARRA EM SCROLL */

/* LOGOTIPOS - IMAGENS */
.logo-i {background: var(--bg3); width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; flex-shrink: 0;}
.img{display:block; max-width:220px; height:auto; margin:0 auto;}
.img-header{display:block; max-width:220px; height:auto; margin:0 auto;}
.img-footer{max-width:300px;}

/* MENU MOBILE */
#mbmenu{background: rgba(8, 8, 15, 0.72); backdrop-filter: blur(24px); padding: 24px; width: 100%; max-width: 100vw; height: 100%; max-height: 200vw; top: var(--nav); box-sizing: border-box;  overflow-x: hidden;  z-index: 1049; position: fixed; display: none;}
.lm #mbmenu {background: rgba(250, 250, 250, 0.72);}
#mbmenu.open {display: block;}

/* PROVA SOCIAL */
#proof {background: var(--bg2); border-top: 1px solid var(--bd1); border-bottom: 1px solid var(--bd1); padding: 44px 0;}
.pnum {background: var(--lightyellow); font-size: 1.5rem; font-weight: 700; line-height: 1.2; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.plbl {font-size: 0.8rem; font-weight: 700; color: var(--tx1); margin-top: 12px;}
.lscroll {width: 100%; overflow:hidden; display:flex; margin-top: 24px; }
.ltrack {display: flex; gap: 36px; width: max-content; animation: lscr 24s linear infinite;}
.lbr {font-size: 0.8rem; font-weight: 700; color: var(--tx1); white-space: nowrap;}

/* ATIVIDADES / PROGRAMAÇÃO */
.ftico {background: var(--lightblue); color: var(--tx1); font-size: 1rem; width: 42px; height: 42px; padding:5px; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.ftico-y {background: var(--lightyellow); color: var(--tx1); font-size: 1rem; width: 42px; height: 42px; padding:5px; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.ftag {background: var(--bg2); color: var(--tx1); padding: 6px 12px; border-radius: 12px; font-size: 1rem; font-weight: 700; display: inline-block;}
.ftag-b {background: var(--lightblue); color: var(--tx1); padding: 6px 12px; border-radius: 12px; font-size: 1rem; font-weight: 700; display: inline-block;}
.ftag-y {background: var(--lightyellow); color: var(--tx1); padding: 6px 12px; border-radius: 12px; font-size: 1rem; font-weight: 700; display: inline-block;}
.fcircle {background: var(--bd2); color: #FFFFFF; border: var(--bd1); padding: 7px 15px; border-radius: 128px; font-size: 1rem; font-weight: 700; display: inline-block;}

/* AVATARES - LINHAS */
.avatar-tab{cursor:pointer;transition:.25s;}
.avatar-tab.active{background:var(--lightblue);}
#avatarGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; justify-items:center; margin-top:12px;}

/* NÚMEROS */
.hnum {background: var(--bg3); width: 42px; height: 42px; font-size: 1.2rem; font-weight: 700; color: var(--tx1); margin: 0 auto 24px; box-shadow: 0 7px 7px rgba(25, 25, 36, 0.36); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.hnum-y {background: var(--lightyellow); width: 42px; height: 42px; font-size: 1.2rem; font-weight: 700; color: var(--tx1); margin: 0 auto 24px; box-shadow: 0 7px 7px rgba(25, 25, 36, 0.36); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.hnum-r {background: var(--lightred); width: 42px; height: 42px; font-size: 1.2rem; font-weight: 700; color: var(--tx1); margin: 0 auto 24px; box-shadow: 0 7px 7px rgba(25, 25, 36, 0.36); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.hnum-b {background: var(--lightblue); width: 42px; height: 42px; font-size: 1.2rem; font-weight: 700; color: var(--tx1); margin: 0 auto 24px; box-shadow: 0 7px 7px rgba(25, 25, 36, 0.36); border-radius: 50%; display: flex; align-items: center; justify-content: center;}

/* INGRESSOS */
.pcard {
  background: var(--bd2);
  border: 0px solid var(--bd2);
  border-radius: 18px;
  padding: 18px;
  transition: 0.3s;
  position: relative;}
.pcard:hover {transform: translateY(-4px); box-shadow: 0 20px 60px rgba(100, 100, 100, 0.36);}
.pcard.pop { border: 0px solid; color:var(--tx1); background: linear-gradient(135deg,rgba(240, 80, 80, 0.64),rgba(240, 80, 80, 0.36)); box-shadow: 0 0 24px rgba(246, 92, 92, 0.72);}
.pbadge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--lightred); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 5px 20px; border-radius: 100px; white-space: nowrap;}
.pbuy1 { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--lightyellow); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 5px 20px; border-radius: 100px; white-space: nowrap;}
.pbuy5 { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--lightblue); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 5px 20px; border-radius: 100px; white-space: nowrap;}
.pamt {font-size: 2.5rem;font-weight: 700;line-height: 1;}
.pamt sup {font-size: 1.2rem; vertical-align: top; margin-top: 7px; display: inline-block;}
.pfl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 0.875rem;}
.pchk {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--lightgreen);
  margin-top: 1px;}

.punchk {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(211, 52, 94, 0.12);
  border: 1px solid rgba(211, 52, 52, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--lightred);
  margin-top: 1px;}

/* FAQ - PRINCIPAIS DÚVIDAS */
.acco .accordion-body {color: var(--tx1); font-size: 0.9rem; line-height: 2.0; padding: 15px 15px;}
.acco .accordion-item {background: var(--bg2); border: 1px solid var(--bd2); border-radius: 24px !important; margin-bottom: 15px; overflow: hidden;}
.acco .accordion-button {background: var(--bg2); color: var(--tx1); font-family: var(--font-main); font-weight: 700; font-size: 1rem; box-shadow: none; border-radius: 24px !important; padding: 15px 15px;}
.acco .accordion-button:not(.collapsed) {background: var(--lightblue); color: var(--tx1);}
.acco .accordion-button::after {filter: invert(1) hue-rotate(220deg);}
.lm .acco .accordion-button::after {filter: none;}

/* CTA */
#cta {padding: 20px 0; position: relative; overflow: hidden; background: var(--bg3); text-align: center;}

/* FOOTER */
#foot {background: var(--bg1); border-top: 3px solid var(--bd1); padding: 5px 0;}
.fcol h5 {font-size: 1rem; color: var(--tx1); font-weight: 700; padding: 5px 0; margin-bottom: 5px; margin-top: 5px;}
.fcol a {font-size: 0.8rem; color: var(--tx1); display: block; padding: 5px 0; transition: 0.5s;}
.fcol a:hover {color: var(--lightblue);}

/* OFFCANVAS LATERAL */
#lofc {width: 420px; background: var(--bg3); border-left: 1px solid var(--bd2);}
.lm #lofc {background: var(--bg1); border-left: 1px solid var(--bd2);}
.offcanvas-header {background:var(--bg2); border-bottom: 1px solid var(--bd2); padding: 10px 10px;justify-content: space-between;}
.offcanvas-title {font-family:var(--font-main), sans-serif; font-weight: 700; color: var(--tx1); padding: 10px 10px;}

/* OFFCANVAS LATERAL - INPUTS */
.olbl {color: var(--tx1); font-size: 0.9rem; font-weight: 700;  margin-top: 12px; margin-bottom: 12px; display: block;}
.oinp {color: var(--tx1); background: var(--bg2); font-size: 0.9rem; padding: 12px 12px; margin-bottom: 0px; width: 100%; border-radius: 12px; border: 1px solid var(--bd2);  font-family: var(--font-main), sans-serif; transition: 0.5s; outline: none;}
.oinp:focus {border-color: var(--tx1); box-shadow: 0 0 0 1px rgba(36, 48, 64, 0.36);}
.odiv {display: flex; align-items: center; gap: 5px; color: var(--tx1); font-size: 0.8rem; margin: 5px 0;}
.odiv::before, .odiv::after {content: ""; flex: 1; height: 1px; background: var(--tx3);}

/* ALERTAS DA PÁGINA */
.msg-box{justify-content:center; align-items:center; display:flex; flex-direction:column; position:fixed; inset:0; background:rgba(0,0,0,.50); z-index:99999;}
.msg-card{max-width:95%; justify-content:center; align-items:center; display:flex; flex-direction:column; gap:20px; padding:30px; background:var(--bg1); border:1px solid var(--bd1); border-radius:18px; color:var(--tx1); text-align:center;}
.msg-card h2 {margin-bottom:20px;text-transform: uppercase;}
.msg-card p{margin-bottom:20px; color:var(--tx2);}
.err-msg {background: rgba(248, 112, 112, 0.1); border: 1px solid rgba(248, 112, 112, 0.25); color: #f87171; border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 12px; display: none;}
.mfp-bg {background: #000; opacity: 0.9;}
.msg {max-width: 90%; padding: 15px 15px; border-radius: 15px; font-size: 0.875rem; line-height: 1.55; word-break: break-word;}

/* UTILITÁRIOS */
.typing-ind {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--bd1);
  border-radius: 4px 14px 14px 14px;
  align-self: flex-start;
  align-items: center;}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--darkblue);
  animation: tbounce 0.9s infinite;}
.typing-dot:nth-child(2) {animation-delay: 0.15s;}
.typing-dot:nth-child(3) {animation-delay: 0.3s;}

/* OFFCANVAS LATERAL - CARRINHO DE COMPRAS */
.cart-check{color:var(--tx1); font-size:.8rem; font-weight:700; display:block; padding:7px 7px; margin-bottom:10px; border:1px solid var(--bd1); border-radius:12px; cursor:pointer; transition:.25s;}
.cart-check:hover{background:var(--sf);}
.cart-check input{margin-right:10px;}
.cart-section{margin-bottom:15px;}
.cart-title{color:var(--tx1); font-size:.8rem; font-weight:700; margin-bottom:10px; letter-spacing:.12em;}
.cart-empty{color:var(--tx1); font-size:.8rem;}
.cart-total{margin-top:10px; padding-top:10px; border-top:1px solid var(--bd1); font-size:1.2rem; font-weight:700;}
.cart-total-line{color:var(--tx1); font-size:0.8rem; font-weight:700; display:flex; justify-content:space-between; align-items:center; padding:7px 7px; }
.cart-item{padding:5px 0; border-bottom:1px solid var(--bd1); display:flex; justify-content:space-between; align-items:center;}

/* KEYFRAMES */
@keyframes bpls {0%, 100% {box-shadow: 0 0 6px var(--darkblue);} 50% {box-shadow: 0 0 14px var(--darkblue);}}
@keyframes bgrow {from {transform: scaleY(0);opacity: 0;}to {transform: scaleY(1);opacity: 0.75;}}
@keyframes tbounce {0%, 60%, 100% {transform: translateY(0);} 30% {transform: translateY(-5px);}}
@keyframes lscr {from{transform:translateX(0); } to{ transform:translateX(-50%);}}
@keyframes fadU {from {opacity: 0;transform: translateY(22px);} to {opacity: 1; transform: none;}}
@keyframes dinI {from {opacity: 0; transform: perspective(1200px) rotateX(5deg) translateY(28px); } to {opacity: 1;transform: none;}}
@keyframes fadeIn {from {opacity: 0;transform: translateY(12px);} to {opacity: 1; transform: none;}}
.afu {animation: fadU 0.8s ease both;}
.adi {animation: dinI 1.1s ease 0.35s both;}
.rv {opacity: 0; transform: translateY(26px);  transition: opacity 0.65s, transform 0.65s;}
.rv.in {opacity: 1; transform: none;}

/* MOBILE - Responsividade */
@media (max-width:1280px){
[class^="boc-"],a[class^="boc-"]{width:100%;margin-bottom: 7px; margin-top: 7px;}
#desktopMenu{display:none;}
#lofc {width:100%;}
#mbtog{display:flex; align-items:center; justify-content:center;}
.d-flex.afu{flex-direction:column;}
.img-header{max-width:190px;}
.img-footer{max-width:250px;}
.h1 {font-size: 1.5rem;}
.hero-text{ font-size:0.8rem;}
.hero-desktop{display: none;}
.hero-mobile{display: block; max-width: 95%; max-height: 480px;}
.gallery-box{max-width:95%;}
.gallery-btn{width:42px; height:42px;}
.gallery-prev{left:3px;}
.gallery-next{right:3px;}
.playlist-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.playlist-thumb{width:84px;border-radius:12px;}
.playlist-pagination button{width:42px; height:42px;}
.playlist-table thead th{font-size:12px;padding:2px;}
.playlist-table tbody td{font-size:10px;padding:2px;}
.ssub {font-size: 1.0rem;}
.stitle {font-size: 1.5rem; margin-bottom: 12px;} 
}

/* DEPURAÇÃO - Responsividade e Layout *{outline:1px solid red;}*/