/* #1936 — Área do Cliente como único botão do cabeçalho do site.
   Cor = botão do tema (--button-background); pílula como o "Sair" do portal.
   Seletores com .site-cta para vencer o .nav-list-link do bloco inline do layout. */
.site-cta,
.nav-list-link.site-cta {
    display: inline-block;
    padding: 0 18px;
    border-radius: 20px;
    background-color: var(--button-background, #45b4ae);
    color: #fff !important;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease;
}
.site-cta:hover,
.site-cta:focus-visible { background-color: #2a8e89; color: #fff !important; }
.site-cta:focus-visible { outline: 2px solid #2a8e89; outline-offset: 2px; }

/* Desktop: um respiro a mais separa o botão dos links de leitura */
.nav-desktop-list .nav-item-cta { margin-left: 8px; }

/* Gaveta do celular: botão na largura do texto, não um link de lista */
.nav-list .nav-item-cta .site-cta { display: inline-block; margin-top: 8px; line-height: 36px; }

/* Topo do celular: laterais com a mesma largura mantêm o logo no centro;
   o botão em duas linhas é o que deixa o logo inteiro (numa linha só ele
   espremia o logo até em 412px). */
.site-cta-break { display: none; }
@media (max-width: 767.98px) {
    .site-head-side { flex: 0 0 76px; max-width: 76px; }
    .site-cta-compact { padding: 5px 10px; font-size: 12px; line-height: 15px; border-radius: 14px; text-align: center; }
    .site-cta-break { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .site-cta { transition: none; }
}

/* #1981 — compartilhar a página: ícone discreto, feedback "Link copiado" */
.site-share { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid #cfe8e6; border-radius: 999px; background: #fff; color: #2a6f6b; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; position: relative; }
.site-share:hover { background: #eaf7f6; }
.site-share:focus-visible { outline: 2px solid #2a8e89; outline-offset: 2px; }
.site-share-compact { width: 38px; height: 38px; padding: 0; justify-content: center; border-color: transparent; }
.site-share-compact:hover { background: #eaf7f6; }
.site-share-done { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #1f1f1f; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 20; }
.site-share-done[hidden] { display: none; }
.nav-desktop-list .nav-item-share { margin-left: 4px; }
.utilities-container .site-share-compact { margin-left: 2px; vertical-align: middle; }
/* Celular: hambúrguer e compartilhar lado a lado, na mesma linha do logo */
@media (max-width: 767.98px) {
    .site-head-side .utilities-container { display: inline-flex; align-items: center; gap: 2px; }
    .site-head-side .site-share-compact { width: 34px; height: 34px; }
}
/* A Área da Cliente recebe o mesmo botão flutuante do site; ele nasce invisível no tema e é revelado aqui */
.portal-body .btn-whatsapp { opacity: 1; }

/* #1980 — Seta única nos carrosséis do site. O Swiper 5 desenha a própria seta
   num :after (fonte swiper-icons) e o tema já põe o chevron em SVG dentro do
   mesmo botão: sem isto aparecem duas setas sobrepostas. */
.swiper-button-prev::after,
.swiper-button-next::after { content: none !important; display: none !important; }

/* #1980 — Paginação do carrossel de banners centralizada. O seletor do Swiper
   (.swiper-container-horizontal > .swiper-pagination-bullets: left 0, largura
   100%) é mais específico que o do tema (left 50% + translateX(-50%)), e a soma
   dos dois jogava metade das bolinhas para fora da tela. */
.swiper-container-horizontal > .js-swiper-home-pagination,
.swiper-container-horizontal > .js-swiper-home-pagination-mobile { left: 50%; width: auto; }

/* #2164 — Texto inteiro nos cards dos carrosséis da home. O estilo herdado
   (base.blade.php) dá ao parágrafo da jornada width:100% e padding 0 20px: no
   celular a caixa mede 40px a mais que o card e o overflow:hidden do card corta
   o fim de cada linha. O tema ainda limita o parágrafo a 3 linhas com
   reticências, o que cortava o texto nos dois carrosséis (e um card no desktop). */
.js-home-banner-promotional .textbanner-paragraph { box-sizing: border-box; }
.section-banners-home .textbanner-paragraph { display: block; -webkit-line-clamp: unset; overflow: visible; }
