/* ============================================================
   Ajustes de responsividade do site público (Etapa 6C3)
   Carregado por último no _Layout: vale para todas as páginas.
   ============================================================ */

/* Mídia nunca passa da largura disponível. */
img, iframe, video, embed, object { max-width: 100%; }
img { height: auto; }

/* Texto longo sem espaço (e-mail, link, nome de arquivo) quebra em vez de
   empurrar a página para o lado. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, blockquote, figcaption { overflow-wrap: break-word; }
.bdc-topo .bdc-contagem { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

/* reCAPTCHA tem 304px fixos: centraliza e, em celular bem estreito, diminui
   um pouco para não sair da tela. */
.recaptcha-wrapper { display: flex; justify-content: center; margin: 10px 0 18px; }
@media (max-width: 359px) {
    .recaptcha-wrapper .g-recaptcha { transform: scale(.86); transform-origin: center top; }
}

/* Mapa do Contato sempre na largura da coluna. */
.map-responsive iframe { width: 100%; }

/* Cards de planos: nome/preço grandes não estouram o card no celular. */
.divider-wrapper h2, .divider-wrapper h3 { overflow-wrap: anywhere; }

/* Rede de segurança: se algum elemento novo passar da tela, a página não
   ganha rolagem lateral (o elemento é cortado, mas o site não "dança"). */
/* "clip" (e não "hidden") para não transformar o body numa caixa de rolagem
   - isso quebraria a rolagem da página e o menu fixo. */
@supports (overflow-x: clip) {
    body { overflow-x: clip; }
}

/* Contato e Contratar: a seção é flex em coluna, e o .container dentro
   dela não encolhia abaixo do conteúdo (e-mail, títulos) - passava ~25px da
   tela no celular. */
.contact-section > .container { width: 100%; max-width: 100%; min-width: 0; }
@media (min-width: 768px) { .contact-section > .container { width: 750px; } }
@media (min-width: 992px) { .contact-section > .container { width: 970px; } }
@media (min-width: 1200px) { .contact-section > .container { width: 1170px; } }
#contact_information p { overflow-wrap: anywhere; }

/* Termos/Privacidade: texto vindo do painel pode ter link longo. */
.text-justify { overflow-wrap: anywhere; }

/* Base de Conhecimento: título de artigo relacionado longo. */
.bdc-relacionado span { min-width: 0; overflow-wrap: anywhere; }
