:root {

	touch-action: pan-x pan-y;
	height: 100%;
	-webkit-tap-highlight-color: transparent;
	
	--px1: 4px;
	--px2: 8px;
	--px3: 16px;
	--px4: 24px;
	--px5: 32px;
	--px6: 40px;
	--px7: 48px;
	--px8: 56px;
	--px9: 64px;
	
	--br1: 4px;
	--br2: 8px;
	--br3: 16px;
	--br4: 24px;
	--br5: 32px;
	--br6: 40px;
	--br7: 48px;
	
	--t6: 2.2rem;	/* h1 */
	--t5: 1.8rem;	/* h2 */
	--t4: 1.5rem;	/* h3 */
	--t3: 1.2rem; 	/* h4 */
	--t2: 1rem; 	/* p */
	--t1: 0.75rem;	/* s */
	--tbase: 16px;
	
	--c5: #050505;
	--c4: #5d5d5d;
	--c3: #eaebeb;
	--c2: #f7f8f8;
	--c1: #FFFFFF;
	
	--cOverlayColor: rgba(0,0,0,0.05);
	--kaOverlayColor: rgba(0,0,0,0.2);
	
	--ka: #9C71F7;
	--kac: #FFFFFF;
	
	--kb: #f7f8f8;
	--kbc: #050505;
	
	--linkColor: var(--ka);
	--linkDecoration: underline;
	
	--cSlides: var(--c1);
	--cBanners: var(--c1);
	
	--filter-co: invert(0%) sepia(0%) saturate(6755%) hue-rotate(153deg) brightness(75%) contrast(96%);
	--filter-ba: invert(100%) sepia(0%) saturate(7500%) hue-rotate(296deg) brightness(109%) contrast(102%);
	
	--shadow-1: rgba(50, 50, 93, 0.25) 0px 1px 5px -2px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
	--overlay: rgba(0,0,0,0.8);
	
	--font-family: Roboto;
	--font-family-alt: Montserrat;
	
	--font-color-h1: var(--c5);
	--font-color-h2: var(--c5);
	--font-color-h3: var(--c5);
	--font-color-h4: var(--c5);
	
	--font-weight-h1: 600;
	--font-weight-h2: 600;
	--font-weight-h3: 500;
	--font-weight-h4: 500;
	--font-weight-h5: 400;
	--font-weight-bold: 500;
	--font-weight-body: 400;
	
	--font-lineheight-h1: 2.4rem;
	--font-lineheight-h2: 2rem;
	--font-lineheight-h3: 1.8rem;
	--font-lineheight-h4: 1.6rem;
	--font-lineheight-p: 1.4rem;
	
	--space-h1: 28px;
	--space-h2: 28px;
	--space-h3: 28px;
	--space-h4: 28px;
	--space-h5: 8px;
	--space-p: 28px;
	--space-ul: 0 0 24px 40px;
	--space-li: 0 0 4px 0px;
	
	--padding-h5: 2px 8px;
	
	--spd: var(--px3);
	--spdh: var(--px2);
	--spdm: var(--px1);
	--dspd: var(--px5);
	--spu: var(--px3);
	--spuh: var(--px2);
	--dspu: var(--px5);
	
	--header-height: 96px;
	--header-bg: var(--c1); 
	--header-sticky-bg: transparent; 
	--header-sticky-link-color: var(--c1);
	--header-sticky-ico-bg: rgba(0,0,0,0.4);
	--header-sticky-ico-color: var(--c1);
	--header-sticky-ico-b: 1px solid var(--c1);
	
	--header-logo-height: 48px; 
	--header-logo-left: 64px;
	--header-logo-top: 50%;
	--header-logo-transform: translate(0,-50%);
	--header-ico-color: var(--c5);
	--header-ico-bg: var(--c1);
	--header-ico-b: 1px solid var(--c3);
	--header-ico-br: 40px;
	--header-ico-size: 20px;
	--header-ico-badge-bg: var(--c2);
	--header-ico-badge-inset: 4px;
	--header-ico-badge-size: 32px;
	
	--header-btn-bg: var(--ka);
	--header-btn-color: var(--kac);
	--header-btn-b: 0px solid var(--ka);
	--header-btn-br: 40px;
	--header-btn-padding: 0 16px;
	
	--header-badge-size: 20px;
	--header-badge-postition: -4px;
	--header-badge-bg: var(--ka);
	--header-badge-color: var(--kac);
	--header-badge-text-size: var(--t1);
	
	--header-burger-left: 24px;
	--header-burger-right: auto;
	--header-burger-top: 50%;
	--header-burger-transform: translate(0,-50%);
	--header-burger-size: 40px;
	
	--header-menu-size: var(--t2);
	--header-menu-bg: transparent;
	--header-menu-color: var(--c5);
	--header-menu-weight: var(--font-weight-bold);
	--header-menu-left: auto;
	--header-menu-right: 64px;
	--header-menu-top: 50%;
	--header-menu-transform: translate(0,-50%);
	--header-menu-gap: 24px;
	--header-menu-padding: 24px; /* Movil */
	--header-menu-link-height: 40px;
	--header-submenu-bg: var(--kc);
	--header-submenu-color: var(--kcc);
	--header-submenu-br: var(--br2);
	--header-submenu-link-height: 32px;
	--header-filter: var(--filter-co);
	
	--header-nav-account-left: auto;
	--header-nav-account-right: 24px;
	--header-nav-account-top: 50%;
	--header-nav-account-transform: translate(0,-50%);
	--header-nav-account-gap: 8px;
	
	--footer-padding: 64px 64px 64px 64px;
	--footer-gap: 24px;
	--footer-links-gap: 16px;
	--footer-social-gap: 8px;
	--footer-social-size: 32px;
	--footer-social-bg: var(--ka);
	--footer-social-bg-size: 24px;
	--footer-social-filter: var(--filter-ba);
	
	--bloques-gap: 96px;
	--bloques-padding: 0 64px;
	--bloques-contenedor-padding: 0;
	
	--bx-bloques-wide-margin: 0 -64px;
	--bx-bloques-wide-padding: 0;
	
	--bx-bloques-full-margin: -96px -64px 0 -64px;
	--bx-bloques-full-padding: 0;
	
	--bx-padding: 64px;
	--bx-gap: 32px;
	--bx-gap-h: 16px;
	--bx-gap-m: 8px;
	
	--bx-br: var(--br3);
	--bx-br-h: var(--br2);
	--bx-b: 1px solid var(--c3);
	--bx-bb: 1px solid var(--c3);
	--bx-padding-inline: 14px 16px;
	--bx-msg-padding-inline: 14px 16px 14px 48px;
	--bx-lista-bg: var(--c1);
	--bx-key-color: var(--c5);
	--bx-key-weight: var(--font-weight-bold);
	--bx-key-size: var(--t3);
	
	--video-br: var(--br3);
	--video-contenido-inset: auto 40% 32px 32px;
	--video-contenido-color: var(--cBanners);
	--video-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	--video-hero-contenido-maxwidth: 64%;
	--video-hero-contenido-minwidth: 88%; /* movil */
	--video-hero-contenido-color: var(--cBanners);
	--video-hero-contenido-inset: 50% auto auto 50%;
	--video-hero-contenido-inset-transform: translate(-50%, -50%);
	--video-hero-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	--video-hero-ratio: 16/9; /* movil */
	
	--galeria-gap: 32px;
	--galeria-columns: repeat(auto-fit, minmax( 240px, 1fr ));
	
	--narrow-width: 72%;
	--narrow-doble-width: 48%;
	
	--form-label-color: var(--c5);
	--form-label-weight: var(--font-weight-bold);
	--form-input-color: var(--c4);
	--form-input-caret: var(--ka);
	--form-input-bg: var(--c1);
	--form-input-b: 1px solid var(--c3);
	--form-input-br: var(--br2);
	--form-input-indent: 12px;
	--form-input-height: 40px;
	--form-focus: var(--ka);
	--form-btn-color: var(--kac);
	--form-btn-bg: var(--ka);
	--form-btn-weight: var(--font-weight-bold);
	--form-btn-height: 40px;
	--form-btn-padding-inline: 0 24px;
	--form-btn-br: 40px;
	--form-btn-disabled-color: var(--c4);
	--form-btn-disabled-bg: var(--c3);
	
	--btn-gap: 16px;
	--btn-height: 40px;
	--btn-padding-inline: 0 24px;
	--btn-br: 40px;
	--btn-color: var(--kc);
	--btn-bg: var(--kcc);
	--btn-weight: var(--font-weight-bold);
	--btn-on-color: var(--kac);
	--btn-on-bg: var(--ka);
	
	--btn-m-height: 40px;
	--btn-m-padding-inline: 0 24px;
	--btn-m-br: var(--br2);
	--btn-m-color: var(--c5);
	--btn-m-bg: var(--c3);
	--btn-m-weight: var(--font-weight-bold);
	--btn-m-on-color: var(--c1);
	--btn-m-on-bg: var(--c5);
	--btn-m-off-color: var(--c4);
	--btn-m-off-bg: var(--c3);
	
	--modal-overlay-padding: 64px 32px 32px 32px;
	--modal-width: 480px;
	--modal-padding: 24px;
	--modal-br: var(--br3);
	
	--bullet-fts-size: 24px;
	--bullet-fts-padding: 4px 0px 4px 8px;
	--bullet-fts-margin: -3px 0px 0 -34px;
	--bullet-1-fts-svg: url("/cbpn-media/bullet1.svg");
	--bullet-1-fts-svg-filter: var(--filter-co);
	--bullet-2-fts-svg: url("/cbpn-media/bullet1.svg");
	--bullet-2-fts-svg-filter: var(--filter-co);
	
	--bg1-bg: var(--c2);
	--bg1-t1-color: var(--c5);
	--bg1-t2-color: var(--c5);
	--bg1-p-color: var(--c4);
	--bg1-a-color: var(--c4);
	
	--bg2-bg: var(--ka);
	--bg2-t1-color: var(--kac);
	--bg2-t2-color: var(--kac);
	--bg2-p-color: var(--kac);
	--bg2-a-color: var(--kac);
	
	--bg3-bg: var(--c2);
	--bg3-t1-color: var(--c5);
	--bg3-t2-color: var(--c5);
	--bg3-p-color: var(--c4);
	--bg3-a-color: var(--c4);
	
	--bx-banner-img-br: var(--br3);
	--bx-banner-full-img-br: 0;
	--bx-banner-contenido-inset: auto 40% 32px 64px;
	--bx-banner-full-contenido-inset: auto 40% 32px 64px;
	--bx-banner-hero-contenido-inset: 50% auto auto 50%;
	--bx-banner-hero-contenido-transform: translate(-50%, -50%);
	--bx-banner-hero-bottom-contenido-inset: auto 24% 64px 24%;
	--bx-banner-hero-bottom-contenido-transform: translate(0%, 0%);
	--bx-banner-hero-top-contenido-inset: 64px 24% auto 24%;
	--bx-banner-hero-top-contenido-transform: translate(0%, 0%);
	--bx-banner-contenido-color: var(--cBanners);
	--bx-banner-contenido-out: 24px 0 0 0;
	--bx-banner-overlay: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.4) 100%);
	
	--bx-slide-img-br: var(--br3);
	--bx-slide-full-img-br: 0;
	--bx-slide-contenido-inset: auto 40% 32px 32px;
	--bx-slide-contenido-color: var(--cBanners);
	--bx-slide-full-contenido-inset: auto 40% 64px 64px;
	--bx-slide-overlay: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	--bx-slide-hero-contenido-inset: 50% auto auto 50%;
	--bx-slide-hero-contenido-transform: translate(-50%, -50%);
	--bx-slide-hero-bottom-contenido-inset: auto 24% 64px 24%;
	--bx-slide-hero-bottom-contenido-transform: translate(0%, 0%);
	--bx-slide-hero-top-contenido-inset: 64px 24% auto 24%;
	--bx-slide-hero-top-contenido-transform: translate(0%, 0%);
	
	/*--bx-slide-hero-contenido-maxwidth: 56%;
	--bx-slide-hero-contenido-inset: 50% auto auto 50%;
	--bx-slide-hero-contenido-inset-transform: translate(-50%, -50%);
	--bx-slide-hero-ratio: 2/3; /* movil */
	
	--bx-carousel-margin: 0 -64px;
	--bx-carousel-padding: 0 64px;
	--bx-carousel-gap: 16px;
	--bx-carousel-item-width: 33%;
	--bx-carousel-item-ratio: 2/3;
	--bx-carousel-item-radius: var(--br3);
	--bx-carousel-detalle-inset: auto 24% 32px 32px;
	--bx-carousel-detalle-color: var(--cBanners);
	--bx-carousel-detalle-out-margin: 24px 0 0 0;
	--bx-carousel-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(0,0,0,0.4) 100%);
	--bx-carousel-nav-bg: var(--c1);
	--bx-carousel-nav-filter: var(--filter-co);
	--bx-carousel-nav-size: 40px;
	--bx-carousel-nav-offset-left: 40px;
	--bx-carousel-nav-offset-right: 40px;
	
	--blog-ratio: 16/9;
	--blog-mdh-columns: 136px 1fr;
	--blog-mdhv-columns: 1fr 1fr 1fr 1fr;
	
	--cards-columns: 1fr 1fr 1fr 1fr;
	--cards-nr-column: 1 / 4;
	--cards-ratio: 3/2;
	
	--bx-md-columns: 1fr 1fr;
	--bx-md-ratio: 3/2;
	
	
}



@media (max-width: 800px) {
	
	:root {
		
		--br1: 4px;
		--br2: 8px;
		--br3: 24px;
		
		--pb1: 16px;
		--pb2: 24px;
		--pb3: 32px;
		
		--t6: 1.8rem;
		--t5: 1.6rem;
		--t4: 1.4rem;
		--t3: 1.2rem;
		--t2: 1rem;
		--t1: 0.75rem;
		--tbase: 16px;
		
		--font-lineheight-h1: 2.4rem;
		--font-lineheight-h2: 2rem;
		--font-lineheight-h3: 1.8rem;
		--font-lineheight-h4: 1.6rem;
		--font-lineheight-p: 1.4rem;
		
		--header-height: 64px;
		--header-bg: var(--c1); 
		--header-sticky-bg: transparent; 
		--header-sticky-link-color: var(--c1);
		--header-logo-height: 40px; 
		--header-logo-left: 50%;
		--header-logo-top: 50%;
		--header-logo-transform: translate(-50%,-50%);
		
		--header-menu-bg: var(--c1);
		--header-menu-size: var(--t3);
		--header-menu-right: 64px;
		--header-menu-gap: 24px;
		--header-menu-link-height: 40px;
		--header-submenu-link-height: 32px;
		--header-submenu-color: var(--c5);
				
		--footer-padding: 24px 16px;
		--footer-gap: 16px;
		--footer-links-gap: 16px;
		
		--footer-social-gap: 4px;
		--footer-social-size: 32px;
		--footer-social-bg-size: 24px;
		
		--bloques-gap: 32px;
		--bloques-padding: 0 24px;
		--bloques-contenedor-padding: 0;
		
		--bx-bloques-wide-margin: 0 -24px;
		--bx-bloques-wide-padding: 0;
		
		--bx-bloques-full-margin: -32px -24px 0 -24px;
		--bx-bloques-full-padding: 0;
		
		--bx-padding: 24px;
		--bx-gap: 24px;
		--bx-gap-h: 12px;
		--bx-gap-m: 8px;
		
		--modal-overlay-padding: 64px 8px 8px 8px;
		--modal-width: 100%;
		--modal-padding: 24px;
		--modal-br: var(--br3);
		
		--narrow-width: 100%;
		--narrow-doble-width: 100%;
		
		--bx-slide-hero-contenido-inset: 50% auto auto 50%;
		--bx-slide-hero-contenido-transform: translate(-50%, -50%);
		--bx-slide-hero-bottom-contenido-inset: auto 24px 24px 24px;
		--bx-slide-hero-bottom-contenido-transform: translate(0%, 0%);
		--bx-slide-hero-top-contenido-inset: 24px 24px auto 24px;
		--bx-slide-hero-top-contenido-transform: translate(0%, 0%);
		
		--bx-banner-img-br: var(--br3);
		--bx-banner-full-img-br: 0;
		--bx-banner-contenido-inset: auto 24% 16px 24px;
		--bx-banner-full-contenido-inset: auto 24% 16px 24px;
		--bx-banner-hero-contenido-inset: 50% auto auto 50%;
		--bx-banner-hero-contenido-transform: translate(-50%, -50%);
		--bx-banner-hero-bottom-contenido-inset: auto 24px 24px 24px;
		--bx-banner-hero-bottom-contenido-transform: translate(0%, 0%);
		--bx-banner-hero-top-contenido-inset: 24px 24px auto 24px;
		--bx-banner-hero-top-contenido-transform: translate(0%, 0%);
		--bx-banner-contenido-color: var(--cBanners);
		--bx-banner-contenido-out: 24px 0 0 0;
		--bx-banner-overlay: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.4) 100%);
		
		--bx-carousel-margin: 0 -24px;
		--bx-carousel-padding: 0 24px;
		--bx-carousel-gap: 8px;
		--bx-carousel-item-width: 80%;
		--bx-carousel-item-ratio: 2/3;
		--bx-carousel-item-radius: var(--br2);
		--bx-carousel-detalle-inset: auto 16% 16px 16px;
		--bx-carousel-detalle-color: var(--cBanners);
		--bx-carousel-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
		--bx-carousel-nav-bg: var(--c1);
		--bx-carousel-nav-filter: var(--filter-co);
		--bx-carousel-nav-size: 32px;
		--bx-carousel-nav-offset-left: 16px;
		--bx-carousel-nav-offset-right: 16px;
		
		--blog-mdhv-columns: 1fr 1fr;

		--cards-columns: 1fr;
		--cards-nr-column: 1 / 2;
		--cards-ratio: 3/2;

		--bx-md-columns: 1fr;
		--bx-md-ratio: 3/2;
		
	}
	
}