/* General styles and config */
:root {
    /* Font */

    /* Background */
    --background-light: #ddd;
    --background-dark:#333;
    /* Brand */
    --color-brand: #f7f100;
    --color-brand-sec: #CDC900;
    --color-brand-thi: #8A8700;
    --color-success: green;
    --color-error: red;
    --color-warning: orange;

    --color-border: #333;
    --color-dark: #222;    
    --color-light: #eee;
    
    /* Config */
    --box-shadow: -1px 0px 14px 0px rgba(32, 32, 32, 0.596);
    
    /* By perceent */
    --height-m: 70%;
    --height-xl: 100%;
    --width-m: 70%;
    --width-xl: 100%;

    /* By viewport*/
    --height-vh-xl: 100vh;
    --width-vw-xl: 100vw;
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding :0px;
    scroll-behavior: smooth;
}

a, li {
    text-decoration: none;
    list-style: none;    
    color: inherit;
    background-color: inherit;
}

/* Block main */
main {
    background-image:url('https://fronterasistemas.com/tamoni/public/media/marmol-bg-1.jpg') ;
    background-attachment: fixed; 
  background-size: cover;

}
main { height: 100%; width: 100%; top: var(--header-height)}
main { display: flex; flex-direction: column; }


/* Section display */



/* Generic divs */

/* Displays */
.div,
.div--blank,
.div--column,
.div--column-around,
.div--column-between,
.div--column-reverse,
.div--row,
.div--row-around,
.div--row-between,
.div--row-reverse,
.div--start,
.div--center,
.div--wrap,

/* Sizes */

/* By percent */
.div--height-m,
.div--height-xl,
.div--width-m,
.div--width-xl,
.div-max-size,

/* By viewport */
.div--height-vh-m,
.div--height-vh-xl,
.div--width-vh-m,
.div--width-vh-xl { display: flex; width: 100% }

/* Generic div displays */

/* Displays */
.div--blank { padding: 5px; width: 100%; }

.div--column { flex-direction: column; }
.div--column-between { flex-direction: column; justify-content: space-between;  }
.div--column-around { flex-direction: column; justify-content: space-around; }
.div--column-reverse { flex-direction: column-reverse;  }

.div--row { flex-direction: row; }
.div--row-between { flex-direction: row; justify-content: space-between; }
.div--row-around { flex-direction: row; justify-content: space-around; }
.div--row-reverse { flex-direction: row-reverse; }

.div--start { align-items: start; justify-content: start;}
.div--center { align-items: center; justify-content: center; }
.div--wrap { flex-wrap: wrap; }

/* Sizes */

/* By percent */
.div--height-m { height: var(--height-vh-m) }
.div--height-xl { height: var(--height-xl) }
.div--width-m { min-width: var(--width-m) }
.div--width-xl { min-width: var(--width-xl) }
.div--max-size { height: var(--height-xl); width: var(--width-xl); }

/* By viewport */
.div--height-vh-m { height: var(--height-vh-m) }
.div--height-vh-xl { height: calc(var(--height-vh-xl) - var(--header-height)) }
.div--width-vw-m { width: var(--width-vw-m) }
.div--width-vw-xl { width: var(--width-vw-xl) }

/* Main components */

/* Action wrappper and buttons */

.action-wrapper,
.action-wrapper--between,
.action-wrapper--transparent,
.action-wrapper--wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
}

.action-wrapper--between { justify-content: space-between; }
.action-wrapper--transparent {
    background-color: transparent;
    color: inherit;
}
.action-wrapper--wrap { flex-wrap: wrap; }

.action-wrapper__btn,
.action-wrapper__btn--checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.action-wrapper__btn--checkout {
    border-radius: 5px !important;
}

.action-wrapper__btn-auto {
    width: auto;
}