/*
 * VTRIC WEB — MOBILE V1
 * Capa responsive pública global.
 */

.mobile-menu-toggle,
.mobile-menu-close,
.mobile-menu-heading,
.mobile-menu-backdrop {
    display: none;
}

:focus-visible {
    outline: 3px solid #1184ff;
    outline-offset: 3px;
}

html {
    overflow-x: clip;
}

body {
    min-width: 0;
    overflow-x: clip;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

@media (max-width: 900px) {
    :root {
        --mobile-gutter: 18px;
    }

    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .section-shell,
    .product-detail .section-shell {
        width: calc(100% - (var(--mobile-gutter) * 2));
        max-width: none;
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        min-height: 68px;
        height: 68px;
        padding:
            env(safe-area-inset-top, 0)
            var(--mobile-gutter)
            0;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 5px 20px rgba(20, 32, 40, .08);
    }

    .site-brand {
        position: relative;
        z-index: 1002;
        min-width: 0;
        height: 68px;
    }

    .site-brand img {
        width: auto;
        height: 54px;
        max-width: 174px;
        max-height: 54px;
        object-fit: contain;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 1002;
        display: inline-grid;
        width: 46px;
        height: 46px;
        margin-left: auto;
        padding: 0;
        place-items: center;
        border: 1px solid #dce2e6;
        border-radius: 13px;
        background: #fff;
        color: #202428;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-toggle-lines,
    .mobile-menu-toggle-lines::before,
    .mobile-menu-toggle-lines::after {
        display: block;
        width: 21px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        content: "";
        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    .mobile-menu-toggle-lines {
        position: relative;
    }

    .mobile-menu-toggle-lines::before {
        position: absolute;
        top: -7px;
        left: 0;
    }

    .mobile-menu-toggle-lines::after {
        position: absolute;
        top: 7px;
        left: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"]
    .mobile-menu-toggle-lines {
        background: transparent;
    }

    .mobile-menu-toggle[aria-expanded="true"]
    .mobile-menu-toggle-lines::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"]
    .mobile-menu-toggle-lines::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        width: min(90vw, 390px);
        height: 100dvh;
        margin: 0;
        padding:
            max(18px, env(safe-area-inset-top))
            18px
            max(24px, env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: -18px 0 45px rgba(13, 24, 32, .18);
        transform: translateX(105%);
        visibility: hidden;
        transition:
            transform .24s ease,
            visibility .24s ease;
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-menu-heading {
        display: flex;
        min-height: 52px;
        margin-bottom: 8px;
        padding-bottom: 12px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid #e5eaed;
    }

    .mobile-menu-heading strong {
        color: #202428;
        font-size: 17px;
    }

    .mobile-menu-close {
        display: inline-grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        border: 1px solid #dce2e6;
        border-radius: 12px;
        background: #fff;
        color: #202428;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
    }

    .site-nav > a {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 12px 13px;
        justify-content: flex-start;
        border-radius: 10px;
        color: #363c40;
        font-size: 15px;
        white-space: normal;
    }

    .site-nav > a.active {
        background: #edf5fc;
        color: #086cc7;
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1090;
        display: block;
        border: 0;
        background: rgba(12, 18, 22, .52);
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    .mobile-menu-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .products-menu {
        position: static;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
    }

    .products-menu summary {
        display: flex;
        width: 100%;
        min-height: 48px;
        padding: 12px 13px;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        color: #363c40;
        font-size: 15px;
        white-space: normal;
    }

    .products-menu summary.active {
        background: #edf5fc;
        color: #086cc7;
    }

    .products-mega {
        position: static;
        inset: auto;
        width: 100%;
        max-height: none;
        margin: 4px 0 8px;
        padding: 12px;
        overflow: visible;
        border: 1px solid #e0e6e9;
        border-radius: 13px;
        background: #f7f9fa;
        box-shadow: none;
    }

    .products-mega-top {
        gap: 10px;
        padding-bottom: 11px;
    }

    .products-mega-top strong {
        font-size: 15px;
    }

    .site-nav .products-mega-top a {
        min-height: 40px;
        padding: 8px 9px;
        font-size: 12px;
    }

    .products-mega-browser {
        display: block;
    }

    .products-mega-tabs {
        display: flex;
        gap: 7px;
        margin: 0 -2px 12px;
        padding: 2px 2px 7px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .products-mega-tab {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 8px 12px;
        border: 1px solid #d9e0e4;
        border-radius: 999px;
        background: #fff;
        color: #4b5358;
        font: inherit;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
    }

    .products-mega-tab.is-active,
    .products-mega-tab[aria-selected="true"] {
        border-color: #1184ff;
        background: #1184ff;
        color: #fff;
    }

    .products-mega-grid {
        display: block;
        padding-top: 0;
    }

    .products-mega-category {
        gap: 7px;
    }

    .site-nav .products-mega-category-link {
        min-height: 42px;
        padding: 9px 6px;
        font-size: 14px;
    }

    .site-nav .products-mega-items a,
    .site-nav .products-mega-subcategory-link,
    .site-nav .products-mega-subproducts a {
        display: flex;
        min-height: 44px;
        height: auto;
        padding: 10px;
        align-items: center;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.3;
        white-space: normal;
    }

    .products-mega-subcategory {
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid #e2e7e9;
    }

    .main-banner,
    .main-banner-content {
        min-height: clamp(440px, 70svh, 620px);
    }

    .main-banner-content {
        justify-content: flex-end;
        padding:
            54px
            var(--mobile-gutter)
            48px;
    }

    .main-banner-media img {
        object-fit: cover;
        object-position: center;
    }

    .main-banner-overlay,
    .main-banner.theme-dark .main-banner-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, .67) 0,
                rgba(0, 0, 0, .26) 48%,
                rgba(0, 0, 0, .04) 76%
            );
    }

    .main-banner.theme-dark .main-banner-content {
        color: #fff;
    }

    .main-banner-content.align-right,
    .main-banner-content.align-center {
        align-items: flex-start;
        text-align: left;
    }

    .main-banner-content.align-right .main-banner-copy,
    .main-banner-content.align-center .main-banner-copy {
        margin: 0;
    }

    .align-right .main-banner-actions,
    .align-center .main-banner-actions {
        justify-content: flex-start;
    }

    .main-banner h1 {
        max-width: 620px;
        font-size: clamp(34px, 10vw, 48px);
        letter-spacing: -.045em;
        line-height: .98;
    }

    .main-banner-subtitle {
        max-width: 520px;
        margin-top: 15px;
        font-size: 16px;
        line-height: 1.45;
    }

    .main-banner-actions {
        width: 100%;
        margin-top: 21px;
        gap: 9px;
    }

    .button-primary,
    .button-secondary,
    .dark-button {
        min-height: 46px;
        padding: 0 19px;
        font-size: 13px;
    }

    .main-banner-empty {
        min-height: 430px;
        padding: 56px var(--mobile-gutter);
    }

    .main-banner-empty h1 {
        font-size: clamp(35px, 10vw, 48px);
        line-height: .96;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 25px;
    }

    .section-heading h2,
    .commercial-section h2,
    .contact-section h2,
    .dynamic-media-copy h2,
    .dynamic-cta-copy h2 {
        font-size: clamp(28px, 8vw, 39px);
        line-height: 1.02;
    }

    .section-intro,
    .dynamic-media-copy p,
    .dynamic-cta-copy p {
        font-size: 15px;
        line-height: 1.55;
    }

    .mobility-section,
    .dynamic-products-section,
    .dynamic-cards-section,
    .dynamic-media-section,
    .dynamic-cta-section,
    .contact-section {
        padding: 46px 0;
    }

    .mobility-grid,
    .dynamic-product-grid,
    .dynamic-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .mobility-card,
    .mobility-card-large,
    .mobility-card-wide {
        grid-column: auto;
        min-height: 290px;
        border-radius: 14px;
    }

    .mobility-card-content {
        padding: 18px;
    }

    .mobility-card-content h3 {
        margin-bottom: 11px;
        font-size: clamp(22px, 6vw, 30px);
    }

    .dynamic-product-grid,
    .dynamic-card-grid {
        margin-top: 19px;
    }

    .dynamic-product-card,
    .dynamic-content-card {
        border-radius: 14px;
    }

    .dynamic-card-media {
        aspect-ratio: 4 / 3;
    }

    .dynamic-card-copy {
        gap: 6px;
        padding: 13px;
    }

    .dynamic-card-copy h3 {
        font-size: 17px;
    }

    .dynamic-card-copy h4,
    .dynamic-card-copy span,
    .dynamic-card-copy strong {
        font-size: 12px;
    }

    .dynamic-media-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dynamic-media-image {
        order: -1;
    }

    .dynamic-media-image img {
        width: 100%;
        min-height: 0;
        height: clamp(230px, 62vw, 390px);
        max-height: none;
        object-fit: cover;
        object-position: center;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
        padding-bottom: 38px;
    }

    .site-footer {
        padding: 47px 0 22px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand img {
        max-width: 150px;
        height: auto;
    }

    .footer-column a {
        min-height: 40px;
        padding: 7px 0;
        line-height: 1.3;
    }

    .footer-socials a {
        width: 46px;
        height: 46px;
    }

    .footer-bottom {
        gap: 18px;
    }

    /* Catálogo */

    .catalog-intro {
        padding: 42px 0 34px;
    }

    .catalog-intro-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .catalog-intro h1 {
        font-size: clamp(33px, 9vw, 46px);
    }

    .catalog-category-panel {
        padding: 20px;
        border-radius: 17px;
    }

    .catalog-category-heading,
    .catalog-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .catalog-category-heading h2,
    .catalog-results-heading h2,
    .catalog-next-heading h2 {
        font-size: clamp(25px, 7vw, 34px);
    }

    .catalog-results-heading > span {
        max-width: none;
        text-align: left;
    }

    .catalog-filters {
        display: flex;
        margin: 0 -2px;
        padding: 2px 2px 8px;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .catalog-filters a {
        flex: 0 0 auto;
        min-width: 126px;
        min-height: 46px;
    }

    .catalog-subfilters {
        flex-wrap: nowrap;
        padding-bottom: 7px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .catalog-subfilters::before,
    .catalog-subfilters a {
        flex: 0 0 auto;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .catalog-card {
        border-radius: 14px;
    }

    .catalog-card-media img {
        padding: 9px;
    }

    .catalog-card-body {
        min-height: 158px;
        padding: 13px;
    }

    .catalog-card h2 {
        font-size: clamp(18px, 5vw, 22px);
    }

    /* Ficha de producto */

    .product-top {
        padding: 20px 0 34px;
    }

    .product-main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-gallery,
    .product-summary {
        border-radius: 17px;
    }

    .product-gallery {
        padding: 13px;
    }

    .product-main-image {
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 13px;
    }

    .product-main-image img {
        width: 100%;
        height: 100%;
        padding: 14px;
        object-fit: contain;
    }

    .product-thumbnails {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .product-thumbnail {
        flex: 0 0 70px;
        min-height: 64px;
    }

    .product-thumbnail img {
        height: 54px;
    }

    .product-summary {
        padding: 29px 21px 24px;
    }

    .product-summary h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: .98;
    }

    .product-name {
        font-size: 19px;
    }

    .product-summary-description,
    .product-commercial-copy {
        font-size: 15px;
        line-height: 1.6;
    }

    .product-contact {
        width: 100%;
        min-height: 48px;
    }

    .product-section {
        padding: 36px 0;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .feature-item {
        min-height: 82px;
        padding: 20px 15px 15px;
        font-size: 14px;
    }

    .product-copy,
    .spec-groups {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .spec-group {
        border-radius: 14px;
    }

    .spec-group h2 {
        padding: 21px 17px 13px;
        font-size: 18px;
    }

    .spec-group dl {
        padding: 0 17px 13px;
    }

    .spec-row {
        grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
        gap: 12px;
    }

    /* Contacto */

    .contact-hero {
        padding: 40px 0 32px;
    }

    .contact-hero h1 {
        font-size: clamp(33px, 9vw, 44px);
    }

    .contact-channels {
        padding: 35px 0;
    }

    .contact-channel-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contact-card {
        min-height: 0;
        padding: 24px 20px;
    }

    .contact-card-label {
        margin-bottom: 18px;
    }

    .contact-card-link {
        min-height: 46px;
    }

    .contact-form-section {
        padding-bottom: 42px;
    }

    .contact-form-box {
        grid-template-columns: 1fr;
        gap: 27px;
        padding: 22px 18px;
        border-radius: 17px;
    }

    .contact-form-intro h2 {
        font-size: clamp(27px, 8vw, 36px);
    }

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

    .contact-field input,
    .contact-field select {
        min-height: 48px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        font-size: 16px;
    }

    .contact-submit {
        width: 100%;
        min-height: 48px;
    }

    /* Distribuidores y dónde comprar */

    .reseller-hero,
    .where-hero,
    .distributor-hero,
    .distributors-hero {
        padding: 42px 0 34px;
    }

    .reseller-hero h1,
    .where-hero h1,
    .distributor-hero h1,
    .distributors-hero h1 {
        font-size: clamp(32px, 9vw, 44px);
    }

    .reseller-grid,
    .where-grid,
    .distributor-grid,
    .distributors-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .reseller-card,
    .where-card,
    .distributor-card,
    .distributors-card {
        min-width: 0;
        border-radius: 15px;
    }

    /* Institucional */

    .institutional-intro {
        padding: 40px 0 24px;
    }

    .institutional-intro-grid,
    .institutional-band-grid,
    .institutional-tech-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .institutional-intro h1 {
        font-size: clamp(32px, 9vw, 43px);
    }

    .institutional-opening {
        padding-bottom: 38px;
    }

    .institutional-opening-image,
    .institutional-band-image,
    .institutional-tech-image {
        width: 100%;
        height: clamp(220px, 63vw, 360px);
        border-radius: 14px;
        object-fit: cover;
        object-position: center;
    }

    .institutional-band,
    .institutional-technology {
        padding: 45px 0;
    }

    .institutional-band-content h2,
    .institutional-heading h2 {
        font-size: clamp(27px, 8vw, 37px);
    }

    .institutional-tech-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .institutional-tech-card {
        min-height: 0;
        padding: 18px;
    }

    .institutional-tech-number {
        margin-bottom: 13px;
    }

    .institutional-final {
        padding-bottom: 44px;
    }

    .institutional-final-box {
        padding: 25px 21px;
    }

    .institutional-final-box h2 {
        font-size: clamp(25px, 7vw, 34px);
    }

    a,
    button,
    summary,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: rgba(17, 132, 255, .16);
    }
}

@media (max-width: 520px) {
    :root {
        --mobile-gutter: 15px;
    }

    .site-header {
        padding-right: 14px;
        padding-left: 14px;
    }

    .site-brand img {
        height: 50px;
        max-width: 158px;
        max-height: 50px;
    }

    .main-banner,
    .main-banner-content {
        min-height: clamp(410px, 68svh, 540px);
    }

    .main-banner-content {
        padding-right: var(--mobile-gutter);
        padding-bottom: 38px;
        padding-left: var(--mobile-gutter);
    }

    .main-banner h1 {
        font-size: clamp(32px, 10.5vw, 42px);
    }

    .main-banner-actions > * {
        flex: 1 1 auto;
    }

    .mobility-grid,
    .dynamic-product-grid,
    .dynamic-card-grid,
    .catalog-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobility-card {
        min-height: 235px;
    }

    .mobility-card-content {
        padding: 14px;
    }

    .mobility-card-content h3 {
        font-size: 21px;
    }

    .catalog-category-panel {
        padding: 17px 14px;
    }

    .catalog-card-body {
        min-height: 150px;
        padding: 11px;
    }

    .catalog-card h2 {
        font-size: 18px;
    }

    .catalog-card p {
        -webkit-line-clamp: 2;
    }

    .dynamic-card-copy {
        padding: 11px;
    }

    .dynamic-card-copy h3 {
        font-size: 16px;
    }

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

    .footer-column strong {
        font-size: 13px;
    }

    .footer-column a {
        font-size: 12px;
    }
}

@media (max-width: 370px) {
    .mobility-grid,
    .dynamic-product-grid,
    .dynamic-card-grid,
    .catalog-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* VTRIC MOBILE HOME VISUAL FIX V3 */
@media (max-width: 900px) {
    .banner-slider,
    .banner-slider-track,
    .banner-slider .main-banner,
    .main-banner,
    .main-banner-content {
        min-height: clamp(310px, 48svh, 420px) !important;
    }

    .main-banner-media img {
        object-fit: cover;
        object-position: center center;
    }

    .banner-slider-arrow {
        top: 50%;
        bottom: auto;
        width: 40px;
        height: 40px;
        border-color: rgba(255, 255, 255, .55);
        background: rgba(20, 24, 27, .58);
        transform: translateY(-50%);
        backdrop-filter: blur(4px);
    }

    .banner-slider-arrow:active {
        transform: translateY(-50%) scale(.96);
    }

    .banner-slider-prev {
        left: 12px;
    }

    .banner-slider-next {
        right: 12px;
    }

    .banner-slider-arrow span {
        margin-top: -2px;
        font-size: 29px;
    }

    .banner-slider-dots {
        bottom: 15px;
        gap: 7px;
    }

    .banner-slider-dot {
        width: 22px;
        height: 4px;
    }

    .banner-slider-dot.is-active {
        width: 36px;
    }

    .main-banner:has(.main-banner-copy:empty)
    .main-banner-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, .2),
                rgba(0, 0, 0, 0) 55%
            );
    }

    .category-strip-section {
        padding: 35px 0 44px !important;
    }

    .category-strip-heading {
        align-items: flex-end;
        gap: 14px;
        margin-bottom: 18px;
    }

    .category-strip-heading > div {
        min-width: 0;
    }

    .category-strip-heading .section-kicker {
        margin-bottom: 9px;
        font-size: 10px;
    }

    .category-strip-heading h2 {
        max-width: 230px;
        font-size: clamp(27px, 7.5vw, 32px);
        letter-spacing: -.04em;
        line-height: 1;
    }

    section[style*="--vtric-section-bg"]
    .category-strip-all,
    .category-strip-all {
        display: inline-flex;
        min-height: 38px;
        padding: 8px 12px !important;
        align-items: center;
        justify-content: center;
        border: 1px solid currentColor !important;
        border-radius: 999px;
        background: transparent !important;
        color: var(--vtric-section-text, #202428) !important;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .category-strip {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
        padding: 0;
        scroll-snap-type: x mandatory;
    }

    .category-strip-card {
        border-color: #e0e3e5;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(20, 32, 40, .045);
        scroll-snap-align: start;
    }

    .category-strip-media {
        height: clamp(125px, 36vw, 160px);
    }

    .category-strip-media img {
        object-position: center;
    }

    .category-strip-info {
        min-height: 62px;
        padding: 11px 12px;
        align-items: center;
        gap: 8px;
    }

    .category-strip-info > span:first-child {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.18;
        text-overflow: initial;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .category-strip-info > span:last-child {
        flex: 0 0 auto;
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .banner-slider,
    .banner-slider-track,
    .banner-slider .main-banner,
    .main-banner,
    .main-banner-content {
        min-height: clamp(300px, 46svh, 360px) !important;
    }

    .main-banner-content {
        padding:
            44px
            var(--mobile-gutter)
            42px;
    }

    .category-strip-heading h2 {
        font-size: 28px;
    }

    .category-strip-media {
        height: clamp(125px, 35vw, 145px);
    }
}

/* ==================================================
   VTRIC MOBILE FINAL V5
   Ajuste global de navegación, escala y accesibilidad
   ================================================== */

@media (max-width: 900px) {
    body {
        font-size: 15px;
    }

    .site-header {
        min-height: 66px;
        height: 66px;
    }

    .site-brand {
        height: 66px;
    }

    .site-brand img {
        height: 51px;
        max-height: 51px;
    }

    .site-nav {
        width: min(88vw, 370px);
        gap: 3px;
    }

    .site-nav > a,
    .products-menu summary {
        min-height: 46px;
        padding: 11px 12px;
        font-size: 14px;
    }

    .products-mega {
        max-height: none;
        padding: 10px;
        overflow: visible;
        border-radius: 12px;
    }

    .products-mega-top {
        margin-bottom: 9px;
        padding: 8px 8px 11px;
    }

    .products-mega-tabs {
        display: none;
    }

    .products-mega-grid {
        display: grid;
        gap: 8px;
    }

    .products-mega-category {
        width: 100%;
        margin: 0;
        padding: 10px;
        border-radius: 11px;
    }

    .site-nav .products-mega-category-link {
        min-height: 42px;
        padding: 9px 28px 9px 5px;
        font-size: 13px;
    }

    .products-accordion-ready
    .products-mega-category
    > .products-mega-items {
        position: static;
        width: 100%;
        max-height: 0;
    }

    .products-accordion-ready
    .products-mega-category.is-open
    > .products-mega-items {
        max-height: none;
        margin-top: 7px;
        padding: 9px;
        overflow: visible;
    }

    .site-nav .products-mega-items a,
    .site-nav .products-mega-subcategory-link,
    .site-nav .products-mega-subproducts a {
        min-height: 42px;
        padding: 9px;
        font-size: 12px;
    }

    .main-banner h1 {
        font-size: clamp(31px, 8vw, 41px);
    }

    .main-banner-subtitle {
        font-size: 15px;
    }

    .section-heading h2,
    .commercial-section h2,
    .contact-section h2,
    .dynamic-media-copy h2,
    .dynamic-cta-copy h2 {
        font-size: clamp(26px, 7vw, 35px);
    }

    .mobility-section,
    .dynamic-products-section,
    .dynamic-cards-section,
    .dynamic-media-section,
    .dynamic-cta-section,
    .contact-section {
        padding: 40px 0;
    }

    .catalog-intro,
    .contact-hero,
    .distributor-hero,
    .institutional-intro {
        padding-top: 34px;
        padding-bottom: 30px;
    }

    .catalog-intro h1,
    .contact-hero h1,
    .distributor-hero h1,
    .institutional-intro h1 {
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.02;
    }

    .contact-hero-grid,
    .distributor-hero-grid,
    .institutional-intro-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-hero-text,
    .distributor-hero-copy p,
    .institutional-intro-text {
        font-size: 15px;
        line-height: 1.55;
    }

    .distributor-hero-copy {
        padding: 16px 0 0;
        border-top: 4px solid #1184ff;
        border-left: 0;
    }

    .locator-section {
        padding: 40px 0 46px;
    }

    .locator-heading {
        display: grid;
        gap: 18px;
        align-items: stretch;
    }

    .province-filter {
        width: 100%;
        min-width: 0;
    }

    .province-filter select {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

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

    .distributor-card {
        min-height: 0;
        padding: 18px;
    }

    .distributor-actions a {
        min-height: 42px;
        padding: 0 13px;
    }

    .join-grid,
    .contact-form-box {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .join-form input,
    .join-form textarea,
    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        font-size: 16px;
    }

    .submit-button,
    .contact-submit {
        min-height: 48px;
    }

    .institutional-opening-image,
    .institutional-band-image,
    .institutional-tech-image {
        height: clamp(215px, 60vw, 330px);
    }

    .institutional-band,
    .institutional-technology {
        padding: 40px 0;
    }

    .institutional-band-content h2,
    .institutional-heading h2 {
        font-size: clamp(26px, 7vw, 35px);
    }

    .institutional-final-box {
        gap: 20px;
        padding: 22px;
    }

    .institutional-final-box h2 {
        font-size: clamp(24px, 6.5vw, 31px);
    }

    .product-summary h1 {
        font-size: clamp(31px, 8vw, 40px);
    }

    .product-summary {
        padding: 24px 19px 21px;
    }

    .product-section {
        padding: 32px 0;
    }

    .footer-grid {
        gap: 27px 18px;
    }
}

@media (max-width: 620px) {
    :root {
        --mobile-gutter: 15px;
    }

    .site-nav {
        width: calc(100vw - 26px);
    }

    .mobile-menu-heading strong {
        font-size: 15px;
    }

    .main-banner,
    .main-banner-content,
    .banner-slider,
    .banner-slider-track,
    .banner-slider .main-banner {
        min-height: clamp(295px, 46svh, 360px) !important;
    }

    .main-banner-content {
        padding:
            42px
            var(--mobile-gutter)
            40px;
    }

    .main-banner h1 {
        font-size: clamp(29px, 9vw, 37px);
    }

    .main-banner-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .main-banner-actions > * {
        width: 100%;
    }

    .category-strip-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-strip-heading h2 {
        max-width: none;
        font-size: 27px;
    }

    .category-strip-all {
        min-height: 42px;
    }

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

    .distributor-card {
        padding: 17px;
    }

    .distributor-actions {
        align-items: stretch;
    }

    .distributor-actions a {
        flex: 1 1 auto;
    }

    .contact-card,
    .contact-form-box {
        padding: 20px 17px;
    }

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

    .submit-button,
    .contact-submit,
    .distributor-access-button {
        width: 100%;
    }

    .institutional-opening-image,
    .institutional-band-image,
    .institutional-tech-image {
        height: clamp(205px, 61vw, 265px);
    }

    .institutional-tech-card {
        padding: 17px;
    }

    .institutional-final-box {
        align-items: stretch;
    }

    .institutional-final-link {
        width: 100%;
        min-height: 46px;
    }

    .product-gallery {
        padding: 10px;
    }

    .product-summary {
        padding: 22px 17px 19px;
    }

    .product-summary h1 {
        font-size: clamp(29px, 9vw, 37px);
    }

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

    .footer-brand,
    .footer-socials {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    .site-header {
        min-height: 62px;
        height: 62px;
    }

    .site-brand {
        height: 62px;
    }

    .site-brand img {
        height: 46px;
        max-height: 46px;
    }

    .mobile-menu-toggle {
        width: 43px;
        height: 43px;
    }

    .mobility-grid,
    .dynamic-product-grid,
    .dynamic-card-grid,
    .catalog-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .category-strip {
        grid-auto-columns: 82%;
    }

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

/* ==================================================
   VTRIC MOBILE OVERFLOW FIX V6
   Bloquea desplazamiento lateral en Safari
   ================================================== */

@media (max-width: 900px) {
    .site-nav {
        box-sizing: border-box !important;
        width: min(88vw, 370px) !important;
        max-width: calc(100vw - 12px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-x: none;
    }

    .site-nav *,
    .site-nav *::before,
    .site-nav *::after {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-menu-heading,
    .site-nav > a,
    .products-menu,
    .products-menu > summary,
    .products-mega,
    .products-mega-top,
    .products-mega-grid,
    .products-mega-category,
    .products-mega-category-link,
    .products-mega-items,
    .products-mega-subcategory,
    .products-mega-subproducts {
        width: 100% !important;
        max-width: 100% !important;
    }

    .products-menu {
        position: static !important;
        display: block !important;
        flex: 0 0 auto;
        overflow: visible;
    }

    .products-menu > summary {
        position: static !important;
        display: flex !important;
        min-height: 46px;
        padding: 11px 12px !important;
    }

    .products-mega {
        position: static !important;
        inset: auto !important;
        display: block !important;
        max-height: none !important;
        margin: 5px 0 8px !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        border-radius: 12px;
        transform: none !important;
    }

    .products-mega-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 7px 5px 10px !important;
    }

    .products-mega-top strong {
        overflow-wrap: anywhere;
    }

    .site-nav .products-mega-top a {
        width: auto !important;
        max-width: none !important;
        white-space: nowrap;
    }

    .products-mega-grid {
        position: static !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .products-mega-category {
        position: static !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        padding: 9px !important;
        overflow: hidden !important;
    }

    .products-mega-category
    > .products-mega-category-link {
        position: relative !important;
        display: flex !important;
        min-height: 42px;
        padding: 9px 29px 9px 5px !important;
        align-items: center;
        overflow-wrap: anywhere;
        white-space: normal !important;
        transform: none !important;
    }

    .products-mega-category
    > .products-mega-category-link::after {
        right: 6px;
    }

    .products-mega-category:not(.is-open)
    > .products-mega-items {
        display: none !important;
    }

    .products-mega-category.is-open
    > .products-mega-items {
        position: static !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        max-height: none !important;
        margin: 7px 0 0 !important;
        padding: 8px !important;
        overflow: visible !important;
        border: 1px solid #d5dfe6;
        border-radius: 9px;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .site-nav .products-mega-items a,
    .site-nav .products-mega-subcategory-link,
    .site-nav .products-mega-subproducts a {
        width: 100% !important;
        padding: 10px 8px !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .products-mega-subcategory,
    .products-mega-subproducts {
        position: static !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible !important;
    }
}

@media (max-width: 620px) {
    .site-nav {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/* VTRIC MOBILE COLUMN WRAP FIX V7 */

@media (max-width: 900px) {
    .site-nav,
    .site-nav.is-open {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-content: stretch !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .mobile-menu-heading,
    .site-nav > a,
    .products-menu {
        flex: 0 0 auto !important;
    }

    .products-menu[open] {
        height: auto !important;
        min-height: 0 !important;
    }

    .products-mega {
        flex: 0 0 auto !important;
        height: auto !important;
    }
}