/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
*,*::before,*::after {box-sizing: border-box;}
html, body, div, iframe, h1, h2, h3, h4, h5, h6, p, 
em, font, img, u, i, article, textarea, section, 
input, ul, li, form, label, button {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {width:100%; min-height:100%; height: 100%; font-family: var(--font_p); scroll-behavior: smooth;}
/*********************************************************/
/*PROPRIEDADES
/*********************************************************/
/*LINKS*/
a {text-decoration: none; color: var(--cor_1);}
a:hover {text-decoration: none;}
a img {border: 0;}
.zero {font-size: 0em !important; padding: 0 !important; margin: 0 !important;}
/*IMAGENS*/
img {border: none; width: auto; max-width: 100%;}
/*CONTEUDO*/
/*BACKGROUND*/
.bgcover {background-repeat: no-repeat; background-size: cover;}
.bg100  {background-repeat: no-repeat; background-size: 100%;}
.aparecer {display: none !important;}
/*********************************************************/
/*SEPARADORES*/
.clear {clear: both;}
.separa100 {width: 100%; height: 100px;	clear: both;}
.separa80 {width: 100%;	height: 80px; clear: both;}
.separa60 {width: 100%; height: 60px; clear: both;}
.separa40 {width: 100%;	height: 40px; clear: both;}
.separa30 {width: 40%; height: 30px; clear: both;}
.separa20 {width: 100%; height: 20px; clear: both;}
.separa10 {width: 100%;	height: 10px; clear: both;}
/*********************************************************/
.home { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.homelogo {width: 300px; aspect-ratio: 1/1;}
/*********************************************************/
body {background-attachment: fixed;}
.quadro {width: 950px; margin: 40px auto 0 auto; border-radius: 30px; background-color: #fff; display: table; background-color: #F5F5F5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); overflow: hidden;}
.quadro h1 {font-weight: 400; font-size: 1.8em; padding-bottom: 20px;}
.quadro p {font-size: 1.3em; font-weight: 500;}
.quadro img {border-radius: 10px;}

.quadro .logo {width: 35%; height: 110px; margin: 0 auto 10px auto;}
.quadro .audio {width: 100%; border: 2px solid #ccc; background-color: #F2F3F5; border-radius: 50px; padding: 20px; margin-bottom: 20px;}
.quadro-img {width: 950px; max-width: 950px; margin: 40px auto;}

.esquerda {width: 45%; float: left; padding: 10px 20px; background-color: #fff;}
.direita {width: 53%; float: right; overflow: hidden; padding: 20px; text-align: center;}
/*********************************************************/
/*RESPONSIVO*/
/*********************************************************/
@media (max-width: 950px) {
  /*********************************************************/
	.quadro {width: 90%; margin-top: 20px;}
  .quadro-img {max-width: 90%; width: auto; margin: 20px auto 40px auto;}

  .esquerda {width: 100%; float: none; margin: 0 auto; text-align: center; }
  .esquerda img {margin: auto; width: 55%;}
  .direita {width: 100%; float: none;}
  .quadro .audio {margin-bottom: 0; max-width: 100%; padding: 5px;}

  .aparecer {display: block !important;}
  .sumir {display: none !important;}

  .quadro .logo {width: 100px; height: 60px; }
  /*********************************************************/
}
@media (max-width: 480px) {
  /*********************************************************/
  .quadro h1 {font-size: 1.1em;}
  .quadro p {font-size: 0.9em;}
  /*********************************************************/
}