/* ==========================================================================
   BOITEL JHS — Breakpoints
   Mobile-first: base em style.css
   Tablet, notebook, desktop 1366 / 1440 / 1920
   ========================================================================== */

@media (min-width: 640px) {
    :root {
        --pad-x: 1.75rem;
    }

    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-stat {
        border-bottom: 0;
        padding: 1.35rem 1.2rem 1.45rem;
    }

    .hero-stat:last-child {
        border-right: 0;
    }

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

    .intro-media picture,
    .intro-media img {
        height: 440px;
    }

    .estrutura-facts {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

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

    .form-grid .full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .section {
        padding: 5rem 0;
    }

    .partner-statement {
        padding: 6rem 0;
    }

    .logo-tag {
        display: block;
    }

    .hero-content {
        padding-bottom: 2.6rem;
    }

    .estrutura-media img,
    .porque-media img,
    .map-embed {
        height: 420px;
        min-height: 420px;
    }

    .map-embed iframe {
        height: auto;
        min-height: 0;
        flex: 1;
    }

    .pillar-grid,
    .modelos-grid {
        grid-template-columns: 1fr 1fr;
    }

    .chart-row .chart-screen {
        flex-basis: 48%;
    }

    .footer-top {
        grid-template-columns: 1.2fr 0.8fr 1.2fr;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    :root {
        --pad-x: 2rem;
        --topbar-h: 36px;
        --header-h: 72px;
    }

    .topbar {
        display: block;
    }

    .menu-toggle,
    .nav-mobile {
        display: none;
    }

    .nav-desktop {
        display: flex;
        align-items: center;
        gap: 1.05rem;
    }

    .header-cta {
        display: inline-flex;
        min-height: 44px;
        padding: 0.6rem 0.95rem;
        font-size: 0.68rem;
    }

    .hero {
        min-height: 100vh;
        justify-content: flex-end;
    }

    .hero-content {
        padding: calc(var(--chrome-h) + 6.5rem) 0 3.2rem;
    }

    .intro-grid {
        grid-template-columns: 0.82fr 1.18fr;
        gap: 4.5rem;
        align-items: center;
    }

    .tradicao-grid,
    .porque-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .estrutura-layout {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 1rem;
        align-items: stretch;
    }

    .intro-media picture,
    .intro-media img {
        height: 560px;
    }

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

    .tradicao-media,
    .tradicao-media img {
        min-height: 520px;
        height: 520px;
    }

    .estrutura-media img,
    .map-embed {
        height: 520px;
        min-height: 520px;
    }

    .map-embed iframe {
        height: auto;
        min-height: 0;
        flex: 1;
    }

    .dados-layout {
        grid-template-columns: 1.2fr 0.8fr;
        align-items: start;
        gap: 2rem;
    }

    .chart-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        overflow: visible;
        padding-bottom: 0;
    }

    .chart-row .chart-screen {
        flex: none;
    }

    .contato-layout {
        grid-template-columns: 1.25fr 0.75fr;
        align-items: stretch;
        gap: 2.5rem;
    }

    .contato-media {
        display: block;
        min-height: 100%;
    }

    .form-card {
        padding: 2.2rem 2rem;
    }

    .whatsapp-float {
        right: 1.4rem;
        bottom: 1.4rem;
    }

    .whatsapp-float.is-over-form {
        bottom: 1.4rem;
    }

    .section {
        padding: 5.75rem 0;
    }

    .logo img {
        height: 36px;
    }
}

@media (min-width: 1280px) {
    :root {
        --container: 1240px;
    }

    .nav-desktop {
        gap: 1.7rem;
    }

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

    .modelos-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 4.5rem;
    }

    .section {
        padding: 6.5rem 0;
    }

    .partner-statement {
        padding: 7.5rem 0;
    }

    .cta-band {
        padding: 5.5rem 0;
    }
}

@media (min-width: 1440px) {
    :root {
        --container: 1240px;
        --container-wide: 1380px;
        --pad-x: 2.5rem;
    }

    .hero-title {
        max-width: 16ch;
    }

    .hero-stat {
        padding: 1.55rem 1.5rem 1.7rem;
    }

    .dashboard {
        padding: 1.5rem 1.4rem 1.6rem;
    }
}

@media (min-width: 1920px) {
    :root {
        --container: 1240px;
        --container-wide: 1380px;
    }

    .hero-content {
        padding-bottom: 3.8rem;
    }

    .section {
        padding: 7.5rem 0;
    }
}

@media (max-width: 414px) {
    .hero-title {
        font-size: clamp(2.05rem, 11vw, 2.55rem);
        max-width: 12ch;
    }

    .hero-subtitle {
        max-width: 22ch;
        line-height: 1.5;
    }

    .hero-stat {
        padding: 1rem 0.8rem 1.05rem;
    }

    .hero-stat span {
        font-size: 0.68rem;
        overflow-wrap: anywhere;
    }

    .counter-item em {
        font-size: clamp(2.6rem, 16vw, 3.2rem);
    }

    .chart-row .chart-screen {
        flex-basis: 88%;
    }
}

@media (max-width: 380px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 0.8rem;
        bottom: 0.8rem;
    }

    .whatsapp-float::before {
        display: none;
    }
}

@media (max-height: 720px) and (min-width: 1024px) {
    .hero {
        min-height: auto;
    }

    .hero-content {
        padding-top: calc(var(--chrome-h) + 3.5rem);
        padding-bottom: 2rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 4vw, 3.4rem);
    }
}