/* ==================================================
Hero Section
================================================== */

.hero {
position: relative;
width: 100%;
height: calc(100vh - 3rem);
overflow: hidden;
margin-top: -9.3rem;
display: flex;
}

.hero .container {
background: var(--color-bg);
}

.hero__video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

.hero__video {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(35, 35, 35, 0.85);
pointer-events: none;
z-index: 1;
}

[data-theme="light"] .hero__overlay {
background-color: rgba(255, 255, 255, 0.5);
}

.hero::before {
content: '';
width: 100%;
height: 37.3rem;
position: absolute;
background: linear-gradient(180deg, #232323 0%, rgba(35, 35, 35, 0.00) 100%);
z-index: 1;
top: 0;
left: 0;
}

[data-theme="light"] .hero::before {
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.00) 100%);
}

.hero::after {
content: '';
width: 100%;
height: 37.3rem;
position: absolute;
background: linear-gradient(0deg, #232323 -1.86%, rgba(35, 35, 35, 0.00) 98.14%);
z-index: 1;
bottom: 0;
left: 0;
}

[data-theme="light"] .hero::after {
background: linear-gradient(0deg, #ffffff -1.86%, rgba(255, 255, 255, 0.00) 98.14%);
}

.hero__content {
position: relative;
z-index: 3;
width: 71.8rem;
margin: auto auto;
padding: 2rem;
color: var(--color-text);
text-align: center;
}

.hero__content h1 {
max-width: 100%;
}

.hero__content p {
font-size: var(--font-size-md);
margin-bottom: 3.2rem;
}

.plataformas {
width: 100%;
position: absolute;
bottom: 4.8rem;
left: 50%;
transform: translateX(-50%);
gap: 6rem;
}

@media (max-width: 768px) {
.hero__content {
    width: 49rem;
}
.hero__content p {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-mg);
}
.plataformas {
bottom: 8.8rem;
}
}

/* ==================================================
Plataformas
================================================== */

.swiper-logo-carousel {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-slide {
  width: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-svg {
  height: 40px;
  margin: 0 30px;
}



/* ==================================================
Como ajudamos lojistas
================================================== */

.ajudamos {
padding: 14rem 0 7rem;
background-color: var(--color-bg); 
color: var(--color-text);
}

.ajudamos .container {
gap: 2rem;
}

.ajudamos__left-content, .ajudamos__right-content {
width: 61.5rem;
}

.ajudamos__left-content {
align-self: center;
}

.gradient-title {
background: linear-gradient(90deg, var(--color-text) 25.96%, #0CF 62.02%, var(--color-text) 100%);
background-clip: text; 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

.ajudamos__right-content {
gap: 3.2rem;
}

.card-custom {
background-color: var(--color-bg);
border: 1px solid var(--cinza-escuro-cw);
padding: 2rem; /* 20px */
border-radius: var(--border-radius-md);
}

.card-index {
color: var(--color-primary);
margin-right: 0.4rem;
}

@media (max-width: 1024px) {
.ajudamos {
    padding: 11.2rem 0 5.6rem;
}
.ajudamos .container {
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}

.ajudamos__right-content {
    gap: 1.6rem;
}

.ajudamos__left-content,
.ajudamos__right-content {
    width: 100%;
    min-width: auto;
}
}

@media (max-width: 768px) {
.ajudamos {
    padding: 9.6rem 0 4.8rem;
}
}

/* ==================================================
Marcas que trabalhamos
================================================== */

.marcas {
padding: 7rem 0;
position: relative; /* para que o ::before seja posicionado em relação a essa seção */
z-index: 1;
}

.marcas .container {
gap: 6.4rem;
}

.marcas::before {
content: "";
position: absolute;
top: 0%;         
right: 53%;        
width: 38rem;     
height: 38rem;
background-color: rgba(0, 204, 255, 0.2);
border-radius: 50%;
filter: blur(16rem);
pointer-events: none;
z-index: -1;
}

@media (max-width: 1024px) {
.marcas {
    padding: 5.6rem 0;
}
}

@media (max-width: 768px) {
.marcas {
    padding: 4.8rem 0;
}

.marcas h2 {
    text-align: center;
}
}

/* ==================================================
Nossos serviços
================================================== */

.servicos {
padding: 7rem 0;
}

.servicos h2 {
margin-bottom: var(--space-xl);
}

.servicos__cards {
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}

.card-servico {
flex: 0 0 calc((100% - 6rem) / 4);
position: relative;
background-color: var(--preto-claro-cw);
border: 1px solid var(--cinza-escuro-cw);
border-radius: var(--border-radius-md);
padding: 8.8rem 2rem 6.9rem;
min-height: 32rem;
}

[data-theme="light"] .card-servico {
background-color: var(--cinza-cw);
}

[data-theme="light"] .icon-servico path {
stroke: var(--color-inverse);
}

[data-theme="light"] .icon-expandir path {
stroke: var(--color-text)
}

.card-servico h3 {
font-size: var(--font-size-lg);
text-align: center;
margin-top: 2.4rem;
text-wrap: balance;
}

.saiba-mais {
text-decoration: underline;
}

.icon-expandir {
position: absolute;
bottom: 2rem;
right: 2rem;
}

@media (max-width: 1208px) {
.card-servico {
    flex: 0 0 calc((100% - 40px) / 3);
}
}

@media (max-width: 1024px) {
.servicos {
    padding: 5.6rem 0;
}
.servicos h2 {
    margin-bottom: var(--space-lg);
}
.servicos__cards {
    gap: 1.6rem;
}
.card-servico {
    flex: 0 0 calc((100% - 20px) / 2);
}
.card-servico {
    padding: 2rem 2rem 4.9rem;
    min-height: auto;
}
}

@media (max-width: 768px) {
.servicos {
    padding: 4.8rem 0;
}
.servicos h2 {
    margin-bottom: var(--space-lg);
}
}

@media (max-width: 576px) {
.card-servico {
    flex: 0 0 100%;
}
}

/* ================================================================
Por que nos escolher para cuidar da sua loja virtual?
================================================================ */

.cuidar {
padding: 7rem 0;
}

.cuidar__intro {
text-align: center;
margin-bottom: var(--space-xl);
}

.cuidar__intro h2 {
width: 100%;
max-width: 53.3rem;
}

.cuidar__conteudo {
gap: 2rem;
}

.cuidar__imagem {
flex: 1 1 calc(50% - 2rem);
display: flex;
align-items: center;
justify-content: center;
}

.cuidar__imagem img {
max-width: 100%;
height: auto;
}

.cuidar__checklist {
flex-direction: column;
flex: 1 1 calc(50% - 2rem);
gap: 2rem;
}

.checklist-item {
padding: 2rem;
background-color: transparent;
border-radius: var(--border-radius-md);
transition: background-color 0.3s;
}

.checklist-item.select {
background-color: var(--preto-claro-cw);
border: 1px solid var(--cinza-escuro-cw);
}

[data-theme="light"] .checklist-item.select {
background-color: var(--cinza-cw);
}

.checklist-item h3 {
font-size: 1.8rem;
position: relative;
padding-left: 3.4rem;
}

.checklist-item h3::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M9 11L12 14L20 6M20 12V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H15' stroke='%2300CCFF' stroke-width='2.625' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

.cuidar__cta {
width: 100%;
max-width: 85.5rem;
text-align: center;
margin: var(--space-xl) auto 0;
/* width: 85.5rem; */
}

.cuidar__cta h2 {
font-size: var(--font-size-xl);
margin-bottom: 4rem;
}

@media (max-width: 1024px) {
.cuidar {
    padding: 5.6rem 0;
}
.cuidar__conteudo {
    flex-direction: column;
}
.cuidar__intro {
    margin-bottom: var(--space-lg);
}
.cuidar__intro p {
    max-width: 53.3rem;
}
.cuidar__checklist {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.6rem
}
.checklist-item {
    flex: 1 1 calc((100% - 20px) / 2);
}
.cuidar__cta h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}
.cuidar__cta {
    margin: var(--space-lg) auto 0;
}
}

@media (max-width: 768px) {
.cuidar {
    padding: 4.8rem 0;
}
.cuidar__checklist {
    flex-direction: column;
}
}

/* ================================================================
Carrossel de sites
================================================================ */

.carrossel-mockup {
position: relative;
padding: 7rem 0;
overflow: hidden;
}

.carrossel-mockup__wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.carrossel-mockup__slider {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 4.8rem;
max-width: 100%;
}

.carrossel-slide {
flex: 0 0 auto;
width: 216px;
height: 468px;
opacity: 0.4;
transition: all 0.3s ease;
}

.carrossel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 1rem;
}

/* Slide ativo centralizado no container */
.carrossel-slide--ativo {
width: 264px;
height: 572px;
opacity: 1;
z-index: 1;
}

/* mockup fixo no centro */
.carrossel-mockup__frame {
position: absolute;
width: 298px;
height: 600px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 2;
}

.carrossel-mockup__frame img {
width: 100%;
height: auto;
display: block;
}

/* Esconde barra de rolagem (precaução) */
.carrossel-mockup__slider::-webkit-scrollbar {
display: none;
}
.carrossel-mockup__slider {
-ms-overflow-style: none;
scrollbar-width: none;
}

@media (max-width: 1024px) {
.carrossel-mockup {
    padding: 5.6rem 0;
}
}

@media (max-width: 768px) {
.carrossel-mockup {
    padding: 4.8rem 0;
}
}
/* ================================================================
Depoimentos
================================================================ */
.depoimentos {
padding: 7rem 0;
max-width: 125rem;
margin: 0 auto;
}

.depoimentos__titulo {
text-align: center;
margin-bottom: var(--space-xl);
}

.depoimentos__layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
grid-template-areas:
    "card1 card2"
    "card1 card3"
    "card4 card4";
}

.card-depoimento {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
gap: 2rem;
background-color: var(--preto-claro-cw);
border: 1px solid var(--cinza-escuro-cw);
border-radius: var(--border-radius-md);
padding: 5rem 2rem 2rem;
}

[data-theme="light"] .card-depoimento {
background-color: var(--cinza-cw);
}

/* Posicionamento */
.card1 { grid-area: card1; min-height: 40rem; }
.card2 { grid-area: card2; min-height: 19rem; }
.card3 { grid-area: card3; min-height: 19rem; }
.card4 { grid-area: card4; min-height: 19rem; width: 100%; }

/* SVG icônico */
.card-depoimento svg {
position: absolute;
top: -1rem;
left: 2rem;
pointer-events: none;
}

/* Autor */
.card-depoimento__autor {
gap: 2rem;
}

.card-depoimento__autor img {
width: 3.2rem;
height: 3.2rem;
object-fit: cover;
}

@media (max-width: 1375px) {
.depoimentos {
    width: 90%;
}
}

@media (max-width: 1024px) {
.depoimentos {
    padding: 5.6rem 0;
}
.depoimentos__titulo {
    margin-bottom: var(--space-lg);
}
.depoimentos__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "card1 card1"
    "card2 card3"
    "card4 card4";
}

.card1, .card4 {
    min-height: auto;
}
}

@media (max-width: 767px) {
.depoimentos {
    padding: 4.8rem 0;
    width: calc(100% - 4rem);
    margin: 0 2rem;
}

.depoimentos__layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.card1, .card2, .card3, .card4 {
    width: 100%;
    min-height: auto;
}
}

/* ================================================================
Blog
================================================================ */

.blog {
padding: 7rem 0;
}

.blog__titulo {
margin-bottom: var(--space-xl);
}

.blog__posts {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2rem;
}

.blog-card {
flex: 0 0 calc((100% - 3 * 2rem) / 4); /* 4 cards por linha com 3 gaps de 2rem */
max-width: calc((100% - 3 * 2rem) / 4);
display: flex;
flex-direction: column;
background-color: var(--preto-claro-cw);
border: 1px solid var(--cinza-escuro-cw);
border-radius: 2rem;
overflow: hidden;
}

[data-theme="light"] .blog-card {
background-color: var(--cinza-cw);
}

.blog-card__thumb {
position: relative;
margin: 2rem 2rem 0;
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
overflow: hidden;
}

.blog-card__imagem {
width: 100%;
height: 17.8rem;
object-fit: cover;
display: block;
}

.blog-card__thumb::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4.4rem;
background: linear-gradient(180deg, rgba(42, 42, 42, 0.00) 0%, rgba(42, 42, 42, 0.90) 100%);
pointer-events: none;
z-index: 1;
}

[data-theme="light"] .blog-card__thumb::after {
background: linear-gradient(180deg, rgba(249, 249, 249, 0.00) 0%, rgba(249, 249, 249, 0.90) 100%);
}

.blog-card__conteudo {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 2rem;
border-top: 1px solid var(--cinza-escuro-cw);
position: relative;
}

.btn-blog {
align-self: flex-end;
}

[data-theme="light"] .btn-blog path {
stroke: var(--color-text)
}

@media (max-width: 1024px) {
.blog {
    padding: 5.6rem 0;
}
.blog__titulo {
margin-bottom: var(--space-lg);
}
.blog-card {
flex: 0 0 calc((100% - 1 * 2rem) / 2);
max-width: calc((100% - 1 * 2rem) / 2);
}
}

@media (max-width: 768px) {
.blog {
    padding: 4.8rem 0;
}
.blog-card {
flex: 0 0 100%;
}
}

@media (max-width: 512px) {
.blog-card {
max-width: 100%;
}
}