@charset "UTF-8";
* { box-sizing: border-box; }

body { color: #222; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 600; }

body, h1, h2, p, ul, li, a, button { margin: 0px; padding: 0px; }

ul { list-style: none; }

a { text-decoration: none; }

img { display: block; max-width: 100%; }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.superinfo-bg { background: #0644bf; color: white; }

.superinfo { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px; }

.superinfo .fone { align-items: center; }

.superinfo p, .superinfo a { flex-wrap: wrap; }

.superinfo a { display: flex; justify-content: end; color: white; }

.menu-bg { background: black; }

.menu { max-width: 1000px; margin: 0 auto; padding: 15px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.menu a { color: white; }

.menu-logo a { font-size: 2.25em; font-weight: bold; margin: 0 10px; }

.menu-logo { max-width: 400px; display: flex; margin-left: 10px; align-items: center; cursor: pointer; }

.menu-logo img { width: 15%; }

.menu-nav { display: flex; flex-wrap: wrap; align-items: center; max-width: 750px; }

.menu-nav a { margin: 10px 30px 10px 0px; padding-left: 20px; font-size: 1.25em; flex-wrap: wrap; }

.menu-nav #lingua { font-size: 1.25em; font-weight: bold; margin: 10px 0 10px 20px; background: black; color: white; border: none; }

.menu-nav #lingua:hover, .menu-nav a:hover { color: #05aff2; }

.menu-btn { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 600; font-size: 1.25em; background: #222; color: white; padding: 10px 20px; border-radius: 8px; border: none; margin: 10px auto; }

.menu-btn:hover { background: #0644bf; color: white; }

[data-menu="button"] { display: none; }

@media (max-width: 1000px) { .menu-bg { position: sticky; top: 0; z-index: 30; }
  [data-menu="button"] { display: flex; align-items: center; background: #222; border: none; padding: .5rem 1rem; border-radius: 4px; font-weight: bold; color: white; cursor: pointer; margin: 10px; position: absolute; top: 20px; right: 0; z-index: 50; }
  [data-menu="button"]::before { content: ''; display: inline-block; height: 2px; width: 12px; background: white; box-shadow: 0 4px white, 0 -4px white; margin-right: 4px; transition: transform .3s; }
  [data-menu="list"] { display: none; position: absolute; background: black; width: 170px; z-index: 40; padding: 100px 0 10px 0; top: 0; right: 0; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2); transform: initial; }
  [data-menu="button"].active::before { transform: rotate(90deg); }
  [data-menu="list"].active { display: block; animation: show-right .3s forwards; }
  nav.menu-nav { width: 150px; } }

.pontuacao-bg { background: #05aff2; color: white; }

.pontuacao { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 10px; }

.pontuacao img { width: 30%; border-radius: 50%; }

.pontuacao .pontuacao-info { display: block; }

.pontuacao .pontuacao-texto { color: #222; }

.pontuacao .pontuacao-btn { padding: 10px 20px; font-size: 1em; background: #222; color: white; margin-top: 10px; border-radius: 6px; cursor: pointer; }

.pontuacao .pontuacao-btn:hover, .pontuacao .pontuacao-btn.ativo:hover { background: #f20505; color: white; }

.info-pontuacao-bg { display: none; background: #05aff2; color: #222; }

.info-pontuacao-bg.ativo { display: block; }

.info-pontuacao-bg.ativo div.info-pontuacao.slide2-wrapper { overflow: hidden; }

.arrow-nav { display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto; }

button.prev, button.next { padding: 10px 20px; font-size: 1em; background: #222; color: white; margin: 10px 0; border-radius: 6px; cursor: pointer; }

button.prev:hover, button.next:hover { background: #f20505; color: white; }

.slide2 { display: flex; margin: 0 auto; }

.slide2 li { max-width: 1000px; flex-shrink: 0; width: 80vw; opacity: .8; transform: scale(0.8); transition: .4s; }

.slide2 li p { position: absolute; top: 10px; }

.slide2 li.active { opacity: 1; transform: scale(1); }

.slide2:hover { will-change: transform; }

.pontuacao-logo { animation: 1s; }

.pontuacao-logo.ativo { transform: rotate(90deg); }

@media (max-width: 1000px) { .superinfo { margin: 0 auto; padding: 20px 15px; }
  .superinfo p { display: none; }
  .superinfo a { justify-content: start; }
  .info-pontuacao { max-width: 100%; padding: 20px; }
  .slide2 li p { width: 95%; margin: 0 10px; padding-right: 30px; }
  .arrow-nav { margin: 0 10px; } }

@keyframes show-right { from { opacity: 0;
    transform: translate3d(-30px, 0, 0); }
  to { opacity: 1;
    transform: matrix3d(0, 0, 0); } }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

[data-anime="scroll"] { opacity: 0; transform: translate3d(-30px, 0, 0); transition: .3s; }

[data-anime="scroll"].ativo { opacity: 1; transform: translate3d(0, 0, 0); }

section.ativo.show-right { animation: show .5s forwards; }

section.ativo.show-down { animation: show .5s forwards; }

@keyframes show-right { from { opacity: 0;
    transform: translate3d(-30px, 0, 0); }
  to { opacity: 1;
    transform: matrix3d(0, 0, 0); } }

@keyframes show-down { from { opacity: 0;
    transform: translate3d(0, -30px, 0); }
  to { opacity: 1;
    transform: matrix3d(0, 0, 0); } }

.dados { font-size: 1.25em; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; padding: 30px; }

.dados h2, .dados span { display: flex; padding-top: 10px; justify-content: center; }

.animacao-bg { width: 100%; background: black; }

#myTopnav2 { max-width: 1000px; margin: 0 auto; padding-top: 30px; display: flex; justify-content: center; }

.slide img { display: block; width: auto; height: 500px; }

.eventos { max-width: 1000px; display: block; margin: 0 auto; color: white; }

.h2-eventos { margin-top: 60px; }

.forall a { font-size: 1.25em; position: relative; bottom: 250px; max-width: 400px; display: flex; justify-content: center; align-items: center; margin: 0 auto; text-decoration: none; color: white; text-shadow: 2px 4px 6px black; cursor: pointer; z-index: 20; }

.forall a:hover, .forall a:focus { color: #f2e313; }

.noticias { width: 100%; }

.noticias .tituloNoticias { border-top: 2px solid black; font-size: 2.25em; line-height: 1; max-width: 1000px; margin: 20px auto 0; padding: 60px 10px 20px; }

.noticias .container-noticias { max-width: 1000px; margin: 0 auto; padding: 30px 10px; display: flex; justify-content: space-between; }

.noticias .container-interno { flex: 1 1 400px; flex-wrap: wrap; }

.noticias .fotosNoticias { height: 700px; }

.noticias .descricaoNoticias { padding: 0 0 20px 20px; font-size: 1.5em; }

.noticias .paragrafoNoticias { text-indent: 20px; padding: 0 0 15px 20px; font-size: 1em; font-weight: normal; }

.planos { max-width: 100%; background: black; color: white; padding: 40px; cursor: pointer; }

.planos-container { max-width: 1000px; margin: 0 auto; }

.textoPlanos { font-size: 2.5em; }

.planos-itens { display: flex; justify-content: space-between; overflow-x: auto; }

.planos-itens a.item { display: block; color: white; font-weight: normal; border-left: 1px solid white; padding: 0 30px 0 20px; margin-bottom: 40px; }

.planos-itens a.item h2 { padding-bottom: 30px; width: 250px; }

.planos-itens a.item p { padding: 5px 0; }

a.item.esconder { display: none; }

a.item:hover, a.item:focus { color: #05aff2; }

.separador { margin-bottom: 20px; }

.parceiros { width: 100%; background: white; }

.parceiros .parceiros-container { max-width: 1000px; margin: 0 auto; display: block; padding-top: 50px; }

.parceiros .parceiros-container .parceiros-titulo { font-size: 1.25em; }

.parceiros .parceiros-container .parceiros-titulo h1 { margin-bottom: 5px; }

.parceiros .parceiros-container .parceiros-logo { display: flex; justify-content: space-around; align-items: center; margin-bottom: 30px; }

.parceiros .parceiros-container .parceiros-logo .logo1, .parceiros .parceiros-container .parceiros-logo .logo2, .parceiros .parceiros-container .parceiros-logo .logo3 { width: 200px; }

@media (max-width: 1000px) { .texto1, .texto2, .texto3, .texto4, .texto5 { font-size: 1.1875em; }
  .slide img { height: auto; }
  .forall a { bottom: 350px; }
  .eventos { padding: 20px 10px 0; }
  .dados { margin: 10px; padding: 30px 10px; }
  .dados h2, .dados span { padding: 10px 20px 0; }
  .container-noticias { flex-wrap: wrap; padding: 30px 0px; }
  .container-noticias .fotosNoticias { width: 100%; height: auto; }
  .container-noticias .descricaoNoticias { margin-top: 20px; padding: 0 10px 20px; }
  .container-noticias .paragrafoNoticias { padding: 0 10px 20px; font-size: 1.125em; }
  .planos { padding: 50px 10px; }
  .planos-itens a.item { margin-bottom: 20px; }
  .parceiros-container { padding: 0 10px; }
  .parceiros-logo { flex-wrap: wrap; }
  .parceiros-logo .logo1, .parceiros-logo .logo2, .parceiros-logo .logo3 { margin-top: 10px; } }

.cronometro-bg { background: #222; padding: 20px; }

.cronometro-container { max-width: 1000px; margin: 0 auto; display: block; padding: 60px 10px 20px; color: white; }

.cronometro-titulo { display: flex; justify-content: space-between; cursor: pointer; padding-bottom: 30px; }

.cronometro-titulo h2:hover, .cronometro-titulo h2:focus { color: #05aff2; }

.aquec, .aqueclap, .parcial { font-size: 1.125em; margin-bottom: 5px; font-weight: 400; }

.parcial { display: none; padding-bottom: 15px; }

.parcial.ativo { display: block; font-size: 1.25em; font-weight: 400; }

.parcial.ativo p { margin-bottom: 15px; }

.lastTimer { font-size: 1.25em; font-weight: 400; }

.lastTimer p { margin: 15px 0; }

.timer { font-size: 4.375em; letter-spacing: 5px; margin-bottom: 50px; text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.2); }

.lap { display: flex; font-size: 4.375em; letter-spacing: 5px; margin-bottom: 100px; text-shadow: 2px 4px 8px rgba(255, 255, 255, 0.2); }

.btn-container { display: flex; align-items: center; }

.btn-start, .btn-pausar, .btn-continuar, .btn-reset, .btn-lap { margin: 0 auto; border-radius: 40px; font-size: 2.5em; padding: 15px 140px; background: #f2e313; cursor: pointer; margin-bottom: 60px; }

.btn-pausar, .btn-continuar, .btn-lap { display: none; }

.btn-start:hover, .btn-start:focus, .btn-pausar:hover, .btn-pausar:focus, .btn-continuar:hover, .btn-continuar:focus, .btn-reset:hover, .btn-reset:focus, .btn-lap:hover, .btn-lap:focus { background: #222; color: white; text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.4); border: 2px solid white; }

@media (max-width: 1000px) { .cronometro-bg { padding: 10px; }
  .cronometro-container { max-width: 100%; margin: 0px; padding: 60px 0px; }
  .btn-start, .btn-lap, .btn-continuar, .btn-pausar, .btn-reset { width: 180px; font-size: 1.5625em; padding: 15px 35px; }
  .lap { margin-bottom: 60px; } }

.main-bg { background: white; }

.main-container { border-bottom: 1px solid; margin: 0 auto; position: sticky; top: 0; z-index: 20; }

.main-menu { display: flex; align-items: center; background: #222; color: white; padding: 0 10px; height: 44px; }

.main-menu li:hover { color: #05aff2; }

svg.iconBell:hover { fill: #05aff2; }

#superior, #inferior { display: flex; justify-content: space-around; align-items: center; gap: 20px; cursor: pointer; }

.view-bg { background: white; }

.view-container.ativo { display: block; max-width: 1000px; min-height: 100vh; margin: 0 auto; padding: 30px 0; }

.view-container { display: none; }

.nav-container { border-top: 1px solid; margin: 0 auto; position: sticky; bottom: 0; z-index: 30; }

@media (max-width: 1000px) { .view-container.ativo { max-width: 100%; padding: 10px; }
  .main-container { position: sticky; top: 90px; z-index: 20; } }

/* =========================
   RANKING
========================= */
.rankingWrapper { max-width: 420px; background: #222; border-radius: 8px; padding: 12px; color: white; }

/* =========================
HEADER + ÍCONE
========================= */
.rankingHeader { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; width: 100%; background: #222; border-radius: 8px 8px 0 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

.rankingHeader strong { font-size: 1.125em; padding: 12px; color: white; }

svg.iconRanking:hover { fill: #05aff2; }

.iconRanking { width: 22px; height: 22px; fill: white; }

.estrela { padding: 2px 6px; }

/* =========================
   FILTROS
========================= */
.rankingFilters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.rankingTabs, .rankingGender { display: flex; gap: 6px; }

/* Botões */
.rankingTabs button, .rankingGender button { flex: 1; background: transparent; border: 1px solid #222; color: #222; padding: 6px 0; font-size: 1.125em; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; }

.rankingTabs button:hover, .rankingGender button:hover { color: #222; border-color: #222; }

.rankingTabs button.active, .rankingGender button.active { color: #05aff2; border-color: #05aff2; font-weight: 600; }

/* =========================
   LISTA
========================= */
.rankingList { display: flex; flex-direction: column; gap: 1px; }

/* =========================
   ITEM
========================= */
.rankingItem { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; padding: 8px 10px; background: #222; border-radius: 4px; font-size: 1.125em; color: #ddd; }

/* =========================
   POSIÇÃO
========================= */
.rankingPos { font-weight: bold; color: #222; text-align: center; }

/* =========================
   NOME
========================= */
.rankingNome { padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================
   PONTOS
========================= */
.rankingPts { font-weight: 600; color: white; }

/* =========================
   TOP 3
========================= */
.rankingItem:nth-child(1) { background: linear-gradient(90deg, #3a2f00, #1a1a1a); }

.rankingItem:nth-child(1) .rankingPos { color: gold; }

.rankingItem:nth-child(2) { background: linear-gradient(90deg, #2f2f2f, #1a1a1a); }

.rankingItem:nth-child(2) .rankingPos { color: silver; }

.rankingItem:nth-child(3) { background: linear-gradient(90deg, #3a2400, #1a1a1a); }

.rankingItem:nth-child(3) .rankingPos { color: #cd7f32; }

/* =========================
   USUÁRIO LOGADO
========================= */
.rankingItem.me { background: linear-gradient(90deg, #f20505, #733702); color: white; font-weight: bold; }

/* =========================
   RODAPÉ (POSIÇÃO)
========================= */
#rankingUsuario { margin-top: 10px; font-size: 1.125em; text-align: center; color: #222; }

#modalResultado.modal { width: 100%; height: 100vh; background: rbga(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; z-index: 50; display: none; justify-content: center; align-items: center; }

#btnSalvarResultado, #btnCancelarResultado { border: 1px solid black; }

.referencia-field { display: flex; align-items: center; gap: 8px; }

.btnWhatsappRef { background: #25d366; /* WhatsApp */ border: none; width: 40px; height: 40px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.btnWhatsappRef svg { fill: #fff; }

.btnWhatsappRef:hover { background: #05aff2; }

/* =========================
   Ranking de Indicações
========================= */
#rankingLista { list-style: none; padding: 0; width: 100%; margin: 20px auto; }

.btnRankingIndicacoes { display: block; border: 2px solid black; }

.ranking-item { display: flex; align-items: center; justify-content: space-between; background: #f4f4f4; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-family: Arial, sans-serif; transition: background 0.2s; }

.ranking-item:hover { background: #e0e0e0; }

.rankingPosition { width: 24px; text-align: center; font-weight: bold; margin-right: 8px; }

.rankingName { flex: 1; font-weight: 500; margin-left: 8px; }

.rankingIcon { display: flex; align-items: center; gap: 4px; font-size: 18px; color: #4CAF50; /* verde para indicar sucesso/indicacoes */ }

.rankingIcon svg { display: inline-block; vertical-align: middle; fill: currentColor; }

.rankingPoints { margin-left: 12px; font-weight: bold; color: #333; }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

footer { display: flex; flex-wrap: wrap; background: #0644bf; justify-content: center; height: 100px; align-items: center; font-size: 1.5em; }

footer .fas { color: white; }

footer .direitos { margin: 0 30px; }

@media (max-width: 1000px) { footer { display: block; font-size: 1.125em; padding: 20px 0; text-align: center; }
  footer .direitos { margin: 0px; } }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.cadastro-bg { padding: 20px; }

div.cadastro-form { max-width: 1000px; margin: 0 auto; padding: 60px 10px 20px; display: block; }

h1 { margin-bottom: 40px; }

.formulario { display: flex; flex-direction: column; /* container geral do grupo de radios */ /* bloco individual (radio + label) */ /* estilo opcional do input radio */ /* estilo opcional do label */ }

.formulario input, .formulario select { padding: 10px; font-size: 1.25em; margin-bottom: 10px; }

.formulario input.invalido { border: 2px solid red; }

.formulario input.valido { border: 2px solid green; }

.formulario .cpflingua { display: flex; flex-direction: column; }

.formulario .genero-group { display: flex; align-items: center; gap: 20px; /* espaçamento entre cada opção */ margin: 10px 0 20px; }

.formulario select#planoCadastro { width: 100%; }

.formulario label.email { margin-top: 20px; }

.formulario .genero-item { display: flex; align-items: center; gap: 6px; /* distância entre radio e label */ }

.formulario .genero-item input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }

.formulario .genero-item label { cursor: pointer; color: #333; font-size: 1.25em; }

.formulario #cpf { margin-bottom: 20px; }

.formulario input.valido.erro1cpf, .formulario input.validofone.erro1fone, .formulario input#senha.erro1senha.valido { border: 2px solid red; }

.formulario input.valido, .formulario input.validofone, .formulario input#senha.valido.validosenha { border: 2px solid green; }

.cpflingua.hide { display: none; }

.erro1text, .erro1textfone { color: white; }

span.ativarcpf, span.ativarfone, span.ativarsenha { display: block; font-size: 0.875em; color: red; }

.erro1 { display: block; font-size: 1.25em; color: red; font-weight: normal; margin-bottom: 20px; }

.erro2 { font-size: 1.5em; }

.btnEnviar { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.25em; max-width: 270px; background: white; color: black; padding: 10px 20px; border-radius: 8px; border: 1px solid black; cursor: pointer; }

.btnEnviar:hover, .btnEnviar:focus { background: #222; color: white; }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.notificationWrapper { position: relative; }

button#notificationBtn.notificationBtn { position: relative; top: 0; right: 0; background: none; border: 1px solid #222; padding: 0 25px; cursor: pointer; }

.iconBell { fill: white; }

.notificationBadge { position: absolute; top: -8px; right: 20px; background: #f20505; color: white; font-size: 11px; padding: 2px 6px; border-radius: 50%; display: block; }

#notificationDropdown.notificationDropdown { width: 100%; background: #222; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); display: block; }

.notificationDropdown h3 { padding: 12px; margin: 0; border-bottom: 1px solid #222; color: white; }

.notificationItem { font-size: 1.125em; background: white; padding: 12px; border-bottom: 1px solid #222; cursor: pointer; }

.notificationItem.unread { background: #bbb; }

.notificationItem strong { display: block; color: #222; font-size: 1.125em; }

.notificationItem p { margin: 4px 0 0; font-size: 1.125em; color: #bbb; }

.modal-container { width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 0; z-index: 50; display: none; justify-content: center; align-items: center; }

.modal-container.ativo { display: flex; animation: modal .3s forwards; }

@keyframes modal { from { opacity: 0;
    transform: translate3d(60px, 0, 0); }
  to { opacity: 1;
    transform: translate3d(0, 0, 0); } }

.modal { background: rgba(85, 179, 217, 0.9); width: 60%; padding: 40px; border-radius: 8px; border: 2px solid #222; position: relative; }

.fechar { position: absolute; top: -5px; right: -5px; width: 40px; height: 40px; border: 4px solid #55b3d9; border-radius: 30%; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3); font-size: 1.25em; cursor: pointer; }

.fechar:hover, .fechar:focus { border: 4px solid white; background: #05aff2; color: white; }

.modal label { display: block; font-weight: bold; font-size: 1.25em; margin: 20px 0 10px 0; }

.modal input { padding: 15px; width: 100%; border-radius: 8px; font-size: 1.25em; box-sizing: border-box; }

.modal button[type="button"] { display: block; border-radius: 4px; border: 2px solid white; font-weight: bold; font-size: 1.125em; background: white; padding: 15px 30px; margin: 20px 0; }

.modal button[type="button"]:hover, .modal button[type="button"]:focus { border: 2px solid #222; box-sizing: border-box; }

span.erro { font-weight: bold; font-size: 1.5em; }

@media (max-width: 1000px) { .modal { width: 90%; } }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

/* =========================
   RESET BÁSICO
========================= */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background: #f5f5f5;
    color: #333;
    line-height: 1.5;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2em;
    color: #111;
}*/
/* =========================
   CONTAINER PRINCIPAL
========================= */
.pagamento-container { max-width: 500px; margin: 30px auto; padding: 20px 30px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }

/* =========================
   LABELS E SELECTS
========================= */
.variadoLabel { display: block; margin: 12px 0 6px; font-weight: bold; }

.variadoInput { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 1em; margin-bottom: 15px; transition: border-color 0.2s; }

.variadoInput:focus { border-color: #007bff; outline: none; }

/* =========================
   PARCELAMENTO
========================= */
#parcelamentoWrapper { display: block; margin-bottom: 15px; }

/* =========================
   BOTÕES PIX / CARTÃO
========================= */
.metodo-pagamento { display: flex; justify-content: space-between; margin-bottom: 15px; }

.metodo-pagamento button { flex: 1; padding: 10px; margin-right: 10px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; background: #eee; transition: all 0.2s; }

.metodo-pagamento button:last-child { margin-right: 0; }

.metodo-pagamento button.active { background: #007bff; color: #fff; }

/* =========================
   FORMULÁRIOS
========================= */
.form-pagamento { display: flex; flex-direction: column; margin-top: 10px; }

.form-pagamento label { margin-top: 10px; }

.btn-pagamento { padding: 12px; margin-top: 15px; border: none; border-radius: 6px; font-size: 1em; font-weight: bold; cursor: pointer; background: #28a745; color: #fff; transition: all 0.2s; }

.btn-pagamento:hover { background: #218838; }

/* =========================
   MENSAGENS DE FEEDBACK
========================= */
.message { margin-top: 12px; font-weight: bold; }

.message.success { color: #28a745; }

.message.error { color: #dc3545; }

/* =========================
   QR CODE PIX
========================= */
.qr-pix { text-align: center; margin: 15px 0; }

.qr-pix img { max-width: 200px; border-radius: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }

/* =========================
   RESPONSIVO
========================= */
@media screen and (max-width: 600px) { .pagamento-container { margin: 20px; padding: 15px 20px; }
  .metodo-pagamento button { font-size: 0.9em; padding: 8px; }
  .btn-pagamento { font-size: 0.9em; padding: 10px; }
  .qr-pix img { max-width: 150px; } }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; }

.grid-1 { width: 63.33333px; }

.grid-2 { width: 146.66667px; }

.grid-3 { width: 230px; }

.grid-4 { width: 313.33333px; }

.grid-5 { width: 396.66667px; }

.grid-6 { width: 480px; }

.grid-7 { width: 563.33333px; }

.grid-8 { width: 646.66667px; }

.grid-9 { width: 730px; }

.grid-10 { width: 813.33333px; }

.grid-11 { width: 896.66667px; }

.grid-12 { width: 980px; }

.perfilSection { display: none; }

.perfilButtons { display: flex; gap: 4px; }

.perfilSection.active { display: block; }

.perfilWrapper { max-width: 1000px; margin: 0 auto; background: #111; color: #fff; padding: 20px; border-radius: 8px; font-family: sans-serif; }

.perfilSection { margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 20px; }

.perfilSection h2 { margin: 12px 0px; color: #222; }

.perfilRow { display: flex; align-items: center; gap: 10px; }

.perfilFoto { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid #f0a500; }

.btnEditarCadastro, .btnEnviarQuiz, .btnRefazerQuiz, .btnSalvarModalidade, .btnAddObjetivo, .btnSalvarModalidade, [data-section='editarCadastro'], [data-section='quiz'], [data-section='modalidades'], [data-section='objetivos'], .btnRegistrarTempo { background: #222; border: none; font-size: 0.875em; padding: 10px 20px; color: white; font-weight: bold; border-radius: 5px; cursor: pointer; }

.btnRegistrarTempo { margin-top: 10px; }

.btnEditarCadastro:hover, .btnEnviarQuiz:hover, .btnRefazerQuiz:hover, .btnSalvarModalidade:hover, .btnAddObjetivo:hover, [data-section='editarCadastro']:hover, [data-section='quiz']:hover, [data-section='modalidades']:hover, [data-section='objetivos']:hover, .btnRegistrarTempo:hover { opacity: 0.85; }

/* ========================= PERFIL - MODALIDADES ========================= */
#modalidades form { display: flex; flex-direction: column; gap: 12px; }

/* Cada modalidade ocupa uma linha */
#modalidades .input-block { display: flex; align-items: center; padding: 8px 10px; flex-direction: column; border: 1px solid #222; gap: 20px; border-radius: 6px; margin-bottom: 12px; }

/* Modalidade (checkbox + nome) */
/*#modalidades .input-block > label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; white-space: nowrap; }*/
#modalidades label { display: flex; align-items: center; gap: 6px; font-size: 14px; }

/* Checkbox padrão */
#modalidades input[type="checkbox"] { accent-color: #05aff2; cursor: pointer; }

/* Container dos dias (todos em linha) */
#modalidades .diasCheckboxes { display: flex; align-items: center; gap: 10px; flex-direction: row; flex-wrap: wrap; margin-left: 22px; }

/* Cada dia */
#modalidades .diasCheckboxes label { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; padding: 4px 6px; border-radius: 4px; border: 1px solid #222; cursor: pointer; font-size: 0.8125em; white-space: nowrap; }

#modalidades .diasCheckboxes label .diasSemana { display: flex; flex-wrap: wrap; }

/* Hover */
#modalidades .diasCheckboxes label:hover { border-color: #05aff2; }

/* Botão salvar */
.btnSalvarModalidade { margin-top: 10px; align-self: flex-start; color: white; border: none; }

.btnSalvarModalidade:hover { filter: brightness(1.1); }

.modalidade { margin-bottom: 12px; }

.diasSemana { margin-bottom: 12px; display: flex; gap: 2px; flex-wrap: wrap; }

.diasSemana.hidden { display: none; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; }

table th, table td { border: 1px solid #333; padding: 6px; text-align: center; }

table th { background: #222; }

form label { display: block; margin-bottom: 10px; }

form input { width: 100%; padding: 10px; font-size: 1.25em; margin-bottom: 10px; }

form select { width: 50%; padding: 10px; font-size: 1.25em; margin-bottom: 10px; }

ul#superior.main-menu li img { border-radius: 50%; object-fit: cover; width: 100%; height: 100%; display: block; }

@media (max-width: 1000px) { ul#superior.main-menu li img { width: 100%; height: 100%; align-items: center; } }