:root {
	--color-primario: #00371A;
	--color-secundario: #BDD82F;

	--color-gray1: #E8E8E8;
	--color-gray2: #C7C7C7;
	--color-gray3: #8E8E8E;
	--color-gray4: #4C4C4C;

	--color-aprobado: #49AD0B;
	--color-aprobado-light: #D5FFBA;
	--color-aprobado-dark: #256000;

	--color-error: #EE1111;
	--color-error-light: #FFE5E5;
	--color-error-dark: #811313;

	--shadow1: 0px 8px 20px -4px rgba(0,0,0,0.6);
}




* 								{font-family: "Barlow", serif; box-sizing: border-box;}
body 							{font-size: 18px; font-weight: 400; line-height: 1.1;}
.img-int						{width: 100%; height: 100%; object-fit: cover;}
.cl-normal 						{width: 1200px;margin: auto;}


.c1  							{background: var(--color-aprobado);}
.c2  							{background: var(--color-aprobado-light);}
.c3  							{background: var(--color-aprobado-dark);}
.c4  							{background: var(--color-error);}
.c5  							{background: var(--color-error-light);}
.c6  							{background: var(--color-error-dark);}
.c7  							{background: var(--color-gray1);}
.c8  							{background: var(--color-gray2);}
.c9	 							{background: var(--color-gray3);}
.c10 							{background: var(--color-gray4);}



.kit 							{width: 100%; overflow: hidden;
	.wrap 						{width: fit-content; display: flex; align-items: flex-start; padding: 50px;}
	.item 						{display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;}
	.line 						{width: 1px; height: 640px; background: var(--color-gray2); margin: 0px 50px;}
	.title 						{width: 100%; font-size: 50px; font-weight: 700; color: var(--color-gray4); margin: 0px 0px 20px 0px;}
	.color 						{width: 80px; height: 80px; border-radius: 26px;}
	.itemC						{width: 580px;}
	.itemD						{width: 750px; justify-content: space-between;}
	.itemB						{width: 350px;}
	.sep1						{display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;}
	.scroll						{overflow: auto;}
	.clInt						{width: 48%; display: flex; flex-direction: column; gap: 20px; align-items: flex-start;}
}

/* WTSP */
.icof4e 						{background: rgb(45, 175, 45); transition: .3s; animation: wtsp 1s infinite; cursor: pointer; position: fixed; bottom: 20px; right: 20px; z-index: 90; color: white; display: flex; font-size: 32px; width: 56px; height: 56px; justify-content: center; align-items: center; border-radius: 18px 18px 0px 18px;
	&:hover 					{background: black; transform: scale(1.1); animation: both;}
	&:active 					{transform: scale(1);}
}

@keyframes wtsp 				{
	0% {transform: scale(1);}
	50% {transform: scale(1.08);}
	100% {transform: scale(1);}
}

/* BOTONES */
.bt1 							{display: flex; background: var(--color-gray4); color: white; width: 100%; height: 40px; font-weight: 500; justify-content: space-between; align-items: center; padding: 0px 14px 0px 14px; border-radius: 14px; cursor: pointer; transition: .3s;}
.ico2d3t 						{}
.bt1:hover						{background: black; transform: scale(1.02); box-shadow: var(--shadow1);}
.bt1:active						{transform: scale(.98); box-shadow: none;}
.bt2 							{color: var(--color-gray4); display: flex; align-items: flex-start; gap: 3px; cursor: pointer; flex-wrap: wrap; transition: .3s;}
.bt2:hover						{color: var(--color-aprobado);}

.bt2:hover 
.btnLine 						{width: 100%;}

.icod33 						{margin: 1px 0px 0px 0px;}
.btLineW 						{width: 100%; margin: 2px 0px 0px 0px;}
.btnLine 						{display: block; width: 0%; height: 3px; background: var(--color-aprobado); transition: .6s;}
.bt3 							{color: var(--color-gray4); display: flex; align-items: flex-start; gap: 3px; cursor: pointer; flex-wrap: wrap; transition: .3s; font-size: 16px; font-weight: 500;}
.icosw1							{margin: 1px 0px 0px 0px;}
.bt3:hover						{color: var(--color-aprobado);}

.bt3:hover 
.btnLine 						{width: 100%;}





/* INPUTS */
.check[type="checkbox"] 		{appearance: none; width: 15px; height: 15px; background: white; border: 1px solid var(--color-gray4); border-radius: 5px; margin: 2px 0px 0px 0px;}
.checkA 						{display: flex; align-items: flex-start; gap: 3px; cursor: pointer;}
.check:checked::before 			{content: "✔"; width: 100%; height: 100%; display: flex; font-size: 11px; justify-content: center; align-items: center; background: var(--color-aprobado);}
.check:checked 					{border: 1px solid var(--color-aprobado); color: white;}
.checkA:has(.check:checked) 	{color: var(--color-aprobado);}

/* ---- */

.radio[type="radio"] 			{appearance: none; width: 15px; height: 15px; background: white; border: 1px solid var(--color-gray4); border-radius: 5px; margin: 2px 0px 0px 0px;}
.radioA 						{display: flex; align-items: flex-start; gap: 3px; cursor: pointer;}
.radio:checked::before 			{content: "✔"; width: 100%; height: 100%; display: flex; font-size: 11px; justify-content: center; align-items: center; background: var(--color-aprobado);}
.radio:checked 					{border: 1px solid var(--color-aprobado); color: white;}
.radioA:has(.radio:checked) 	{color: var(--color-aprobado);}

/* ---- */

.campo1 						{width: 100%; display: flex; align-items: center; position: relative;}
.campo1:hover .ico2de 			{color: var(--color-aprobado);}
.campo1:hover .campo1a 			{border: 1px solid var(--color-aprobado);}

.campo1:hover 
.campo1a::placeholder 			{color: var(--color-aprobado);}

.campo1a::placeholder 			{transition: .3s; font-weight: 400;}
.campo1d::placeholder 			{transition: .3s; font-weight: 400;}
.campo1a:focus 					{transform: scale(1.02); box-shadow: var(--shadow2); border: 1px solid var(--color-aprobado); color: var(--color-aprobado);}
.campo1a:focus + .ico2de 		{color: var(--color-aprobado); }
.campo1a 						{border: 1px solid black; width: 100%; font-size: 19px; height: 40px; padding: 0px 42px 0px 12px; border-radius: 12px; font-weight: 500; transition: .3s;}
.campo1b 						{border: 1px solid black; width: 100%; font-size: 19px; height: 40px; padding: 5px 35px 4px 7px; border-radius: 12px; font-weight: 500; transition: .3s;}
.campo1c 						{border: 1px solid black; width: 100%; font-size: 19px; height: 40px; padding: 6px 42px 4px 12px; border-radius: 12px; font-weight: 500; transition: .3s;}
.campo1d 						{border: 1px solid black; width: 100%; font-size: 19px; height: 40px; padding: 0px 40px 0px 12px; border-radius: 12px; font-weight: 500; transition: .3s;}
.campo1e 						{border: 1px solid black; width: 100%; font-size: 12px; height: 40px; padding: 9px 42px 4px 9px; border-radius: 12px; font-weight: 500; transition: .3s;}
.campo1:hover .campo1b 			{border: 1px solid var(--color-aprobado);}
.campo1b:focus 					{transform: scale(1.02); box-shadow: var(--shadow2); border: 1px solid var(--color-aprobado); color: var(--color-aprobado);}
.campo1b:focus + .ico2de 		{color: var(--color-aprobado);}
.campo1:hover .campo1c 			{border: 1px solid var(--color-aprobado);}
.campo1c:focus 					{transform: scale(1.02); box-shadow: var(--shadow2); border: 1px solid var(--color-aprobado); color: var(--color-aprobado);}
.campo1c:focus + .ico2de 		{color: var(--color-aprobado);}
.campo1:hover .campo1d 			{border: 1px solid var(--color-aprobado);}
.campo1d:focus 					{box-shadow: var(--shadow2); border: 1px solid var(--color-aprobado); color: var(--color-aprobado);}
.campo1:hover .campo1e 			{border: 1px solid var(--color-aprobado);}
.ico2de 						{margin: -2px 0px 0px -32px; font-size: 20px; transition: .3s;}

.campo1:hover 
.campo1d::placeholder 			{color: var(--color-aprobado); transition: .3s;}

/* ---- */

.campo2 						{width: 100%; position: relative;}
.campo2a 						{width: 100%; font-size: 19px; height: 40px; padding: 5px 42px 3px 12px; border-radius: 12px; outline: 1px solid black; background: white; transition: outline-color 500ms; font-weight: 500;}
.campo2a::placeholder 			{color: black; font-weight: 400; position: relative; top: -3px; transition: .4s;}
.campo2a:is(:focus, :valid) 	{outline-color: var(--color-aprobado); color: var(--color-aprobado); font-weight: 500;}
.campo2a:focus::placeholder 	{color: white; transition: .4s;}
.campo2Label 					{position: absolute; top: 0; left: 0; padding-inline: 12px; translate: 10px -12px; scale: .0; background: white; z-index: 1; color: var(--color-aprobado); font-weight: 500; opacity: 0; transition: .3s;}

.campo2a:focus +
.campo2Label,
.campo2a:valid +
.campo2Label 					{opacity: 1; scale: .9;}

.-webkit-color-swatch-wrapper 	{padding: 0px !important;}
.-webkit-color-swatch 			{border-radius: 20px !important; height: 50px !important;}

.btn2de							{background: black; color: white; position: absolute; transition: .3s; cursor: pointer; top: 0px; right: 0px; font-size: 20px; width: 40px; height: 40px; margin: 0px 0px 0px 0px; display: flex; justify-content: center; align-items: center; border-radius: 10px;
	&:hover 					{background: var(--color-aprobado); transform: scale(1.1);}
	&:active 					{transform: scale(.95);}
}

.inp1 							{padding: 3px 8px 4px 12px !important;}
.inp2 							{height: auto !important;padding: 13px 13px 13px 13px !important;}
.compo 							{width: 100%;border: 1px solid black;border-radius: 30px;padding: 24px 28px;}
.title2 						{text-transform: uppercase;font-size: 25px;font-weight: 800;color: var(--color-gray4);margin: 0px 0px 15px 0px;}
.numeracion 					{display: flex;align-items: center;justify-content: center;gap: 5px;}
.ico-direction 					{font-size: 22px;margin: -3px 0px 0px 0px;}
.nro 							{display: flex;justify-content: center;align-items: center;color: black;font-weight: 600;font-size: 18px;width: 35px;height: 35px;border-radius: 100px;transition: .3s;}
.nro:hover 						{background: var(--color-aprobado);color: white;transform: scale(1.1);}
.suspens 						{margin: 0px -4px;}








/* HOVER COMO GALERIA */
.hover 							{display: flex; align-items: center; justify-content: space-between; transition: 0.5s .1s; }
.hovItem 						{background: var(--color-gray3); width: 22%; height: 50px; border-radius: 16px; opacity: 1; cursor: pointer; transition: 0.5s .1s; }
.hovItem:hover 					{transform: scale(1.1); background: var(--color-gray4);}
.hover:hover > :not(:hover) 	{opacity: .4; transition: 0.5s .1s; }
/* HOVER COMO GALERIA */




/* SLIDER */
.sliderpure 					{width: 100%; height: 140px; position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; align-items: center; border-radius: 20px; }
.slitem 						{width: 100%; left: 0; position: sticky; object-fit: cover; border-radius: 10px; scroll-snap-align: center; }
/* SLIDER */



/* ACORDEON */
.acordeon						{position: absolute; opacity: 0; z-index: -1; }
.tabs 							{border-radius: 8px; overflow: hidden; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); }

.tab 							{width: 100%; color: white; overflow: hidden; }
.tab-label 						{display: flex; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer; }
.tab-label:hover 				{background: #1a252f; }
.tab-label::after 				{content: "❯"; width: 1em; height: 1em; text-align: center; transition: all 0.35s; }
.tab-content 					{max-height: 0; padding: 0 1em; color: #2c3e50; background: white; transition: all 0.35s; }
.tab-close 						{display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: #2c3e50; cursor: pointer; }
.tab-close:hover 				{background: #1a252f; }

.acordeon:checked 
+ .tab-label	 				{background: #1a252f; }

.acordeon:checked 
+ .tab-label::after 			{transform: rotate(90deg); }

.acordeon:checked ~ .tab-content {max-height: 100vh; padding: 1em; }
/* ACORDEON */





/* RANGO */
.campo3 						{width: 100%;}
.rango[type="range"] 			{font-size: 1.5rem; width: 100%; color: var(--color-aprobado); --thumb-height: 1.125em; --track-height: 0.125em; --track-color: rgba(0, 0, 0, 0.2); --brightness-hover: 180%; --brightness-down: 80%; --clip-edges: 0.125em; position: relative; background: #fff0; overflow: hidden;}

/* === range commons === */
.rango[type="range"]:active 	{cursor: grabbing;}

.rango[type="range"]:disabled 	{filter: grayscale(1); opacity: 0.3; cursor: not-allowed;}

/* === WebKit specific styles === */
.rango[type="range"],
.rango[type="range"]::-webkit-slider-runnable-track,
.rango[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; transition: all ease 100ms; height: var(--thumb-height);
}

.rango[type="range"]::-webkit-slider-runnable-track,
.rango[type="range"]::-webkit-slider-thumb {
	position: relative;
}

.rango[type="range"]::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px); --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px); --clip-bottom: calc(var(--thumb-height) - var(--clip-top)); --clip-further: calc(100% + 1px); --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor; width: var(--thumb-width, var(--thumb-height)); background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px); background-color: currentColor; box-shadow: var(--box-fill); border-radius: var(--thumb-width, var(--thumb-height)); filter: brightness(100%);

	clip-path: polygon(
		100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further)
	);
}

.rango[type="range"]:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover)); cursor: grab;
}

.rango[type="range"]:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down)); cursor: grabbing;
}

.rango[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

.rango[type="range"]:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
.rango[type="range"],
.rango[type="range"]::-moz-range-track,
.rango[type="range"]::-moz-range-thumb {
	appearance: none; transition: all ease 100ms; height: var(--thumb-height);
}

.rango[type="range"]::-moz-range-track,
.rango[type="range"]::-moz-range-thumb,
.rango[type="range"]::-moz-range-progress {
	background: #fff0;
}

.rango[type="range"]::-moz-range-thumb {
	background: currentColor; border: 0; width: var(--thumb-width, var(--thumb-height)); border-radius: var(--thumb-width, var(--thumb-height)); cursor: grab;
}

.rango[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}

.rango[type="range"]::-moz-range-track {
	width: 100%; background: var(--track-color);
}

.rango[type="range"]::-moz-range-progress {
	appearance: none; background: currentColor; transition-delay: 30ms;
}

.rango[type="range"]::-moz-range-track,
.rango[type="range"]::-moz-range-progress {
	height: calc(var(--track-height) + 1px); border-radius: var(--track-height);
}

.rango[type="range"]::-moz-range-thumb,
.rango[type="range"]::-moz-range-progress {
	filter: brightness(100%);
}

.rango[type="range"]:hover::-moz-range-thumb,
.rango[type="range"]:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

.rango[type="range"]:active::-moz-range-thumb,
.rango[type="range"]:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

.rango[type="range"]:disabled::-moz-range-thumb {
	cursor: not-allowed;
} 
/* RANGO */



/* PUNTUACION */
.rating {
	display: inline-block;
}
.rating input {
	display: none;
}
.rating label {
	float: right; cursor: pointer; transition: color 0.3s;
}
.rating label:before {
	content: "\2605"; font-size: 30px;
}
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
	color: #ffd700; transition: color 0.3s;
}
/* PUNTUACION */



/* SWITCH */
.switch[type=checkbox]{
	height: 0; width: 0; visibility: hidden;
}
.switchLbl {
	cursor: pointer; text-indent: -9999px; width: 70px; height: 40px; background: var(--color-error); display: block; border-radius: 100px; position: relative;
}
.switchLbl:after {
	content: ''; position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; background: #fff; border-radius: 90px; transition: 0.3s;
}
.switch:checked + .switchLbl {
	background: var(--color-aprobado);
}
.switch:checked + .switchLbl:after {
	left: calc(100% - 5px); transform: translateX(-100%);
}
.switchLbl:active:after {
	width: 50px;
}
/* SWITCH */




/* MENU LATERAL */


/* MENU LATERAL */











/* SCROLL  */
body::-webkit-scrollbar {width: 15px; transition: .2s; overflow: auto; }
body::-webkit-scrollbar-track {background: gray; transition: .2s; }
body::-webkit-scrollbar-thumb {transition: .2s; background: black; border-radius: 20px; }











@media ( width <= 1400px ) {

.cl-normal 	{width: 900px;margin: auto;}
}

@media ( width <= 960px ) {

.cl-normal 	{width: 600px;margin: auto;}
}

@media ( width <= 650px ) {

.cl-normal 	{width: 300px;margin: auto;}
}