/* =========================================================
   MARÍA BONITA
   DISEÑO RESPONSIVE
   assets/css/responsive.css
   ========================================================= */


/* =========================================================
   PANTALLAS GRANDES
   1400px EN ADELANTE
   ========================================================= */

@media (min-width: 1400px) {

    .navbar-container {

        max-width:
            var(--mb-container-max);

    }

}


/* =========================================================
   LAPTOPS / ESCRITORIO MEDIANO
   1200px - 1399px
   ========================================================= */

@media (
    min-width: 1200px
) and (
    max-width: 1399.98px
) {

    .navbar-container {

        max-width: 1180px;

    }


    .brand-maria-bonita {

        margin-right: 1.5rem;

    }


    .logo-navbar {

        height: 62px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 52px;

    }


    .nav-link-mb {

        padding:
            1rem 0.55rem !important;

        font-size:
            0.78rem;

    }


    .btn-menu-navbar {

        padding:
            0.62rem 1rem;

        font-size:
            0.75rem;

    }

}


/* =========================================================
   LAPTOP / TABLET HORIZONTAL
   992px - 1199px
   ========================================================= */

@media (
    min-width: 992px
) and (
    max-width: 1199.98px
) {

    :root {

        --mb-navbar-height: 88px;

        --mb-navbar-height-scroll: 72px;

    }


    .navbar-container {

        max-width: 960px;

    }


    .brand-maria-bonita {

        margin-right: 1rem;

    }


    .logo-navbar {

        height: 56px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 48px;

    }


    .navbar-maria-bonita
    .navbar-nav {

        gap: 0;

    }


    .nav-link-mb {

        padding:
            1rem 0.4rem !important;

        font-size:
            0.71rem;

        letter-spacing:
            0.01em;

    }


    .navbar-actions {

        gap:
            0.4rem;

        margin-left:
            0.4rem;

    }


    .btn-menu-navbar {

        min-height: 40px;

        padding:
            0.55rem 0.8rem;

        font-size:
            0.7rem;

    }


    .btn-menu-navbar i {

        margin-right:
            0.3rem !important;

    }


    .btn-whatsapp-navbar {

        width: 40px;

        height: 40px;

        font-size: 1rem;

    }

}


/* =========================================================
   TABLET Y MÓVIL
   MENOS DE 992px
   ========================================================= */

@media (max-width: 991.98px) {

    :root {

        --mb-navbar-height: 82px;

        --mb-navbar-height-scroll: 72px;

        --mb-section-padding:
            var(--mb-section-padding-sm);

    }


    /* =====================================================
       NAVBAR
       ===================================================== */

    .navbar-maria-bonita {

        min-height:
            var(--mb-navbar-height);

        background:
            rgba(
                251,
                249,
                244,
                0.98
            );

        box-shadow:
            0 3px 16px
            rgba(
                40,
                59,
                80,
                0.07
            );

    }


    .navbar-container {

        min-height:
            var(--mb-navbar-height);

        padding-left:
            1.25rem;

        padding-right:
            1.25rem;

    }


    .navbar-maria-bonita.scrolled {

        min-height:
            var(--mb-navbar-height-scroll);

    }


    .navbar-maria-bonita.scrolled
    .navbar-container {

        min-height:
            var(--mb-navbar-height-scroll);

    }


    /* =====================================================
       LOGO
       ===================================================== */

    .brand-maria-bonita {

        margin-right: 0;

    }


    .logo-navbar {

        height: 58px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 52px;

    }


    /* =====================================================
       BOTÓN HAMBURGUESA
       ===================================================== */

    .navbar-toggler-mb {

        display: flex;

        margin-left: auto;

    }


    /* =====================================================
       CONTENEDOR COLAPSABLE
       ===================================================== */

    #menuPrincipal {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background:
            var(--mb-marfil-claro);

        border-top:
            1px solid
            rgba(
                96,
                75,
                59,
                0.08
            );

        border-bottom:
            1px solid
            rgba(
                96,
                75,
                59,
                0.08
            );

        box-shadow:
            0 18px 35px
            rgba(
                40,
                59,
                80,
                0.12
            );

    }


    #menuPrincipal.show {

        max-height:
            calc(
                100vh -
                var(--mb-navbar-height)
            );

        overflow-y: auto;

    }


    #menuPrincipal.collapsing {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

    }


    /* =====================================================
       LISTA DE NAVEGACIÓN
       ===================================================== */

    .navbar-maria-bonita
    .navbar-nav {

        width: 100%;

        padding:
            1rem 1.25rem
            0.4rem;

        align-items:
            stretch !important;

    }


    .navbar-maria-bonita
    .nav-item {

        width: 100%;

    }


    /* =====================================================
       ENLACES
       ===================================================== */

    .nav-link-mb {

        width: 100%;

        position: relative;

        padding:
            0.85rem
            0.25rem !important;

        color:
            var(--mb-cafe-oscuro) !important;

        font-size:
            0.9rem;

        font-weight:
            var(--mb-font-medium);

        border-bottom:
            1px solid
            rgba(
                96,
                75,
                59,
                0.07
            );

    }


    .nav-link-mb::after {

        display: none;

    }


    .nav-link-mb::before {

        content: "";

        position: absolute;

        left: 0;

        top: 50%;

        width: 0;

        height: 24px;

        background:
            var(--mb-terracota);

        border-radius:
            var(--mb-radius-pill);

        transform:
            translateY(-50%);

        transition:
            width var(--mb-transition);

    }


    .nav-link-mb:hover,
    .nav-link-mb.active {

        padding-left:
            1rem !important;

        color:
            var(--mb-terracota) !important;

    }


    .nav-link-mb:hover::before,
    .nav-link-mb.active::before {

        width: 3px;

    }


    /* =====================================================
       ACCIONES MÓVILES
       ===================================================== */

    .navbar-actions {

        width: 100%;

        gap:
            0.75rem;

        padding:
            0.9rem 1.25rem
            1.4rem;

    }


    .btn-menu-navbar {

        width: 100%;

        min-height: 48px;

        font-size:
            0.82rem;

    }


    .btn-whatsapp-navbar {

        width: 100%;

        height: 48px;

        min-height: 48px;

        padding:
            0.7rem 1rem;

        border-radius:
            var(--mb-radius-pill);

        font-size:
            0.82rem;

    }


    .btn-whatsapp-navbar i {

        font-size:
            1.15rem;

    }


    /* =====================================================
       TÍTULOS
       ===================================================== */

    h1 {

        font-size:
            clamp(
                2.8rem,
                8vw,
                4.2rem
            );

    }


    h2 {

        font-size:
            clamp(
                2.2rem,
                6vw,
                3.2rem
            );

    }


    h3 {

        font-size:
            clamp(
                1.75rem,
                5vw,
                2.5rem
            );

    }


    /* =====================================================
       SECCIONES
       ===================================================== */

    .seccion {

        padding:
            var(--mb-section-padding-sm);

    }

}


/* =========================================================
   TABLET VERTICAL
   768px - 991px
   ========================================================= */

@media (
    min-width: 768px
) and (
    max-width: 991.98px
) {

    .navbar-container {

        padding-left:
            2rem;

        padding-right:
            2rem;

    }


    .navbar-maria-bonita
    .navbar-nav {

        padding-left:
            2rem;

        padding-right:
            2rem;

    }


    .navbar-actions {

        padding-left:
            2rem;

        padding-right:
            2rem;

    }


    .logo-navbar {

        height: 60px;

    }

}


/* =========================================================
   CELULARES
   MENOS DE 768px
   ========================================================= */

@media (max-width: 767.98px) {

    :root {

        --mb-navbar-height: 76px;

        --mb-navbar-height-scroll: 68px;

        --mb-section-padding:
            3.5rem 0;

    }


    /* =====================================================
       BODY
       ===================================================== */

    body {

        font-size:
            0.95rem;

    }


    /* =====================================================
       NAVBAR
       ===================================================== */

    .navbar-container {

        padding-left:
            1rem;

        padding-right:
            1rem;

    }


    .logo-navbar {

        height: 52px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 46px;

    }


    .navbar-toggler-mb {

        width: 44px;

        height: 44px;

    }


    /* =====================================================
       MENÚ DESPLEGABLE
       ===================================================== */

    .navbar-maria-bonita
    .navbar-nav {

        padding:
            0.75rem 1rem
            0.3rem;

    }


    .navbar-actions {

        padding:
            0.85rem 1rem
            1.25rem;

    }


    .nav-link-mb {

        padding:
            0.8rem
            0.2rem !important;

        font-size:
            0.86rem;

    }


    /* =====================================================
       TIPOGRAFÍA
       ===================================================== */

    h1 {

        font-size:
            clamp(
                2.6rem,
                12vw,
                3.8rem
            );

    }


    h2 {

        font-size:
            clamp(
                2.05rem,
                9vw,
                2.8rem
            );

    }


    h3 {

        font-size:
            clamp(
                1.65rem,
                7vw,
                2.25rem
            );

    }


    h4 {

        font-size:
            1.65rem;

    }


    p {

        font-size:
            0.94rem;

        line-height:
            1.7;

    }


    /* =====================================================
       ETIQUETA DE SECCIÓN
       ===================================================== */

    .etiqueta-seccion {

        font-size:
            0.69rem;

        letter-spacing:
            0.12em;

    }


    .etiqueta-seccion::before {

        width: 24px;

    }


    /* =====================================================
       BOTONES
       ===================================================== */

    .btn-mb {

        min-height: 46px;

        padding:
            0.75rem 1.35rem;

        font-size:
            0.8rem;

    }


    /* =====================================================
       SECCIONES
       ===================================================== */

    .seccion {

        padding:
            3.5rem 0;

    }


    .titulo-seccion {

        margin-bottom:
            1rem;

    }


    /* =====================================================
       CARDS
       ===================================================== */

    .card-mb {

        border-radius:
            var(--mb-radius-md);

    }


    .imagen-mb {

        border-radius:
            var(--mb-radius-md);

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   MENOS DE 576px
   ========================================================= */

@media (max-width: 575.98px) {

    :root {

        --mb-navbar-height: 72px;

        --mb-navbar-height-scroll: 66px;

    }


    .navbar-container {

        padding-left:
            0.85rem;

        padding-right:
            0.85rem;

    }


    .logo-navbar {

        height: 48px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 43px;

    }


    .navbar-toggler-mb {

        width: 42px;

        height: 42px;

    }


    .menu-mobile-icon {

        width: 19px;

        height: 15px;

    }


    .navbar-maria-bonita
    .navbar-nav {

        padding-left:
            0.85rem;

        padding-right:
            0.85rem;

    }


    .navbar-actions {

        padding-left:
            0.85rem;

        padding-right:
            0.85rem;

    }


    .nav-link-mb {

        font-size:
            0.84rem;

    }


    .btn-menu-navbar,
    .btn-whatsapp-navbar {

        min-height: 46px;

    }


    h1 {

        font-size:
            clamp(
                2.45rem,
                13vw,
                3.4rem
            );

    }


    h2 {

        font-size:
            clamp(
                2rem,
                10vw,
                2.55rem
            );

    }


    p {

        font-size:
            0.92rem;

    }


    .seccion {

        padding:
            3rem 0;

    }

}


/* =========================================================
   CELULARES MUY PEQUEÑOS
   MENOS DE 380px
   ========================================================= */

@media (max-width: 379.98px) {

    .logo-navbar {

        height: 44px;

    }


    .navbar-toggler-mb {

        width: 40px;

        height: 40px;

    }


    .nav-link-mb {

        font-size:
            0.8rem;

    }


    .btn-menu-navbar,
    .btn-whatsapp-navbar {

        font-size:
            0.77rem;

    }


    h1 {

        font-size:
            2.3rem;

    }


    h2 {

        font-size:
            1.9rem;

    }

}


/* =========================================================
   CELULAR EN HORIZONTAL
   ========================================================= */

@media (
    max-width: 991.98px
) and (
    orientation: landscape
) and (
    max-height: 600px
) {

    :root {

        --mb-navbar-height: 68px;

        --mb-navbar-height-scroll: 64px;

    }


    .logo-navbar {

        height: 46px;

    }


    .navbar-maria-bonita.scrolled
    .logo-navbar {

        height: 42px;

    }


    #menuPrincipal.show {

        max-height:
            calc(
                100vh -
                var(--mb-navbar-height)
            );

        overflow-y: auto;

    }


    .navbar-maria-bonita
    .navbar-nav {

        padding-top:
            0.5rem;

    }


    .nav-link-mb {

        padding:
            0.55rem
            0.2rem !important;

    }


    .navbar-actions {

        padding-top:
            0.55rem;

        padding-bottom:
            0.8rem;

    }

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .nav-link-mb:hover {

        color:
            var(--mb-cafe-oscuro) !important;

    }


    .nav-link-mb.active {

        color:
            var(--mb-terracota) !important;

    }


    .btn-mb:hover,
    .btn-menu-navbar:hover,
    .btn-whatsapp-navbar:hover {

        transform: none;

    }


    .card-mb:hover {

        transform: none;

    }


    .imagen-mb:hover img {

        transform: none;

    }

}


/* =========================================================
   PANTALLAS DE ALTA DENSIDAD
   ========================================================= */

@media (
    min-resolution: 2dppx
) {

    img {

        image-rendering: auto;

    }

}


/* =========================================================
   IMPRESIÓN
   ========================================================= */

@media print {

    .header-principal,
    .navbar-maria-bonita {

        display: none !important;

    }


    body {

        background:
            var(--mb-blanco);

        color:
            var(--mb-negro);

    }


    .site-wrapper {

        background:
            var(--mb-blanco);

    }

}
/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .footer-principal {

        padding:
            4rem 0
            3rem;

    }


    .footer-contacto {

        padding-left: 0;

    }

}


@media (max-width: 767.98px) {

    .footer-principal {

        padding:
            3.5rem 0
            2.5rem;

    }


    .footer-brand {

        max-width: 100%;

    }


    .footer-logo {

        max-width: 190px;

        height: 78px;

    }


    .footer-descripcion {

        max-width: 100%;

    }


    .footer-titulo {

        margin-bottom:
            1.1rem;

        font-size:
            1.4rem;

    }


    .footer-bottom {

        padding:
            1.2rem 0;

    }


    .footer-bottom-container {

        text-align: center;

    }


    .footer-copyright,
    .footer-frase {

        text-align: center;

    }

}


@media (max-width: 575.98px) {

    .footer-principal {

        padding:
            3rem 0
            2rem;

    }


    .footer-logo {

        max-width: 175px;

        height: 72px;

    }


    .footer-social-link {

        width: 40px;

        height: 40px;

    }

}
/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .hero-title {

        font-size:
            clamp(
                3.8rem,
                7vw,
                5.5rem
            );

    }

}


@media (max-width: 991.98px) {

    .hero-maria-bonita {

        min-height:
            calc(
                100svh -
                var(--mb-navbar-height)
            );

    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(
                    27,
                    29,
                    28,
                    0.76
                )
                0%,

                rgba(
                    27,
                    29,
                    28,
                    0.56
                )
                60%,

                rgba(
                    27,
                    29,
                    28,
                    0.34
                )
                100%
            );

    }


    .hero-container {

        padding-top:
            4rem;

        padding-bottom:
            7rem;

    }


    .hero-content {

        max-width: 680px;

    }


    .hero-title {

        font-size:
            clamp(
                3.6rem,
                9vw,
                5rem
            );

    }

}


@media (max-width: 767.98px) {

    .hero-maria-bonita {

        min-height:
            calc(
                100svh -
                var(--mb-navbar-height)
            );

        align-items:
            flex-end;

    }


    .hero-image {

        object-position:
            58% center;

    }


    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(
                    24,
                    25,
                    24,
                    0.30
                )
                0%,

                rgba(
                    24,
                    25,
                    24,
                    0.48
                )
                35%,

                rgba(
                    24,
                    25,
                    24,
                    0.88
                )
                100%
            );

    }


    .hero-container {

        padding-top:
            7rem;

        padding-bottom:
            6.7rem;

    }


    .hero-content {

        max-width: 100%;

    }


    .hero-eyebrow {

        margin-bottom:
            1rem;

        font-size:
            0.64rem;

        letter-spacing:
            0.14em;

    }


    .hero-eyebrow-line {

        width: 28px;

    }


    .hero-title {

        max-width: 560px;

        font-size:
            clamp(
                3rem,
                14vw,
                4.3rem
            );

        line-height:
            0.94;

    }


    .hero-description {

        max-width: 540px;

        margin-bottom:
            1.6rem;

        font-size:
            0.91rem;

        line-height:
            1.75;

    }


    .hero-actions {

        margin-bottom:
            1.7rem;

    }


    .hero-btn-primary,
    .hero-btn-secondary {

        min-height: 48px;

    }


    .hero-detail {

        padding-top:
            1rem;

    }


    .hero-scroll {

        bottom:
            1.7rem;

    }


    .hero-bottom-shape {

        height: 18px;

    }

}


@media (max-width: 575.98px) {

    .hero-container {

        padding-top:
            5.5rem;

        padding-bottom:
            6rem;

    }


    .hero-title {

        font-size:
            clamp(
                2.75rem,
                15vw,
                3.75rem
            );

    }


    .hero-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }


    .hero-actions
    .btn-mb {

        width: 100%;

    }


    .hero-detail {

        width: 100%;

    }


    .hero-detail-icon {

        width: 40px;

        height: 40px;

    }


    .hero-detail-title {

        font-size:
            1rem;

    }


    .hero-detail-text {

        font-size:
            0.7rem;

    }


    .hero-decoracion {

        display: none;

    }

}


@media (
    max-width: 991.98px
) and (
    orientation: landscape
) and (
    max-height: 600px
) {

    .hero-maria-bonita {

        min-height: 620px;

    }


    .hero-container {

        padding-top:
            3.5rem;

        padding-bottom:
            5.5rem;

    }


    .hero-title {

        font-size:
            3.5rem;

    }


    .hero-description {

        margin-bottom:
            1.3rem;

    }


    .hero-actions {

        margin-bottom:
            1.3rem;

    }

}
/* =========================================================
   MENÚ DESTACADO RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .menu-card-image {

        height: 220px;

    }


    .menu-card-body {

        padding:
            1.2rem;

    }


    .menu-card-title {

        font-size:
            1.45rem;

    }

}


@media (max-width: 991.98px) {

    .menu-destacado-header {

        margin-bottom:
            2rem;

    }


    .menu-categorias-destacadas {

        margin-bottom:
            2.2rem;

    }


    .menu-card-image {

        height: 260px;

    }


    .menu-card-description {

        min-height: 52px;

    }

}


@media (max-width: 767.98px) {

    .menu-categorias-destacadas {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            0.4rem;

        margin-left:
            -0.25rem;

        margin-right:
            -0.25rem;

        scrollbar-width:
            none;

    }


    .menu-categorias-destacadas::-webkit-scrollbar {

        display: none;

    }


    .menu-categoria-pill {

        flex:
            0 0 auto;

    }


    .menu-card-image {

        height: 235px;

    }


    .menu-card-description {

        min-height: auto;

    }

}


@media (max-width: 575.98px) {

    .menu-destacado-header {

        text-align:
            left !important;

    }


    .menu-destacado-header
    .etiqueta-seccion {

        justify-content:
            flex-start !important;

    }


    .menu-destacado-header
    .descripcion-seccion {

        margin-left:
            0 !important;

        margin-right:
            0 !important;

    }


    .menu-categorias-destacadas {

        margin-bottom:
            1.8rem;

    }


    .menu-card {

        border-radius:
            18px;

    }


    .menu-card-image {

        height: 255px;

    }


    .menu-card-body {

        padding:
            1.25rem;

    }


    .menu-card-title {

        font-size:
            1.5rem;

    }


    .menu-card-description {

        font-size:
            0.8rem;

    }


    .menu-destacado-action {

        margin-top:
            2.2rem;

    }


    .menu-destacado-action
    .btn-mb {

        width: 100%;

    }

}
/* =========================================================
   TEMPORADA RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .temporada-imagen {

        min-height: 520px;

    }


    .temporada-contenido {

        padding:
            3.8rem
            3rem;

    }

}


@media (max-width: 991.98px) {

    .temporada-wrapper {

        border-radius:
            24px;

    }


    .temporada-imagen {

        min-height: 480px;

    }


    .temporada-imagen::after {

        background:
            linear-gradient(
                180deg,
                transparent 70%,
                rgba(
                    70,
                    54,
                    43,
                    0.22
                )
            );

    }


    .temporada-contenido {

        padding:
            3rem;

    }

}


@media (max-width: 767.98px) {

    .temporada-wrapper {

        border-radius:
            20px;

    }


    .temporada-imagen {

        min-height: 400px;

    }


    .temporada-badge {

        top: 18px;

        left: 18px;

    }


    .temporada-contenido {

        padding:
            2.5rem
            2rem;

    }


    .temporada-titulo {

        font-size:
            clamp(
                2.5rem,
                9vw,
                3.4rem
            );

    }


    .temporada-descripcion {

        font-size:
            0.88rem;

    }

}


@media (max-width: 575.98px) {

    .temporada-wrapper {

        border-radius:
            18px;

    }


    .temporada-imagen {

        min-height: 330px;

    }


    .temporada-badge {

        max-width:
            calc(
                100% -
                32px
            );

        top: 16px;

        left: 16px;

        padding:
            0.48rem
            0.72rem;

        font-size:
            0.61rem;

    }


    .temporada-contenido {

        padding:
            2.2rem
            1.4rem
            2.4rem;

    }


    .temporada-eyebrow {

        font-size:
            0.61rem;

        letter-spacing:
            0.12em;

    }


    .temporada-titulo {

        font-size:
            2.6rem;

    }


    .temporada-detalle {

        align-items:
            flex-start;

    }


    .temporada-acciones {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .temporada-acciones
    .btn-mb {

        width: 100%;

    }


    .temporada-decoracion {

        display: none;

    }

}
/* =========================================================
   GALERÍA RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .galeria-grid {

        grid-auto-rows:
            200px;

    }

}


@media (max-width: 991.98px) {

    .galeria-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows:
            230px;

    }


    .galeria-item-grande {

        grid-column:
            span 2;

        grid-row:
            span 2;

    }


    .galeria-item-normal {

        grid-column:
            span 1;

    }


    .galeria-item-ancho {

        grid-column:
            span 2;

    }

}


@media (max-width: 767.98px) {

    .galeria-header-action {

        display: none !important;

    }


    .galeria-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows:
            190px;

        gap:
            12px;

    }


    .galeria-item {

        border-radius:
            16px;

    }


    .galeria-overlay {

        padding:
            1rem;

    }


    .galeria-info h3 {

        font-size:
            1.05rem;

    }


    .galeria-icon {

        width: 36px;

        height: 36px;

    }


    .galeria-action-mobile {

        display: block;

    }

}


@media (max-width: 575.98px) {

    .galeria-grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            260px;

    }


    .galeria-item-grande,
    .galeria-item-normal,
    .galeria-item-ancho {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .galeria-item-grande {

        min-height: 340px;

    }


    .galeria-item {

        border-radius:
            15px;

    }


    .galeria-overlay {

        padding:
            1.1rem;

    }


    .galeria-info {

        max-width: 78%;

    }


    .galeria-info h3 {

        font-size:
            1.2rem;

    }


    .galeria-categoria {

        font-size:
            0.58rem;

    }


    .galeria-action-mobile
    .btn-mb {

        width: 100%;

    }

}
@media (max-width: 399.98px) {

    .ubicacion-visual {

        min-height: 470px;

    }


    .ubicacion-mapa,
    .ubicacion-mapa-iframe {

        min-height: 380px;

    }


    .ubicacion-card {

        left: 10px;

        right: 10px;

        bottom: 10px;

        padding:
            0.75rem;

    }


    .ubicacion-card-icon {

        width: 38px;

        height: 38px;

    }


    .ubicacion-card strong {

        font-size:
            1rem;

    }


    .ubicacion-card small {

        font-size:
            0.58rem;

    }


    .ubicacion-visual-footer {

        height: 90px;

        padding:
            0.9rem
            1rem;

    }


    .ubicacion-visual-footer p {

        font-size:
            0.98rem;

    }

}

/* =========================================================
   UBICACIÓN RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .ubicacion-visual {

        min-height: 580px;

    }


    .ubicacion-mapa,
    .ubicacion-mapa-iframe {

        min-height: 475px;

    }

}


@media (max-width: 991.98px) {

    .ubicacion-contenido {

        max-width: 720px;

    }


    .ubicacion-visual {

        min-height: 600px;

        border-radius:
            24px;

    }


    .ubicacion-mapa,
    .ubicacion-mapa-iframe {

        min-height: 495px;

    }

}


@media (max-width: 767.98px) {

    .ubicacion-intro {

        font-size:
            1.15rem;

    }


    .ubicacion-visual {

        min-height: 535px;

        border-radius:
            20px;

    }


    .ubicacion-mapa,
    .ubicacion-mapa-iframe {

        min-height: 430px;

    }


    .ubicacion-card {

        left: 18px;

        bottom: 18px;

        max-width:
            calc(
                100% -
                36px
            );

    }

}


@media (max-width: 575.98px) {

    /* =====================================================
       ACCIONES
       ===================================================== */

    .ubicacion-acciones {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .ubicacion-acciones
    .btn-mb {

        width: 100%;

    }


    /* =====================================================
       DATOS
       ===================================================== */

    .ubicacion-item {

        gap:
            0.8rem;

    }


    .ubicacion-item-icon {

        width: 42px;

        height: 42px;

    }


    /* =====================================================
       CONTENEDOR DEL MAPA
       ===================================================== */

    .ubicacion-visual {

        min-height: 500px;

        border-radius:
            18px;

    }


    .ubicacion-mapa,
    .ubicacion-mapa-iframe {

        min-height: 405px;

    }


    /* =====================================================
       TARJETA SOBRE EL MAPA
       ===================================================== */

    .ubicacion-card {

        left: 12px;

        right: 12px;

        bottom: 12px;

        max-width: none;

        padding:
            0.85rem;

    }


    .ubicacion-card-icon {

        width: 42px;

        height: 42px;

    }


    .ubicacion-card-label {

        font-size:
            0.58rem;

    }


    .ubicacion-card strong {

        font-size:
            1.05rem;

    }


    .ubicacion-card small {

        font-size:
            0.62rem;

    }


    /* =====================================================
       FRANJA INFERIOR
       ===================================================== */

    .ubicacion-visual-footer {

        height: 95px;

        padding:
            1rem
            1.2rem;

    }


    .ubicacion-visual-footer p {

        font-size:
            1.05rem;

    }


    .ubicacion-visual-icon {

        width: 44px;

        height: 44px;

    }

}
/* =========================================================
   LLAMADA A LA ACCIÓN RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .llamada-wrapper {

        min-height: 490px;

        border-radius:
            24px;

    }


    .llamada-contenido {

        padding:
            4.5rem
            2rem;

    }

}


@media (max-width: 767.98px) {

    .llamada-wrapper {

        min-height: 470px;

        border-radius:
            20px;

    }


    .llamada-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(
                    40,
                    59,
                    80,
                    0.72
                )
                0%,

                rgba(
                    70,
                    54,
                    43,
                    0.88
                )
                100%
            );

    }


    .llamada-contenido {

        padding:
            4rem
            1.5rem;

    }


    .llamada-titulo {

        font-size:
            clamp(
                3rem,
                11vw,
                4.3rem
            );

    }


    .llamada-descripcion {

        font-size:
            0.88rem;

    }

}


@media (max-width: 575.98px) {

    .llamada-wrapper {

        min-height: 460px;

        border-radius:
            18px;

    }


    .llamada-background img {

        object-position:
            60% center;

    }


    .llamada-contenido {

        width: 100%;

        padding:
            3.6rem
            1.2rem;

    }


    .llamada-eyebrow {

        font-size:
            0.61rem;

        letter-spacing:
            0.13em;

    }


    .llamada-titulo {

        font-size:
            3rem;

    }


    .llamada-acciones {

        width: 100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .llamada-acciones
    .btn-mb {

        width: 100%;

    }


    .llamada-detalle {

        gap:
            0.8rem
            1.1rem;

    }


    .llamada-detalle span {

        font-size:
            0.64rem;

    }


    .llamada-decoracion {

        display: none;

    }

}
/* =========================================================
   WHATSAPP RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {

    .whatsapp-wrapper {

        right: 18px;

        bottom: 18px;

    }


    .whatsapp-flotante {

        width: 56px;

        min-width: 56px;

        height: 56px;

        padding: 0;

        border-radius:
            var(--mb-radius-circle);

    }


    .whatsapp-flotante-texto {

        display: none;

    }


    .whatsapp-flotante i {

        font-size:
            1.4rem;

    }


    .whatsapp-mensaje {

        right: 0;

        bottom: 68px;

        max-width: 235px;

    }

}


@media (max-width: 575.98px) {

    .whatsapp-wrapper {

        right: 14px;

        bottom: 14px;

    }


    .whatsapp-flotante {

        width: 54px;

        min-width: 54px;

        height: 54px;

    }


    .whatsapp-flotante i {

        font-size:
            1.35rem;

    }


    /* En móvil no mostramos la burbuja
       para evitar tapar contenido */

    .whatsapp-mensaje {

        display: none;

    }

}
/* =========================================================
   GOOGLE MAPS RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .ubicacion-mapa-iframe {

        min-height: 475px;

    }

}


@media (max-width: 991.98px) {

    .ubicacion-mapa-iframe {

        min-height: 495px;

    }

}


@media (max-width: 767.98px) {

    .ubicacion-mapa-iframe {

        min-height: 430px;

    }

}


@media (max-width: 575.98px) {

    .ubicacion-mapa-iframe {

        min-height: 405px;

    }

}
/* =========================================================
   PÁGINA MENÚ RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .menu-page-hero {

        min-height: 420px;

    }


    /* =====================================================
       BARRA DE CATEGORÍAS
       ===================================================== */

    .menu-page-categorias {

        position: sticky;

        top: 0;

        z-index: 1040;

        width: 100%;

        padding:
            0.8rem 0;

        background:
            rgba(
                251,
                249,
                244,
                0.98
            );

        border-bottom:
            1px solid
            rgba(
                96,
                75,
                59,
                0.08
            );

        box-shadow:
            0 5px 18px
            rgba(
                40,
                59,
                80,
                0.08
            );

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

    }


    .menu-page-categorias-scroll {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        flex-wrap: nowrap;

        gap:
            0.45rem;

        overflow-x: auto;

        overflow-y: hidden;

        padding:
            0.1rem
            0.15rem
            0.35rem;

        scroll-behavior: smooth;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .menu-page-categorias-scroll::-webkit-scrollbar {

        display: none;

    }


    .menu-page-categoria-btn {

        flex:
            0 0 auto;

        white-space: nowrap;

    }


    /* =====================================================
       TARJETAS HORIZONTALES
       ===================================================== */

    .menu-page-card-horizontal {

        display: block;

    }


    .menu-page-card-horizontal
    .menu-page-card-image {

        min-height: 230px;

    }


    /* =====================================================
       TEMPORADA
       ===================================================== */

    .menu-page-temporada-body {

        padding:
            2.8rem;

    }

}

@media (max-width: 767.98px) {

    .menu-page-hero {

        min-height: 390px;

    }


    .menu-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(40,30,25,.45),
                rgba(40,30,25,.88)
            );

    }


    .menu-page-hero-content {

        padding:
            4rem 0;

    }


    .menu-page-hero h1 {

        font-size:
            4rem;

    }


    .menu-page-header {

        margin-bottom:
            3rem;

    }


    .menu-page-seccion {

        margin-bottom:
            4rem;

    }


    .menu-page-card-image {

        height: 240px;

    }


    .menu-page-leches-grid {

        grid-template-columns:
            1fr;

    }


    .menu-page-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (max-width: 575.98px) {

    .menu-page-hero {

        min-height: 360px;

    }


    .menu-page-hero h1 {

        font-size:
            3.3rem;

    }


    .menu-page-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .menu-page-hero-actions
    .btn-mb {

        width: 100%;

    }


    /* =====================================================
       CATEGORÍAS MÓVIL
       ===================================================== */

    .menu-page-categorias {

        top: 0;

        padding:
            0.55rem 0;

    }


    .menu-page-categorias-scroll {

        gap:
            0.35rem;

        padding:
            0.1rem
            0.15rem
            0.25rem;

    }


    .menu-page-categoria-btn {

        min-height: 38px;

        padding:
            0.48rem
            0.72rem;

        font-size:
            0.72rem;

    }


    .menu-page-categoria-btn i {

        font-size:
            0.85rem;

    }


    /* =====================================================
       SECCIONES
       ===================================================== */

    .menu-page-seccion-header h3 {

        font-size:
            1.65rem;

    }


    .menu-page-seccion-icon {

        width: 44px;

        height: 44px;

    }


    /* =====================================================
       PRODUCTOS
       ===================================================== */

    .menu-page-card-image {

        height: 230px;

    }


    .menu-page-card-body {

        padding:
            1.1rem;

    }


    .menu-page-card h4 {

        font-size:
            1.35rem;

    }


    /* =====================================================
       TEMPORADA
       ===================================================== */

    .menu-page-temporada {

        border-radius:
            20px;

    }


    .menu-page-temporada-image {

        min-height: 320px;

    }


    .menu-page-temporada-body {

        padding:
            2.2rem
            1.4rem;

    }


    .menu-page-temporada h3 {

        font-size:
            2.4rem;

    }


    /* =====================================================
       LECHES
       ===================================================== */

    .menu-page-leches {

        padding:
            1.3rem;

    }


    /* =====================================================
       CTA
       ===================================================== */

    .menu-page-cta {

        padding:
            1.4rem;

    }


    .menu-page-cta
    .btn-mb {

        width: 100%;

    }

}
/* =========================================================
   PÁGINA EXPERIENCIA RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .experiencia-page-hero {

        min-height: 430px;

    }


    .experiencia-page-intro-image {

        height: 520px;

    }


    .experiencia-page-destacada-image {

        min-height: 430px;

    }


    .experiencia-page-destacada-content {

        padding:
            3rem;

    }

}


@media (max-width: 767.98px) {

    .experiencia-page-hero {

        min-height: 400px;

    }


    .experiencia-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.40),
                rgba(45,32,26,.88)
            );

    }


    .experiencia-page-hero h1 {

        font-size:
            4rem;

    }


    .experiencia-page-intro-image {

        height: 450px;

        border-radius:
            100px 16px 100px 16px;

    }


    .experiencia-page-destacada-wrapper {

        border-radius:
            22px;

    }


    .experiencia-page-destacada-content {

        padding:
            2.5rem 2rem;

    }


    .experiencia-page-momentos-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            220px 220px;

    }


    .experiencia-page-cta-wrapper {

        padding:
            3rem 1.5rem;

        border-radius:
            22px;

    }

}


@media (max-width: 575.98px) {

    .experiencia-page-hero {

        min-height: 360px;

    }


    .experiencia-page-hero h1 {

        font-size:
            3.25rem;

    }


    .experiencia-page-intro-image {

        height: 390px;

        border-radius:
            80px 14px 80px 14px;

    }


    .experiencia-page-intro-lead {

        font-size:
            1.15rem;

    }


    .experiencia-page-pilar {

        padding:
            1.5rem;

    }


    .experiencia-page-destacada-image {

        min-height: 320px;

    }


    .experiencia-page-destacada-content {

        padding:
            2.2rem 1.4rem;

    }


    .experiencia-page-destacada-content h2 {

        font-size:
            2.5rem;

    }


    .experiencia-page-momentos-grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(3, 260px);

    }


    .experiencia-page-momento.grande {

        grid-row:
            span 1;

    }


    .experiencia-page-cta-wrapper {

        padding:
            2.7rem 1.2rem;

    }


    .experiencia-page-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .experiencia-page-cta-actions
    .btn-mb {

        width: 100%;

    }

}
/* =========================================================
   PÁGINA NOSOTROS RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .nosotros-page-hero {

        min-height: 430px;

    }


    .nosotros-page-image {

        min-height: 520px;

    }


    .nosotros-page-image > img {

        height: 520px;

    }


    .nosotros-page-filosofia-wrapper {

        padding:
            3.5rem
            2.5rem;

    }


    .nosotros-page-identidad-grid {

        grid-template-rows:
            repeat(2, 220px);

    }

}


@media (max-width: 767.98px) {

    .nosotros-page-hero {

        min-height: 400px;

    }


    .nosotros-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.38),
                rgba(45,32,26,.88)
            );

    }


    .nosotros-page-hero h1 {

        font-size:
            4rem;

    }


    .nosotros-page-image {

        min-height: 450px;

        border-radius:
            18px 100px 18px 100px;

    }


    .nosotros-page-image > img {

        height: 450px;

    }


    .nosotros-page-filosofia-wrapper {

        padding:
            3rem
            1.8rem;

        border-radius:
            22px;

    }


    .nosotros-page-origen-wrapper {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            2rem;

    }

}


@media (max-width: 575.98px) {

    .nosotros-page-hero {

        min-height: 360px;

    }


    .nosotros-page-hero h1 {

        font-size:
            3.2rem;

    }


    .nosotros-page-image {

        min-height: 390px;

        border-radius:
            15px 75px 15px 75px;

    }


    .nosotros-page-image > img {

        height: 390px;

    }


    .nosotros-page-image-card {

        left: 14px;

        right: 14px;

        bottom: 14px;

        padding:
            .85rem;

    }


    .nosotros-page-lead {

        font-size:
            1.15rem;

    }


    .nosotros-page-filosofia-wrapper {

        padding:
            2.5rem
            1.2rem;

    }


    .nosotros-page-filosofia blockquote {

        font-size:
            2.2rem;

    }


    .nosotros-page-valor {

        padding:
            1.4rem;

    }


    .nosotros-page-identidad-grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(3, 260px);

    }


    .nosotros-page-identidad-img.grande {

        grid-row:
            span 1;

    }


    .nosotros-page-origen-wrapper {

        padding:
            1.5rem;

    }


    .nosotros-page-origen h2 {

        font-size:
            2rem;

    }


    .nosotros-page-origen
    .btn-mb {

        width: 100%;

    }


    .nosotros-page-cta-wrapper {

        padding:
            2.8rem
            1.2rem;

        border-radius:
            22px;

    }


    .nosotros-page-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .nosotros-page-cta-actions
    .btn-mb {

        width: 100%;

    }

}
/* =========================================================
   PÁGINA GALERÍA RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .galeria-page-hero {

        min-height: 430px;

    }


    .galeria-page-filtros-scroll {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        padding-bottom:
            .2rem;

    }


    .galeria-page-filtros-scroll::-webkit-scrollbar {

        display: none;

    }


    .galeria-page-filtro-btn {

        flex:
            0 0 auto;

    }


    .galeria-page-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows:
            230px;

    }


    .galeria-page-item-grande {

        grid-column:
            span 2;

    }


    .galeria-page-item-ancho {

        grid-column:
            span 2;

    }


    .galeria-page-cta-wrapper {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (max-width: 767.98px) {

    .galeria-page-hero {

        min-height: 400px;

    }


    .galeria-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.38),
                rgba(45,32,26,.88)
            );

    }


    .galeria-page-hero h1 {

        font-size:
            4rem;

    }


    .galeria-page-filtros {

        top: 0;

        padding:
            .65rem 0;

    }


    .galeria-page-grid {

        grid-auto-rows:
            210px;

        gap:
            12px;

    }


    .galeria-page-item {

        border-radius:
            16px;

    }


    .galeria-page-overlay {

        padding:
            1rem;

    }


    .galeria-page-overlay h3 {

        font-size:
            1.05rem;

    }


    .galeria-lightbox {

        padding:
            1rem;

    }


    .galeria-lightbox-nav {

        width: 42px;

        height: 42px;

    }


    .galeria-lightbox-anterior {

        left: 10px;

    }


    .galeria-lightbox-siguiente {

        right: 10px;

    }

}


@media (max-width: 575.98px) {

    .galeria-page-hero {

        min-height: 360px;

    }


    .galeria-page-hero h1 {

        font-size:
            3.2rem;

    }


    .galeria-page-filtro-btn {

        min-height: 38px;

        padding:
            .48rem .72rem;

        font-size:
            .7rem;

    }


    .galeria-page-grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            270px;

    }


    .galeria-page-item,
    .galeria-page-item-grande,
    .galeria-page-item-ancho {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .galeria-page-item-grande {

        min-height:
            340px;

    }


    .galeria-page-cta-wrapper {

        padding:
            2rem 1.3rem;

        border-radius:
            20px;

    }


    .galeria-page-cta-actions {

        width: 100%;

        flex-direction:
            column;

    }


    .galeria-page-cta-actions
    .btn-mb {

        width: 100%;

    }


    .galeria-lightbox {

        padding:
            .7rem;

    }


    .galeria-lightbox-contenido {

        width: 100%;

        border-radius:
            16px;

    }


    .galeria-lightbox-contenido img {

        max-height:
            62vh;

    }


    .galeria-lightbox-cerrar {

        width: 40px;

        height: 40px;

        top: 12px;

        right: 12px;

    }


    .galeria-lightbox-nav {

        width: 40px;

        height: 40px;

    }


    .galeria-lightbox-info {

        padding:
            1rem;

    }

}
/* =========================================================
   PÁGINA UBICACIÓN RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .ubicacion-page-hero {

        min-height: 430px;

    }


    .ubicacion-page-map-wrapper,
    .ubicacion-page-map {

        min-height: 540px;

    }


    .ubicacion-page-referencia-wrapper {

        grid-template-columns:
            auto 1fr;

    }


    .ubicacion-page-referencia-wrapper
    .btn-mb {

        grid-column:
            1 / -1;

        justify-self:
            flex-start;

    }

}


@media (max-width: 767.98px) {

    .ubicacion-page-hero {

        min-height: 400px;

    }


    .ubicacion-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.38),
                rgba(45,32,26,.88)
            );

    }


    .ubicacion-page-hero h1 {

        font-size:
            4rem;

    }


    .ubicacion-page-map-wrapper,
    .ubicacion-page-map {

        min-height: 480px;

    }


    .ubicacion-page-referencia-wrapper {

        padding:
            1.8rem;

    }


    .ubicacion-page-gallery {

        grid-template-rows:
            repeat(2, 210px);

    }

}


@media (max-width: 575.98px) {

    .ubicacion-page-hero {

        min-height: 360px;

    }


    .ubicacion-page-hero h1 {

        font-size:
            3.2rem;

    }


    .ubicacion-page-acciones {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .ubicacion-page-acciones
    .btn-mb {

        width: 100%;

    }


    .ubicacion-page-map-wrapper {

        min-height: 430px;

        border-radius:
            20px;

    }


    .ubicacion-page-map {

        min-height: 430px;

    }


    .ubicacion-page-map-card {

        left: 12px;

        right: 12px;

        bottom: 12px;

        max-width: none;

        padding:
            .85rem;

    }


    .ubicacion-page-map-card-icon {

        width: 42px;

        height: 42px;

    }


    .ubicacion-page-referencia-wrapper {

        grid-template-columns:
            1fr;

        padding:
            1.4rem;

    }


    .ubicacion-page-referencia-icon {

        width: 48px;

        height: 48px;

    }


    .ubicacion-page-referencia-wrapper h2 {

        font-size:
            1.7rem;

    }


    .ubicacion-page-referencia-wrapper
    .btn-mb {

        width: 100%;

    }


    .ubicacion-page-gallery {

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(3, 260px);

    }


    .ubicacion-page-gallery-main {

        grid-row:
            span 1;

    }


    .ubicacion-page-beneficio {

        padding:
            1.4rem;

    }


    .ubicacion-page-cta-wrapper {

        padding:
            2.8rem 1.2rem;

        border-radius:
            22px;

    }


    .ubicacion-page-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .ubicacion-page-cta-actions
    .btn-mb {

        width: 100%;

    }

}
/* =========================================================
   PÁGINA CONTACTO RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .contacto-page-hero {

        min-height: 430px;

    }


    .contacto-page-form-wrapper {

        padding:
            2.2rem;

    }


    .contacto-page-whatsapp-wrapper {

        grid-template-columns:
            auto 1fr;

    }


    .contacto-page-whatsapp-btn {

        grid-column:
            1 / -1;

        justify-self:
            flex-start;

    }

}


@media (max-width: 767.98px) {

    .contacto-page-hero {

        min-height: 400px;

    }


    .contacto-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.38),
                rgba(45,32,26,.88)
            );

    }


    .contacto-page-hero h1 {

        font-size:
            4rem;

    }


    .contacto-page-form-wrapper {

        padding:
            1.8rem;

        border-radius:
            20px;

    }


    .contacto-page-map-wrapper {

        height:
            500px;

    }


    .contacto-page-map-card {

        grid-template-columns:
            auto 1fr;

    }


    .contacto-page-map-card
    .btn-mb {

        grid-column:
            1 / -1;

        justify-self:
            flex-start;

    }

}


@media (max-width: 575.98px) {

    .contacto-page-hero {

        min-height: 360px;

    }


    .contacto-page-hero h1 {

        font-size:
            3.2rem;

    }


    .contacto-page-form-wrapper {

        padding:
            1.3rem;

    }


    .contacto-page-form-header h2 {

        font-size:
            2rem;

    }


    .contacto-form-submit {

        width:
            100%;

    }


    .contacto-page-whatsapp-wrapper {

        grid-template-columns:
            1fr;

        padding:
            1.5rem;

    }


    .contacto-page-whatsapp-icon {

        width:
            56px;

        height:
            56px;

    }


    .contacto-page-whatsapp-content h2 {

        font-size:
            1.8rem;

    }


    .contacto-page-whatsapp-btn {

        width:
            100%;

    }


    .contacto-page-map-wrapper {

        height:
            470px;

        border-radius:
            20px;

    }


    .contacto-page-map-card {

        left:
            12px;

        right:
            12px;

        bottom:
            12px;

        grid-template-columns:
            1fr;

        gap:
            .7rem;

    }


    .contacto-page-map-card
    .btn-mb {

        width:
            100%;

    }


    .contacto-page-cta-wrapper {

        padding:
            2.8rem
            1.2rem;

        border-radius:
            22px;

    }


    .contacto-page-cta-actions {

        flex-direction:
            column;

    }


    .contacto-page-cta-actions
    .btn-mb {

        width:
            100%;

    }

}
/* =========================================================
   PÁGINA PEDIDO RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .pedido-carrito {

        position:
            relative;

        top:
            auto;

    }

}


@media (max-width: 767.98px) {

    .pedido-page-hero {

        min-height:
            390px;

    }


    .pedido-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(45,32,26,.38),
                rgba(45,32,26,.88)
            );

    }


    .pedido-page-hero h1 {

        font-size:
            4rem;

    }


    .pedido-page-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .pedido-page-categorias {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        padding-bottom:
            .3rem;

    }


    .pedido-page-categorias::-webkit-scrollbar {

        display:
            none;

    }


    .pedido-categoria-btn {

        flex:
            0 0 auto;

    }


    .pedido-producto-card {

        grid-template-columns:
            125px
            1fr;

    }

}


@media (max-width: 575.98px) {

    .pedido-page-hero {

        min-height:
            350px;

    }


    .pedido-page-hero h1 {

        font-size:
            3.2rem;

    }


    .pedido-producto-card {

        display:
            block;

    }


    .pedido-producto-img {

        height:
            210px;

        min-height:
            auto;

    }


    .pedido-producto-footer {

        align-items:
            flex-end;

    }


    .pedido-producto-footer
    .btn-mb {

        min-height:
            42px;

        padding:
            .55rem
            .85rem;

    }


    .pedido-carrito {

        padding:
            1.2rem;

        border-radius:
            18px;

    }


    .pedido-tipo-grid {

        grid-template-columns:
            1fr;

    }

}