/* =========================================
   RESPONSIVE
   Breakpoints: 1200px / 992px / 768px / 480px
========================================= */

/* -----------------------------------------
   até 1200px — notebooks menores
----------------------------------------- */
@media (max-width: 1200px) {
    .hero__container {
        gap: 44px;
    }

    .about__container,
    .criminal__container {
        gap: 48px;
    }

    .footer__grid {
        grid-template-columns: 1.2fr 0.9fr 1fr 0.9fr;
        gap: 32px;
    }
}

/* -----------------------------------------
   até 992px — tablets
----------------------------------------- */
@media (max-width: 992px) {
    :root {
        --section-padding: 96px;
    }

    /* Menu: some os links, mantém logo + hambúrguer */
    .navbar__links {
        display: none;
    }

    .navbar__cta {
        display: none;
    }

    .navbar__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        gap: 4px;
        flex-direction: column;
    }

    .navbar__toggle span {
        width: 20px;
        height: 1.5px;
        background: var(--color-burgundy);
        border-radius: 2px;
        transition: transform var(--transition), opacity var(--transition);
    }

    .navbar__toggle.is-active span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
    }

    .navbar__toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .navbar__toggle.is-active span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg);
    }

    /* Hero em tela cheia no tablet */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 140px;
    }

    /* Sobre / Criminal: mantêm grid mas reduzem gap */
    .about__container,
    .criminal__container {
        gap: 40px;
    }

    .about__features {
        grid-template-columns: 1fr;
    }

    .pillars__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .method__timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 56px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* -----------------------------------------
   769px a 992px — esconde a linha horizontal
   (grid de 2 colunas não comporta a timeline linear)
----------------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
    .method__line {
        display: none;
    }
}

/* -----------------------------------------
   até 768px — mobile grande / tablets pequenos
----------------------------------------- */
@media (max-width: 768px) {
    :root {
        --section-padding: var(--section-padding-mobile);
        --section-padding-lg: 96px;
    }

    .site-header {
        top: 14px;
        padding-inline: 12px;
    }

    .navbar {
        width: 100%;
        padding: 10px 10px 10px 20px;
    }

    /* Hero em tela cheia com vídeo de fundo */
    .hero {
        padding-top: 120px;
        padding-bottom: 60px;
        min-height: 100vh;
        min-height: 100svh;
    }

    .hero__overlay {
        background: rgba(25, 7, 10, 0.5);
    }

    .hero__title {
        max-width: 100%;
    }

    .hero__text {
        max-width: 100%;
    }

    .authority-bar__item {
        font-size: 0.78rem;
        padding: 0 16px;
    }

    /* Sobre: coluna única, imagem depois do texto */
    .about__container {
        grid-template-columns: 1fr;
    }

    .about__title,
    .about__text,
    .about__features {
        max-width: 100%;
    }

    .about__media {
        margin-top: 40px;
    }

    .about__line {
        display: none;
    }

    .statement {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Serviços: cards mais estreitos no carrossel */
    .service-card {
        width: 80vw;
    }

    /* Método: timeline vertical */
    .method__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .method__timeline {
        grid-template-columns: 1fr;
        gap: 44px;
        margin-top: 56px;
    }

    .method-step {
        padding-left: 28px;
        padding-top: 0;
    }

    .method-step::before {
        top: 6px;
        left: 0;
    }

    .method__line--vertical {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 1px;
        background: rgba(90, 24, 34, 0.15);
    }

    .method__line--vertical .method__line-fill {
        width: 100%;
        height: 0%;
        top: 0;
        left: 0;
    }

    .method-step__text {
        max-width: 100%;
    }

    /* Criminal: imagem depois do texto */
    .criminal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .criminal__container {
        grid-template-columns: 1fr;
    }

    .criminal__title,
    .criminal__text,
    .criminal__list {
        max-width: 100%;
    }

    .criminal__media {
        margin-top: 40px;
    }

    .criminal__frame {
        display: none;
    }

    /* CTA final */
    .final-cta {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .final-cta__actions {
        flex-direction: column;
    }

    .final-cta__actions .btn {
        width: 100%;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Botões em largura maior no mobile */
    .hero__actions .btn,
    .criminal__actions .btn {
        width: 100%;
    }

    .hero__actions,
    .criminal__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* -----------------------------------------
   até 480px — smartphones
----------------------------------------- */
@media (max-width: 480px) {
    .navbar__logo span {
        display: none;
    }

    .mobile-menu__link {
        font-size: 1.6rem;
    }

    .service-card {
        padding: 28px 24px;
    }

    .whatsapp-float {
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-float__btn {
        width: 52px;
        height: 52px;
    }

    .whatsapp-float__tooltip {
        display: none;
    }

    .footer__legal {
        flex-direction: column;
        gap: 8px;
    }
}