/* ===== FONTES ===== */
@font-face {
    font-family: 'arkit-light';
    src: url('../arkit-light.ttf') format('truetype'),
         url('../arkit-light.woff') format('woff'),
         url('../arkit-light.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arkit-regular';
    src: url('../arkit-regular.ttf') format('truetype'),
         url('../arkit-regular.woff') format('woff'),
         url('../arkit-regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arkit-bold';
    src: url('../arkit-bold.ttf') format('truetype'),
         url('../arkit-bold.woff') format('woff'),
         url('../arkit-bold.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acumin-pro-extra-condensed-black';
    src: url('../acumin-pro-extra-condensed-black.ttf') format('truetype'),
         url('../acumin-pro-extra-condensed-black.woff') format('woff'),
         url('../acumin-pro-extra-condensed-black.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}   

@font-face {
    font-family: 'acumin-pro-extra-condensed';
    src: url('../acumin-pro-extra-condensed.ttf') format('truetype'),
         url('../acumin-pro-extra-condensed.woff') format('woff'),
         url('../acumin-pro-extra-condensed.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}   

/* ===== RESET E ESTILOS GLOBAIS ===== */
* {
    margin: 0 auto;
    padding: 0;
    font-family: 'arkit-light';
    text-align: center;
    box-sizing: border-box;
}

a:link, a:visited {
    text-decoration: none;
    color: #000;
}

.barra-de-cima {
    padding:8px 40px ;
    background-color: #ecae07;
    width: 100%;
    height: 45px;
    line-height: 1;
    font-family: 'arkit-regular';
    font-size: 16px;
    color: black;
    font-weight: bold;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center; /* Se quiser centralizar horizontalmente também */
}

.primeira-dobra {
            position: relative;
            height: 80vh;
            min-height: 600px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .imagem-de-fundo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('top.jpg') right center / cover no-repeat;
        }
        #celular{display: none;}
        
        .conteudo-sobreposto {
            position: relative;
            z-index: 10;
            max-width: 600px;
            margin-left: 13%;
                       text-align: left;
        }

        .conteudo-sobreposto h1 {
            font-family: 'acumin-pro-extra-condensed';
            text-align: left;
            font-size: 50px;
            letter-spacing: 1px;
            font-weight: bold;
            color: black;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        .conteudo-sobreposto p {
            font-family: 'arkit-regular';
            text-align: left;
            font-size: 25px;
            color: black;
            margin-bottom: 30px;
            line-height: 1.1;
            margin-right: 20%;

        }

        .botao-compra {
            font-family: 'acumin-pro-extra-condensed-black';
            display: block;
            padding: 18px 0 14px 0;
            background: linear-gradient(00deg, #cf9800, #ffc831);
            font-size: 40px;
            text-align: center;
            border-radius: 12px;
            transition: all 0.5s ease;
            text-transform: uppercase;
            letter-spacing: 0;
            margin-right: 20%;
        }

        .botao-compra:hover {
           
        
        }

        .informacoes-preco {
            font-family: 'acumin-pro-extra-condensed-black';
            text-align: center;
            margin-top: 5px;
            font-size: 40px;
            color: black;
             margin-right: 20%;
          
        }

        /*Fim da primeira dobra*/

        .secao-caracteristicas {
            width: 100%;
            min-height: 80vh;
            display: flex;
        }

        .lado-esquerdo, .lado-direito {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            transform: translateZ(0);
        }

        .container-slideshow {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
        }

        .slide.active {
            opacity: 1;
        }

        .slide-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .placeholder-slide {
            width: 100%;
        }

        .conteudo-caracteristicas {
            max-width: 500px;
        }

        .titulo-caracteristicas {
            font-family: 'acumin-pro-extra-condensed-black';
            font-size: 40px;
            font-weight: bold;
            margin: 10px 0 20px 0;
            text-align: left;
            color: black;
            
        }

        .lista-caracteristicas {
            list-style: none;
            
        }

        .item-caracteristica {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            padding: 5px 15px;
        }

        .icone-caracteristica {
            width: 20px;
            height: 20px;
            margin-right: 15px;
              margin-left: -50px;
        }

        .texto-caracteristica {
            font-family: 'arkit-regular';
            font-size: 18px;
            flex: 1;
            line-height: 1.3;
            text-align: left;
        }

        .texto-caracteristica strong {
            font-family: 'arkit-regular';
            font-size: 18px;
            font-weight: bold;
            flex: 1;
            
            text-align: left;
        }

        .descricao-caracteristica {
            color: black;
            font-size: 0.95rem;
        }

        .indicadores-slide {
            
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            display: none;
        }

        .indicador {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
            cursor: pointer;
            display: none;
        }

        .indicador.active {
            background: white;
            transform: scale(1.2);
            display: none;
        }


        .ssa{
    background-image: url("../fundo-ssa.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    color: white;
    padding: 40px 0 60px 0;
    min-height: 600px;
}

#video {
    height: 80vh;
	width: auto;
    aspect-ratio: 9/16;
    margin-top: 20px; 
    border-radius: 6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-webkit-border-radius:6px;
	border: #e6e6e6 3px solid;
	box-sizing: border-box;
}
.titulo-video {
  
            font-family: 'acumin-pro-extra-condensed-black';
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 10px;
}



/* ===== FAQ ===== */

.line {
    clear: both;
    position: relative;
    margin: 0 auto;
    border-top: 2px solid #2a2a2a;
    width: 35%;
    margin-bottom: 40px;
}

.titulo-faq{
    font-family: 'acumin-pro-extra-condensed-black';
            font-size: 50px;
            font-weight: bold;
            margin: 40px 0 0px 0;
}

.accordion {
	background-color: #cfcdcd;
	color: #000;
	cursor: pointer;
	padding: 5px 20px;
		border: none;
	border-radius: 15px;
	text-align: left;
	outline: none;
	transition: 0.4s;
  }
mark {
    font-family: 'arkit-regular';
    background-color: #cfcdcd;
}
  .accordion p{
    font-family: 'arkit-regular';
	  font-size: 22px;
	  text-align: left;
      margin-top: 15px;
      
  }
  .active, .accordion:hover {
	  box-shadow: 0px 0px 20px rgb(201, 201, 201);
  
}

.accordion:after {
	content: '\002B';
    font-family: 'arkit-regular';
	color: black;
	font-size:22px;
    margin-top: -8px;
	float: right;
	margin-left: 5px;
  }

.active:after {
	content: "\2212";
  }
  .panel, .accordion{
    width: 60%;
  } 
  .panel {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	margin-bottom:10px;
    
  }
  
  .panel p{
    text-align: left;
    font-family: 'arkit-light';
	  font-size:24px;
	  margin:20px 0 15px 0;
	  float:left;
    line-height: 1.3;
		  }

.faq{
    margin-bottom: 60px;
}

          /* ===== FAQ ===== */


          /* ===== RODAPÉ ===== */
.rodape {
    line-height: 1.1;
    background-color: #000;
    box-sizing: border-box;
    border: 40px solid black;
    border-bottom: 10px solid black;
}

.rodape-content {
    display: grid;
    grid-template-columns: 20% 60% 20%; /* Mais espaço para o texto */
    grid-template-areas: 
        "logo text social"
        "spacer-desktop spacer-desktop spacer-desktop"
        "spacer-mobile spacer-mobile spacer-mobile";
    align-items: start;
    gap: 20px;
    padding: 0 2%; /* Reduz padding nas laterais */
}

.logo-section {
    grid-area: logo;
    margin-left: 3%; /* Reduz a margem já que temos padding no container */
    margin-top: 20px; /* Reduz a margem superior */
}

.logorodape {
    display: block;
}

.text-section {
    grid-area: text;
    align-self: start;
    justify-self: center; /* Centraliza a div horizontalmente */
    width: 100%; /* Ocupa toda a área disponível */
    display: flex;
    justify-content: center; /* Centraliza o conteúdo */
    margin-top: 20px; /* Alinha com a logo */
}

.social-section {
    grid-area: social;
    justify-self: end;
    margin-top: 20px; /* Alinha com a logo e texto */
}

.rodape p {
    font-family: 'arkit-light';
    font-size: 18px;
    width: 100%; /* Remove a limitação de 30% */
    color: #fff;
    line-height: 1.2;
    margin: 0; /* Remove margens padrão para melhor controle */
    text-align: left; /* Garante que o texto fique alinhado à esquerda */
}

.text-section p {
    text-align: center; /* Centraliza o texto principal */
}



#desktop {
    grid-area: spacer-desktop;
}

#celular {
    grid-area: spacer-mobile;
}


.botao-central {
    position: relative;
    width: 480px;
    margin-left: -240px;
    left: 50%;
    margin-bottom: 50px;
}


.botao-central .botao-compra,
.botao-central .informacoes-preco {
    margin-right: 0;
}

@media only screen and (max-width: 600px) {
   .primeira-dobra {
       display: block;
       width: 100%;
       height: auto;
       min-height: 500px;
       padding: 20px 0;
   }

   .conteudo-sobreposto {
       margin-left: 0;
       max-width: 90%;
       margin: 0 auto;
       text-align: center;
   }

   .conteudo-sobreposto h1 {
       width: 80%;
       font-size: 30px;
       font-family: 'acumin-pro-extra-condensed-black';
       letter-spacing: -1px;
       line-height: 1;
       margin: 0 auto;
       text-align: center;
       margin-bottom: 15px;
   }

   .conteudo-sobreposto p {
    width: 80%;
       font-size: 18px;
       text-align: center;
       margin: 0 auto;
   }

   .botao-compra {
       font-size: 28px;
       padding: 15px 0 12px 0;
       margin-right: 0;
   }

   .informacoes-preco {
       font-size: 24px;
       margin-right: 0;
   }

   .secao-caracteristicas {
       flex-direction: column;
       min-height: auto;
   }

   .lado-esquerdo, .lado-direito {
       width: 100%;
       
   }
.lado-direito {
    padding: 30px;
}
   .container-slideshow {
       height: 50vh;
       min-height: 300px;
   }

   .titulo-caracteristicas {
       font-size: 30px;
       text-align: center;
       margin-bottom: 20px;
   }

   .item-caracteristica {
       padding: 5px 0;
       margin-bottom: 20px;
   }

   .icone-caracteristica {
       margin-left: 0;
       margin-right: 10px;
   }

   .texto-caracteristica {
       font-size: 16px;
   }

   .texto-caracteristica strong {
       font-size: 16px;
   }

   .ssa {
       padding-bottom: 0;
       min-height: auto;
   }

   .titulo-video {
       font-size: 30px;
       margin-bottom: 5px;
   }

   #video {
       width: 80%;
       min-height: auto;
       margin-bottom: 50px;
   }

   .titulo-faq {
       font-size: 30px;
       margin: 30px 0 0 0;
   }

   .panel, .accordion {
       width: 85%;
   }

   .accordion p {
       font-size: 18px;
       line-height: 1;
   }

   .panel p {
       font-size: 18px;
   }

   .botao-central {
       width: 90%;
       margin-left: -45%;
       margin-bottom: 40px;
   }

   .rodape-content {
       display: block;
              
   }

   
.logorodape{
    width: 140px;
    height: auto;
    margin-bottom: 5px;
}


.logo-section, .social-section {
      margin: 0 auto;
   }

.text-section{
    margin: 20px 0;
}


.rodape p {
       font-size: 14px;
       text-align: center;
   }
.rodape {
    border-bottom: 40px solid black;
}
   
.social-section img {
    width: 60px;
    height: auto;
    margin-top: 6px;
}
   

   .barra-de-cima {
       padding: 8px 40px;
       font-size: 14px;
       height: auto;
   }

.imagem-de-fundo {
    background: linear-gradient(45deg, #f4f4f4 0%, #edeaea  50%, #dddddd 100%);
}

#celular{display: block;
width: 100%;
height: auto;
margin-top: -15px;
}

}