@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

html {scroll-behavior: smooth;}
* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Nunito Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 24px}
body {font-size: 24px; overflow-x: hidden; position: unset!important; color: var(--bordo); font-weight: 400; color: var(--preto);}
p {line-height: 32px; margin-bottom: 15px; color: var(--preto);}
a,button, input, textarea {-webkit-transition: .3s;-o-transition: .3s;transition: .3s; outline: 0;}
button {cursor: pointer;}
cite {font-style: normal;}
strong, b {font-size: inherit; font-weight: inherit;}
a, a:hover {text-decoration: none;}
a:focus, button:focus, input:focus, textarea:focus {outline: 0; text-decoration: none;}
ul {-webkit-padding-start:0; -moz-padding-start:0; margin: 0;}
li {list-style-type: none;}
img {max-width: 100%;}
section{padding: 50px 0;}
.grid {max-width: 1260px; width: 100%; margin: 0 auto; padding: 0 30px; display: grid; grid-gap: 0px; position: relative; flex-wrap: wrap;}

:root {
    --laranja: #FF6900;
    --preto: #000;  
    --cinza: #444;   
    --branco: #fff;
    --cinzaC: #d7d7d7;
    --azul: #007bff;
}

address {
    background: var(--laranja);
    padding: 12px 0;
}
address ul {
    display: flex;
    justify-content: center;
    gap: 30px;
}
address ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--branco);
}


header {
    border-bottom: 1px solid var(--cinzaC);
    padding: 20px 0;
}
header .grid {
    grid-template-columns: max-content max-content max-content;
    justify-content: space-between;    
    align-items: center;
}
header .grid > a {
    display: flex;
    align-items: center;
}
header ul {
    display: flex;
    align-items: center;
    gap: 40px;
}
header ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--preto);
}
header ul li a:hover {
    color: var(--laranja);
}
header .grid > div:nth-child(3) {
    display: flex;
    gap: 20px;
    align-items: center;    
}
header .grid > div:nth-child(3) > a {
    display: flex;
    align-items: center;
    gap: 8px;
}
header .grid > div:nth-child(3) > a > span {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: var(--cinza);
}
header .grid > div:nth-child(3) > a > span b {
    font-weight: 700;
    font-size: 24px;
    margin-top: -4px;    
    color: var(--preto);
}
header ol {
    display: flex;
    gap: 18px;    
}



section.banner {
    border-bottom: 1px solid var(--cinzaC);    
}
section.banner h1 {
    font-size: 56px;
    text-align: center;
    line-height: 66px; 
    margin: -10px 0 10px;   
}
section.banner h1 b {
    color: var(--laranja);
}
section.banner h2 {
    text-align: center;
    margin-top: 30px;
    font-size: 36px;    
}
section.banner h2 b {
    color: var(--laranja);
}
section.banner p {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 5px 0 35px;
}
section.banner video {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: auto;
    border-radius: 12px;
}
section.banner a {
    display: flex;
    align-items: center;
    justify-self: center;
    background: var(--laranja);
    width: max-content;
    padding: 15px 60px;
    border-radius: 12px;
    gap: 15px;
    color: var(--branco);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 30px;
}
section.banner a img {
    filter: brightness(0) invert(1);
}



section.opcoes .grid {
    display: flex;
    justify-content: space-between;
}
section.opcoes p {
    font-size: 16px;
    color: var(--cinza);
    display: flex;
    flex-direction: column;
}
section.opcoes p strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--preto);
}
section.oferta {
    padding: 0;
}
section.oferta .grid div {
    background: var(--preto);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
    position: relative;
}
section.oferta .grid div p {
    font-size: 36px;
    font-weight: 700;
    color: var(--branco);
    margin: 0;
}
section.oferta time {
    position: absolute;
    right: 20px;    
    color: var(--branco);
}
section.oferta time b {
    background: var(--branco);
    color: var(--preto);
    padding: 8px;
    font-weight: 700;
    border-radius: 8px;
}



section.produtos .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 40px;
}
section.produtos .grid > div {
    position: relative;
}
section.produtos span {
    position: absolute;
    font-size: 14px;
    color: var(--branco);
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: var(--azul);
    font-weight: 700;
    align-items: center;
    margin: auto;
    left: 0;
    right: 0;
    width: max-content;
    border-radius: 8px;
    text-transform: uppercase;
}
section.produtos span:empty {
    display: none;
}
section.produtos figure {
    width: 100%;
    height: 300px;
    background-size: contain;
    background-position: center;    
    background-repeat: no-repeat;
}
section.produtos h2 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
}
section.produtos p {
    font-size: 16px;
    font-weight: 400;
    color: var(--cinza);
    text-align: center;
}
section.produtos a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--laranja);
    width: 100%;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    gap: 8px;
    color: var(--branco);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}    
section.produtos a img {
    filter: brightness(0) invert(1);
    width: 20px;
}



section.assistencia .grid {
    grid-template-columns: .75fr 1fr;
    gap: 40px;
}
section.assistencia figure {
    height: 500px;
    width: 100%;
    background-image: url('../img/assistencia.png');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}
section.assistencia .grid > div {
    background: var(--preto);
    padding: 60px;
    border-radius: 12px;
}
section.assistencia h2 {
    font-size: 36px;
    color: var(--branco);   
    margin-bottom: 10px; 
}
section.assistencia h2 b {
    color: var(--laranja);
}
section.assistencia p {
    color: var(--branco);
    font-size: 20px;
    margin-bottom: 20px;
}
section.assistencia ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}
section.assistencia ul li {
    color: var(--branco);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
section.assistencia a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--laranja);
    width: max-content;
    text-align: center;
    padding: 15px 35px;
    border-radius: 12px;
    gap: 8px;
    color: var(--branco);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}
section.assistencia a img {
    filter: brightness(0) invert(1);
    width: 20px;
}


section.avaliacoes h2 {
    font-size: 36px;
    text-align: center;    
}
section.avaliacoes h3 {
    color: var(--cinza);
    text-align: center; 
    font-weight: 400;       
}
section.avaliacoes .grid > i {
    background-image: url('../img/estrela.png');
    width: 250px;
    height: 50px;
    background-position: center;
    background-size: contain;
    margin: 10px auto;    
}
section.avaliacoes .grid > span {
    text-align: center;
    color: var(--cinza);
}
section.avaliacoes .grid > span b {
    font-weight: 700;
    color: var(--preto);
}
section.avaliacoes img {
    margin: 10px auto 0;    
}
section.avaliacoes .grid:nth-child(2) {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
section.avaliacoes blockquote {
    padding: 30px;
    border: 1px solid var(--cinzaC);
    border-radius: 12px;    
}
section.avaliacoes blockquote div {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}
section.avaliacoes blockquote div figure {
    width: 52px;
    height: 52px;
    background-size: cover;
    background-position: center;
}
section.avaliacoes blockquote div i {
    background-image: url('../img/estrela.png');
    width: 132px;
    height: 22px;
    background-size: contain;
    display: flex;
    margin-left: -3px;
}
section.avaliacoes blockquote div figcaption {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;    
}
section.avaliacoes blockquote div span {
    display: flex;
    align-items: center;    
    gap: 10px;
}
section.avaliacoes blockquote div span b {
    font-size: 16px;
    font-weight: 500;
    color: var(--cinza);    
    padding-top: 3px;    
}
section.avaliacoes blockquote p {
    font-size: 20px;
    color: var(--cinza);
    line-height: 28px;    
    margin-bottom: 0;
}



section.unidades .grid:nth-child(1) h2 {
    font-size: 36px;
    text-align: center;    
}
section.unidades .grid:nth-child(1) h2 b {
    color: var(--laranja);
}
section.unidades .grid:nth-child(1) h3 {
    color: var(--cinza);
    text-align: center;
    font-weight: 400;
    margin-bottom: 40px;
}


section.unidades .grid:nth-child(2) {
    grid-template-columns: 1fr;
}
section.unidades .grid:nth-child(2) article {
    background: var(--preto);
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 50px;
    border-radius: 12px;
    justify-content: center;
    text-align: center;    
}
section.unidades .grid:nth-child(2) article b {
    font-size: 36px;
    font-weight: 700;
    color: var(--laranja);
    display: flex;
    margin-top: -10px;  
    justify-content: center;      
}
section.unidades .grid:nth-child(2) article ul li {
    font-weight: 300;
    color: var(--branco);
}
section.unidades .grid:nth-child(2) article a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--laranja);
    width: max-content;
    text-align: center;
    padding: 15px 35px;
    border-radius: 12px;
    gap: 8px;
    color: var(--branco);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    margin: 15px auto 0;
}
section.unidades iframe {
    margin-top: 30px;
    width: 100%;
    height: 400px;
    border-radius: 12px;
}



section.pagamento {
    border-top: 1px solid var(--cinzaC);
    border-bottom: 1px solid var(--cinzaC);    
    padding: 25px 0;
}
section.pagamento h2 {
    font-size: 36px;
}
section.pagamento .grid {
    grid-template-columns: max-content 1fr;
    gap: 50px;
    align-items: center;    
}


footer {
    padding: 50px 0;
}
footer .grid {
    grid-template-columns: 1fr max-content max-content ;
    gap: 60px;
}
footer b {
    display: flex;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}
footer p {
    color: var(--cinza);
    font-size: 20px;
    margin-bottom: 8px;
}
footer ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
footer ul li a {
    font-size: 20px;
    color: var(--cinza);
}
footer .grid div:nth-child(3) ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
footer .grid div:nth-child(3) ul li:nth-child(1),
footer .grid div:nth-child(3) ul li:nth-child(2) {
    font-size: 36px;
    font-weight: 700;
    color: var(--cinza);
}
footer .grid div:nth-child(3) ul li a {
    font-size: 24px;
    font-weight: 700;
    color: var(--preto);
}



.creditos {
    background: var(--laranja);
    padding: 20px 0;
}
.creditos .grid {
    grid-template-columns: max-content max-content;
    justify-content: space-between;    
}
.creditos ul li {
    font-size: 20px;
    color: var(--branco);
}
.creditos a {
    font-size: 20px;
    color: var(--branco);
    display: flex;
    align-items: center;
    gap: 8px;
}