/* =========================================================
   MARÍA BONITA
   VARIABLES GLOBALES
   assets/css/variables.css
   ========================================================= */

:root {

    /* =====================================================
       PALETA PRINCIPAL
       ===================================================== */

    --mb-verde: #8FAFA5;

    --mb-verde-claro: #AFC5BE;

    --mb-verde-suave: #DDE8E4;

    --mb-verde-oscuro: #6E9187;


    --mb-arena: #D5C9AD;

    --mb-arena-claro: #E8E0CD;

    --mb-arena-suave: #F3EEE3;


    --mb-olivo: #72725B;

    --mb-olivo-claro: #93937B;

    --mb-olivo-oscuro: #575744;


    --mb-terracota: #874B3B;

    --mb-terracota-claro: #A66552;

    --mb-terracota-oscuro: #68382D;


    --mb-azul: #283B50;

    --mb-azul-claro: #40566E;

    --mb-azul-oscuro: #1E2D3D;


    /* =====================================================
       TONOS NEUTROS
       ===================================================== */

    --mb-marfil: #F5F0E6;

    --mb-marfil-claro: #FBF9F4;

    --mb-blanco: #FFFFFF;


    --mb-cafe: #604B3B;

    --mb-cafe-claro: #7B6554;

    --mb-cafe-oscuro: #46362B;


    --mb-gris: #78736D;

    --mb-gris-claro: #D9D4CC;

    --mb-gris-suave: #F0EDE8;

    --mb-negro: #24211F;


    /* =====================================================
       COLORES FUNCIONALES
       ===================================================== */

    --mb-success: #718C69;

    --mb-warning: #C89A58;

    --mb-danger: #A6544C;

    --mb-info: #6F91A2;


    /* =====================================================
       WHATSAPP
       ===================================================== */

    --mb-whatsapp: #25D366;

    --mb-whatsapp-hover: #1EBE5A;


    /* =====================================================
       FONDOS
       ===================================================== */

    --mb-bg-body: var(--mb-marfil-claro);

    --mb-bg-section: var(--mb-marfil);

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

    --mb-bg-dark: var(--mb-azul);

    --mb-bg-accent: var(--mb-verde);


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

    --mb-text-primary: var(--mb-cafe-oscuro);

    --mb-text-secondary: var(--mb-cafe-claro);

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

    --mb-text-light: var(--mb-marfil-claro);

    --mb-text-white: var(--mb-blanco);


    /* =====================================================
       TIPOGRAFÍAS
       ===================================================== */

    --mb-font-title:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --mb-font-body:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;


    /* =====================================================
       PESOS TIPOGRÁFICOS
       ===================================================== */

    --mb-font-light: 300;

    --mb-font-regular: 400;

    --mb-font-medium: 500;

    --mb-font-semibold: 600;

    --mb-font-bold: 700;


    /* =====================================================
       TAMAÑOS DE TEXTO
       ===================================================== */

    --mb-font-xs: 0.75rem;

    --mb-font-sm: 0.875rem;

    --mb-font-base: 1rem;

    --mb-font-md: 1.125rem;

    --mb-font-lg: 1.25rem;

    --mb-font-xl: 1.5rem;

    --mb-font-2xl: 2rem;

    --mb-font-3xl: 2.75rem;

    --mb-font-4xl: 3.5rem;

    --mb-font-hero: 5rem;


    /* =====================================================
       ALTURAS DE LÍNEA
       ===================================================== */

    --mb-line-sm: 1.2;

    --mb-line-base: 1.6;

    --mb-line-lg: 1.8;


    /* =====================================================
       LETTER SPACING
       ===================================================== */

    --mb-letter-sm: 0.03em;

    --mb-letter-md: 0.08em;

    --mb-letter-lg: 0.15em;


    /* =====================================================
       BORDES
       ===================================================== */

    --mb-border-color: rgba(
        96,
        75,
        59,
        0.18
    );

    --mb-border-light: rgba(
        255,
        255,
        255,
        0.25
    );

    --mb-border-thin: 1px;

    --mb-border-medium: 2px;


    /* =====================================================
       RADIOS
       ===================================================== */

    --mb-radius-xs: 4px;

    --mb-radius-sm: 8px;

    --mb-radius-md: 14px;

    --mb-radius-lg: 22px;

    --mb-radius-xl: 32px;

    --mb-radius-pill: 999px;

    --mb-radius-circle: 50%;


    /* =====================================================
       SOMBRAS
       ===================================================== */

    --mb-shadow-xs:
        0 2px 8px
        rgba(40, 59, 80, 0.06);

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

    --mb-shadow-md:
        0 12px 30px
        rgba(40, 59, 80, 0.12);

    --mb-shadow-lg:
        0 20px 50px
        rgba(40, 59, 80, 0.16);

    --mb-shadow-navbar:
        0 8px 28px
        rgba(40, 59, 80, 0.10);


    /* =====================================================
       ESPACIADOS
       ===================================================== */

    --mb-space-xs: 0.5rem;

    --mb-space-sm: 1rem;

    --mb-space-md: 1.5rem;

    --mb-space-lg: 2rem;

    --mb-space-xl: 3rem;

    --mb-space-2xl: 4rem;

    --mb-space-3xl: 6rem;


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

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

    --mb-section-padding-sm:
        4rem 0;


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

    --mb-navbar-height: 96px;

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

    --mb-navbar-bg:
        rgba(
            251,
            249,
            244,
            0.96
        );

    --mb-navbar-bg-transparent:
        rgba(
            251,
            249,
            244,
            0
        );


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

    --mb-hero-min-height: 100vh;

    --mb-hero-overlay:
        rgba(
            28,
            30,
            28,
            0.42
        );


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

    --mb-btn-height: 48px;

    --mb-btn-padding:
        0.8rem 1.7rem;

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


    /* =====================================================
       TRANSICIONES
       ===================================================== */

    --mb-transition-fast:
        0.2s ease;

    --mb-transition:
        0.3s ease;

    --mb-transition-slow:
        0.5s ease;


    /* =====================================================
       Z-INDEX
       ===================================================== */

    --mb-z-base: 1;

    --mb-z-dropdown: 1000;

    --mb-z-navbar: 1030;

    --mb-z-overlay: 1040;

    --mb-z-modal: 1050;

    --mb-z-whatsapp: 1060;


    /* =====================================================
       CONTENEDORES
       ===================================================== */

    --mb-container-max: 1320px;


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

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

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

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


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

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


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

    --mb-input-height: 50px;

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

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

    --mb-input-focus:
        var(--mb-verde);


    /* =====================================================
       OPACIDADES
       ===================================================== */

    --mb-opacity-soft: 0.75;

    --mb-opacity-muted: 0.55;

    --mb-opacity-disabled: 0.4;
}


/* =========================================================
   TEMA BASE DEL DOCUMENTO
   ========================================================= */

html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

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

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

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

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

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

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

}


::-moz-selection {

    background:
        var(--mb-verde);

    color:
        var(--mb-blanco);

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background:
        var(--mb-marfil);

}


::-webkit-scrollbar-thumb {

    background:
        var(--mb-verde);

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

    border:
        2px solid
        var(--mb-marfil);

}


::-webkit-scrollbar-thumb:hover {

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

}