:root{
	/* # COLORS */
    /* ## Based in ionic variables */
	--box-color: #59cb9a;

	--main-color: #2a6951; 
	--main-color-sec: #016950;
	--main-color-rgb: 42,105,81;
	--main-color-contrast: #ffffff;
	--main-color-contrast-rgb: 255,255,255;
	--main-color-darker:  #13382b;
	--main-color-shade: #115038;
	--main-color-tint: #44836b;
	--main-color-lighter: #5d9c84;
			

	--secondary-color: #6b7a43;
	--secondary-color-rgb: 107,122,67;
	--secondary-color-contrast: #ffffff;
	--secondary-color-contrast-rgb: 255,255,255;
	--secondary-color-darker: #384710;
	--secondary-color-shade: #52612a;
	--secondary-color-tint: #85945d;
	--secondary-color-lighter: #9ead76;
			

	--accent-color: #1d4bba;
	--accent-color-rgb: 35,91,221;
	--accent-color-contrast: #ffffff;
	--accent-color-contrast-rgb: 255,255,255;
	--accent-color-darker: #0028aa;
	--accent-color-shade: #255bdc;
	--accent-color-tint: #3d75f7;
	--accent-color-lighter: #568eff;

	--success-color: #2dd55b;
	--success-color-rgb: 45,213,91;
	--success-color-contrast: #161616;
	--success-color-contrast-rgb: 0,0,0;
	--success-color-darker: #24aa49;
	--success-color-shade: #28bb50;
	--success-color-tint: #42d96b;
	--success-color-lighter: #5de38a;

	--warning-color: #ffc409;
	--warning-color-rgb: 255,196,9;
	--warning-color-contrast: #000000;
	--warning-color-contrast-rgb: 0,0,0;
	--warning-color-darker: #cc9d07;
	--warning-color-shade: #e0ac08;
	--warning-color-tint: #ffca22;
	--warning-color-lighter: #ffd144;

	--danger-color: #c5000f;
	--danger-color-rgb: 197,0,15;
	--danger-color-contrast: #ffffff;
	--danger-color-contrast-rgb: 255,255,255;
	--danger-color-darker: #9f000c;
	--danger-color-shade: #ad000d;
	--danger-color-tint: #cb1a27;
	--danger-color-lighter: #f2463b; 

	--light-color: #f8f8f8;
	--light-color-rgb: 246,248,252;
	--light-color-contrast: #161616;
	--light-color-contrast-rgb: 0,0,0;
	--light-color-darker: rgb(170, 170, 170);
	--light-color-shade: #dddada;
	--light-color-tint: #f5f5f5;
	--light-color-lighter: #ffffff;

	--medium-color: #5f5f5f;
	--medium-color-rgb: 95,95,95;
	--medium-color-contrast: #ffffff;
	--medium-color-contrast-rgb: 255,255,255;
	--medium-color-darker: #4b4b4b;
	--medium-color-shade: #545454;
	--medium-color-tint: #6f6f6f;
	--medium-color-lighter: #7d7d7d;

	--dark-color: #161616;
	--dark-color-rgb: 47,47,47;
	--dark-color-contrast: #f6f8fc;
	--dark-color-contrast-rgb: 246, 248, 252;
	--dark-color-darker: #262626;
	--dark-color-shade: #292929;
	--dark-color-tint: #444444;
	--dark-color-lighter: #595959;
    /* # END COLORS */    	
	/* OPACITIY VALUE FOR rgbA(x,x,x, --rgba-opacity) */
	--rgba-opacitiy-f:1;
	--rgba-opacitiy-mid-f:.75;
	--rgba-opacitiy-mid:.5;
	--rgba-opacitiy-mid-t:.25;
	--rgba-opacitiy-t:0;


	/* Gradient data */
	--main-gradient:120deg,var(--main-color) -1%, var(--lighted-main-color) 20%, var(--dark-main-color) 89%;


	/* FONT SIZES */
	--text-xxl:2.4rem;
	--text-xl:1.85rem;
	--text-lg:1.5rem;
	--text-md:1.25rem;
	--text-base-important:1.1rem;
	--text-base:1rem;
	--text-s:.875rem;
	--text-xs:.75rem;

	/* Layout CONFIGS */
		/* ## slider Bullets */
		--bullet-width:10px;
		--marginBetweenSections:4rem;

		--loader-color:var(--main-color);
		
		/* ## Header */
		/* ## Header WRAP */
		--header-display:fixed;   
		--header-total-height:calc(var(--header-main-content-height) + var(--header-top-line-height) + var(--header-bot-line-height) ) ;/* calculo total del hegith del header */
		/* ## Header main content */
		--header-main-content-display:block;    
		--header-main-content-height:85px;   
		--header-main-content-base-color:var(--dark-color);
		--header-main-content-text-color:var(--dark-color-contrast);
		/* ## Header top line */
		--header-top-display:none;    
		--header-top-line-height:0px;   
		--header-top-base-color:var(--accent-color);
		--header-top-text-color:var(--accent-color-contrast);
		/* ## Header bot menu */
		--header-bot-display:none;    
		--header-bot-line-height:40px;   
		--header-bot-base-color:var(--accent-color);
		--header-bot-text-color:var(--accent-color-contrast);
			/* # Cart lateral */
			--cart-width:480px;
			--cart-base-color:var(--light-color);
			--cart-text-color:var(--light-color-contrast);
			/* ## Cart - header */
			--cart-header-height:var(--space-10);
			/* ## Cart - lineas & contenido */
			--cart-line-height:5rem;
			--cart-content-scrollbar-bgcolor:rgba(0,0,0,0);
			--cart-content-scrollbar-color:var(--accent-color);
			--cart-content-scrollbar-width:var(--space-1);
			--cart-content-scrollbar-radius:var(--radius-s);
			--cart-line-title-size:var(--text-s);
			--cart-line-title-weight:400;
			--cart-line-price-size:var(--text-s);
			--cart-line-price-weight:600;
			--cart-line-delete-size:var(--space-1);
			/* ## Cart - Bottom actions */
			--cart-bot-line-bgcolor:var(--light-color-lighter);;
			--cart-bot-line-shadow:10px -3px 11px 7px var(--light-color-shade);
			--cart-bot-line-iva-display:none;
			--cart-bot-line-iva-font-size:var(--text-base);
			--cart-bot-line-subtotal-display:none;
			--cart-bot-line-subtotal-font-size:var(--text-base);
			--cart-bot-line-descount-display:flex;
			--cart-bot-line-descount-font-size:var(--text-base);
			--cart-bot-line-total-display:flex;
			--cart-bot-line-total-font-size:var(--text-base);
	
	
			/* Favorites panel config */
			--fav-cart-select-list-display:flex;
			--fav-drawer-width:300px;
			--fav-drawer-height:350px; /*  Use in mobile */
		


		/* ## Footer */
		--footer-height: 60px;
		--footer-color-base:var(--main-color);
		--footer-color-content-container:var(--light-color);
		--footer-color-menu-title:var(--light-color);
		--footer-color-menu-item:var(--light-color);
		--footer-color-text:var(--light-color);
		--footer-color-icons:var(var(--light-color));
		--footer-size-icons:1.5rem;

		/* ## Footer BOTTOM - copyright  & fullglass icons  */
		--footer-bottom-height:60px;
		--footer-bottom-color-base:var(--dark-main-color);


	/* ## Radius */
	--radius-xl:1rem;
    --radius-l:.75rem;
	--radius-base:.5rem;
	--radius-s:.25rem;
	--radius-xs:.12rem;
	--radius-full:99999999px;

	/* space */
	--space-base:1rem;
	--space-s:calc(var(--space-base) * calc(1 / 4));
	--space-1:calc(var(--space-base) * calc(1 / 2));
	--space-2:calc(var(--space-base) * calc(2 / 2));
	--space-3:calc(var(--space-base) * calc(3 / 2));
	--space-4:calc(var(--space-base) * calc(4 / 2));
	--space-5:calc(var(--space-base) * calc(5 / 2));
	--space-6:calc(var(--space-base) * calc(6 / 2));
	--space-7:calc(var(--space-base) * calc(7 / 2));
	--space-8:calc(var(--space-base) * calc(8 / 2));
	--space-9:calc(var(--space-base) * calc(9 / 2));
	--space-10:calc(var(--space-base) * calc(10 / 2));
	--space-11:calc(var(--space-base) * calc(11 / 2));
	--space-12:calc(var(--space-base) * calc(12 / 2));

	/* Shadows - is on variable for use onconfigs or some */
	--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* NORMALIZATION */
    /* Esto pisa las varaibles que se usan en la mayoria de los proyectos */
	--color-company: var(--main-color);
	--color-company2:var(--secondary-color);
	--color-shadow:rgb(0,0,0,0.2);

	--line-height-block:3rem;

	/* Animation duration */
	--duration-base: 1s;
	--duration-1: calc(var(--duration-base) / 10);   /* 0.1s */
	--duration-2: calc(var(--duration-base) / 4);    /* 0.25s */
	--duration-3: calc(var(--duration-base) / 2);    /* 0.5s */
	--duration-4: calc(var(--duration-base) * 0.75); /* 0.75s */
	--duration-5: var(--duration-base);              /* 1s */
	--duration-6: calc(var(--duration-base) * 1.5);  /* 1.5s */
	--duration-7: calc(var(--duration-base) * 1.75); /* 1.75s */
	--duration-8: calc(var(--duration-base) * 2);    /* 2s */
	--duration-9: calc(var(--duration-base) * 2.5);  /* 2.5s */
	--duration-10: calc(var(--duration-base) * 5);   /* 5s */


		/* -------------------   */
		/* MEDIA QUERIES (used ?)*/
		/* -------------------   */
		--mq-xl:1280px;  
		--mq-lg:1024px;  
		--mq-md:768px;  
		--mq-sm:640px;  
		--mq-xs:480px;  
		--mq-xxs:340px; 

		/* Base button configuration */
		--def-button-fill: var(--main-color);
		--def-button-rounded: var(--radius-full);
		--def-button-scheme: var(--main-color-contrast);
		--def-button-text: var(--main-color-contrast);
		--def-button-size: min-content;
		--def-button-block: max-content;
		--def-button-height: var(--line-height-block); 
		--def-button-shadow: var(--shadow-md); 

		/* HOVER */
		--def-button-hover-fill: var(--main-color-tint);
		--def-button-hover-text: var(--main-color-contrast);
		--color-hover: var(--main-color-shade);

		/* ACTIVE */
		--def-button-active-fill: var(--main-color);
		--def-button-active-text: var(--main-color-contrast);


	/* Z INDEX */
	--header-z-index:2500;
		
}

        /* LEGACY */
/* 	--color-dark-grey: #58585a;
	--color-grey: #7c7c80;  medium 
	--color-lighted-grey: rgb(167, 167, 169);
	--color-light-grey: #e5e5e5;
	--smooth-black:#3b3b3b; */

    	/* ## MAIN */
/* 	--main-color:#f24423;
	--dark-main-color:#e54121;
	--darker-main-color: #72131f;
	--lighted-main-color:#feefea;
 */

	/* ## SECONDARY */
/* 	--secondary-color:#4a00f6;
	--dark-secondary-color:#3001a0		;
 */
	/* ## ACCENT */
/* 	--accent-color:#4a00f6;
	--dark-accent-color:#3001a0;
	--darker-accent-color:#1f0066; */

	/* ## GENERIC */
/* 	--error-color:#ED1C24;
	--footer-icons:var(--dark-main-color);
	--color-aqua:rgb(66, 152, 233);
	--success-color:#16d404;
 */