/* =====================================================================================================
   Responsividade do site público (celular e tablet).
   Carregado em base.html DEPOIS de style_layout4_v2.css — só sobrescreve o que muda em telas menores.
   Breakpoints alinhados ao Bootstrap 5.3: 991.98px (tablet), 767.98px (celular grande), 575.98px (celular).
   ===================================================================================================== */

/* ---------------------------------------------- globais ---------------------------------------------- */

main img {
    max-width: 100%;
    height: auto;
}

/* cartões de formulário soltos no <main> (contato, ouvidoria, login, cadastro, 2FA, recuperação de senha):
   o <main> ocupa a largura toda, então a centralização vem da margem automática do próprio cartão.
   Os max-width inline dos templates (700px no contato, 500px nas telas de senha) continuam valendo. */
main > .coluna-apresentacao,
main > .div_login,
main > .div_login2 {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

main > .coluna-apresentacao {
    margin-top: 40px;
    margin-bottom: 40px;
}

main > .div_login,
main > .div_login2 {
    max-width: 560px;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* botão do menu: só aparece abaixo de 992px */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dbeedd;
    border-radius: 8px;
    background: #fff;
    color: #184D1D;
    font-size: 1.6rem;
    cursor: pointer;
}

.menu-toggle:focus-visible {
    outline: 2px solid #278F2D;
    outline-offset: 2px;
}

/* caixa da apresentação dos planos (antes inline em _plan_business.html) */
.box_planos {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 40px 0;
}

.card-plano {
    width: min(350px, 100%);
}

.apresentacao-img {
    width: 60%;
    height: auto;
    border-radius: 8px;
}

/* instrução do fluxograma: mouse x toque */
.instr-touch {
    display: none;
}

.blog-grid,
.faq-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.post-content-wrapper img {
    max-width: 100%;
    height: auto;
}

.meta-info-wrapper {
    flex-wrap: wrap;
}

.foot_p,
.direitos-autorais {
    font-size: 12px;
}

/* sem hover real (touch): evita card "levantado" e sombra presa depois do toque */
@media (hover: none) {
    .blog-card:hover,
    .faq-card:hover {
        transform: none;
        box-shadow: none;
    }

    .instr-mouse {
        display: none;
    }

    .instr-touch {
        display: inline;
    }

    .hotspot.ativo {
        outline: 2px solid rgba(39, 143, 45, 0.6);
        border-radius: 8px;
    }
}

/* ---------------------------------------------- tablet ----------------------------------------------- */

@media (max-width: 991.98px) {

    /* cabeçalho compacto e fixo no topo */
    header {
        position: sticky;
        top: 0;
        z-index: 1040;
        margin: 0;
        padding: 0.5rem 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    nav {
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0;
    }

    nav .logo {
        order: 1;
        margin: 0;
        padding: 4px 0;
    }

    nav .logo img {
        width: 110px;
    }

    nav .dropdown {
        order: 2;
        margin-left: auto;
        margin-right: 12px;
    }

    .menu-toggle {
        display: inline-flex;
        order: 3;
    }

    /* menu vira painel vertical abaixo do cabeçalho */
    .ul-menu {
        order: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 8px 0 4px;
        padding: 8px 0;
        border-top: 1px solid #e9ecef;
    }

    nav.menu-aberto .ul-menu {
        display: flex;
    }

    .li-menu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin: 2px 0;
        padding: 10px 16px;
        font-size: 16px;
        text-align: left;
    }

    .li-menu a.active,
    .li-menu a:hover {
        box-shadow: none;
    }

    /* home: apresentação empilhada */
    .container-apresentacao {
        flex-direction: column;
        height: auto;
        margin: 16px auto;
        padding: 0 12px;
        gap: 16px;
    }

    .coluna-apresentacao,
    .coluna-apresentacao2 {
        width: 100%;
        margin: 0;
        padding: 24px 16px;
    }

    .apresentacao-img {
        width: 100%;
        max-width: 320px;
        margin: 8px 0 16px;
    }

    /* blog: sidebar cai para baixo do grid */
    .blog-container {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 24px auto;
    }

    .cta-box {
        position: static;
    }

    /* rodapé em 2 colunas */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* ------------------------------------------ celular grande ------------------------------------------- */

@media (max-width: 767.98px) {

    /* formulários públicos: campo nunca maior que a tela (neutraliza o size=50 dos inputs) */
    .campo_form_login,
    .campo_form_login2 {
        width: 100%;
    }

    .campo_form_login label,
    .campo_form_login2 label {
        width: 100%;
        font-size: 16px;
    }

    .campo_form_login input:not([type="checkbox"]):not([type="radio"]),
    .campo_form_login select,
    .campo_form_login textarea,
    .campo_form_login2 input:not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        max-width: 100%;
        margin: 6px 0;
        font-size: 16px; /* evita o zoom automático do iOS ao focar */
    }

    .form_login {
        width: 100%;
    }

    .div_login,
    .div_login2,
    main > .div_login,
    main > .div_login2 {
        flex: 0 0 auto;
        width: calc(100% - 24px);
        margin: 16px auto;
        padding: 24px 16px;
        box-shadow: 0 4px 14px rgba(16, 48, 18, 0.18);
    }

    .botao_login_texto,
    div.botao_login_texto {
        width: 100%;
        margin: 20px 0 8px;
        text-align: center;
    }

    .campo_form_botao_texto {
        display: inline-block;
        padding: 8px 4px;
    }

    /* fale conosco / ouvidoria usam .coluna-apresentacao fora da home */
    main > .coluna-apresentacao {
        width: calc(100% - 24px);
        margin: 16px auto;
        padding: 24px 16px;
    }

    /* fluxograma: imagem em cima, card explicativo embaixo */
    .container-fluxograma,
    main > .container:has(.map-container) {
        flex-direction: column;
        width: calc(100% - 24px);
        margin: 16px auto;
    }

    main > .container:has(.map-container) {
        display: flex;
    }

    .map-container,
    .info-panel {
        width: 100%;
    }

    .info-panel {
        padding: 12px 0 0;
    }

    .info-panel .card {
        padding: 20px;
    }

    /* quem somos */
    .quem-somos-container {
        gap: 24px;
        margin: 24px auto;
    }

    .quem-somos-destaque {
        font-size: 1rem;
        padding: 16px 20px;
    }

    /* faq */
    .faq-container {
        margin: 24px auto;
    }

    .faq-toolbar label {
        display: block;
        margin-bottom: 6px;
    }

    .faq-toolbar .form-select {
        width: 100% !important; /* sobrepõe o style inline width:auto */
    }

    .faq-grid,
    .blog-grid {
        gap: 20px;
    }

    /* política: tabela rola sozinha, sem empurrar a página */
    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* mensagens flash */
    .container.mt-3 {
        width: calc(100% - 24px);
    }
}

/* ---------------------------------------------- celular ---------------------------------------------- */

@media (max-width: 575.98px) {

    .botao_login_submit,
    .botao-upload-estilizado {
        width: 100%;
    }

    /* planos */
    .box_planos {
        padding: 16px 12px;
        gap: 16px;
    }

    .card-plano {
        margin: 0;
        padding: 20px;
    }

    .plan-header {
        gap: 12px;
    }

    .plan-logo {
        width: 64px;
        height: 64px;
        margin-right: 0;
    }

    /* post do blog */
    .post-content-wrapper {
        padding: 24px 16px !important; /* sobrepõe o padding inline de 40px */
    }

    .post-section p,
    .post-section li {
        font-size: 1.05rem;
    }

    .post-section h2 {
        margin-top: 32px;
    }

    .post-conclusion {
        padding: 20px;
        margin-top: 40px;
        font-size: 1.05rem;
    }

    /* como comprar */
    .como-comprar-container {
        margin: 24px auto;
    }

    .como-comprar-passos li {
        gap: 12px;
        padding: 16px;
    }

    /* blog */
    .card-content {
        padding: 18px;
    }

    /* rodapé em 1 coluna */
    .footer-container {
        grid-template-columns: 1fr;
        padding: 32px 16px 16px;
    }

    .footer_coluna {
        text-align: center;
    }

    .footer_coluna ul li {
        margin-bottom: 4px;
    }

    .footer_coluna ul li a {
        display: inline-block;
        padding: 6px 0;
    }

    .footer-payment-icons,
    .footer-social-icons {
        justify-content: center;
    }

    .foot_p,
    .direitos-autorais {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ------------------------- planos de campanha e combinações (/plan) ------------------------- */
.planos-secao {
    padding: 24px 16px 8px;
}

.planos-secao-cabecalho {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.planos-secao-cabecalho p {
    color: #444;
}

.plan-icone {
    font-size: 3rem;
    color: #184D1D;
    margin-right: 24px;
}

.planos-regras {
    max-width: 760px;
    margin: 8px auto 0;
    padding-left: 20px;
    font-size: 0.9rem;
    color: #444;
}

.planos-regras li {
    margin-bottom: 6px;
}

/* a tabela rola sozinha em telas estreitas, sem rolar a página */
.tabela-combinacao-wrap {
    max-width: 1000px;
    margin: 16px auto 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabela-combinacao {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
}

.tabela-combinacao th,
.tabela-combinacao td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.tabela-combinacao thead th {
    background: #184D1D;
    color: #ffffff;
    font-weight: 600;
}

.tabela-combinacao tbody th {
    text-align: left;
    white-space: nowrap;
}

.tabela-combinacao a {
    color: #184D1D;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tabela-combinacao a:hover,
.tabela-combinacao a:focus-visible {
    text-decoration: underline;
}

.tabela-combinacao td.recomendado {
    background: #eaf5eb;
}

.tabela-combinacao-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

.tabela-combinacao-selo {
    display: block;
    font-size: 0.7rem;
    color: #278F2D;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 575.98px) {
    .plan-icone {
        font-size: 2.25rem;
        margin-right: 0;
    }

    .tabela-combinacao {
        font-size: 0.85rem;
    }
}