/* Variables css*/
:root{
    /* Colors */
    /* Color mode HSL(hue, saturation, lightness)*/
    /*
        blue    :   hsl(224, 69%, 14%)
        red     :   hsl(0, 100%, 43%)
        gray    :   hsl(0, 0%, 98%)
        green   :   hsl(100, 83%, 41%)
        yellow  :   HSL(52, 100%, 50%)
    */

    --hue: 213;
    --sat: 47%;
    --lig: 26%;

    --brand-color1: hsl(var(--hue), var(--sat), var(--lig)) ;
    --brand-color2: hsl(359, 100%, 71%);
    --brand-color2-light: hsl(359, 100%, 90%);
    --gray-color: hsl(0, 8%, 95%);
    --title-color: hsl(var(--hue), var(--sat), var(--lig));
    --text-color: hsl(var(--hue), 15%, 45%);
    --text-color-light: hsl(var(--hue), 8%, 75%);
    --text-color-lighten: hsl(var(--hue), 8%, 92%);
    --body-color: hsl(var(--hue), 100%, 99%);
    --container-color: #fff;
    --attention-color-red: hsl(0, 100%, 43%);
    --attention-color-green: hsl(120, 60%, 48%);
    --attention-color-green-shadow: hsl(120, 60%, 32%);
    --attention-color-yellow: hsl(47, 100%, 52%);

    /* Font and typography */
    /* .5rem = 8px / 1rem = 16px */
    --body-font: 'system-ui', sans-serif;
    --header: 5.8rem;
    --title: clamp(2.6rem, 3.8vw, 4.2rem);
    --subtitle: clamp(2rem, 2.4vw, 2.8rem);
    --subtitle-h4: clamp(1.8rem, 2.2vw, 2.4rem);
    --body-text: clamp(1.6rem, 1.8vw, 2rem);
    --details: clamp(1.4rem, 1.6vw, 1.8rem);
    --smallest: clamp(1rem, 1.2vw, 1.4rem);

}

*,
*::after,
*::before{
    list-style:none;
    text-decoration:none;
    margin:0;
    padding:0;
    text-align:left;
    border:0;
    outline-color:#ccc;
    color: var(--brand-color1);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size:62.5%;
    font-family: var(--body-font);
    font-display:optional;
}
html{
    max-width: 1920px;
    margin: auto;
    scroll-behavior: smooth;
    direction: ltr;
}

h1{
    font-size: var(--header);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
}
h2{
    font-size: var(--title);
    font-weight: 700;
}
h3{
    font-size: var(--subtitle);
    font-weight: 600;
}
h4{
    font-size: var(--subtitle-h4);
    font-weight: 500;
}
p{
    font-size: var(--body-text);
    line-height: 160%;
}
li{
    font-size: var(--body-text);
}
a{
    font-size: var(--body-text);
    font-weight: 500;
}
img{
    width: 100%;
    height: auto;
}
span{
    font-size: inherit;
}
strong{
    font-size: inherit;
}
details{
    font-size: var(--subtitle-h4);
}
summary{
    font-size: var(--body-font);
    font-weight: 500;
}
b{
    font-size: inherit;
}
button {
    width: max-content;
    height: 6.4rem;
    padding: 0 2rem;
    color: #FFFFFF;
    border-radius: 0.8rem;
    font-size: var(--body-text);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    background: var(--brand-color1);
    outline: none;
    border: none;
    cursor: pointer;
    transition: background-color .4s ease;
    transition: box-shadow .4s ease;
    box-shadow: 0px 1.25rem 40px -11px var(--brand-color1);
}
button:hover {
    background-color: bluee;
    box-shadow: 0px 1.25rem 40px -11px var(--brand-color1);
    color: #ffffff;
}
.icon-stars {
    width: 2rem;
    height: 2rem;
    stroke-width: 0;
    stroke: currentColor;
    fill: var(--attention-color-yellow);
}
.icon-baixo {
    width: 6.4rem;
    height: 5rem;
    stroke-width: 0;
    stroke: currentColor;
    fill: var(--brand-color2-light);
}
.logo {
    width: 24.9rem;
    height: 6rem;
    stroke-width: 0;
    stroke: currentColor;
    fill: var(--brand-color2-light);
}

section{
    padding-top: 4rem;
    padding-bottom: 6rem;
}
.container{
    display: grid;
    width: min(100% - 10%, 1280px);
    margin-inline: auto;
    gap: 2.4rem;
}

section.banner-hero img{
    max-width: max-content;
    object-fit: contain;
    max-height: 100vh;
    object-position: center;
}
.s-video {
    padding-top: 7.2rem;
    padding-bottom: 7.2rem;
}
.s-video h2{
    text-align: center;
}
.youtube-video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .youtube-video-container::after {
    display: block;
    content: "";
    padding-top: 56.25%;
  }
  
  .youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  Calculatin

section.s-chamada .container h2{
    text-align: center;
}
section.s-chamada .container h2 b{
    color: var(--brand-color2);
}

section.s-pain{
    background-color: var(--brand-color1);

}

section.s-pain .container .pain_title h2,
section.s-pain .container .pain_title h3{
    color: #fff;
    text-align: center;
    margin-top: 2.4rem;
}
section.s-pain .container .pain_title h2 b,
section.s-pain .container .pain_title h3 b{
    color: var(--attention-color-yellow);
}
section.s-pain .container .pain-content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, auto));
    margin-top: 6.4rem;
    gap: 2.4rem;
    justify-items: center;
}
section.s-pain .container .pain-content .pain-item{
    display: grid;
    max-width: max-content;
    object-fit: contain;
}
section.s-pain .container .pain-content .pain-item img{
    object-fit: contain;
    object-position: center;
}

section.s-chega .container .chega-title h2,
section.s-chega .container .chega-title h3 {
    text-align: center;
    margin-top: 2.4rem;
}
section.s-chega .container picture {
    margin: auto;
    margin-top: 4rem;
}
section.s-chega .container img{
    object-fit: contain;
    object-position: center;
    max-width: max-content;
}
section.s-altura_regulavel .container .altura_regulavel-title h2,
section.s-altura_regulavel .container .altura_regulavel-title h3{
    text-align: center;
}
section.s-altura_regulavel .container .content-altura_regulavel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4rem;
}
section.s-altura_regulavel .container .content-altura_regulavel img{
    max-width: max-content;
    max-height: 364px;
    object-fit: contain;
    object-position: center;
    justify-self: flex-end;
}
section.s-altura_regulavel .container .content-altura_regulavel .altura_regulavel_items{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
section.s-altura_regulavel .container .content-altura_regulavel .altura_regulavel_items .altura_regulavel_item{
    display: flex;
    gap: 1rem;
    align-items: center;
}
section.s-altura_regulavel .container .content-altura_regulavel .altura_regulavel_items .altura_regulavel_item p{
    font-weight: 600;
}
section.s-altura_regulavel .container .content-altura_regulavel .altura_regulavel_items .altura_regulavel_item img{
    max-width: 6.4rem;
}
section.s-travesseiro-tec .container{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
section.s-travesseiro-tec .container img{
    max-width: max-content;
    max-height: 369px;
    object-fit: contain;
}
section.s-travesseiro-tec .container ul li{
    margin-top: 2.4rem;
}

section.s-google .container .google-title{
    margin: auto;
    width: 100%;
    max-height: 25.6rem;
    display: flex;
    flex-direction: column;
    grid-auto-rows: max-content;
    justify-content: center;
}
section.s-google .container .google-title h2{
    text-align: center;
    margin-bottom: 2.4rem;
}
section.s-google .container .google-title p{
    text-align: center;
}
section.s-google .container .content_recomend{ 
    align-content: center;
    background: transparent;
    padding: 0; 
    display: grid;
    overflow: hidden;
    justify-content: center;
}
section.s-google .container .content_recomend figure {
overflow: auto;
scroll-snap-type: x mandatory;
border-radius: .8rem;
}
section.s-google .container .content_recomend img {
scroll-snap-align: start; 
border-radius: .6rem;
margin-bottom: 15px;
width: max-content;
object-fit: contain;
height: 512px;
margin-right: .8rem;
}
section.s-google .container .content_recomend figure {
align-content: center;
border:none;
background-color: transparent;
display: grid;
grid: auto / repeat(7, auto);
grid-gap: 1em;
}

section.s-depoimentos .container .depoimentos-title h2,
section.s-depoimentos .container .depoimentos-title h3{
    text-align: center;
    width: 100%;
    max-width: 96rem;
    margin: auto;
    margin-top: 2.4rem;
}
section.s-depoimentos .container .content-depoimentos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33vh, 1fr));
    gap: 2.4rem;
    justify-items: center;
    align-items: stretch;
}
section.s-depoimentos .container .content-depoimentos iframe{
    max-width: fit-content;
    max-height: 19vh;
    object-fit: contain;
    border-radius: .8rem;
}

section.s-offer .container .offer-title h2{
    text-align: center;
    font-weight: 400;
}
section.s-offer .container .offer-title h3{
    text-align: center;
    font-weight: 700;
    font-size: var(--title);
    margin-top: 2.4rem;
}
section.s-offer .container .offer-title h3 b{
    color: var(--brand-color2);
}
section.s-offer .container .content-offer{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    justify-items:center;
    justify-content: space-between;
    margin-top: 3.2rem;
}
section.s-offer .container .content-offer li img{
    max-width: 28rem;
    max-height: max-content;
    object-fit: contain;
}
section.s-offer{
    background-color: var(--gray-color);
}
section.s-offer .container .selos{
    max-width: max-content;
    max-height: 3.7rem;
    object-fit: contain;
    justify-self: center;
    margin-top: 2.4rem;
}
section.s-faq .container h2{
    text-align: center;
}
section.s-faq .container .content-faq{
    width: 100%;
    max-width: 96rem;
    justify-self: center;
}
section.s-faq .container .content-faq details{
    margin-top: 2.4rem;
    width: 100%;
}
section.s-faq .container .content-faq details p{
    padding: 0 2rem
}
section.s-faq .container .content-faq summary{
    display: block;
    margin-top: 2.4rem;
    padding: 1.6rem 2rem;
    border-radius: .8rem;
    background-color: var(--gray-color);
    cursor: pointer;

}

footer{
    padding-top: 4rem;
    padding-bottom: 6rem;
    background-color: var(--brand-color2);
}
footer .logo{
    margin: auto;
}
footer p{
    text-align: center;
    color: #fff;
}
footer nav ul{
    width: 100%;
    display: flex;
    gap: 4rem;
    justify-content: center;
}
footer nav ul li a{
    color: #fff;
    font-weight: 600;
}
footer .container p a{
    color: #fff;
    font-weight: 600;
}
footer .whatsapp img{
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}
/* Página de obrigado */
.s-banner-obrigado{
    display: grid;
    padding-top: 6.4rem;
    padding-bottom: 6.4rem;    
    vertical-align: middle;
}
.s-banner-obrigado .container{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
.s-banner-obrigado .content_congratulations h2{
    font-size: clamp(4.5rem, 8vw, 6rem);
    text-transform: uppercase;

}
.s-banner-obrigado .content_congratulations h3{

    font-weight: 500;
}
.s-banner-obrigado .content_congratulations p{

    font-weight: 400;
}
.s-banner-obrigado .content_image{
    display: grid;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: flex-end;
}
.s-banner-obrigado .content_image img{
    max-height: 384px;
    object-fit: contain;
    max-width: max-content;
}

/* página de erro 404*/
.s-404{
    display: grid;
    width: 100vw;
    height: 100vh;
    place-content: center;
}
.s-404 .container h2{
    font-size: 15vw;
}
.s-404 .container h3{
    text-align: center;
    
}

/* Página de erro 404 */
section.s-404 .container{
    place-items: center;
}
/* página de aprovação */
section.s-aprovacao .container{
    place-items: center;
}
/*página de boleto */
section.s-boleto .container{
    place-items: center;
}
/*página de obrigado */
section.s-obrigado .container{
    place-items: center;
}
/*página de pix */
section.s-pix .container{
    place-items: center;
}
/*página de politica */
section.s-btn .container{
    place-items: center;
}