/*
Theme Name: Mesa Live
Theme URI: 
Author: Geovani Assis Pereira
Author URI: https://geovaniassis.dev.br
Description: Tema oficial do Mesa Live, iniciado em 23 de Setembro de 2026.
Created: 23 de Setembro de 2026
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0

/***************************************************************************
       Cores
****************************************************************************

	Preto  		=	#272727
	Black       =   #000000
	Branco    	=	#ffffff
	Cinza01		=	##adadad

/***************************************************************************
       Fonts
***************************************************************************/

	@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Exo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/***************************************************************************
       Variáveis
***************************************************************************/

	:root {
		--cor-preto: #272727;
		--cor-black: #000000;
		--cor-branco: #ffffff;
		--cor-cinza01: #adadad;

		--fonte-didact: 'Didact Gothic', sans-serif;
		--fonte-exo: 'Exo', sans-serif;
		--fonte-lato: 'Lato', sans-serif;
		--fonte-merri: 'Merriweather', serif;
	}

	@keyframes floatDireita {
		0%, 100% {
			transform: translateY(0) translateX(0);
		}
		25% {
			transform: translateY(-10px) translateX(5px);
		}
		50% {
			transform: translateY(5px) translateX(-5px);
		}
		75% {
			transform: translateY(-5px) translateX(10px);
		}
	}
	@keyframes floatEsquerda {
		0%, 100% {
			transform: translateY(0) translateX(0);
		}
		25% {
			transform: translateY(10px) translateX(-5px);
		}
		50% {
			transform: translateY(-5px) translateX(5px);
		}
		75% {
			transform: translateY(5px) translateX(-10px);
		}
	}

/***************************************************************************
        All
***************************************************************************/

	html,
	body{margin: 0 !important; overflow-x: hidden;}

	body{ overflow: auto !important; background: radial-gradient(circle at 15% 10%,rgba(32,168,255,.12),transparent 30%), radial-gradient(circle at 85% 15%,rgba(121,87,255,.14),transparent 30%), linear-gradient(180deg,#070914,#05060d 100%);}

	*{
		font-family: var(--fonte-lato);
		margin: 0;
		box-shadow: 0 0 0 0;
		border: 0 none;
		outline: 0;
	} 

	a:hover,
	a:focus,
	a:visited{
		text-decoration: none !important; 
		cursor: pointer;
	}

	button:focus { outline: none; }

	.mobile{ display: none !important;}

	.alig-center{align-items: center !important;}

	.owl-theme .owl-nav [class*=owl-]:hover{
		background: transparent !important;
	}
	
	.txt-center{
		text-align: center !important;
	}
	.txt-right{
		text-align: right !important;
	}

	.btnAzul{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		padding: 10px 20px;
		border-radius: 10px;
		border: 1px solid var(--cor-cinza01);
		font-weight: 800;
		transition: ease all .5s;
		cursor: pointer;
		color: var(--cor-cinza01);
		background: none;
	}
	.btnAzul:hover{
		color: var(--cor-branco);
		border: 1px solid transparent;
		background: linear-gradient(135deg, var(--blue), var(--purple));
	}

	.preTexto{
		color: #65d8ff;
		text-transform: uppercase;
		letter-spacing: .13em;
		font-size: .78rem;
		font-weight: 900;
	}
	.titulo2{
		font-size: 45px;
		margin: 5px 0 20px;
		background: linear-gradient(100deg, #fff 10%, #aeeaff 48%, #9b8cff 85%);
		background-clip: text;
		color: transparent;
		letter-spacing: -.055em;
		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		font-weight: 800;
	    max-width: 680px;
	}

	.texto {
		max-width: 650px;
		margin: 0;
		color: var(--cor-cinza01);
		font-size: 17px;
	}

	.bloco{
		padding: 30px;
		border-radius: 20px;
		border: 1px solid #6e90ff38;
		background: radial-gradient(circle at 85% 15%, rgba(121, 87, 255, .22), transparent 35%), linear-gradient(135deg, rgba(22, 36, 82, .8), rgba(9, 11, 23, .9));
		box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
	}

/***************************************************************************
        Header
***************************************************************************/

	header{
		background-color: #000000d4;
		padding: 10px 0;
		position: fixed;
		width: 100%;
		min-height: 80px;
	    z-index: 9;
	}
	header.drop{
		padding: 0px 0;
	}

	header img{
		max-width: 100%;
		transition: ease .5s all;
	    max-height: 127px;
	}
	header.drop img{
	    max-height: 80px;
	}

	header .menu{
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
	}
	header .menu a{
		color: var(--cor-cinza01);	
		transition: ease .5s all;
		font-size: 16px;
		font-family: var(--font-family-sans-serif);
		font-weight: 400;

	}
	header .menu a:hover{
		color: var(--cor-branco);
	}

/***************************************************************************
        Banner
***************************************************************************/
	
	#banner{
		padding: 80px 0;
		border-top: solid 147px #000;
	}

	#banner h2{
		font-size: clamp(3rem, 6vw, 5.8rem);
		line-height: .94;
		margin: 20px 0;
		background: linear-gradient(100deg, #fff 10%, #aeeaff 48%, #9b8cff 85%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		letter-spacing: -.055em;
		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	    font-weight: 800;
	}
	#banner p{
		color: var(--cor-branco);
		font-family: var(--fonte-didact);
		font-size: 18px;
	}
	#banner .areaBtn{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		gap: 30px;
	}
	#banner .logo-card {
		position: relative;
		border: 1px solid rgb(110 144 255 / 22%);
		border-radius: 28px;
		padding: 22px;
		background: linear-gradient(145deg, rgba(18, 28, 67, .76), rgba(8, 10, 23, .85));
		box-shadow: 0 24px 80px rgba(0,0,0,.42);
		overflow: hidden;
	}
	#banner .live-badge {
		position: absolute;
		z-index: 2;
		top: 20px;
		right: 20px;
		padding: 8px 12px;
		border-radius: 999px;
		background: rgba(7, 9, 18, .78);
		border: 1px solid rgba(255, 49, 91, .4);
		font-size: .75rem;
		font-weight: 900;
		color: #ff7e96;
	}
	#banner .logo-card img {
		position: relative;
		z-index: 1;
		width: 100%;
		display: block;
		filter: drop-shadow(0 18px 32px rgba(0, 116, 255, .3));
	}















/***************************************************************************
        Porque
***************************************************************************/

	#porq .bloco{
		padding: 0px;
	}
	#porq .bloco img{
		width: 100%;
		border-radius: 20px;
	}












/***************************************************************************
        Como Funciona
***************************************************************************/

	#como-funciona{
		padding: 80px 0 20px;
	}
	#como-funciona .titulo2 {font-size: 41px;}

	#como-funciona .mestre{		
		background: linear-gradient(
			145deg,
			#0d0920 0%,
			#130b27 50%,
			#0b0818 100%
		);
		border: 1px solid #7b2cff;
		margin-bottom: 30px;
		border-radius: 20px;
	}
	
	#como-funciona .jogadores{
		background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 100, 255, 0.16) 0%,
            rgba(0, 40, 100, 0.08) 35%,
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #06172d 0%,
            #031326 50%,
            #020b18 100%
        );
    	border: 1px solid rgba(0, 153, 255, 0.55);
		margin-bottom: 30px;
		border-radius: 20px;
	}
	#como-funciona .card{
		padding: 26px;
		background: linear-gradient(145deg, rgba(16, 24, 54, .72), rgba(10, 12, 25, .7));
		border-radius: 20px;
		box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
		min-height: 500px;
		background-repeat: no-repeat;
		background-position: top center;
		padding-top: 170px;
		background-size: auto;
	}
	#como-funciona .card .areaTexto{
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		align-items: center;
		margin-bottom: 20px;
	}
	#como-funciona .card .areaIcone{
		background: #162f68;
		padding: 10px;
		width: fit-content;
		border-radius: 10px;
	}
	#como-funciona .mestre .card .areaIcone{		
		background-color: #351065;
	}
	#como-funciona .jogadores .card .areaIcone{		
		background-color: #023376;
	}
	#como-funciona .card .areaIcone img{
		width: 40px;
	}

	#como-funciona .areaTexto h3 {
		font-weight: 400;
		margin: 0;
	    font-size: 17px;
	    max-width: 210px;
	}
	#como-funciona .mestre .areaTexto h3 {
    	color: #9f50fb;
	}
	#como-funciona .jogadores .areaTexto h3 {
    	color: #3db2f6;
	}
	#como-funciona .areaTexto h3 span {
		display: block;
		font-size: 20px;
		font-weight: 900;
	}
	#como-funciona .mestre .areaTexto h3 span {
		color: #cea7d8;
	}
	#como-funciona .jogadores .areaTexto h3 span {
		color: #fff;
	}

	#como-funciona  .recursos {
		list-style: none;
		padding: 0;
		margin: 0;
		color: var(--cor-cinza01);
	}
	#como-funciona  .recursos li {
		position: relative;
		padding-left: 28px;
		margin-bottom: 8px;
	}
	#como-funciona  .recursos li::before {
		content: "✓";
		position: absolute;
		left: 0;
		top: 0;
		font-weight: bold;
		font-size: 18px;
	}
	#como-funciona .jogadores .recursos li::before {
		color: #3db2f6;
	}
	#como-funciona .mestre .recursos li::before {
		color: #9f50fb;
	}

/***************************************************************************
        Recursos
***************************************************************************/

	#recursos {
		padding: 80px 0 20px;
	}
	#recursos .card{
		padding: 26px;
		border: 1px solid #6e90ff38;
		background: linear-gradient(145deg, rgba(16, 24, 54, .72), rgba(10, 12, 25, .7));
		border-radius: 20px;
		box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
		margin-bottom: 30px;
		min-height: 260px;
		background-repeat: no-repeat;
		background-position: top center;
		padding-top: 170px;
		background-size: auto;
	}
	#recursos .card .areaIcone{
		background: #162f68;
		padding: 10px;
		width: fit-content;
		border-radius: 10px;
		margin-bottom: 20px;
	}
	#recursos .card .areaIcone img{
		filter: brightness(1) invert(1);
		width: 40px;
	}
	#recursos .card h3{
		color: var(--cor-branco);
		font-family: var(--fonte-didact);
		font-size: 20px;
		font-weight: 900;
	}
	#recursos .card p{
		color: var(--cor-cinza01);
		font-size: 17px;
		min-height: 80px;
		max-width: 670px;
	}

/***************************************************************************
        Planos
***************************************************************************/

	#planos{
		padding: 80px 0;
	}
	#planos .bloco{
		margin-bottom: 30px;
	    min-height: 485px;
	}
	#planos .bloco.jogador{
		background: linear-gradient(145deg, #001d1d 0%, #002b2ae0 45%, #003c3824 100%);
		border: solid 1px #044e45;
	}
	#planos .bloco.mestre{
		background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 100, 255, 0.16) 0%,
            rgba(0, 40, 100, 0.08) 35%,
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #06172d 0%,
            #031326 50%,
            #020b18 100%
        );
    	border: 1px solid rgba(0, 153, 255, 0.55);
	}
	#planos .bloco.pro{
		background: linear-gradient(
			145deg,
			#0d0920 0%,
			#130b27 50%,
			#0b0818 100%
		);

		border: 1px solid #7b2cff;
	}
	#planos .bloco .areaTexto{
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		align-items: center;
	}
	#planos .bloco .areaIcone{
		border-radius: 10px;
		padding: 10px;
	}
	#planos .bloco.jogador .areaIcone{
		border: solid 1px #044e45;
	}
	#planos .bloco.mestre .areaIcone{
		border: 1px solid rgba(0, 153, 255, 0.55);
	}
	#planos .bloco.pro .areaIcone{
		border: 1px solid #7b2cff;
	}
	#planos .bloco .areaIcone img{
		width: 50px;
	}
	#planos .bloco .areaTexto h3{
		font-weight: 800;
		margin: 0;
	}
	#planos .bloco.jogador .areaTexto h3{
		color: #24dec0;
	}
	#planos .bloco.mestre .areaTexto h3{
		color: #3db2f6;
	}
	#planos .bloco.pro .areaTexto h3{
		color: #9f50fb;
	}	
	#planos .bloco .areaTexto h3 span{
		display: block;
		font-size: 20px;
	}
	#planos .bloco.jogador .areaTexto h3 span{
		color: #bffbf3;
	}
	#planos .bloco.mestre .areaTexto h3 span{
		color: #fff;
	}
	#planos .bloco.pro .areaTexto h3 span{
		color: #cea7d8;
	}

	#planos .bloco p{
		min-height: 55px;
	}

	#planos .recursos {
		list-style: none;
		padding: 0;
		margin: 0;
		color: var(--cor-cinza01);
	}
	#planos .recursos li {
		position: relative;
		padding-left: 28px;
		margin-bottom: 8px;
	}
	#planos .recursos li::before {
		content: "✓";
		position: absolute;
		left: 0;
		top: 0;
		font-weight: bold;
		font-size: 18px;
	}
	#planos .bloco.jogador .recursos li::before {
		color: #00e6d0;
	}
	#planos .bloco.mestre .recursos li::before {
		color: #3db2f6;
	}
	#planos .bloco.pro .recursos li::before {
		color: #9f50fb;
	}






/***************************************************************************
        Futuro
***************************************************************************/

	#futuro{
		padding: 80px 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

/***************************************************************************
        Rodapé
***************************************************************************/

	footer{
		border-top: solid 1px #adadad2e;
		padding: 20px 0;
	}
	footer p,
	footer a,
	footer a:hover{
		margin: 0;
		color: var(--cor-branco);
	}
	footer .links{
		text-align: center;
	}

/***************************************************************************
        Responsidade
***************************************************************************/

	@media (max-width: 1200px){}

	@media (max-width: 1155px){}

	@media (max-width: 991px){
		.desktop{ display: none !important;}
		.mobile{display: block !important;}

		footer .logo,
		footer .links{
			text-align: center;
			margin: 10px 0;
		}

		#btnMobile{
		    text-align: -webkit-right;
		}
		#btnMobile .traco{
			width: 40px;
			height: 5px;
			background: linear-gradient(135deg, var(--blue), var(--purple));
			margin: 7px 0;
			border-radius: 40px;
			transition: ease .5s all;
		}
		#btnMobile.ativo .tracotopo{
        transform: rotate(45deg);
		}
		#btnMobile.ativo .tracomeio{
			opacity: 0;
		}
		#btnMobile.ativo .tracobaixo{
			transform: rotate(-45deg);
			margin-top: -24px;
		}

		header #fundoPreto {
			background: #00000096;
			width: 100%;
			height: 100%;
			top: 80px;
			right: -100%;
			position: fixed;
			z-index: 89;
			transition: ease .5s all;
		}
		header #fundoPreto.ativo {
			right: 0;
		}

		header #menuLateral {
			position: fixed;
			height: calc(100% - 80px);
			transition: ease .5s all;
			width: 320px;
			background: radial-gradient(circle at 15% 10%,rgba(32,168,255,.12),transparent 30%), radial-gradient(circle at 85% 15%,rgba(121,87,255,.14),transparent 30%), linear-gradient(180deg,#070914,#05060d 100%);
			z-index: 99;
			right: -150%;
			top: 80px;
			padding: 10px;
			display: block;
			overflow: auto;
		}
		header #menuLateral.ativo {
			right: 0;
		}
		header .menu{
			justify-content: center;
			flex-direction: column;
			padding: 30px;
		}
		header{
			padding: 0 !important;
		}
		header img{
			max-height: 80px !important;
		}
		#banner{
			border-top: solid 80px #000;
		}
		#banner .areaBtn{
			margin-bottom: 30px;
		}
			
	}

	@media (max-width: 767px){}

	@media (max-width: 560px){
		.cta-box{
			padding:34px 20px;
		}
	}

	@media (max-width: 454px){}