/* ===========================================
   AJUSTES RESPONSIVOS PARA HERO/BANNER MOBILE
   =========================================== */

/* Tablets e Mobile */
@media (max-width: 968px) {
    /* Remove padding lateral do banner container */
    .banner-container {
        width: 100%;
        margin: 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }

    /* Ajusta altura mínima dos slides */
    .slide-content {
        min-height: 400px;
        background-position: center;
    }

    /* Overlay mais forte no mobile para melhor legibilidade */
    .slide-content::before {
        background: linear-gradient(
                180deg,
                rgba(0, 65, 123, 0.85) 0%,
                rgba(0, 65, 123, 0.75) 100%
        );
    }

    /* Content area sem padding lateral excessivo */
    .content-area {
        padding: 40px 20px;
        min-height: 400px;
    }

    /* Texto ocupa 100% no mobile */
    .content-text {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    /* Ajusta tamanho do título */
    .content-text h1 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    /* Ajusta parágrafo */
    .content-text p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    /* Botão CTA centralizado */
    .cta-button {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 14px 24px;
        font-size: 15px;
    }

    /* Tabs empilhadas */
    .tabs-container {
        flex-direction: column;
        gap: 0;
    }

    /* Ajusta cada tab */
    .tab {
        height: auto;
        min-height: 80px;
        padding: 20px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: row;
        gap: 15px;
    }

    /* Tab ativa no mobile */
    .tab.active {
        height: auto;
        min-height: 80px;
        margin-top: 0;
        border-left: 4px solid #0161B7;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Ajusta número da tab */
    .tab-number {
        font-size: 18px;
        min-width: 40px;
    }

    /* Ajusta título da tab */
    .tab-title {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Progress indicator ajustado */
    .progress-indicator {
        left: 0;
        bottom: 0;
        top: auto;
        height: 3px;
    }
}

/* Mobile pequeno (smartphones) */
@media (max-width: 480px) {
    /* Reduz altura mínima em telas muito pequenas */
    .slide-content {
        min-height: 350px;
    }

    .content-area {
        padding: 30px 15px;
        min-height: 350px;
    }

    /* Texto ainda menor */
    .content-text h1 {
        font-size: 24px;
    }

    .content-text p {
        font-size: 15px;
    }

    /* Tab mais compacta */
    .tab {
        padding: 16px 15px;
        min-height: 70px;
    }

    .tab-number {
        font-size: 16px;
        min-width: 35px;
    }

    .tab-title {
        font-size: 13px;
    }

    /* Botão CTA */
    .cta-button {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Landscape em mobile */
@media (max-width: 968px) and (orientation: landscape) {
    .slide-content {
        min-height: 300px;
    }

    .content-area {
        min-height: 300px;
        padding: 20px;
    }

    .content-text h1 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .content-text p {
        font-size: 14px;
        margin-bottom: 16px;
    }
}