@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }

    .hero-image {
        display: none !important;
    }

    .header-container {
        padding: 10px 16px;
    }

    .main-header {
        padding: 0;
    }

    .hamburger-btn {
        display: none;
    }

    .nav-overlay {
        display: none !important;
    }

    .main-nav {
        display: none;
    }

    .main-nav a {
        font-size: 0.85rem;
    }

    .hero-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        gap: 1rem !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: left;
    }

    .hero-text {
        flex: 1 1 55% !important;
        min-width: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0.5rem;
    }

    .hero-title {
        white-space: normal;
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        margin-bottom: 0.15rem !important;
    }

    .hero-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.4 !important;
    }

    .hero-badge-container {
        margin-bottom: 0.3rem !important;
    }

    .avatar-item {
        width: 32px !important;
        height: 32px !important;
    }

    .avatar-group {
        margin-right: 8px !important;
    }

    .badge-text {
        font-size: 0.7rem !important;
    }

    .hero-stats {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        margin-top: 0.1rem !important;
        margin-bottom: 0.1rem !important;
    }

    .stat-item {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }

    .stat-number {
        font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important;
        margin-bottom: 0.1rem !important;
    }

    .stat-label {
        font-size: 0.55rem !important;
    }

    .hero-image .hero-main-img {
        display: none !important;
    }

    .hero-partners {
        width: 100%;
    }

    .partners-carousel {
        mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
    }

    .partners-track {
        gap: 0.75rem !important;
    }

    .partners-title {
        font-size: 0.6rem !important;
        margin-bottom: 0.3rem !important;
    }

    .partner-item {
        height: 36px !important;
    }

    .partner-item .partner-logo,
    .partner-item img {
        max-width: 75px !important;
        max-height: 36px !important;
    }

    .hero-section {
        padding-bottom: 0 !important;
        min-height: 200px !important;
    }

    .hero-wave {
        display: block !important;
        margin-top: 0px;
        margin-bottom: -3px;
        position: relative;
        z-index: 2;
        line-height: 0 !important;
        font-size: 0 !important;
        background: linear-gradient(to bottom, var(--color-bg-dark) 5px, var(--color-bg-white) 5px);
        overflow: hidden;
        width: 100% !important;
        clear: both !important;
    }

    .hero-wave img {
        display: block !important;
        width: 100% !important;
        height: 35px !important;
        object-fit: fill;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .concept-section {
        margin-top: -1px;
    }

    .provinces-section {
        padding: 4rem 0;
        margin-top: -3px;
    }

    .apps-section {
        margin-top: -4px;
    }

    .provinces-title {
        font-size: 1.75rem;
    }

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

    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-lg);
    }

    .apps-header {
        margin-bottom: 2rem;
    }

    .apps-header h2 {
        font-size: 1.75rem;
    }

    .apps-header p {
        font-size: 0.95rem;
    }

    .app-content p {
        display: none;
    }

    .resolver-section, .modelo-section, .faq-section {
        padding: 4rem 0;
    }

    .resolver-grid, .modelo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 24px;
    }

    .resolver-card {
        padding: 2rem 1.5rem;
    }

    .modelo-card {
        padding: 2.5rem 1.5rem;
    }

    .faq-question {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
    }

    .faq-answer-content {
        padding: 0 1.5rem 1.25rem 1.5rem;
        font-size: 0.95rem;
    }

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

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-mobile {
        display: none !important;
    }

    .hide-on-tablet {
        display: none !important;
    }

    .hero-image {
        display: none !important;
    }

    .header-container {
        padding: 10px 24px;
    }

    .main-header {
        padding: 0;
    }

    .hero-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        gap: 1rem !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        text-align: left;
    }

    .hero-text {
        flex: 1 1 55% !important;
        min-width: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0.5rem;
    }

    .hero-title {
        white-space: normal;
        font-size: clamp(2rem, 5.5vw, 2.8rem) !important;
        margin-bottom: 0.3rem !important;
    }

    .hero-subtitle {
        font-size: 1.35rem !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.5 !important;
    }

    .hero-badge-container {
        margin-bottom: 0.5rem !important;
    }

    .avatar-item {
        width: 42px !important;
        height: 42px !important;
    }

    .avatar-group {
        margin-right: 12px !important;
    }

    .badge-text {
        font-size: 0.95rem !important;
    }

    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 3rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .stat-item {
        display: flex !important;
        flex-direction: column !important;
        min-width: 150px !important;
        flex: 0 0 150px !important;
    }

    .stat-number {
        font-size: clamp(2.2rem, 7vw, 3rem) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1 !important;
        min-height: 3rem !important;
    }

    .stat-label {
        font-size: 1.3rem !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        color: var(--color-text-muted) !important;
    }

    .stat-item {
        display: flex !important;
        flex-direction: column !important;
        min-width: 120px !important;
        flex: 0 0 120px !important;
    }

    .stat-number {
        font-size: clamp(2.2rem, 7vw, 3rem) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1 !important;
        min-height: 3rem !important;
    }

    .stat-label {
        font-size: 1.3rem !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        color: var(--color-text-muted) !important;
    }

    .hero-image .hero-main-img {
        display: none !important;
    }

    .hero-section {
        padding-bottom: 0 !important;
        min-height: 200px !important;
    }

    .hero-wave {
        display: block !important;
        margin-top: 0px;
        margin-bottom: -3px;
        position: relative;
        z-index: 2;
        line-height: 0 !important;
        font-size: 0 !important;
        background: linear-gradient(to bottom, var(--color-bg-dark) 5px, var(--color-bg-white) 5px);
        overflow: hidden;
        width: 100% !important;
        clear: both !important;
    }

    .hero-wave img {
        display: block !important;
        width: 100% !important;
        height: 35px !important;
        object-fit: fill;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .concept-section {
        margin-top: -1px;
    }

    .provinces-section {
        padding: 4rem 0;
        margin-top: -3px;
    }

    .apps-section {
        margin-top: -4px;
    }

    .provinces-title {
        font-size: 1.75rem;
    }

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

    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-lg);
    }

    .apps-header {
        margin-bottom: 2rem;
    }

    .apps-header h2 {
        font-size: 1.75rem;
    }

    .apps-header p {
        font-size: 0.95rem;
    }

    .app-content p {
        display: none;
    }

    .resolver-section, .modelo-section, .faq-section {
        padding: 4rem 0;
    }

    .resolver-grid, .modelo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 24px;
    }

    .resolver-card {
        padding: 2rem 1.5rem;
    }

    .modelo-card {
        padding: 2.5rem 1.5rem;
    }

    .faq-question {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
    }

    .faq-answer-content {
        padding: 0 1.5rem 1.25rem 1.5rem;
        font-size: 0.95rem;
    }

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

    .hero-partners {
        width: 100%;
    }

    .partners-carousel {
        mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
    }

    .partners-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.25rem;
        justify-content: center;
        align-items: center;
        padding: 12px 24px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .partners-track::-webkit-scrollbar {
        display: none;
    }

    .partner-item {
        height: 55px !important;
        flex-shrink: 0;
    }

    .partner-item .partner-logo,
    .partner-item img {
        max-width: 120px !important;
        max-height: 55px !important;
        width: auto;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .hero-image {
        flex: 0 0 140px;
        min-width: 0;
    }

    .logo img {
        height: 35px;
    }

    .avatar-item {
        width: 40px;
        height: 40px;
    }

    .hero-stats {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
    }

    .stat-item {
        min-width: 0 !important;
    }

    .stat-number {
        font-size: clamp(0.9rem, 3.5vw, 1.2rem) !important;
    }

    .stat-label {
        font-size: 0.6rem !important;
    }

    .hero-section {
        padding-top: 0.5rem;
    }

    .province-pill {
        font-size: 0.9rem;
        padding: 8px 18px;
    }

    .app-content h3 {
        font-size: 1.2rem;
    }

    .back-to-top {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 42px;
        height: 42px;
    }
}