/* .reja {
	
	margin: .1rem;
	display: grid;
	grid-template-columns: repeat(13, 1fr);
	grid-template-rows: repeat(9, 1fr);
	max-width: 100%;


} */
.contiene {


	display: flex;
	justify-content: center;
	align-items: center;


}


.reja {
	display: grid;
	
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
	gap: 0px;
	margin-bottom: 20rem;
	margin-top: 5rem;
}
.div22 {
    grid-column-start: 2;
    grid-row-start: 3;
}

.div3 {
    grid-column-start: 3;
    grid-row-start: 2;
}

.div4 {
    grid-column-start: 3;
    grid-row-start: 3;
}

.div5 {
    grid-column-start: 3;
    grid-row-start: 4;
}

.div6 {
    grid-column-start: 4;
    grid-row-start: 3;
}

.div7 {
    grid-column-start: 5;
    grid-row-start: 2;
}

.div8 {
    grid-column-start: 5;
    grid-row-start: 3;
}

.div9 {
    grid-column-start: 5;
    grid-row-start: 4;
}

.div10 {
    grid-column-start: 6;
    grid-row-start: 3;
}

.div11 {
    grid-column-start: 7;
    grid-row-start: 3;
}

.div12 {
    grid-column: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 2;
}

.div13 {
    grid-column: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 3;
}

.div14 {
    grid-column: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 4;
}
.enteroFinal {
    grid-column: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 3;
}






/* centramos texto*/

.reja div {
	text-align: center;

}

.boton {
	background-color: #146C94;
	color: white;
	padding: 1rem 1rem;
	margin-top: 1rem;
	font-size: 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: .5rem;
	width: 100%;
	text-align: center;
	border: none;
}

@media (min-width: 768px) {
	.boton {
		width: auto;
	}

	.reja {
		margin-left: 10rem;
		margin-right: 10rem;
	}

	body {
		font-size: 18px;
	}

	input::placeholder {
		font-size: 10px; /* ajusta según sea necesario */
	  }
}

.boton:hover {
	cursor: pointer;
}

input {
	text-align: center;
	
	width: 94%;
}



/* Animación de parpadeo del cursor */
@keyframes blink-cursor {
	0% {
		border-right: 0.08em solid #2bbc8a;
		/* Color del cursor */
	}

	50% {
		border-right: 0.08em solid #2bbc8a;
	}

	51% {
		border-right: 0.08em solid transparent;
	}

	100% {
		border-right: 0.08em solid transparent;
	}
}

.blinking {
	border-right: 2px solid black;
	/* Borde vertical negro */
	animation: blink 1.2s steps(2) infinite;
	/* Animación de parpadeo */
}

@keyframes blink {
	to {
		border-color: transparent;
		/* Borde transparente */
	}
}

@media (min-width: 1024px) {
	body {
		font-size: 20px;
	}

	.reja {
		margin-right: 30rem;
		margin-left: 30rem;
	}

	input::placeholder {
		font-size: 11px; /* ajusta según sea necesario */
	  }
}

/* Para tamaños de pantalla más pequeños */
@media (max-width: 480px) {
	body, p {
		font-size: 15px;
	}
   

	.reja {
		
		margin-bottom: 5rem;
	}

	input::placeholder {
		font-size: 7px; /* ajusta según sea necesario */
	  }
	h2 {

		font-size: 16px;
	}
}


 p { font-weight: bold;}