/* CSS Document */

/* -------------------------------------------- */
/* ------------------ HEADER ------------------ */
/* -------------------------------------------- */


.header-container {
    display: block;
    background-color: black;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../imagenes/header-humo.png);
    background-size: 550px;
    background-position-y: -130px;
	position: relative;		
}

nav {
    position: sticky;
	position: -webkit-sticky; /* Safari */
	z-index: 100;
}


.header-redes {
    display: block;
    color: white;
    text-align: right;
/*    padding-right: 6%;  */
    /* background-color: black;  */
    /* border-bottom: solid #000 2px; */
}

.header-logo {
    display: inline-block;    
    margin-right: 5%; 
    margin-top: 10px;  
    text-align: center;
    font-size: 3.125em;
    font-weight: 700;    
    letter-spacing: -1px;
    color: white;
    line-height: .9em;
	z-index: 100;
}

.header-sub-logo {
    display: block;    
    text-align: center;
/*    font-size: 18px;*/
    letter-spacing: 0.01em;
/*    color: #c34238;   */
	color: var(--redok);	
	font-family: "Perpetua-bold", "Open Sans", sans-serif;
	font-size: 1.6rem;
	transform: scaleY(1.1); 
}

@media screen and (max-width: 800px) {
	.header-logo {
		font-size: 2.9em;		
	}
	.header-sub-logo {
		font-size: 1.5rem;		
	}
}

@media screen and (max-width: 650px) {
	.header-logo {
		font-size: 2.8em;			    
        margin-left: 10px;
        text-align: left;
    }
}

@media screen and (max-width: 400px) {
	.header-logo {
		font-size: 2.6em;		
	}
	.header-sub-logo {
		font-size: 1.4rem;	
		text-align: left;
	}
}

@media screen and (max-width: 350px) {
	.header-logo {
		font-size: 2.4em;		
	}
	.header-sub-logo {
		font-size: 1.3rem;	
		text-align: left;
	}
}

.header-logo:hover::after {
    content: '';
    display: block;
    position: absolute;
/*	 position grande abajo*/
    top: 110%; 
    left: 9.5%;
    width: 180px;
    height: 100px; 
    background: url('../imagenes/eye.gif') center/contain no-repeat;
    pointer-events: none; /* Prevent interference with hover */    
	z-index: -1;
	background-size: 305% 305%; 	
	border-radius: 50%;
/*	animation: bloodSplatter 0.3s ease-in;*/
	
	/*	Pequeño arriba*/
	/*
		top: -15%; 
		left: 14%;
		width: 60px;
		height: 30px; 
	*/

}

/*
.header-logo:hover::after {
  animation: 
    ghosting 0.5s ease-out;
    bloodSplatter 2s infinite;
}
*/

/*
.header-logo:not(:hover)::after {
  animation: hauntedVanish 0.3s ease-out;
}
*/

/*.header-logo::after {
    animation: fadeOutDisintegrate 0.5s ease-in 0.3s forwards;
    animation-fill-mode: forwards; /* Retains end state */
/*    opacity: 0;  */
/*}*/

@keyframes fadeOutDisintegrate {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
        filter: blur(10px);
    }
}

@keyframes bloodSplatter {
  0% { clip-path: circle(0% at 50% 0); }
  100% { clip-path: circle(75%); }
}

@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes disintegrate {
  to {
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.5);
  }
}

/* Shrink Out */
@keyframes shrinkOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.5); opacity: 0; }
}

/* Horror Pulse */
@keyframes horrorPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); filter: brightness(1.5); }
}

/* CRT Flicker */
@keyframes crtFlicker {
  0%, 20%, 22%, 50%, 55%, 65%, 70%, 80%, 92%, 100% { opacity: 1; }
  21%, 23%, 54%, 56%, 69%, 81% { opacity: 0.2; }
}

/* Haunted Vanish */
@keyframes hauntedVanish {
  0% { opacity: 1; filter: hue-rotate(0); }
  100% { opacity: 0; filter: hue-rotate(90deg) blur(5px); }
}


.header-nav-ul {
    display: inline-flex;
	position: relative;
    background-color: black;
	flex-direction: row;
	align-items: center;
}

.header-nav-li {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 20px;
    color: white;
    padding: 10px 30px;	
/*	letter-spacing: .05em;*/
	transform: scaleY(1.1); 
	
		
}
.header-nav-li a {
    font-family: "Perpetua-bold", "Open Sans", sans-serif;
    position: relative;
    text-decoration: none;
/*    transition: all 0.3s ease;*/
}
.header-nav-li a:hover {
    /*	color: #d10000;*/
/*
    text-shadow:
        0 0 3px #000000, 
		0 0 20px #cc0000, 
		0 0 20px #df0000, 
		0 0 30px #ff0000; 
    transform: translateY(-2px);
*/
}

/* red line underneath */
.header-nav-li a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ff0000, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.header-nav-li a:hover::after {
    transform: scaleX(1);
}


/*------  ANIMATIONS  --------*/

.header-nav-li a {    
    animation: none; /* Disable any previous animation */
}

.header-nav-li a:hover {
    animation: double-glitch 1.5s infinite;	
/*	transition: all 0s;*/
	transition: all 0.3s ease;
}

/*
.header-nav-li a:hover {
    animation: advanced-malfunction 3s infinite;
	transition: transform 0s;	
}
*/

@keyframes glitch {
    0%, 96%, 100% { /* Normal state for most of the time */
        text-shadow: none;
        transform: translateX(0);
    }
    97% { /* First glitch frame */
        text-shadow: 
            2px 0 #8a0000,
            -2px 0 #00b7ff;
    }
    98% { /* Second glitch frame */
        text-shadow: 
            -3px 0 #8a0000,
            3px 0 #00b7ff;
    }
    99% { /* Third glitch frame */
        text-shadow: 
            4px 0 #8a0000,
            -4px 0 #00b7ff;
        transform: translateX(5px);
    }
}

/* Trigger glitch on hover */
@keyframes double-glitch {
    0%, 69%, 100% { /* Normal state for most of the time */
        text-shadow: none;
        transform: translateX(0);
    }
    /* First glitch sequence */
    80% {
        text-shadow: 
            8px 0 #aa0000,
            -12px 0 #00b7ff;
    }
    87.5% {
        text-shadow: 
            -3px 0 #8a0000,
            3px 0 #00b7ff;
    }
    92% {
        text-shadow: none;
    }
    /* Second glitch sequence */
    95.5% {
        text-shadow: 
            6px 0 #8a0000,
            -6px 0 #00b7ff;
        transform: translateX(5px);
    }
    98% {
        text-shadow: 
            -2px 0 #8a0000,
            2px 0 #00b7ff;
        transform: translateX(-5px);
    }
    99.5% {
        text-shadow: none;
        transform: translateX(0);
    }
}

/** New malfunction blinking effect */
@keyframes advanced-malfunction {
    /* Initial normal state (long duration) */
    0%, 70% {
        opacity: 1;
        color: white;
        transform: translate(0, 0);
        filter: none;
    }
    /* PHASE 1: Rapid initial blinking (fast, erratic) */
    71% {
        opacity: 0;
        color: #fff;
        transform: translate(3px, -2px);
    }
    72.5% {
        opacity: 1;
        color: #fff;
        transform: translate(-5px, -3px);
    }
    73% {
        opacity: 0;
        color: #fff;
        transform: translate(1px, 4px);
    }
    73.5% {
        opacity: 1;
        color: #fff;
        transform: translate(-6px, 2px);
    }
    74% {
        opacity: 0;
        color: #fff;
        transform: translate(3px, -4px);
    }
    74.5% {
        opacity: 1;
        color: #fff;
        transform: translate(-2px, 5px);
    }
    /* PHASE 2: Steady distorted state */
    75.5% {
        opacity: 1;
        color: #fff;
        transform: translate(-3px, 2px);
        /*        filter: blur(0.5px);*/
    }
    /* Recovery phase */
    89%, 100% {
        opacity: 1;
        color: white;
        transform: translate(0, 0);
        filter: none;
    }
}





/*
.header-nav-li:visited, .header-nav-li:link { 
    color: white;
}
*/

i, i::before {
    display: inline-block;
    line-height: 37px;
    font-size: 19px;    
    transition: all 0.5sease;
    -webkit-transition: all 0.5sease;
    color: #e3e3e3;
    padding: 0 5px;
	border-radius: 5px;
/*
	margin-top: 2px;
	margin-bottom: 2px;
*/
}

.fa-whatsapp:before {
	color: #40D076;  
}

.fa-whatsapp:hover {
	background-color: #035421;	
} 

a:hover i.fa-instagram {
/*    background-color: #4E433C;*/
	background-color: #b20000;	
}

a:hover i.fa-linkedin {
	/*    background-color: #4E433C;*/
	background-color: #123F92;
}

a:hover i.fa-youtube-play {
    background-color: #b20000;
}

a:hover i.fa-envelope {
	background-color: #266A65;
}

/* -------------------------------------------- */
/* ----------------- VARIOUS  ----------------- */
/* -------------------------------------------- */

.gradient-box {  
    position: absolute;
    top: -27px;
	width: 100%;
    height: 35px;    
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	background: -o-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	z-index: -1;
}

.hide {
	display: none;
}

.fa-bars:before, .burger {
	display: none;
}


/* -------------------------------------------- */
/* ----------- MOBILE BURGER MENU  ------------ */
/* -------------------------------------------- */

/* ============================
          RESPONSIVENESS       
    ==========================  */
  
/* ----------------------------
             1010
   ---------------------------- */

  @media screen and (max-width: 1010px) {

		nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
		}
	  
	  .gradient-box {
		  display: none;
	  }

		.fa-bars:before, .burger {
			display: inline-block;
			margin-right: 5px;
			font-size: 40px !important;
		}

		.header-logo {
			margin-left: 25px;	
		}

		.header-nav-ul {			
			display: none;
			flex-direction: column;			
			position: absolute;
			right: 15px;
			top:  140px;
			background-color: white;
			color: #000;
			padding: 20px 20px;			
			border-radius: 5px;
			border-bottom-left-radius: 8px;
			z-index: 1000;
		}
	  
	  .header-nav-li a {	
		  color: #000 !important;		  
	  }
	  
	  .show {
		  display: block;
	  }
    
   }