/*
Theme Name: SomVida LP
Theme URI: https://somvida.com.br/
Author: Notoris
Author URI: https://notoris.com.br
Description: Tema desenvolvido por Notoris / Design: Eight
Version: 4.0.3
*/

/* Variables */

:root {    
    --primary-color: #005C74;        
    --secondary-color: #FF8200;
    --whatsapp-color: #5ACF5F;    
    --white-color: #FFF;
    --black-color: #000;          
    --background-color: #FFFFFF;      
    --max-width: 1280px;     
    --vh: 100vh;
}

/* Reset */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html :where(.wp-block) { max-width: none; }

body.somvida { overflow: hidden; overflow-y: auto; line-height: 24px; background-color: var(--background-color); }
body.somvida,
body.somvida input,
body.somvida select,
body.somvida textarea { color: var(--primary-color); font-family: 'Rubik', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; }

a { position: relative; color: var(--primary-color); text-decoration: none; }
a::after { content: " "; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: var(--primary-color); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
a:hover, a:active, a:focus { text-decoration: none; }
a:hover::after { transform: scaleX(1); }

/* Helpers */

.sr-only,
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Layout */

.wp-block-group,
.container { margin: 0 auto; width: 100%; max-width: var(--max-width); }

.btn { display: inline-flex; align-items: center; border: none; }
.btn::after { display: none; }
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-primary,
.btn-secondary,
.wp-block-button .wp-block-button__link { position: relative; display: flex; gap: 10px; margin: 40px auto 0; padding: 17px 19px; width: 450px; max-width: 100%; height: 62px; align-items: center; justify-content: center; color: var(--white-color); text-align: center; font-family: "Merriweather Sans"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 26px; letter-spacing: -0.8px; background: var(--secondary-color); border-radius: 100px; transition: .4s; }

/* Icons */

.icon-instagram,
.icon-facebook,
.icon-google { display: inline-flex; width: 28px; height: 28px; background: transparent url(images/icon-instagram.svg) no-repeat; background-size: 100%; }
.icon-facebook { background-image: url(images/icon-facebook.svg); }
.icon-google { background-image: url(images/icon-google.svg); }
.icon-whatsapp { display: inline-flex; width: 26px; height: 26px; background: transparent url(images/icon-whatsapp.svg) no-repeat; background-size: 100%; }
.icon-star { display: inline-flex; width: 20px; height: 20px; background: transparent url(images/icon-star.svg) no-repeat; background-size: 100%; }

/* Header */

.site-header--landing .container { padding: 16px 0; display: flex; align-items: center; justify-content: space-between; }
.site--brand { display: flex; align-items: center; gap: 20px; }
.site-logo { margin: 0; line-height: 0; } 
.site-logo a { display: block; }
.site-logo a::after { display: none; }
.site-logo img { display: block; height: 57px; width: auto; }
.site-slogan { display: block; width: 200px; font-size: 20px; font-style: normal; font-weight: 500; line-height: 19px; letter-spacing: -1px; }
.header--actions { display: flex; align-items: center; }
.site--social { list-style: none; display: flex; align-items: center; gap: 14px; margin: 0 30px 0 0; padding: 0 30px 0 0; border-right: 1px solid var(--secondary-color); }
.site--social li { display: flex; }
.site--social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.site--social a::after { display: none; }
.site--social a span { display: none; }
.site--social a:hover { opacity: 0.85; transform: translateY(-1px); }
.header--whatsapp { display: flex; align-items: center; gap: 10px; color: var(--whatsapp-color); text-decoration: none; font-size: 26px; font-style: normal; font-weight: 500; line-height: 32px; letter-spacing: -1.083px; white-space: nowrap; transition: opacity 0.2s ease; }
.header--whatsapp::after { display: none; }
.header--whatsapp:hover { opacity: 0.85; }

/* Footer */

.site-footer { margin: 120px 0 60px; }
.site-footer .container {  border-top: 3px solid var(--secondary-color); }
.footer--content { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 30px 0; }
.footer--links { display: flex; align-items: center; justify-content: flex-end; text-align: right; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; }
.footer--copyright { margin: 0 30px 0 0; padding: 0 30px 0 0; border: none; border-right: 1px solid var(--secondary-color); }
.footer--content .site--social { margin: 0 0 0 30px; padding: 0 0 0 30px; border: none; border-left: 1px solid var(--secondary-color); }
.footer--credits { padding: 20px 0; text-align: center; border-top: 1px solid var(--secondary-color); }
.footer--credits .eight { font-size: 14px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 1px; text-decoration: none; }

/* Blocks */

.wp-block-group { padding: 60px 0 120px; }
.wp-block-group .wp-block-heading,
.wp-block-group p {margin-bottom: 20px; line-height: 1.5em; }

.block { margin: 120px 0; }
.block--title { color: var(--primary-color); text-align: center; font-family: "Merriweather Sans"; font-size: 40px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -2px; }
.block--title-inner { text-align: center; font-family: "Merriweather Sans"; font-size: 30px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -1px; }
.block--subtitle { color: var(--secondary-color); text-align: center; font-family: "Merriweather Sans"; font-size: 30px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -1px; }
.block--subtitle-inner { color: var(--secondary-color); font-family: "Merriweather Sans"; font-size: 24px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -0.8px; }
.block--description { margin: 19px auto 0; max-width: 890px; text-align: center; font-size: 22px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: -0.917px; }

.block--hero { position: relative; margin: 0; background: var(--primary-color); overflow: hidden; }
.block--hero a::after { display: none; }
.block--hero .hero--media { position: absolute; inset: 0; z-index: 1; }
.block--hero .hero--image { display: block; width: 100%; height: 100%; object-fit: cover; }
.block--hero .hero--image-mobile { display: none; }
.block--hero .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 560px; }
.block--hero .hero--content { max-width: 600px; }
.block--hero .hero--title { position: relative; z-index: 2; margin: 0; max-width: 520px; color: var(--white-color); font-family: "Merriweather Sans", sans-serif; font-size: 60px; font-style: normal; font-weight: 800; line-height: 56px; letter-spacing: -3px; }
.block--hero .hero--text { position: relative; z-index: 2; margin: 20px 0 0; max-width: 450px; color: var(--white-color); font-size: 28px; font-style: normal; font-weight: 500; line-height: 32px; letter-spacing: -1.167px; }
.block--hero .hero--info { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; margin-top: 35px; padding-top: 45px; border-top: 1px solid var(--secondary-color); }
.block--hero .hero--promo { display: flex; align-items: center; width: 100%; }
.block--hero .hero--promo-label { color: var(--secondary-color); font-family: "Merriweather Sans"; font-size: 28px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -0.933px; text-transform: uppercase; }
.block--hero .hero--promo-text { flex: 0 0 530px; margin-left: 15px; }
.block--hero .hero--promo-text p { display: flex; align-items: center; }
.block--hero .hero--promo-text, 
.block--hero .hero--promo-text2 { color: var(--white-color); font-family: "Merriweather Sans"; font-size: 30px; font-style: normal; font-weight: 700; line-height: 32px; letter-spacing: -1px; }
.block--hero .hero--promo-text2 { margin: 0 20px; padding-left: 20px; border-left: 1px solid var(--secondary-color); }
.block--hero .hero--promo-text strong { margin: 0 10px; color: var(--white-color); font-family: "Merriweather Sans"; font-size: 80px; font-style: normal; font-weight: 700; line-height: 66px; letter-spacing: -7px; }
.block--hero .hero--cta .btn-primary { margin: 0; width: 315px; }

.block--features .features--list { list-style: none; display: flex; justify-content: space-between; margin-top: 41px; }
.block--features .block--subtitle-inner { padding: 10px 0; }
.block--features p { max-width: 255px; font-size: 20px; font-style: normal; font-weight: 500; line-height: 24px; }

.block--products { margin: 140px 0 220px; }
.block--products .products--grid { display: flex; gap: 75px; justify-content: space-around; margin-top: 26px; }
.block--products .products--grid ul { list-style: none; }
.block--products .products--grid ul li { padding-left: 18px; font-size: 20px; font-style: normal; font-weight: 500; line-height: 24px; background: transparent url(images/icon-bullet.svg) left 9px no-repeat; }
.block--products .product-info { margin-top: 14px; padding: 14px 0 14px 56px; height: 90%; border-left: 3px solid var(--secondary-color); }
.block--products .product-info img { display: block; margin-bottom: 28px; width: auto; height: 130px; }

.block--banner { background: var(--primary-color); }
.block--banner a::after { display: none; }
.block--banner .banner--media { position: absolute; inset: 0; z-index: 1; }
.block--banner .banner--media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.block--banner .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 400px; }
.block--banner .banner--content { --max-w: 530px; position: relative; z-index: 9; max-width: var(--max-w); }
.block--banner .banner--title { color: var(--white-color); font-family: "Merriweather Sans", sans-serif; font-size: 60px; font-style: normal; font-weight: 800; line-height: 56px; letter-spacing: -3px;  }
.block--banner .banner--subtitle { margin: 10px 0 0; color: var(--white-color); font-size: 28px; font-style: normal; font-weight: 500; line-height: 28px; letter-spacing: -1.167px; }
.block--banner .banner--whatsapp { position: absolute; z-index: 8; bottom: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-right: 60px; width: 100%; max-width: 960px; min-height: 84px; color: var(--white-color); text-decoration: none; font-size: 28px; font-weight: 500; line-height: 28px; letter-spacing: -1.167px; background: transparent url(images/banner-bg.svg) no-repeat; }
.block--banner .banner--whatsapp .icon-whatsapp { margin-top: -41px; width: 108px; height: 108px; background-image: url(images/icon-whatsapp-shadow.svg); }

.maintenance--brands { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; margin: 40px auto 30px; padding: 20px 0; border: 3px solid var(--secondary-color); border-left: none; border-right: none; }
.maintenance--brands a::after { display: none; }
.maintenance--brands li { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 24px; height: 68px; border-right: 1px solid var(--secondary-color); }
.maintenance--brands li:last-child { border: none; }
.maintenance--brands img { max-height: 48px; max-width: 100%; object-fit: contain; }
.maintenance--text { margin: 20px auto 30px; padding: 0 60px; text-align: center; font-size: 22px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: -0.917px; }
.maintenance--obs { padding-top: 21px; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; border-top: 1px solid var(--secondary-color); }

.testimonials--grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 70px; }
.testimonial--header { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }
.testimonial--name { font-family: "Merriweather Sans", sans-serif; font-size: 24px; font-style: normal; font-weight: 800; line-height: 32px; letter-spacing: -0.8px; }
.testimonial--stars { display: flex; gap: 5px; }
.testimonial--text { max-width: 320px; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; margin: 0; }
.testimonials--units { margin-top: 30px; padding-top: 30px; text-align: center; border-top: 1px solid var(--secondary-color); }
.testimonials--units ul { list-style: none; display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.testimonials--units ul li { padding: 0 30px; } 
.testimonials--units ul li:not(:last-child) { border-right: 1px solid var(--secondary-color); }
.testimonials--units a { text-align: center; font-size: 22px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: -0.917px; text-decoration: none; transition: .4s; }
.testimonials--units a::after { transform: scaleX(1); }
.testimonials--units a:hover::after { transform: scaleX(0); }

.about--grid { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
.about--item p { margin: 10px 0 0; max-width: 370px; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; }
.about--cta { margin-top: 56px; text-align: center; }
.about-content:has(.block--title-inner) { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--primary-color); } 
.about-content:has(.block--title-inner) .about--item p { font-weight: 500; max-width: 320px; }

.faq--list { margin-top: 40px; border-top: 1px solid var(--secondary-color); }
.faq--item { overflow: hidden; border-bottom: 1px solid var(--secondary-color); }
.faq--item > div { list-style: none; cursor: pointer; }
.faq--item > div::-webkit-details-marker { display: none; }
.faq--question { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 16px; padding: 30px 0; }
.faq--number { color: var(--secondary-color); font-weight: 300; }
.faq--text { font-size: 20px; font-style: normal; font-weight: 600; line-height: 24px; }
.faq--icon { width: 24px; height: 24px; background: url("images/icon-chevron.svg") no-repeat center; background-size: contain; transition: transform 0.3s ease; }
.faq--answer { opacity: 0; overflow: hidden; margin-top: -30px; padding: 0 0 30px 64px; max-height: 0; transition: 0.35s ease-in-out; }
.faq--answer p { margin: 0; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; }
.faq--cta { margin-top: 56px; text-align: center; }
.faq--item.is-open .faq--icon { transform: rotate(180deg); }
.faq--item.is-open .faq--answer { opacity: 1; margin-top: -20px; max-height: 99999px; }

.contact--grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.contact--unit .block--subtitle-inner { margin-bottom: 10px; }
.contact--unit p { font-size: 20px; font-style: normal; font-weight: 500; line-height: 24px; }
.contact--unit a::after { display: none; }
.contact--whatsapp {   display: inline-flex; align-items: center;   margin: 18px 0 10px; padding: 0 0 0 32px; color: var(--whatsapp-color); text-decoration: none; font-size: 24px; font-style: normal; font-weight: 600; line-height: 32px; background: transparent url(images/icon-whatsapp.svg) left 50% no-repeat; background-size: 22px; transition: .25s ease-in-out; }
.contact--whatsapp:hover { opacity: 0.85; transform: translateY(-1px); }
.contact--map { margin-top: 16px; width: 100%; height: auto; }

#whatsappFloatButton { position: fixed; right: 30px; bottom: 30px; z-index: 999; }
#whatsappFloatButton .btn-whatsapp { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; text-indent: -99999px; background: transparent url(images/icon-whatsapp.svg) center center no-repeat; background-size: 100%; }
#whatsappFloatButton .btn-whatsapp::after { display: none; }

@media (max-width: 1290px) {
    .container { max-width: 95%; }
}

@media (max-width: 960px) {

    .container { max-width: 100%; }

    .btn.btn-primary { margin: 0 10px; font-size: 22px; width: calc( 100% - 20px ); }

    .site-header--landing .container { flex-direction: column; padding-left: 0; padding-right: 0; }
    .site--brand { flex-direction: column; gap: 10px; width: 100%; }
    .site-slogan { width: 100%; text-align: center; }
    .header--actions { flex-direction: column-reverse; width: 100%; }
    .header--whatsapp { margin: 20px 0; }
    .site--social { position: relative; justify-content: center; margin: 0 auto !important; padding: 0 !important; width: 100%; border: none !important; }
    .site--social::before,
    .site--social::after { content: " "; position: absolute; left: 20px; top: 50%; width: 25vw; height: 1px; background: var(--secondary-color); }
    .site--social::after { left: auto; right: 20px; }

    .site-footer { margin: 60px 0 30px; }
    .site-footer .container { border: none; }
    .footer--content { display: flex; flex-direction: column; padding: 0; }
    .footer--links { flex-direction: column; gap: 8px; padding: 20px 0 18px; text-align: center; font-size: 18px; }
    .footer--copyright { margin: 0; padding: 0; border: none; }
    .footer--credits { border: none; }

    .block { margin: 60px 0; }
    .block--title { text-align: center; line-height: .9em; letter-spacing: -1.6px; }
    
    .block--hero { margin: 0; }
    .block--hero .container { padding: 30px 0; }
    .block--hero .hero--media { position: relative; margin-top: 26px; }
    .block--hero .hero--image-desktop { display: none; }    
    .block--hero .hero--image-mobile { display: block; }    
    .block--hero .hero--content { padding: 0 20px; max-width: none; }
    .block--hero .hero--title { margin: 0 auto; font-size: 40px; line-height: 42px; letter-spacing: -2px; text-align: center; }    
    .block--hero .hero--text { margin: 0 auto; font-size: 24px; line-height: 28px; letter-spacing: -1px; text-align: center; }    
    .block--hero .hero--info { flex-direction: column; width: 100%; margin-top: 0; padding-top: 0; border: none; }    
    .block--hero .hero--promo { flex-direction: column; text-align: center; }
    .block--hero .hero--promo-text { flex: auto; }    
    .block--hero .hero--promo-text { margin: 15px 0 20px; padding: 0 20px; }
    .block--hero .hero--promo-text p { flex-direction: column; }
    .block--hero .hero--promo-text2 { margin: 0; padding: 0; max-width: 250px; text-align: center; border: none; }
    .block--hero .hero--cta { width: 100%; margin: 20px auto 0; padding: 0 20px; }
    .block--hero .hero--cta .btn { width: 100%; } 

    .block--features { margin-bottom: 100px; padding: 0 20px; }
    .block--features .features--list { flex-direction: column; gap: 40px; text-align: center; }
    .block--features p { max-width: none; }

    .block--products .container { padding: 0 20px; }
    .block--products .products--grid { display: flex; flex-direction: column; gap: 24px; }
    .block--products .block--subtitle-inner { text-align: center; }
    .block--products .product-info { padding: 0; border: none; }
    .block--products .product-info img { margin: 0 auto 20px; }
    .block--products .btn.btn-primary { margin: 24px 0 0; width: 100%; }

    .block--maintenance .container { padding: 0 20px; }
    .maintenance--text { padding: 0; }
    .maintenance--brands { display: flex; flex-direction: column; gap: 20px; }
    .maintenance--brands li { padding: 0; border: none; height: auto; }
    .maintenance--brands img { width: 140px; height: auto; }

    .testimonials--grid { display: flex; flex-direction: column; margin-top: 20px; padding: 0 20px; text-align: center; }
    .testimonial--header { flex-direction: column; align-items: center; }
    .testimonials--units { margin: 30px 20px 0; }    
    .testimonials--units ul { flex-direction: column; gap: 18px; }
    .testimonials--units ul li { padding: 0; border: none !important; }    
    .testimonial--text { max-width: none; }

    .block--banner .container { padding: 30px 0 125px; min-height: auto; }
    .block--banner .banner--media { position: relative; order: 2; }
    .block--banner .banner--media img { height: 225px; }    
    .block--banner .banner--content { position: relative; order: 1; max-width: none; text-align: center; padding: 30px 0; }
    .block--banner .banner--title { padding: 0 50px; text-align: center; font-size: 40px; line-height: 42px; letter-spacing: -2px; }
    .block--banner .banner--whatsapp { justify-content: center; padding: 41px 20px 30px; min-height: 127px; text-align: center; background: var(--whatsapp-color); }
    .block--banner .banner--whatsapp .icon-whatsapp { position: absolute; top: 0; left: 50%; margin-left: -44px; width: 88px; height: 88px; }

    .about--grid { display: flex; flex-direction: column; text-align: center; }
    .about-content .about--item { padding: 0 20px; }
    .about-content .about--item p { max-width: none !important; }

    .faq--list { margin: 20px 20px 0; border: none; }
    .faq--question { gap: 10px; grid-template-columns: 24px 1fr 24px; padding: 20px 0; }
    .faq--item:first-child .faq--question { padding-top: 0; }
    .faq--answer { padding-left: 35px; }
    .faq--item.is-open .faq--answer { margin-top: -16px; }
    
    .contact--grid { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; padding: 0 10px; text-align: center; }
    .contact--whatsapp { margin: 10px 0; }

    #whatsappFloatButton { right: 5px; bottom: 5px; }
    #whatsappFloatButton .btn-whatsapp { width: 82px; height: 82px; background-image: url(images/icon-whatsapp-shadow.svg); }
}