:root {
	--color-primario: #3EAB36;

	--color-secundario: #EC6607;

	--color-complement: #472F88;

	--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 15px 12px -10px rgba(0,0,0,0.3);
	--shadow2: 0px 14px 15px -10px rgba(0,0,0,0.2);
}


* 			{font-family: "Barlow", serif; box-sizing: border-box; color: var(--color-gray4);
}
body 		{font-size: 18px; font-weight: 400; line-height: 1.1; background: var(--color-primario);
}
.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;
	}
}


/* BOTONES */
.bt1 		{display: flex; background: var(--color-gray4); color: white; width: 100%; justify-content: space-between; align-items: flex-start; padding: 10px 14px 10px 14px; border-radius: 14px; cursor: pointer; transition: .3s;
}
.ico2d3t 	{
}
.bt1:hover	{background: black; transform: scale(1.05); box-shadow: var(--shadow1);
}
.bt1:active	{transform: scale(.95); 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: 3px 42px 4px 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: 3px 42px 4px 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;}
}