@media screen and (max-width: 550px) {

    html,
    body {
        width: 100vw;
        overflow-x: hidden !important;
        box-sizing: border-box;
        font-size: 16px;
    }

    body,
    main,
    section {
        margin: 0 !important;
        padding: 0 8px !important;
        width: 100vw;
    }

    h1,
    h2,
    h3,
    h4 {
        font-size: 6vw !important;
        text-align: left !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    p,
    li,
    span,
    a {
        font-size: 4.2vw !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }

    .btn,
    button,
    .cta,
    .main-btn,
    a[role="button"] {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100vw;
        font-size: 4.8vw !important;
        padding: 12px 0 !important;
        border-radius: 8px !important;
        margin-top: 12px !important;
        text-align: center !important;
        box-sizing: border-box;
        display: block !important;
    }

    .tarjeta,
    .card,
    .shadow-box,
    .benefits-card,
    .feature-item {
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        padding: 16px !important;
        display: block !important;
    }

    .slider,
    .carousel,
    .swiper,
    .slides,
    .slide {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 !important;
        overflow-x: auto !important;
    }

    .slider-dots,
    .carousel-indicators,
    .swiper-pagination {
        bottom: 8px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: 100vw;
    }

    .benefits-row,
    .features-grid,
    .row,
    .columns {
        flex-direction: column !important;
        display: flex !important;
        gap: 18px !important;
        width: 100vw !important;
        box-sizing: border-box;
    }

    img,
    .logo,
    .brand-img,
    svg {
        max-width: 95vw !important;
        /* height: auto !important; */
        margin: 0 auto 16px auto !important;
        display: block !important;
    }

    [style*="float"],
    .float-left,
    .float-right {
        float: none !important;
        clear: both !important;
        display: block !important;
    }

    .col,
    .col-6,
    .col-4,
    .col-3 {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100vw !important;
        display: block !important;
        margin-bottom: 16px !important;
    }

    ul,
    ol {
        padding-left: 20px !important;
        margin-bottom: 16px !important;
    }

    .cta+.cta,
    .main-btn+.main-btn {
        margin-top: 10px !important;
    }

    a:hover,
    button:hover {
        filter: none !important;
        opacity: 1 !important;
    }

    .parallax,
    .bg-fixed {
        background-attachment: scroll !important;
    }

    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    #tarjetas-animadas {
        left: -25vw;
    }

    #beneficios-content {
        margin-top: 35vh !important;
    }

    .tarjeta-secundaria {
        top: 50vh !important;
    }

    .sombra-flotante {
        top: 75vh !important;
    }

    body.d-flex,
    body.flex-column {
        display: block !important;
        padding: 0 !important;
    }

    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .col-6 {
        width: 100% !important;
    }

    .ps-5,
    .px-5 {
        padding-left: 1rem !important;
    }

    .ms-5,
    .mx-5 {
        margin-left: 1rem !important;
    }

    .pe-5,
    .px-5 {
        padding-right: 1rem !important;
    }

    .me-5,
    .mx-5 {
        margin-right: 1rem !important;
    }

    #home .home-content {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    #home-header {
        top: -8em;
        line-height: 1.2em;
    }

    .swiper-container {
        width: 100%;
        overflow: hidden;
        padding-bottom: 30px;
        margin-left: -1.2em;
    }

    .swiper-slide {
        width: 80% !important;
    }

    footer {
        margin-top: 10vh !important;
    }

    div.beneficios-visa-col {
        max-width: 95% !important;
    }

    .beneficios-visa-col p {
        font-size: 1.1em !important;
        text-align: center !important;
    }


    .beneficios-visa-col h5 {
        font-size: 1.3rem !important;
        text-align: center !important;
    }

    #mas-beneficios h3 {
        padding-left: .9em !important;
        margin-top: 2em !important;
    }

    #mas-beneficios small {
        padding-left: 1.45em !important;
    }

    #form-solicitud {
        width: 100% !important;
    }

}