/* Reset de estilos predeterminados del navegador */
/* Puedes utilizar normalize.css o reset.css */
@import url('normalize.css'); /* Ejemplo utilizando normalize.css */

/* Establecer estilos globales */
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px; /*1 rem = 10px*/
}

* {
  box-sizing: border-box;
}

/* Contenedor global */
.container {
  max-width: 1200px; 
  margin: 0 auto; /* Centra el contenedor horizontalmente */
  padding: 20px; /* Agrega un espacio interno al contenedor */
}

.GENERAL {
	background-image: radial-gradient(circle at 50% -20.71%, #cc9800 0, #d68c00 8.33%, #e07d00 16.67%, #e86c00 25%, #ee5800 33.33%, #f33d00 41.67%, #f50000 50%, #f60018 58.33%, #f60028 66.67%, #f40037 75%, #f10047 83.33%, #ec0058 91.67%, #e4006a 100%);
	min-height: 100vh;
}

.ENCABEZADO {
	background-color: black;
	opacity: 80%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;

	box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.58);
	-webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.58);
	-moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.58);
}

.ENCABEZADO h1 {
	color: white;
	transition: 2s;
}

.ENCABEZADO h1:hover {
	color: #D61616;
}

.CONTENIDO {
	min-height: 100px;
	/*margin: VERTICAL HORIZONTAL*/
	margin: 50px 10%;
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
	box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.58);
	-webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.58);
	-moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.58);
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 5px;
}

.CONTENIDO .IMAGEN {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
	align-content: center;
	text-align: center;
	place-items: center;
}

.CONTENIDO .IMAGEN img {
	width: 80%;
}

.CONTENIDO .FORMULARIO {
	background-color: whitesmoke;
	padding: 10px;
}

.FORMULARIO .UNO,
.FORMULARIO .DOS {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 5px;
}

.FORMULARIO .TRES {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 5px;
}

.TRES #MOOD {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20%;
	align-content: center;
	/*margin: VERTICAL HORIZONTAL*/
	margin: 0% 1%;
}

.FORMULARIO .CUATRO {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 5px;
}

.PIE {}

@media (max-width: 768px) {
	.CONTENIDO {
		grid-template-columns: 1fr;
	}

	.CONTENIDO .IMAGEN {
		grid-row: 1;
	}

	.CONTENIDO .IMAGEN img{
		width: 80%;
	}

	.CONTENIDO .FORMULARIO {
		grid-row: 2;
	}
}