/* Tools
---------------------------------------------------------------- */
div.tools {
	position: absolute;
	padding: 0 15px;
	width: 200px;
	z-index: 25;
}

div.tools.podcast {
	right: 0;
	top: 0;
	padding-top: 95px;
}

div.tools.sticky {
	position: fixed;
	top: 95px;
}

div.tools a {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	font-size: 12px;
	background: var(--color-blanco);
	color: var(--color-principal);
	border: 1px solid var(--color-gris-azulado-claro);
	padding: 5px;
	text-align: center;
	display: block;
	margin-bottom: 10px;
	border-radius: 12px;
}

div.tools a:hover {
	background: var(--gradient-main);
	color: var(--color-blanco);
}

div.tools a.pdf-button {
	background: var(--gradient-main);
	color: var(--color-blanco);
}

div.tools a.pdf-button:hover {
	background: var(--color-dark-blue);
	color: var(--color-blanco);
}

div.tools ul {
	margin-bottom: 10px;
	position: relative;
}

div.tools ul:hover {
	margin-bottom: 11px;
	z-index: 30;
}

div.tools *:last-child { margin-bottom: 0; }

div.tools ul li:first-child {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	font-size: 12px;
	background: var(--color-blanco);
	color: var(--color-principal);
	border: 1px solid var(--color-gris-azulado-claro);
	padding: 5px;
	text-align: center;
	display: block;
	border-radius: 12px;
	cursor: pointer;
}

div.tools ul:hover li:first-child {
	background: var(--color-gris-azulado-claro);
	border-radius: 12px 12px 0 0;
	border-bottom: none;
}

div.tools ul li:last-child {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--color-clear);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
	display: none;
}

div.tools ul:hover li:last-child { display: block; }

div.tools ul li:last-child a {
	font-size: 11px;
	background: transparent;
	border: none;
	border-top: 1px solid var(--color-gris-azulado-claro);
	border-radius: 0;
	margin: 0;
	text-align: left;
	padding: 5px 30px 5px 10px;
	position: relative;
}

div.tools ul li:last-child a:hover { background: var(--gradient-main); }

div.tools ul li:last-child a i {
	display: block;
	position: absolute;
	right: 10px;
	top: 4px;
	font-size: 10px;
	color: var(--color-teal);
}

div.tools ul li:last-child a:hover i { color: var(--color-blanco); }

div.tools div.mobile-trigger {
	display: none;
	width: 55px;
	height: 40px;
	background: var(--gradient-main);
	border-radius: 50px 0 0 50px;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

div.tools div.mobile-trigger span {
	display: block;
	height: 4px;
	width: 30px;
	background: var(--color-blanco);
	position: absolute;
	top: 18px;
	left: 10px;
}

div.tools div.mobile-trigger span::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(90deg);
	background: var(--color-blanco);
	transition: transform .3s ease;
}

div.tools.activo { z-index: 200; }
div.tools.activo div.mobile-trigger span::after { transform: rotate(0deg); }

div.tools.activo::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--overlay-claro);
}

@media (max-width: 1199px) {
	div.tools { position: fixed; right: 0; top: 95px; padding-top: 50px; }
	div.tools a,
	div.tools ul { display: none; }
	div.tools div.mobile-trigger { display: block; }
	div.tools.activo a,
	div.tools.activo ul { display: block; position: relative; }
	div.tools.podcast { top: 90px; padding-top: 50px; }
}

/* Single
---------------------------------------------------------------- */
div.header-single { padding-top: 80px; }

div.header-single div.pod div.img div.img-inner {
	padding-top: 50%;
	max-width: 1250px;
	margin: 0 auto;
	position: relative;
}

div.header-single div.pod div.img div.img-inner img { object-position: 0% 0%; }

div.header-single div.pod div.img div.img-inner span.caption {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	z-index: 5;
	background: var(--gradient-main);
	font-family: var(--font-family-secundaria);
	font-weight: 400;
	color: var(--color-blanco);
	padding: 15px 15px 13px 15px;
	font-size: 13px;
	border-radius: 12px 0 0 0;
}

@media (max-width: 767px) { div.header-single div.pod div.img div.img-inner span.caption { display: none; } }

div.header-single div.pod div.txt div.txt-inner {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	max-width: 800px;
	margin: 0 auto;
}

div.header-single div.pod div.txt div.txt-inner h1 { margin-bottom: 30px; }

div.header-single div.pod div.txt div.txt-inner div.subheader {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
	grid-gap: 15px;
}

div.header-single div.pod div.txt div.txt-inner div.subheader div.subheader-txt { overflow: hidden; }

div.header-single div.pod div.txt div.txt-inner a.boton {
	white-space: nowrap;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
 }

div.header-single div.pod div.txt div.txt-inner p.autor { color: var(--color-teal); }
div.header-single div.pod div.txt div.txt-inner p.autor a { color: var(--color-principal); }

div.header-single div.pod div.txt div.txt-inner p.subtitle {
	font-weight: 400;
	color: var(--color-gris-azulado);
	margin-top: 5px;
	max-width: 600px;
}

div.header-single div.pod div.txt div.txt-inner span.label {
	font-size: 12px;
	display: block;
	width: min-content;
	white-space: nowrap;
	position: relative;
	color: var(--color-blanco);
	padding: 8px 16px;
	margin-top: 15px;
}

div.header-single div.pod div.txt div.txt-inner span.label p { position: relative; }

div.header-single div.pod div.txt div.txt-inner span.label::before {
	content: '';
	display: block;
	width: 250px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: var(--gradient-main);
	border-radius: 50px;
}

div.header-single div.pod div.share ul {
	max-width: 800px;
	margin: 0 auto;
	margin-top: 15px;
}

div.header-single div.pod div.share ul li a {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	text-align: center;
	border: 1px solid var(--color-gris-azulado-claro);
	color: var(--color-gris-azulado-claro);
	margin-right: 5px;
}

div.header-single div.pod div.share ul li a:hover {
	border-color: var(--color-teal);
	color: var(--color-teal);
}

div.header-single div.tags {
	font-size: 0;
	max-width: 700px;
}

div.header-single div.tags a { margin: 2px; }

div.post-single div.pod {
	max-width: 800px;
	margin: 0 auto;
}

div.post-single div.botones { margin-top: 15px; }

div.post-single div.botones a.boton {
	background: transparent;
	border: 1px solid var(--color-gris-azulado-claro);
	color: var(--color-gris-azulado);
	font-size: 12px;
}

div.post-single div.botones a.boton:hover {
	background: var(--gradient-main);
	color: var(--color-blanco);
}

div.post-single.paywall div.rte.main { position: relative; }

div.post-single.paywall div.rte.main::after {
	content: '';
	display: block;
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, #ffffffff, #ffffff00);
}

div.post-single.paywall div.pod-paywall .heading {
	font-family: var(--font-family-secundaria);
	color: var(--color-principal);
	margin-bottom: 5px;
	font-weight: 500;
}

div.post-single.paywall div.pod-paywall .rte {
	font-family: var(--font-family-secundaria);
	color: var(--color-teal);

}

div.post-single.paywall div.pod-paywall .botones { margin-top: 15px; }

div.post-single.paywall div.pod-paywall .botones a.boton-oscuro {
	border: none;
	background: var(--gradient-main);
	color: var(--color-blanco);
	font-size: unset;
}

div.post-single.paywall div.pod-paywall .botones a.boton-oscuro::before { display: none; }
div.post-single.paywall div.pod-paywall .botones a.boton-oscuro:hover { background: var(--color-dark-blue-2); }

div.post-single div.share ul {
	max-width: 800px;
	margin: 0 auto;
	margin-top: 30px;
}

div.post-single div.share ul li a {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	text-align: center;
	border: 1px solid var(--color-gris-azulado-claro);
	color: var(--color-gris-azulado-claro);
	margin-right: 5px;
}

div.post-single div.share ul li a:hover {
	border-color: var(--color-teal);
	color: var(--color-teal);
}

/* Notice
---------------------------------------------------------------- */
div.notice {
	position: fixed;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-dark-blue);
	border: 1px solid var(--color-dark-blue);
	color: var(--color-blanco);
	padding: 15px 30px;
	max-width: 600px;
	text-align: center;
	font-family: var(--font-family-secundaria);
	font-weight: 400;
	z-index: 1000;
	border-radius: 50px;
}

div.notice strong {
	color: var(--color-teal);
	font-weight: 500;
}


/** Lightbox Redes
-------------------------------------------------------------------------------------**/
#lightbox-redes {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: var(--overlay-claro);
}

#lightbox-redes ul {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-size: 0;
	text-align: center;
	padding: 15px;
	background: var(--color-blanco);
	border-radius: 20px;
	box-shadow: 0 0 10px var(--color-gris-azulado-claro);
}

#lightbox-redes ul li {
	display: inline-block;
	position: relative;
	vertical-align: top;
	padding: 5px;
}

#lightbox-redes ul li a {
	font-size: 20px;
	display: block;
	background: var(--gradient-main-diagonal);
	color: var(--color-blanco);
	border-radius: 10px;
	transition: all .3s ease;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}

#lightbox-redes ul li span {
	display: block;
	width: 180px;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-azulado-claro);
	padding: 5px;
	color: var(--color-principal);
	font-size: 12px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50px;
	box-shadow: 0 0 10px var(--color-gris-azulado-claro);
}

#lightbox-redes ul li a:hover { transform: scale(1.2); }

#lightbox-redes.alert ul li a {
	font-size: 13px;
	border-radius: 12px;
	width: auto;
	height: auto;
	line-height: 100%;
	text-align: center;
	transition: none;
}

#lightbox-redes.alert ul li a:hover {
	transform: none;
	background: var(--color-blue);
}

#lightbox-redes.alert ul li a.simple {
	font-size: inherit;
	border: none;
	border-radius: 0;
	text-align: left;
	display: inline;
	background: transparent;
	color: var(--color-teal);
	width: auto;
	height: auto;
	line-height: auto;
}

#lightbox-redes.alert ul li a.simple:hover { color: var(--color-dark-blue); }

#lightbox-redes.alert ul li p:first-child {
	max-width: 600px;
	margin: 15px 0;
	line-height: 135%;
}

#lightbox-redes ul span.cerrar-lightbox-redes {
	display: block;
	position: absolute;
	top: -6px;
	right: -6px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--gradient-main-diagonal);
	cursor: pointer;
	font-size: 17px;
	line-height: 26px;
	text-align: center;
	color: var(--color-blanco);
}

#lightbox-redes ul span.cerrar-lightbox-redes:hover { background: var(--color-blue); }

#lightbox-redes div.rte {
    margin: 15px 0 30px 0;
    max-height: 50vh;
    overflow: auto;
}

#lightbox-redes div.rte h1,
#lightbox-redes div.rte h2,
#lightbox-redes div.rte h3 {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Feedback form
---------------------------------------------------------------- */
#feedback-form {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #ffffffdc;
	z-index: 1000;
	top: 0;
	left: 0;
	display: none;
}

#feedback-form div.pod {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 800px;
	max-height: calc(100% - 60px);
	max-width: calc(100% - 60px);
	background-color: var(--color-blanco);
	overflow: auto;
	box-shadow: 0 0 10px var(--color-gris-azulado-claro);
	border-radius: 20px;
}

#feedback-form div.pod form { padding: 30px; }

#feedback-form div.pod form .heading {
	font-family: var(--font-family-secundaria);
	color: var(--color-teal);
	font-weight: 600;
	margin-bottom: 5px;
}

#feedback-form div.pod form .rte {
	color: var(--color-gris-azulado);
	margin-bottom: 15px;
}

#feedback-form div.pod form .buttons { text-align: right; }

#feedback-form div.pod form textarea,
#feedback-form div.pod form input[type=text],
#feedback-form div.pod form input[type=email] {
	display: block;
    width: 100%;
    background: var(--color-blanco);
    border: 1px solid var(--color-gris-azulado-claro);
    padding: 15px;
    color: var(--color-gris-azulado);
	margin-bottom: 15px;
}

#feedback-form div.pod form input[type=submit] {
	display: inline-block;
    padding: 10px 30px;
    background: var(--gradient-main);
    color: var(--color-blanco);
    font-family: var(--font-family-secundaria);
    font-weight: 500;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

#feedback-form div.pod form input[type=submit]:hover { background: var(--color-blue); }

#feedback-form div.pod span.cerrar-lightbox-feedback {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--gradient-main-diagonal);
    cursor: pointer;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    color: var(--color-blanco);
}

#feedback-form div.pod span.cerrar-lightbox-feedback:hover { background: var(--color-blue); }

#feedback-form {
    opacity: 0;
    transition: opacity .25s ease;
}

#feedback-form.activo {
    opacity: 1;
}


/* Comments
---------------------------------------------------------------- */
#comments div.pod {
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 20px;
}

#comments div.container::after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background: var(--gradient-main);
	z-index: 10;
}

#comments div.pod div.header .heading {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	color: var(--color-principal);
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

#comments div.pod div.header .heading::after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--gradient-main);
	z-index: 10;
}


#comments div.pod div.comments div.comment-group {
	margin-bottom: 1rem;
	overflow: hidden;
}

#comments div.pod div.comments div.item {
	background: var(--color-clear);
	padding: 30px;
	display: grid;
	grid-template-columns: 75px 1fr;
	grid-gap: 15px;
	z-index: 10;
	position: relative;
}

#comments div.pod div.comments div.item div.img div.avatar {
	position: relative;
	padding-top: 100%;
	border-radius: 50%;
	overflow: hidden;
}

#comments div.pod div.comments div.item div.txt div.datos {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	margin-bottom: 5px;
}

#comments div.pod div.comments div.item div.txt div.datos span.nombre { font-weight: 700; }
#comments div.pod div.comments div.item div.txt div.datos span.fecha { color: var(--color-gris-azulado); }
#comments div.pod div.comments div.item div.txt div.rte { color: var(--color-gris-azulado); }

#comments div.pod div.comments div.item div.txt div.botones {
	text-align: right;
	margin-top: 10px;
}

#comments div.pod div.comments div.item div.txt div.botones a {
	color: var(--color-teal);
	text-decoration: underline;
}

#comments div.pod div.comments div.item div.txt div.botones a:hover { color: var(--color-blue); }

#comments div.pod div.comments div.item.reply {
	width: calc(100% - 105px);
	margin-left: auto;
	margin-top: 1rem;
	z-index: 5;
}

#comments div.pod div.comments div.item.reply::after {
	content: '';
	position: absolute;
	left: -52px;
	bottom: 50%;
	width: 1px;
	height: calc(150%);
	background: var(--color-gris-azulado-claro);
}

#comments div.pod div.comments div.item.reply::before {
	content: '';
	position: absolute;
	left: -52px;
	top: 50%;
	width: 53px;
	height: 1px;
	background: var(--color-gris-azulado-claro);
}

#comments div.pod div.form {
	background: var(--color-clear);
	padding: 15px;
}

#comments div.pod div.form label {
	font-weight: 500;
	color: var(--color-teal);
	font-family: var(--font-family-secundaria);
	margin-bottom: 5px;
	display: block;
}

#comments div.pod div.form textarea {
	display: block;
	width: 100%;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-azulado-claro);
	padding: 15px;
	color: var(--color-gris-azulado);
}

#comments div.pod div.form div.botones {
	text-align: right;
	margin-top: 15px;
}

#comments div.pod div.form div.botones input {
	display: inline-block;
	padding: 10px 30px;
	background: var(--gradient-main);
	color: var(--color-blanco);
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	border: none;
	border-radius: 50px;
	cursor: pointer;
}

#comments div.pod div.form div.botones input:hover { background: var(--color-blue); }

@media (max-width: 991px) { #comments div.pod div.comments div.item { padding: 15px; } }

@media (max-width: 767px) {
	#comments div.pod div.comments div.item { grid-template-columns: 1fr; }
	#comments div.pod div.comments div.item div.img div.avatar { width: 50px; margin-left: auto; height: 50px; padding: 0; }
	#comments div.pod div.comments div.item.reply { width: calc(100% - 50px); }
	#comments div.pod div.comments div.item.reply::after { left: -25px; }
	#comments div.pod div.comments div.item.reply::before { left: -25px; width: 25px; }
}