@media (max-width: 767px) {
    .site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1rem 5%;

        & .logo {
            width: 33%;
            margin: 0 auto;
        }

        & nav {
            display: none;
        }
    }

    .dropdown {
        margin: 0;

        & .dropdown-toggle {
            padding: 0.25rem 1.5rem;
        }
    }

    .home-section {
        min-height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-top: 6rem;
        align-items: center;

        & h1 {
            font-size: var(--text-2xl);
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-wrap: balance;
        }

        & p {
            font-weight: 300;
            margin-bottom: 3rem;
        }

        & .dropdown {
            margin: 0;
        }
    }

    .triangulos-container,
    .triangulos-container-sucursales {
        display: none;
    }

    .tabs-section {
        padding: 0;
        width: 100%;
        padding: 2rem 0;

        .punchlines {
            justify-content: center;
            min-height: 66vh;
            padding: 6rem 8%;
            gap: 2.25rem;

            & .punchline {
                font-size: var(--text-xl);
            }
        }

        .tabs {
            justify-content: space-around;
            gap: 0;
            margin: 0 auto 0;
            margin-bottom: 3rem;
            padding: 0;
            max-width: 380px;

            & .tab-button {
                font-size: var(--text-sm);
                font-weight: 500;
                padding: 0.5rem 1rem;

                & span {
                    margin-top: 0;
                }
            }
        }

        .tab-content {
            gap: 1rem;
            padding: 0 8%;
            width: 100%;

            & .cards-wrapper {
                display: flex;
                gap: 1.75rem;
                align-items: stretch;
            }
        }

        & .asterisc {
            padding: 1.5rem 8%;

            &.opciones {
                padding: 0 8%;
            }
        }
    }

    .ribbon {
        font-size: var(--text-lg);
        font-weight: 600;
        text-align: center;
        padding: 2rem 8%;
        width: 100%;
    }

    .canales-section {
        min-height: 66vh;
        justify-content: space-between;
        padding: 4rem 5%;
        z-index: 1;

        & .canales-wrapper {
            width: 100%;
            gap: 0.25rem;
            pointer-events: auto;

            & .canales {
                min-width: 600vw;
                height: 72px;
            }
        }

        & .person-tv {
            display: none;
        }
    }

    .cta-section {
        gap: 3.5rem;
        min-height: 66vh;
        padding: 4rem 5%;

        & .info-container {
            width: 100%;
            text-wrap: balance;
            text-wrap: pretty;
        }

        & .person-internet {
            display: none;
        }
    }

    .faq {
        padding: 4rem 5%;

        & .faq-list {
            gap: 1.5rem;

            & .faq-item {
                padding: 0.5rem 0;

                & .pregunta {
                    font-size: var(--text-base);

                    &::after {
                        display: none;
                    }
                }

                & .respuesta {
                    margin-top: 1rem;
                    text-transform: lowercase;
                    text-wrap: balance;

                    &::first-letter {
                        text-transform: uppercase;
                    }
                }
            }
        }
    }

    .sucursales {
        padding: 4rem 5%;

        & .sucursales-list {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2.5rem;
        }
    }

    .beneficios-section {
        padding: 4rem 5%;

        & .beneficios-wrapper {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;

            & .beneficio {
                text-align: center;
                text-wrap: balance;
                padding: 0;

                & img {
                    width: 6rem;
                    margin: 0 auto;
                }

                & dt {
                    font-weight: 500;
                }
            }
        }
    }

    .tab-icon {
        width: 4rem;
    }

    .section-title {
        font-size: var(--text-2xl);
        font-weight: 600;
        text-align: center;
        text-wrap: balance;
        margin-bottom: 2.5rem;
    }

    .section-subtitle {
        font-size: var(--text-xl);
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-wrap: normal;
    }

    .subtitle-description {
        font-size: var(--text-base);
        font-weight: 300;
    }

    .video-carousel--desktop {
        display: none !important;
    }
    .video-carousel--mobile {
        display: block !important;
    }
}