#principal {
  color: var(--darkblue);
  background-color: #fff;
}

.principal {
  display: flex;
  align-items: center;
}

.principal-text .descricao {
  font-size: 1.2rem;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 20px;
}

.principal-text .descricao span {
  font-weight: 700;
}

.principal-pill {
  display: inline-block;
  background-color: transparent;
  color: var(--darkblue);
  border: 1px solid var(--darkblue);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.principal-subtexto {
  font-size: 0.95rem;
  color: var(--darkblue);
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.principal-text h1 {
  font-weight: 700;
  line-height: 1.2;
}

.principal-text .subtitulo {
  line-height: normal;
  font-weight: normal;
  white-space: nowrap;
}

.button {
  color: var(--white);
  background-color: var(--roxo);
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  padding: 10px 25px;
}

.button:hover {
  color: var(--white);
  background-color: var(--roxo);
  border: none;
  text-decoration: none;
}

.principal .button {
  display: inline-block;
  padding: 10px 34px;
}

body > section#recursos-e-planos,
body > section#principal {
  padding: 100px 10px !important ;
}

@media (min-width: 1024px) {
  body > section#recursos-e-planos,
  body > section#principal {
    padding: 130px 10px !important ;
  }

  body > section#duvidas-pernambuco {
    padding: 40px 10px 100px !important;
  }

  #duvidas-pernambuco .duvidas-pernambuco-wrapper {
    padding: 0px !important;
  }
}

@media (max-width: 992px) {
  .faq-duvidas-pernambuco.faq-duvidas {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 1280px) {
  body > section#recursos-e-planos,
  body > section#principal {
    padding: 170px 10px !important ;
  }
}

.principal .botao {
  padding: 30px 0 0 0;
}

.principal-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.principal-image {
  max-width: 50%;
}

.principal-text {
  max-width: 50%;
}

.principal-image img,
.principal-image-mobile img {
  height: auto;
  object-fit: contain;
}

.principal-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--roxo);
  border-radius: 16px;
  background-color: #fff;
  padding: 1.5rem;
  margin-top: 2rem;
}

.principal-card {
  flex: 3 0 0;
  padding: 1rem 2rem;
  border-radius: 12px;
  max-width: 300px !important;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.principal-card-numero {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--roxo);
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}

.principal-card-label {
  font-size: 0.95rem;
  color: var(--roxo);
  margin: 0;
}

.principal-card-texto p {
  font-size: 0.95rem;
  color: var(--darkblue);
  margin: 0;
  line-height: 1.5;
}

.principal-card-texto p span {
  font-weight: 700;
}

.principal-card-texto {
  flex: 4 0 0;
  text-align: justify;
  box-shadow: none !important;
  max-width: 400px !important;
}

@media (max-width: 992px) {
  .principal-cards {
    flex-direction: column;
    align-items: center;
  }

  .principal-card {
    max-width: 100%;
    box-shadow: none;
  }

  .principal-text h1 {
    line-height: normal;
  }
}

/* MOBILE */
@media (max-width: 720px) {
  .ocultar-desktop {
    display: block !important;
  }

  .principal-subtexto {
    font-size: 1.2rem;
  }

  .principal-card-label {
    font-size: 1.4rem !important;
  }

  .operacao-centralizada-texto {
    text-align: center;
  }

  .santa-cruz-conteudo {
    max-width: 100vw !important;
  }

  #duvidas-pernambuco {
    padding: 0px 10px 50px 0px !important;
  }

  .principal {
    display: flex;
    width: 88vw;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .principal-text {
    align-items: center;
    text-align: center;
    width: 100% !important;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }

  .principal-card-numero {
    font-size: 3.2rem;
  }

  .principal-cards {
    gap: unset;
  }

  .principal-card {
    padding: 1rem 0 !important;
  }

  .principal-card p {
    margin-bottom: 0;
    line-height: 1.1;
    text-align: center;
  }

  .principal-image-mobile {
    order: -1;
    width: 88vw;
  }

  .principal-pill {
    order: 0;
    white-space: nowrap;
  }

  .principal-text h1 {
    order: 1;
    margin-bottom: 0px;
    font-size: 1.9rem;
  }

  .principal-text .descricao {
    order: 2;
  }

  .principal-text .botao {
    order: 3;
  }

  .principal-text .principal-subtexto {
    order: 4;
  }

  .principal-text .subtitulo {
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: normal;
  }

  .principal .button {
    white-space: nowrap;
  }

  .como-funciona {
    gap: 0px;

    & .button {
      margin-top: 40px;
    }
  }

  .logos img {
    max-width: 210px;
    max-height: 46px;
  }
}

/* Segunda seção: recursos, planos e integrações */
#recursos-e-planos.secao-cinza {
  background-color: var(--cinzaClaro);
  padding: 60px 0;
}

.depoimento-tl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.depoimento-tl-caixa-wrapper {
  flex: 1 1 33%;
  min-width: 280px;
}
.depoimento-tl-texto {
  flex: 1 1 47%;
  min-width: 280px;
}

@media (max-width: 991px) {
  .depoimento-tl-texto,
  .depoimento-tl-caixa-wrapper {
    flex: 1 1 100%;
  }
}

.recursos-planos-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}

.titulo-recursos-planos {
  max-width: 75%;
}

.operacao-centralizada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.operacao-centralizada-texto,
.operacao-centralizada-img-wrapper {
  flex: 1 1 40%;
  min-width: 280px;
}

@media (max-width: 991px) {
  .operacao-centralizada-texto,
  .operacao-centralizada-img-wrapper {
    flex: 1 1 100%;
  }
}

/* Seção Santa Cruz e região */
.secao-santa-cruz {
  background-color: #fff;
  padding: 60px 0;
}

.santa-cruz-conteudo {
  text-align: center;
  max-width: 55vw;
  margin: 0 auto;
}

.santa-cruz-titulo {
  color: var(--darkblue);
  font-weight: 700;
  margin-bottom: 1rem;
}

.santa-cruz-descricao {
  color: var(--darkblue);
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.santa-cruz-botao {
  margin-top: 0.5rem;
}

.santa-cruz-botao .button {
  display: inline-block;
  padding: 10px 34px;
}

/* FAQ Pernambuco - cabeçalho centralizado */
#duvidas-pernambuco .duvidas-pernambuco-header {
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

#duvidas-pernambuco .duvidas-pernambuco-titulo {
  color: var(--darkblue);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

#duvidas-pernambuco .duvidas-pernambuco-subtitulo {
  color: var(--darkblue);
  opacity: 0.9;
  margin-bottom: 0;
}

/* FAQ Pernambuco - duas colunas */
#duvidas-pernambuco .duvidas-pernambuco-wrapper {
  width: 100%;
}

.faq-duvidas-pernambuco.faq-duvidas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.faq-duvidas-pernambuco .faq-col-left,
.faq-duvidas-pernambuco .faq-col-right {
  flex: 1 1 calc(50% - 1rem);
  min-width: 280px;
}

@media (max-width: 991px) {
  .faq-duvidas-pernambuco .faq-col-left,
  .faq-duvidas-pernambuco .faq-col-right {
    flex: 1 1 100%;
  }
}

.depoimento-tl-titulo {
  font-weight: 700;
  color: var(--darkblue);
  margin-bottom: 1rem;
}

.depoimento-tl-descricao {
  font-size: 1.1rem;
  color: var(--darkblue);
  opacity: 0.9;
  margin-bottom: 0;
}

.depoimento-tl-caixa {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 2rem;
}

.depoimento-tl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  opacity: 0.7;
  pointer-events: none;
}

.depoimento-tl-imagem {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

.operacao-centralizada-titulo {
  font-weight: 700;
  color: var(--darkblue);
  margin-bottom: 1rem;
}

.operacao-centralizada-descricao {
  /* font-size: 1.1rem; */
  color: var(--darkblue);
  opacity: 0.9;
  margin-bottom: 0;
  line-height: 1.5;
}

.operacao-centralizada-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 991px) {
  .depoimento-tl-caixa-wrapper {
    order: 1;
  }

  .depoimento-tl-texto {
    order: 0;
    text-align: center;
  }

  .operacao-centralizada-texto {
    margin-bottom: 1.5rem;
  }
}

@media (max-height: 480px) {
  .principal-text {
    margin-top: 10px;

    & .subtitulo {
      font-size: 28px;
      margin-bottom: 10px;
    }
  }
}

/* Nesta página os planos exibem sempre o preço mensal (sem toggle anual) */
body.landing-page-twiggy #planos .box-planos-valores .mensal {
  display: block !important;
}
body.landing-page-twiggy #planos .box-planos-valores .anual {
  display: none !important;
}

/* Mobile: esconder o menu "Mais funcionalidades" dos cards de plano */
@media (max-width: 720px) {
  body.landing-page-twiggy #planos .btn-abrir-funcionalidades {
    display: none !important;
  }
}