/* #2382 — resumo "Trocar é fácil!" (página inicial e "Como funciona?").
   O carrossel é o da jornada do tema; aqui ficam só o título, o número no lugar
   da figura e o fechamento. O número usa o verde da marca em tom escuro sobre
   fundo claro, com contraste AA. */
.trocar-facil-head { padding: 0 20px; margin-bottom: 20px; text-align: center; }
.trocar-facil-title { margin: 0 0 6px; font-size: 26px; font-weight: 600; line-height: 1.2; color: #000; }
.trocar-facil-lead { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
/* O tema puxa o carrossel 30px para cima (inline em base.blade.php); com o título
   acima, ele cobriria o texto. */
.trocar-facil .js-banners-promotional.container-fluid { margin-top: 0 !important; }
.trocar-facil .textbanner-image { padding-top: 24px !important; }
/* Textos de tamanhos diferentes: os cards ficam da mesma altura e o "Saiba mais"
   fica alinhado na base. */
.trocar-facil .swiper-slide { height: auto; }
.trocar-facil .textbanner, .trocar-facil .textbanner-link { display: flex; flex-direction: column; height: 100%; }
.trocar-facil .textbanner-text { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; }
.trocar-facil .textbanner-text .btn { margin-top: auto !important; }
.trocar-facil .textbanner-paragraph { margin-bottom: 12px; }
.trocar-facil-num { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #eaf7f6; color: #1f6f6b; font-size: 36px; font-weight: 700; line-height: 1; }
.trocar-facil-cta { margin: 16px 0 0; padding: 0 20px; text-align: center; font-size: 16px; font-weight: 600; color: #1f6f6b; }
/* #2385 — convite ao cadastro, logo depois de "Vem circular com a Gente!" */
.trocar-facil-cadastro { max-width: 560px; margin: 20px auto 0; padding: 0 20px; text-align: center; }
.trocar-facil-cadastro-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; color: #000; }
.trocar-facil-cadastro-text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #333; }
/* Caixa alta pedida pela loja, como o "Saiba mais". O tema tira a caixa alta do
   .btn-primary com !important (estilo inline em base.blade.php); este seletor é
   mais específico. No HTML o texto fica normal para o leitor de tela não soletrar. */
.trocar-facil-cadastro .btn { display: inline-block; max-width: 100%; line-height: 1.4; text-transform: uppercase !important; font-weight: 600; }

/* Destinos do "Saiba mais" em "Como funciona?": o cabeçalho fixo (sticky) tem cerca
   de 214px no computador e 148px no celular e cobriria o título. */
.user-content h3[id] { scroll-margin-top: 240px; }

/* Mesmo corte do md do Bootstrap: em 768px o cabeçalho já é o do computador. */
@media (max-width: 767.98px) {
    .trocar-facil-title { font-size: 22px; }
    /* O parágrafo do tema tem 20px de recuo de cada lado; com 2,25 cards na tela,
       a coluna ficava com poucas palavras por linha. */
    .trocar-facil .textbanner-paragraph { padding: 0 4px; }
    .user-content h3[id] { scroll-margin-top: 170px; }
}