: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: 47.68px;
	--t5: 33.12px;
	--t4: 23px;
	--t3: 19.2px;
	--t2: 16px;
	--t1: 12.50px;
	
	--c5: #050505;
	--c4: #5d5d5d;
	--c3: #eaebeb;
	--c2: #f7f8f8;
	--c1: #FFFFFF;
	
	--linkColor: #8156DD;
	--linkDecoration: underline;
	
	--cOverlayColor: rgba(0,0,0,0.05);
	--kaOverlayColor: rgba(0,0,0,0.2);
	
	--ka: #9C71F7;
	--kac: #FFFFFF;
	
	--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.4);
	
	--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: 700;
	--font-weight-h2: 600;
	--font-weight-h3: 600;
	--font-weight-h4: 500;
	--font-weight-h5: 500;
	--font-weight-bold: 500;
	--font-weight-body: 400;
	
	--font-lineheight-p: 21px;
	--font-lineheight-h1: normal;
	--font-lineheight-h2: normal;
	--font-lineheight-h3: normal;
	--font-lineheight-h4: normal;
	
	--space-h1: 24px;
	--space-h2: 24px;
	--space-h3: 16px;
	--space-h4: 16px;
	--space-h5: 16px;
	--space-p: 16px;
	--space-ul: 0 0 16px 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: 112px;
	--header-bg: var(--ka); 
	--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: 64px; 
	--header-logo-left: 64px;
	--header-logo-top: 50%;
	--header-logo-transform: translate(0,-50%);
	--header-ico-color: var(--ka);
	--header-ico-bg: var(--kb);
	--header-ico-b: 0px 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-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: auto;
	--header-burger-right: 16px !important;
	--header-burger-top: 12px !important;
	--header-burger-size: 40px;
	--header-menu-size: var(--t2);
	--header-menu-bg: transparent;
	--header-menu-color: var(--kc);
	--header-menu-weight: var(--font-weight-bold);
	--header-menu-left: 240px;
	--header-menu-right: auto;
	--header-menu-top: 50%;
	--header-menu-transform: translate(0,-50%);
	--header-menu-gap: 24px;
	--header-menu-padding: 24px 16px; /* 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: 16px;
	--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: 0px;
	--bloques-padding: 0;
	--bloques-contenedor-padding: 64px 64px 0 64px;
	
	--bx-padding: 64px;
	--bxv-padding: 0 64px;
	--bxh-padding: 64px 0;
	--bx-gap: 32px;
	--bx-gap-h: 16px;
	
	--bx-br: var(--br3);
	--bx-br-h: var(--br2);
	--bx-b: 1px solid var(--c3);
	--bx-bb: 1px solid var(--c3);
	--bx-padding-inline: 12px 12px;
	--bx-lista-bg: var(--c1);
	--bx-key-color: var(--ka);
	--bx-key-weight: var(--font-weight-bold);
	--bx-key-size: var(--t3);
	
	--cSlides: var(--c1);
	--slide-img-br: var(--br3);
	--slide-contenido-inset: auto 40% 64px 64px;
	--slide-contenido-color: var(--cSlides);
	--slide-overlay-bg: linear-gradient(180deg, rgba(40,52,110,0) 48%, rgba(40,52,110,0.8) 100%);
	--slide-hero-contenido-maxwidth: 56%;
	--slide-hero-contenido-minwidth: 88%; /* movil */
	--slide-hero-contenido-color: var(--cSlides);
	--slide-hero-contenido-inset: 50% auto auto 50%;
	--slide-hero-contenido-inset-transform: translate(-50%, -50%);
	--slide-hero-overlay-bg: linear-gradient(180deg, rgba(40,52,110,0) 48%, rgba(40,52,110,0.8) 100%);
	--slide-hero-ratio: 2/3; /* movil */
	
	--carousel-contenido-inset: auto 24% 32px 32px;
	--carousel-full-margin: 0 -64px;
	--carousel-full-padding: 0 0 0 32px;
	--carousel-full-arrow-left: 24px;
	--carousel-full-paginacion: -32px;
	--carousel-full-offset: 80px;
	
	--cBanners: var(--c1);
	--banner-img-br: var(--br3);
	--banner-contenido-inset: auto 40% 64px 64px;
	--banner-contenido-color: var(--cBanners);
	--banner-contenido-out: 24px;
	--banner-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	--banner-hero-contenido-maxwidth: 64%;
	--banner-hero-contenido-minwidth: 88%; /* movil */
	--banner-hero-contenido-color: var(--cBanners);
	--banner-hero-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	
	--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: 9/16; /* movil */
	
	--galeria-gap: 32px;
	--galeria-columns: repeat(auto-fit, minmax( 240px, 1fr ));
	
	--narrow-width: 72%;
	--narrow-doble-width: 48%;
	
	--form-label-color: var(--ka);
	--form-label-weight: var(--font-weight-bold);
	--form-input-color: var(--ka);
	--form-input-caret: var(--ka);
	--form-input-bg: var(--kc);
	--form-input-b: 1px solid var(--kc);
	--form-input-br: var(--br2);
	--form-input-indent: 12px;
	--form-input-height: 44px;
	--form-focus: var(--kb);
	--form-btn-color: var(--kac);
	--form-btn-bg: var(--ka);
	--form-btn-weight: var(--font-weight-bold);
	--form-btn-padding-inline: 12px 24px;
	--form-btn-br: 40px;
	--form-btn-disabled-color: var(--c4);
	--form-btn-disabled-bg: var(--c3);
	
	--btn-gap: 16px;
	--btn-height: 40px; /* dep */
	--btn-padding-inline: 0 24px;
	--btn-br: var(--br7);
	--btn-color: var(--kbc);
	--btn-bg: var(--kb);
	--btn-weight: var(--font-weight-bold);
	--btn-on-color: var(--kbc);
	--btn-on-bg: var(--kb);
	
	--btn-m-height: 40px;
	--btn-m-padding-inline: 0 16px;
	--btn-m-br: var(--br5);
	--btn-m-color: var(--c5);
	--btn-m-bg: var(--c3);
	--btn-m-weight: var(--font-weight-bold);
	--btn-m-on-color: var(--kac);
	--btn-m-on-bg: var(--ka);
	
	--modal-overlay-padding: 64px 32px 32px 32px;
	--modal-width: 480px;
	--modal-padding: 24px;
	--modal-br: var(--br2);
	
	--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);
	
	--bg2-bg: var(--ka);
	--bg2-t1-color: var(--kac);
	--bg2-t2-color: var(--kac);
	--bg2-p-color: var(--kac);
	
	--bg3-bg: var(--c2);
	--bg3-t1-color: var(--c5);
	--bg3-t2-color: var(--c5);
	--bg3-p-color: var(--c4);
	
	--cards-columns: 1fr 1fr 1fr 1fr;
	--cards-nr-column: 1 / 4;
	--cards-ratio: 4/5;
	
	--editorial-columns: 1fr 1fr 1fr 1fr;
	--editorial-nr-column: 1 / 4;
	--editorial-ratio: 16/9;
	
	--ul-mda-columns: 72px 1fr auto;
	--ul-mda-ratio: 1/1;
	
	--ul-md-columns: 72px 1fr;
	--ul-md-ratio: 4/5;
	
	--bx-md-columns: 1fr 1fr;
	--bx-md-ratio: 4/5;
	
	--blog-ratio: 16/9;
	--blog-wall-columns: 1fr 1fr 1fr 1fr;
	--blog-wall-nr-column: 1 / 4;
	--blog-mdh-columns: 136px 1fr;
	--blog-mdhv-columns: 1fr 1fr 1fr 1fr;
	--blog-slide-contenido-inset: auto 24% 32px 32px;
	--blog-slide-contenido-color: var(--cSlides);
	--blog-slide-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	
	--blog-carousel-ratio: 4/5;
	--blog-carousel-contenido-color: var(--cBanners);
	--blog-carousel-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.8) 100%);
	
	--bx-carousel-margin: 0 -64px;
	--bx-carousel-padding: 0 64px;
	--bx-carousel-gap: 16px;
	--bx-carousel-item-width: 28%;
	--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-overlay-bg: linear-gradient(180deg, rgba(40,52,110,0.2) 8%, rgba(40,52,110,1) 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;
	
	--bx-infinito-margin: 0;
	--bx-infinito-width: calc(100vw - 128px);
	--bx-infinito-items-padding: 24px 48px;
	--bx-infinito-items-width: 160px;
	--bx-infinito-items-height: 48px;
	--bx-infinito-mask-width: 240px;
	--bx-infinito-mask-in: rgba(255,255,255,1);
	--bx-infinito-mask-out: rgba(255,255,255,0);
	
	--popover-cards-detail-columns: 240px 1fr;
	--popover-cards-detail-overlay-bg: linear-gradient(180deg, rgba(40,52,110,0) 24%, rgba(40,52,110,0.6) 100%);
	
}

@media (max-width: 800px) {
	
	:root {
		
		--br1: 4px;
		--br2: 8px;
		--br3: 8px;
		
		--pb1: 16px;
		--pb2: 24px;
		--pb3: 32px;
		
		--t6: 31.1px;
		--t5: 25.92px;
		--t4: 21.6px;
		--t3: 18px;
		--t2: 15px;
		--t1: 12.50px;
		
		--header-height: 80px;
		--header-bg: var(--ka); 
		--header-sticky-bg: transparent; 
		--header-sticky-link-color: var(--c1);
		--header-logo-height: 40px; 
		--header-logo-left: 16px;
		--header-logo-top: 50%;
		--header-logo-transform: translate(0,-50%);
		--header-burger-left: auto !important;
		--header-burger-right: 16px;
		--header-burger-top: 20px !important;
		--header-burger-size: 40px;
		--header-menu-bg: var(--kc);
		--header-menu-color: var(--kcc);
		--header-menu-size: var(--t3);
		--header-menu-right: 64px;
		--header-menu-gap: 24px;
		--header-menu-link-height: 40px;
		--header-submenu-link-height: 32px;
		
		--slide-contenido-inset: auto 24% 24px 16px;
		
		--banner-contenido-inset: auto 24% 24px 16px;
		
		--carousel-contenido-inset: auto 24% 32px 32px;
		--carousel-full-margin: 0 -16px;
		--carousel-full-padding: 0 0 0 16px;
		--carousel-full-arrow-left: 24px;
		--carousel-full-paginacion: -24px;
		--carousel-full-offset: 24px;
		
		--footer-padding: 24px 16px;
		--footer-gap: 16px;
		--footer-links-gap: 16px;
		
		--footer-social-gap: 4px;
		--footer-social-size: 32px;
		--footer-social-bg-size: 24px;
		
		--bx-padding: 24px 16px;
		--bxv-padding: 0 16px;
		--bxh-padding: 24px 0;
		--bx-gap: 24px;
		--bx-gap-h: 16px;
		
		--bloques-contenedor-padding: 24px 16px;
		
		--modal-overlay-padding: 64px 8px 8px 8px;
		--modal-width: 100%;
		--modal-padding: 16px;
		--modal-br: var(--br2);
		
		--narrow-width: 100%;
		--narrow-doble-width: 100%;
		
		--cards-columns: 1fr;
		--cards-nr-column: 1 / 2;
		
		--ul-mda-columns: 72px 1fr;
		
		--bx-md-columns: 1fr;
		
		--blog-slide-contenido-inset: auto 24% 16px 16px;
		
		--bx-carousel-margin: 0 -16px;
		--bx-carousel-padding: 0 16px;
		--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-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;
		
		--bx-infinito-margin: 0 -16px;
		--bx-infinito-width: calc(100vw);
		--bx-infinito-items-padding: 16px 24px;
		--bx-infinito-items-width: 120px;
		--bx-infinito-items-height: 32px;
		--bx-infinito-mask-width: 80px;
		--bx-infinito-mask-in: rgba(255,255,255,1);
		--bx-infinito-mask-out: rgba(255,255,255,0);
		
		--popover-cards-detail-columns: 1fr;
		
	}
	
}