* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}

body {
	background: #fff;
	font-family: 'Open Sans', sans-serif;
}

.contenedor {
	width: 90%;
	max-width: 1000px;
	margin: 20px auto;
	
}

.contenedor article {
	line-height: 28px;
}

.contenedor article h1 {
	font-size: 30px;
	text-align: left;
	padding: 50px 0;
}

.contenedor article p {
	margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
	padding: 0 20px;
	margin-bottom: 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #5E7DE3;
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
	cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
	background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
	background: rgba(83,109,219,0.32);
	/*background: rgba(244,7,39,0.53);*/
	/*background: rgba(103,7,7,0.53);*/
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	visibility: hidden;
	
}

.overlay.active {
	visibility: visible;
}

.popup {
	/*background: #ccccff;*/
	background: rgba(14,110,246,0.22);
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	padding: 20px;
	text-align: center;
	width: 300px;
	/*height: 200px; /* Ejemplo de alto */
	transition: .3s ease all;
	transform: scale(0.7);
	opacity: 0;
	border-radius: 30px;
	position: fixed; /* O absolute static relative fixed sticky */ 
    top: 1%;
    left: 75%; 
	z-index: 1000; /* Para asegurar que est� encima de otros elementos */
}


.popup .popup-titulo{
	background: #0033cc;
    color: white;
    font-size: 30px;
	border-radius: 10px;
}

.popup .btn-cerrar-popup {
	font-size: 20px;
	line-height: 20px;
	display: block;
	text-align: right;
	transition: .3s ease all;
	color: #BBBBBB;	

}

.popup .btn-cerrar-popup:hover {
	color: #000;
}

.popup h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 0;
	color: #ffffff;
}

.popup h4 {
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 40px;
	opacity: 0;
	color: #66ffff;
}

.popup form .contenedor-inputs {
	opacity: 0;
}


.popup .contenedor-fr {
	width:400px; 
	top:0%; 
	left:25%; 
	background: rgba(12,187,21,0.61); 
	border-radius: 10px;
	margin-bottom: 20px;
}



.popup form .contenedor-inputs input {
	/*width: 100%;*/
	width: 300px;
	margin-bottom: 20px;
	height: 42px;
	font-size: 18px;
	line-height: 52px;
	text-align: center;
	border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #006633;
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
}

.popup form .btn-submit:hover {
	background: rgba(155,238,12, .25);
}


/**CLASE WEB**/

/**una caja en linea**/
.box1{
display: block;  
max-width: 100%; 
position: relative; 
width:50%; 
}

/**dos caja en linea**/
.box1-2, .box2-2 {
display: block; 
float:left;
max-width: 50%; 
width:50%; 
}

/**tres caja en linea**/
.box1-3, .box2-3, .box3-3 {
display: block; 
float:left;
max-width: 33.3%; 
width:50%;
}

.float-left {
float: left;
margin: 0 .2em .2em 0;

}


/**delete flujo float**/
.clear {
clear: both;
display: block; 
}

/**estilos cajas**/
.estilo1, .estilo2 {
 background: rgba(152,238,104,.5);
 border-radius: .3em;
 box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 -webkit-box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 padding: .5em;

}


.estilo2 { background: rgba(53,147,5,.8); }

.estilo1:hover, .estilo2:hover { background: rgba(10,245,7,.50); }



/** estilos cajas 3**/

.estilo3, .estilo4 {
 background: rgba(242,206,100,.5);
 border-radius: .3em;
 box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 -webkit-box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 padding: .5em;

}


.estilo4 { background: rgba(227,216,11,.8); }

.estilo3:hover, .estilo4:hover { background: rgba(182,188,9,.50); }


/** estilos cajas 4**/

.estilo5, .estilo6 {
 background: rgba(99,118,242,.5);
 border-radius: .3em;
 box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 -webkit-box-shadow: 3px 2px 5px 1px rgba(48,50,50,.75);
 padding: .5em;

}


.estilo6 { background: rgba(99,178,242,.5); }

.estilo5:hover, .estilo6:hover { background: rgba(99,235,242,.50); }



/**estilos efectos**/
.opacidad {
opacity: 1;
filter: alpha(opacity=10);
/**tranciciones**/
transition: all 1s linear;
-webkit-transition: all 1s linear;
}

.opacidad:hover {
opacity: .3;
filter: alpha(opacity=3);
/**tranciciones**/
transition: all 1s linear;
-webkit-transition: all 1s linear;
}

/**espacios**/
.margin1 { margin: 1em;}
.padding1 { padding: 3em;}



/**estilos vinculos web 10.50**/
.ver-mas{
border: 1px solid #009900; 
border-radius: 15px; 
background: rgba(8,86,3,.8);
box-shadow: -6px -6px 5px 0px rgba(73,192,6,.5); webkit-box-shadow: -6px -6px 5px 0px rgba(73,192,6,.5);
height: 50px; 
line-height: 50px; 
margin: .5em auto; 
position: relative;
width: 100px; 
transition: all .5s linear; 
cursor: pointer;

}

.ver-mas:hover {
background: rgba(192,226,8,.50);
box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
	webkit-box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
border-radius: .3em; 
	/**transiciones css3**/
	transition: all .5s linear; 
	-webkit-transition: all .5s linear; 
}


a {
  text-decoration: none; /* Esto quita el subrayado de todos los enlaces */
}


.ver-mas2{
border: 1px solid #996600; 
border-radius: .3em;
background: rgba(87,65,3,.8);
box-shadow: -6px -6px 5px 0px rgba(191,101,6,.5); webkit-box-shadow: -6px -6px 5px 0px rgba(73,192,6,.5);
height: 50px; 
line-height: 50px; 
margin: .5em auto; 
position: relative;
width: 100px; 
transition: all .5s linear; 
cursor: pointer;
}

.ver-mas2:hover {
background: rgba(227,171,9,.50);
box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
	webkit-box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
border-radius: .3em; 
	/**transiciones css3**/
	transition: all .5s linear; 
	-webkit-transition: all .5s linear; 
}


.ver-mas3{
border: 1px solid #0000ff; 
border-radius: .3em;
background: rgba(7,24,194,.8);
box-shadow: -6px -6px 5px 0px rgba(6,119,191,.5); webkit-box-shadow: -6px -6px 5px 0px rgba(73,192,6,.5);
height: 50px; 
line-height: 50px; 
margin: .5em auto; 
position: relative;
width: 100px; 
transition: all .5s linear; 
cursor: pointer;
}

.ver-mas3:hover {
background: rgba(9,227,180,.50);
box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
	webkit-box-shadow: inset -1px 0 5px 7px rgba(50,50,50,.75), 7px 7px 5px 0 rgba(50,50,50,.3);
border-radius: .3em; 
	/**transiciones css3**/
	transition: all .5s linear; 
	-webkit-transition: all .5s linear; 
}




	.section-title {
	font-family: 'Orbitron', monospace;
	font-size: 1.8rem;
	font-weight: 900;
	text-align: center;
	margin-bottom: 60px;
	background: linear-gradient(45deg, #3e1401, #f7f9f9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;
	 }

        /* About Section */
    /*     .about {
            padding: 20px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;

        }

        .about-text h2 {
            font-family: 'Orbitron', monospace;
            font-size: 2.5rem;
            margin-bottom: 30px;
            background: linear-gradient(45deg, #3c00ff, #00f7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .about-text p {
            line-height: 1.8;
            opacity: 0.8;
            margin-bottom: 20px;
            font-size: 1.1rem;
        } 
		
		*/

		

        .about-visual {
            position: relative;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .about-graphic {
            width: 100px;
            height: 100px;
            position: fixed;
            animation: float 6s ease-in-out infinite;
			border-radius: 10px;
        }

        .about-graphic::before,
        .about-graphic::after {
            content: '';
            position: fixed;
            border: 2px solid #00e1ff;
            border-radius: 10px;
            box-shadow: 0 0 40px rgba(0, 110, 255, 0.5);
        }

        .about-graphic::before {
            width: 100%;
            height: 100%;
			top: 0%;
            left: 0%;
            animation: rotate 20s linear infinite;
        }

        .about-graphic::after {
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
            border-color: #00fbff;
            animation: rotate 15s linear infinite reverse;
            box-shadow: 0 0 30px rgba(0, 4, 255, 0.5);
        }

        /* Alternative graphic for second row */
        .about-graphic-alt {
            width: 100px;
            height: 100px;
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 6s ease-in-out infinite;
        }

		  /* Scanlines effect */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(
                transparent 50%,
                rgba(255, 247, 0, 0.01) 50%
            );
            background-size: 100% 4px;
            animation: scanlines 8s linear infinite;
            z-index: 2;
            pointer-events: none;
        }

        @keyframes scanlines {
            0% { transform: translateY(0); }
            100% { transform: translateY(10px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes float {
            0%, 100% { 
                transform: translateY(0);
                box-shadow: 0 0 30px rgba(0, 145, 255, 0.5);
            }
            50% { 
                transform: translateY(-10px);
                box-shadow: 0 10px 40px rgba(0, 47, 255, 0.7);
            }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */

.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
	from {
		opacity: 0;
		transform: translateY(-25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaSubtitulo {
	from {
		opacity: 0;
		transform: translateY(25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaInputs {
	from { opacity: 0; }
	to { opacity: 1; }
}



/* ------------------------- */
/* ANIMACIONES 2 */
/* ------------------------- */


.ventana.active {	transform: scale(1); opacity: 1; }
.ventana.active h3 { animation: entradaTitulo1 .8s ease .5s forwards; }
.ventana.active h4 { animation: entradaSubtitulo1 .8s ease .5s forwards; }
.ventana.active .contenedor-inputs { animation: entradaInputs1 1s linear 1s forwards; }

@keyframes entradaTitulo1 {
	from {
		opacity: 0;
		transform: translateY(-25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaSubtitulo1 {
	from {
		opacity: 0;
		transform: translateY(25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaInputs1 {
	from { opacity: 0; }
	to { opacity: 1; }
}