/********** VARIABLES **********/
/*Se anexa esta seccion para declarar variables de uso comun, esto nos permitira usar dichas variables dentro del CSS y no solo al usar clases en el HTML */
/*Nota: Se iran agregando mas variables conforme se puedan ir requiriendo dentro del CSS. Ejemplo de uso: si se deseo usar un color desde el CSS solo se llamara a la variable global ejemplo var(--primary-color) y eso hara referencia dicho color declarada en esa variable local con valor hexadecimal var(--primary-color)*/
:root {
    /* Se establecen los colores como variables para poder usarlos dentro del CSS */
    --indigo-dark: #304D6D;
    --blue: #82A0BC;
    --indigo-light: #545E75;
    --blue-dark: #63ADF2;
    --blue-light: #A7CCED;
    --blue-ultra-light: #F0F6FC;
    --gray: #818181;
    --white: #FFFFFF;
    --orange: #DF7027;
    --red-oii: #980321;
    --monserrat-medium: 'montserrat-medium';
    --monserrat-semibold: 'montserrat-semi-bold';
    --monserrat-bold: 'montserrat-bold';
    --monserrat-extra-bold: 'montserrat-extra-bold';
    --monserrat-medium-italic: 'montserrat-medium-italic';
    --oswald-heavy: 'oswald-heavy';
    /*Elements*/
    --primary-color: var(--indigo-dark);
    --secundary-color: var(--blue);
    --tertiary-color: var(--indigo-light);
    --color-0: var(--gray);
    --color-1: var(--white);
    --color-2: var(--blue-dark);
    --color-3: var(--blue-light);
    --color-4: var(--blue-ultra-light);
    --bg-color: var(--white);
    --bg-color-1: var(--blue-light);
    --bg-color-2: var(--blue-ultra-light);
    --bg-voucher: var(--indigo-dark);
    --bg-voucher-gradiant: var(--indigo-light);
    --btn-primary: var(--indigo-dark);
    --btn-primary-hoover: var(--blue);
    --btn-primary-text: var(--white);
    --lnk-primary: var(--indigo-dark);
    --lnk-primary-hoover: var(--blue-dark);
    --bg-modal: var(--blue-ultra-light);
    --primary-font: var(--monserrat-medium);
    --secundary-font: var(--monserrat-semibold);
    --tertiary-font: var(--monserrat-bold);
    --font-0: var(--monserrat-extra-bold);
    --font-1: var(--monserrat-medium-italic);
    --font-2: var(--oswald-heavy);
    --line-color: var(--orange);
    --text-link: var(--blue-dark);
    --btn-primary-oii: var(--red-oii);
    --btn-primary-hoover-oii: var(--white);
    --bg-footer: var(--indigo-dark);
    --bg-footer-text: var(--color-1);
    --bg-footer-text-hover: var(--color-3);
    --bg-room-service: var(--color-4);
    --bg-room-service-gradiant: var(--color-1);
    --bg-header: var(--secundary-color);
    --bg-header-text: var(--color-1);
    --account-link: var(--color-2);
    --account-link-hoover: var(--secundary-color);
}

.vsi {
    display: block;
}

.wl {
    display: none;
}