*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
	padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol

 {
	list-style: none;

}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
	max-width: 100%;
	display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
	margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 20px;
	font-family: Arial, sans-serif;
  }
  
  /* Retícula de 3 columnas */
  .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 20px;
  }
  
  .item {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: none;
	border-radius: 10px;
	overflow: hidden;
  }
  
  .item img {
	width: 100%;
	height: auto;
	display: block;
  }

  .circle {
    width: 20px; /* Tamaño del círculo */
    height: 20px; /* Tamaño del círculo */
    background-color: #3498db; /* Color de fondo del círculo */
    border-radius: 50%; /* Esto crea la forma circular */
	flex-wrap: wrap ;
	margin-right: 5px;
	
	
  }
 
  /* Carácterísticas de color, tamaño y fuentes */
 
  body {
    background-image: url('images/fondo.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen al tamaño del contenedor */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
}

  a:link, a:visited, a:active {
    text-decoration:none;
	
	
	}

	.asterisco {
	color:coral;
	font-size: 36px;
	font-family: Arial, Helvetica, sans-serif;
	transition: transform 0.3s, color 0.3s;
	}

	.asterisco:hover {
		color:rgb(255, 80, 214);
		transform: translateX(10px) rotate(10deg);
		
		}

 	h2 {
	font-family: 'Cutive Mono', monospace;
	color: black;	
	
	}	

	h3{
		font-family: 'Cutive Mono', monospace;
		color: black;
		
	}	


	p{
		font-family: 'Cutive Mono', monospace;
		color: black;
		
	}

	.margen{
		margin-left: 20px;
	}

	footer{
		margin-top: 20px; 
		margin-left: 30px;
		
				  }
	

	footer p
		{font-family: 'Cutive Mono', monospace;
		color:black;
		font-size: 16px;
		margin-top: 20px;
	
	}

	.dotted-line {
		width: 100%; /* Ancho del 100% para que vaya de lado a lado */
		height: 2px; /* Grosor de la línea */
		border: none; /* Elimina el borde predeterminado */
		border-bottom: 2px dotted  rgb(88, 87, 87); /* Línea punteada de color negro */
		margin: 0;
		padding: 0;
		
	  }

	.inline-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: right; /* Alinear horizontalmente en el centro */
	  }
	  
	  .inline-list li {

		margin-right: 40px; /* Espacio entre elementos */
		
	  }
	 
	  .derecha {
		justify-content: flex-end; /* Alinear los elementos a la derecha */
		
	  } 

	
	

	
	.container img {
		max-width: 100%;
		height: auto;
	}
	
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: none; /* Fondo semitransparente */
		opacity: 0; /* Inicialmente oculto */
		transition: opacity 0.3s ease-in-out; /* Transición de opacidad suave */
	}
	
	.overlay p {
		text-align: center;
		padding: 20px;
		font-size: 18px;
		font-weight: bold;
	}


	#proyectos {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: none
	}
	
	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		padding: 20px;
	}
	
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: none;
		border-radius: 10px;
		overflow: hidden;
		perspective: 1000px;
		width: 100%; /* Ajuste para dispositivos móviles */
		cursor: pointer;
	}
	
	.card {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		transition: transform 0.5s;
	}
	
	.card:hover {
		transform: rotateY(180deg); 
	}
	
	.card-inner {
		width: 100%;
		height: 100%;
		transition: transform 0.5s;
		transform-style: preserve-3d;
	}
	
	.card-front,
	.card-back {
		width: 100%;
		height: 100%;
		position: absolute;
		backface-visibility: hidden;
	}
	
	.card-front {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: none;
	}
	
	.card-back {
		background-color: none;
		transform: rotateY(180deg);
		display: flex;
		justify-content: center;
		align-items: center;
		color:rgb(255, 255, 255);
	}

	.item .card-inner{
		padding-bottom: 100%;
	}
	
	.texto-trasero {
		font-size: 18px;
		text-emphasis: uppercase;
		text-align: center;
	}

	.proyectos {
		color: #000;
		font-family: 'Cutive Mono', monospace;
		
	}

	.sobremi {
		color: #000;
		font-family: 'Cutive Mono', monospace;
		
	}
	
	.contacto {
		color: #000;
		font-family: 'Cutive Mono', monospace;
		
	}

	.explicacion{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color:black;
		justify-content: flex-end; /* Alinear los elementos a la derecha */
	}

	.copi p {
		font-family:Arial, Helvetica, sans-serif;
		color: coral;
		font-size: smaller;
		text-align: center;

	}

	.digital {	
		font-family:Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		color: coral;
		font-size: smaller;
		text-align: left;
		letter-spacing: 4px;
		margin-top: 0px;
		margin-bottom: 20px;

	}

	.card:hover .card-front img{

		display: none;
			
		}	
	
	
  
 /* Media query para dispositivos móviles */
@media (max-width: 768px) {
    body {
        margin: 20px; /* Reducir el margen para dispositivos móviles */
		background-image: none; 
    }

    .grid {
        grid-template-columns: repeat(1, 1fr); /* Cambiar a una sola columna en dispositivos móviles */
        gap: 10px; /* Reducir el espacio entre elementos en dispositivos móviles */
        padding: 10px; /* Reducir el relleno en dispositivos móviles */
    }

    .item {
        border-radius: 5; /* Eliminar el borde redondeado en dispositivos móviles */
        cursor: pointer;
        overflow: visible; /* Hacer que el contenido de las tarjetas sea visible */
		min-height: calc(100vw - 40px);
    }

    /* Agrega estilos específicos para la imagen dentro de las tarjetas */
    .item img {
        width: 100%;
        height: auto;
        display: block;
    }

    .card {
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
    }

    .card-back {
        background-color: none;
    }

    .texto-trasero {
        font-size: 15px; /* Reducir el tamaño de fuente en dispositivos móviles */
    }
}

.proyectos {
	color: #000;
	font-family: 'Cutive Mono', monospace;
	font-size: small;	
	
}

.sobremi {
	color: #000;
	font-family: 'Cutive Mono', monospace;
	font-size: small;
}

.contacto {
	color: #000;
	font-family: 'Cutive Mono', monospace;
	font-size: small;

}

.inline-list {
	text-size-adjust: 12px;
}

.copi p {
	font-family:Arial, Helvetica, sans-serif;
	color: coral;
	font-size: x-small;
	text-align: center;

}

.margen{
	margin-top: 0cm;
}