/* ========================================= */
/* SEÇÃO VÍDEO — MOBILE / TABLET             */
/* Compensa a nav flutuante (position:fixed) */
/* que sobrepõe o vídeo em telas menores.    */
/* Não afeta desktop (>= 1025px).            */
/* ========================================= */
@media (max-width: 1024px) {
    section:first-of-type {
        padding-top: 80px;
    }

    /* Reduz padding da seção Hero (2ª seção: título + botão) */
    section:nth-of-type(2) {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

.hero-blob-bg {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.hero-image-shape {
    border-radius: 140px 140px 60px 140px;
}

/* ========================================= */
/* CARDS "Como funciona" — MOBILE / TABLET   */
/* Esconde o <br> no título dos cards para   */
/* manter "Abordagem TCC" em uma só linha.   */
/* Não afeta desktop (>= 1025px).            */
/* ========================================= */
@media (max-width: 1024px) {

    /* Esconde o <br> dentro dos h3 dos cards */
    [class*="bg-white"] [class*="rounded-3xl"] h3 br {
        display: none;
    }
}

/* ========================================= */
/* FOTO TERAPIA & CONTEÚDO — MOBILE / TABLET */
/* Layout conforme design: 3 itens no topo,  */
/* 2 embaixo, foto maior.                    */
/* ========================================= */
@media (max-width: 1024px) {

    /* O grid da seção vira coluna única com flex */
    .grid.grid-cols-1.lg\:grid-cols-12 {
        display: flex;
        flex-direction: column;
    }

    /* Conteúdo "A terapia pode te ajudar a:" vem primeiro */
    #conteudo-terapia {
        order: 1;
    }

    /* Centraliza e diminui o título */
    #conteudo-terapia h2 {
        text-align: center;
        font-size: 26px;
        margin-bottom: 10px;
    }

    /* Transforma o grid de 2 colunas em um flex-wrap para 3 cima / 2 baixo */
    #conteudo-terapia .grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* Controla a largura de cada item para forçar o layout 3 / 2 */
    #conteudo-terapia .grid>div {
        flex: 0 0 calc(33.33% - 12px);
        min-width: 95px;
        max-width: 130px;
    }

    /* Texto dos itens menorzinho e centralizado */
    #conteudo-terapia p {
        font-size: 10px;
        line-height: 1.4;
    }

    /* Esconde a moldura vazada da foto para ficar mais clean */
    #foto-terapia .absolute.inset-4.border {
        display: none;
    }

    /* Foto de terapia vem depois */
    #foto-terapia {
        order: 2;
        justify-content: center;
        margin-top: 15px;
    }

    /* Foto ocupa um tamanho menor e fica centralizada */
    #foto-terapia .relative {
        max-width: 85%;
        width: 100%;
        margin: 0 auto;
    }

    #foto-terapia img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center top;
        border-radius: 24px;
    }
}