html,
body {
overflow-x: hidden;
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: #f6f8f7;
color: #171717;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
}
button {
border: none;
outline: none;
cursor: pointer;
font-family: inherit;
}
input,
textarea,
select {
outline: none;
font-family: inherit;
}
ul {
list-style: none;
}
/*==========================================================
VARIÁVEIS
==========================================================*/
:root {
--primary: #17a84b;
--primary-dark: #12893d;
--primary-light: #2ecc71;
--white: #ffffff;
--black: #151515;
--gray: #707070;
--gray-light: #ececec;
--background: #f6f8f7;
--shadow:
0 20px 60px rgba(0, 0, 0, .08);
--shadow-hover:
0 35px 80px rgba(0, 0, 0, .14);
--radius: 22px;
--transition: .35s;
}
/*==========================================================
CONTAINER
==========================================================*/
.container {
width: min(1180px, 92%);
margin: auto;
}
/*==========================================================
BOTÕES
==========================================================*/
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 17px 34px;
border-radius: 60px;
background: linear-gradient(135deg,
var(--primary),
var(--primary-dark));
color: #fff;
font-weight: 600;
transition: .35s;
box-shadow:
0 15px 35px rgba(23, 168, 75, .28);
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow:
0 25px 45px rgba(23, 168, 75, .40);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 17px 34px;
border-radius: 60px;
border: 2px solid var(--primary);
color: var(--primary);
transition: .35s;
font-weight: 600;
}
.btn-secondary:hover {
background: var(--primary);
color: #fff;
}
.btn-buy {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px;
border-radius: 14px;
background: var(--primary);
color: #fff;
font-weight: 600;
transition: .35s;
}
.btn-buy:hover {
background: var(--primary-dark);
transform: translateY(-3px);
}
.btn-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--primary);
color: #fff;
border-radius: 60px;
font-weight: 600;
transition: .3s;
}
.btn-header:hover {
transform: translateY(-3px);
}
/*==========================================================
HEADER
==========================================================*/
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, .78);
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
#header .container {
height: 92px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
width: 170px;
}
nav {
display: flex;
align-items: center;
gap: 42px;
}
nav a {
color: #222;
font-weight: 500;
transition: .3s;
position: relative;
}
nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 2px;
background: var(--primary);
transition: .35s;
}
nav a:hover {
color: var(--primary);
}
nav a:hover::after {
width: 100%;
}
.menu-mobile {
display: none;
background: none;
font-size: 28px;
}
/*==========================================================
HERO
==========================================================*/
#hero {
padding-top: 170px;
padding-bottom: 60px;
position: relative;
overflow: hidden;
}
.hero-card img {
width: 100%;
max-width: 420px;
display: block;
object-fit: contain;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: 50px;
background: rgba(23, 168, 75, .08);
color: var(--primary);
font-weight: 600;
margin-bottom: 28px;
}
.hero-tag i {
font-size: 18px;
}
#hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-content h1 {
font-size: 60px;
line-height: 1.08;
font-weight: 800;
max-width: 650px;
margin-bottom: 20px;
}
.hero-content p {
max-width: 520px;
font-size: 18px;
line-height: 1.75;
margin-bottom: 28px;
color: #666;
}
.hero-buttons {
display: flex;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.hero-founder {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
color: #666;
font-size: 15px;
}
.hero-founder strong {
color: var(--primary);
font-weight: 700;
}
.hero-founder i {
color: var(--primary);
font-size: 22px;
}
/*=========================
HERO IMAGE
==========================*/
.hero-image{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:620px;
}
.hero-card{
width:min(520px,100%);
aspect-ratio:auto;
background:transparent;
box-shadow:none;
border-radius:0;
display:flex;
justify-content:center;
align-items:center;
overflow:visible;
}
.hero-card::before{
width:340px;
height:340px;
background:rgba(23,168,75,.12);
filter:blur(70px);
}
.hero-card img{
width:100%;
max-width:470px;
filter:drop-shadow(0 35px 40px rgba(0,0,0,.25));
transition:.5s;
}
.hero-card:hover img{
transform:translateY(-12px) rotate(-3deg) scale(1.05);
}
.floating{
position:static;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:16px 24px;
background:#fff;
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,.12);
}
.floating-1 {
left: -45px;
top: 110px;
}
.floating-2 {
right: -45px;
bottom: 110px;
}
.floating i {
color: #17a84b;
font-size: 18px;
}
.floating-wrapper{
display:flex;
gap:24px;
margin-top:28px;
}
/*=================================================
TITULOS DAS SEÇÕES
=================================================*/
.section-title {
text-align: center;
margin-bottom: 70px;
}
.section-title span {
display: inline-block;
padding: 10px 22px;
border-radius: 40px;
background: rgba(23, 168, 75, .08);
color: var(--primary);
font-weight: 600;
margin-bottom: 18px;
}
.section-title h2 {
font-size: 44px;
font-weight: 800;
margin-bottom: 18px;
}
.section-title p {
max-width: 760px;
margin: auto;
color: #6f6f6f;
line-height: 1.8;
font-size: 17px;
}
/*==========================================================
PRODUTOS
==========================================================*/
#produtos {
padding: 50px 0 120px;
position: relative;
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(320px, 1fr));
gap: 32px;
align-items: stretch;
}
.product-card {
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, .06);
transition: .4s;
position: relative;
border: 1px solid rgba(0, 0, 0, .05);
}
.product-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(23, 168, 75, .03),
transparent);
opacity: 0;
transition: .4s;
}
.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 70px rgba(0, 0, 0, .12);
}
.product-card:hover::before {
opacity: 1;
}
.product-image {
height: 260px;
padding: 30px;
background: #fbfcfb;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.product-image .placeholder {
aspect-ratio: 1/1;
border-radius: 22px;
}
.product-image {
height: 260px;
display: flex;
align-items: center;
justify-content: center;
background: #fbfcfb;
padding: 30px;
}
.product-image img{
width:100%;
height:100%;
max-width:320px;
max-height:240px;
object-fit:contain;
transform:scale(1.2);
}
.product-card.redacao .product-image img{
width: auto;
max-width: 180px;
max-height: 160px;
transform: scale(1.45);
object-fit: contain;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border-radius: 50px;
background: rgba(23, 168, 75, .10);
color: var(--primary);
font-size: 13px;
font-weight: 600;
}
.product-content {
padding: 32px;
}
.product-content h3 {
font-size: 22px;
line-height: 1.35;
margin: 18px 0 24px;
}
.product-content p {
color: #707070;
line-height: 1.8;
margin-bottom: 28px;
}
.product-rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 28px;
}
.product-rating i {
color: #ffc107;
font-size: 16px;
}
.product-rating span {
margin-left: 10px;
color: #666;
font-weight: 600;
}
.product-price {
margin-top: 30px;
margin-bottom: 30px;
}
.product-price small {
display: block;
color: #909090;
margin-bottom: 8px;
}
.product-price del {
color: #999;
}
.product-price h4 {
font-size: 45px;
color: var(--primary);
font-weight: 800;
line-height: 1;
}
.product-price span {
display: block;
margin-top: 8px;
font-size: 13px;
color: #888;
}
.product-card:hover .btn-buy {
transform: translateY(-3px);
box-shadow: 0 18px 35px rgba(23, 168, 75, .28);
}
/*===================================
DESTAQUE MAIS VENDIDO
===================================*/
.product-card:first-child::after {
content: "MAIS VENDIDO";
position: absolute;
top: 25px;
right: -45px;
width: 180px;
text-align: center;
padding: 10px;
background: var(--primary);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
transform: rotate(45deg);
box-shadow: 0 10px 25px rgba(23, 168, 75, .30);
}
/*===================================
HOVER
===================================*/
.product-card:hover .placeholder {
transform: scale(1.03);
}
.product-card .placeholder {
transition: .45s;
}
.product-card:hover h3 {
color: var(--primary);
}
/*===================================
BOTÃO PRODUTO
===================================*/
.btn-buy {
position: relative;
overflow: hidden;
}
.btn-buy::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .18);
transform: skewX(-30deg);
transition: .7s;
}
.btn-buy:hover::before {
left: 130%;
}
/*==========================================================
NÚMEROS
==========================================================*/
#numbers {
padding: 90px 0;
background: linear-gradient(135deg,
var(--primary),
var(--primary-dark));
}
.numbers-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.number-box {
background: rgba(255, 255, 255, .10);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 22px;
text-align: center;
padding: 45px 25px;
transition: .35s;
}
.number-box:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, .16);
}
.number-box h2 {
font-size: 52px;
color: #fff;
margin-bottom: 12px;
font-weight: 800;
}
.number-box span {
color: rgba(255, 255, 255, .88);
font-size: 17px;
}
#garantias {
padding: 120px 0;
background: #ffffff;
}
.guarantee-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
padding: 70px;
border-radius: 30px;
background: linear-gradient(135deg,
#ffffff,
#f7fbf8);
box-shadow: 0 25px 70px rgba(0, 0, 0, .06);
}
.section-mini {
display: inline-flex;
padding: 10px 22px;
border-radius: 40px;
background: rgba(23, 168, 75, .10);
color: var(--primary);
font-weight: 600;
margin-bottom: 22px;
}
.guarantee-left h2 {
font-size: 44px;
line-height: 1.2;
margin-bottom: 22px;
}
.guarantee-left p {
color: #6d6d6d;
line-height: 1.9;
font-size: 17px;
}
.guarantee-right {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.guarantee-item {
background: #fff;
border-radius: 20px;
padding: 28px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
transition: .35s;
}
.guarantee-item:hover {
transform: translateY(-8px);
box-shadow: 0 25px 55px rgba(0, 0, 0, .08);
}
.guarantee-item i {
width: 58px;
height: 58px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(23, 168, 75, .12);
color: var(--primary);
font-size: 24px;
}
.guarantee-item span {
font-weight: 600;
}
/*==========================================================
FAQ
==========================================================*/
#faq {
padding: 120px 0;
background: #f7faf8;
}
.faq-container {
max-width: 900px;
margin: auto;
}
.faq-item {
background: #fff;
border-radius: 20px;
overflow: hidden;
margin-bottom: 22px;
box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
}
.faq-question {
width: 100%;
background: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 35px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
.faq-question i {
color: var(--primary);
transition: .35s;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: .4s;
}
.faq-answer p {
padding: 0 35px 28px;
color: #6d6d6d;
line-height: 1.8;
}
.faq-item.active .faq-answer {
max-height: 220px;
}
.faq-item.active i {
transform: rotate(45deg);
}
/*==========================================================
CTA FINAL
==========================================================*/
#cta-final {
padding: 120px 0;
background: linear-gradient(135deg, #17a84b, #12893d);
}
.cta-box {
text-align: center;
color: #fff;
max-width: 1200px;
margin: auto;
}
.cta-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: 50px;
background: rgba(255, 255, 255, .15);
margin-bottom: 25px;
}
.cta-box h2 {
font-size: 48px;
line-height: 1.25;
max-width: 900px;
margin: 0 auto 20px;
}
.cta-text {
font-size: 26px;
font-weight: 600;
margin-bottom: 45px;
}
.cta-videos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 35px;
margin: 0 auto 50px;
}
.video-item {
border-radius: 22px;
overflow: hidden;
background: #000;
box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
}
.video-item iframe {
width: 100%;
aspect-ratio: 16/9;
border: none;
display: block;
}
.cta-description {
max-width: 700px;
margin: 0 auto 40px;
color: rgba(255, 255, 255, .9);
font-size: 18px;
line-height: 1.8;
}
.cta-buttons {
display: flex;
justify-content: center;
}
.cta-buttons .btn-primary {
min-width: 320px;
}
/*==========================================================
FOOTER
==========================================================*/
#footer {
background: #111;
color: #fff;
padding: 70px 0 30px;
}
#footer .container {
text-align: center;
}
.footer-logo img {
width: 180px;
margin: 0 auto 25px;
}
.footer-logo p {
max-width: 620px;
margin: 0 auto;
color: #bcbcbc;
line-height: 1.8;
}
.footer-social {
margin: 45px 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-social a {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 50px;
background: #1d1d1d;
color: #fff;
transition: .3s;
}
.footer-social a:hover {
background: var(--primary);
transform: translateY(-4px);
}
.footer-social i {
font-size: 20px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 25px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-bottom p {
color: #bdbdbd;
}
@media(max-width:768px) {
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/*==========================================================
ANIMAÇÕES GERAIS
==========================================================*/
.fade-up {
opacity: 0;
transform: translateY(50px);
transition: .8s;
}
.fade-up.show {
opacity: 1;
transform: translateY(0);
}
.scale {
transform: scale(.95);
opacity: 0;
transition: .8s;
}
.scale.show {
transform: scale(1);
opacity: 1;
}
.left {
opacity: 0;
transform: translateX(-60px);
transition: .8s;
}
.left.show {
opacity: 1;
transform: translateX(0);
}
.right {
opacity: 0;
transform: translateX(60px);
transition: .8s;
}
.right.show {
opacity: 1;
transform: translateX(0);
}
/*==========================================================
SCROLLBAR
==========================================================*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #efefef;
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/*==========================================================
RESPONSIVIDADE
==========================================================*/
@media (max-width:1200px) {
.products-grid{
grid-template-columns:repeat(2,1fr);
}
.container {
width: 95%;
}
#hero .container {
gap: 60px;
}
.hero-content h1 {
font-size: 50px;
}
.section-title h2 {
font-size: 38px;
}
.products-grid {
gap: 25px;
}
.product-content {
padding: 25px;
}
.product-content h3 {
font-size: 24px;
}
.guarantee-box {
gap: 40px;
padding: 50px;
}
.footer-top {
gap: 40px;
}
}
@media (max-width:992px) {
#header .container {
height: 85px;
}
.logo img {
width: 145px;
}
nav {
position: fixed;
top: 85px;
right: -100%;
width: 320px;
height: calc(100vh - 85px);
background: #fff;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 40px;
gap: 28px;
transition: .4s;
box-shadow: -15px 0 40px rgba(0, 0, 0, .08);
}
nav.active {
right: 0;
}
.menu-mobile {
display: flex;
font-size: 28px;
color: #222;
}
.btn-header {
display: none;
}
#hero {
padding-top: 140px;
}
#hero .container {
grid-template-columns: 1fr;
}
.hero-content {
text-align: center;
}
.hero-content p {
margin: auto;
margin-bottom: 40px;
}
.hero-buttons {
justify-content: center;
}
.hero-image {
margin-top: 60px;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.advantages-grid {
grid-template-columns: repeat(2, 1fr);
}
.numbers-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.guarantee-box {
grid-template-columns: 1fr;
}
.footer-top {
grid-template-columns: 1fr 1fr;
}
}
/*==========================================
MOBILE
==========================================*/
@media (max-width:768px) {
/*=========================
DEPOIMENTOS
=========================*/
.testimonials-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 18px;
padding: 10px 5px 20px;
margin: 0 -5px;
-webkit-overflow-scrolling: touch;
}
.testimonials-grid::-webkit-scrollbar {
display: none;
}
.testimonial-card {
flex: 0 0 88%;
scroll-snap-align: center;
}
.hero-image {
min-height: auto;
}
.hero-card {
width: 100%;
max-width: 360px;
margin: auto;
}
.hero-card img {
width: 88%;
}
.floating {
display: none;
}
#numbers {
padding: 70px 0;
}
.number-box {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
padding: 20px 10px;
}
.number-box:hover {
background: transparent;
box-shadow: none;
transform: none;
}
.number-box h2 {
font-size: 52px;
}
.number-box span {
font-size: 18px;
color: #fff;
}
.guarantee-box {
padding: 35px 20px;
}
.guarantee-right {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
width: 100%;
}
.guarantee-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
padding: 18px;
min-height: 145px;
border-radius: 18px;
}
.guarantee-item i {
width: 52px;
height: 52px;
font-size: 22px;
border-radius: 14px;
}
.guarantee-item span {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
white-space: normal;
word-break: normal;
}
}
@media (max-width:576px) {
.container {
width: 92%;
}
.hero-tag {
font-size: 13px;
}
.hero-content h1 {
font-size: 31px;
}
.hero-buttons {
flex-direction: column;
}
.btn-primary,
.btn-secondary,
.btn-outline {
width: 100%;
}
.hero-card {
padding: 20px;
}
.placeholder {
border-radius: 16px;
}
.placeholder i {
font-size: 55px;
}
.floating {
display: none;
}
.product-content {
padding: 22px;
}
.product-content h3 {
font-size: 22px;
}
.product-price h4 {
font-size: 32px;
}
.guarantee-box {
padding: 35px 25px;
}
.guarantee-left h2 {
font-size: 30px;
}
.faq-question {
padding: 22px;
font-size: 16px;
}
.faq-answer p {
padding: 0 22px 22px;
}
.cta-box h2 {
font-size: 30px;
}
.cta-buttons {
flex-direction: column;
}
#backTop {
width: 48px;
height: 48px;
right: 18px;
bottom: 18px;
}
}
/*==========================================================
EFEITOS PREMIUM
==========================================================*/
/* Glow suave atrás dos cards */
.product-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
background: rgba(23, 168, 75, .10);
border-radius: 50%;
filter: blur(70px);
top: -60px;
right: -60px;
opacity: 0;
transition: .45s;
z-index: 0;
}
.product-card:hover::after {
opacity: 1;
}
.product-card>* {
position: relative;
z-index: 2;
}
/* Linha animada */
.section-title span {
position: relative;
overflow: hidden;
}
.section-title span::before {
content: "";
position: absolute;
left: -120%;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, .5),
transparent);
transition: .8s;
}
.section-title:hover span::before {
left: 120%;
}
/* Card Hover */
.product-card:hover {
border-color: rgba(23, 168, 75, .18);
}
.advantage-card:hover {
border-color: rgba(23, 168, 75, .15);
}
.testimonial-card:hover {
border-color: rgba(23, 168, 75, .12);
}
/* Ícones */
.advantage-icon,
.benefit .icon,
.guarantee-item i {
transition: .35s;
}
.advantage-card:hover .advantage-icon {
transform: scale(1.08) rotate(-8deg);
}
.benefit:hover .icon {
transform: scale(1.1);
}
.guarantee-item:hover i {
transform: rotate(-8deg);
}
/* Botões */
.btn-primary,
.btn-buy,
.btn-header {
overflow: hidden;
position: relative;
}
.btn-primary::after,
.btn-buy::after,
.btn-header::after {
content: "";
position: absolute;
top: 0;
left: -140%;
width: 70%;
height: 100%;
background:
linear-gradient(90deg,
transparent,
rgba(255, 255, 255, .45),
transparent);
transform: skewX(-25deg);
transition: 1s;
}
.btn-primary:hover::after,
.btn-buy:hover::after,
.btn-header:hover::after {
left: 180%;
}
/* Zoom imagens */
.product-image {
overflow: hidden;
}
.product-image .placeholder {
transition: .5s;
}
.product-card:hover .placeholder {
transform: scale(1.05);
}
/* Links */
.footer-links a {
position: relative;
}
.footer-links a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: .35s;
}
.footer-links a:hover::after {
width: 100%;
}
/* Hero */
.hero-content {
animation: heroFade .9s ease;
}
.hero-image {
animation: heroImage 1.2s ease;
}
@keyframes heroFade {
from {
opacity: 0;
transform: translateY(35px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes heroImage {
from {
opacity: 0;
transform: translateX(80px);
}
to {
opacity: 1;
transform: none;
}
}
/* Scroll */
.reveal {
opacity: 0;
transform: translateY(45px);
transition: 1s;
}
.reveal.active {
opacity: 1;
transform: none;
}
.advantage-card {
display: flex;
flex-direction: column;
padding: 40px;
min-height: 320px;
}
@media (max-width:768px) {
.hero-image {
min-height: auto;
margin-top: 0;
margin-bottom: 1px;
}
.hero-card {
background: transparent;
box-shadow: none;
border-radius: 0;
width: 100%;
max-width: none;
aspect-ratio: auto;
padding: 0;
overflow: visible;
}
.hero-card::before {
width: 220px;
height: 220px;
background: rgba(23, 168, 75, .18);
filter: blur(55px);
}
.hero-card img {
width: 85%;
max-width: 530px;
margin: auto;
filter: drop-shadow(0 25px 35px rgba(0, 0, 0, .22));
}
.floating {
display: none;
}
#hero {
padding-top: 120px;
padding-bottom: 40px;
}
.hero-content {
margin-bottom: 10px;
}
}
@media (max-width:768px) {
.advantages-grid::-webkit-scrollbar {
display: none;
}
.advantage-card {
flex: 0 0 88%;
scroll-snap-align: center;
min-height: auto;
}
}
/*==========================================================
WHATSAPP FLUTUANTE
==========================================================*/
.whatsapp-float {
position: fixed;
right: 25px;
bottom: 25px;
width: 68px;
height: 68px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 34px;
box-shadow: 0 15px 40px rgba(37, 211, 102, .45);
z-index: 9999;
transition: .35s;
animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
transform: translateY(-6px) scale(1.08);
background: #1ebe5d;
}
@keyframes whatsappPulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
@media(max-width:768px) {
.whatsapp-float {
width: 60px;
height: 60px;
right: 18px;
bottom: 18px;
font-size: 30px;
}
}
/*==========================
BOTÃO SAIBA MAIS
===========================*/
.product-more {
display: block;
width: 100%;
margin-top: 12px;
text-align: center;
color: var(--primary);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: .3s;
}
.product-more:hover {
text-decoration: underline;
}
/*==========================
MODAL
===========================*/
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .65);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: .35s;
z-index: 99999;
padding: 20px;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-box {
width: min(650px, 100%);
background: #fff;
border-radius: 22px;
padding: 35px;
position: relative;
animation: modalUp .35s ease;
}
.modal-close {
position: absolute;
right: 18px;
top: 18px;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: #f3f3f3;
cursor: pointer;
font-size: 20px;
}
.modal h3 {
margin-bottom: 18px;
font-size: 28px;
}
.modal p {
line-height: 1.8;
color: #666;
}
@keyframes modalUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/*==========================
LISTA DOS PRODUTOS
===========================*/
.product-list {
margin: 28px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.product-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 17px;
line-height: 1.55;
color: #444;
}
.product-list li i {
width: 24px;
height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #17a84b;
color: #fff;
font-size: 11px;
margin-top: 2px;
box-shadow: 0 8px 20px rgba(23, 168, 75, .20);
}
#produtos .container {
width: min(1520px, 96%);
}
@media (max-width:1400px) {
#produtos .container {
width: 95%;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/*==========================================================
COMBO APROVAÇÃO
==========================================================*/
#combo {
padding-top: 40px;
/* antes era 120px */
padding-bottom: 120px;
background: #f6f8f7;
}
.combo-box {
position: relative;
background: #fff;
border-radius: 34px;
padding: 70px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .08);
border: 1px solid rgba(23, 168, 75, .12);
overflow: hidden;
}
.combo-box::before {
content: "";
position: absolute;
right: -180px;
top: -180px;
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(23, 168, 75, .08);
filter: blur(80px);
}
/*==========================================================
TOPO
==========================================================*/
.combo-top {
display: grid;
grid-template-columns: 55% 45%;
align-items: center;
gap: 40px;
margin-bottom: 45px;
}
.combo-left {
position: relative;
z-index: 2;
}
.combo-right {
display: flex;
justify-content: center;
align-items: center;
}
.combo-right img {
width: 100%;
max-width: 600px;
object-fit: contain;
filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .20));
border-radius: 20px;
transition: .4s;
}
.combo-right img:hover {
transform: translateY(-8px) scale(1.03);
}
/*==========================================================
BADGE
==========================================================*/
.combo-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 50px;
background: rgba(23, 168, 75, .12);
color: var(--primary);
font-size: 14px;
font-weight: 700;
margin-bottom: 24px;
}
.combo-badge i {
color: #ff9800;
}
/*==========================================================
TITULO
==========================================================*/
.combo-left h2 {
font-size: 56px;
line-height: 1.1;
font-weight: 800;
margin-bottom: 22px;
}
.combo-description {
font-size: 19px;
color: #666;
line-height: 1.8;
margin-bottom: 30px;
}
/*==========================================================
LISTA
==========================================================*/
.combo-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.combo-item {
display: flex;
align-items: center;
gap: 16px;
font-size: 17px;
line-height: 1.5;
}
.combo-item i {
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(23, 168, 75, .12);
color: var(--primary);
font-size: 18px;
flex-shrink: 0;
}
/*==========================================================
PARTE INFERIOR
==========================================================*/
.combo-bottom {
display: grid;
grid-template-columns: 350px 1fr;
gap: 40px;
align-items: start;
}
.combo-bonus {
background: #f8fbf9;
border: 1px solid rgba(23, 168, 75, .10);
border-radius: 22px;
padding: 30px;
}
.combo-bonus h3 {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
margin-bottom: 25px;
}
.combo-bonus h3 i {
color: #ffb400;
}
.combo-bonus .combo-item {
margin-bottom: 18px;
}
.combo-bonus .combo-item:last-child {
margin-bottom: 0;
}
/*==========================================================
PREÇO
==========================================================*/
.combo-offer {
display: flex;
flex-direction: column;
justify-content: center;
}
.combo-offer small {
color: #888;
font-size: 15px;
margin-bottom: 8px;
}
.combo-offer del {
color: #999;
font-size: 28px;
margin-bottom: 18px;
}
.combo-save {
display: inline-flex;
align-items: center;
gap: 10px;
width: max-content;
padding: 10px 18px;
border-radius: 40px;
background: rgba(23, 168, 75, .12);
color: var(--primary);
font-weight: 700;
margin-bottom: 20px;
}
.combo-offer h4 {
font-size: 62px;
line-height: 1;
color: var(--primary);
margin-bottom: 10px;
}
.combo-offer p {
font-size: 22px;
font-weight: 600;
margin-bottom: 28px;
}
.combo-button {
width: 100%;
justify-content: center;
padding: 20px;
font-size: 18px;
}
/*==========================================================
RESPONSIVO
==========================================================*/
@media(max-width:992px) {
.combo-top {
grid-template-columns: 1fr;
text-align: center;
}
.combo-right {
order: -1;
}
.combo-right img {
max-width: 420px;
}
.combo-item {
text-align: left;
}
.combo-bottom {
grid-template-columns: 1fr;
}
}
@media(max-width:768px) {
#combo {
padding: 70px 0;
}
.combo-box {
padding: 28px;
border-radius: 24px;
}
.combo-left h2 {
font-size: 36px;
}
.combo-description {
font-size: 16px;
}
.combo-item {
font-size: 15px;
gap: 12px;
}
.combo-item i {
width: 38px;
height: 38px;
font-size: 15px;
border-radius: 12px;
}
.combo-right img {
max-width: 320px;
}
.combo-bonus {
padding: 22px;
}
.combo-bonus h3 {
font-size: 20px;
}
.combo-offer h4 {
font-size: 46px;
}
.combo-offer p {
font-size: 18px;
}
.combo-button {
font-size: 16px;
padding: 18px;
}
}
@media (max-width: 767px) {
.hero-image {
display: none;
}
}
@media (max-width:768px) {
.cta-videos {
grid-template-columns: 1fr;
gap: 22px;
width: 100%;
max-width: 420px;
margin: 0 auto 35px;
}
.video-item {
border-radius: 18px;
overflow: hidden;
}
.video-item iframe {
width: 100%;
aspect-ratio: 9/16;
/* Shorts */
min-height: 420px;
border: none;
display: block;
}
.cta-box {
padding: 0;
}
.cta-box h2 {
font-size: 28px;
line-height: 1.25;
}
.cta-text {
font-size: 22px;
margin-bottom: 30px;
}
}
/* PC */
.products-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;
}
/* Tablet */
@media (max-width:991px){
.products-grid{
grid-template-columns:repeat(2,1fr);
}
}
/* Celular */
@media (max-width:767px){
.products-grid{
grid-template-columns:1fr;
}
}
.combo-number{
width:46px;
height:46px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(23,168,75,.12);
color:var(--primary);
font-size:22px;
font-weight:700;
}