body{
  font-family: Articulat CF;
  color: #99a1a8;
}

h1{
  font-size: clamp(30px, 5vw, 50px);
  padding: 0;
  margin: 0;
  font-weight: 500;
}

h3 {
  font-size: clamp(16px, 2vw, 28px);
  margin: 0;
  gap: 0;
  font-weight: 300;
  font-family: Input Mono;
}

p {
  font-size: clamp(9px, 3vw, 16px);
  font-weight: 200;
}

h4 {
  font-size: clamp(18px, 3vw, 28px);
  margin: 0;
  gap: 0;
}



.central {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f7;
  flex-direction: column;
}

.principal{
  display: flex;
  flex-direction: column;
  margin-top: 1em;
  max-width: 900px;
    gap: 1em;
}

/* ------------------ Primeiro Bloco ----------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.banner{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius: 1em;
}

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.20) 35%,
        transparent 65%
    );
}


.logo{
  width: 40%;
    position:absolute;
    top: 1em;
    right: 1em;
    z-index:3;
}

.logo img{
    width:100%;
    height:auto;
    justify-content: left;
}


.conteudo{
    position:absolute;
    bottom:35px;
    left:0;
    width:100%;
    color:#FFF;
    text-align:center;
    padding:0 30px;
    z-index:3;
    padding: 0 1em 0 1em;
}


/* ------------------ Primeiro Bloco ----------------- */



/* ------------------ Segundo Bloco ----------------- */
.segundosg {
  width: 100%;
  background-image: url('Ativo\ 4.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1em;
  overflow: hidden;
  padding: 5% 10% 5% 10%;
  text-align: center;
}

.segundosg h1{
  font-weight: 200;
}

.segundosg img{
  border-radius: 1em;
}
/* ------------------ Segundo Bloco ----------------- */



/* ------------------ Tres Bloco ----------------- */
.meio-segmento {
  width: 100%;
  display: flex;
  gap: 2%;
}

.meio-segmento-R {
  width: 100%;
  display: flex;
  gap: 2%;
  text-align: right;
}

.grid{
  display: flex;
  gap: 2em;
  flex-direction: column;
  padding: 3% 3% 3% 3%;
}

.elemento {
  overflow: hidden;
}

.segundo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: 100%;
  background-position: 0%;
  overflow: hidden;
  text-align: left;
  
}
.segundo h2{
  margin: 2% 0 2% 0;
  font-weight: 400;
  font-size: clamp(18px, 6vw, 48px)
}
.segundo h4 {
  text-align: left;
}

.segunda {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  background-size: 100%;
  background-position: 0%;
  overflow: hidden;
}
.segunda h2{
  margin: 2% 0 2% 0;
  font-weight: 400;
  font-size: clamp(18px, 6vw, 48px)  
}
.segunda h4 {
  text-align: left;
}

.seg {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
  padding: 2em 0% 2em 0%;
}

.seg img{
  width: 100%;
}

.segsub {
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
  width: 50%;
}

.segsub img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1em;
  overflow: hidden;
}

.shape{
  aspect-ratio: 1 / 1;
}
/* ------------------ Tres Bloco ----------------- */






/* ------------------ Quatro Bloco ----------------- */
.segundosg2 {
  width: 100%;
  background-color: #e7e7e7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1em;
  overflow: hidden;
  padding: 5% 10% 5% 10%;
  text-align:left
}

.segundosg2 h1{
  font-weight: 200;
}

.segundosg2 img{
  border-radius: 1em;
}


.meio-segmento {
  width: 100%;
  display: flex;
  gap: 5%;
}

.seg802 {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.seg802 img{
  width: 100%;
}

.seg802 h1{
  word-wrap: break-word;
  overflow-wrap: break-word;
}





.selo {
  width: 15%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.selo img{
  width: 100%;
}








/* ------------------ Quatro Bloco ----------------- */






.textofora {
  text-align: center;
  margin-top: 5%;
}

.textofora h1 {
  font-weight: 200;
}

.instalacao {
  width: 100%;
  background-color: #e7e7e7;
  border-radius: 1em;
  overflow: hidden;
  padding: 5% 5% 5% 5%;
  text-align: center;
  color: #515960;
}

.instalacao h1{
  font-weight: 200;
}

.instalacao h2{
  font-weight: 500;
  margin: 1em 0 1em 0;
}

.instalacao h3 {
  color:#99a1a8;
}




.particao {
  background-color: #ffffff;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding: 1em;
}

.esquema {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin-top: 1em;
  margin-bottom: 1em;
}

.linha {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.linha2 {
  position: relative;
  width: 100%;
  display: flex;
  text-align: left;
  gap: 1em;
  padding: 0 3em 0 3em;
}

.texto50 {
  width: 50%;
  font-family: Input Mono;
  color:#99a1a8
}




.item50 {
  width: 50%;
}

.item50 img{
  width: 100%;
}




/* ------------------ Quinto Bloco ----------------- */




/* ------------------ Sexto Bloco ----------------- */

.frame{
  grid-column: span 4;
  aspect-ratio: 4 / 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cvideo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cvideo iframe {
  margin: 1em;
  border-radius: 1em;
  outline: 3px solid #cecdcd;
  outline-offset: 1em;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ------------------ Sexto Bloco ----------------- */




/* ------------------ Sete Bloco ----------------- */
.particao2 {
  background-image: url('Ativo\ 4.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding: 10%;
  text-align: center;
}
.particao2 h1{
    font-size: clamp(30px, 4vw, 80px);
    font-weight: 500;
}



.linha3 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2em;
}


.item30 {
  width: 100%;
  border-radius: 1em;
  overflow: hidden;
}

.item30 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1em;
  overflow: hidden;
}








.caixa-branca {
  background-color: #ffffff;
  border-radius: 1em;
  gap: 1em;
  padding: 1em;
    text-align: left;
}

.table-container{
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  aspect-ratio: 4 / 2;
  width: 100%;
  align-items: center;
  justify-content: center;
}

table{
  width: 100%;
  border-collapse: collapse;
}

thead th{
  text-align: left;
  padding: 18px 10px;
  font-weight: 500;
  border-bottom: 1px solid #c7c7c7;
}

tbody td{
  padding: 18px 10px;
  border-bottom: 1px solid #d9d9d9;
}

tbody tr:last-child td{
  border-bottom: 1px solid #c7c7c7;
}

.dica{
  margin-top: 18px;
  margin-bottom: 2%;
}





.capacidade{
    width: 100%;
}

.capacidade h2{
  font-size: clamp(21px, 1vw, 24px);
  margin: 5% 0 2% 0;
  font-weight: 500;
}



.capacidade-grid{
    display: flex;
    gap: 1em;
}



.item{
    width: 30%;
    margin-bottom: 5%;
}


.item h3{
    font-size: clamp(18px, 1vw, 18px);
    font-weight: 500;
    font-family: Articulat CF;
}

.item p{
    margin: 5px 0;
    line-height: 1.5;
    font-size: clamp(12px, 1vw, 14px);
}

.item strong{
    display: block;
    margin-top: 12px;
}

.rodape {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  padding: 0 1em 0 1em;
}

.logo-footer{
  width: 20%;
  min-width: 100px;
}

.logo-footer img {
  width: 100%;
}

/* ------------------ Sete Bloco ----------------- */



@media (max-width: 1000px){
  .cvideo iframe {
  outline-offset: 10px;
}
}

@media (max-width: 550px){

  .instalacao h2{
  margin: 3% 0 3% 0;
}

.linha2 {
  padding: 0 1em 0 1em;
}




  .capacidade-grid{
    flex-direction: column;
}
.item {
    width: 100%;
}

.linha {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.item50 {
    width: 100%;
    margin-bottom: 0%;
}


}