@font-face {
	font-family: "avenir";
	src: url(../../fonts/Avenir_Font/AvenirLTStd-Roman.otf);
}
:root {
	--main-sexo-color: rgb(64, 39, 126);

	--btn-miembros: rgb(64, 39, 126);

	--font-primary-color: #000;
}

* {
	font-family: "avenir";
}

body {
	background: url("./../../img/backgrounds/registros/Releem.png");

	color: var(--font-primary-color);

	padding: 2rem;
}

.btn-miembros {
	background-color: var(--btn-miembros);
	color: white;
}

section {
	padding: 50px;

	max-width: 900px;

	margin: 30px auto;

	background: white;

	background: white;

	backdrop-filter: blur(10px);

	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);

	border-radius: 5px;

	transition: transform 0.2s ease-in-out;
}

.form__answer {
	display: inline-block;

	box-sizing: border-box;

	width: 23%;

	margin: 20px 1% 20px 0;

	vertical-align: top;

	font-size: 22px;

	text-align: center;

	color: rgb(255, 255, 255);
}

input[name="c_miembros"] {
	opacity: 0;

	width: 0;

	height: 0;
}

#cantidad_miembros label {
	border: 2px solid;

	border-color: rgba(0, 0, 0, 0.3);

	box-sizing: border-box;

	display: block;

	width: 100%;

	padding: 10px 10px 30px 10px;

	cursor: pointer;

	opacity: 0.5;

	transition: all 0.5s ease-in-out;

	color: #000;
}

#cantidad_miembros label:hover,
#cantidad_miembros label:focus,
#cantidad_miembros label:active {
	border: 2px solid rgb(64, 39, 126);
}

input[name="c_miembros"]:active {
	opacity: 1;
}

input[name="c_miembros"]:checked {
	border: 2px solid rgb(64, 39, 126);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;

	margin: 0;
}

.col-md-9 {
	padding-left: 25px;
}

/*=========================================================*/

.yc-form {
	display: flex;
}

.yc-form input {
	position: absolute !important;

	clip: rect(0, 0, 0, 0);

	height: 1px;

	width: 1px;
}

.yc-form label {
	font-size: 1em;

	text-align: center;

	padding: 0.2em 1.1em; /*tamaño original 0.5em 2em;*/

	border: 1px solid black;
}

.yc-form label:hover {
	cursor: pointer;
}

.yc-form input#hombre1:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#mujer1:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#hombre2:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#mujer2:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#hombre3:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#mujer3:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#hombre4:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#mujer4:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form label:first-of-type {
	border-radius: 25px 0 0 25px;
}

.yc-form label:last-of-type {
	border-radius: 0 25px 25px 0;
}

.sexo {
}

/*===========================================================*/

.avoid-clicks {
	pointer-events: none;

	background-color: #e9ecef; /*NO CAMBIAR*/
}

.avoid-clicks-radio {
	pointer-events: none;
}

@media screen and (min-width: 784px){
    .cantidad_mobile{
        display: none;
    }
}



@media screen and (max-width: 784px){

  .yc-form{

    display: block;

  }

  .cantidad_desktop{
    display:none;
  }

  .cantidad_mobile{
    display: block;
  }

  .form__answer{
    display: block;
    width: 100%;
  }

}

/*================= input c_alumnos========================*/

#cantidad_alumnos label {
	border: 2px solid;

	border-color: rgba(0, 0, 0, 0.3);

	box-sizing: border-box;

	display: block;

	width: 100%;

	padding: 10px 10px 30px 10px;

	cursor: pointer;

	opacity: 0.5;

	transition: all 0.5s ease-in-out;

	color: #000;
}

#cantidad_alumnos label:hover,
#cantidad_alumnos label:focus,
#cantidad_alumnos label:active {
	border: 2px solid rgb(64, 39, 126);
}

input[name="c_alumnos"] {
	opacity: 0;

	width: 0;

	height: 0;
}

input[name="c_alumnos"]:active {
	opacity: 1;
}

input[name="c_alumnos"]:checked {
	border: 2px solid rgb(64, 39, 126);
}

/*================= input c_alumnos========================*/

/*================== radio Sexo alumnos =======================*/

.yc-form input#a_hombre1:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer1:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_hombre2:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer2:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_hombre3:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer3:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_hombre4:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer4:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_hombre5:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer5:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_hombre6:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}

.yc-form input#a_mujer6:checked + label {
	background-color: rgb(64, 39, 126);

	color: white;
}