@charset "UTF-8";
/* CSS Document */

/* -------------------------- preloader --------------------------  */

#preloader {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 999999999999999999;
	display: flex;
}

#preloader:before,
#preloader:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	/* --------------------- Preloader Background Color --------------------  */
	background-color: rgba(118,12,99,1);
	/* ---------------------------------------------------------------------  */
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

#preloader:after {
	left: auto;
	right: 0;
}

#preloader .loader_line {
	margin: auto;
	width: 1px;
	height: 250px;
	position: relative;
	overflow: hidden;
	-webkit-transition: all 0.8s ease 0s;
	-o-transition: all 0.8s ease 0s;
	transition: all 0.8s ease 0s;
}

.loader_line:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	/* -------------------------- Preloader Color --------------------------  */
	background-color: #fbfbfb;
	/* ---------------------------------------------------------------------  */
	-webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
	-o-animation: lineheight 1000ms ease-in-out 0s forwards;
	animation: lineheight 1000ms ease-in-out 0s forwards;
}

.loader_line:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #999999;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-animation: lineround 1200ms linear 0s infinite;
	-o-animation: lineround 1200ms linear 0s infinite;
	animation: lineround 1200ms linear 0s infinite;
	animation-delay: 2000ms;
}

/* -------------------------- MODAL CONTAINER --------------------------  */

.modal-pacocaetano {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  display: none;
  width: 100%;
  height: 100%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  border-radius: 0rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.modal-pacocaetano-content {
  padding-top: 10%;
}

.modal {
	max-width: 800px !important;
}

.modal-container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  display: none;
  width: 100%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  border-radius: 0rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark .modal-container {
  --tw-bg-opacity: 1;
  background-color: rgb(50 50 50 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
  .modal-container {
    width: 83.333333%;
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .modal-container {
    width: 850px;
  }
}

/* -------------------------- Principal - image-background --------------------------  */

*, ::before, ::after {
	
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	
	
}

::-webkit-backdrop {
	
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	
}

::backdrop {
	
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	
}	
	


/* -------------------------- Fondo degradado --------------------------  */

.bg-homeBg-pacocaetano {
  --color-blanco: #ffffff;
  --color-grisclaro: #e4e4e4;
  background: var(--degradado-3);
}

.dark .dark\:bg-homeBg-pacocaetano {
 
  background: linear-gradient(180deg, #565656 30%, #1a1a1a 100%); /* Fondo color negro */
}

/* -------------------------- Fondo degradado animado --------------------------  */

.bg-animado {
  background-size: 300% 300%;
  background-position: center , center;
  background-image: linear-gradient(
        -45deg, 
	  var(--color-rosa-1) 0%,
	  var(--color-rosa-3) 25%,
	  var(--color-rosa-5) 50%,
	  var(--color-rosa-2) 100%
  );  
  animation: AnimateBG 10s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:25% 50%}
  50%{background-position:100% 50%}
  25%{background-position:0% 25%}
}

@keyframes AnimateBG2 { 
  0%{background-position:0% 100%}
}

@keyframes pacocaetano {
	0%{background-position:25% 100%}
  	50%{background-position:100% 50%}
  	25%{background-position:0% 25%}
	
}

/* ---------------------------- VARIABLES DE FONDOS ----------------------------  */
:root {
	--bg1: url('../images/background.png');
	--bg2: linear-gradient( -45deg, var(--color-rosa-1) 0%, var(--color-celeste) 25%, var(--color-rosa-5) 50%, var(--color-magenta) 100%);  
	--cloud-1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/cloud.png);
	--cloud-2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/cloud.png);
	--sky: linear-gradient(
    to bottom,
    #80D8FF,
    #40C4FF
    );
    --skyDark: linear-gradient(
    to bottom,
    #333,
    #111
    );
	--degradado-lime: radial-gradient(circle at 50% -20.71%, #fff358 0, #fff64c 7.14%, #fff841 14.29%, #fbf939 21.43%, #e0f934 28.57%, #c2f832 35.71%, #a1f535 42.86%, #79f23c 50%, #3fee46 57.14%, #00ea54 64.29%, #00e663 71.43%, #00e375 78.57%, #00df88 85.71%, #00dc9c 92.86%, #00d9b1 100%);
	
	--degradado-grey: linear-gradient(to bottom, #232526, #414345);

}




/* -------------------------- FIN VARIABLES DE FONDOS --------------------------  */

:root {
	
/* ----------------------------- Colores ------------------------------  */
	

}

.bg-animado-pacocaetano {
  background-size: 400% , 400%;
    
  background-position: center , center;
  
  background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); /* ROSA CLARO - MODO DÍA */
	
  animation: AnimateBG-2 20s ease infinite;
}

.dark .dark\:bg-animado-pacocaetano {
  background-size: 180% 380%;
  background-position: center , center;
  background-image: linear-gradient(334deg, rgba(115,18,81,1) , rgba(28,28,28,1) , #f7137e); /* MORADO */
  animation: AnimateBG 10s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes AnimateBG-2 { 
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

	
	

/* -------------------------- Imagen de Fondo --------------------------  */

.bg-homeBg {
    background-image: url('../images/background.png'), var(--cloud-1);
    background-size: cover; 
  
}

.bg-close-light {	
  background-image: url('../css/closelight.jpg');
  background-color: white;
}

/* ---------------------------- Logo Interno ----------------------------  */

.digitalVcard{
	
	margin-left: 0.75rem;
	display: flex;
	background-image: url('../images/logo.svg');
	width: 200px;
	height: 26px;
	margin-top: 10px;
	background-repeat: no-repeat;
    background-position: bottom left;
	position: relative;
	background-size: contain;
}

/* -------------------------- Botón Sol y Luna --------------------------  */


.btn-sol-luna {
  display: flex;
  height: 40px;
  width: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-color: fff;
  border-width: 0px;

  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------- Logotipo ----------------------------------  */

:root {
	
	
	/* -------------------------- transparentes ---------------------------  */
  	--color: #01010180; 
	--color-Negro-10: #1d1d1b10; /*	Negro Transparencia 10%	*/
	--color-Negro-30: #1d1d1b30; /*	Negro Transparencia 30%	*/
	--color-Negro-50: #1d1d1b50; /*	Negro Transparencia 50%	*/
	--color-Negro-70: #1d1d1b70; /*	Negro Transparencia 70%	*/
	--color-Negro-90: #1d1d1b90; /*	Negro Transparencia 90%	*/
	--color-Negro-99: #1d1d1b99; /*	Negro Transparencia 99%	*/
	
	--color-Blanco-10: #ffffff10; /*	Blanco Transparencia 10%	*/
	--color-Blanco-20: #ffffff20; /*	Blanco Transparencia 20%	*/
	--color-Blanco-30: #ffffff30; /*	Blanco Transparencia 30%	*/
	--color-Blanco-40: #ffffff40; /*	Blanco Transparencia 40%	*/
	--color-Blanco-50: #ffffff50; /*	Blanco Transparencia 50%	*/
	--color-Blanco-60: #ffffff60; /*	Blanco Transparencia 60%	*/
	--color-Blanco-70: #ffffff70; /*	Blanco Transparencia 70%	*/
	--color-Blanco-80: #ffffff80; /*	Blanco Transparencia 80%	*/
	--color-Blanco-90: #ffffff90; /*	Blanco Transparencia 90%	*/
	--color-Blanco-99: #ffffff; /*	Blanco Transparencia 99%	*/
	
	/* -------------------------- Grises Masas ---------------------------  */
	
	--color-Negro-1: #ededed; /*	Negro Transparencia 10%	*/
	--color-Negro-2: #c6c6c6; /*	Negro Transparencia 30%	*/
	--color-Negro-3: #9d9d9c; /*	Negro Transparencia 50%	*/
	--color-Negro-4: #706f6f; /*	Negro Transparencia 70%	*/
	--color-Negro-5: #3c3c3b; /*	Negro Transparencia 99%	*/
	--color-Negro-6: #1c301d; /*	Negro Transparencia 99%	*/
	--color-Negro-7: #000000; /*	Negro Transparencia 99%	*/
	
	/* ----------------------------- Colores ------------------------------  */
	

	
	--degradado-negro-a-transparente: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1.7) 50%, rgba(0,0,0,0.0) 100%);
	--degradado-blanco-a-transparente: linear-gradient(0deg, rgba(255,255,255,0.1) 100%, rgba(255,255,255,1.0) 50%, rgba(255,255,255,0) 20%);
	
	/* --------------------------- Degradados -----------------------------  */
	
	--degradado-1: linear-gradient(180deg, #ff4379 0%, #ff4379 100%);
	--degradado-2: linear-gradient(135deg, #ff6efc 0, #ff6afa 12.5%, #ff64f3 25%, #e65ee8 37.5%, #be55d8 50%, #974cc6 62.5%, #7444b5 75%, #533da5 87.5%, #303797 100%);
	
	--pacocaetano-celeste: #9dfbff;
	--pacocaetano-2: #6de0ff;
	--pacocaetano-3: #0cc1ed 50% ;
	--pacocaetano-4: #00a3d8 75% ;
	--pacocaetano-5: #0089c6 100%;

	--pacocaetano-white: blue 20%;

}

:root {
	
    --bg-logo-1x: url(../images-pacocaetano/logoLFDP.png);
	--bg-logo-2x: url(../images-pacocaetano/logo-LFDP@2x.png);
	--bg-logo-1x-n: url(../images-pacocaetano/logo-LFDP-negativo.png);
    --bg-logo-2x-n: url(../images-pacocaetano/logo-LFDP-negativo@2x.png);
    --bg-video-logo-1: url(../images-pacocaetano/13a.mp4);
	--bg-video-logo-2: url(../images-pacocaetano/14a.mp4);
    --bg-video-logo-3: url(../images-pacocaetano/pacocaetanoLeap.mp4);
}

.bg-logotipo {
	
	/* background-image: url('../images/nesa_2023.jpg'); */
	background-color: var(--color-Negro-50);
	background-image: var(--bg-logo-2x),var(--degradado-blanco-a-transparente),var(--bg-video-logo-2);
	background-repeat: no-repeat;
    background-position: bottom center, center center, center center;
	position: relative;
	background-size: contain, contain, cover;
	border-width: 5px;
	border-color: var(--color-Blanco-99);
}

.dark .dark\:bg-logotipo {
  /*
  background-image: url('../images/logo-W.png'), linear-gradient(180deg, var(--color-magenta) 0%, var(--color-rosaclaro) 100%);
  */
  background-color: var(--color-Negro-50);
  background-image: var(--bg-logo-2x-n),var(--degradado-negro-a-transparente),var(--bg-video-logo-3);
  background-repeat: no-repeat;
  background-position: bottom center, center center, center center;
  position: relative;
  background-size: contain, contain, cover;
  border-width: 5px;
  border-color: var(--color-Negro-1);
  }


/* -------------------------- Botón  Guardar Contacto --------------------------  */

.btn-guardar-en-contactos {
	margin-left: auto;
  	margin-right: auto;
  	margin-top: 3.5rem;
  	display: flex;
  	align-items: center;
  	border-radius: 35px;
	
	padding-left: 2rem;
  	padding-right: 2rem;
  	padding-top: 0.75rem;
  	padding-bottom: 0.75rem;
  	font-size: 1.125rem;

}

.btn-cerrar-qr {
	
	margin-left: auto;
  	margin-right: auto;
  	margin-top: 1.5rem;
  	display: flex;
  	align-items: center;
  	border-radius: 35px;
	
	padding-left: 4rem;
  	padding-right: 4rem;
  	padding-top: 0.65rem;
  	padding-bottom: 0.65rem;
  	

}

.color-btn-cerrar-qr {
	
	background-color: black;
	border-width: 2px;
	color: white;
	font-size: 1.2rem;
	font-stretch: extra-expanded;
	
}

.dark .color-btn-cerrar-qr {
	
	background-color: white;
	border-width: 2px;
	color: black;
}

/* ----------------------------- Color Botones -----------------------------  */

.color-interior-btn {
  --tw-text-opacity: 1;
  color: black;
}

.dark .color-interior-btn {
  --tw-text-opacity: 1;
  color: white;
}

.color-interior-icn {
  --tw-text-opacity: 1;
  color: black;
}

.dark .color-interior-icn {
  --tw-text-opacity: 1;
  color: white;
}


.color-botones {
	
	--color-magenta: #e6007e;
	--color-rosaclaro: #ffced5;
	--color-rosaoscuro: #d3a4aa;
	--color-celeste: #00eae5;
	--color-verdelima: #9ae842;
	--color-blanco: white;
	
	  

	  --tw-gradient-from: #FA5252;
	  --tw-gradient-to: rgb(250 82 82 / 0);
	  --tw-gradient-from: #DD2476;
	  --tw-gradient-to: rgb(221 36 118 / 0);
	  --tw-gradient-stops: var(--pacocaetano-1), var(--pacocaetano-2), var(--pacocaetano-3), var(--pacocaetano-4), var(--pacocaetano-5);
	  --tw-gradient-to: #DD2476;
	  --tw-gradient-to: #4951ef;
	
	--tw-bg-opacity: 1;
	--tw-text-opacity: 1;
	
	background-color: var(--color-Negro-10);
	border-width: 2px;
	color: var(--color-blanco);
	
	transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  	transition-duration: 200ms;
  	transition-timing-function: linear;
	
}

.color-botones:hover {
	
	background-color: rgba(0,0,0,0.40);
	border-color: ;
	border-width: 2px;
	color: var(--color-blanco);
	
}

.dark .color-botones {
	
	background-color: var(--color-Negro-70);		/* Color botón */
	border-color: var(--color-Negro-30);
	border-width: 2px;
	color: var(--color-blanco);						/* Color txt */
	
}

.dark .color-botones:hover {
	
	background-color: var(--color-Negro-7);		/* Color botón */
	border-color: rgb(238 235 234);
	border-width: 2px;
	color: white;									/* Color txt */
	
}

/* -------------------------- Nombre Apellido Cargo --------------------------  */

.dark\:nombre-apellido {
  --tw-text-opacity: 1;
  color: var(--color-Negro-7);
}

.dark\:cargo {
  --tw-text-opacity: 1;
  color: var(--color-Blanco-70);
}

.dark .dark\:nombre-apellido {
  --tw-text-opacity: 1;
  color: var(--color-Negro-1);
}

.dark .dark\:cargo {
  --tw-text-opacity: 1;
  color: var(--color-Blanco-50);
}



/* -------------------------- Botones Redes Sociales --------------------------  */


.socialbtn {
	
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
 
}

.socialbtn-color {
	
  --tw-bg-opacity: 1;
  --color-blanco: #ffffff ;
  background-color: var(--color-Negro-30);
  --tw-gradient-from: var(--color-Negro-90);
  --tw-gradient-to: var(--color-Negro-90);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: black 100%;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


.socialbtn-color:hover {
	
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark .socialbtn-color {
	
  background-color: var(--color-Negro-50);
  --tw-gradient-from: var(--color-Negro-90);
  --tw-gradient-to: var(--color-Negro-90);
  --tw-gradient-stops: var(--color-Negro-99), var(--color-Negro-90);
  --tw-gradient-to: #343490 100%;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* -------------------------- Botón Descargar Vcard degradado --------------------------  */

.download-btn-gradient {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 35px;
  background-image: linear-gradient(180deg, var(--pacocaetano-1), var(--pacocaetano-2), var(--pacocaetano-3), var(--pacocaetano-4), var(--pacocaetano-5), var(--tw-gradient-stops));
	

	
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: linear;
}

.download-btn-gradient:hover {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.allrightsreserve {
	padding-top: 1.5rem;
  	padding-bottom: 1.5rem;
	font-size: .75rem;
	text-align: center;
	color: var(--pacocaetano-celeste);
}

.dark .allrightsreserve {
	padding-top: 1.5rem;
  	padding-bottom: 1.5rem;
	font-size: .75rem;
	text-align: center; 
	color: var(--color-rosa-1);
}