* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--altura: 60px;
	--color-curso: #94c57e;
	--cFondo-claro: #e2fae2;
	--color-curso: #0099ff;
	--cFondo-claro: #bde5ff;
	--color-curso: #fe7a20;
	--cFondo-claro: #f6d6c0;
	--color-curso: #7e07e4;
	--cFondo-claro: #c6a9de;



	--cTexto--dark: #8e0098;
	--cCurso--dark: #006600;
	--animate_gradient1: var(--color-curso);
	--animate_gradient2: #229911;
	--animate_gradient3: #008000;
	--animate_gradient4: #256e2b;
	--animate_gradient5: #09582d;
	--animate_gradient6: #093a1c;
}

html {
	font-size: 100%;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	margin: 0;
	padding: 0;
	margin-bottom: 50px;
}

header {
	position: fixed;
	width: 100%;
	height: 60px;
	top: 0;
	z-index: 99;
	border-top: 5px solid var(--color-curso);
	background: linear-gradient(white, #dcdddd);
	display: grid;
	grid-template-columns: 10fr 3fr 2fr;
	grid-template-areas: "cursoAprendoMas accesibilidad logoAprendoMas";
}

header .cursoAprendoMas {
	display: flex;
	height: 54px;
	font-weight: 500;
	font-size: .85em;
	float: left;
	padding: 0 5px 0 0;
	width: 100%;
	align-items: center;
	grid-area: cursoAprendoMas;
}

header .cursoAprendoMas img {
	height: 100%;
	background-color: var(--color-curso);
}

header .cursoAprendoMas div {
	color: #ffffff;
	font-weight: bold;
	background-color: var(--color-curso);
	height: 54px;
	position: relative;
	width: 50%;
	padding-left: 20px;
	display: flex;
	align-items: center;
}

header .logoAprendoMas {
	display: grid;
	justify-content: end;
	grid-area: logoAprendoMas;
}

header .logoAprendoMas img {
	width: 90px;
}

header .accesibilidad {
	height: 54px;
	grid-area: accesibilidad;
}

header .accesibilidad ul {
	margin-left: 0;
	padding-left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	align-items: center;
	margin-bottom: 0;
}

header .accesibilidad ul li {
	font-size: 30px;
	font-weight: 700;
	text-decoration: none;
	list-style-type: none;
	width: var(--altura);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

header .accesibilidad ul li:last-of-type {
	border-left: 2px solid var(--color-curso);
}

header .accesibilidad ul li a,
header .accesibilidad ul li a i,
header .accesibilidad ul li a span {
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-curso);
	text-decoration: none;
}

header .accesibilidad ul li a:hover,
header .accesibilidad ul li a:hover i,
header .accesibilidad ul li a:hover span {
	cursor: pointer;
	text-decoration: none;
	color: #808080;
}

header .accesibilidad ul li a i:hover {
	color: gray;
}

header .accesibilidad ul li#alto {
	display: none;
}

header .accesibilidad ul li#bajo {
	display: inline;
}

header .accesibilidad ul li a .material-symbols-outlined {
	font-size: 1.25em;
	font-weight: bold;
}

main {
	margin-top: 50px;
}

main .pad {
	padding-top: 50px;
	clear: both;
	width: 100%;
}

main .portadilla {
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

main .portadilla img {
	width: 60%;
	max-width: 600px;
	margin: 50px 0;
}

main h3 {
	color: var(--color-curso);
}

main .contFtrabajo {
	display: flex;
	flex-direction: row;
	justify-content: center;
	-moz-column-gap: 1em;
	column-gap: 1em;
	margin-bottom: 2em;
}

main .contFtrabajo .contFtrabajo2 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin-bottom: 20px;
}

main .contFtrabajo .textForma {
	width: 90%;
	margin-top: 1em;
}

main .contFtrabajo .iconosForma {
	display: initial;
	flex-grow: 1;
}

main .contFtrabajo .iconosForma .icono {
	border-radius: 50%;
	width: 3.5em;
	height: 3.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	background-color: var(--color-curso);
}

main .contFtrabajo .iconosForma .icono .far,
main .contFtrabajo .iconosForma .icono .fas,
main .contFtrabajo .iconosForma .icono .fab,
main .contFtrabajo .iconosForma .icono .material-icons {
	font-size: 2em;
	color: #ffffff;
}

main .linea {
	background: var(--color-curso);
	height: 4px;
	width: 100%;
	margin: 20px 0;
}

main .pleca {
	width: 90%;
	margin: 0 auto;
}

main .imagenPie {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2em;
}

main .imagenPie img {
	width: 100%;
	max-width: 400px;
}

main .imagenPie p {
	font-size: 0.75em;
	text-align: center;
	margin: 20px 0;
	overflow-wrap: anywhere;
}

main .imagenPie button {
	width: 20%;
	background-color: transparent;
	border-color: transparent;
}

main .view {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	height: 320px;
	margin: 10px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}

main .view .mask,
main .view .content {
	width: 100%;
	height: 320px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	overflow-y: scroll;
}

main .view img {
	display: block;
	position: relative;
}

main .view h2 {
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 90%;
	padding: 0px;
	background: rgba(0, 0, 0, 0.8);
	margin: 0px 0 0 0;
}

main .view p {
	font-size: 12px;
	position: relative;
	color: #fff;
	padding: 0px 20px;
	text-align: left;
}

main .view a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 8px;
	background: #000;
	color: #fff;
	margin-bottom: 50px;
	box-shadow: 0 0 1px #000;
	font-size: 12px;
}

main .view a.info:hover {
	box-shadow: 0 0 5px #000;
}

main .view-fourth img {
	width: 100%;
	transition: all 0.4s ease-in-out 0.2s;
	opacity: 1;
	margin: 0 auto;
}

main .view-fourth .mask {
	background-color: #5d5c5c;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	transition: all 0.4s ease-in;
	border-radius: 0px;
}

main .view-fourth h2 {
	opacity: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	padding-bottom: 10px;
	background: transparent;
	margin: 10px 30px 0px 30px;
	transition: all 0.5s ease-in-out;
}

main .view-fourth p {
	opacity: 0;
	transition: all 0.5s ease-in-out;
	line-height: 17px;
}

main .view-fourth a.info {
	background-color: #000;
}

main .view-fourth a.info:hover {
	background-color: var(--color-curso);
}

main .view-fourth:hover .mask {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition-delay: 0.2s;
}

main .view-fourth:hover img {
	transform: scale(0);
	opacity: 0;
	transition-delay: 0s;
}

main .view-fourth:hover h2,
main .view-fourth:hover p,
main .view-fourth:hover a.info {
	opacity: 1;
	margin-bottom: 10px;
}

main .thumb {
	background-color: #ffffff;
	width: 100%;
	max-width: 400px;
	padding-bottom: 5px;
}

main .img-mobile {
	display: none;
	text-align: left;
	font-family: 'Maven Pro', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--color-curso);
	margin: 45px 0 26px 0;
}

main .img-mobile p {
	margin-left: 0.5em;
}

main .textoCreditos {
	font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #444444;
	font-size: 100%;
}

main .textoCreditos .creditosActividad {
	display: grid;
	-moz-column-gap: 1em;
	column-gap: 1em;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1em;
}

main .textoCreditos .creditosActividad>div:first-of-type {
	font-weight: bold;
	text-align: right;
}

main .main__head {
	font-size: 16px;
	color: var(--cCurso--dark);
	line-height: 1.8;
	width: 100%;
	padding: 20px;
	display: flex;
	align-items: center;
	margin: 50px 0;
}

main .main__head img {
	width: auto;
	max-width: 100%;
}

main .cintillo {
	background-image: url("../contenido/cabezales/pleca.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	height: 180px;
	width: 100%;
	text-align: center;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

main .cintillo p {
	text-align: center;
	margin: 0 8% 0 25%;
	color: #444444;
	/* border: 1px solid; */
}

main .cintillo .plecaTexto {
	border-radius: 10px;
	position: relative;
	/* margin: 15px; */
	background-color: var(--cFondo-claro);
	text-align: center;
	color: var(--color-curso);
	border: 1px solid var(--color-curso);
	padding: 10px;
	display: none;
}

main .objetivo {
	display: flex;
	align-items: center;
}

main .cuadrosAnimados {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

main .cuadrosAnimados .cuadro {
	position: relative;
	height: auto;
	font-size: 100%;
	padding: 10px 10px 10px 30px;
	color: #4F5B62;
	margin-bottom: 30px;
	border-radius: 4px;
}

main .cuadrosAnimados .cuadro,
main .cuadrosAnimados .cuadro1,
main .cuadrosAnimados .cuadro2,
main .cuadrosAnimados .cuadro3,
main .cuadrosAnimados .cuadro4,
main .cuadrosAnimados .cuadro5,
main .cuadrosAnimados .cuadro6 {
	color: #ffffff;
	padding: 20px;
	margin: 5px;
	border-radius: 20px;
	max-width: 600px;
	width: 100%;
}

main .cuadrosAnimados .cuadro {
	background-color: var(--color-curso);
}

main .cuadrosAnimados .cuadro1 {
	background-color: var(--animate_gradient1);
}

main .cuadrosAnimados .cuadro2 {
	background-color: var(--animate_gradient2);
}

main .cuadrosAnimados .cuadro3 {
	background-color: var(--animate_gradient3);
}

main .cuadrosAnimados .cuadro4 {
	background-color: var(--animate_gradient4);
}

main .cuadrosAnimados .cuadro5 {
	background-color: var(--animate_gradient5);
}

main .cuadrosAnimados .cuadro6 {
	background-color: var(--animate_gradient6);
}

main .caja {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	text-align: justify;
	background-color: var(--color-curso);
	background-repeat: no-repeat;
	background-position-x: 96%;
	background-position-y: 41%;
	margin: 0 0 25px;
	overflow: hidden;
	padding: 20px;
	-moz-border-radius: 35px 0px 35px 0px;
	-webkit-border-radius: 35px 0px 35px 0px;
	border-radius: 35px 0px 35px 0px;
}

main .caja .cajatxt {
	color: #ffffff;
	font-size: 17px;
	font-weight: 400;
	text-align: justify;
}

main .animate {
	width: 300px;
	height: 180px;
	padding: 20px;
	margin: 5px;
}

main .animate~.cdr {
	color: #ffff;
	background-color: rgba(17, 110, 17, 0.6);
	position: absolute;
	bottom: 104px;
	left: 44px;
	width: auto;
	height: 50px;
	padding: 10px;
}

main .animate~.cdr .cdr_txt {
	color: #ffffff;
	font-size: 1.3em;
}

main .contenedorVideos {
	display: flex;
	justify-content: space-evenly;
}

main .cuadroVideo {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 20px;
}

main .cuadroVideo video {
	padding-bottom: 5px;
	height: auto;
	width: 100%;
	max-width: 400px;
}

main .cuadroVideo p {
	font-size: 0.75em;
	text-align: center;
	margin: 20px 0;
	overflow-wrap: anywhere;
}

main .table {
	background-color: var(--color-curso);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	margin: 0 auto;
}

main .table>thead:first-child>tr:first-child>th {
	vertical-align: middle;
}

main .imagenAudio {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

main .imagenAudio audio {
	width: 250px;
	margin-top: 30px;
}

main .imagenAudio p {
	font-size: 0.75em;
	text-align: center;
	margin: 20px 0;
	overflow-wrap: anywhere;
}

main .imagenModal {
	display: flex;
	flex-direction: column;
	align-items: center;
}

main .imagenModal>img {
	width: 100%;
	max-width: 400px;
	cursor: zoom-in;
	transition: 0.3s;
}

main .imagenModal>img:hover {
	opacity: 0.7;
}

main .imagenModal p {
	font-size: 0.75em;
	text-align: center;
	margin: 20px 0;
	overflow-wrap: anywhere;
}

main .imagenModal button {
	width: 20%;
	background-color: transparent;
	border-color: transparent;
}

main .imagenModal .modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 60px;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.9);
}

main .imagenModal .modal .modal-content {
	margin: auto;
	display: block;
	width: 90%;
	max-width: 800px;
}

main .imagenModal .modal #caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

main .imagenModal .modal .modal-content,
main .imagenModal .modal #caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

main .imagenModal .modal .close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

main .imagenModal .modal .close:hover,
main .imagenModal .modal .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

@counter-style minusculas {
	system: extends lower-alpha;
	suffix: ') ';
}

main ol.lista-min {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	list-style: minusculas;
	font-size: 16px;
	padding-inline-start: 40px;
}

main ol.lista-min li {
	margin-bottom: 16px;
}

main ul li {
	margin-inline-start: 3em;
	margin-bottom: 1em;
}

main .contenedorBotones {
	display: flex;
	justify-content: space-evenly;
	margin: 10px 0;
}

main .contenedorBotones button a {
	color: #ffffff;
}

main .contenedorVideo {
	display: flex;
	justify-content: center;
	align-items: center;
}

main .contenedorVideo video {
	width: 75%;
	height: auto;
}

main .fuentes {
	float: left;
	margin-right: 10px;
}

main .fuentes .tipoFuente {
	font-weight: bold;
	margin-bottom: 10px;
}

main .fuentes i.fas {
	font-size: 30px;
	font-weight: 700;
	text-decoration: none;
	list-style-type: none;
	width: var(--altura);
	height: var(--altura);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-curso);
	border: 2px solid var(--color-curso);
	border-radius: 50%;
}

main .fuentes p,
main .fuentes p a {
	overflow-wrap: anywhere;
}

main .fuentesConsulta {
	display: flex;
	align-items: center;
	column-gap: 1em;
	margin-bottom: 10px;
}

main .fuentesConsulta>div {
	font-weight: bold;
}

main ul li p {
	margin-left: 30px;
}

main .tablaGeneral,
main .tabla1,
main .tabla2,
main .tabla3,
main .tabla-azul {
	font-size: 100%;
	color: #444;
	font-family: Gotham, Helvetica, Arial, sans-serif;
	width: 30%;
	padding: 10px;
	margin: 0 auto;
	margin-bottom: 10px;
}

main .tablaGeneral,
main .tabla1 {
	width: 70%;
}

main table ul li {
	margin-inline-start: 1em;
}

main .tablaGeneral th,
main .tablaGeneral td {
	border: 1px solid var(--cFondo-claro);
	padding: 10px;
}

main .tablaGeneral tbody tr td:first-of-type {
	background-color: var(--cFondo-claro);
}

main .tablaGeneral thead th {
	border-left: medium none;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	background-color: var(--cFondo-claro);
	color: #014a7e;
	border: 1px solid var(--cFondo-claro);
}

main .tabla1 tbody tr td,
main .tabla2 tbody tr td,
main .tabla3 tbody tr td {
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--cFondo-claro);
	word-wrap: anywhere;
	hyphens: auto;
	width: 25%;
	padding: 10px;
}

main .tabla2 {
	width: 40%;
}

main .tabla3 {
	width: 60%;
}

main .tabla3 th {
	background-color: var(--color-curso);
	padding: 5px 0;
	text-align: center;
}

main .tabla-azul tbody tr td {
	padding: 0.5em;
	border-spacing: 20px;
	text-align: center;
	vertical-align: middle;
}

main .tabla-azul tbody tr td:first-of-type {
	width: 25%;
	background-color: #487fad;
}

main .tabla-azul tbody tr:nth-child(odd) td:last-of-type {
	background-color: #b3cce0;
}

main .tabla-azul tbody tr:nth-child(even) td:last-of-type {
	background-color: #d9e5ef;
}

main ol {
	padding-inline-start: 3em;
}

main .bloc {
	width: 60%;
	margin: 2em auto;
	box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}

main .bloc .superior {
	width: 100%;
	height: 50px;
	background: var(--color-curso);
	border-radius: 5px 5px 0 0;
}

main .bloc .papel {
	--paper-color: #f1ede9;
	--paper-line: #94acd4;
	width: 100%;
	height: 100%;
	padding: 40px 20px;
	background: repeating-linear-gradient(var(--paper-color), var(--paper-color) 31px, var(--paper-line) 31px, var(--paper-line) 32px);
	line-height: 32px;
	outline: 0;
}

main .bloc .papel ul li {
	margin-bottom: 0;
}

main .hoja {
	width: 60%;
	margin: 2em auto;
	background-color: var(--cFondo-claro);
	background-image:
		linear-gradient(90deg,
			var(--cFondo-claro) 12px, 0,
			#000 15px, 0,
			#000 20px, 0,
			var(--cFondo-claro) 100%),
		radial-gradient(circle closest-side,
			#1babcf00 88%,
			var(--cFondo-claro) 100%),
		radial-gradient(circle at 22px 8px,
			#000 40%,
			#000 40%,
			#00486B 100%);
	background-size: 32px 8px, 32px 16px, 32px 16px;
	background-repeat: space no-repeat;
	background-position: center top, center 6px, center 6px;
	padding: 40px 20px 5px 20px;
	box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}

main .hojas {
	background: #fafafa;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 300px 25px rgba(222, 198, 122, 0.7) inset;
	width: 350px;
	margin: 2em auto;
	padding: 24px;
	position: relative;
}

main .hojas:before,
main .hojas:after {
	content: "";
	background: #fafafa;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 300px rgba(222, 198, 122, 0.7);
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -2;
	transition: .5s;
}

main .hojas:before {
	left: -5px;
	top: 2px;
	transform: rotate(-1.5deg);
}

main .hojas:after {
	right: -3px;
	top: 0px;
	transform: rotate(2.4deg);
}

main .hojas:hover:before {
	transform: rotate(0deg);
	border: solid rgba(111, 99, 61, 0.4);
	border-width: 0px 0px 0px 1px;
	left: -6px;
	top: -6px;
}

main .hojas:hover:after {
	transform: rotate(0deg);
	border: solid rgba(111, 99, 61, 0.4);
	border-width: 0px 0px 0px 1px;
	right: 3px;
	top: -3px;
}

main .hoja-pin {
	--paper-dark: #e5c93d;
	--paper-color: #ffed87;
	--paper-shadow: #c9bf8d;
	position: relative;
	margin: 2em auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 40%;
	min-height: 175px;
	background: linear-gradient(135deg,
			var(--paper-dark),
			30%,
			var(--paper-color));
	box-shadow: 3px 3px 2px var(--paper-shadow);
	transform: rotate(10deg);
	transform-origin: center center;
	padding: 15px;
	margin-bottom: 50px;
	padding-top: 40px;
}

main .hoja-pin p {
	margin: auto;
}

main .hoja ul li,
main .hoja-pin ul li,
main .hojas ul li {
	margin-inline-start: 1em;
	margin-bottom: 1em;
}

main .bloc .papel ul li {
	margin-inline-start: 1em;
	margin-bottom: 0;
}

main .hoja-pin .pin {
	--pin-color: #d02627;
	--pin-dark: #9e0608;
	--pin-light: #fc7e7d;
	--pin-color: var(--color-curso);
	--pin-dark: #9e3e06;
	--pin-light: #fca47d;
	--pin-color: var(--color-curso);
	--pin-dark: #1d069e;
	--pin-light: #8e7dfc;
	--pin-color: var(--color-curso);
	--pin-dark: #069e0b;
	--pin-light: #7dfcbf;
	--pin-color: var(--color-curso);
	--pin-dark: #062e9e;
	--pin-light: #7da4fc;
	position: absolute;
	top: 0;
	left: 20px;
	width: 60px;
	height: 50px;
}

main .hoja-pin .shadow {
	position: absolute;
	top: 18px;
	left: -8px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
}

main .hoja-pin .metal {
	position: absolute;
	width: 5px;
	height: 20px;
	background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
	border-radius: 0 0 30% 30%;
	transform: rotate(50deg);
	transform-origin: bottom left;
	top: 15px;
	border-bottom: 1px solid #808080;
}

main .hoja-pin .bottom-circle {
	position: absolute;
	right: 15px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: var(--pin-color);
	background: radial-gradient(circle at bottom right,
			var(--pin-light),
			25%,
			var(--pin-dark),
			90%,
			var(--pin-color));
}

main .hoja-pin .bottom-circle::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2px;
	width: 20px;
	height: 30px;
	transform: rotate(55deg);
	transform-origin: 100% 100%;
	border-radius: 0 0 40% 40%;
	background: linear-gradient(to right,
			var(--pin-dark),
			30%,
			var(--pin-color),
			90%,
			var(--pin-light));
}

main .hoja-pin .bottom-circle::after {
	content: "";
	position: absolute;
	right: -10px;
	top: -5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(circle at right,
			var(--pin-light),
			30%,
			var(--pin-color),
			var(--pin-dark) 80%);
}

main section.nota-cinta {
	width: 325px;
	min-height: 200px;
	padding: 20px;
	margin: 20px 22px 44px 22px;
	position: relative;
	font-size: 16px;
	vertical-align: top;
	display: inline-block;
	color: #4b453c;
	line-height: 34px;
	text-align: center;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

main section.nota-cinta:before {
	display: block;
	content: "";
	background: #e3c87266;
	width: 130px;
	height: 28px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	border-radius: 6px/18px 0;
	position: absolute;
	top: -13px;
	left: 50px;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

main section.nota-cinta.note-blue {
	background: #b9dcf4;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

main section.nota-cinta.note-pink {
	background: #ffbda3;
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

main section.nota-cinta.note-yellow {
	background: #f7e999;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

main section.nota-cinta p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 24px;
}

@media (max-width: 767px) {
	main section.nota-cinta {
		width: 150px;
	}
}

main .contenedor-flecha {
	height: 300px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1em;
}

main .contenedor-flecha .flecha {
	clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
	background-color: var(--color-curso);
	width: 300px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 20px;
}

main .contenedor-flecha .flecha p {
	margin: 0;
	padding: 14px;
	color: #ffffff;
}

main .texto-invisible {
	font-weight: bold;
}

footer {
	margin-top: 50px;
}

footer #pagination {
	font-family: Verdana, Geneva, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

footer #pagination a:hover {
	cursor: pointer;
	background-color: var(--color-curso);
	opacity: 0.5;
	transition: background-color 0.3s;
}

footer #pagination ul {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #444444;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	-webkit-padding-start: 0;
	padding-inline-start: 0;
}

footer #pagination ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	margin: 2px;
	padding: 0;
	font-size: 12px;
	list-style: none;
	float: left;
	background-color: #ffffff;
}

footer #pagination ul li a {
	margin: 0 0.25em;
	color: #4c4c4c;
	display: block;
	float: left;
	padding: 4px 9px;
	text-decoration: none;
	border: 1px solid #eaeaea;
}

footer #pagination ul li.previous,
footer #pagination ul li.next {
	-webkit-animation: fadein .5s;
	animation: fadein .5s;
	font-weight: bold;
}

footer #pagination ul li.active {
	border: 1px solid var(--color-curso);
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	display: block;
	float: left;
	padding: 4px 9px;
	margin: 2px;
	background-color: var(--color-curso);
}

footer #pagination ul li.active a {
	background-color: var(--color-curso);
}

footer a.go-top {
	text-decoration: none;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	padding: 1em;
	display: none;
}

footer a.go-top:hover {
	background-color: var(--color-curso);
}

@media (max-width: 767px) {
	header {
		height: 120px;
		grid-template-columns: 10fr 2fr;
		grid-template-areas: "cursoAprendoMas logoAprendoMas"
			"accesibilidad accesibilidad";
	}

	header .cursoAprendoMas div {
		width: 100%;
		font-size: 10px;
		padding-left: 10px;
	}

	header .accesibilidad ul li {
		font-size: 20px;
	}

	main {
		margin-top: 130px;
	}

	main .thumb {
		display: none;
	}

	main .img-mobile {
		display: block;
		margin-top: 0;
	}

	main .pleca {
		display: none;
	}

	main .cintillo .plecaTexto {
		display: inherit;
	}

	main .cintillo .img-mobile {
		display: block;
		margin-top: 0;
		background-color: var(--cFondo-claro);
		border-radius: 0px 38px 38px 191px;
		padding: 10px 10px 10px 50px;
	}

	main .objetivo {
		flex-direction: column;
	}

	main .contFtrabajo {
		flex-direction: column;
		margin-bottom: 0;
	}

	main .contFtrabajo .textForma {
		width: 100%;
	}

	main .contFtrabajo .iconosForma {
		margin-bottom: 0.5em;
	}

	main .view-fourth img {
		width: 100%;
	}

	main .textoCreditos .creditosActividad {
		grid-template-columns: none;
		grid-template-rows: 0.1fr 1fr;
	}

	main .textoCreditos .creditosActividad>div:first-of-type {
		text-align: left;
	}

	main .main__head {
		display: none;
	}

	main .imagenPie button {
		width: 75%;
		background-color: transparent;
		border-color: transparent;
	}

	main .contFtrabajo .contFtrabajo2 {
		display: grid;
		grid-template-columns: none;
	}

	main .audio-personajes {
		row-gap: 10px;
		flex-direction: column;
	}

	main .contenedorVideos {
		flex-direction: column;
	}

	main .imagenModal .modal .modal-content {
		width: 100%;
	}

	main .imagenModal .modal .close {
		top: 70px;
		right: 10px;
	}

	main .tabla-azul {
		width: 80%;
	}

	main .tabla1,
	main .tabla3 {
		width: 100%;
	}

	main .tablaGeneral {
		margin: 0;
		font-size: 80%;
	}

	main .bloc,
	main .hoja,
	main .hojas {
		width: 100%;
	}

	main .hoja-pin {
		width: 100%;
		transform: rotate(0);
	}

	main section.nota-cinta {
		width: 200px;
	}

	main .cintillo {
		background-image: none;
	}

	main .cintillo p {
		font-weight: normal;
		text-align: center;
		margin: 15px;
		padding: 10px;
		border: 2px solid var(--color-curso);
		border-radius: 15px;
		background-color: var(--cFondo-claro);
		color: var(--color-curso);
	}
	main .texto-invisible {
		display: none;	
	}
}

@media print {

	.accesibilidad,
	.cintillo,
	main p a[href^=tema]::after,
	footer>.contGralPaginador>#pagination>ul>li>a[href^=tema] {
		display: none;
	}

	footer a.go-top {
		display: none !important;
	}

	img[alt^=bocadillo]
	{
		margin-top: 60px;
		page-break-before: always;
	}

	main iframe,
	main .imagenPie img,
	main .imagenModal img {
		width: 40%;
	}

	main .imagenAudio audio,
	main .cuadroVideo video {
		border: 1px solid;
	}

	main .imagenAudio audio::-webkit-media-controls-play-button {
		display: initial;
		border: 1px solid;
	}

	main .contenedorBotones button a[href^=recursos]::after {
		display: none;
	}
}

/* ----------- JLBG  ------------------ */
audio {
	width: 90%;
}

.clear {
	clear: both;
}

main  a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 8px;
	background: #000;
	color: #fff;
	margin-bottom: 50px;
	box-shadow: 0 0 1px #000;
	font-size: 1.5em;
}
main a.info {
	background-color: var(--color-curso);
}
main .view-fourth:hover h2,
main .view-fourth:hover p,
main a.info {
	opacity: 1;
	margin-bottom: 10px;
}