/* ==========================================================================
   RESPONSIVO — Campanha Agaciel Maia 2026
   Carregar DEPOIS de home.css: estas regras dependem da ordem para sobrescrever.
   ========================================================================== */

@media (max-width: 1024px) {
    .eixos-grid   { grid-template-columns: repeat(2, 1fr); }
    .footer-grid  { grid-template-columns: 1fr 1fr; }

    /* Cinco colunas de números secundários não cabem em tablet: viram três. */
    .numeros-grid-secundario { grid-template-columns: repeat(3, 1fr); }
    .feitos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .section { padding: 4rem 0; }

    .hero {
        padding: calc(var(--header-height) + 3rem) 0 3.5rem;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* A foto vem primeiro no mobile: reconhecimento facial antes do texto.
       O limite subiu de 290 para 340px junto com o corte de meio corpo: em
       290px a figura ficava alta demais para o rosto que sobrou. */
    .hero-image-wrapper { order: -1; }
    .hero-image-container { max-width: 340px; }

    /* Os arcos encolhem junto com a tela. Em tamanho de desktop, num hero
       estreito e alto, eles atravessariam o texto — que é exatamente o que a
       regra do contraste não permite. O de baixo à direita sai: com o hero
       empilhado ele cairia em cima do botão. */
    .arco-azul-se  { top: -8rem; left: -6rem; width: 17rem; height: 17rem; border-width: 2.2rem; }
    .arco-ouro-sd  { top: -4rem; right: -7rem; width: 15rem; height: 15rem; border-width: 2rem; }
    .arco-verde-ie { bottom: -9rem; left: 6%; width: 16rem; height: 16rem; border-width: 2rem; }
    .arco-azul-id  { display: none; }

    /* No mobile o texto ocupa a largura toda e cai em cima da foto, então o
       scrim diagonal não serve — vira vertical e uniforme. Mais forte embaixo,
       onde estão o texto corrido e os botões; mais leve em cima, onde a
       Esplanada ainda aparece atrás do retrato. */
    .hero::before {
        background: linear-gradient(180deg, rgba(26, 30, 66, 0.32) 0%, rgba(26, 30, 66, 0.64) 46%, rgba(26, 30, 66, 0.74) 100%);
    }

    .hero-text { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-identity { text-align: left; }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }

    /* Menu mobile: painel deslizante a partir do topo, abaixo do cabeçalho. */
    .nav-desktop {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.5rem;
        background: var(--color-blue-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateY(-140%);
        transition: transform var(--transition-speed);
    }

    .nav-desktop.active { transform: translateY(0); }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 1.2rem;
    }

    .nav-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

    .nav-link { display: block; padding: 0.9rem 0; font-size: 1rem; }

    .brand-logo { height: 32px; }

    .eixos-grid,
    .feitos-grid,
    .footer-grid { grid-template-columns: 1fr; }

    /* Os números continuam em duas colunas mesmo no celular: são curtos e
       empilhados viram uma coluna de nove linhas que ninguém rola até o fim. */
    .numeros-grid,
    .numeros-grid-secundario { grid-template-columns: repeat(2, 1fr); }

    .numeros-section,
    .feitos-section { padding: 3.4rem 0; }

    .titulo-barra { padding-left: 1rem; border-left-width: 4px; }

    .positioning-quote { padding: 1.2rem 1.4rem; }

    .timeline { padding-left: 1.5rem; }
    .timeline-item::before { left: calc(-1.5rem - 7px); }
}

@media (max-width: 480px) {
    .container { padding: 0 1.15rem; }
    .card { padding: 1.5rem; }
    .propostas-form-card { padding: 1.5rem; }

    /* Abaixo de 480px não cabem a condição por extenso e os quatro dígitos lado
       a lado: o bloco empilha e o filete divisor vira horizontal. */
    .hero-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .hero-numero {
        flex-direction: row;
        align-items: baseline;
        gap: 0.55rem;
        padding-left: 0;
        padding-top: 0.9rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        align-self: stretch;
    }

    .hero-numero-valor { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}