/* ============================================================
   IDEX — Padronizacao de alinhamento das secoes (DESKTOP)
   ------------------------------------------------------------
   Padrao (referencia: /indices/): o conteudo de toda secao vive
   num bloco central de max 1280px com 54px de gutter lateral.

   Algumas secoes colocavam o gutter na SECAO (fora do limite de
   1280) enquanto outras colocavam no CONTAINER (dentro) — isso
   gerava ate 54px de diferenca de alinhamento entre secoes em
   telas largas. Aqui movemos o gutter para o CONTAINER (Padrao A).

   Escopo: apenas DESKTOP (>=769px). O mobile (<=768px) fica
   intocado (ja estava correto).
   ============================================================ */

@media (min-width: 769px) {

    /* ---------------- EMPRESA ---------------- */
    .empresa-destaques,
    .empresa-estrutura,
    .empresa-faq,
    .empresa-historia,
    .empresa-imprensa,
    .empresa-lideranca {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .empresa-destaques__container,
    .empresa-estrutura__container,
    .empresa-faq__container,
    .empresa-historia__container,
    .empresa-imprensa__container,
    .empresa-lideranca__container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 54px !important;
        padding-right: 54px !important;
    }

    /* Alinhamento interno do texto (regra: titulo a ESQUERDA no gutter
       quando esta sobre conteudo alinhado a esquerda; coluna de texto a
       DIREITA inicia em ~60% quando o layout e de coluna unica a direita). */

    /* lideranca: titulo alinhado a esquerda, igual aos cards abaixo */
    .empresa-lideranca__title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

}

/* historia + estrutura: mesma COLUNA do HERO. O hero usa width 605px
   (definido no idex-page-layout-polish: 605 em >=901, 100% em <=900).
   Replicamos os mesmos breakpoints para o texto comecar exatamente na
   mesma linha vertical do hero acima. */
@media (min-width: 901px) {
    .empresa-historia__content,
    .empresa-estrutura__intro {
        width: 605px !important;
        max-width: 605px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}
@media (min-width: 769px) and (max-width: 900px) {
    .empresa-historia__content,
    .empresa-estrutura__intro {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 769px) {

    /* ---------------- HOME ----------------
       Classes sem namespace (.cta/.logos colidem com outras paginas),
       por isso escopadas no body .page-template-page-home. */
    .page-template-page-home .artigos,
    .page-template-page-home .comparacao,
    .page-template-page-home .cta,
    .page-template-page-home .equipe,
    .page-template-page-home .grafico,
    .page-template-page-home .infraestrutura,
    .page-template-page-home .logos,
    .page-template-page-home .numeros,
    .page-template-page-home .servicos {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page-template-page-home .artigos__container,
    .page-template-page-home .comparacao__container,
    .page-template-page-home .cta__container,
    .page-template-page-home .equipe__container,
    .page-template-page-home .grafico__container,
    .page-template-page-home .infraestrutura__container,
    .page-template-page-home .logos__container,
    .page-template-page-home .numeros__container,
    .page-template-page-home .servicos__container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 54px !important;
        padding-right: 54px !important;
    }

    /* ---------------- POLITICAS / TERMOS ----------------
       (classes namespaced, sem risco de colisao) */
    .privacidade-conteudo,
    .cookies-conteudo,
    .regulatorias-conteudo,
    .termos-conteudo {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .privacidade-conteudo__container,
    .cookies-conteudo__container,
    .regulatorias-conteudo__container,
    .termos-conteudo__container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 54px !important;
        padding-right: 54px !important;
    }

    /* ---------------- METODOLOGIA ----------------
       Estava em 1200px com gutter de 40px. Padroniza para 1280 + 54px,
       como o resto do site. (faq fica como coluna centralizada propria.) */
    .metodologia-hero__container,
    .metodologia-cta__container,
    .metodologia-familias__container,
    .metodologia-pilares__container {
        max-width: 1280px !important;
        padding-left: 54px !important;
        padding-right: 54px !important;
    }

    /* ---------------- SOLUCOES ----------------
       Titulo do segmentos estava a direita (margin-left:auto) sobre um grid
       de 4 colunas full-width -> alinhado a esquerda, igual aos cards. */
    .solucoes-segmentos__title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

}

/* ---------------- PRODUTOS ----------------
   Intro do pricing na mesma coluna do hero (605px), como dados/hero. */
@media (min-width: 901px) {
    .produtos-pricing__intro {
        width: 605px !important;
        max-width: 605px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}
@media (min-width: 769px) and (max-width: 900px) {
    .produtos-pricing__intro {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ---------------- INDICES + PESQUISA ----------------
   Heros estavam com coluna mais estreita (indices 560px, pesquisa 555px),
   comecando mais a direita que os demais heros (605px). Padroniza em 605px,
   mantendo o alinhamento a direita (justify-content: flex-end). */
@media (min-width: 769px) {
    .indices-hero__content,
    .pesquisa-hero__content {
        width: min(100%, 605px) !important;
    }
}

/* ---------------- HOME: hero, problema e servicos na LINHA-605 ----------------
   Estado aprovado: a coluna de texto e 605px alinhada a DIREITA do container
   (1280 + 54px), no mesmo padrao das demais paginas. (As tentativas de mover
   para a esquerda / 2 colunas foram revertidas a pedido do cliente.)
   servicos: calc(100% - 605px) acompanha o container 1280 automaticamente.
   hero/problema: containers fora de um container 1280, entao formula por vw. */
@media (min-width: 769px) {
    /* hero: sem padding lateral -> texto = 605px, borda esquerda na linha-605. */
    .page-template-page-home .hero__container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: min(calc((100vw - 1280px) / 2 + 621px), calc(100vw - 659px)) !important;
        margin-right: auto !important;
    }
    /* problema: container sem padding (a secao tem 54) -> linha-605 - 54. */
    .page-template-page-home .problema__container {
        margin-left: min(calc((100vw - 1280px) / 2 + 567px), calc(100vw - 713px)) !important;
        margin-right: auto !important;
    }
    /* servicos: dentro do container 1280, calc(100% - 605px) = linha-605. */
    .page-template-page-home .servicos__titulo,
    .page-template-page-home .servicos__subtitulo {
        margin-left: calc(100% - 605px) !important;
    }
}

/* ============================================================
   QA — Botoes outline/transparente: hover padronizado (igual ao
   .btn--outline da home): FUNDO BRANCO + TEXTO ESCURO, para o texto
   nunca sumir no hover. Fora de media query (hover so em desktop/mouse).
   ============================================================ */
.btn--outline-light,
.metodologia-cta__btn--outline,
.solucoes-cta__btn--outline,
.produtos-dados__btn--outline {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible,
.metodologia-cta__btn--outline:hover,
.metodologia-cta__btn--outline:focus-visible,
.solucoes-cta__btn--outline:hover,
.solucoes-cta__btn--outline:focus-visible,
.produtos-dados__btn--outline:hover,
.produtos-dados__btn--outline:focus-visible {
    background: #fff !important;
    color: #1d1d20 !important;
    border-color: #fff !important;
}