/* ==========================================================================
   GRUPO CIMHE BRASIL — Responsividade
   Breakpoints testados: 1920px, 1366px, 1200px, 992px, 768px, 576px,
   430px, 375px e 320px
   Objetivos:
   - nenhuma rolagem horizontal;
   - textos legíveis;
   - botões com área de toque adequada (mín. ~44px);
   - placeholders sem deformação (aspect-ratio já aplicado);
   - menu mobile funcional abaixo de 992px;
   - cards em uma coluna nos celulares.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Até 1200px — notebooks pequenos
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .nav-list > li > a {
        font-size: .8rem;
        padding: .75rem .5rem;
    }

    .brand img {
        height: 48px;
    }
}

/* --------------------------------------------------------------------------
   Até 992px — tablets em pé / menu mobile
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    html {
        scroll-padding-top: 110px;
    }

    /* Cabeçalho */
    .topbar-tagline {
        display: none; /* mantém a barra compacta no mobile */
    }

    .topbar-inner {
        justify-content: center;
    }

    .nav-inner {
        min-height: 70px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-cta {
        display: none; /* o CTA passa a existir dentro do menu mobile */
    }

    /* Menu mobile */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 990;
        width: min(340px, 88vw);
        height: 100dvh;
        background-color: var(--color-white);
        box-shadow: -8px 0 30px rgba(16, 24, 40, .18);
        padding: 5.5rem 1.5rem 2rem;
        overflow-y: auto;
        transition: right .3s ease-in-out;
        margin-left: 0;
    }

    .main-nav.is-open {
        right: 0;
    }

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

    .nav-list > li > a {
        padding: .9rem .25rem;
        font-size: .95rem;
        border-bottom: 1px solid rgba(16, 24, 40, .08);
    }

    .nav-list > li > a.active,
    .nav-list > li > a[aria-current="page"] {
        border-bottom: 1px solid rgba(16, 24, 40, .08);
        color: var(--color-accent-dark);
    }

    .nav-mobile-cta {
        display: list-item;
        margin-top: 1.25rem;
        width: 100%;
    }

    /* Bandeiras de idioma no menu mobile */
    .nav-lang {
        display: flex;
        gap: .6rem;
        padding: 1rem .25rem 0;
        margin-left: 0;
    }

    .lang-flag {
        min-width: 52px;
        min-height: 44px;
    }

    /* Dropdown vira bloco expansível */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: 0;
        border-left: 3px solid var(--color-accent);
        border-radius: 0;
        padding-block: 0;
        display: none;
        min-width: 0;
        margin-left: .75rem;
    }

    .has-dropdown.open .dropdown {
        display: block;
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 980;
        background-color: rgba(10, 24, 43, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

    .nav-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Grades */
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .credibility-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-profile {
        grid-template-columns: 280px 1fr;
    }

    /* Hero */
    .hero-content {
        min-height: 520px;
    }
}

/* --------------------------------------------------------------------------
   Até 768px — tablets e celulares grandes
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section {
        padding-block: 3.25rem;
    }

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

    /* Imagens após o texto no mobile fica mais natural */
    .grid-2 .media-order-first {
        order: -1;
    }

    .hero-content {
        min-height: 500px;
        padding-block: 4rem;
    }

    .hero-nav {
        display: none; /* dots continuam disponíveis no mobile */
    }

    .service-block {
        padding-block: 2.5rem;
    }

    .service-block .grid-2 > .image-placeholder,
    .service-block .grid-2 > .service-media {
        order: -1;
    }

    .team-profile {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .team-profile .image-placeholder {
        max-width: 340px;
    }

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

    .footer-main {
        gap: 2rem;
        padding-block: 2.75rem 2rem;
    }

    .cookie-notice {
        max-width: calc(100vw - 2.5rem);
    }
}

/* --------------------------------------------------------------------------
   Até 576px — celulares
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .topbar-contact {
        gap: .85rem;
        font-size: .78rem;
    }

    .topbar-contact .hide-mobile {
        display: none; /* simplifica a barra superior */
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

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

    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .cta-final-content .hero-actions .btn {
        width: 100%;
    }

    .filter-bar {
        gap: .45rem;
    }

    .filter-btn {
        font-size: .78rem;
        padding: .5rem .9rem;
        min-height: 40px;
    }

    .modal-content {
        padding: 0 1.25rem 1.5rem;
    }

    /* Botões flutuantes levemente menores */
    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        right: 1rem;
        bottom: 1rem;
    }

    .back-to-top {
        right: 1rem;
        bottom: 5.5rem;
    }

    .cookie-notice {
        left: 1rem;
        bottom: 1rem;
        max-width: calc(100vw - 6rem); /* não cobre o botão do WhatsApp */
    }
}

/* --------------------------------------------------------------------------
   Até 430px, 375px e 320px — celulares pequenos
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    body {
        font-size: .95rem;
    }

    .section-title {
        font-size: 1.45rem;
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .hero-text {
        font-size: .95rem;
    }

    .hero-highlights {
        font-size: .82rem;
        gap: .4rem .9rem;
    }

    .brand img {
        height: 40px;
    }

    .brand-placeholder .placeholder-id {
        font-size: .6rem;
    }

    .brand-placeholder p {
        display: none; /* evita quebra do logotipo provisório do rodapé em telas estreitas */
    }

    .topbar-contact li:nth-child(2) {
        display: none; /* telefone some em telas muito estreitas */
    }

    .page-banner-content {
        padding-block: 3.25rem;
    }

    .cta-final-content {
        padding-block: 3.5rem;
    }
}

@media (max-width: 320px) {
    .hero-highlights {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-dots {
        bottom: .9rem;
    }
}

/* --------------------------------------------------------------------------
   Telas muito grandes (acima de 1600px) — controle de largura do hero
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .hero-content {
        min-height: 640px;
    }
}