*{
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
	font-family:sans-serif;
	}
	
body{
	background:url(../img/background.jpg);
	background-repeat:repeat;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f1f5f9;
    color: #000000;
	}
.Titulo-de-tarjetas{
	font-size: 32px;
	font-weight: bold;
    font-family: Arial, sans-serif;
	color: #ffffff;
}
	
/*-------------------------------*/	
/*-------------------------------*/	
/*--CABEZOTE--*/
	
header{
	position:relative;
	margin:auto;
	width:1000px;
	height:120px;
	background-image:url(../img/cieloazulveranonaranjav2.jpg);
	background-position:center 50%;
	background-size:cover;
	background-repeat:no-repeat;
	}
	
#logo{
	position:absolute;
	top:15px;
	left:15px;
	width:250px;
	height:90px;
	}
	
/*--FIN CABEZOTE--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--BARRA DE NAVEGACIÓN--*/

nav{
	position:relative;
	margin:auto;
	width:1000px;
	height:45px;
	border-bottom:1px solid #bcd1cb;
	background:url(../img/fondoplomocortado.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	}
	
nav ul{
	position:absolute;
	top:0;
	left:0;
	width:500px;
	height:45px;
	}
	
nav ul li{
	float:left;
	width:124px;
	line-height:45px;
	text-align:center;
	font-size:14px;
	color:white;
	border-right:1px solid #bcd1cb;
	}
	
/*--FIN BARRA DE NAVEGACIÓN--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--SLIDE--*/

#slide{
	position:relative;
	margin:auto;
	width:1000px;
	height:350px;
	overflow:hidden;
	background:white;
	border:1px solid #ddd;
	}

#slide ul{
	list-style:none;
	margin:0;
	padding:0;
	width:500%;
	height:100%;
	animation: slideTransition 25s linear infinite;
	}

#slide ul li{
	float:left;
	width:20%;
	height:100%;
	background:white;
	display:flex;
	align-items:center;
	justify-content:center;
	}

#slide img{
	width:100%;
	height:100%;
	object-fit:contain;
	opacity: 1;
	transition: opacity 1s ease-in-out;
	}

@keyframes slideTransition {
	0% {
		transform: translateX(0);
	}
	16% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-20%);
	}
	36% {
		transform: translateX(-20%);
	}
	40% {
		transform: translateX(-40%);
	}
	56% {
		transform: translateX(-40%);
	}
	60% {
		transform: translateX(-60%);
	}
	76% {
		transform: translateX(-60%);
	}
	80% {
		transform: translateX(-80%);
	}
	96% {
		transform: translateX(-80%);
	}
	100% {
		transform: translateX(0);
	}
}
	
/*--FIN SLIDE--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--BOTONERA SLIDE--*/

#botoneraSlide{
	position:relative;
	margin:auto;
	width:1000px;
	height:26px;
	background:url(../img/fondoplomocortado.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	}
	
#botoneraSlide ul{
	position:relative;
	margin:auto;
	width:100px;
	height:26px;
	}
	
#botoneraSlide ul li{
	float:left;
	width:10px;
	height:10px;
	border-radius:100%;
	background:#000214;	
	border:3px solid white;
	margin:3px 2px;
	}
	
/*--FIN BOTONERA SLIDE--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--SECTION INICIO--*/

section#inicio{
	position:relative;
	margin:auto;
	width:1000px;
	height:299px;
	background:white;
	}

section#inicio ul li{
	float:left;
	width:333px;
	height:299px;
	}
	
section#inicio ul li h1{
	margin:23px 27px;
	font-weight:100;
	font-size:25px;
	}
	
section#inicio ul li p{
	margin:23px 28px;
	font-size:15px;
	}
	
section#inicio ul li img{
	margin:1px 29px;
	width:273px;
	height:83px;
	background:silver;	
	}

/*--FIN SECTION INICIO--*/
/*-------------------------------*/	
/*-------------------------------*/	
/*--SECTION QUIENES SOMOS--*/

section#quienesSomos{
	position:relative;
	margin:auto;
	width:1000px;
	height:299px;
	/*background:url(../img/quienesSomos.jpg);*/
	background:white;
	}

section#quienesSomos h1{
	position:relative;
	top:15px;
	left:27px;
	color:#1f1d21;
	font-weight:100;
	}
	
section#quienesSomos hr{
	position:relative;
	top:20px;
	width:950px;
	margin:auto;
	border:1px solid #c6c6c6c6;
	}

section#quienesSomos p{
	position:relative;
	top:40px;
	width:950px;
	margin:auto;
	color:#414042;
	text-align:justify;
	}
	
section#quienesSomos img{
	float:left;
	width:272px;
	margin-right:20px;
	margin-bottom:20px;
	}
	
/*--FIN SECTION QUIENES SOMOS--*/
/*-------------------------------*/	
/*-------------------------------*/	
/*--SECTION SERVICIOS--*/

section#servicios{
	position:relative;
	margin:auto;
	width:1000px;
	height:299px;
	background:white;
	}
	
section#servicios #cajaServicios{
	position:relative;
	width:1000px;
	margin:auto;
	top:18px;
	height:262px;
	background:white;
	box-shadow:0px 0px 30px #222;
	}
	
section#servicios #cajaServicios ul#lista{
	position:absolute;
	top:20px;
	left:15px;
	width:151px;
	height:220px;
	}

section#servicios #cajaServicios ul#lista li{
	width:151px;
	height:72px;
	margin:2px 0;
	cursor:pointer;
	}
	
section#servicios #cajaServicios ul#visor{
	position:absolute;
	top:20px;
	right:20px;
	width:732px;
	height:220px;
	}
	
section#servicios #cajaServicios ul#visor li{
	position:absolute;
	top:0px;
	left:0px;
	width:732px;
	height:220px;	
	}
	
section#servicios #cajaServicios ul#visor li h1{
	position:absolute;
	z-index:1;
	top:20px;
	left:20px;
	color:#4d545a;
	font-weight:100;
}

section#servicios #cajaServicios ul#visor li p{
	position:absolute;
	z-index:1;
	bottom:0;
	background:rgba(0,0,0,.7);
	color:white;
	width:97%;
	line-height:60px;
	padding-left:20px;
}
	
	
/*--FIN SECTION SERVICIOS--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--SECTION CONTACTENOS--*/

section#contactenos{
	position:relative;
	margin:auto;
	width:1000px;
	height:299px;
	background:white;
	}
	
section#contactenos form{	
	position:relative;
	margin:auto;
	top:32px;
	width:910px;
	height:232px;
	background:white;
	}

section#contactenos form input#nombre{
	position:absolute;
	padding:10px;
	width:272px;
	height:45px;
	background:#dce9d7;
	border:0;
	}
	
section#contactenos form input#email{
	position:absolute;
	top:81px;
	padding:10px;
	width:272px;
	height:45px;
	background:#dce9d7;
	border:0;
	}
	
section#contactenos form input#asunto{
	position:absolute;
	bottom:0px;
	padding:10px;
	width:272px;
	height:45px;
	background:#dce9d7;
	border:0;
	}
	
section#contactenos form #mensaje{
	position:absolute;
	right:0px;
	padding:10px;
	width:581px;
	height:128px;
	background:#dce9d7;
	border:0;
	}
	
section#contactenos form input#enviar{
	position:absolute;
	bottom:0px;
	right:0;
	padding:10px;
	width:604px;
	height:69px;
	background:#1a1d20;
	border:0;
	color:white;
	}

	
	
/*--FIN SECTION CONTACTENOS--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--BOTTOM--*/

#bottom{
	position:relative;
	margin:auto;
	width:1000px;
	height:190px;
	background:url(../img/backBottom.jpg);
	}
	
#bottom ul li{
	float:left;
	width:250px;
	height:190px;
	}
	
#bottom ul li h1{
	margin:13px 18px;
	color:white;
	font-size:18px;
	font-weight:100;
	}
	
#bottom ul li ol{
	position:relative;
	top:15px;
	left:17px;
	width:190px;
	height:80px;
	background:rgbsa(255,0,0,.5);
	}
	
#bottom ul li ol li{
	height:20px;
	text-align:left;
	list-style:inside;
	font-size:15px;
	color:white;
	list-style-image:url(../img/list.png);
	}
	
#bottom ul li img{
	position:relative;
	top:15px;
	left:15px;
	width:95px;
	height:95px;
	border:4px solid white;
	background:url(../img/perroandino.jpg);
	background-size:cover;
	}
	
#bottom ul li ul{
	position:relative;
	top:11px;
	left:15px;
	width:200px;
	height:40px;
	}
	
#bottom ul li ul li{
	float:left;
	width:40px;
	height:40px;
	border-radius:100%;
	background:white;
	margin:5px;
	}
	
#bottom ul li ul li:first-child{
	background:url(../img/wasa.png);
	background-size: cover;
	border:none;
	box-shadow:none;
}
#bottom ul li ul li:nth-child(2){
	background:url(../img/facebook.jpg);
	background-size:cover;
	}
	
#bottom ul li ul li:nth-child(3){
	background:url(../img/iconoGoogle.jpg);
	background-size:cover;
	}
	
#bottom ul li ul li:nth-child(4){
	background:url(../img/iconoPinterest.jpg);
	background-size:cover;
	}
	
#bottom ul li ul li:last-child{
	background:url(../img/iconoTwitter.jpg);
	background-size:cover;
	}
	
#bottom ul li ul li a{
	float:left;
	width:40px;
	height:40px;
	border-radius:100%;
	}
/*--FIN BOTTOM--*/
/*-------------------------------*/	
/*-------------------------------*/
/*--FOOTER--*/

footer{
	position:relative;
	margin:auto;
	width:1000px;
	height:62px;
	text-align:center;
	color:white;
	line-height:62px;
	font-size:15px;
	background:black;
	}
.cabecera {
text-align: center;
margin-bottom: 40px;
}
/* ==========================================
CONTENIDO 3.9: ESTRUCTURA CON CSS GRID
========================================== */
.grid-proyectos {
display: grid;
/* Creamos 4 columnas exactamente iguales utilizando fracciones (fr) */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* Espaciado de separación limpia entre las tarjetas */
gap: 25px;
}
/* Estilos base de las tarjetas hijas */
.tarjeta {
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
text-align: center;

border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
/* ==========================================
CONTENIDO 3.10: ANIMACIÓN (TRANSICIÓN)
========================================== */
/* Le indicamos a la tarjeta que cualquier cambio visual dure 0.3 segundos de forma
suave */
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease;
}
.tarjeta .icono {
font-size: 40px;
margin-bottom: 15px;
}
.tarjeta h3 {
color: #005088; /* Azul institucional */
margin-bottom: 10px;
}
/* Efecto interactivo al pasar el cursor por encima de la tarjeta */
.tarjeta:hover {
transform: translateY(-10px); /* Eleva la tarjeta sutilmente hacia arriba */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Intensifica la sombra */
background-color: #f8fafc; /* Cambia ligeramente el tono de fondo */
cursor: pointer;
border-color: #11caa0;
}
/* ==========================================
CONTENIDO 3.11: RESPONSIVE DESIGN (MEDIA QUERIES)
========================================== */
/* CONFIGURACIÓN PARA TABLETS (Pantallas menores a 992px de ancho) */
@media (max-width: 992px) {
.grid-proyectos {
/* Reducimos de 4 columnas a solo 2 columnas */
grid-template-columns: 1fr 1fr;
}
}
/* CONFIGURACIÓN PARA CELULARES (Pantallas menores a 600px de ancho) */
@media (max-width: 600px) {
.grid-proyectos {

/* Reducimos la rejilla a 1 sola columna vertical */
grid-template-columns: 1fr;
gap: 15px; /* Achicamos la separación para aprovechar pantalla */
}
}