.gap-3 .secr h4 {
	color: rgb(214,11,82) !important;
}
.gap-3 .secr {
	background: rgb(230,230,230) !important;
}

/* CTA Section Customizada */
.cta-custom {
    background: rgb(214, 11, 82);
}

.cta-custom .cta-bg-overlay {
    background: rgb(214, 11, 82);
}

.cta-custom .cta-title {
    color: #fff;
}

.cta-custom .cta-button {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.cta-custom .cta-button:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}

/* Contact Section Customizada */
.contact-header {
    background-color: rgb(214, 11, 82) !important;
}

.contact-header .contact-title {
    color: #fff;
}

.contact-header .contact-subtitle {
    color: #fff;
}

.justify-center.logo {
	max-width: 100px !important;
}

/* Footer Copyright Text */
.footer-copyright {
    color: #fff !important;
}
.bg-left-top .dash {
    background-position: center left !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}






/* Grid de Problemas */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    width: 100%;
}

/* Tablet e Desktop */
@media (min-width: 640px) {
    .problems-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* Item Individual */
.problem-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .problem-item {
        gap: 1rem;
    }
}




.caption.logo {
    width: 180px;
    height: auto;
}
@media(max-width: 767px) {
    .caption.logo {
        width: 120px;
    }
}








/*
  Este é o código CSS que replica o comportamento das classes
  do Tailwind CSS usadas na solução anterior.
*/

/* Classe para o contêiner principal dos itens */
.benefit-grid {
  display: grid;
  gap: 0.75rem; /* Equivalente ao 'gap-3' do Tailwind */
  
  /* Padrão para mobile (1 coluna), 'grid-cols-1' */
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/*
  Media Query para telas a partir de 640px de largura
  (Equivalente ao prefixo 'sm:' do Tailwind)
*/
@media (min-width: 640px) {
  .benefit-grid {
    /* Layout de 2 colunas, 'sm:grid-cols-2' */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  Media Query para telas a partir de 1024px de largura
  (Equivalente ao prefixo 'lg:' do Tailwind)
*/
@media (min-width: 1024px) {
  .benefit-grid {
    /* Layout de 4 colunas, 'lg:grid-cols-4' */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Classe aplicada ao 5º item para centralizar a segunda linha */
  .benefit-grid .centered-item {
    /* Começa na segunda coluna do grid, 'lg:col-start-2' */
    grid-column-start: 2;
  }
}

.disclaimer-bottom {
    font-size: 32px;
    color: var(--color-primary-500) !important;
}




.fot {
    background: #0e0d0d;
}

.text-theme-text-secondary.dep {
    font-family: "Hanken Grotesk", serif !important;
    font-weight: 400 !important;
    font-size: 18px;
}

.price-value.preco-original {
    color: #696966;
    font-family: Hanken Grotesk;
    font-size: 15px;
    font-weight: 400;
    text-decoration: line-through;
    text-align: right;
}
.price-value {
    color: #0e0d0d !important;
    font-size: 15px;
}

.pricing-discount-label {
    color: rgb(214,11,82);
    font-weight: 700;
    font-size: 18px;
    text-align: right;
}

.imgil1 {
    width: 300px;
    height: auto;
    text-align: left;
}
@media(max-width: 767px) {
    .imgil1 {
        width: 200px;

    }
}

.imgil2 {
    width: 600px;
    height: auto;
    text-align: left;
}
@media(max-width: 767px) {
    .imgil2 {
        width: 300px;

    }
}


/* Estilização da seção de CTA para o WhatsApp */
.cta-whatsapp-fundo .animate-y.rounded-3xl {
  background-color: rgb(214,11,82); /* Cor de fundo escura para a seção */
  background-image: url('/assets/images/seta-semparar.svg');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 400px;
  position: relative; /* Necessário para o z-index funcionar se precisar */
}

/* Cor dos textos da seção */
.cta-whatsapp-fundo h4,
.cta-whatsapp-fundo p.body1 {
  color: #fff;
}

/* Cor de fundo do círculo do ícone do WhatsApp */
.cta-whatsapp-fundo .w-\[60px\] {
    background-color: #25d366; /* Um branco com transparência para destacar levemente */
}

/* Estilização do botão */
.cta-whatsapp-fundo .btn {
  background-color: #0e0d0d;
  color: #fff;
  border-color: #0e0d0d; /* Garante que a borda também mude */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transição suave */
}

/* Efeito de hover para o botão */
.cta-whatsapp-fundo .btn:hover {
  background-color: #000; /* Pode escurecer um pouco mais no hover */
  border-color: #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px); /* Efeito de elevação suave */
}
@media(max-width: 767px) {
    .cta-whatsapp-fundo .animate-y.rounded-3xl {
        background-size: 200px;
    }
}

.secd {
    margin-bottom: 40px;
}


/* Estilização da seção de indicação digital */
.secao-indicacao-digital {
  background-color: rgb(214, 11, 82);
  padding: 80px 0; /* Espaçamento vertical (topo e base) */
  width: 100%; /* Garante a largura total */
  text-align: center;
}

/* Cor branca para o título da seção */
.secao-indicacao-digital .titulo-indicacao {
  color: #ffffff;
  /* Herda os outros estilos da classe h2 original */
}

/* Cor branca para o subtítulo da seção */
.secao-indicacao-digital .subtitulo-indicacao {
  color: #ffffff;
  opacity: 0.9; /* Uma leve transparência para diferenciar do título */
  /* Herda os outros estilos da classe h6 original */
}

/* Garante que a imagem esteja centralizada e responsiva */
.secao-indicacao-digital img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
}




.whatsapp-iconmb {
    width: 18px;
    height: 18px;
}
.whatsapp-iconmb path {
    fill: #25d366;
}

@media(max-width: 767px) {
    .justify-center.logo.ft {
        width: 70px !important;
    }
}


.whatsapp-iconmb {
  display: block; 
}


@media (min-width: 768px) {
  /* Esconde o elemento com a classe .whatsapp-iconmb */
  .whatsapp-iconmb {
    display: none;
  }
}