/*
 * Ajustes de responsividade da landing (carregado depois do thigasdev.css).
 * O CSS original (export do Webflow) deixa algumas seções sem largura máxima no
 * computador e não empilha as colunas no celular.
 */

html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Âncoras do menu não ficam escondidas atrás da barra fixa */
section[id] { scroll-margin-top: 90px; }

/* Logo (topo e rodapé) */
.logo-xcred { display: block; height: 44px; width: auto; }

/* ---------- Computador: mesma coluna central em todas as seções ---------- */
.container-19,
.container-20,
.container-22,
.container-2,
.container-2-copy,
.container-7 {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Funcionalidades: 3 cards centralizados */
.container-18 {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 0;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.container-18 img { width: 100%; border-radius: 20px; }

/* Segurança / API / Suporte: grade de 3 colunas com ícone pequeno */
.container-22 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
    gap: 40px;
    margin-top: 32px;
}
/* O export posiciona os itens por ID (grid-area): solta para a grade acima */
.container-22 > .div-block-12 { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; }
.div-block-12 img { width: auto; height: 64px; max-width: none; margin-bottom: 16px; }
.text-block-19, .text-block-20, .text-block-21 { line-height: 1.55; }

/* Blocos de duas colunas */
.columns-2, .columns-3 { align-items: center; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.columns-2 img, .columns-3 img { width: 100%; }

/* Relatórios */
.container-3 { gap: 40px; align-items: center; box-sizing: border-box; }
.container-3 > img { width: 52%; flex: 0 0 52%; border-radius: 16px; }

/* Telas largas: hero não fica pequeno no meio */
@media screen and (min-width: 1440px) {
    .wrapper, .columns-2, .container-3, .container-29 { max-width: 1280px; }
}

/* ---------- Tablet ---------- */
@media screen and (max-width: 991px) {
    .section {
        height: auto;
        min-height: 0;
        padding-top: 120px;
        padding-bottom: 72px;
    }
    .wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .content-hero { width: 100%; max-width: 640px; }
    .heading-5 { font-size: 44px; line-height: 1.1; }
    .hero_right-wrap { width: 100%; max-width: 640px; margin: 0 auto; }
    /* Sem a rotação 3D: ela empurrava a imagem para fora da tela */
    .hero_ui-1 { transform: none !important; width: 100% !important; position: relative !important; }

    .container-18 { grid-template-columns: 1fr; grid-template-areas: none; max-width: 460px; padding: 0 24px; }
    .container-18 > * { grid-area: auto !important; }
    .container-22 { grid-template-columns: 1fr; gap: 32px; max-width: 560px; }

    .columns-2, .columns-3 { flex-direction: column; gap: 32px; }
    .columns-2 .w-col, .columns-3 .w-col { width: 100%; padding-left: 0; padding-right: 0; left: auto; right: auto; }
    .column-9 { order: 2; }

    .container-3 { flex-direction: column; padding: 40px 24px; margin-left: 16px; margin-right: 16px; width: auto; }
    .container-3 > img { width: 100%; flex: none; }
    .div-block-3 { width: 100%; }
    .column-10 .w-container, .container-25 { width: 100%; max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; }

    .container-7 { flex-wrap: wrap; justify-content: center; gap: 32px; }
}

/* ---------- Celular ---------- */
@media screen and (max-width: 767px) {
    .logo-xcred { height: 36px; }
    .heading-5 { font-size: 36px; }
    .paragraph-5 { font-size: 16px; line-height: 1.55; }
    .section-21, .section-22, .section-23, .section-24 { padding-top: 56px; padding-bottom: 56px; }
    .se-o-premia-es { padding-top: 56px; padding-bottom: 56px; }
    .text-block-16, .text-block-22, .text-block-24 { font-size: 28px; line-height: 1.2; }
    .container-7 { flex-direction: column; align-items: center; }
    .footer-wrapper-2 { align-items: center; }
}

@media screen and (max-width: 479px) {
    .heading-5 { font-size: 32px; }
    .wrapper, .columns-2, .columns-3 { padding-left: 20px; padding-right: 20px; }
}