/* ==========================================================================
   FFA — Camada Mobile-First
   Carregada por ÚLTIMO (depois de style.css) para otimizar a experiência
   em telas pequenas sem alterar o CSS do tema. Tudo aqui é aditivo/override.
   Escala: base = celular; ajustes progressivos via min-width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fundamentos globais (todas as telas)
   Evita rolagem horizontal e garante que mídias nunca estourem o container.
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
svg,
video,
iframe,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Elementos flex/grid do tema podem forçar largura mínima e causar overflow. */
.row > [class*="col"],
.container,
.container-fluid {
    min-width: 0;
}

/* Quebra de palavras longas (URLs, e-mails) para não estourar no celular. */
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
span {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Alvos de toque acessíveis (mín. 44x44) em botões e links de ação. */
.btn,
.btn-inner,
.pdf-btn,
button[type="submit"],
.form-control,
input,
select,
textarea {
    min-height: 44px;
}

/* --------------------------------------------------------------------------
   2. Tablet e abaixo (<= 991px)
   Reduz os grandes espaçamentos verticais do tema (pt-120/pb-120 etc.).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Header compacto no mobile: logo + botão do menu na mesma linha, sem altura exagerada. */
    .header-area .header__main {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 !important;
        gap: 12px;
        min-height: 0 !important;
    }
    .header-area .logo { margin: 0 !important; padding: 0 !important; }
    /* height definido (não max-height) para SVGs com viewBox sem width/height não colapsarem. */
    .header-area .logo img { height: 44px; width: auto; max-width: 62vw; object-fit: contain; }
    .header-area .bars { margin: 0 !important; line-height: 1; }
    .header-area .bars i { font-size: 22px; }

    .pt-160 { padding-top: 90px !important; }
    .pb-160 { padding-bottom: 90px !important; }
    .pt-120 { padding-top: 70px !important; }
    .pb-120 { padding-bottom: 70px !important; }
    .pt-100 { padding-top: 60px !important; }
    .pb-100 { padding-bottom: 60px !important; }
    .pb-80  { padding-bottom: 50px !important; }

    /* Paddings laterais grandes do bloco de vídeo. */
    .pl-80 { padding-left: 24px !important; }
    .pr-80 { padding-right: 24px !important; }
    .pr-60 { padding-right: 0 !important; }
    .pr-50 { padding-right: 0 !important; }

    /* Cartões com padding exagerado (p-5 = 3rem) ficam mais enxutos. */
    .p-5 { padding: 1.25rem !important; }

    /* Empilha imagem + texto com respiro entre eles. */
    .about-two__image.pr-60,
    .about__image { margin-bottom: 32px; }
}

/* --------------------------------------------------------------------------
   3. Celular (<= 767px)
   Tipografia fluida + ajustes de layout que realmente pesam no mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Tipografia fluida: escala suave conforme a largura da tela. */
    .banner-two__content h1 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; line-height: 1.15 !important; }
    .banner-two__content h4 { font-size: clamp(1rem, 4.5vw, 1.4rem) !important; }
    .banner__inner-page h2  { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
    .section-header h2,
    h2 { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; line-height: 1.2 !important; }
    h3 { font-size: clamp(1.25rem, 5vw, 1.6rem) !important; }
    .fs-30 { font-size: 1.35rem !important; }

    /* Números dos contadores (34%, 21%...) proporcionais. */
    .video-area .info h2,
    .count { font-size: clamp(2rem, 10vw, 3rem) !important; }

    /* Reduz margens de topo herdadas (mt-80/mt-50/mt-40) no mobile. */
    .mt-80 { margin-top: 40px !important; }
    .mt-50 { margin-top: 28px !important; }
    .mt-40 { margin-top: 24px !important; }

    /* Banner inicial: altura confortável + conteúdo centralizado verticalmente. */
    .banner-two__slider .swiper-slide {
        min-height: 480px;
        display: flex !important;
        align-items: center;
    }
    .banner-two__slider .swiper-slide .container {
        position: relative;
        z-index: 2;
        width: 100%;
    }
    .banner-two__content { padding-top: 24px; padding-bottom: 24px; }

    /* Esconde setas/decorações/sociais que atrapalham/sobrepõem no banner. */
    .banner-two__arry-btn,
    .banner-two__shape,
    .banner-two__social,
    .banner__line__animation { display: none !important; }

    /* Formulários: largura total e conforto de toque. */
    .form-control,
    input,
    select,
    textarea { width: 100% !important; }

    /* Barra superior do header some no mobile (já é d-none d-lg-block),
       mas garantimos que os contatos não gerem overflow caso apareçam. */
    .header-top .info li { margin-left: 0 !important; }

    /* Botões ocupam melhor a largura disponível. */
    .btn-two,
    .btn-one { display: inline-block; }
}

/* --------------------------------------------------------------------------
   4. Celular pequeno (<= 575px)
   Últimos ajustes finos para telas estreitas (~320–575px).
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Doações: inputs que estavam em w-50/w-75 passam a ocupar a tela toda. */
    #valor,
    #pix-copia-e-cola,
    .doacao-input { width: 100% !important; max-width: 100% !important; }
    .doacao-wrap { width: 100% !important; }

    /* Cards de PDF: empilha ícone/título/botão em vez de espremer em linha. */
    .pdf-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        padding: 16px !important;
    }
    .pdf-icon { margin-right: 0 !important; }
    .pdf-btn { width: 100%; text-align: center; }

    /* Rodapé: logo/links centralizados ganham respiro. */
    .footer__item { text-align: left; }
    .footer__wrp { padding-top: 60px !important; padding-bottom: 40px !important; }

    /* Reduz mais um pouco os grandes espaçamentos. */
    .pt-120 { padding-top: 48px !important; }
    .pb-120 { padding-bottom: 48px !important; }
    .pt-160 { padding-top: 64px !important; }
    .pb-160 { padding-bottom: 64px !important; }
}