/* ______________________________________________ Variáveis de widget ______________________________________________ */


/* ______ Spacing ______ */
:root {
    --s-0: 0rem;              /* 0 */
    --s-1: 0.25rem;           /* 4px */
    --s-2: 0.5rem;            /* 8px */
    --s-3: 0.75rem;           /* 12px */
    --s-4: 1rem;              /* 16px */
    --s-5: 1.25rem;           /* 20px */
    --s-6: 1.5rem;            /* 24px */
    --s-7: 2rem;              /* 32px */
    --s-8: 2.5rem;            /* 40px */
    --s-9: 3rem;              /* 48px */
    --s-10: 3.5rem;           /* 56px */
    --s-11: 4rem;             /* 64px */
    --s-12: 5rem;             /* 80px */
    --s-13: 6rem;             /* 96px */
    --s-14: 7rem;             /* 112px */
    --s-15: 8rem;             /* 128px */
    --s-16: 9rem;             /* 144px */
    --s-17: 10rem;            /* 160px */
    --s-18: 11rem;            /* 176px */
    --s-19: 12rem;            /* 192px */
    --s-20: 12.5rem;          /* 200px */
	--d-hide:none;	
}

@media screen and (max-width: 800px) { /* Tablet - aproximadamente 75% */
    :root {
        --s-0: 0rem;          /* 0px */
        --s-1: 0.25rem;       /* 4px */
        --s-2: 0.5rem;        /* 8px */
        --s-3: 0.75rem;       /* 12px */
        --s-4: 0.75rem;       /* 12px */
        --s-5: 1rem;          /* 16px */
        --s-6: 1.25rem;       /* 20px */
        --s-7: 1.5rem;        /* 24px */
        --s-8: 1.75rem;       /* 28px */
        --s-9: 2rem;          /* 32px */
        --s-10: 2.5rem;       /* 40px */
        --s-11: 2.75rem;      /* 44px */
        --s-12: 3.5rem;       /* 56px */
        --s-13: 4rem;         /* 64px */
        --s-14: 4.75rem;      /* 76px */
        --s-15: 5.5rem;       /* 88px */
        --s-16: 6rem;         /* 96px */
        --s-17: 6.75rem;      /* 108px */
        --s-18: 7.5rem;       /* 120px */
        --s-19: 8rem;         /* 128px */
        --s-20: 8.75rem;      /* 140px */
    }
}

@media screen and (max-width: 700px) { /* Mobile - aproximadamente 50% */
    :root {
        --s-0: 0rem;          /* 0px */
        --s-1: 0.25rem;       /* 4px */
        --s-2: 0.5rem;        /* 8px */
        --s-3: 0.5rem;        /* 8px */
        --s-4: 0.5rem;        /* 8px */
        --s-5: 0.75rem;       /* 12px */
        --s-6: 1rem;          /* 16px */
        --s-7: 1rem;          /* 16px */
        --s-8: 1.25rem;       /* 20px */
        --s-9: 1.5rem;        /* 24px */
        --s-10: 1.75rem;      /* 28px */
        --s-11: 1.75rem;      /* 28px */
        --s-12: 2rem;         /* 32px */
        --s-13: 2.25rem;      /* 36px */
        --s-14: 2.5rem;       /* 40px */
        --s-15: 2.5rem;       /* 40px */
        --s-16: 2.75rem;      /* 44px */
        --s-17: 3rem;         /* 48px */
        --s-18: 3.25rem;      /* 52px */
        --s-19: 3.5rem;       /* 56px */
        --s-20: 3.75rem;      /* 60px */
    }
}

/* ______ Imagem ______ */

:root {
	/* image-radius */
	--image-radius-0: 0rem;
	--image-radius-1: 0.5rem;
	--image-radius-2: 1.25rem;
	--image-radius-3: 2.5rem;
	--image-radius-4: 100%;

	--aspect-ratio-0: 1/1;
	--aspect-ratio-1: 16/9;
	--aspect-ratio-2: 9/16;
	--aspect-ratio-3: 4/3;
	--aspect-ratio-4: 3/4;

	/* widget-radius */
	--widget-radius-0: 0rem;
	--widget-radius-1: 0.5rem;
	--widget-radius-2: 1.25rem;
	--widget-radius-3: 2.5rem;
	--widget-radius-4: 3rem;

	/* btn-radius */
	--btn-radius-0: 0rem;
	--btn-radius-1: 0.5rem;
	--btn-radius-2: 1.25rem;
	--btn-radius-3: 50rem;

	/* image-fit */
	--image-fit-0: cover;
	--image-fit-1: contain;

	/* image-align */
	--image-align-0: flex-start;
	--image-align-1: center;
	--image-align-2: flex-end;

	/* object-align */
	--object-align-0: flex-start;
	--object-align-1: center;
	--object-align-2: flex-end;

	/* text-align */
	--text-align-0: left;
	--text-align-1: center;
	--text-align-2: right;
	--text-align-3: justify;

	/* new-tab */
	--new-tab-0: 0;
	--new-tab-1: 1;

	/* title-family text-family */
	--font-family-0: "Inter", sans-serif !important;
	--font-family-1: "Gentium Plus", serif !important;
	--font-family-2: "Dancing Script", cursive !important;
	--font-family-3: 'Poppins', sans-serif !important;

	/* background-expand */
	/* --background-expand-0: bg-contained;
	--background-expand-1: bg-expanded; */

	/* shadow */
	--shadow-0: none;
	--shadow-1: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
	--shadow-2:  0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
	--shadow-3: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* text-shadow */
	--text-shadow-0: none;
	--text-shadow-1:  0.05em 0.05em 0.2em rgba(0, 0, 0, 0.6);
	--text-shadow-2:  -1px 0 rgba(0, 0, 0, 0.4), 0 1px rgba(0, 0, 0, 0.4), 1px 0 rgba(0, 0, 0, 0.4), 0 -1px rgba(0, 0, 0, 0.4);

	/* icon-size */
	--icon-size-0: 24px;
	--icon-size-1: 32px;
	--icon-size-2: 40px;

	/* icon-radius */
	--icon-radius-0: 0;
	--icon-radius-1: var(--5);
	--icon-radius-2: 500%;

	/* font-weight */
	--font-weight-0: 300;
	--font-weight-1: 400;
	--font-weight-2: 500;
	--font-weight-3: 600;
	--font-weight-4: 700;


	/*flex-direction*/
	--flex-direction-0: row;
	--flex-direction-1: column;

	/*row-direction*/
	--row-direction-0: row;
	--row-direction-1: row-reverse;
}





/* _______________________________ Tamanho de texto _______________________________ */
:root {
    --fs-0: 0.75rem;
    --fs-1: 1rem;
    --fs-2: 1.25rem;
    --fs-3: 1.5rem;
    --fs-4: 1.75rem;
    --fs-5: 2rem;
    --fs-6: 2.25rem;
    --fs-7: 2.5rem;
    --fs-8: 2.75rem;
    --fs-9: 3rem;
    --fs-10: 3.25rem;
    --fs-11: 3.5rem;
    --fs-12: 4rem;
    --fs-13: 4.5rem;
    --fs-14: 5rem;
    --fs-15: 5.5rem;
    --fs-16: 6rem;
    --fs-17: 6.5rem;
    --fs-18: 6.75rem;
    --fs-19: 6.87rem;
    --fs-20: 7rem;
}

@media (max-width: 1024px) {
    :root {
        --fs-0: 0.7rem;
        --fs-1: 0.92rem;
        --fs-2: 1.05rem;
        --fs-3: 1.2rem;
        --fs-4: 1.35rem;
        --fs-5: 1.5rem;
        --fs-6: 1.7rem;
        --fs-7: 1.9rem;
        --fs-8: 2.1rem;
        --fs-9: 2.3rem;
        --fs-10: 2.5rem;
        --fs-11: 2.7rem;
        --fs-12: 3rem;
        --fs-13: 3.3rem;
        --fs-14: 3.6rem;
        --fs-15: 3.9rem;
        --fs-16: 4.2rem;
        --fs-17: 4.5rem;
        --fs-18: 4.7rem;
        --fs-19: 4.9rem;
        --fs-20: 5rem;
    }
}

@media (max-width: 700px) {
    :root {
        --fs-0: 0.7rem;
        --fs-1: 0.85rem;
        --fs-2: 1rem;
        --fs-3: 1.1rem;
        --fs-4: 1.25rem;
        --fs-5: 1.4rem;
        --fs-6: 1.6rem;
        --fs-7: 1.75rem;
        --fs-8: 1.9rem;
        --fs-9: 2.05rem;
        --fs-10: 2.2rem;
        --fs-11: 2.35rem;
        --fs-12: 2.5rem;
        --fs-13: 2.65rem;
        --fs-14: 2.8rem;
        --fs-15: 2.95rem;
        --fs-16: 3.1rem;
        --fs-17: 3.18rem;
        --fs-18: 3.22rem;
        --fs-19: 3.24rem;
        --fs-20: 3.25rem;
    }
}

@media (min-width: 2000px) {
    :root {
        --fs-0: 1.25rem;    /* 20px */
        --fs-1: 1.6rem;     /* 25.6px */
        --fs-2: 2rem;       /* 32px */
        --fs-3: 2.5rem;     /* 40px */
        --fs-4: 3rem;       /* 48px */
        --fs-5: 3.5rem;     /* 56px */
        --fs-6: 4rem;       /* 64px */
        --fs-7: 4.5rem;     /* 72px */
        --fs-8: 5rem;       /* 80px */
        --fs-9: 5.5rem;     /* 88px */
        --fs-10: 6rem;      /* 96px */
        --fs-11: 6.5rem;    /* 104px */
        --fs-12: 7rem;      /* 112px */
        --fs-13: 8rem;      /* 128px */
        --fs-14: 9rem;      /* 144px */
        --fs-15: 10rem;     /* 160px */
        --fs-16: 10.5rem;   /* 168px */
        --fs-17: 11rem;     /* 176px */
        --fs-18: 11.5rem;   /* 184px */
        --fs-19: 11.75rem;  /* 188px */
        --fs-20: 12rem;     /* 192px */
    }
}

/* _______________________________ Tamanho de texto _______________________________ */

:root {
	--text-size-0: var(--fs-0);
	--text-size-1: var(--fs-1);
	--text-size-2: var(--fs-2);
	--text-size-3: var(--fs-3);
	--text-size-4: var(--fs-4);
	--text-size-5: var(--fs-5);
	--text-size-6: var(--fs-6);
	--text-size-7: var(--fs-7);
	--text-size-8: var(--fs-8);
	--text-size-9: var(--fs-9);
	--text-size-10: var(--fs-10);
	--text-size-11: var(--fs-11);
	--text-size-12: var(--fs-12);
	--text-size-13: var(--fs-13);
	--text-size-14: var(--fs-14);
	--text-size-15: var(--fs-15);
	--text-size-16: var(--fs-16);
	--text-size-17: var(--fs-17);
	--text-size-18: var(--fs-18);
	--text-size-19: var(--fs-19);
	--text-size-20: var(--fs-20);
}


/* variáveis dos botões */
	:root{
		--w-btn-border-radius:  var(--2);
		--w-btn-font-weight: var(--semibold);
	}

	button:focus-visible{
		outline-color: var(--blue-500);
		outline-style: solid;
		outline-width: 2px;
		outline-offset: 4px;
		border-radius: 2px;
	}


/* base do botão */
	.w_btn{
		/* padding-block: var(--3); */
		padding-block: 1em;
		padding-inline: 2em;
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--w-btn-border-radius);
		/* font-weight: var(--w-btn-font-weight);
		font-size: var(--w-btn-font-size); */
		transition: all ease-in 100ms;
		user-select: none;
		text-align: center;
		background-color: var(--gray-100);
		color: var(--gray-700);
		line-height: 1;
		text-decoration: none;
	}

	.w_btn:hover{
		transform: translateY(-1px) scale(1.02);
		box-shadow: var(--shadow-sm);
	}

	.w_btn:active{
		transform: scale(0.98);
		box-shadow: var(--inner-shadow);
	}


	.w_btn:focus-visible{
		/* outline-color: var(--blue-500); */
		outline-color: currentColor;
		outline-style: solid;
		outline-width: 2px;
		outline-offset: 4px;
		border-radius: 2px;
	}

	/* btn disabled */

	.w_btn:disabled{
		background-color: var(--gray-300);
		color: var(--gray-500);
	}

	.w_btn:disabled:hover{
		transform: translateY(0) scale(1);
		box-shadow: none;
		cursor: not-allowed;
	}

	/* Btn com icone */

	.w_btn-icon{
		width: max-content !important;
		display: flex;
		align-items: center;
		gap: var(--2);
		font-size: inherit;
	}

	.w_b-icon{
		height: 1.15em;
		display: flex;
		width: fit-content;
	}

	.w_b-icon > *{
		height: 100%;
		width: 100%;
	}


/* ___________________________________________ Cores dos botões ___________________________________________ */

	/* btn azul */
	.w_btn-blue{
		color: white !important;
		background-color: var(--blue-600);
	}

	.w_btn-blue:active{
		color: white !important;
		background-color: var(--blue-700);
	}

	/* btn verde */
	.w_btn-green{
		color: white !important;
		background-color: var(--green-600);
	}

	.w_btn-green:active{
		color: white !important;
		background-color: var(--green-700);
	}

	/* btn vermelho */
	.w_btn-red{
		color: white !important;
		background-color: var(--red-600);
	}

	.w_btn-red:active{
		color: white !important;
		background-color: var(--red-700);
	}


	/* btn amarelo */
	.w_btn-yellow{
		color: white !important;
		background-color: var(--yellow-600);
	}

	.w_btn-yellow:active{
		color: white !important;
		background-color: var(--yellow-700);
	}


	/* btn cinza */
	.w_btn-gray{
		color: white !important;
		background-color: var(--gray-600);
	}

	.w_btn-gray:active{
		color: white !important;
		background-color: var(--gray-700);
	}

	/* btn pink */
	.w_btn-pink{
		color: white !important;
		background-color: var(--pink-600);
	}

	.w_btn-pink:active{
		color: white !important;
		background-color: var(--pink-700);
	}

	/* btn purple */
	.w_btn-purple{
		color: white !important;
		background-color: var(--purple-600);
	}

	.w_btn-purple:active{
		color: white !important;
		background-color: var(--purple-700);
	}

	.w_hide-mobile{
		display: block;
	}

	.w_hide-desktop{
		display: none;
	}

	.w_hide{
		display: none;
	}

@media (max-width: 800px) {
	.w_hide-mobile{
		display: none;
	}

	.w_hide-desktop{
		display: block;
	}

	.w_hide{
		display: none;
	}

}