/* =========================================================
   MARÍA BONITA
   ESTILOS PRINCIPALES
   assets/css/maria-bonita.css
   ========================================================= */


/* =========================================================
   RESET Y BASE
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    overflow-x: hidden;

}


img {

    max-width: 100%;

    height: auto;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

    transition:
        color var(--mb-transition),
        background-color var(--mb-transition),
        border-color var(--mb-transition),
        opacity var(--mb-transition),
        transform var(--mb-transition);

}


a:hover {

    color: inherit;

}


button,
input,
select,
textarea {

    font-family:
        var(--mb-font-body);

}


button {

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

}


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.site-wrapper {

    width: 100%;

    min-height: 100vh;

    position: relative;

    background:
        var(--mb-bg-body);

}


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

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    color:
        var(--mb-text-primary);

    font-family:
        var(--mb-font-title);

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

    line-height:
        var(--mb-line-sm);

}


h1 {

    font-size:
        clamp(
            3rem,
            6vw,
            var(--mb-font-hero)
        );

}


h2 {

    font-size:
        clamp(
            2.25rem,
            4vw,
            var(--mb-font-4xl)
        );

}


h3 {

    font-size:
        clamp(
            1.8rem,
            3vw,
            var(--mb-font-3xl)
        );

}


h4 {

    font-size:
        var(--mb-font-2xl);

}


p {

    margin-top: 0;

    margin-bottom:
        var(--mb-space-sm);

    color:
        var(--mb-text-secondary);

    font-size:
        var(--mb-font-base);

    line-height:
        var(--mb-line-lg);

}


/* =========================================================
   CLASES TIPOGRÁFICAS
   ========================================================= */

.font-title {

    font-family:
        var(--mb-font-title);

}


.font-body {

    font-family:
        var(--mb-font-body);

}


.texto-verde {

    color:
        var(--mb-verde);

}


.texto-terracota {

    color:
        var(--mb-terracota);

}


.texto-olivo {

    color:
        var(--mb-olivo);

}


.texto-azul {

    color:
        var(--mb-azul);

}


/* =========================================================
   ETIQUETAS DE SECCIÓN
   ========================================================= */

.etiqueta-seccion {

    display: inline-flex;

    align-items: center;

    gap:
        0.6rem;

    margin-bottom:
        var(--mb-space-sm);

    color:
        var(--mb-terracota);

    font-family:
        var(--mb-font-body);

    font-size:
        var(--mb-font-xs);

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

    letter-spacing:
        var(--mb-letter-lg);

    line-height: 1;

    text-transform: uppercase;

}


.etiqueta-seccion::before {

    content: "";

    width: 32px;

    height: 1px;

    background:
        var(--mb-terracota);

}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.titulo-seccion {

    margin-bottom:
        var(--mb-space-md);

    font-family:
        var(--mb-font-title);

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

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

}


.descripcion-seccion {

    max-width: 720px;

    color:
        var(--mb-text-secondary);

}


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

.seccion {

    position: relative;

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

}


.seccion-marfil {

    background:
        var(--mb-marfil);

}


.seccion-blanca {

    background:
        var(--mb-blanco);

}


.seccion-verde {

    background:
        var(--mb-verde);

}


.seccion-terracota {

    background:
        var(--mb-terracota);

}


.seccion-azul {

    background:
        var(--mb-azul);

}


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

.btn-mb {

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

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        0.5rem;

    padding:
        var(--mb-btn-padding);

    border:
        1px solid transparent;

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

    font-family:
        var(--mb-font-body);

    font-size:
        var(--mb-font-sm);

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

    letter-spacing:
        var(--mb-letter-sm);

    text-align: center;

    text-transform: none;

    cursor: pointer;

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

}


.btn-mb:hover {

    transform:
        translateY(-2px);

}


/* =========================================================
   BOTÓN TERRACOTA
   ========================================================= */

.btn-mb-terracota {

    background:
        var(--mb-terracota);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-terracota);

    box-shadow:
        0 8px 22px
        rgba(135, 75, 59, 0.18);

}


.btn-mb-terracota:hover {

    background:
        var(--mb-terracota-oscuro);

    border-color:
        var(--mb-terracota-oscuro);

    color:
        var(--mb-blanco);

    box-shadow:
        0 12px 26px
        rgba(135, 75, 59, 0.25);

}


/* =========================================================
   BOTÓN VERDE
   ========================================================= */

.btn-mb-verde {

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-verde);

}


.btn-mb-verde:hover {

    background:
        var(--mb-verde-oscuro);

    border-color:
        var(--mb-verde-oscuro);

    color:
        var(--mb-blanco);

}


/* =========================================================
   BOTÓN OUTLINE
   ========================================================= */

.btn-mb-outline {

    background:
        transparent;

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

    border-color:
        var(--mb-cafe-oscuro);

}


.btn-mb-outline:hover {

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

.header-principal {

    width: 100%;

    position: relative;

    z-index:
        var(--mb-z-navbar);

}


/* =========================================================
   NAVBAR MARÍA BONITA
   ========================================================= */

.navbar-maria-bonita {

    width: 100%;

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

    padding:
        0;

    background:
        var(--mb-navbar-bg);

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

    transition:
        min-height var(--mb-transition),
        background-color var(--mb-transition),
        box-shadow var(--mb-transition),
        backdrop-filter var(--mb-transition);

}


.navbar-container {

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

    display: flex;

    align-items: center;

}


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

.navbar-maria-bonita.navbar-fixed {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

}


/* =========================================================
   NAVBAR AL HACER SCROLL
   ========================================================= */

.navbar-maria-bonita.scrolled {

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

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

    box-shadow:
        var(--mb-shadow-navbar);

    backdrop-filter:
        blur(12px);

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

}


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

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

}


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

.brand-maria-bonita {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-right:
        2rem;

    padding:
        0;

}


.logo-navbar {

    width: auto;

    height: 68px;

    object-fit: contain;

    transition:
        height var(--mb-transition),
        transform var(--mb-transition);

}


.brand-maria-bonita:hover
.logo-navbar {

    transform:
        translateY(-1px);

}


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

    height: 56px;

}


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

.navbar-maria-bonita
.navbar-nav {

    gap:
        0.1rem;

}


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

.nav-link-mb {

    position: relative;

    padding:
        1rem 0.7rem !important;

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

    font-family:
        var(--mb-font-body);

    font-size:
        0.82rem;

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

    letter-spacing:
        0.02em;

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

}


.nav-link-mb:hover {

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

}


/* =========================================================
   LÍNEA DECORATIVA NAVBAR
   ========================================================= */

.nav-link-mb::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom:
        0.55rem;

    width: 0;

    height: 1px;

    background:
        var(--mb-terracota);

    transform:
        translateX(-50%);

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

}


.nav-link-mb:hover::after {

    width: 26px;

}


/* =========================================================
   ENLACE ACTIVO
   ========================================================= */

.nav-link-mb.active {

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

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

}


.nav-link-mb.active::after {

    width: 26px;

}


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

.navbar-actions {

    gap:
        0.65rem;

    flex-shrink: 0;

}


/* =========================================================
   BOTÓN VER MENÚ NAVBAR
   ========================================================= */

.btn-menu-navbar {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0.65rem 1.15rem;

    background:
        var(--mb-terracota);

    color:
        var(--mb-blanco);

    border:
        1px solid
        var(--mb-terracota);

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

    font-family:
        var(--mb-font-body);

    font-size:
        0.78rem;

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

    box-shadow:
        0 7px 18px
        rgba(135, 75, 59, 0.16);

}


.btn-menu-navbar:hover {

    background:
        var(--mb-terracota-oscuro);

    border-color:
        var(--mb-terracota-oscuro);

    color:
        var(--mb-blanco);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(135, 75, 59, 0.25);

}


/* =========================================================
   BOTÓN WHATSAPP NAVBAR
   ========================================================= */

.btn-whatsapp-navbar {

    width: 44px;

    height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

    border:
        1px solid
        var(--mb-verde);

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

    font-size:
        1.12rem;

    box-shadow:
        0 7px 18px
        rgba(143, 175, 165, 0.24);

}


.btn-whatsapp-navbar:hover {

    background:
        var(--mb-verde-oscuro);

    border-color:
        var(--mb-verde-oscuro);

    color:
        var(--mb-blanco);

    transform:
        translateY(-2px);

}


/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */

.navbar-toggler-mb {

    width: 48px;

    height: 48px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(96, 75, 59, 0.12);

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

    background:
        rgba(255, 255, 255, 0.45);

    box-shadow: none !important;

}


.navbar-toggler-mb:focus {

    outline: none;

    box-shadow: none;

}


/* =========================================================
   ICONO HAMBURGUESA PERSONALIZADO
   ========================================================= */

.menu-mobile-icon {

    width: 21px;

    height: 16px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.menu-mobile-icon span {

    display: block;

    width: 100%;

    height: 2px;

    background:
        var(--mb-cafe-oscuro);

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

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

}


/* =========================================================
   MENÚ HAMBURGUESA ABIERTO
   ========================================================= */

.navbar-toggler-mb[aria-expanded="true"]
.menu-mobile-icon span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.navbar-toggler-mb[aria-expanded="true"]
.menu-mobile-icon span:nth-child(2) {

    opacity: 0;

}


.navbar-toggler-mb[aria-expanded="true"]
.menu-mobile-icon span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   TARJETAS GENERALES
   ========================================================= */

.card-mb {

    height: 100%;

    overflow: hidden;

    background:
        var(--mb-card-bg, var(--mb-blanco));

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

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

    box-shadow:
        var(--mb-card-shadow);

    transition:
        transform var(--mb-transition),
        box-shadow var(--mb-transition);

}


.card-mb:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--mb-card-shadow-hover);

}


/* =========================================================
   IMÁGENES GENERALES
   ========================================================= */

.imagen-mb {

    width: 100%;

    overflow: hidden;

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

}


.imagen-mb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform var(--mb-transition-slow);

}


.imagen-mb:hover img {

    transform:
        scale(1.035);

}


/* =========================================================
   FORMULARIOS BASE
   ========================================================= */

.form-control-mb,
.form-select-mb {

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

    background:
        var(--mb-input-bg);

    color:
        var(--mb-text-primary);

    border:
        1px solid
        var(--mb-input-border);

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

    font-family:
        var(--mb-font-body);

    font-size:
        var(--mb-font-sm);

    box-shadow: none;

    transition:
        border-color var(--mb-transition),
        box-shadow var(--mb-transition);

}


.form-control-mb:focus,
.form-select-mb:focus {

    border-color:
        var(--mb-input-focus);

    box-shadow:
        0 0 0 4px
        rgba(143, 175, 165, 0.12);

    outline: none;

}


/* =========================================================
   SEPARADOR DECORATIVO
   ========================================================= */

.separador-mb {

    width: 70px;

    height: 2px;

    margin:
        var(--mb-space-md)
        0;

    background:
        var(--mb-terracota);

}


.separador-mb.centrado {

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   TEXTO PEQUEÑO DECORATIVO
   ========================================================= */

.subtitulo-mb {

    color:
        var(--mb-verde-oscuro);

    font-family:
        var(--mb-font-body);

    font-size:
        var(--mb-font-xs);

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

    letter-spacing:
        var(--mb-letter-lg);

    text-transform: uppercase;

}


/* =========================================================
   UTILIDADES DE FONDO
   ========================================================= */

.bg-mb-marfil {

    background:
        var(--mb-marfil);

}


.bg-mb-verde {

    background:
        var(--mb-verde);

}


.bg-mb-terracota {

    background:
        var(--mb-terracota);

}


.bg-mb-azul {

    background:
        var(--mb-azul);

}


/* =========================================================
   UTILIDADES
   ========================================================= */

.object-fit-cover {

    object-fit: cover;

}


.cursor-pointer {

    cursor: pointer;

}


.overflow-hidden {

    overflow: hidden;

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

:focus-visible {

    outline:
        2px solid
        var(--mb-verde-oscuro);

    outline-offset:
        3px;

}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}
/* =========================================================
   FOOTER MARÍA BONITA
   ========================================================= */

.footer-maria-bonita {

    position: relative;

    background:
        var(--mb-azul);

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

}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.footer-principal {

    padding:
        5rem 0
        4rem;

}


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

.footer-brand {

    max-width: 360px;

}


.footer-logo-link {

    display: inline-block;

    margin-bottom:
        1.5rem;

}


.footer-logo {

    width: auto;

    max-width: 220px;

    height: 90px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);

    opacity:
        0.96;

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.footer-descripcion {

    max-width: 330px;

    margin-bottom:
        1.75rem;

    color:
        rgba(
            245,
            240,
            230,
            0.76
        );

    font-size:
        0.9rem;

    line-height:
        1.8;

}


/* =========================================================
   REDES SOCIALES
   ========================================================= */

.footer-redes {

    display: flex;

    align-items: center;

    gap:
        0.7rem;

}


.footer-social-link {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

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

    font-size:
        1rem;

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

}


.footer-social-link:hover {

    background:
        var(--mb-verde);

    border-color:
        var(--mb-verde);

    color:
        var(--mb-blanco);

    transform:
        translateY(-3px);

}


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

.footer-titulo {

    position: relative;

    margin-bottom:
        1.5rem;

    padding-bottom:
        0.8rem;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.55rem;

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

}


.footer-titulo::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 34px;

    height: 1px;

    background:
        var(--mb-verde);

}


/* =========================================================
   LINKS
   ========================================================= */

.footer-links {

    margin: 0;

    padding: 0;

    list-style: none;

}


.footer-links li {

    margin-bottom:
        0.7rem;

}


.footer-links a {

    position: relative;

    display: inline-flex;

    align-items: center;

    color:
        rgba(
            245,
            240,
            230,
            0.72
        );

    font-size:
        0.86rem;

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

}


.footer-links a::before {

    content: "";

    width: 0;

    height: 1px;

    margin-right: 0;

    background:
        var(--mb-verde);

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

}


.footer-links a:hover {

    color:
        var(--mb-blanco);

}


.footer-links a:hover::before {

    width: 15px;

    margin-right:
        7px;

}


/* =========================================================
   INFORMACIÓN DE CONTACTO
   ========================================================= */

.footer-contacto {

    padding-left:
        1rem;

}


.footer-info-item {

    display: flex;

    align-items: flex-start;

    gap:
        1rem;

    margin-bottom:
        1.3rem;

}


.footer-info-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        rgba(
            143,
            175,
            165,
            0.12
        );

    color:
        var(--mb-verde-claro);

    border:
        1px solid
        rgba(
            143,
            175,
            165,
            0.18
        );

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

}


.footer-info-label {

    display: block;

    margin-bottom:
        0.2rem;

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

    font-size:
        0.78rem;

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

    letter-spacing:
        0.04em;

}


.footer-info-item p {

    margin: 0;

    color:
        rgba(
            245,
            240,
            230,
            0.67
        );

    font-size:
        0.83rem;

    line-height:
        1.6;

}


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

.footer-bottom {

    padding:
        1.4rem 0;

    background:
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.footer-bottom-container {

    gap:
        0.75rem;

}


.footer-copyright,
.footer-frase {

    margin: 0;

    color:
        rgba(
            245,
            240,
            230,
            0.58
        );

    font-size:
        0.76rem;

    line-height:
        1.5;

}


.footer-frase {

    font-family:
        var(--mb-font-title);

    font-size:
        1rem;

    font-style: italic;

    color:
        rgba(
            245,
            240,
            230,
            0.72
        );

}
/* =========================================================
   HERO MARÍA BONITA
   ========================================================= */

.hero-maria-bonita {

    width: 100%;

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

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-azul);

    isolation: isolate;

}


/* =========================================================
   IMAGEN DE FONDO
   ========================================================= */

.hero-background {

    position: absolute;

    inset: 0;

    z-index: -4;

    overflow: hidden;

}


.hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.015);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: -3;

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

            rgba(
                36,
                33,
                30,
                0.58
            )
            44%,

            rgba(
                36,
                33,
                30,
                0.22
            )
            72%,

            rgba(
                36,
                33,
                30,
                0.12
            )
            100%
        );

}


/* =========================================================
   MATIZ CÁLIDO
   ========================================================= */

.hero-maria-bonita::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(
                135,
                75,
                59,
                0.06
            ),
            rgba(
                40,
                59,
                80,
                0.12
            )
        );

}


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

.hero-container {

    position: relative;

    z-index: 2;

    padding-top:
        4.5rem;

    padding-bottom:
        7rem;

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.hero-content {

    max-width: 760px;

}


/* =========================================================
   ETIQUETA SUPERIOR
   ========================================================= */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap:
        0.85rem;

    margin-bottom:
        1.4rem;

    color:
        var(--mb-arena-claro);

    font-family:
        var(--mb-font-body);

    font-size:
        0.72rem;

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

    letter-spacing:
        0.18em;

    text-transform: uppercase;

}


.hero-eyebrow-line {

    width: 42px;

    height: 1px;

    background:
        var(--mb-arena);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.hero-title {

    max-width: 760px;

    margin-bottom:
        1.4rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        clamp(
            4rem,
            7vw,
            6.6rem
        );

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

    line-height:
        0.92;

    letter-spacing:
        -0.025em;

    text-shadow:
        0 5px 28px
        rgba(
            0,
            0,
            0,
            0.20
        );

}


.hero-title span {

    display: block;

    margin-top:
        0.22em;

    color:
        var(--mb-arena-claro);

    font-style: italic;

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

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.hero-description {

    max-width: 610px;

    margin-bottom:
        2rem;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        1rem;

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

    line-height:
        1.85;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        0.85rem;

    margin-bottom:
        2.2rem;

}


.hero-btn-primary {

    min-height: 52px;

    padding-left:
        1.6rem;

    padding-right:
        1.6rem;

}


.hero-btn-secondary {

    min-height: 52px;

    padding-left:
        1.5rem;

    padding-right:
        1.5rem;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.38
        );

    backdrop-filter:
        blur(5px);

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

}


.hero-btn-secondary:hover {

    background:
        var(--mb-blanco);

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

    border-color:
        var(--mb-blanco);

}


/* =========================================================
   DETALLE
   ========================================================= */

.hero-detail {

    display: inline-flex;

    align-items: center;

    gap:
        0.9rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

}


.hero-detail-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color:
        var(--mb-arena-claro);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

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

    font-size:
        1.05rem;

}


.hero-detail-title,
.hero-detail-text {

    display: block;

}


.hero-detail-title {

    margin-bottom:
        0.15rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        1.08rem;

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

}


.hero-detail-text {

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size:
        0.74rem;

}


/* =========================================================
   INDICADOR DE SCROLL
   ========================================================= */

.hero-scroll {

    position: absolute;

    left: 50%;

    bottom:
        2.1rem;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
        0.35rem;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    transform:
        translateX(-50%);

}


.hero-scroll:hover {

    color:
        var(--mb-blanco);

}


.hero-scroll-text {

    font-size:
        0.62rem;

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

    letter-spacing:
        0.15em;

    text-transform: uppercase;

}


.hero-scroll-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.28
        );

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

    animation:
        mbFloat
        2.6s
        ease-in-out
        infinite;

}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.hero-decoracion {

    position: absolute;

    z-index: -1;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

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

    pointer-events: none;

}


.hero-decoracion-izquierda {

    width: 370px;

    height: 370px;

    left:
        -210px;

    bottom:
        -130px;

}


.hero-decoracion-derecha {

    width: 500px;

    height: 500px;

    right:
        -320px;

    top:
        -180px;

}


/* =========================================================
   TRANSICIÓN INFERIOR
   ========================================================= */

.hero-bottom-shape {

    position: absolute;

    left: 0;

    right: 0;

    bottom:
        -1px;

    z-index: 3;

    height: 25px;

    background:
        var(--mb-bg-body);

    clip-path:
        polygon(
            0 72%,
            15% 62%,
            30% 78%,
            49% 58%,
            66% 76%,
            82% 62%,
            100% 73%,
            100% 100%,
            0 100%
        );

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

.seccion-menu-destacado {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-marfil);

}


/* =========================================================
   DETALLE DE FONDO
   ========================================================= */

.seccion-menu-destacado::before {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    left: -190px;

    bottom: -200px;

    border:
        1px solid
        rgba(135, 75, 59, 0.10);

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

    pointer-events: none;

}


.seccion-menu-destacado::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    right: -125px;

    top: -120px;

    background:
        rgba(143, 175, 165, 0.07);

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

    pointer-events: none;

}


/* =========================================================
   HEADER
   ========================================================= */

.menu-destacado-header {

    position: relative;

    z-index: 2;

    margin-bottom:
        2.5rem;

}


.menu-destacado-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style: italic;

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

}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.menu-categorias-destacadas {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        0.6rem;

    margin-bottom:
        2.7rem;

}


.menu-categoria-pill {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        0.45rem;

    padding:
        0.55rem 1rem;

    background:
        rgba(255, 255, 255, 0.52);

    color:
        var(--mb-cafe-claro);

    border:
        1px solid
        rgba(96, 75, 59, 0.10);

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

    font-family:
        var(--mb-font-body);

    font-size:
        0.73rem;

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

}


.menu-categoria-pill i {

    color:
        var(--mb-verde-oscuro);

}


.menu-categoria-pill.active {

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-cafe-oscuro);

}


.menu-categoria-pill.active i {

    color:
        var(--mb-arena-claro);

}


/* =========================================================
   GRID
   ========================================================= */

.menu-productos-grid {

    position: relative;

    z-index: 2;

}


/* =========================================================
   TARJETA
   ========================================================= */

.menu-card {

    height: 100%;

    overflow: hidden;

    position: relative;

    background:
        var(--mb-blanco);

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

    border-radius:
        22px;

    box-shadow:
        0 8px 25px
        rgba(40, 59, 80, 0.07);

    transition:
        transform
        0.35s
        ease,
        box-shadow
        0.35s
        ease;

}


.menu-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 18px 38px
        rgba(40, 59, 80, 0.13);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.menu-card-image {

    height: 245px;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-arena-suave);

}


.menu-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(40, 59, 80, 0.13)
        );

    pointer-events: none;

}


.menu-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.65s
        ease;

}


.menu-card:hover
.menu-card-image img {

    transform:
        scale(1.045);

}


/* =========================================================
   BADGE
   ========================================================= */

.menu-card-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 3;

    padding:
        0.42rem 0.75rem;

    background:
        var(--mb-terracota);

    color:
        var(--mb-blanco);

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

    font-size:
        0.65rem;

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

    letter-spacing:
        0.04em;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.12);

}


.menu-card-badge-verde {

    background:
        var(--mb-verde-oscuro);

}


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

.menu-card-body {

    padding:
        1.35rem;

}


/* =========================================================
   META
   ========================================================= */

.menu-card-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        0.6rem;

    margin-bottom:
        0.65rem;

    color:
        var(--mb-text-muted);

    font-size:
        0.65rem;

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

    letter-spacing:
        0.03em;

    text-transform: uppercase;

}


.menu-card-meta span:last-child {

    color:
        var(--mb-verde-oscuro);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.menu-card-title {

    margin-bottom:
        0.55rem;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.55rem;

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

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.menu-card-description {

    min-height: 68px;

    margin-bottom:
        1.25rem;

    color:
        var(--mb-text-secondary);

    font-size:
        0.79rem;

    line-height:
        1.65;

}


/* =========================================================
   FOOTER PRODUCTO
   ========================================================= */

.menu-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top:
        1rem;

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

}


/* =========================================================
   PRECIO
   ========================================================= */

.menu-card-price {

    color:
        var(--mb-terracota);

    font-family:
        var(--mb-font-title);

    font-size:
        1.45rem;

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

}


/* =========================================================
   LINK PRODUCTO
   ========================================================= */

.menu-card-link {

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

    border:
        1px solid
        rgba(143, 175, 165, 0.18);

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

    font-size:
        0.95rem;

}


.menu-card-link:hover {

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

    transform:
        rotate(8deg);

}


/* =========================================================
   ACCIÓN
   ========================================================= */

.menu-destacado-action {

    position: relative;

    z-index: 2;

    margin-top:
        2.8rem;

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

.seccion-temporada {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-bg-body);

}


.temporada-wrapper {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        30px;

    box-shadow:
        var(--mb-shadow-lg);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.temporada-imagen {

    min-height: 560px;

    position: relative;

    overflow: hidden;

}


.temporada-imagen::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 65%,
            rgba(
                70,
                54,
                43,
                0.30
            )
        );

    pointer-events: none;

}


.temporada-imagen img {

    width: 100%;

    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    transition:
        transform
        0.8s
        ease;

}


.temporada-wrapper:hover
.temporada-imagen img {

    transform:
        scale(1.025);

}


/* =========================================================
   BADGE
   ========================================================= */

.temporada-badge {

    position: absolute;

    left: 24px;

    top: 24px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap:
        0.45rem;

    padding:
        0.55rem 0.9rem;

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

    color:
        var(--mb-terracota);

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

    font-size:
        0.68rem;

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

    letter-spacing:
        0.04em;

    box-shadow:
        var(--mb-shadow-sm);

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.temporada-contenido {

    position: relative;

    z-index: 2;

    padding:
        4.5rem
        4rem;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.temporada-eyebrow {

    display: block;

    margin-bottom:
        1rem;

    color:
        var(--mb-verde-claro);

    font-size:
        0.68rem;

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

    letter-spacing:
        0.15em;

    text-transform: uppercase;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.temporada-titulo {

    margin-bottom:
        1.3rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

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

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

    line-height:
        0.98;

}


.temporada-titulo span {

    display: block;

    margin-top:
        0.2rem;

    color:
        var(--mb-arena-claro);

    font-style: italic;

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

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.temporada-descripcion {

    max-width: 520px;

    margin-bottom:
        1.8rem;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        );

    font-size:
        0.93rem;

    line-height:
        1.8;

}


/* =========================================================
   DETALLES
   ========================================================= */

.temporada-detalles {

    display: flex;

    flex-direction: column;

    gap:
        0.8rem;

    margin-bottom:
        2rem;

}


.temporada-detalle {

    display: flex;

    align-items: center;

    gap:
        0.75rem;

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size:
        0.8rem;

}


.temporada-detalle i {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        rgba(
            143,
            175,
            165,
            0.13
        );

    color:
        var(--mb-verde-claro);

    border:
        1px solid
        rgba(
            143,
            175,
            165,
            0.18
        );

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

}


/* =========================================================
   PRECIO
   ========================================================= */

.temporada-precio {

    display: flex;

    align-items: baseline;

    gap:
        0.6rem;

    margin-bottom:
        2rem;

}


.temporada-precio-label {

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        0.73rem;

    text-transform: uppercase;

    letter-spacing:
        0.08em;

}


.temporada-precio-valor {

    color:
        var(--mb-arena-claro);

    font-family:
        var(--mb-font-title);

    font-size:
        2rem;

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

}


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

.temporada-acciones {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        0.75rem;

}


.temporada-btn-secundario {

    background:
        transparent;

    color:
        var(--mb-blanco);

    border-color:
        rgba(
            255,
            255,
            255,
            0.26
        );

}


.temporada-btn-secundario:hover {

    background:
        var(--mb-blanco);

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

    border-color:
        var(--mb-blanco);

}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.temporada-decoracion {

    position: absolute;

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

    pointer-events: none;

}


.temporada-decoracion-1 {

    width: 260px;

    height: 260px;

    right: -120px;

    top: -110px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.temporada-decoracion-2 {

    width: 160px;

    height: 160px;

    right: 80px;

    bottom: -110px;

    background:
        rgba(
            143,
            175,
            165,
            0.05
        );

}
/* =========================================================
   GALERÍA MARÍA BONITA
   ========================================================= */

.seccion-galeria {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-blanco);

}


/* =========================================================
   DETALLE DE FONDO
   ========================================================= */

.seccion-galeria::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -220px;

    bottom: -220px;

    border:
        1px solid
        rgba(143, 175, 165, 0.12);

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

    pointer-events: none;

}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.galeria-header {

    position: relative;

    z-index: 2;

}


.galeria-titulo span {

    color:
        var(--mb-terracota);

    font-style: italic;

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

}


.galeria-header-action {

    padding-bottom:
        0.5rem;

}


/* =========================================================
   GRID
   ========================================================= */

.galeria-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-rows:
        220px;

    gap:
        16px;

}


/* =========================================================
   ITEM
   ========================================================= */

.galeria-item {

    position: relative;

    overflow: hidden;

    display: block;

    background:
        var(--mb-marfil);

    border-radius:
        20px;

    box-shadow:
        0 8px 24px
        rgba(40, 59, 80, 0.08);

}


/* =========================================================
   TAMAÑOS
   ========================================================= */

.galeria-item-grande {

    grid-column:
        span 2;

    grid-row:
        span 2;

}


.galeria-item-normal {

    grid-column:
        span 1;

    grid-row:
        span 1;

}


.galeria-item-ancho {

    grid-column:
        span 2;

    grid-row:
        span 1;

}


/* =========================================================
   IMÁGENES
   ========================================================= */

.galeria-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.7s
        ease;

}


.galeria-item:hover img {

    transform:
        scale(1.05);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.galeria-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        1rem;

    padding:
        1.4rem;

    background:
        linear-gradient(
            180deg,
            rgba(20, 20, 20, 0.04)
            35%,
            rgba(20, 20, 20, 0.72)
            100%
        );

    transition:
        background
        0.35s
        ease;

}


.galeria-item:hover
.galeria-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(20, 20, 20, 0.08)
            20%,
            rgba(20, 20, 20, 0.78)
            100%
        );

}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.galeria-info {

    max-width: 80%;

}


.galeria-categoria {

    display: block;

    margin-bottom:
        0.3rem;

    color:
        var(--mb-verde-claro);

    font-family:
        var(--mb-font-body);

    font-size:
        0.62rem;

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

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.galeria-info h3 {

    margin: 0;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        1.25rem;

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

    line-height:
        1.1;

}


/* =========================================================
   ICONO
   ========================================================= */

.galeria-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        rgba(255, 255, 255, 0.12);

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

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

    backdrop-filter:
        blur(6px);

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

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

}


.galeria-item:hover
.galeria-icon {

    background:
        var(--mb-verde);

    border-color:
        var(--mb-verde);

    transform:
        rotate(8deg);

}


/* =========================================================
   ACCIÓN MÓVIL
   ========================================================= */

.galeria-action-mobile {

    display: none;

    margin-top:
        2rem;

}
/* =========================================================
   UBICACIÓN MARÍA BONITA
   ========================================================= */

.seccion-ubicacion {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-marfil);

}


/* =========================================================
   DECORACIÓN DE FONDO
   ========================================================= */

.seccion-ubicacion::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -240px;

    top: -220px;

    border:
        1px solid
        rgba(
            143,
            175,
            165,
            0.14
        );

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

    pointer-events: none;

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.ubicacion-contenido {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.ubicacion-titulo {

    max-width: 500px;

}


.ubicacion-titulo span {

    display: block;

    color:
        var(--mb-terracota);

    font-style: italic;

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

}


/* =========================================================
   TEXTO
   ========================================================= */

.ubicacion-intro {

    max-width: 510px;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.28rem;

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

    line-height:
        1.55;

}


.ubicacion-texto {

    max-width: 510px;

    margin-bottom:
        1.8rem;

}


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

.ubicacion-datos {

    margin-top:
        0.5rem;

    margin-bottom:
        2rem;

    padding-top:
        1.5rem;

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

}


/* =========================================================
   ITEM
   ========================================================= */

.ubicacion-item {

    display: flex;

    align-items: flex-start;

    gap:
        1rem;

    margin-bottom:
        1.2rem;

}


.ubicacion-item:last-child {

    margin-bottom: 0;

}


/* =========================================================
   ICONO
   ========================================================= */

.ubicacion-item-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

    border:
        1px solid
        rgba(
            143,
            175,
            165,
            0.20
        );

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

    font-size:
        1rem;

}


/* =========================================================
   TEXTO ITEM
   ========================================================= */

.ubicacion-item-label {

    display: block;

    margin-bottom:
        0.2rem;

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

    font-size:
        0.78rem;

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

    letter-spacing:
        0.03em;

}


.ubicacion-item-content p {

    margin: 0;

    color:
        var(--mb-text-secondary);

    font-size:
        0.83rem;

    line-height:
        1.6;

}


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

.ubicacion-acciones {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        0.75rem;

}


/* =========================================================
   BLOQUE VISUAL
   ========================================================= */

.ubicacion-visual {

    height: 100%;

    min-height: 620px;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}

/* =========================================================
   MAPA
   ========================================================= */

.ubicacion-mapa {

    height:
        calc(
            100% -
            105px
        );

    min-height: 515px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--mb-verde-suave),
            var(--mb-arena-suave)
        );

}
/* =========================================================
   MAPA GOOGLE MAPS
   ========================================================= */

.ubicacion-mapa {

    width: 100%;

    height:
        calc(
            100% -
            105px
        );

    min-height: 515px;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-marfil);

}


/* =========================================================
   IFRAME GOOGLE MAPS
   ========================================================= */

.ubicacion-mapa-iframe {

    width: 100%;

    height: 100%;

    min-height: 515px;

    position: absolute;

    inset: 0;

    display: block;

    border: 0;

}


/* =========================================================
   TARJETA FLOTANTE
   ========================================================= */

.ubicacion-card {

    position: absolute;

    left: 24px;

    bottom: 24px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap:
        0.85rem;

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

    padding:
        1rem
        1.15rem;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.65
        );

    border-radius:
        18px;

    box-shadow:
        var(--mb-shadow-md);

    backdrop-filter:
        blur(10px);

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

}


/* =========================================================
   ICONO TARJETA
   ========================================================= */

.ubicacion-card-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

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

}


/* =========================================================
   TEXTO TARJETA
   ========================================================= */

.ubicacion-card-label {

    display: block;

    margin-bottom:
        0.05rem;

    color:
        var(--mb-text-muted);

    font-size:
        0.63rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.ubicacion-card strong {

    display: block;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.2rem;

    line-height:
        1.1;

}


.ubicacion-card small {

    color:
        var(--mb-cafe-claro);

    font-size:
        0.66rem;

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

.seccion-llamada-accion {

    position: relative;

    overflow: hidden;

    background:
        var(--mb-bg-body);

}


/* =========================================================
   WRAPPER
   ========================================================= */

.llamada-wrapper {

    min-height: 520px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius:
        30px;

    box-shadow:
        var(--mb-shadow-lg);

    isolation: isolate;

}


/* =========================================================
   FONDO
   ========================================================= */

.llamada-background {

    position: absolute;

    inset: 0;

    z-index: -4;

}


.llamada-background img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform
        1s
        ease;

}


.llamada-wrapper:hover
.llamada-background img {

    transform:
        scale(1.025);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.llamada-overlay {

    position: absolute;

    inset: 0;

    z-index: -3;

    background:
        linear-gradient(
            90deg,
            rgba(
                40,
                59,
                80,
                0.88
            )
            0%,

            rgba(
                70,
                54,
                43,
                0.80
            )
            55%,

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

}


/* =========================================================
   MATIZ
   ========================================================= */

.llamada-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(
                143,
                175,
                165,
                0.08
            ),
            rgba(
                135,
                75,
                59,
                0.08
            )
        );

    pointer-events: none;

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.llamada-contenido {

    max-width: 760px;

    position: relative;

    z-index: 2;

    padding:
        5rem 2rem;

    text-align: center;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.llamada-eyebrow {

    display: inline-block;

    margin-bottom:
        1rem;

    color:
        var(--mb-verde-claro);

    font-family:
        var(--mb-font-body);

    font-size:
        0.68rem;

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

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.llamada-titulo {

    margin-bottom:
        1.2rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        clamp(
            3.4rem,
            6vw,
            5.6rem
        );

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

    line-height:
        0.92;

}


.llamada-titulo span {

    display: block;

    margin-top:
        0.15rem;

    color:
        var(--mb-arena-claro);

    font-style: italic;

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

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.llamada-descripcion {

    max-width: 620px;

    margin:
        0 auto
        2rem;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        0.95rem;

    line-height:
        1.8;

}


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

.llamada-acciones {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        0.8rem;

    margin-bottom:
        2rem;

}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.llamada-btn-principal {

    min-height: 52px;

    padding-left:
        1.6rem;

    padding-right:
        1.6rem;

    background:
        var(--mb-terracota);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-terracota);

    box-shadow:
        0 9px 24px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.llamada-btn-principal:hover {

    background:
        var(--mb-terracota-oscuro);

    border-color:
        var(--mb-terracota-oscuro);

    color:
        var(--mb-blanco);

}


/* =========================================================
   BOTÓN WHATSAPP
   ========================================================= */

.llamada-btn-whatsapp {

    min-height: 52px;

    padding-left:
        1.6rem;

    padding-right:
        1.6rem;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.30
        );

    backdrop-filter:
        blur(7px);

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

}


.llamada-btn-whatsapp i {

    color:
        #7BE49D;

}


.llamada-btn-whatsapp:hover {

    background:
        var(--mb-blanco);

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

    border-color:
        var(--mb-blanco);

}


.llamada-btn-whatsapp:hover i {

    color:
        var(--mb-whatsapp);

}


/* =========================================================
   DETALLE INFERIOR
   ========================================================= */

.llamada-detalle {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        1.4rem;

    padding-top:
        1.7rem;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.llamada-detalle span {

    display: inline-flex;

    align-items: center;

    gap:
        0.45rem;

    color:
        rgba(
            255,
            255,
            255,
            0.64
        );

    font-size:
        0.7rem;

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

    letter-spacing:
        0.04em;

}


.llamada-detalle i {

    color:
        var(--mb-verde-claro);

}


/* =========================================================
   DECORACIONES
   ========================================================= */

.llamada-decoracion {

    position: absolute;

    z-index: -1;

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

    pointer-events: none;

}


.llamada-decoracion-1 {

    width: 370px;

    height: 370px;

    left: -180px;

    top: -190px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.llamada-decoracion-2 {

    width: 240px;

    height: 240px;

    right: -100px;

    bottom: -120px;

    background:
        rgba(
            143,
            175,
            165,
            0.06
        );

}
/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.whatsapp-wrapper {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index:
        var(--mb-z-whatsapp);

    display: flex;

    align-items: flex-end;

    gap:
        0.8rem;

}


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

.whatsapp-flotante {

    min-width: 58px;

    height: 58px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        0.6rem;

    padding:
        0 1rem;

    background:
        var(--mb-whatsapp);

    color:
        var(--mb-blanco);

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

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

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.20
        );

    font-family:
        var(--mb-font-body);

    font-size:
        0.78rem;

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

    white-space: nowrap;

    transition:
        background
        var(--mb-transition),
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.whatsapp-flotante:hover {

    background:
        var(--mb-whatsapp-hover);

    color:
        var(--mb-blanco);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 36px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.whatsapp-flotante i {

    font-size:
        1.45rem;

}


/* =========================================================
   TEXTO DEL BOTÓN
   ========================================================= */

.whatsapp-flotante-texto {

    line-height: 1;

}


/* =========================================================
   BURBUJA DE MENSAJE
   ========================================================= */

.whatsapp-mensaje {

    max-width: 270px;

    position: absolute;

    right: 0;

    bottom: 72px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

    transition:
        opacity
        var(--mb-transition),
        visibility
        var(--mb-transition),
        transform
        var(--mb-transition);

}


.whatsapp-wrapper:hover
.whatsapp-mensaje {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* =========================================================
   CONTENIDO BURBUJA
   ========================================================= */

.whatsapp-mensaje-contenido {

    position: relative;

    display: flex;

    align-items: center;

    gap:
        0.8rem;

    padding:
        0.95rem 1rem;

    background:
        var(--mb-blanco);

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

    border:
        1px solid
        rgba(
            96,
            75,
            59,
            0.10
        );

    border-radius:
        16px;

    box-shadow:
        var(--mb-shadow-md);

}


/* =========================================================
   TRIÁNGULO BURBUJA
   ========================================================= */

.whatsapp-mensaje-contenido::after {

    content: "";

    position: absolute;

    right: 22px;

    bottom: -8px;

    width: 16px;

    height: 16px;

    background:
        var(--mb-blanco);

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

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

    transform:
        rotate(45deg);

}


/* =========================================================
   ICONO BURBUJA
   ========================================================= */

.whatsapp-mensaje-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

    font-size:
        1rem;

}


/* =========================================================
   TEXTO BURBUJA
   ========================================================= */

.whatsapp-mensaje strong {

    display: block;

    margin-bottom:
        0.15rem;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.03rem;

    line-height:
        1.1;

}


.whatsapp-mensaje span:not(
    .whatsapp-mensaje-icon
) {

    display: block;

    color:
        var(--mb-text-secondary);

    font-size:
        0.72rem;

    line-height:
        1.45;

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

.menu-page-hero {

    width: 100%;

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.menu-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.menu-page-hero-bg img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   OVERLAY
   ========================================================= */

.menu-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(
                45,
                32,
                26,
                0.90
            )
            0%,

            rgba(
                45,
                32,
                26,
                0.73
            )
            43%,

            rgba(
                45,
                32,
                26,
                0.30
            )
            100%
        );

}


/* =========================================================
   CONTAINER
   ========================================================= */

.menu-page-hero > .container {

    position: relative;

    z-index: 3;

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.menu-page-hero-content {

    max-width: 720px;

    padding:
        5.5rem 0;

}


/* =========================================================
   ETIQUETA
   ========================================================= */

.menu-page-eyebrow {

    display: block;

    margin-bottom:
        0.9rem;

    color:
        var(--mb-verde-claro);

    font-family:
        var(--mb-font-body);

    font-size:
        0.70rem;

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

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.menu-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

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

    line-height:
        0.95;

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.menu-page-hero p {

    max-width: 560px;

    margin-bottom: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        0.96rem;

    line-height:
        1.75;

}


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

.menu-page-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        0.8rem;

    margin-top:
        1.8rem;

}


.menu-page-btn-light {

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

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    backdrop-filter:
        blur(5px);

}


.menu-page-btn-light:hover {

    background:
        var(--mb-blanco);

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

    border-color:
        var(--mb-blanco);

}

/* =========================================================
   CATEGORÍAS DEL MENÚ
   ========================================================= */

.menu-page-categorias {

    width: 100%;

    position: sticky;

    top: 0;

    z-index: 1020;

    padding:
        1rem 0;

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

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

    box-shadow:
        0 7px 22px
        rgba(
            40,
            59,
            80,
            0.06
        );

    backdrop-filter:
        blur(12px);

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

}


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

.menu-page-categorias-scroll {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        0.65rem;

}


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

.menu-page-categoria-btn {

    appearance: none;

    -webkit-appearance: none;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        0.45rem;

    margin: 0;

    padding:
        0.65rem
        1.1rem;

    background:
        var(--mb-blanco);

    color:
        var(--mb-cafe);

    border:
        1px solid
        rgba(
            96,
            75,
            59,
            0.14
        );

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

    box-shadow:
        none;

    font-family:
        var(--mb-font-body);

    font-size:
        0.76rem;

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

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background
        var(--mb-transition),
        color
        var(--mb-transition),
        border-color
        var(--mb-transition),
        transform
        var(--mb-transition);

}


/* =========================================================
   ICONOS
   ========================================================= */

.menu-page-categoria-btn i {

    color:
        var(--mb-verde-oscuro);

    font-size:
        0.95rem;

}


/* =========================================================
   HOVER
   ========================================================= */

.menu-page-categoria-btn:hover {

    background:
        var(--mb-verde-suave);

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

    border-color:
        var(--mb-verde);

    transform:
        translateY(-1px);

}


/* =========================================================
   ACTIVO
   ========================================================= */

.menu-page-categoria-btn.active {

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-cafe-oscuro);

    box-shadow:
        0 6px 16px
        rgba(
            70,
            54,
            43,
            0.16
        );

}

.menu-page-categoria-btn.active i {

    color:
        var(--mb-arena-claro);

}
/* =========================================================
   CONTENIDO
   ========================================================= */

.menu-page-contenido {

    background:
        var(--mb-bg-body);

}


.menu-page-header {

    margin-bottom:
        4rem;

}


.menu-page-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


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

.menu-page-seccion {

    margin-bottom:
        5.5rem;

}


.menu-page-seccion-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        1.8rem;

    padding-bottom:
        1rem;

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

}


.menu-page-seccion-header > div {

    display: flex;

    align-items: center;

    gap:
        0.9rem;

}


.menu-page-seccion-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

    font-size:
        1.1rem;

}


.menu-page-seccion-small {

    display: block;

    color:
        var(--mb-terracota);

    font-size:
        0.62rem;

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

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;

}


.menu-page-seccion-header h3 {

    margin: 0;

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

    font-size:
        2rem;

}


/* =========================================================
   CARD
   ========================================================= */

.menu-page-card {

    height: 100%;

    overflow: hidden;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        20px;

    box-shadow:
        0 8px 25px
        rgba(40,59,80,.06);

    transition:
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.menu-page-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--mb-shadow-md);

}


.menu-page-card-image {

    height: 220px;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-arena-suave);

}


.menu-page-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        .6s
        ease;

}


.menu-page-card:hover
.menu-page-card-image img {

    transform:
        scale(1.04);

}


.menu-page-card-badge {

    position: absolute;

    left: 14px;

    top: 14px;

    padding:
        .4rem .7rem;

    background:
        var(--mb-terracota);

    color:
        var(--mb-blanco);

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

    font-size:
        .62rem;

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

}


.menu-page-card-badge.badge-verde {

    background:
        var(--mb-verde-oscuro);

}


.menu-page-card-body {

    padding:
        1.25rem;

}


.menu-page-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap:
        1rem;

    margin-bottom:
        .8rem;

}


.menu-page-card-category {

    display: block;

    margin-bottom:
        .2rem;

    color:
        var(--mb-verde-oscuro);

    font-size:
        .61rem;

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

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.menu-page-card h4 {

    margin: 0;

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

    font-size:
        1.45rem;

}


.menu-page-card-price {

    flex-shrink: 0;

    color:
        var(--mb-terracota);

    font-family:
        var(--mb-font-title);

    font-size:
        1.4rem;

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

}


.menu-page-card p {

    margin: 0;

    color:
        var(--mb-text-secondary);

    font-size:
        .79rem;

    line-height:
        1.65;

}


/* =========================================================
   SALADOS HORIZONTALES
   ========================================================= */

.menu-page-card-horizontal {

    display: grid;

    grid-template-columns:
        42% 58%;

}


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

    height: 100%;

    min-height: 250px;

}


/* =========================================================
   EXTRAS
   ========================================================= */

.menu-page-extras {

    margin-top:
        2rem;

    padding:
        1.5rem;

    background:
        var(--mb-marfil);

    border:
        1px solid
        rgba(96,75,59,.10);

    border-radius:
        18px;

}


.menu-page-extras-header {

    display: flex;

    align-items: center;

    gap:
        .8rem;

    margin-bottom:
        1rem;

}


.menu-page-extras-header > i {

    color:
        var(--mb-terracota);

    font-size:
        1.3rem;

}


.menu-page-extras-header span {

    display: block;

    color:
        var(--mb-text-muted);

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.menu-page-extras-header h4 {

    margin: 0;

    font-size:
        1.4rem;

}


.menu-page-extras-grid {

    display: flex;

    flex-wrap: wrap;

    gap:
        .6rem;

}


.menu-page-extras-grid span {

    padding:
        .5rem .8rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.10);

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

    color:
        var(--mb-cafe-claro);

    font-size:
        .72rem;

}


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

.menu-page-temporada {

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        26px;

    box-shadow:
        var(--mb-shadow-lg);

}


.menu-page-temporada-image {

    min-height: 440px;

    height: 100%;

}


.menu-page-temporada-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.menu-page-temporada-body {

    padding:
        3.5rem;

}


.menu-page-temporada-eyebrow {

    display: block;

    margin-bottom:
        .7rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.menu-page-temporada h3 {

    color:
        var(--mb-blanco);

    font-size:
        3rem;

}


.menu-page-temporada p {

    color:
        rgba(255,255,255,.70);

}


.menu-page-temporada-list {

    display: grid;

    gap:
        .55rem;

    margin:
        1.4rem 0
        2rem;

}


.menu-page-temporada-list span {

    display: flex;

    align-items: center;

    gap:
        .5rem;

    color:
        rgba(255,255,255,.75);

    font-size:
        .8rem;

}


.menu-page-temporada-list i {

    color:
        var(--mb-verde-claro);

}


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

.menu-page-leches {

    margin-bottom:
        4rem;

    padding:
        1.8rem;

    background:
        var(--mb-verde-suave);

    border-radius:
        20px;

}


.menu-page-leches-header {

    display: flex;

    align-items: center;

    gap:
        .9rem;

    margin-bottom:
        1.3rem;

}


.menu-page-leches-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

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

}


.menu-page-leches-header span {

    display: block;

    color:
        var(--mb-verde-oscuro);

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.menu-page-leches-header h3 {

    margin: 0;

    font-size:
        1.7rem;

}


.menu-page-leches-grid {

    display: grid;

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

    gap:
        .8rem;

}


.menu-page-leches-grid div {

    padding:
        .8rem 1rem;

    background:
        rgba(255,255,255,.60);

    border:
        1px solid
        rgba(143,175,165,.20);

    border-radius:
        14px;

    color:
        var(--mb-cafe);

    font-size:
        .78rem;

}


.menu-page-leches-grid i {

    margin-right:
        .4rem;

    color:
        var(--mb-verde-oscuro);

}


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

.menu-page-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        2rem;

    padding:
        2rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.10);

    border-radius:
        20px;

    box-shadow:
        var(--mb-shadow-sm);

}


.menu-page-cta span {

    display: block;

    margin-bottom:
        .2rem;

    color:
        var(--mb-terracota);

    font-size:
        .62rem;

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

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


.menu-page-cta h3 {

    margin-bottom:
        .3rem;

    font-size:
        1.9rem;

}


.menu-page-cta p {

    margin: 0;

    font-size:
        .8rem;

}
/* =========================================================
   FILTRADO MENÚ
   ========================================================= */

.menu-page-seccion[hidden] {

    display: none !important;

}


.menu-page-seccion.menu-categoria-activa {

    animation:
        mbFadeUp
        0.35s
        ease
        both;

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


/* =========================================================
   HERO
   ========================================================= */

.experiencia-page-hero {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.experiencia-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.experiencia-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.experiencia-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.62),
            rgba(45,32,26,.26)
        );

}


.experiencia-page-hero > .container {

    position: relative;

    z-index: 3;

}


.experiencia-page-hero-content {

    max-width: 700px;

    padding:
        5rem 0;

}


.experiencia-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.experiencia-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.experiencia-page-hero p {

    max-width: 560px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   INTRO
   ========================================================= */

.experiencia-page-intro {

    background:
        var(--mb-bg-body);

}


.experiencia-page-intro-image {

    height: 580px;

    overflow: hidden;

    border-radius:
        150px 20px 150px 20px;

    box-shadow:
        var(--mb-shadow-lg);

}


.experiencia-page-intro-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.experiencia-page-intro-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style: italic;

}


.experiencia-page-intro-lead {

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.35rem;

    line-height:
        1.55;

}


/* =========================================================
   PILARES
   ========================================================= */

.experiencia-page-pilares {

    background:
        var(--mb-marfil);

}


.experiencia-page-header {

    margin-bottom:
        3rem;

}


.experiencia-page-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.experiencia-page-pilar {

    height: 100%;

    padding:
        2rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        22px;

    box-shadow:
        var(--mb-shadow-sm);

    transition:
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.experiencia-page-pilar:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--mb-shadow-md);

}


.experiencia-page-pilar-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        1.2rem;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

    font-size:
        1.2rem;

}


.experiencia-page-pilar h3 {

    margin-bottom:
        .7rem;

    font-size:
        1.7rem;

}


.experiencia-page-pilar p {

    margin: 0;

    font-size:
        .82rem;

}


/* =========================================================
   DESTACADA
   ========================================================= */

.experiencia-page-destacada {

    background:
        var(--mb-bg-body);

}


.experiencia-page-destacada-wrapper {

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.experiencia-page-destacada-image {

    height: 100%;

    min-height: 520px;

}


.experiencia-page-destacada-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.experiencia-page-destacada-content {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        4rem;

}


.experiencia-page-destacada-eyebrow {

    display: block;

    margin-bottom:
        .7rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.experiencia-page-destacada-content h2 {

    margin-bottom:
        1.3rem;

    color:
        var(--mb-blanco);

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

}


.experiencia-page-destacada-content h2 span {

    display: block;

    color:
        var(--mb-arena-claro);

    font-style:
        italic;

}


.experiencia-page-destacada-content p {

    color:
        rgba(255,255,255,.72);

}


/* =========================================================
   MOMENTOS
   ========================================================= */

.experiencia-page-momentos {

    background:
        var(--mb-blanco);

}


.experiencia-page-momentos-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.experiencia-page-momentos-grid {

    display: grid;

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

    grid-template-rows:
        250px 250px;

    gap:
        16px;

}


.experiencia-page-momento {

    overflow: hidden;

    border-radius:
        18px;

}


.experiencia-page-momento.grande {

    grid-row:
        span 2;

}


.experiencia-page-momento img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        .7s
        ease;

}


.experiencia-page-momento:hover img {

    transform:
        scale(1.04);

}


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

.experiencia-page-cta {

    background:
        var(--mb-bg-body);

}


.experiencia-page-cta-wrapper {

    padding:
        4rem 2rem;

    text-align: center;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.experiencia-page-cta-wrapper > span {

    display: block;

    margin-bottom:
        .7rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.experiencia-page-cta-wrapper h2 {

    max-width: 760px;

    margin:
        0 auto
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        );

}


.experiencia-page-cta-wrapper p {

    max-width: 580px;

    margin:
        0 auto
        2rem;

    color:
        rgba(255,255,255,.72);

}


.experiencia-page-cta-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        .8rem;

}


.experiencia-page-cta-secondary {

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.07);

}


.experiencia-page-cta-secondary:hover {

    background:
        var(--mb-blanco);

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

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


/* =========================================================
   HERO
   ========================================================= */

.nosotros-page-hero {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.nosotros-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.nosotros-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


.nosotros-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.64),
            rgba(45,32,26,.25)
        );

}


.nosotros-page-hero > .container {

    position: relative;

    z-index: 3;

}


.nosotros-page-hero-content {

    max-width: 720px;

    padding:
        5rem 0;

}


.nosotros-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.nosotros-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.nosotros-page-hero h1 span {

    display: block;

    color:
        var(--mb-arena-claro);

    font-style:
        italic;

}


.nosotros-page-hero p {

    max-width: 570px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   PRESENTACIÓN
   ========================================================= */

.nosotros-page-presentacion {

    background:
        var(--mb-bg-body);

}


.nosotros-page-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.nosotros-page-lead {

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.35rem;

    line-height:
        1.55;

}


.nosotros-page-image {

    min-height: 570px;

    position: relative;

    overflow: hidden;

    border-radius:
        22px 150px 22px 150px;

    box-shadow:
        var(--mb-shadow-lg);

}


.nosotros-page-image > img {

    width: 100%;

    height: 570px;

    object-fit: cover;

}


.nosotros-page-image-card {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 24px;

    padding:
        1rem 1.2rem;

    background:
        rgba(251,249,244,.92);

    border:
        1px solid
        rgba(255,255,255,.60);

    border-radius:
        16px;

    box-shadow:
        var(--mb-shadow-md);

    backdrop-filter:
        blur(10px);

}


.nosotros-page-image-card span {

    display: block;

    color:
        var(--mb-text-muted);

    font-size:
        .62rem;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.nosotros-page-image-card strong {

    display: block;

    margin-top:
        .2rem;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.25rem;

}


/* =========================================================
   FILOSOFÍA
   ========================================================= */

.nosotros-page-filosofia {

    background:
        var(--mb-marfil);

}


.nosotros-page-filosofia-wrapper {

    padding:
        4rem;

    text-align: center;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.nosotros-page-filosofia-eyebrow {

    display: block;

    margin-bottom:
        1.2rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.nosotros-page-filosofia blockquote {

    max-width: 850px;

    margin:
        0 auto
        1.4rem;

    color:
        var(--mb-blanco);

    font-family:
        var(--mb-font-title);

    font-size:
        clamp(
            2.3rem,
            4vw,
            4rem
        );

    font-style:
        italic;

    line-height:
        1.15;

}


.nosotros-page-filosofia p {

    max-width: 650px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,.68);

}


/* =========================================================
   VALORES
   ========================================================= */

.nosotros-page-valores {

    background:
        var(--mb-blanco);

}


.nosotros-page-header {

    margin-bottom:
        3rem;

}


.nosotros-page-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.nosotros-page-valor {

    height: 100%;

    padding:
        1.8rem;

    background:
        var(--mb-bg-body);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        20px;

    transition:
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.nosotros-page-valor:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--mb-shadow-md);

}


.nosotros-page-valor-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        1.1rem;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

}


.nosotros-page-valor h3 {

    margin-bottom:
        .6rem;

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

    font-size:
        1.5rem;

}


.nosotros-page-valor p {

    margin: 0;

    font-size:
        .79rem;

    line-height:
        1.65;

}


/* =========================================================
   IDENTIDAD
   ========================================================= */

.nosotros-page-identidad {

    background:
        var(--mb-bg-body);

}


.nosotros-page-identidad-grid {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

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

    gap:
        14px;

}


.nosotros-page-identidad-img {

    overflow: hidden;

    border-radius:
        18px;

}


.nosotros-page-identidad-img.grande {

    grid-row:
        span 2;

}


.nosotros-page-identidad-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        .7s ease;

}


.nosotros-page-identidad-img:hover img {

    transform:
        scale(1.04);

}


.nosotros-page-identidad-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


/* =========================================================
   ORIGEN / UBICACIÓN
   ========================================================= */

.nosotros-page-origen {

    background:
        var(--mb-marfil);

}


.nosotros-page-origen-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        2rem;

    padding:
        2.5rem 3rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.10);

    border-radius:
        22px;

    box-shadow:
        var(--mb-shadow-sm);

}


.nosotros-page-origen-small {

    display: block;

    margin-bottom:
        .35rem;

    color:
        var(--mb-verde-oscuro);

    font-size:
        .62rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.nosotros-page-origen h2 {

    margin-bottom:
        .4rem;

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

    font-size:
        2.5rem;

}


.nosotros-page-origen h2 span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.nosotros-page-origen p {

    margin: 0;

    color:
        var(--mb-text-secondary);

}


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

.nosotros-page-cta {

    background:
        var(--mb-bg-body);

}


.nosotros-page-cta-wrapper {

    padding:
        4rem 2rem;

    text-align:
        center;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.nosotros-page-cta-wrapper > span {

    display: block;

    margin-bottom:
        .7rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.nosotros-page-cta h2 {

    max-width: 760px;

    margin:
        0 auto
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        );

}


.nosotros-page-cta h2 em {

    display: block;

    color:
        var(--mb-arena-claro);

    font-weight:
        normal;

}


.nosotros-page-cta p {

    max-width: 540px;

    margin:
        0 auto
        2rem;

    color:
        rgba(255,255,255,.70);

}


.nosotros-page-cta-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        .8rem;

}


.nosotros-page-cta-secondary {

    color:
        var(--mb-blanco);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.28);

}


.nosotros-page-cta-secondary:hover {

    background:
        var(--mb-blanco);

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

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


/* =========================================================
   HERO
   ========================================================= */

.galeria-page-hero {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.galeria-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.galeria-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


.galeria-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.60),
            rgba(45,32,26,.22)
        );

}


.galeria-page-hero > .container {

    position: relative;

    z-index: 3;

}


.galeria-page-hero-content {

    max-width: 700px;

    padding:
        5rem 0;

}


.galeria-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.galeria-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.galeria-page-hero p {

    max-width: 560px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   FILTROS
   ========================================================= */

.galeria-page-filtros {

    position: sticky;

    top: 0;

    z-index: 1020;

    padding:
        .9rem 0;

    background:
        rgba(251,249,244,.98);

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

    box-shadow:
        0 5px 20px
        rgba(40,59,80,.06);

    backdrop-filter:
        blur(10px);

}


.galeria-page-filtros-scroll {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        .55rem;

}


.galeria-page-filtro-btn {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        .45rem;

    padding:
        .55rem 1rem;

    background:
        var(--mb-blanco);

    color:
        var(--mb-cafe);

    border:
        1px solid
        rgba(96,75,59,.12);

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

    font-family:
        var(--mb-font-body);

    font-size:
        .73rem;

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

    cursor: pointer;

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

}


.galeria-page-filtro-btn i {

    color:
        var(--mb-verde-oscuro);

}


.galeria-page-filtro-btn:hover {

    background:
        var(--mb-verde-suave);

    border-color:
        var(--mb-verde);

}


.galeria-page-filtro-btn.active {

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-cafe-oscuro);

}


.galeria-page-filtro-btn.active i {

    color:
        var(--mb-arena-claro);

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.galeria-page-contenido {

    background:
        var(--mb-bg-body);

}


.galeria-page-header {

    margin-bottom:
        3.5rem;

}


.galeria-page-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


/* =========================================================
   GRID
   ========================================================= */

.galeria-page-grid {

    display: grid;

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

    grid-auto-rows:
        230px;

    gap:
        16px;

}


/* =========================================================
   ITEM
   ========================================================= */

.galeria-page-item {

    overflow: hidden;

    border-radius:
        20px;

    box-shadow:
        var(--mb-shadow-sm);

}


.galeria-page-item-grande {

    grid-column:
        span 2;

    grid-row:
        span 2;

}


.galeria-page-item-ancho {

    grid-column:
        span 2;

}


.galeria-page-item[hidden] {

    display: none !important;

}


/* =========================================================
   BOTÓN INTERNO
   ========================================================= */

.galeria-page-item-btn {

    width: 100%;

    height: 100%;

    position: relative;

    display: block;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 0;

    background:
        var(--mb-marfil);

    cursor: pointer;

}


.galeria-page-item-btn img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        .7s ease;

}


.galeria-page-item-btn:hover img {

    transform:
        scale(1.05);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.galeria-page-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        1rem;

    padding:
        1.3rem;

    text-align: left;

    background:
        linear-gradient(
            180deg,
            rgba(20,20,20,.02)
            35%,
            rgba(20,20,20,.76)
            100%
        );

}


.galeria-page-overlay span {

    display: block;

    margin-bottom:
        .25rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .6rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.galeria-page-overlay h3 {

    margin: 0;

    color:
        var(--mb-blanco);

    font-size:
        1.25rem;

}


.galeria-page-overlay > i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(255,255,255,.25);

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

    background:
        rgba(255,255,255,.10);

    backdrop-filter:
        blur(6px);

}


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

.galeria-page-cta {

    background:
        var(--mb-marfil);

}


.galeria-page-cta-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        2rem;

    padding:
        3rem;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        26px;

    box-shadow:
        var(--mb-shadow-lg);

}


.galeria-page-cta-wrapper > div:first-child {

    max-width: 700px;

}


.galeria-page-cta-wrapper span {

    display: block;

    margin-bottom:
        .4rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .64rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.galeria-page-cta-wrapper h2 {

    margin-bottom:
        .7rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            2.3rem,
            4vw,
            3.5rem
        );

}


.galeria-page-cta-wrapper h2 em {

    display: block;

    color:
        var(--mb-arena-claro);

    font-weight:
        normal;

}


.galeria-page-cta-wrapper p {

    margin: 0;

    color:
        rgba(255,255,255,.68);

}


.galeria-page-cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap:
        .7rem;

}


.galeria-page-cta-secondary {

    color:
        var(--mb-blanco);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.28);

}


.galeria-page-cta-secondary:hover {

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

    background:
        var(--mb-blanco);

}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.galeria-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        2rem;

    opacity: 0;

    visibility: hidden;

    background:
        rgba(25,20,17,.94);

    transition:
        opacity
        .25s ease,
        visibility
        .25s ease;

}


.galeria-lightbox.active {

    opacity: 1;

    visibility: visible;

}


.galeria-lightbox-contenido {

    width: min(
        980px,
        88vw
    );

    max-height:
        88vh;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        20px;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.35);

}


.galeria-lightbox-contenido img {

    width: 100%;

    max-height:
        68vh;

    display: block;

    object-fit: contain;

    background:
        #1f1a17;

}


.galeria-lightbox-info {

    padding:
        1.2rem 1.4rem;

}


.galeria-lightbox-info span {

    display: block;

    color:
        var(--mb-verde-claro);

    font-size:
        .6rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.galeria-lightbox-info h3 {

    margin:
        .15rem 0
        .25rem;

    color:
        var(--mb-blanco);

    font-size:
        1.5rem;

}


.galeria-lightbox-info p {

    margin: 0;

    color:
        rgba(255,255,255,.67);

    font-size:
        .78rem;

}


.galeria-lightbox-cerrar,
.galeria-lightbox-nav {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--mb-blanco);

    border:
        1px solid
        rgba(255,255,255,.20);

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

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(8px);

    cursor: pointer;

}


.galeria-lightbox-cerrar {

    width: 46px;

    height: 46px;

    top: 22px;

    right: 22px;

}


.galeria-lightbox-nav {

    width: 50px;

    height: 50px;

    top: 50%;

    transform:
        translateY(-50%);

}


.galeria-lightbox-anterior {

    left: 24px;

}


.galeria-lightbox-siguiente {

    right: 24px;

}


.galeria-lightbox-cerrar:hover,
.galeria-lightbox-nav:hover {

    background:
        var(--mb-terracota);

    border-color:
        var(--mb-terracota);

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


/* =========================================================
   HERO
   ========================================================= */

.ubicacion-page-hero {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.ubicacion-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.ubicacion-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.ubicacion-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.62),
            rgba(45,32,26,.24)
        );

}


.ubicacion-page-hero > .container {

    position: relative;

    z-index: 3;

}


.ubicacion-page-hero-content {

    max-width: 720px;

    padding:
        5rem 0;

}


.ubicacion-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.ubicacion-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.ubicacion-page-hero h1 span {

    display: block;

    color:
        var(--mb-arena-claro);

    font-style:
        italic;

}


.ubicacion-page-hero p {

    max-width: 560px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.ubicacion-page-info {

    background:
        var(--mb-bg-body);

}


.ubicacion-page-info-content {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.ubicacion-page-info-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.ubicacion-page-lead {

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.3rem;

    line-height:
        1.55;

}


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

.ubicacion-page-datos {

    margin:
        1.5rem 0
        2rem;

    padding-top:
        1.4rem;

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

}


.ubicacion-page-dato {

    display: flex;

    align-items: flex-start;

    gap:
        1rem;

    margin-bottom:
        1.2rem;

}


.ubicacion-page-dato:last-child {

    margin-bottom: 0;

}


.ubicacion-page-dato-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

}


.ubicacion-page-dato span {

    display: block;

    margin-bottom:
        .18rem;

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

    font-size:
        .78rem;

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

}


.ubicacion-page-dato p {

    margin: 0;

    color:
        var(--mb-text-secondary);

    font-size:
        .82rem;

    line-height:
        1.6;

}


.ubicacion-page-acciones {

    display: flex;

    flex-wrap: wrap;

    gap:
        .75rem;

}


/* =========================================================
   MAPA
   ========================================================= */

.ubicacion-page-map-wrapper {

    min-height: 620px;

    height: 100%;

    position: relative;

    overflow: hidden;

    background:
        var(--mb-marfil);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.ubicacion-page-map {

    width: 100%;

    height: 100%;

    min-height: 620px;

    display: block;

    border: 0;

}


.ubicacion-page-map-card {

    position: absolute;

    left: 24px;

    bottom: 24px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap:
        .85rem;

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

    padding:
        1rem 1.15rem;

    background:
        rgba(251,249,244,.94);

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:
        18px;

    box-shadow:
        var(--mb-shadow-md);

    backdrop-filter:
        blur(10px);

}


.ubicacion-page-map-card-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

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

}


.ubicacion-page-map-card span {

    display: block;

    color:
        var(--mb-text-muted);

    font-size:
        .61rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.ubicacion-page-map-card strong {

    display: block;

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.2rem;

}


.ubicacion-page-map-card small {

    color:
        var(--mb-cafe-claro);

    font-size:
        .65rem;

}


/* =========================================================
   REFERENCIA
   ========================================================= */

.ubicacion-page-referencia {

    background:
        var(--mb-marfil);

}


.ubicacion-page-referencia-wrapper {

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap:
        1.5rem;

    padding:
        2rem 2.5rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.10);

    border-radius:
        22px;

    box-shadow:
        var(--mb-shadow-sm);

}


.ubicacion-page-referencia-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

    font-size:
        1.25rem;

}


.ubicacion-page-referencia-wrapper span {

    display: block;

    color:
        var(--mb-verde-oscuro);

    font-size:
        .62rem;

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

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


.ubicacion-page-referencia-wrapper h2 {

    margin:
        .15rem 0
        .3rem;

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

    font-size:
        2rem;

}


.ubicacion-page-referencia-wrapper h2 em {

    color:
        var(--mb-terracota);

    font-weight:
        normal;

}


.ubicacion-page-referencia-wrapper p {

    margin: 0;

    font-size:
        .8rem;

}


/* =========================================================
   GALERÍA / EXPERIENCIA
   ========================================================= */

.ubicacion-page-experiencia {

    background:
        var(--mb-blanco);

}


.ubicacion-page-gallery {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

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

    gap:
        14px;

}


.ubicacion-page-gallery-main,
.ubicacion-page-gallery-small {

    overflow: hidden;

    border-radius:
        18px;

}


.ubicacion-page-gallery-main {

    grid-row:
        span 2;

}


.ubicacion-page-gallery img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        .7s ease;

}


.ubicacion-page-gallery-main:hover img,
.ubicacion-page-gallery-small:hover img {

    transform:
        scale(1.04);

}


.ubicacion-page-experiencia-content
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


/* =========================================================
   BENEFICIOS
   ========================================================= */

.ubicacion-page-beneficios {

    background:
        var(--mb-bg-body);

}


.ubicacion-page-beneficio {

    height: 100%;

    padding:
        1.7rem;

    text-align:
        center;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        20px;

    box-shadow:
        var(--mb-shadow-sm);

}


.ubicacion-page-beneficio > div {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto
        1rem;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

}


.ubicacion-page-beneficio h3 {

    margin-bottom:
        .5rem;

    font-size:
        1.45rem;

}


.ubicacion-page-beneficio p {

    margin: 0;

    font-size:
        .78rem;

}


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

.ubicacion-page-cta {

    background:
        var(--mb-marfil);

}


.ubicacion-page-cta-wrapper {

    padding:
        4rem 2rem;

    text-align:
        center;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

    box-shadow:
        var(--mb-shadow-lg);

}


.ubicacion-page-cta-wrapper > span {

    display: block;

    margin-bottom:
        .7rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .65rem;

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

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.ubicacion-page-cta h2 {

    max-width: 760px;

    margin:
        0 auto
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        );

}


.ubicacion-page-cta h2 em {

    display: block;

    color:
        var(--mb-arena-claro);

    font-weight:
        normal;

}


.ubicacion-page-cta p {

    max-width: 560px;

    margin:
        0 auto
        2rem;

    color:
        rgba(255,255,255,.70);

}


.ubicacion-page-cta-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        .8rem;

}


.ubicacion-page-cta-secondary {

    color:
        var(--mb-blanco);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.28);

}


.ubicacion-page-cta-secondary:hover {

    background:
        var(--mb-blanco);

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

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


/* =========================================================
   HERO
   ========================================================= */

.contacto-page-hero {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.contacto-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.contacto-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.contacto-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.62),
            rgba(45,32,26,.24)
        );

}


.contacto-page-hero > .container {

    position: relative;

    z-index: 3;

}


.contacto-page-hero-content {

    max-width: 720px;

    padding:
        5rem 0;

}


.contacto-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.contacto-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.contacto-page-hero h1 span {

    display: block;

    color:
        var(--mb-arena-claro);

    font-style:
        italic;

}


.contacto-page-hero p {

    max-width: 570px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   PRINCIPAL
   ========================================================= */

.contacto-page-principal {

    background:
        var(--mb-bg-body);

}


.contacto-page-info {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.contacto-page-info
.titulo-seccion span {

    display: block;

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.contacto-page-lead {

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

    font-family:
        var(--mb-font-title);

    font-size:
        1.25rem;

    line-height:
        1.55;

}


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

.contacto-page-datos {

    display: flex;

    flex-direction: column;

    gap:
        .8rem;

    margin:
        1.8rem 0;

}


.contacto-page-dato {

    display: flex;

    align-items: center;

    gap:
        1rem;

    padding:
        1rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        16px;

    box-shadow:
        var(--mb-shadow-sm);

    text-decoration: none;

    transition:
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


a.contacto-page-dato:hover {

    transform:
        translateX(4px);

    box-shadow:
        var(--mb-shadow-md);

}


.contacto-page-dato-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

}


.contacto-page-dato span {

    display: block;

    margin-bottom:
        .12rem;

    color:
        var(--mb-text-muted);

    font-size:
        .6rem;

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

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.contacto-page-dato strong {

    display: block;

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

    font-size:
        .83rem;

}


.contacto-page-dato small {

    display: block;

    margin-top:
        .1rem;

    color:
        var(--mb-text-secondary);

    font-size:
        .68rem;

}


/* =========================================================
   REDES
   ========================================================= */

.contacto-page-redes {

    padding-top:
        1.3rem;

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

}


.contacto-page-redes > span {

    display: block;

    margin-bottom:
        .8rem;

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

    font-size:
        .7rem;

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

}


.contacto-page-redes > div {

    display: flex;

    gap:
        .55rem;

}


.contacto-page-redes a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--mb-verde-oscuro);

    background:
        var(--mb-verde-suave);

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

}


.contacto-page-redes a:hover {

    color:
        var(--mb-blanco);

    background:
        var(--mb-terracota);

}


/* =========================================================
   FORMULARIO
   ========================================================= */

.contacto-page-form-wrapper {

    height: 100%;

    padding:
        2.5rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        24px;

    box-shadow:
        var(--mb-shadow-md);

}


.contacto-page-form-header {

    margin-bottom:
        2rem;

}


.contacto-page-form-header > span {

    display: block;

    margin-bottom:
        .4rem;

    color:
        var(--mb-terracota);

    font-size:
        .63rem;

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

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.contacto-page-form-header h2 {

    margin-bottom:
        .5rem;

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

    font-size:
        2.4rem;

}


.contacto-page-form-header p {

    margin: 0;

    font-size:
        .8rem;

}


/* =========================================================
   LABEL
   ========================================================= */

.contacto-form-label {

    display: block;

    margin-bottom:
        .4rem;

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

    font-size:
        .7rem;

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

}


.contacto-form-label span {

    color:
        var(--mb-terracota);

}


/* =========================================================
   INPUT
   ========================================================= */

.contacto-form-control {

    min-height: 52px;

    display: flex;

    align-items: center;

    gap:
        .7rem;

    padding:
        0 .9rem;

    background:
        var(--mb-bg-body);

    border:
        1px solid
        rgba(96,75,59,.12);

    border-radius:
        13px;

    transition:
        border-color
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.contacto-form-control:focus-within {

    border-color:
        var(--mb-verde);

    box-shadow:
        0 0 0 3px
        rgba(143,175,165,.12);

}


.contacto-form-control > i {

    flex-shrink: 0;

    color:
        var(--mb-verde-oscuro);

}


.contacto-form-control input,
.contacto-form-control select,
.contacto-form-control textarea {

    width: 100%;

    border: 0;

    outline: 0;

    background:
        transparent;

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

    font-family:
        var(--mb-font-body);

    font-size:
        .78rem;

}


.contacto-form-control select {

    cursor: pointer;

}


.contacto-form-textarea {

    align-items:
        flex-start;

    padding-top:
        .9rem;

}


.contacto-form-textarea textarea {

    resize:
        vertical;

    min-height:
        130px;

}


/* =========================================================
   CHECK
   ========================================================= */

.contacto-form-check {

    display: flex;

    align-items:
        flex-start;

    gap:
        .6rem;

    color:
        var(--mb-text-secondary);

    font-size:
        .68rem;

    cursor:
        pointer;

}


.contacto-form-check input {

    margin-top:
        .2rem;

    accent-color:
        var(--mb-verde-oscuro);

}


/* =========================================================
   SUBMIT
   ========================================================= */

.contacto-form-submit {

    min-width:
        190px;

}


/* =========================================================
   RESPUESTA
   ========================================================= */

.contacto-page-respuesta {

    margin-top:
        1rem;

    padding:
        .9rem 1rem;

    border-radius:
        12px;

    font-size:
        .75rem;

}


/* =========================================================
   WHATSAPP
   ========================================================= */

.contacto-page-whatsapp {

    background:
        var(--mb-marfil);

}


.contacto-page-whatsapp-wrapper {

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap:
        1.5rem;

    padding:
        2.5rem;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        24px;

    box-shadow:
        var(--mb-shadow-lg);

}


.contacto-page-whatsapp-icon {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--mb-blanco);

    background:
        var(--mb-whatsapp);

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

    font-size:
        1.7rem;

}


.contacto-page-whatsapp-content > span {

    display: block;

    color:
        var(--mb-verde-claro);

    font-size:
        .62rem;

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

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

}


.contacto-page-whatsapp-content h2 {

    margin:
        .15rem 0
        .4rem;

    color:
        var(--mb-blanco);

    font-size:
        2.2rem;

}


.contacto-page-whatsapp-content h2 em {

    color:
        var(--mb-arena-claro);

    font-weight:
        normal;

}


.contacto-page-whatsapp-content p {

    margin: 0;

    color:
        rgba(255,255,255,.68);

    font-size:
        .8rem;

}


.contacto-page-whatsapp-btn {

    background:
        var(--mb-whatsapp);

    border-color:
        var(--mb-whatsapp);

    color:
        var(--mb-blanco);

}


.contacto-page-whatsapp-btn:hover {

    background:
        var(--mb-whatsapp-hover);

    color:
        var(--mb-blanco);

}


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

.contacto-page-ubicacion {

    background:
        var(--mb-bg-body);

}


.contacto-page-location-header {

    margin-bottom:
        3rem;

}


.contacto-page-location-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


.contacto-page-map-wrapper {

    height:
        540px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        24px;

    box-shadow:
        var(--mb-shadow-lg);

}


.contacto-page-map {

    width: 100%;

    height: 100%;

    border: 0;

}


.contacto-page-map-card {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 24px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap:
        1rem;

    padding:
        1rem;

    background:
        rgba(251,249,244,.94);

    border-radius:
        18px;

    box-shadow:
        var(--mb-shadow-md);

    backdrop-filter:
        blur(10px);

}


.contacto-page-map-card > div:first-child {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--mb-blanco);

    background:
        var(--mb-verde);

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

}


.contacto-page-map-card span {

    display: block;

    color:
        var(--mb-text-muted);

    font-size:
        .6rem;

    text-transform:
        uppercase;

}


.contacto-page-map-card strong {

    display: block;

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

    font-size:
        .8rem;

}


.contacto-page-map-card small {

    color:
        var(--mb-text-secondary);

    font-size:
        .65rem;

}


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

.contacto-page-cta {

    background:
        var(--mb-marfil);

}


.contacto-page-cta-wrapper {

    padding:
        4rem 2rem;

    text-align:
        center;

    background:
        var(--mb-cafe-oscuro);

    border-radius:
        28px;

}


.contacto-page-cta-wrapper > span {

    display: block;

    margin-bottom:
        .6rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .63rem;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.contacto-page-cta h2 {

    max-width: 760px;

    margin:
        0 auto
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        );

}


.contacto-page-cta h2 em {

    display: block;

    color:
        var(--mb-arena-claro);

    font-weight:
        normal;

}


.contacto-page-cta p {

    max-width:
        550px;

    margin:
        0 auto
        2rem;

    color:
        rgba(255,255,255,.70);

}


.contacto-page-cta-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        .8rem;

}


.contacto-page-cta-secondary {

    color:
        var(--mb-blanco);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.28);

}


.contacto-page-cta-secondary:hover {

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

    background:
        var(--mb-blanco);

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


/* =========================================================
   HERO
   ========================================================= */

.pedido-page-hero {

    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--mb-cafe-oscuro);

}


.pedido-page-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.pedido-page-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.pedido-page-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(45,32,26,.90),
            rgba(45,32,26,.60),
            rgba(45,32,26,.22)
        );

}


.pedido-page-hero > .container {

    position: relative;

    z-index: 3;

}


.pedido-page-hero-content {

    max-width: 700px;

    padding:
        5rem 0;

}


.pedido-page-eyebrow {

    display: block;

    margin-bottom:
        .8rem;

    color:
        var(--mb-verde-claro);

    font-size:
        .68rem;

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

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.pedido-page-hero h1 {

    margin-bottom:
        1rem;

    color:
        var(--mb-blanco);

    font-size:
        clamp(
            4rem,
            7vw,
            6rem
        );

}


.pedido-page-hero h1 span {

    display: block;

    color:
        var(--mb-arena-claro);

    font-style:
        italic;

}


.pedido-page-hero p {

    max-width: 560px;

    color:
        rgba(255,255,255,.80);

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.pedido-page-contenido {

    background:
        var(--mb-bg-body);

}


.pedido-page-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        1.5rem;

    margin-bottom:
        1.8rem;

}


.pedido-page-header
.titulo-seccion {

    margin-bottom: 0;

}


.pedido-page-header
.titulo-seccion span {

    color:
        var(--mb-terracota);

    font-style:
        italic;

}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.pedido-page-categorias {

    display: flex;

    flex-wrap: wrap;

    gap:
        .5rem;

    margin-bottom:
        1.8rem;

}


.pedido-categoria-btn {

    min-height: 40px;

    padding:
        .5rem
        .9rem;

    background:
        var(--mb-blanco);

    color:
        var(--mb-cafe);

    border:
        1px solid
        rgba(96,75,59,.12);

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

    font-size:
        .72rem;

    cursor:
        pointer;

}


.pedido-categoria-btn.active {

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-cafe-oscuro);

}


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

.pedido-producto[hidden] {

    display: none !important;

}


.pedido-producto-card {

    height: 100%;

    display: grid;

    grid-template-columns:
        145px 1fr;

    overflow: hidden;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        18px;

    box-shadow:
        var(--mb-shadow-sm);

}


.pedido-producto-img {

    min-height: 180px;

}


.pedido-producto-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.pedido-producto-body {

    display: flex;

    flex-direction: column;

    padding:
        1.2rem;

}


.pedido-producto-categoria {

    display: block;

    margin-bottom:
        .15rem;

    color:
        var(--mb-verde-oscuro);

    font-size:
        .58rem;

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

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.pedido-producto-body h3 {

    margin-bottom:
        .4rem;

    font-size:
        1.45rem;

}


.pedido-producto-body p {

    margin-bottom:
        1rem;

    font-size:
        .75rem;

}


.pedido-producto-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        .75rem;

    margin-top:
        auto;

}


.pedido-producto-footer > strong {

    color:
        var(--mb-terracota);

    font-family:
        var(--mb-font-title);

    font-size:
        1.4rem;

}


/* =========================================================
   CARRITO
   ========================================================= */

.pedido-carrito {

    position: sticky;

    top:
        100px;

    padding:
        1.5rem;

    background:
        var(--mb-blanco);

    border:
        1px solid
        rgba(96,75,59,.08);

    border-radius:
        22px;

    box-shadow:
        var(--mb-shadow-md);

}


.pedido-carrito-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        1rem;

    padding-bottom:
        1rem;

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

}


.pedido-carrito-header span {

    display: block;

    color:
        var(--mb-terracota);

    font-size:
        .6rem;

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

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.pedido-carrito-header h2 {

    margin: 0;

    font-size:
        1.8rem;

}


.pedido-carrito-contador {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mb-cafe-oscuro);

    color:
        var(--mb-blanco);

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

    font-size:
        .75rem;

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

}


/* =========================================================
   LISTA
   ========================================================= */

.pedido-carrito-lista {

    max-height:
        320px;

    overflow-y:
        auto;

    padding:
        1rem 0;

}


.pedido-vacio {

    padding:
        1.5rem .5rem;

    text-align:
        center;

}


.pedido-vacio > div {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto
        .7rem;

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

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

}


.pedido-vacio strong {

    display: block;

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

}


.pedido-vacio p {

    margin:
        .2rem 0
        0;

    font-size:
        .7rem;

}


/* =========================================================
   ITEM CARRITO
   ========================================================= */

.pedido-carrito-item {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap:
        .8rem;

    padding:
        .8rem 0;

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

}


.pedido-carrito-item:last-child {

    border-bottom: 0;

}


.pedido-carrito-item h4 {

    margin-bottom:
        .2rem;

    font-size:
        1rem;

}


.pedido-carrito-item-price {

    color:
        var(--mb-terracota);

    font-size:
        .73rem;

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

}


.pedido-item-controls {

    display: flex;

    align-items: center;

    gap:
        .4rem;

    margin-top:
        .5rem;

}


.pedido-item-controls button {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(96,75,59,.12);

    background:
        var(--mb-bg-body);

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

    cursor:
        pointer;

}


.pedido-item-controls span {

    min-width:
        20px;

    text-align:
        center;

    font-size:
        .75rem;

}


.pedido-item-eliminar {

    align-self:
        center;

    color:
        var(--mb-terracota);

    border: 0;

    background:
        transparent;

    cursor:
        pointer;

}


/* =========================================================
   BLOQUES
   ========================================================= */

.pedido-carrito-bloque {

    margin-top:
        1rem;

}


.pedido-carrito-bloque > label {

    display: block;

    margin-bottom:
        .45rem;

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

    font-size:
        .68rem;

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

}


.pedido-input {

    width: 100%;

    min-height:
        46px;

    padding:
        .7rem .8rem;

    background:
        var(--mb-bg-body);

    border:
        1px solid
        rgba(96,75,59,.12);

    border-radius:
        12px;

    outline:
        none;

    font-family:
        var(--mb-font-body);

    font-size:
        .75rem;

}


.pedido-textarea {

    resize:
        vertical;

}


/* =========================================================
   TIPO
   ========================================================= */

.pedido-tipo-grid {

    display: grid;

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

    gap:
        .5rem;

}


.pedido-tipo-option {

    cursor:
        pointer;

}


.pedido-tipo-option input {

    display: none;

}


.pedido-tipo-option span {

    min-height:
        44px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        .4rem;

    padding:
        .5rem;

    background:
        var(--mb-bg-body);

    color:
        var(--mb-cafe);

    border:
        1px solid
        rgba(96,75,59,.12);

    border-radius:
        12px;

    font-size:
        .68rem;

}


.pedido-tipo-option input:checked + span {

    background:
        var(--mb-verde-suave);

    color:
        var(--mb-verde-oscuro);

    border-color:
        var(--mb-verde);

}


/* =========================================================
   TOTALES
   ========================================================= */

.pedido-carrito-totales {

    margin-top:
        1.2rem;

    padding-top:
        1rem;

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

}


.pedido-carrito-totales > div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        .5rem;

}


.pedido-carrito-totales span {

    font-size:
        .72rem;

}


.pedido-carrito-totales strong {

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

}


.pedido-total-final {

    padding-top:
        .7rem;

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

}


.pedido-total-final strong {

    color:
        var(--mb-terracota);

    font-size:
        1.35rem;

}


/* =========================================================
   WHATSAPP
   ========================================================= */

.pedido-btn-whatsapp {

    width: 100%;

    margin-top:
        1rem;

    background:
        var(--mb-whatsapp);

    color:
        var(--mb-blanco);

    border-color:
        var(--mb-whatsapp);

}


.pedido-btn-whatsapp:hover {

    background:
        var(--mb-whatsapp-hover);

    color:
        var(--mb-blanco);

}


.pedido-btn-whatsapp:disabled {

    opacity:
        .45;

    cursor:
        not-allowed;

}


.pedido-carrito-aviso {

    display: block;

    margin-top:
        .7rem;

    color:
        var(--mb-text-muted);

    font-size:
        .61rem;

    line-height:
        1.45;

    text-align:
        center;

}
/* =========================================================
   HOME - EXPERIENCIA
   SEPARACIÓN ENTRE IMÁGENES
   ========================================================= */

.seccion-experiencia .experiencia-img-principal {
    position: relative;
    z-index: 1;
}

.seccion-experiencia .experiencia-img-secundaria {
    position: relative;
    z-index: 2;

    /* Separación visual */
    border-top: 12px solid var(--mb-bg-body);
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {

    .seccion-experiencia .experiencia-img-secundaria {
        border-top-width: 10px;
    }

}
/* =========================================================
   MARÍA BONITA
   HOME - MENÚ DESTACADO DINÁMICO
   ========================================================= */


/* =========================================================
   SECCIÓN
   ========================================================= */

.seccion-menu-destacado {
    position: relative;
    overflow: hidden;
    background: #f7f2ec;
}

.seccion-menu-destacado .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.menu-destacado-header {
    max-width: 820px;
    margin: 0 auto 2.4rem;
}

.menu-destacado-titulo {
    margin-bottom: 1rem;
}

.menu-destacado-intro {
    max-width: 700px;
    margin: 0 auto;
    color: #806f62;
    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    line-height: 1.8;
}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.menu-destacado-categorias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 0.75rem;

    margin: 0 auto 2.8rem;
}

.menu-destacado-categoria {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    min-height: 44px;
    padding: 0.7rem 1.15rem;

    border: 1px solid rgba(111, 88, 71, 0.18);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.62);

    color: #6f5847;
    text-decoration: none;

    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.menu-destacado-categoria:hover {
    color: #ffffff;
    background: #738f85;
    border-color: #738f85;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(74, 67, 59, 0.10);
}

.menu-destacado-categoria-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    font-size: 1rem;
}

.menu-destacado-categoria i {
    line-height: 1;
}


/* =========================================================
   GRID DE PRODUCTOS
   ========================================================= */

.menu-destacado-grid {
    align-items: stretch;
}

.menu-destacado-grid > div {
    display: flex;
}


/* =========================================================
   TARJETA
   ========================================================= */

.menu-producto-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(111, 88, 71, 0.10);

    border-radius: 6px;

    box-shadow:
        0 10px 30px
        rgba(70, 54, 42, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.menu-producto-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(169, 91, 72, 0.18);

    box-shadow:
        0 18px 42px
        rgba(70, 54, 42, 0.13);
}


/* =========================================================
   CONTENEDOR DE IMAGEN

   IMPORTANTE:
   Todas las tarjetas tendrán exactamente
   la misma altura de fotografía.
   ========================================================= */

.menu-producto-imagen {
    position: relative;

    width: 100%;
    height: 285px;

    overflow: hidden;

    background: #eee7df;
}


/* =========================================================
   IMAGEN

   object-fit: cover hace que:
   - horizontal
   - vertical
   - cuadrada

   ocupen exactamente el mismo espacio.
   ========================================================= */

.menu-producto-imagen > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.5s ease;
}

.menu-producto-card:hover
.menu-producto-imagen > img {
    transform: scale(1.045);
}


/* =========================================================
   BADGES
   ========================================================= */

.menu-producto-badges {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 3;

    display: flex;
    flex-wrap: wrap;

    gap: 0.4rem;
}

.menu-producto-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.35rem;

    padding: 0.4rem 0.7rem;

    border-radius: 999px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.66rem;
    font-weight: 600;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);
}

.menu-producto-badge-destacado {
    color: #ffffff;
    background: #a95b48;
}

.menu-producto-badge-nuevo {
    color: #ffffff;
    background: #738f85;
}

.menu-producto-badge i {
    font-size: 0.7rem;
}


/* =========================================================
   CATEGORÍA SOBRE LA IMAGEN
   ========================================================= */

.menu-producto-categoria {
    position: absolute;

    left: 14px;
    bottom: 14px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

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

    padding: 0.45rem 0.75rem;

    border-radius: 999px;

    color: #5f4c3e;
    background:
        rgba(255, 255, 255, 0.92);

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

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);
}

.menu-producto-categoria i {
    color: #a95b48;
    font-size: 0.82rem;
}


/* =========================================================
   CUERPO DE LA TARJETA
   ========================================================= */

.menu-producto-contenido {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        1.35rem
        1.35rem
        1.25rem;
}


/* =========================================================
   NOMBRE
   ========================================================= */

.menu-producto-nombre {
    margin:
        0
        0
        0.7rem;

    color: #554438;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.75rem;
    font-weight: 600;

    line-height: 1.05;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.menu-producto-descripcion {
    margin:
        0
        0
        1.3rem;

    color: #857469;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.82rem;
    font-weight: 400;

    line-height: 1.7;

    flex-grow: 1;
}


/* =========================================================
   PIE / PRECIO
   ========================================================= */

.menu-producto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding-top: 1rem;

    border-top:
        1px solid
        rgba(111, 88, 71, 0.10);
}

.menu-producto-precio {
    color: #a95b48;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.65rem;
    font-weight: 600;

    line-height: 1;
}


/* =========================================================
   BOTÓN FLECHA
   ========================================================= */

.menu-producto-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    color: #ffffff;
    background: #738f85;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.menu-producto-link:hover {
    color: #ffffff;
    background: #a95b48;

    transform: rotate(-8deg);
}

.menu-producto-link i {
    font-size: 1rem;
}


/* =========================================================
   ACCIÓN - VER MENÚ COMPLETO
   ========================================================= */

.menu-destacado-accion {
    margin-top: 3rem;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.menu-destacado-vacio {
    max-width: 520px;

    margin:
        2rem
        auto
        0;

    padding: 3rem 2rem;

    background: rgba(255, 255, 255, 0.55);

    border:
        1px solid
        rgba(111, 88, 71, 0.10);

    border-radius: 8px;
}

.menu-destacado-vacio-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin:
        0
        auto
        1.2rem;

    border-radius: 50%;

    color: #ffffff;
    background: #738f85;

    font-size: 1.6rem;
}

.menu-destacado-vacio h3 {
    margin-bottom: 0.6rem;

    color: #554438;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 2rem;
}

.menu-destacado-vacio p {
    margin: 0;

    color: #857469;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.88rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .menu-destacado-header {
        margin-bottom: 2rem;
    }

    .menu-destacado-categorias {
        margin-bottom: 2.2rem;
    }

    .menu-producto-imagen {
        height: 300px;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {

    .menu-destacado-header {
        margin-bottom: 1.7rem;
    }

    .menu-destacado-intro {
        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* CATEGORÍAS */

    .menu-destacado-categorias {
        gap: 0.5rem;

        margin-bottom: 1.8rem;
    }

    .menu-destacado-categoria {
        min-height: 40px;

        padding:
            0.55rem
            0.85rem;

        font-size: 0.72rem;
    }


    /* IMAGEN */

    .menu-producto-imagen {
        height: 270px;
    }


    /* CONTENIDO */

    .menu-producto-contenido {
        padding:
            1.15rem
            1.15rem
            1.1rem;
    }

    .menu-producto-nombre {
        font-size: 1.65rem;
    }

    .menu-producto-descripcion {
        font-size: 0.78rem;
    }

    .menu-producto-precio {
        font-size: 1.5rem;
    }

    .menu-destacado-accion {
        margin-top: 2.2rem;
    }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 575.98px) {

    .menu-destacado-categorias {
        justify-content: flex-start;
    }

    .menu-producto-imagen {
        height: 310px;
    }

}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1400px) {

    .menu-producto-imagen {
        height: 300px;
    }

}
/* =========================================================
   MARCA FOOTER
   Reemplazo del logo con fondo blanco
   ========================================================= */

.footer-marca-link {
    display: inline-block;
    margin-bottom: 1.6rem;
}


.footer-marca {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}


/* ICONO */

.footer-marca-icono {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--mb-verde-claro);

    border:
        1px solid
        rgba(143, 175, 165, 0.32);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    font-size: 1.45rem;

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}


.footer-marca-link:hover
.footer-marca-icono {
    transform: translateY(-2px);

    background:
        rgba(143, 175, 165, 0.14);

    border-color:
        rgba(143, 175, 165, 0.55);
}


/* TEXTO */

.footer-marca-texto {
    display: flex;
    flex-direction: column;
}


/* MARÍA BONITA */

.footer-marca-texto strong {
    display: block;

    margin: 0;

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

    font-family:
        var(--mb-font-title);

    font-size: 2.15rem;
    font-weight: var(--mb-font-semibold);

    line-height: 1;

    letter-spacing: -0.01em;
}


/* SUBTÍTULO */

.footer-marca-texto small {
    display: block;

    margin-top: .45rem;

    color:
        rgba(245, 240, 230, 0.62);

    font-family:
        var(--mb-font-body);

    font-size: .62rem;
    font-weight: var(--mb-font-medium);

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    .footer-marca-icono {
        width: 52px;
        height: 52px;

        font-size: 1.25rem;
    }


    .footer-marca-texto strong {
        font-size: 1.9rem;
    }


    .footer-marca-texto small {
        font-size: .56rem;
        letter-spacing: .09em;
    }

}