* {
	padding: 0px;
	margin: 0px;
	
}


body {
	background-color: #fff;
}

.mulish-extra {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.logol {
	
		text-decoration: none;
		color: #fff;
		font-size: 36px;
		top: 6px;
}




.quicksand-light {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.quicksand-extralight {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


hr {
	width: 10%;
	
	color: #f8f8f8;
}

/* menu */

#menu ul {
 list-style:none;
 margin:0;
 padding:0;
 visibility: hidden;
}

/* items del menu */

#menu ul li {
 background-color:#2e518b;
}

/* enlaces del menu */

#menu ul a {
 display:block;
 color:#fff;
 text-decoration:none;
 font-weight:400;
 font-size:15px;
 padding:10px;
 font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 letter-spacing:1px;
}

/* items del menu */

#menu ul li {
 position:relative;
 float:left;
 margin:0;
 padding:0;
}

/* efecto al pasar el ratón por los items del menu */

#menu ul li:hover {
 background:#5b78a7;
}


/* menu desplegable */

#menu ul ul {
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#eee;
 padding:0;
}

/* items del menu desplegable */

#menu ul ul li {
 float:none;
 width:150px
}

/* enlaces de los items del menu desplegable */

#menu ul ul a {
 line-height:120%;
 padding:10px 15px;
}

/* items del menu desplegable al pasar el ratón */

#menu ul li:hover > ul {
 display:block;
}







.home {
	display: flex;
	flex-wrap: wrap;
	
	max-width: 1000px;
	margin: auto;
	height:auto;
    width: 100%;
}

.in-flex {
	flex: 1;
	min-width: 250px;
	
	
}
.inicio{
	
	display:flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	font-size: 2.75rem;
}
/*
.img_presentacion img{
	
    height: auto;
    width: 600px;
}
*/

.parrafo1{
	font-size: 1.4rem;
	margin:5%;
}
.titulo{
	font-family: "Quicksand", sans-serif;
 
  font-weight: 400;
  font-style: normal;
	font-size: 30px;
	margin-top: 60px;
}
.lista{
	
	font-weight: 200;
	font-style: normal;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 40px;
}
.parrafo2{
	font-size: 18px;
	margin:5%;
}
.parrafo3{
	font-size: 1.25rem;
}
.p_right{
	float:right;
	
}
/*
.seccion_altura{
	height: 50%;
	
}
*/
.secciones{
	
	font-size: 26px;
	margin:5%;
}

.animacion_opaci{
	background-color: transparent;
	animation-duration: 2s;
    animation-name: slidein3;
}
@keyframes slidein3 {
  from {
   
    opacity: 0;
  }

  to {
    
    opacity: 1;
  }
}

.in-flex ul {
	list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 24 24"><path d="M18.047,4,22,8.325,9.3,20,2,12.68,6.136,8.533,9.474,11.88Z"/></svg>');
	

 font-family:"Quicksand", sans-serif;
 

    
}
.in-flex li {
    padding-left: 0.5rem;
    
}

/* items del menu

.in-flex ul li {
 background-color:#2e518b;
}
*/

.p1{
	font-family: "Bree Serif", serif;
	font-size: 250%;
	animation-duration: 2s;
    animation-name: slidein;
}
#div2{
  height:100%;
}

@keyframes slidein {
  from {
    margin-left: 10%;
    opacity: 0;
  }

  to {
    margin-left: 0%;
    opacity: 1;
  }
}

.animacion_top{
	animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
	animation-duration: 3s;
    animation-name: slidein2;
}
@keyframes slidein2 {
  from {
    margin-top: 20%;
   opacity: 0;
  }

  to {
    margin-top: 0%;
   opacity: 1;
  }
}


.animacion_right{
		animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
		
}
@keyframes appear {
        from {
          opacity: 0;
          transform:translateX(40px);
		  
		  
        }
        to {
          opacity: 1;
          transform:translateX(0);
        }
      }
.animacion_left{
		animation: appearleft linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
		
}
@keyframes appearleft {
        from {
          opacity: 0;
          transform:translateX(-40px);
		  
		  
        }
        to {
          opacity: 1;
          transform:translateX(0);
        }
      }	  
	  


.figure {

}
.img{
	display: block;
	opacity: 0;
	transition: 3s ease;
}
[data-animation="show"] {

	opacity: 0;
	transform: scale(0);
	transition: 6s ease-in 3s;
	--opacity: 1;
	--transform: scale(1);
}
[data-animation="up"] {

	opacity: 0;
	transition: 6s ease-in 3s;
	transform: translateY(100%);
	--opacity: 1;
	--transform: translateY();
}
[data-animation="derecha"] {

	opacity: 0;
    transform:translateX(-40px);
	
	
	--opacity: 1;
	--transform: transform:translateX(0);
}
[data-animation="visible"] {

	visibility: hidden;
    transform:translateX(-40px);
	
	
	--visibility: visible;
	--transform: transform:translateX(0);
}


.unset {

visibility:var(--visibility);
opacity: var(--opacity);


transform: var(--transform);


}

/*JavaScript para parrafos*/
.section__paragraph{

margin: trem ;

transform: translateY(100px);

opacity: 0;

transition: 1s ease;
}

.section__paragraph--visible {

transform: translateY(0);

opacity: 1;
}

/*
.unset {
	
    opacity: 1;
}
*/

.in-flex a{
		display: block;
		text-decoration: none;
		color: #000;
}

.in-flex h2{
	margin-bottom: 10px;
	font-size: 15px;
}

/*
.in-flex img {
	border-radius: 10px;
    display: block;
    width: 100%;
    margin-top: 0px;
	
}
*/
.in-flex .img_presentacion img{
	border-radius: 10px;
    display: block;
    width: 100%;
    margin-top: 0px;
	
}

.in-flex .img_posterior img{
	border-radius: 10px;
    display: block;
    width: 100%;
    margin-top: 0px;
	
}

.in-flex:first-child {
	flex: 2;
	padding: 10px;
	background-color: #fff;
	margin: 10px;
	margin-bottom: 0px;
}

.in-flex div {
	
	
	margin: 10px;
}


/*inicio de Menù lateral*/


	/*Estilos para el encabezado*/
	.header{
		width: 100%;
		height: 50px;
		position: fixed;
		top: 0;left: 0;
		background: rgba(0,0,0,0.9);
		z-index: 1;
	}
	.container{
		width: 90%;
		max-width: 1000px;
		margin: auto;
	}
	/*.container .btn-menu, .logo{
	
		line-height:50px;
	}*/
	.container .btn-menu label{
		margin-top:15px;
		float: right;
		color: #fff;
		font-size: 25px;
		cursor: pointer;
	}
	.logo h1{
		color: #fff;
		font-weight: 400;
		font-size: 22px;
		margin-left: 10px;
	}
	
	.ico img{
		display: none;
	}
	.logo img{
	
	position:relative;
		width: 180px;
		top:6px;
	}
	
	/* oculta logo y visibiliza el icono
	
	.logo img{
		visibility: hidden;
	}
	.ico img{
	
	margin: auto;
	display: block;
    width: 31px;
  height: 37px;
  padding: 8px;
   
	}*/
	
	.container .menu{
		visibility: hidden;
	}
	
	/*Fin de Estilos para el encabezado*/

	/*Menù lateral*/
	#btn-menu{
		display: none;
	}
	
	/*fondo del menu desplegable*/
	.container-menu{
		
		position: fixed;
		background: rgba(0,0,0,0.8); /*fondo negro transparente*/
		width: 100%;
		height: 100vh;
		top: 50px;left: 0;
		transition: all 500ms ease;
		opacity: 0;
		visibility: hidden;
		z-index: 1;
	}
	#btn-menu:checked ~ .container-menu{
		opacity: 1;
		visibility: visible;
	}
	
		
	.cont-menu{
		top: 50px;
		width: 100%;
		/*max-width: 250px;*/
		max-width: 80%;
		background: #252525;
		height: 100vh;
		position: fixed;
		transition: all 500ms ease;
		transform: translateX(-100%);
	}
	#btn-menu:checked ~ .container-menu .cont-menu{
		transform: translateX(0%);
	}
	
	.cont-menu nav{
		transform: translateY(15%);
	}
	.cont-menu nav a{
		display: block;
		text-decoration: none;
		padding: 20px;
		color: #c7c7c7;
		border-left: 5px solid transparent;
		transition: all 400ms ease;
	}
	.cont-menu nav a:hover{
		border-left: 5px solid #c7c7c7;
		background: #1f1f1f;
	}
	.cont-menu label{
		position: absolute;
		right: 5px;
		top: 10px;
		color: #fff;
		cursor: pointer;
		font-size: 24px;
		
	}
/*Fin de Menù lateral*/


.footer {
    background-color: #000;
    color: #fff;
	
	padding-bottom:60px;
	
	font-size: 1rem;
	border-bottom: 20px solid #000;
}
.footer-wave-svg {
    background-color: transparent;
    display: block;
    height: 30px;
    position: relative;
    top: -1px;
    width: 100%;
}
.footer-wave-path {
    fill: #fffff2;
}

.mySlides {display: none;}
img {vertical-align: middle;border-radius:6px;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}











/*responsive menu -------------------------------------------------------------------------------------------*/
@media(min-width:800px){

.in-flex .img_presentacion img{
	border-radius: 16px;
    display: block;
    width: 140%;
    float: right;
    margin-top: 0px;
	
}
.lista{
	
	font-weight: 200;
	font-style: normal;
	font-size: 24px;
}
.parrafo1{
	font-size: 1.6rem;
	margin:5%;
}
.parrafo3{
	font-size: 1.25rem;
}

.seccion_altura{
	margin-bottom:60px;
	
}
.p_width{
	 max-width: 70%;
}
.p_right{
	float:right;
	
}
	.logo img{
		visibility: visible;
		width: 180px;
		top:6px;
	}
	
	
	.reversa {
    	flex-direction: row-reverse;
		
		
	}
	
	}
	
	/*responsive modo escritorio -------------------------------------------------------------------------------------------
@media(min-width:600px)and (max-width:768px){

.in-flex .img_presentacion img{
	border-radius: 16px;
    display: block;
    width: 150%;
    
    margin-top: 0px;
	
}
.lista{
	
	font-weight: 200;
	font-style: normal;
	font-size: 20px;
}
.parrafo3{
	font-size: 18px;
}
.seccion_altura{
	margin-bottom:60px;
	
}
.p_width{
	 max-width: 70%;
}
	.logo img{
		visibility: visible;
		width: 180px;
		top:6px;
	}
	
	
	.reversa {
    	flex-direction: row-reverse;
		
	}
	
	}
	*/
	
	/*
	<! --
	<div class="in-flex"><div class="animacion_opaci img_posterior">
	<figure class="figure"><img class="img" src="datagram_img_4.jpeg"></figure></div></div>
-->	
	
	
	Los sistemas web son esenciales en la era digital actual, y requieren un soporte y mantenimiento constantes para garantizar su funcionamiento óptimo. 
La programación de plataforma PHP es una de las tecnologías más populares y versátiles para el desarrollo de sistemas web.

Con PHP, podemos crear aplicaciones web dinámicas y escalables, desde simples sitios web hasta complejas aplicaciones empresariales. La plataforma PHP ofrece una amplia gama de herramientas y frameworks que facilitan el desarrollo y el mantenimiento de sistemas web.

Nuestro equipo de expertos en PHP ofrece soporte y programación de alta calidad para asegurar que tus sistemas web funcionen sin contratiempos. Desde la creación de sitios web personalizados hasta la integración de sistemas de gestión de contenido, nosotros nos encargamos de todo.

Nuestros servicios incluyen:

- Desarrollo de aplicaciones web personalizadas
- Integración de sistemas de gestión de contenido
- Soporte y mantenimiento de sistemas web existentes
- Optimización del rendimiento y la seguridad
- Creación de plugins y módulos personalizados

Confía en nosotros para llevar tus sistemas web al siguiente nivel. ¡Contáctanos hoy mismo para obtener más información!"

Sistemas Web:

- Arquitectura de software
- Protocolos de comunicación (HTTP, FTP, etc.)
- Lenguajes de programación (PHP, JavaScript, etc.)
- Bases de datos (MySQL, MongoDB, etc.)
- Servidores web (Apache, Nginx, etc.)

Soporte:

- Mantenimiento preventivo y correctivo
- Actualizaciones y parches de seguridad
- Monitoreo de rendimiento y uptime
- Resolución de problemas y errores
- Documentación y registro de incidents

Programación en PHP:

- Sintaxis y estructuras de control
- Funciones y métodos
- Trabajo con bases de datos (MySQLi, PDO, etc.)
- Seguridad y validación de datos
- Frameworks y bibliotecas (Laravel, CodeIgniter, etc.)

Herramientas y Tecnologías:

- Editores de código (VSCode, Sublime Text, etc.)
- Sistemas de control de versiones (Git, SVN, etc.)
- Servidores de aplicaciones (XAMPP, WAMP, etc.)
- Herramientas de depuración y testing (Xdebug, PHPUnit, etc.)

display: block;
    height: auto;
    max-width: 100%;*/