@import url("style-fonts.css");

/*!
Theme Name: alejandrosoriano
Theme URI: http://www.alejandrosoriano.xyz/
Author: MUI.STUDIO
Author URI: http://www.mui.studio
Description: Plantilla Wordpress diseñada por MUI para Alejandro Soriano.
Version: 1.0.0
License: Copyright MUI.STUDIO
License URI: LICENSE
Text Domain: alejandrosoriano
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Espacios
--------------------------------------------------------------*/

/* The vertical rhythm of a single entry lives here, and only here. Change the
   floor and the ceiling and the whole site follows, columns included.
   vw and not %: a percentage resolves against the parent, so the same number
   means something else inside a column, which is half as wide */
:root {
	--espacio-min: 36px;
	--espacio-max: 72px;

	/* Containers and titles */
	--espacio: clamp(var(--espacio-min), 5vw, var(--espacio-max));

	/* Content rows: gentler ramp, so a laptop keeps the spacing it had */
	--espacio-fila: clamp(var(--espacio-min), 4vw, var(--espacio-max));

	/* El hueco entre parrafos, a nivel de fila: 1.8em = el 1.5em del <p> (que va a
	   font-size 1.2em). Lo usan dos AS Texto seguidos y texto junto a columnas */
	--espacio-parrafo: 1.8em;

	/* Nivel "extra" del espaciado de bloques: 1.5 veces el hueco de fila */
	--espacio-extra: calc(1.5 * var(--espacio-fila));
}

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-size: 1em;
	font-weight: normal;
}

p {
	margin-bottom: 1.5em;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
}

a:hover, a:focus, a:active {
	color: #000;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
## Page Transitions (Loading Bar)
--------------------------------------------------------------*/

.loading-transition {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 99999;
}

.loading-bar {
  position: relative;
  width: 100%;
}

.loading-bar:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #2832d0;

	-webkit-animation: loading-bar 2s ease-out;
  	 -moz-animation: loading-bar 2s ease-out;
  		-ms-animation: loading-bar 2s ease-out;
  		 -o-animation: loading-bar 2s ease-out;
  	 			animation: loading-bar 2s ease-out;
}

@-webkit-keyframes loading-bar {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@-moz-keyframes loading-bar {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@-ms-keyframes loading-bar {
	0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes loading-bar {
	0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

img.loading-icon {
	position: absolute;
	width: 30px;
	height: 30px;
}

/*--------------------------------------------------------------
## Wrapper Transitions
--------------------------------------------------------------*/

.m-scene {
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
}

.m-scene .scene_element {
	-webkit-animation-duration: 0.8s;
		 -moz-animation-duration: 0.8s;
			-ms-animation-duration: 0.8s;
			 -o-animation-duration: 0.8s;
  				animation-duration: 0.8s;

	-webkit-transition-timing-function: ease-in;
		 -moz-transition-timing-function: ease-in;
			-ms-transition-timing-function: ease-in;
			 -o-transition-timing-function: ease-in;
  				transition-timing-function: ease-in;

  -webkit-animation-fill-mode: both;
		 -moz-animation-fill-mode: both;
			-ms-animation-fill-mode: both;
			 -o-animation-fill-mode: both;
					animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
	-webkit-animation-name: fadeIn;
		 -moz-animation-name: fadeIn;
			-ms-animation-name: fadeIn;
			 -o-animation-name: fadeIn;
  				animation-name: fadeIn;
}

.m-scene.is-exiting .scene_element {
	-webkit-animation-direction: alternate-reverse;
		 -moz-animation-direction: alternate-reverse;
			-ms-animation-direction: alternate-reverse;
			 -o-animation-direction: alternate-reverse;
  				animation-direction: alternate-reverse;
}

@-webkit-keyframes fadeIn {
  0% {
	  -khtml-opacity: 0;
		opacity: 0;
	}
  100% {
	  -khtml-opacity: 1;
		opacity: 1;
	}
}

@-ms-keyframes fadeIn {
  0% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
		opacity: 0;
	}
  100% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
  0% {
	  -moz-opacity: 0;
		opacity: 0;
	}
  100% {
	  -moz-opacity: 1;
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
  0% {
		opacity: 0;
	}
  100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
  0% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;
	}
  100% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;
	}
}

/*--------------------------------------------------------------
## General Styles
--------------------------------------------------------------*/

html,
body,
div,
canvas,
section,
figure,
img,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
}

ul,
li {
	list-style: none;
}

/* Keyboard focus must be visible. This used to be `* { outline: none }`, which
   blanked the focus ring on every link, button and field on the site */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

body {
	width: 100%;
	padding: 0;
	color: #111111;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 140%;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

	text-rendering: geometricPrecision;

 -moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
					font-smoothing: antialiased;

	-webkit-text-size-adjust: none;
		 -moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
}

body.no-scroll{
	overflow: hidden;
}

::-moz-selection {
    color: #FFFFFF;
    background: #111111;
}

::selection {
    color: #FFFFFF;
    background: #111111;
}

/*--------------------------------------------------------------
## Message IE8 + Mobile
--------------------------------------------------------------*/

.message-ie,
.message-mobile {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	background: #2832d0;
	z-index: 99999;
}

.message-ie .message-content,
.message-mobile .message-content {
	position: absolute;
	width: 500px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;
}

.message-mobile .message-content {
	margin-top: -100px;
}

.message-ie p,
.message-mobile p {
	margin-top: 60px;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1.2em;
	color: #ffd900;
	text-align: center;
}

.message-ie a {
	color: #ffd900;
}

.message-ie a:hover {
	text-decoration: underline;
}

.message-mobile .message-content img {
	-webkit-animation: rotate 3s infinite ease;
		 -moz-animation: rotate 3s infinite ease;
		  -ms-animation: rotate 3s infinite ease;
			 -o-animation: rotate 3s infinite ease;
			 		animation: rotate 3s infinite ease;
}

/*--------------------------------------------------------------
## Cookies
--------------------------------------------------------------*/

/* Banner de consentimiento (inc/cookies.php). Solo se imprime cuando aun no hay
   eleccion, asi que no necesita display:none ni JS para mostrarse. El id NO es
   #cookies: esa es el ancla de la seccion Cookies del documento legal */
#aviso-cookies {
	position: fixed;
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 25px 20px;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	text-align: center;
	background: #000;
	z-index: 20;
}

#aviso-cookies p {
	margin: 0 0 14px;
}

/* Los tres con el mismo peso visual (solo cambia el color del Aceptar) */
#aviso-cookies .cookies-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

#aviso-cookies .cookies-btn {
	display: inline-block;
	padding: 10px 28px;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1em;
	text-decoration: none;
	border: 1px solid #fff;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

#aviso-cookies .cookies-btn.cookies-aceptar {
	background: #2832d0;
	border-color: #2832d0;
}

#aviso-cookies .cookies-btn:hover {
	background: #fff;
	color: #000;
}

/*--------------------------------------------------------------
## Columns
--------------------------------------------------------------*/

.col {
	min-height: 1px;
}

.one_half,
.one_half_last {
	width: 48%;
}

.one_third,
.one_third_last {
	width: 30.66%;
}

.two_third,
.two_third_last {
	width: 65.33%;
}

.one_fourth,
.one_fourth_last {
	width: 22%;
}

.three_fourth,
.three_fourth_last {
	width: 74%;
}

.one_fifth,
.one_fifth_last {
	width: 16.8%;
}

.two_fifth,
.two_fifth_last {
	width: 37.6%;
}

.three_fifth,
.three_fifth_last {
	width: 58.4%;
}

.four_fifth,
.four_fifth_last {
	width: 67.2%;
}

.one_sixth,
.one_sixth_last {
	width: 13.33%;
}

.five_sixth,
.five_sixth_last {
	width: 82.67%;
}

.one_half,
.one_third,
.two_third,
.three_fourth,
.one_fourth,
.one_fifth,
.two_fifth,
.three_fifth,
.four_fifth,
.one_sixth,
.five_sixth,
.one_eighth,
.six_eighth {
	float: ;
	margin-right: 4%;
}

.one_half_last,
.one_third_last,
.two_third_last,
.three_fourth_last,
.one_fourth_last,
.one_fifth_last,
.two_fifth_last,
.three_fifth_last,
.four_fifth_last,
.one_sixth_last,
.five_sixth_last,
.one_eighth_last,
.six_eighth_last {
	float: ;
	margin-right: 0;
	clear: right;
}

.clearboth {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	font-size: 0;
	line-height: 0;
}

/* Columns with no margin */
.one_half.no-margin,
.one_half_last.no-margin {
	width: 50%;
	margin-right: 0;
}

.one_fourth.no-margin,
.one_fourth_last.no-margin {
	width: 25%;
	margin-right: 0;
}

.one_third.no-margin,
.one_third_last.no-margin {
	width: 33.333333%;
	margin-right: 0;
}

.two_third.no-margin,
.two_third_last.no-margin {
	width: 66.666666%;
	margin-right: 0;
}

.one_eighth.no-margin,
.one_eighth_last.no-margin {
	width: 12.5%;
	margin-right: 0;
}

.six_eighth.no-margin,
.six_eighth_last.no-margin {
	width: 75%;
	margin-right: 0;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/

header#masthead {
  position: fixed;
	width: 100%;
  height: 100px;
	top: 0;
	left: 0;
  background-color: transparent;
	z-index: 100;

	-webkit-transition: height .3s ease;
		 -moz-transition: height .3s ease;
			-ms-transition: height .3s ease;
			 -o-transition: height .3s ease;
					transition: height .3s ease;
}

header#masthead.is-hidden {
  top: -120px;
}

header#masthead.shrink.is-hidden {
  top: -70px;
}

header#masthead.shrink {
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.header-shrink-page,
.header-shrink-single  {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}

header#masthead.shrink,
.header-shrink-page {
	height: 60px;
}

.header-shrink-single {
  height: 100px;
}

@media only screen and (min-width: 1000px)  {
	.header-shrink-single {
    height: 120px;
  }
}

@media only screen and (min-width: 1300px) {
	.header-shrink-single {
    height: 70px;
  }
}

/* Al llegar con #ancla en la URL el navegador salta sin descontar la cabecera fija
   (main.js solo compensa los clics dentro de la pagina). Alturas de
   .header-shrink-single (mas la barra Contenidos movil donde es visible) + 30px
   de holgura, la misma que suma el clic del indice */
article.single-entry .entry-content [id] {
	scroll-margin-top: 190px;
}

@media only screen and (min-width: 1000px) {
	article.single-entry .entry-content [id] {
		scroll-margin-top: 210px;
	}
}

@media only screen and (min-width: 1300px) {
	article.single-entry .entry-content [id] {
		scroll-margin-top: 100px;
	}
}

header#masthead::before {
  content: 'mobile';
  display: none;
}

/* Header branding + Right nav under 1000px */
header#masthead .site-branding {
	position: absolute;
	width: 150px;
	height: 60px;
	top: 0;
	left: 0;
	margin: 25px 0;
	text-align: left;
	overflow: hidden;

	-webkit-transition: margin .4s ease;
		 -moz-transition: margin .4s ease;
		  -ms-transition: margin .4s ease;
			 -o-transition: margin .4s ease;
					transition: margin .4s ease;
}

header#masthead.shrink .site-branding {
	width: 60px;
	height: 60px;
	margin: 15px 0;
}

header#masthead .site-branding .site-logo.desktop.black,
header#masthead .site-branding .site-logo.responsive.white{
	display: none;
}

header#masthead .site-branding .site-logo.desktop.white,
header#masthead .site-branding .site-logo.responsive.black {
	display: block;
}

header#masthead .site-branding .site-logo {
	position: absolute;
	width: 100%;
}

header#masthead .site-branding .site-logo.responsive.white.hide-logo {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;

	-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		 -ms-transform: translateY(-100%);
		  -o-transform: translateY(-100%);
				 transform: translateY(-100%);
}

header#masthead .site-branding .site-logo.responsive.black.hide-logo {
	display: none;
}

header#masthead .site-branding .site-logo.responsive.white.show-logo,
header#masthead .site-branding .site-logo.responsive.black.show-logo {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;

	-webkit-transform: translateY(0);
		 -moz-transform: translateY(0);
		  -ms-transform: translateY(0);
			 -o-transform: translateY(0);
			 		transform: translateY(0);
}

header#masthead .site-branding .site-meta,
header#masthead .site-branding .site-description {
	position: absolute;
	top: 0;
	left: -9999px;
}

header#masthead .site-branding .site-meta a {
	color: #fff;
	font-size: 0.65em;
	line-height: 100%;
}

header#masthead .right-nav {
	display: none;
}

header#masthead .nav-trigger {
  position: absolute;
  height: 60px;
  width: 60px;
  top: 20px;
  right: 2%;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  overflow: hidden;

	-webkit-transition: top .3s ease;
		 -moz-transition: top .3s ease;
		  -ms-transition: top .3s ease;
			 -o-transition: top .3s ease;
			 		transition: top .3s ease;
}

header#masthead.shrink .nav-trigger {
  top: 0;
}

header#masthead .nav-trigger span,
.cd-morph-dropdown .nav-trigger span::after,
.cd-morph-dropdown .nav-trigger span::before {
  position: absolute;
  height: 3px;
  width: 26px;
  background-color: #fff;
}

header#masthead .nav-trigger span {
  background-color: transparent;
}

.shrink.cd-morph-dropdown .nav-trigger span::after,
.shrink.cd-morph-dropdown .nav-trigger span::before,
header#masthead.nav-open .nav-trigger span::before,
header#masthead.nav-open .nav-trigger span::after {
  background-color: #000;
}

header#masthead .nav-trigger span {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;

  -webkit-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);

	-webkit-transition: background-color .3s;
		 -moz-transition: background-color .3s;
		  -ms-transition: background-color .3s;
			 -o-transition: background-color .3s;
			 		transition: background-color .3s;

}

header#masthead .nav-trigger span::after,
.cd-morph-dropdown .nav-trigger span::before {
  content: '';
  left: 0;

  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s, -webkit-transform .3s;

	-webkit-transition: transform .3s;
		 -moz-transition: transform .3s;
	 		-ms-transition: transform .3s;
			 -o-transition: transform .3s;
  		 		transition: transform .3s;
}

header#masthead .nav-trigger span::before {
  -webkit-transform: translateY(-6px);
     -moz-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
       -o-transform: translateY(-6px);
          transform: translateY(-6px);
}

header#masthead .nav-trigger span::after {
  -webkit-transform: translateY(6px);
     -moz-transform: translateY(6px);
		  -ms-transform: translateY(6px);
       -o-transform: translateY(6px);
          transform: translateY(6px);
}

header#masthead.nav-open .nav-trigger span {
  background-color: transparent;
}

header#masthead.nav-open .nav-trigger span::before {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
		   -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

header#masthead.nav-open .nav-trigger span::after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
		  -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

header#masthead .main-nav {
  display: none;
}

header#masthead .morph-dropdown-wrapper {
  display: none;
  position: fixed;
  width: 100%;
	height: calc(100% - 90px);
  top: 90px;
  left: 0;
  padding: 0 4%;
  box-shadow: none;
  background-color: #fff;
  z-index: 1;
	overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

header#masthead.nav-open .morph-dropdown-wrapper {
  display: block;
}

header#masthead .dropdown-list ul li.dropdown {
	float: left;
	width: 100%;
	padding: 30px 0;
	border-bottom: 1px solid #eee;
}

/* header#masthead .dropdown-list ul li.dropdown,
header#masthead .content,
header#masthead .content ul,
header#masthead .content .widget {
	float: left;
	width: 100%;
} */

header#masthead .content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
}

@media only screen and (min-width: 700px) {
	header#masthead .content {
		flex-direction: row;
	}
}

header#masthead .label {
  display: block;
  color: #000;
	font-family: 'TTFirsNeue-Medium';
  font-size: 2.5em;
}

header#masthead .content .widget {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 0;
}

header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(1),
header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(2), 
header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(3),
header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(4){
	width: 100%;
}

/* header#masthead .content .widget:nth-child(3) {
	float: left;
	width: 100%;
} */

header#masthead .content .widget h3 {
	margin-bottom: 10px;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.1em;
	letter-spacing: 0.02em;
}

header#masthead .content .widget.widget_recent_entries ul li,
header#masthead .content .widget.widget_categories ul li,
header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li,
header#masthead .content .widget.widget_nav_menu ul li {
	position: relative;
	float: left;
	width: 100%;
	padding-left: 15px;
	padding-right: 10%;
	margin-bottom: 5px;
	color: #fb5130;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1em;
}

header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li {
	width: 100%;
	padding-left: 0;
}

header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li.is-hidden {
	display: none;
}

header#masthead .content .widget.widget_media_image img {
	display: block;
	width: 100%;
	height: auto;
}

header#masthead .content .widget.widget_recent_entries ul li:before,
header#masthead .content .widget.widget_categories ul li:before,
header#masthead .content .widget.widget_nav_menu ul li:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 5px;
	left: 0;
	border-radius: 100%;
	border: 2px solid #fb5130;
	background: #fff;
}

header#masthead .content .widget.widget_recent_entries ul li:hover:before,
header#masthead .content .widget.widget_categories ul li:hover:before,
header#masthead .content .widget.widget_nav_menu ul li:hover:before {
	background: #fb5130;
}

/* Desplegable «Tutoriales recientes»: el bullet es el icono del propio tutorial. El
   background corto del :hover generico borraria la imagen, asi que se cubren los dos estados */
header#masthead .content .widget.widget_recent_entries ul li.dd-icono:before,
header#masthead .content .widget.widget_recent_entries ul li.dd-icono:hover:before {
	width: 13px;
	height: 13px;
	top: 6px;
	left: -3px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-hexagon:before,
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-hexagon:hover:before {
	background-image: url('img/icon-hexagon.svg');
}
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-circle:before,
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-circle:hover:before {
	background-image: url('img/icon-circle.svg');
}
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-triangle:before,
header#masthead .content .widget.widget_recent_entries ul li.dd-icono-triangle:hover:before {
	background-image: url('img/icon-triangle.svg');
}

header#masthead .content .widget.widget_recent_entries ul li a,
header#masthead .content .widget.widget_categories ul li a,
header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li a,
header#masthead .content .widget.widget_nav_menu ul li a {
	color: #000;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;

	-webkit-transition: color .1s ease;
		 -moz-transition: color .1s ease;
		  -ms-transition: color .1s ease;
			 -o-transition: color .1s ease;
			 		transition: color .1s ease;
}

@-moz-document url-prefix() {
	header#masthead .content .widget.widget_recent_entries ul li a,
	header#masthead .content .widget.widget_categories ul li a,
	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li a,
	header#masthead .content .widget.widget_nav_menu ul li a {
    white-space: normal;
  }
}

header#masthead .content .widget.widget_recent_entries ul li a:hover,
header#masthead .content .widget.widget_categories ul li a:hover,
header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li a:hover,
header#masthead .content .widget.widget_nav_menu ul li a:hover {
	color: #fb5130;
}

header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li img {
	float: left;
	width: 12px;
	height: 12px;
	margin-top: 4px;
	margin-right: 10px;
}

header#masthead .content .widget a.btn-menu-contact {
	display: block;
	width: 100%;
	padding: 20px;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	background-color: #fb5130;

	-webkit-transition: background-color .2s ease;
		 -moz-transition: background-color .2s ease;
			-ms-transition: background-color .2s ease;
			 -o-transition: background-color .2s ease;
			 		transition: background-color .2s ease;
}

header#masthead .content .widget a.btn-menu-contact:hover {
	background-color: #000;
}

header#masthead .content .widget a.btn-menu-contact {
	margin-bottom: 30px;
}

header#masthead .content .widget a.btn-menu-view-all {
	color: #ff4f23;
	font-size: 1em;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

/* Desplegables del menu (plantilla comun): el helper reutiliza el marcado del widget
   de entradas recientes, asi hereda todo su estilo (viñeta, hover, elipsis, titulo).
   Aqui solo el layout; las columnas y la reserva de 8 filas van en el @media de abajo */
header#masthead .dd-cols {
	display: flex;
	flex-direction: column;
}

header#masthead .dd-col a.btn-menu-view-all {
	display: inline-block;
	color: #ff4f23;
	font-size: 1em;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

@media only screen and (min-width: 700px) {
	header#masthead .dropdown-list ul li.dropdown {
		padding: 40px 0;
	}

	header#masthead .content .widget {
		width: 50%;
		margin-top: 40px;
	}

	header#masthead .dropdown-list ul li.dropdown-menu-4 .widget:nth-child(3){
		width: 100%;
	}

	header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(1),
	header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(2),
	header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(3),
	header#masthead .dropdown-list ul li.dropdown-menu-1 .widget:nth-child(4) {
		width: 50%;
	}

header#masthead .content .widget h3 {
		display: block;
	}

	header#masthead .content .widget.widget_recent_entries ul li,
	header#masthead .content .widget.widget_categories ul li,
	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li,
	header#masthead .content .widget.widget_nav_menu ul li {
		padding-left: 18px;
		margin-bottom: 8px;
	}

	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li {
		padding-left: 0;
	}

	header#masthead .content .widget.widget_recent_entries ul li:before,
	header#masthead .content .widget.widget_categories ul li:before,
	header#masthead .content .widget.widget_nav_menu ul li:before {
		width: 12px;
		height: 12px;
	}

	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li img {
		width: 15px;
		height: 15px;
		margin-top: 3px;
	}

	/* header#masthead .content .widget a.btn-menu-contact,
	header#masthead .content .widget a.btn-menu-view-all {
		float: right;
	} */

	header#masthead .content .widget a.btn-menu-contact {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 1000px) {
	header#masthead.is-hidden {
		top: 0;
  }

	header#masthead.nav-open {
	  height: 90px;
		background-color: #fff;
	}

	header#masthead.nav-open.shrink .site-branding {
		width: 150px;
		height: 60px;
		margin: 20px 0;
	}

	header#masthead.nav-open .site-branding .site-logo.desktop.white,
	header#masthead.nav-open .site-branding .site-logo.responsive.black {
		display: none;
	}

	header#masthead.nav-open .site-branding .site-logo.desktop.black {
		display: block;
	}

	/* En movil las listas se apilan y no reservan filas: fuera los huecos (que aqui si
	   llevan viñeta) y separa el boton "Ver" de la lista como en escritorio */
	header#masthead .content .widget.widget_recent_entries ul li.dd-vacia {
		display: none;
	}

	header#masthead .dd-col a.btn-menu-view-all {
		padding-top: 16px;
	}

	/* En el menu movil cada seccion es un bloque con contexto de formato propio (flow-root):
	   asi contiene SIEMPRE el alto de todo su contenido (imagen, lista, boton, floats) y la
	   siguiente seccion (Portfolio) ya no se monta encima. Sin recortar (a diferencia de
	   overflow:hidden, que cortaria los lapices de edicion) */
	header#masthead .dropdown-list ul li.dropdown {
		float: none;
		display: flow-root;
	}
}

/* Tablet (700-999px): el menu movil esta abierto, pero Publicaciones y Art Dept. caben
   en dos columnas como en escritorio. La plantilla de columnas vive en el @media de
   1000px; aqui se reaplica para este rango, donde si no se apilaria con el boton flotando */
@media only screen and (min-width: 700px) and (max-width: 999px) {
	header#masthead .dropdown-list ul li.dropdown-menu-1 .content .dd-col .widget,
	header#masthead .dropdown-list ul li.dropdown-menu-2 .content .dd-col .widget {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* El hueco bajo el titulo de seccion (h2) va aqui, en el contenedor, no en el widget:
	   asi el widget queda a ras del .dd-col y el lapiz de edicion no se despega del titulo */
	header#masthead .dropdown-menu-1 .dd-cols,
	header#masthead .dropdown-menu-2 .dd-cols {
		flex: 1;
		flex-direction: row;
		align-items: stretch;
		gap: 40px;
		margin-top: 40px;
	}

	header#masthead .dropdown-menu-1 .dd-col,
	header#masthead .dropdown-menu-2 .dd-col {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	header#masthead .dd-col a.btn-menu-view-all {
		margin-top: auto;
	}

	/* La imagen llena el ancho de su columna, apaisada (en escritorio va cuadrada a la derecha) */
	header#masthead .dd-col-img {
		position: static;
		padding: 0;
		order: 1;
	}

	header#masthead .dd-img {
		position: static;
		width: 100%;
		aspect-ratio: 16 / 9;
		background-size: cover;
		background-position: center;
		border-radius: 2px;
	}
}

/* Movil (una columna): la imagen de Art Dept. va entre la lista y el boton "Ver". El
   boton se renderiza dentro de la columna de la lista, asi que se promociona esa columna
   con display:contents para poder intercalar la imagen por orden (lista, imagen, boton) */
@media only screen and (max-width: 699px) {
	/* Art Dept. en una columna con flujo de BLOQUE puro (no flex) en toda la cadena
	   content > dd-cols > columnas: el bloque resuelve el ancho primero y LUEGO el alto de
	   la imagen (padding-bottom en %), que en flex se calculaba mal y crecia sin contenerse.
	   La imagen va primera en el HTML, asi queda arriba (titulo, imagen, lista, boton) */
	header#masthead .dropdown-menu-2 .content,
	header#masthead .dropdown-menu-2 .dd-cols,
	header#masthead .dropdown-menu-2 .asv-dd-art {
		display: block;
	}

	/* El hueco superior de cada bloque va en el contenedor (.dd-col), no en el widget (que
	   lleva un margin-top:30px de base): asi el lapiz de edicion queda a la altura del titulo */
	header#masthead .dropdown-menu-1 .dd-col,
	header#masthead .dropdown-menu-2 .dd-col {
		margin-top: 30px;
	}

	header#masthead .dropdown-menu-1 .dd-col .widget,
	header#masthead .dropdown-menu-2 .dd-col .widget {
		margin-top: 0;
	}

	/* La imagen llena el ancho, alto 16:9 por padding-bottom */
	header#masthead .dropdown-menu-2 .dd-img {
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		background-size: cover;
		background-position: center;
		border-radius: 2px;
	}
}

@media only screen and (min-width: 1000px) {
  header#masthead {
    position: fixed;
    width: 100%;
    height: 140px;
    left: 0;
    top: 0;
    padding: 0;
    text-align: center;
    background-color: transparent;
		z-index: 100;

		-webkit-transition: top .4s, height .4s ease;
			 -moz-transition: top .4s, height .4s ease;
				-ms-transition: top .4s, height .4s ease;
				 -o-transition: top .4s, height .4s ease;
				 		transition: top .4s, height .4s ease;
  }

	header#masthead.shrink {
		border-bottom: 1px solid #eee;
		background-color: #fff;
  }

	header#masthead.shrink,
	.header-shrink-page {
		width: 100%;
    height: 70px;
  }

  header#masthead::before {
    content: 'desktop';
  }

	header#masthead.nav-open {
	  height: 100px;
	}

  header#masthead .nav-trigger {
    display: none;
  }

  header#masthead .main-nav {
    display: inline-block;
		position: relative; /* To avoid sliding bug in Chrome */
		z-index: 1; /* To avoid sliding bug in Chrome */
  }

  header#masthead .main-nav ul li {
    display: inline-block;
    float: left;
  }

  header#masthead .main-nav ul li a {
    display: block;
    height: 140px;
    padding: 0 1.8em;
    color: #ffd900;
		font-family: 'IBM Plex Sans', sans-serif;
		font-weight: 500;
    font-size: 1.1em;
    line-height: 140px;
		cursor: pointer;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-transition: opacity .2s;
			 -moz-transition: opacity .2s;
			  -ms-transition: opacity .2s;
				 -o-transition: opacity .2s;
    				transition: opacity .2s;

		-webkit-transition: opacity .2s, height .4s ease, line-height .4s ease, color .2s;
			 -moz-transition: opacity .2s, height .4s ease, line-height .4s ease, color .2s;
			  -ms-transition: opacity .2s, height .4s ease, line-height .4s ease, color .2s;
				 -o-transition: opacity .2s, height .4s ease, line-height .4s ease, color .2s;
				 		transition: opacity .2s, height .4s ease, line-height .4s ease, color .2s;
  }

	header#masthead.shrink .main-nav ul li a,
	header#masthead.shrink .right-nav a {
    height: 70px;
    color: #000;
    font-size: 1.1em;
    line-height: 70px;
  }

	header#masthead.shrink .right-nav a {
		font-size: 1em;
		border: 2px solid #000;
	}

	header#masthead.shrink .right-nav a:hover {
		color: #fff;
		background-color: #000;
	}

	header#masthead.shrink .site-branding .site-meta a {
    color: #2832d0;
  }

	/*header#masthead.switch .main-nav ul li a {

  }*/

  header#masthead.is-dropdown-hidden .main-nav ul li a,
	header#masthead.is-dropdown-visible .main-nav ul li a {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	  filter: alpha(opacity=60);
	  -moz-opacity: 0.6;
	  -khtml-opacity: 0.6;
    opacity: 0.6;
  }

	header#masthead.is-dropdown-hidden .main-nav ul li.active2 a,
  header#masthead.is-dropdown-visible .main-nav ul li.active a {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1 !important;
	  -khtml-opacity: 1 !important;
    opacity: 1 !important;
  }

  header#masthead .morph-dropdown-wrapper {
    display: block;
    width: auto;
    top: 100px;
	height: 100%;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
		overflow-y: inherit;

    -webkit-transform: translateZ(0);
			 -moz-transform: translateZ(0);
				-ms-transform: translateZ(0);
				 -o-transform: translateZ(0);
            transform: translateZ(0);

    will-change: transform;

    -webkit-transform: translateY(20px);
       -moz-transform: translateY(20px);
		    -ms-transform: translateY(20px);
				 -o-transform: translateY(20px);
            transform: translateY(20px);

    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
		transition: transform .3s, -webkit-transform .3s;

    -webkit-transition: transform .3s;
			 -moz-transition: transform .3s;
				-ms-transition: transform .3s;
				 -o-transition: transform .3s;
				 		transition: transform .3s;

  }

	header#masthead.shrink .morph-dropdown-wrapper {
	  top: 90px;
	}

	header#masthead .morph-dropdown-wrapper.hidden {
    display: none;
  }

  header#masthead.is-dropdown-visible .morph-dropdown-wrapper {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
		     -o-transform: translateY(0);
            transform: translateY(0);
  }

  header#masthead .dropdown-list {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    visibility: hidden;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;

    -webkit-transform: translateZ(0);
			 -moz-transform: translateZ(0);
			  -ms-transform: translateZ(0);
				 -o-transform: translateZ(0);
            transform: translateZ(0);

    will-change: transform, width, height;

    -webkit-transition: opacity .3s, visibility .3s;
			 -moz-transition: opacity .3s, visibility .3s;
				-ms-transition: opacity .3s, visibility .3s;
				 -o-transition: opacity .3s, visibility .3s;
    				transition: opacity .3s, visibility .3s;
  }


  header#masthead .dropdown-list::before {
    content: '';
    position: absolute;
    width: 25px;
		height: 14px;
    top: 0;
    left: 50%;
    right: auto;
		background-image: url('img/icon-arrow-top-menu.svg');
		background-size: cover;
		z-index: 10;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;

    -webkit-transform: translate3d(-50%);
       -moz-transform: translate3d(-50%);
        -ms-transform: translate3d(-50%);
		     -o-transform: translate3d(-50%);
            transform: translate3d(-50%,-80%,0);

    -webkit-transition: opacity .3s;
			 -moz-transition: opacity .3s;
			  -ms-transition: opacity .3s;
				 -o-transition: opacity .3s;
    				transition: opacity .3s;
  }

  header#masthead .dropdown-list > ul {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  header#masthead.is-dropdown-visible .dropdown-list {
		visibility: visible;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;

    -webkit-transition: width .3s, height .3s, -webkit-transform .3s;
    transition: width .3s, height .3s, -webkit-transform .3s;

    -webkit-transition: transform .3s, opacity .2s, width .3s, height .3s;
			 -moz-transition: transform .3s, opacity .2s, width .3s, height .3s;
			  -ms-transition: transform .3s, opacity .2s, width .3s, height .3s;
				 -o-transition: transform .3s, opacity .2s, width .3s, height .3s;
				 		transition: transform .3s, opacity .2s, width .3s, height .3s;

		transition: transform .3s, opacity .2s, width .3s, height .3s, -webkit-transform .3s;
  }

	header#masthead.is-dropdown-visible.hidden .dropdown-list {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;
	}

  header#masthead.is-dropdown-visible .dropdown-list::before {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;
  }

  header#masthead .dropdown {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
		border: 1px solid #eee;
		background: #fff;
    visibility: hidden;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;

    -webkit-transition: opacity .3s, visibility .3s;
			 -moz-transition: opacity .3s, visibility .3s;
			  -ms-transition: opacity .3s, visibility .3s;
				 -o-transition: opacity .3s, visibility .3s;
    				transition: opacity .3s, visibility .3s;
  }

  header#masthead .dropdown.active {
		visibility: visible;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;
  }

  header#masthead .dropdown.move-left .content {
    -webkit-transform: translateX(-100px);
       -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
		     -o-transform: translateX(-100px);
            transform: translateX(-100px);
  }

  header#masthead .dropdown.move-right .content {
    -webkit-transform: translateX(100px);
       -moz-transform: translateX(100px);
		    -ms-transform: translateX(100px);
				 -o-transform: translateX(100px);
            transform: translateX(100px);
  }

  header#masthead .content {
    padding: 30px;
		text-align: left;

    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;

    -webkit-transition: transform .3s;
			 -moz-transition: transform .3s;
			  -ms-transition: transform .3s;
				 -o-transition: transform .3s;
				 		transition: transform .3s;

    transition: transform .3s, -webkit-transform .3s;
  }

	header#masthead .dropdown-menu-1 .content {
		width: 600px;
  }

	header#masthead .dropdown-menu-2 .content {
		width: 600px;
  }

	header#masthead .dropdown-menu-3 .content {
		width: 650px;
  }

	header#masthead .dropdown-menu-4 .content {
		width: 500px;
  }

	header#masthead .dropdown-menu-5 .content {
		width: 650px;
  }

	/* Publicaciones y Art Dept.: dos columnas de igual alto. Cada lista se rellena en
	   PHP hasta 8 filas (reales o vacias), asi el boton "Ver X" y el alto del panel
	   coinciden por construccion, sin depender del alto exacto de una fila */

	/* El widget rellena su columna: se anulan ancho/margenes del grid viejo (que aun
	   tiene reglas 50/55/45% mas especificas, por eso el selector largo aqui) */
	header#masthead .dropdown-list ul li.dropdown-menu-1 .content .dd-col .widget,
	header#masthead .dropdown-list ul li.dropdown-menu-2 .content .dd-col .widget {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	header#masthead .dropdown-menu-1 .dd-cols,
	header#masthead .dropdown-menu-2 .dd-cols {
		flex: 1;
		flex-direction: row;
		align-items: stretch;
		gap: 40px;
	}

	header#masthead .dropdown-menu-1 .dd-col,
	header#masthead .dropdown-menu-2 .dd-col {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	/* Filas de relleno (huecos): mantienen el alto de fila pero sin viñeta */
	header#masthead .content .widget.widget_recent_entries ul li.dd-vacia:before {
		display: none;
	}

	header#masthead .dd-col a.btn-menu-view-all {
		margin-top: auto;
		padding-top: 16px;
	}

	/* Columna de la imagen de Art Dept.: rellena (cover) el alto de la columna de
	   lista via posicion absoluta, asi se adapta sola sin medir nada */
	header#masthead .dd-col-img {
		position: relative;
		padding: 0;
		order: 1;
	}

	/* Cuadrada, anclada a la derecha con el mismo margen arriba / derecha / abajo
	   (el sobrante de ancho, que la columna es mas ancha que alta, queda a la izquierda) */
	header#masthead .dd-img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		aspect-ratio: 1 / 1;
		background-size: cover;
		background-position: center;
		border-radius: 2px;
	}

	header#masthead .label {
	  display: none;
	}

	header#masthead .dropdown-list ul li.dropdown {
		padding: 0;
		border-bottom: none;
	}

	header#masthead .content .widget {
		padding-right: 30px;
		margin-top: 0;
		margin-bottom: 30px;
	}

	header#masthead .dropdown-list ul li.dropdown-menu-1 .widget {
		width: 50%;
	}

	header#masthead .dropdown-list ul li.dropdown-menu-2 .widget:nth-child(1) {
		width: 55%;
	}

	header#masthead .dropdown-list ul li.dropdown-menu-2 .widget:nth-child(2) {
		width: 45%;
	}

	header#masthead .content .widget:nth-child(2) {
		padding-right: 0;
	}

	header#masthead .content .widget:nth-child(3) {
		margin: 0;
		padding: 0;
	}

	header#masthead .content .widget.widget_recent_entries ul li,
	header#masthead .content .widget.widget_categories ul li,
	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li,
	header#masthead .content .widget.widget_nav_menu ul li {
		margin-bottom: 5px;
		font-size: 0.85em;
	}

	header#masthead .content .widget.widget_recent_entries ul li:before,
	header#masthead .content .widget.widget_categories ul li:before,
	header#masthead .content .widget.widget_nav_menu ul li:before {
		width: 10px;
		height: 10px;
		top: 6px;
	}

	header#masthead .content .widget a.btn-menu-contact,
	header#masthead .content .widget a.btn-menu-view-all {
		float: left;
	}

	header#masthead .content .widget a.btn-menu-view-all {
		font-size: 0.9em;
	}

  header#masthead .bg-layer {
    position: absolute;
    height: 1px;
    width: 1px;
    top: 0;
    left: 0;
    background: #fff;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;

    -webkit-transition: opacity .3s;
			 -moz-transition: opacity .3s;
			  -ms-transition: opacity .3s;
				 -o-transition: opacity .3s;
    				transition: opacity .3s;

    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
		     -o-transform-origin: top left;
            transform-origin: top left;

    -webkit-transform: translateZ(0);
			 -moz-transform: translateZ(0);
			  -ms-transform: translateZ(0);
				 -o-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  header#masthead.is-dropdown-visible .bg-layer {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;

    /* Solo opacity (aparecer/desaparecer): sin transicion en transform, el fondo
       no morphea de tamano entre Publicaciones / Art Dept. / Contacto */
    transition: opacity .3s;
  }

	/* Header branding + Right nav over 1000px */
	header#masthead .site-branding {
		position: absolute;
		width: 170px;
		height: 58px;
		left: 4%;
		padding: 0;
		margin: 40px 0;
		text-align: left;
		overflow: hidden;

		-webkit-transition: margin .4s ease;
			 -moz-transition: margin .4s ease;
			  -ms-transition: margin .4s ease;
				 -o-transition: margin .4s ease;
				 		transition: margin .4s ease;
	}

	header#masthead.shrink .site-branding {
    margin: 20px 0;
  }

	header#masthead .site-branding .site-logo.desktop.black,
	header#masthead .site-branding .site-logo.responsive.white {
		display: none;
	}

	header#masthead .site-branding .site-logo.desktop.white,
	header#masthead .site-branding .site-logo.responsive.black {
		display: block;
	}

	header#masthead .site-branding .site-logo img {
		display: block;
		width: 100%;
		height: auto;
	}

	header#masthead .site-branding .site-logo.responsive.black img {
		max-width: 60px;
	}

	header#masthead .site-branding .site-logo.desktop.white.hide-logo {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
		opacity: 0;

		-webkit-transform: translateY(-100%);
			 -moz-transform: translateY(-100%);
			  -ms-transform: translateY(-100%);
				 -o-transform: translateY(-100%);
				 		transform: translateY(-100%);
	}

	header#masthead .site-branding .site-logo.responsive.black.hide-logo {
		display: none;
	}

	header#masthead .site-branding .site-logo.desktop.white.show-logo,
	header#masthead .site-branding .site-logo.responsive.black.show-logo {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  filter: alpha(opacity=100);
	  -moz-opacity: 1;
	  -khtml-opacity: 1;
		opacity: 1;

		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);

		-webkit-transition-delay: 0s;
			 -moz-transition-delay: 0s;
			  -ms-transition-delay: 0s;
				 -o-transition-delay: 0s;
				 		transition-delay: 0s;
	}

	header#masthead .site-branding .site-meta {
		margin: 40px 0;
	}

	header#masthead .site-branding .site-meta a {
		font-size: 1.5em;
	}

	header#masthead .right-nav {
		display: block;
		position: absolute;
		height: 140px;
		top: 0;
		right: 4%;
	}

	header#masthead .right-nav a {
		/* Same style as main-nav a */
		padding: 5px 20px;
		color: #fff;
		font-family: 'IBM Plex Sans', sans-serif;
		font-weight: 500;
		font-size: 1em;
		line-height: 140px;
		border-radius: 30px;
		border: 2px solid #fff;
		background-color: transparent;

		-webkit-transition: height .4s ease, line-height .4s ease, background-color .2s ease;
			 -moz-transition: height .4s ease, line-height .4s ease, background-color .2s ease;
			  -ms-transition: height .4s ease, line-height .4s ease, background-color .2s ease;
				 -o-transition: height .4s ease, line-height .4s ease, background-color .2s ease;
				 		transition: height .4s ease, line-height .4s ease, background-color .2s ease;
	}

	header#masthead .right-nav a:hover {
		color: #000;
		background-color: #fff;
	}
}

@media only screen and (min-width: 1300px) {
	header#masthead .dropdown-menu-1 .content {
		width: 700px;
  }

	header#masthead .dropdown-menu-2 .content {
		width: 700px;
  }

	header#masthead .content .widget.widget_recent_entries ul li:before,
	header#masthead .content .widget.widget_categories ul li:before,
	header#masthead .content .widget.widget_nav_menu ul li:before {
		top: 7px;
	}
}

@media only screen and (min-width: 1700px) {
	header#masthead .content .widget.widget_recent_entries ul li:before,
	header#masthead .content .widget.widget_categories ul li:before,
	header#masthead .content .widget.widget_nav_menu ul li:before {
		top: 8px;
	}

	header#masthead .content .widget.widget_alejandrosoriano_tutorials_widget ul li img {
		margin-top: 5px;
	}
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/

.site-footer {
	position: relative;
	float: left;
	width: 100%;
	padding-top: 5%;
	padding-bottom: 3%;
	margin: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	background: #2832d0;
	z-index: 1;

	-webkit-transition: opacity .4s ease;
		 -moz-transition: opacity .4s ease;
		  -ms-transition: opacity .4s ease;
			 -o-transition: opacity .4s ease;
			 		transition: opacity .4s ease;
}

@media only screen and (min-width: 1920px) {
	.site-footer {
		padding-top: 80px;
		padding-bottom: 60px;
	}
}

.site-footer.is-hidden {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
	opacity: 0;
}

#footer-sidebar {
	display:block;
	float: left;
	width: 100%;
	line-height: 170%;
	margin-bottom: 60px;
}

#footer-sidebar .footer-widget {
	float: left;
}

#footer-sidebar h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
}

#footer-sidebar li {
	display: block;
}

#footer-sidebar a {
	padding: 2px 10px;
	margin-left: -10px;
	color: #fff;
	border-radius: 20px;

	-webkit-transition: background-color .2s ease;
		 -moz-transition: background-color .2s ease;
		  -ms-transition: background-color .2s ease;
			 -o-transition: background-color .2s ease;
			 		transition: background-color .2s ease;
}

#footer-sidebar a:hover {
	color: #2832d0;
	background-color: #fff;
}

.site-footer,
.site-footer a {
	color: #fff;
}

.site-footer a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

.site-footer .site-info {
	float: left;
	font-size: 0.85em;
}

/*
.site-footer .site-info span,
.site-footer .site-info a {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
	opacity: 0.3;
}

.site-footer .site-info a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}*/

/*--------------------------------------------------------------
## Page: Hero
--------------------------------------------------------------*/

section.hero {
  position: relative;
	width: 100%;
	background-color: #fff;
  overflow: hidden;
}

section.hero,
.entry-featured-illustration {
	height: 65vh;
}

section.hero_small {
  height: 60vh;
	background-color: #fb5130;
}

section.hero .hero-wrapper,
section.hero .hero-wrapper .overlay {
  position: absolute;
  width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

section.hero-parallax .hero-wrapper .entry-featured-background {
	position: relative;
	width: 100%;
	height: 65vh;
  	left: 0;
 	top: 0;
	background-color: #2832d0;
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

section.hero-parallax .hero-wrapper .entry-featured-background.blue {
	background-color: #2832d0;
}

section.hero-parallax .hero-wrapper .entry-featured-background.orange {
	background-color: #fb5130;
}

section.hero-parallax .hero-wrapper .entry-featured-background.yellow {
	background-color: #ffd900;
}

section.hero-parallax .hero-wrapper .header-fixed {
	position: fixed;
	width: 100%;
	height: 65vh;
  top: 0;
  left: 0;
}

section.hero-parallax .hero-wrapper .header-fixed .header-container {
	position: absolute;
	width: 100%;
	top: 55%;

	-webkit-transform: translateY(-50%);
		 -moz-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
			 -o-transform: translateY(-50%);
			 		transform: translateY(-50%);
}

section.hero-parallax .hero-wrapper .header-fixed .header-container h1 {
	position: relative;
	width: 90%;
	max-width: 1400px;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 40px;
	font-size: 10vw;
	line-height: 110%;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 700px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container h1 {
		width: 90%;
    font-size: 7vw;
  }
}

@media screen and (min-width: 1000px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container h1 {
	width: 70%; 
    font-size: 5.5vw;
  }
}

@media screen and (min-width: 1920px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container h1 {
	width: 70%;
    font-size: 5.6em;
  }
}

section.hero-parallax .hero-wrapper .header-fixed .header-container h1:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: -50px;
	margin-top: -15px;
	background-size: cover;
	background-repeat: no-repeat;
}

section.hero-parallax.hero-tutorial .hero-wrapper .header-fixed .header-container h2 {
	margin-top: 10px;
	font-size: 1.8em;
	line-height: 140%;
}

section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-premium-project {
	margin-bottom: 30px;
	color: #ff4f23;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.5em;
	letter-spacing: 0.02em;
}

/* Cuando la portada es roja, el rojo no contrasta: la seccion (nombre) va en
   amarillo. :has detecta el fondo rojo del hero, asi vale para los 4 tipos */
section.hero-parallax:has(.entry-featured-background.orange) .hero-wrapper .header-fixed .header-container .entry-premium-project {
	color: #ffda4a;
}

/* El nombre hereda el color de la seccion (rojo, o amarillo en portada roja) */
section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-premium-project a {
	color: inherit;
	text-decoration: underline;
}

section.hero-parallax.hero-project .hero-wrapper .header-fixed .header-container .entry-premium-project span::after{
	content: ', ';
}

section.hero-parallax.hero-project .hero-wrapper .header-fixed .header-container .entry-premium-project span:last-child:after{
	content: '';
}

section.hero-parallax.hero-tutorial .hero-wrapper .header-fixed .header-container h2,
section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-meta {
	margin-top: 10px;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1.2em;
}

section.hero-parallax .hero-wrapper .header-fixed .header-container p {
	margin: 0;
}

section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-big {
	width: 100%;
	color: #fff;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.5em;
	font-size: 7vw;
	line-height: 120%;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 700px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-big {
		width: 60%;
    font-size: 4vw;
  }
}

@media screen and (min-width: 1000px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-big {
	width: 60%;
    font-size: 2.8vw;
  }
}

@media screen and (min-width: 1920px) {
  section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-big {
	max-width: 800px;
    font-size: 55px;
  }
}

section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-small {
	width: 40%;
	max-width: 500px;
	margin-top: 20px;
	color: #ffd900;
}

.entry-featured-illustration {
	position: absolute;
	width: 100%;
  top: 0;
  right: 0;
	z-index: 10;
}

.entry-featured-illustration .illustration-container {
	position: absolute;
	width: 40%;
	height: 100%;
	right: 0;
	bottom: 0;
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;

	-webkit-transform: translate3d(-10%,10%,0);
		 -moz-transform: translate3d(-10%,10%,0);
		  -ms-transform: translate3d(-10%,10%,0);
			 -o-transform: translate3d(-10%,10%,0);
			 		transform: translate3d(-10%,10%,0);
}

.home-featured-illustration .illustration-container {
	max-width: 800px;
}

section.hero_small .header-page {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	overflow: hidden;
}

section.hero_small .header-page h1 {
	font-family: 'TTFirsNeue-Medium';
	font-size: 3.5em;
	line-height: 100%;
}

@media screen and (min-width: 700px) {
  section.hero_small .header-page h1 {
    font-size: 8vw;
  }
}

@media screen and (min-width: 1000px) {
  section.hero_small .header-page h1 {
    font-size: 8vw;
  }
}

@media screen and (min-width: 1920px) {
  section.hero_small .header-page h1 {
    font-size: 8.1em;
  }
}

section.hero_small .header-page .entry-subtitle {
	max-width: 30%;
	margin-top: 10px;
	color: #ffd900;
	line-height: 140%;
}

section.hero_small .header-page .entry-subtitle p {
	margin: 0;
}

section.hero_small .entry-featured-illustration {
	position: absolute;
	width: 50%;
	height: 100%;
	bottom: 0;
	right: 0;
	background-size: 85%;
	background-position: center bottom;
	background-repeat: no-repeat;

	-webkit-transform: translateY(3%);
		 -moz-transform: translateY(3%);
		  -ms-transform: translateY(3%);
			 -o-transform: translateY(3%);
			 		transform: translateY(3%);
}

section.hero_small.hero_index .entry-featured-illustration {
	background-size: 75%;
	background-position: center center;
}

/* Color del texto de la cabecera segun la paleta. Por defecto (sin color marcado, el
   naranja base de section.hero_small) el titulo va blanco; solo los tonos claros lo
   llevan oscuro (inc/cabeceras.php, inc/page-ajustes.php) */
section.hero_small .page-title {
	color: #fff;
}

section.hero_small.yellow .page-title,
section.hero_small.white .page-title,
section.hero_small.grey .page-title {
	color: #2832d0;
}

section.hero_small.yellow .header-page .entry-subtitle,
section.hero_small.white .header-page .entry-subtitle {
	color: #fb5130;
}

section.hero_small.grey .header-page .entry-subtitle {
	color: #555;
}

/*--------------------------------------------------------------
## Page
--------------------------------------------------------------*/

#content.site-content,
article.hentry,
article .entry-content {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

section {
	position: relative;
	float: left;
	width: 100%;
}

section.white {
	background-color: #fff;
}

section.yellow {
	background-color: #ffda4a;
}

section.blue {
	color: #fff;
	background-color: #2832d0;
}

section.orange {
	background-color: #fb5130;
}

section.green {
	color: #fff;
	background-color: #389362;
}

section.grey {
	background-color: #f2f2f2;
}

.row {
	float: left;
	width: 100%;
}

.boxed_large {
	padding-left: 4%;
	padding-right: 4%;
}

.boxed_regular {
	padding-left: 10%;
	padding-right: 10%;
}

.boxed_large.inside_one_half {
	padding-left: 8%;
	padding-right: 8%;
}

.boxed_regular.inside_one_half {
	padding-left: 20%;
	padding-right: 20%;
}

.header-hidden {
	position: absolute;
	text-indent: -99999px;
}

button.button,
span.button,
a.button {
	display: inline-block;
	position: relative;
	height: 70px;
	padding: 0 40px;
	border-radius: 60px;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 1em;
	line-height: 70px;
	text-transform: uppercase;
	border: none;
	cursor: pointer !important;
	background-color: #1a171b;
	z-index: 1;

	-webkit-transition: transform .3s ease;
		 -moz-transition: transform .3s ease;
		  -ms-transition: transform .3s ease;
			 -o-transition: transform .3s ease;
			 		transition: transform .3s ease;
}

button.button:hover,
span.button:hover,
.button:hover {
	-webkit-transform: translate3d(0,-5px,0);
		 -moz-transform: translate3d(0,-5px,0);
		  -ms-transform: translate3d(0,-5px,0);
			 -o-transform: translate3d(0,-5px,0);
			 		transform: translate3d(0,-5px,0);
}

.btn-tutorial,
.btn-ressource {
	min-width: 150px;
}

.button.btn-posts,
.button.btn-tutorials,
.button.btn-art {
	display: inline-block;
	margin: var(--espacio) auto;
}

.button.btn-tutorials {
	background-color: #fb5130;
}

.button.btn-mail {
	margin-bottom: 5em;
	background-color: #2832d0;
}

.icon-mail {
	display: block;
	width: 8em;
	margin: 5em auto 0.5em;
}

@media screen and (min-width: 1000px) {
	.button.btn-mail {
		margin-bottom: 0;
	}

	.icon-mail {
		margin: 0 auto 0.5em;
	}
}

button.btn-filter,
button.btn-loadmore {
	display: block;
	width: auto;
	height: 50px;
	padding: 0 20px;
	margin: 0 auto;
	line-height: 50px;
	background-color: #fb5130;
}

button.btn-filter:hover,
.is-active button.btn-filter {
	background-color: #000;
}

button.btn-loadmore--art {
	color: #fb5130;
	background-color: #ffd900;
}

button.btn-loadmore.is-hidden {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
	opacity: 0;
}

#load-more-posts,
#load-more-art {
	float: left;
	width: 100%;
	height: auto;
	margin-top: 5%;
}

.clear_regular {
	position: relative;
	float: left;
	width: 100%;
	height: 1px;
	margin-bottom: 5%;
}

/* Clearfix sin hueco: el espacio ya lo pone el margen del elemento siguiente */
.clear_regular.clear-flush {
	margin-bottom: 0;
}

/* Hueco de arranque tras la cabecera, algo mas generoso que el ritmo normal
   (--espacio-extra = 1.5 x --espacio-fila). Unifica el viejo clear-top-single y el
   margin-top de arranque del portfolio */
.clear_espacio {
	position: relative;
	float: left;
	width: 100%;
	height: 1px;
	margin-bottom: var(--espacio-extra);
}

/* Variante al ritmo normal (--espacio), para huecos que no son el de arranque
   (p. ej. entre los filtros y la rejilla del portfolio) */
.clear_espacio.es-normal {
	margin-bottom: var(--espacio);
}

.clear_large {
	position: relative;
	float: left;
	width: 100%;
	height: 1px;
	margin-bottom: 8%;
}

.clear_line {
	position: relative;
	float: left;
	width: 100%;
	height: 1px;
	background-color: #eee;
}

.clear_line.transparent {
	background-color: transparent;
}

.clear_regular.clear_index_items_2 {
	display: none;
}

.clear_regular.clear_index_items_4 {
	display: block;
}

/*--------------------------------------------------------------
## Tutorials - Archive
--------------------------------------------------------------*/

.tutorials-loop {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

article.tutorial-archive {
	padding: 0 5%;
}

article.tutorial-archive.is-hidden {
	display: none;
}

.tutorials-home article.tutorial-archive {
	border-right: 1px solid #eee;
}

.tutorials-home article.tutorial-archive:last-child {
	border: none;
}

/* En 2300px+ caben 4 tutoriales (ver @media abajo); por debajo se muestran 3 */
.tutorials-home article.tutorial-archive:nth-child(4) {
	display: none;
}

/* Fila de 3 (701-2299): la 3a es la ultima visible, sin divisor a la derecha */
@media screen and (min-width: 701px) and (max-width: 2299px) {
	.tutorials-home article.tutorial-archive:nth-child(3) {
		border-right: none;
	}
}

/* 2300px+: 4 tutoriales por fila. El 5% de padding es enorme a este ancho, se topa con var(--espacio) */
@media screen and (min-width: 2300px) {
	.tutorials-home article.tutorial-archive {
		width: 25%;
		padding: 0 var(--espacio);
	}
	.tutorials-home article.tutorial-archive:nth-child(4) {
		display: block;
		border-right: none;
	}
}

.tutorials-index article.tutorial-archive {
	padding: 5% 5%;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.tutorials-index article.tutorial-archive:nth-child(4n+1) {
	border-left: 1px solid #eee;
}

.tutorials-index article.tutorial-archive:nth-child(1),
.tutorials-index article.tutorial-archive:nth-child(2),
.tutorials-index article.tutorial-archive:nth-child(3) {
	border-top: 1px solid #eee;
}

article.tutorial-archive .article-container {
	max-width: 470px;
	margin: 0 auto;
}

article.tutorial-archive .entry-icon-tutorial,
article.tutorial-archive .entry-premium-tutorial,
article.tutorial-archive .entry-header,
article.tutorial-archive .entry-content,
article.tutorial-archive .entry-footer {
	float: left;
	width: 100%;
	text-align: center;
}

article.tutorial-archive .entry-icon-tutorial {
	float: none;
	width: 30px;
	height: 30px;
	margin: 0 auto 30px;
}

article.tutorial-archive:hover .entry-icon-tutorial img.icon-hexagon {
	-webkit-animation: rotate 1.8s infinite ease;
		 -moz-animation: rotate 1.8s infinite ease;
		  -ms-animation: rotate 1.8s infinite ease;
			 -o-animation: rotate 1.8s infinite ease;
			 		animation: rotate 1.8s infinite ease;
}

article.tutorial-archive:hover .entry-icon-tutorial img.icon-triangle {
	-webkit-animation: rotate 1.4s infinite ease;
		 -moz-animation: rotate 1.4s infinite ease;
		  -ms-animation: rotate 1.4s infinite ease;
			 -o-animation: rotate 1.4s infinite ease;
			 		animation: rotate 1.4s infinite ease;
}

article.tutorial-archive:hover .entry-icon-tutorial img.icon-circle {
	-webkit-animation: slide 2s infinite ease;
		 -moz-animation: slide 2s infinite ease;
		  -ms-animation: slide 2s infinite ease;
			 -o-animation: slide 2s infinite ease;
			 		animation: slide 2s infinite ease;
}

-webkit-@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

-moz-@keyframes rotate {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

-ms-@keyframes rotate {
	0% {
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

-o-@keyframes rotate {
	0% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

-webkit-@keyframes slide {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	25% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	50% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	75% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

-moz-@keyframes slide {
	0% {
		-moz-transform: translateX(0);
		transform: translateX(0);
	}
	25% {
		-moz-transform: translateX(100%);
		transform: translateX(100%);
	}
	50% {
		-moz-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	75% {
		-moz-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-moz-transform: translateX(0);
		transform: translateX(0);
	}
}

-ms-@keyframes slide {
	0% {
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	25% {
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	50% {
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	75% {
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

-o-@keyframes slide {
	0% {
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	25% {
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	50% {
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	75% {
		-o-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes slide {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(100%);
	}
	50% {
		transform: translateX(-100%);
	}
	75% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(0);
	}
}

article.tutorial-archive .entry-premium-tutorial {
	margin-bottom: 30px;
	color: #ff4f23;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.1em;
	letter-spacing: 0.02em;
	text-decoration: underline;
}

article.tutorial-archive .entry-header {
	margin-bottom: 30px;
}

article.tutorial-archive .entry-header a {
	color: #000;
}

article.tutorial-archive .entry-header .entry-title {
	margin: 0 auto 20px;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 2em;
	font-size: 7vw;
	line-height: 120%;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 700px) {
  article.tutorial-archive .entry-header .entry-title {
		width: 100%;
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 1000px) {
  article.tutorial-archive .entry-header .entry-title {
	width: 100%;
    font-size: 2.8vw;
  }
}

@media screen and (min-width: 1920px) {
  article.tutorial-archive .entry-header .entry-title {
	max-width: 400px;
    font-size: 3em;
  }
}

article.tutorial-archive .entry-header .entry-subtitle {
	margin-bottom: 30px;
	font-size: 1.3em;
	line-height: 120%;
	overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

article.tutorial-archive .entry-content {
	margin-bottom: var(--espacio);
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1em;
	line-height: 170%;
}

/* Recorte a 3 lineas: va en el <p> (contiene el texto), no en el <div> padre:
   -webkit-line-clamp no atraviesa un bloque hijo. min-height reserva las 3 lineas
   para que el boton quede a la misma altura aunque la intro sea mas corta */
article.tutorial-archive .entry-content p {
	margin: 0;
	min-height: 3lh;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*--------------------------------------------------------------
## Archive
--------------------------------------------------------------*/

.filter-list{
	display: flex;
	flex-wrap: wrap;
}

.filter-item{
	margin-right: 0.5em;
}

.filter-item:last-child{
	margin-right: 0;
}

.loop-wrapper.margin-top {
	margin-top: 5%;
}

.loop-wrapper.no-margin-top {
	margin-top: 0;
}

.posts-wrapper {
	text-align: center;
}

article.post-archive .entry-featured-image,
article.post-archive .entry-info-news,
article.post-archive .entry-header,
article.post-archive .entry-meta,
article.post-archive .entry-content,
article.post-archive .entry-footer {
	float: left;
	width: 100%;
	text-align: left;
	background: #fff;
}

article.post-archive .entry-featured-image {
	position: relative;
	float: left;
	width: 100%;
	background-color: #1823cb;
}

article.post-archive .entry-featured-image.blue {
	background-color: #222eda;
}

article.post-archive .entry-featured-image.orange {
	background-color: #fb5130;
}

article.post-archive .entry-featured-image.yellow {
	background-color: #f2d00d;
}

article.post-archive--art .entry-featured-image {
	background-color: transparent;
}

article.post-archive .entry-featured-image img {
	mix-blend-mode: multiply;

	-webkit-filter: grayscale(100%);
		 -moz-filter: grayscale(100%);
		  -ms-filter: grayscale(100%);
			 -o-filter: grayscale(100%);
  	 			filter: grayscale(100%);
}


article.post-archive--art .entry-featured-image img {
	mix-blend-mode: normal;
	filter: none;
}

article.post-archive .entry-featured-image a.post-thumbnail {
	float: left;
	width: 100%;
	height: auto;
}

/* Post previews forced to 3:2, the image crops to the frame */
article.post-archive--blog .entry-featured-image .post-thumbnail {
	display: block;
	aspect-ratio: 3 / 2;
}

article.post-archive--blog .entry-featured-image .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

article.post-archive .entry-featured-image .entry-icon-video {
	position: absolute;
	width: 65px;
	height: 46px;
	top: 10%;
	right: 7%;
	background: url('img/icon-video.svg') no-repeat;
	z-index: 1;
}

article.post-archive .entry-info-news {
	position: relative;
	padding: 10% 7% 10%;
	margin-top: -6px; /* Correct bug for color multiplied offset */
}

article.post-archive .entry-header h2 {
	max-width: 100%;
	padding-right: 10px;
	margin-bottom: 5px;
	font-family: 'TTFirsNeue-Medium';
	font-size: 2em;
	font-size: 6vw;
	line-height: 130%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em; /* 2 lines at line-height 130%, keeps cards aligned */
}

/* En art la card muestra el titulo en una linea (año · categoria · rol debajo) */
article.post-archive--art .entry-header h2 {
	-webkit-line-clamp: 1;
	min-height: 1.3em;
}

@media screen and (min-width: 700px) {
  article.post-archive .entry-header h2 {
		font-size: 1.5em;
  }
}

@media screen and (min-width: 1000px) {
  article.post-archive .entry-header h2 {
    font-size: 1.6em;
  }
}

@media screen and (min-width: 1300px) {
  article.post-archive .entry-header h2 {
    font-size: 1.7em;
  }
}

@media screen and (min-width: 1920px) {
  article.post-archive .entry-header h2 {
		font-size: 2em;
		font-size: 1.6vw;
  }
}

article.post-archive .entry-header h2,
article.post-archive .entry-header a {
	color: #000;
}

/* Texto plano (el subtitulo de art): color propio, si no hereda el color:#fff
   que ponen las secciones oscuras y desaparece sobre la tarjeta blanca */
article.post-archive .entry-meta {
	color: #707070;
}

/* La linea año · categoria · rol de art, un pelin mas grande */
article.post-archive--art .entry-meta {
	font-size: 1.1em;
}

article.post-archive .entry-meta a {
	color: #707070;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
}

article.post-archive .entry-content {
	height: 110px;
	margin: 15px 0 20%;
	color: #000;
	font-size: 1em;
	line-height: 170%;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

article.post-archive .entry-footer a.btn-readmore {
	float: left;
	width: auto;
	color: #ff4f23;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 0.9em;
	text-transform: uppercase;
	overflow: hidden;
}

article.post-archive .entry-footer a.btn-readmore .container-readmore {
	-webkit-transform: translateX(-80%);
		 -moz-transform: translateX(-80%);
		  -ms-transform: translateX(-80%);
			 -o-transform: translateX(-80%);
			 		transform: translateX(-80%);

	-webkit-transition: transform .4s;
		 -moz-transition: transform .4s;
		  -ms-transition: transform .4s;
			 -o-transition: transform .4s;
			 		transition: transform .4s;

	-webkit-transition-timing-function: cubic-bezier(0.200, 0.100, 0.200, 1.000);
		 -moz-transition-timing-function: cubic-bezier(0.200, 0.100, 0.200, 1.000);
		  -ms-transition-timing-function: cubic-bezier(0.200, 0.100, 0.200, 1.000);
			 -o-transition-timing-function: cubic-bezier(0.200, 0.100, 0.200, 1.000);
			 		transition-timing-function: cubic-bezier(0.200, 0.100, 0.200, 1.000);
}

article.post-archive:hover .entry-footer a.btn-readmore .container-readmore {
	-webkit-transform: translateX(0);
		 -moz-transform: translateX(0);
		  -ms-transform: translateX(0);
			 -o-transform: translateX(0);
			 		transform: translateX(0);
}

article.post-archive .entry-footer a.btn-readmore .text-readmore {
	display: inline-block;
	float: left;
	width: 100px;
	height: 22px;
}

article.post-archive .entry-footer a.btn-readmore .icon-readmore {
	display: inline-block;
	float: left;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	margin-left: -10px;
	background-image: url('img/icon-arrow-readmore.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.posts-carousel article.post-archive {
	width: 100%;
}

.posts-index .posts-wrapper .posts-loop {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	width: 102%;
	margin-left: -1%;
}

.posts-index .posts-wrapper .posts-loop article.post-archive {
	padding: 0 1.5%;
}

.posts-index .posts-wrapper .posts-loop .break {
	display: none;
	clear:both;
}

.posts-navigation {
		visibility: hidden;
}

/*--------------------------------------------------------------
## News & Tutorial - Single
--------------------------------------------------------------*/

.boxed_xsmall {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.boxed_small {
	width: 80%;
	max-width: 1400px;
	margin: 0 auto;
}

.boxed_small .col {
	float: left;
}

.boxed_small.padding {
	width: 60%;
	max-width: 900px;
}

/* El cuerpo del tutorial: contenido + compartir + recursos. Es el contenedor del
   indice sticky, que no puede salirse de el */
article.single-entry .tutorial-cuerpo {
	position: relative;
	float: left;
	width: 100%;
}

article.single-entry .content-wrapper {
	display: ;
	position: relative;
	float: left;
	width: 100%;
	z-index: 1;
}

article.single-entry .entry-nav.desktop,
article.single-entry .entry-nav.mobile {
	height: auto;
	padding: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	z-index: 2;
}

article.single-entry .entry-nav.desktop {
	position: -webkit-sticky;
	position: sticky;
	width: 200px;
	top: 100px;
	left: 4%;
	margin-bottom: 40px;
	font-size: 1em;
}

@media screen and (min-width: 1500px) {
	article.single-entry .entry-nav.desktop {
		width: 300px;
	}
}

article.single-entry .entry-nav.desktop:hover {
	width: 400px;
}

article.single-entry .entry-nav.mobile {
	display: none;
	position: -webkit-sticky;
	position: sticky;
	width: 100%;
	top: 68px;
	margin-bottom: var(--espacio-extra);
	font-size: 1em;
	border-bottom: 1px solid #eee;
	background-color: #fff;
}

article.single-entry .entry-nav.mobile .nav-title {
	width: 100%;
	height: 60px;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.1em;
	line-height: 60px;
	cursor: pointer;
}

article.single-entry .entry-nav.mobile .nav-title span {
	float: right;
	margin-right: 1%;
	font-size: 1.2em;
}

article.single-entry .entry-nav.mobile .nav-title span.minus,
article.single-entry .entry-nav.mobile.is-visible .nav-title span.plus {
	display: none;
}

article.single-entry .entry-nav.mobile.is-visible .nav-title span.minus {
	display: block;
}

article.single-entry .entry-nav.mobile .nav-content {
	position: absolute;
	width: 100%;
	max-height: 0px;
	top: 61px;
	left: 0;
	line-height: 60px;
	overflow-y: hidden;
	background-color: #fff;

	-webkit-transition: max-height .3s linear;
		 -moz-transition: max-height .3s linear;
		  -ms-transition: max-height .3s linear;
			 -o-transition: max-height .3s linear;
			 		transition: max-height .3s linear;
}

article.single-entry .entry-nav.mobile.is-visible .nav-content {
	height: auto;
	max-height: 400px;
	border-bottom: 1px solid #eee;
}

article.single-entry .entry-nav.desktop ul {
	padding: 0;
	margin: 0;
}

article.single-entry .entry-nav.desktop li,
article.single-entry .entry-nav.mobile li {
	display: block;
	position: relative;
	width: 200px;
	height: 30px;
	line-height: 140%;
}

@media screen and (min-width: 1500px) {
	article.single-entry .entry-nav.desktop li,
	article.single-entry .entry-nav.mobile li {
		width: 300px;
	}
}

article.single-entry .entry-nav.mobile li {
	width: auto;
}

article.single-entry .entry-nav.mobile li:first-child {
	margin-top: 15px;
}

article.single-entry .entry-nav.mobile li:last-child {
	margin-bottom: 20px;
}

article.single-entry .entry-nav.desktop li:hover {
	width: auto;
}

article.single-entry .entry-nav.desktop li a,
article.single-entry .entry-nav.mobile li a {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 10px;
	margin-left: -10px;
	color: #fb5130;
	font-size: 0.9em;
	border-radius: 20px;
	border: 2px solid transparent;
	overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

	-webkit-transition: background-color .1s ease, border .1s ease, color .1s ease;
		 -moz-transition: background-color .1s ease, border .1s ease, color .1s ease;
		  -ms-transition: background-color .1s ease, border .1s ease, color .1s ease;
			 -o-transition: background-color .1s ease, border .1s ease, color .1s ease;
			 		transition: background-color .1s ease, border .1s ease, color .1s ease;
}

article.single-entry .entry-nav.desktop li a:hover,
article.single-entry .entry-nav.desktop li a.active,
article.single-entry .entry-nav.mobile li a.active {
	color: #fff;
	border: 2px solid #fb5130;
	background-color: #fb5130;
}

article.single-entry .entry-nav.desktop li:first-child a {
	font-family: 'TTFirsNeue-DemiBold';
	color: #000;
	font-size: 1.1em;
}

article.single-entry .entry-nav.desktop li:first-child a:hover {
	color: #000;
	border: none;
	border: 2px solid transparent;
	background-color: transparent;
}

article.single-entry .entry-content {
	float: left;
	width: 100%;
}

article.single-entry .entry-content .entry-meta {
	margin-right: auto;
	margin-left: auto;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	/* Fluido, sin saltos: 0.9em hasta portatil grande y crece con el ancho hasta 1.2em
	   (el tamaño del parrafo) en 4K. El vw solo empuja por encima de ~1650px; por debajo
	   manda el minimo. Afecta al meta del contenido (ficha y fecha del blog), no al
	   subtitulo de la cabecera (ese cuelga del hero, fuera de .entry-content) */
	font-size: clamp(0.9em, calc(12px + 0.23vw), 1.2em);
	line-height: 170%;
}

article.single-entry .entry-content .entry-meta .author {
	display: block;
}

article.single-entry .entry-content .entry-meta,
article.single-entry .entry-content .entry-meta a {
	color: #aaa;
}

article.single-entry .entry-content .entry-text.text-intro p {
	margin-bottom: 0;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.8em;
	line-height: 140%;
	letter-spacing: 0.02em;
}

article.single-entry .entry-content .entry-text p,
article.single-entry .entry-content .entry-col-2 p {
	margin-top: 0;
	font-size: 1.2em;
	line-height: 170%;
}

article.single-entry .entry-content .entry-text p:last-child,
article.single-entry .entry-content .entry-col-2 p:last-child {
	margin-bottom: 0;
}

article.single-entry .entry-content .entry-list ul li {
	display: block;
	position: relative;
	margin-bottom: 20px;
	color: #2832d0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 170%;
	text-decoration: ;
	border-bottom: 0 solid #eee;
}

article.single-entry .entry-content .entry-list ul li:before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	top: 8px;
	left: -40px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* AS Lista numerada: contador propio (el reset del tema pone list-style:none en li, y
   el marcador nativo "outside" se sale de la columna). El numero se ancla en left:0
   (borde del parrafo) y el texto cuelga con el padding, alineado */
article.single-entry .entry-content .entry-list.lista-numerada ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: item;
}

article.single-entry .entry-content .entry-list.lista-numerada ol li {
	position: relative;
	counter-increment: item;
	padding-left: 2em;
	margin-bottom: 20px;
	color: #2832d0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 170%;
}

article.single-entry .entry-content .entry-list.lista-numerada ol li:before {
	content: counter(item) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'TTFirsNeue-DemiBold';
	font-weight: normal;
	letter-spacing: 0.02em;
}

/* El ultimo punto no suma su hueco inferior: el margin-bottom de la lista ya separa */
article.single-entry .entry-content .entry-list ul li:last-child,
article.single-entry .entry-content .entry-list.lista-numerada ol li:last-child {
	margin-bottom: 0;
}

/* Lista a dos columnas (opcion del bloque AS Lista). Misma geometria que el bloque
   de columnas dobles: 48% / 4% / 48% (comparten el contenedor boxed_small), asi la
   2a columna arranca en el mismo 52% y su texto alinea con la 2a columna del bloque.
   break-inside evita cortar un punto entre columnas */
article.single-entry .entry-content .entry-list.lista-2col ul {
	column-count: 2;
	column-gap: 4%;
}

article.single-entry .entry-content .entry-list.lista-2col ul li {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

/* La viñeta cuelga a -40px, pero el hueco del 4% es mas estrecho: se acerca para
   que la de la 2a columna caiga en el hueco y no pise la 1a */
article.single-entry .entry-content .entry-list.lista-2col ul li:before {
	left: -32px;
}

/* Por debajo de ~900px el hueco del 4% no da para la viñeta: una sola columna */
@media screen and (max-width: 900px) {
	article.single-entry .entry-content .entry-list.lista-2col ul {
		column-count: 1;
	}

	article.single-entry .entry-content .entry-list.lista-2col ul li:before {
		left: -40px;
	}
}

/* Texto a dos columnas (opcion del bloque AS Texto). Misma geometria (4%) que el
   bloque de columnas dobles, asi alinea. El > acota al primer nivel: dentro de un
   AS Columnas NO aplica (columnas dentro de columnas no tiene sentido) */
article.single-entry .entry-content > .entry-text.texto-2col .row-container {
	column-count: 2;
	column-gap: 4%;
}

@media screen and (max-width: 700px) {
	article.single-entry .entry-content > .entry-text.texto-2col .row-container {
		column-count: 1;
	}
}

article.single-entry .entry-content .entry-list ul li:nth-child(3n+1):before {
	background-image: url('img/icon-hexagon.svg');
}

article.single-entry .entry-content .entry-list ul li:nth-child(3n+2):before {
	background-image: url('img/icon-circle.svg');
}

article.single-entry .entry-content .section-tutorial.seccion-amarilla .entry-list ul li:nth-child(3n+2):before {
	background-image: url('img/icon-circle-white.svg');
}

article.single-entry .entry-content .entry-list ul li:nth-child(3n+3):before {
	background-image: url('img/icon-triangle.svg');
}

article.single-entry .entry-content .entry-title {
	width: 100%;
	text-align: center;
}

article.single-entry .entry-content .entry-title.shortcode-title h2 {
	max-width: 100%;
	padding: 0 20px;
	margin-right: auto;
	margin-left: auto;
	color: #000;
	font-family: 'TTFirsNeue-Medium';
	font-size: 30px;
	font-size: 6.2vw;
	/* 110%, not 130%: at display size the line box carried a fat cushion above
	   and below the letters, so the gap under an h2 looked twice the h3's */
	line-height: 110%;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 700px) {
  article.single-entry .entry-content .entry-title.shortcode-title h2 {
		max-width: 90%;
    font-size: 4.5vw;
  }
}

@media screen and (min-width: 1000px) {
  article.single-entry .entry-content .entry-title.shortcode-title h2 {
	max-width: 92%;
    font-size: 3.5vw;
  }
}

@media screen and (min-width: 1920px) {
  article.single-entry .entry-content .entry-title.shortcode-title h2 {
	max-width: 100%;
    font-size: 3.6em;
  }
}

article.single-entry .entry-content .entry-title.shortcode-title h3 {
	margin-right: auto;
	margin-left: auto;
	color: #000;
	font-family: 'TTFirsNeue-Medium';
	font-size: 1.5em;
	line-height: 130%;
	letter-spacing: 0.02em;
	text-decoration: underline;
}

article.single-entry .entry-content .entry-title.shortcode-quote blockquote {
	margin-right: auto;
	margin-left: auto;
	color: #2a3acd;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.5em;
	line-height: 130%;
	letter-spacing: 0.02em;
}

/* El autor (y el guion de antes) en su linea, con la MISMA pinta que la cita:
   solo heredan. cite sale en cursiva de serie, se pone normal para igualar */
article.single-entry .entry-content .shortcode-quote .quote-dash,
article.single-entry .entry-content .shortcode-quote .quote-author {
	display: block;
	font-style: normal;
}

/* La cita se renderiza como .entry-title, asi que heredaba el margen superior de
   los titulos (~32px) y, al no colapsar los flotados, se sumaba al de abajo del
   bloque anterior. La cita no es un titulo: el hueco lo pone el de arriba */
article.single-entry .entry-content .entry-title.shortcode-quote {
	margin-top: 0;
}

/* Color del texto elegido (la cita de siempre, sin clase, se queda en #2a3acd).
   El autor hereda de blockquote, asi que no hace falta nombrarlo */
article.single-entry .entry-content .shortcode-quote.cita-texto-azul blockquote {
	color: #2832d0;
}

article.single-entry .entry-content .shortcode-quote.cita-texto-rojo blockquote {
	color: #fb5130;
}

article.single-entry .entry-content .shortcode-quote.cita-texto-amarillo blockquote {
	color: #ffda4a;
}

article.single-entry .entry-content .shortcode-quote.cita-texto-negro blockquote {
	color: #1a171b;
}

article.single-entry .entry-content .shortcode-quote.cita-texto-blanco blockquote {
	color: #fff;
}

/* Fondo: caja acolchada. Sin clase (transparente) se ve como siempre */
article.single-entry .entry-content .shortcode-quote.cita-fondo-azul .quote-container,
article.single-entry .entry-content .shortcode-quote.cita-fondo-rojo .quote-container,
article.single-entry .entry-content .shortcode-quote.cita-fondo-amarillo .quote-container,
article.single-entry .entry-content .shortcode-quote.cita-fondo-negro .quote-container,
article.single-entry .entry-content .shortcode-quote.cita-fondo-verde .quote-container,
article.single-entry .entry-content .shortcode-quote.cita-fondo-blanco .quote-container {
	padding: 6%;
	border-radius: 2px;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-negro .quote-container {
	background: #1a171b;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-azul .quote-container {
	background: #2832d0;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-rojo .quote-container {
	background: #fb5130;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-amarillo .quote-container {
	background: #ffda4a;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-blanco .quote-container {
	background: #fff;
	border: 1px solid #eee;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-gris .quote-container {
	background: #e1e1e1;
}

article.single-entry .entry-content .shortcode-quote.cita-fondo-verde .quote-container {
	background: #389362;
}

article.single-entry .entry-content .entry-image,
article.single-entry .entry-content .entry-video,
article.single-entry .entry-content .entry-iframe,
article.single-entry .entry-content .entry-gallery {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

article.single-entry .entry-content .entry-image img,
article.single-entry .entry-content .entry-image.img_large img {
	display: block;
	width: 100%;
	height: auto;
}

/* Recorte de la vista: el visor sigue abriendo la imagen entera (usa la URL
   original, no lo que se ve recortado). object-fit recorta sin deformar */
article.single-entry .entry-content .entry-image.img_cuadrado img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}

article.single-entry .entry-content .entry-image.img_recorte_4_3 img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

article.single-entry .entry-content .entry-image.img_recorte_3_4 img {
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
}

article.single-entry .entry-content .entry-image.img_recorte_16_9 img {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

article.single-entry .entry-content .entry-image.img_recorte_9_16 img {
	aspect-ratio: 9 / 16;
	height: auto;
	object-fit: cover;
}

/* El paspartu del tamaño pequeño. Azul de serie, como el fondo de la galeria */
article.single-entry .entry-content .entry-image.img_small .row-container.padding {
	padding: 5%;
	border: 1px solid #ccc;
	background: #2832d0;
}

article.single-entry .entry-content .entry-image.img_small.rojo .row-container.padding {
	background: #fb5130;
}

article.single-entry .entry-content .entry-image.img_small.amarillo .row-container.padding {
	background: #ffda4a;
}

article.single-entry .entry-content .entry-image.img_small.negro .row-container.padding {
	background: #1a171b;
}

article.single-entry .entry-content .entry-image.img_small.blanco .row-container.padding {
	background: #fff;
}

/* Sin color: queda el marco fino y el hueco del paspartu, sin relleno */
article.single-entry .entry-content .entry-image.img_small.transparente .row-container.padding {
	background: transparent;
}

article.single-entry .entry-content .entry-image.border img {
	border: 1px solid #ddd;
}

/* El pie de la imagen y el del iframe. 3.5:1 de contraste, por debajo del 4.5:1
   de WCAG AA: es una decision tomada a sabiendas, es un pie, no texto critico */
article.single-entry .entry-content .entry-iframe .iframe-caption,
article.single-entry .entry-content .entry-image .img-caption,
article.single-entry .entry-content .entry-gallery .gallery-caption {
	margin-top: 10px;
	color: #8a8a8a;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	text-align: center;
}

article.single-entry .entry-content .entry-video .video-container,
article.single-entry .entry-content .entry-iframe .iframe-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

/* 3D Warehouse's preview is an image of fixed size: it shrinks to fit a narrow
   frame but never grows. So we render their page at a width where it does fill
   (900px) and main.js scales the whole iframe up to the frame. 900 x 506 is 16:9,
   the same shape as the frame, so the scaled iframe lands exactly on it */
article.single-entry .entry-content .entry-iframe .iframe-container.escalado iframe {
	width: 900px;
	height: 506.25px;
	transform-origin: 0 0;
}

article.single-entry .entry-content .entry-video .video-container .video-cover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 1;

	/* It is a <button> now: undo the browser chrome, keep the same look */
	display: block;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
}

article.single-entry .entry-content .entry-video .video-container .video-cover:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* Show the title on keyboard focus, same as on hover */
article.single-entry .entry-content .entry-video .video-container .video-cover:focus-visible .video-title {
	opacity: 1;
}

article.single-entry .entry-content .entry-video .video-container .video-cover .video-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	z-index: 1;
}

article.single-entry .entry-content .entry-video .video-container .video-title {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	padding: 3%;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1em;
	line-height: 130%;
	text-align: left;
	z-index: 1;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
	opacity: 0;

	-webkit-transition: transform .3s ease, opacity .2s ease;
		 -moz-transition: transform .3s ease, opacity .2s ease;
		  -ms-transition: transform .3s ease, opacity .2s ease;
			 -o-transition: transform .3s ease, opacity .2s ease;
			 		transition: transform .3s ease, opacity .2s ease;
}

article.single-entry .entry-content .entry-video .video-container:hover .video-title {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

article.single-entry .entry-content .entry-video .video-container .video-cover .video-icon {
	position: absolute;
	width: 100px;
	height: 71px;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -50px;
	background: url('img/icon-video.svg') no-repeat;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
}

/* El mismo gris que el pie de la imagen y el del iframe: los tres se leen sobre
   el blanco de la pagina. El #aaa de antes se quedaba en 2.3:1 de contraste */
article.single-entry .entry-content .entry-video .video-caption {
	margin-top: 10px;
	color: #8a8a8a;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
}

article.single-entry .entry-content .entry-video .video-container iframe,
article.single-entry .entry-content .entry-iframe .iframe-container iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

article.single-entry .entry-content .entry-text a,
article.single-entry .entry-content .entry-list a {
	display: inline-block;
	/* Padding vertical compensado con margen negativo: la pildora respira 4px
	   arriba/abajo pero no empuja la linea. Igual en parrafo y lista */
	padding: 4px 10px;
	line-height: 1.3;
	margin-top: -4px;
	margin-bottom: -4px;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 1em;
	border-radius: 20px;
	background-color: #2832d0;

	-webkit-transition: background-color .1s ease;
		 -moz-transition: background-color .1s ease;
		  -ms-transition: background-color .1s ease;
			 -o-transition: background-color .1s ease;
			 		transition: background-color .1s ease;
}

/* El parrafo va a 0.8em de su 1.2em, ≈ el mismo tamaño que la lista (1em de su
   0.95em). El resto de la pildora, en la regla compartida de arriba */
article.single-entry .entry-content .entry-text a {
	font-size: 0.8em;
}

article.single-entry .entry-content .entry-text a:hover,
article.single-entry .entry-content .entry-list a:hover {
	background-color: #fb5130;
}

article.single-entry .entry-content .entry-text b,
article.single-entry .entry-content .entry-text strong,
article.single-entry .entry-content .entry-list b,
article.single-entry .entry-content .entry-list strong,
article.single-entry .entry-content .one_half b,
article.single-entry .entry-content .one_half strong,
article.single-entry .entry-content .one_half_last b,
article.single-entry .entry-content .one_half_last strong {
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1em;
	font-weight: normal;
	letter-spacing: 0.02em;
}

article.single-entry .entry-content .entry-list b,
article.single-entry .entry-content .entry-list strong {
	font-size: 1.1em;
}

article.single-entry .entry-content .entry-banner .banner-container {
	position: relative;
	height: 180px;
	padding: 0 30px;
	margin: 0 auto;
	background-color: #fb5130;
}

/* La terna del tema: rojo de serie (arriba), y los otros dos por clase */
article.single-entry .entry-content .entry-banner.azul .banner-container {
	background-color: #2832d0;
}

article.single-entry .entry-content .entry-banner.amarillo .banner-container {
	background-color: #ffda4a;
}

article.single-entry .entry-content .entry-banner.negro .banner-container {
	background-color: #1a171b;
}

/* Blanco sobre fondo blanco necesita un filo para delimitarse */
article.single-entry .entry-content .entry-banner.blanco .banner-container {
	background-color: #fff;
	border: 1px solid #ececec;
}

article.single-entry .entry-content .entry-banner.gris .banner-container {
	background-color: #e1e1e1;
}

article.single-entry .entry-content .entry-banner.verde .banner-container {
	background-color: #389362;
}

article.single-entry .entry-content .entry-banner.transparente .banner-container {
	background-color: transparent;
}

/* Sobre amarillo el texto blanco no se lee: se pone oscuro. Igual sobre blanco,
   gris y transparente (el fondo de la pagina es claro). El boton es oscuro de serie */
article.single-entry .entry-content .entry-banner.amarillo .text-banner .text-container,
article.single-entry .entry-content .entry-banner.blanco .text-banner .text-container,
article.single-entry .entry-content .entry-banner.gris .text-banner .text-container,
article.single-entry .entry-content .entry-banner.transparente .text-banner .text-container {
	color: #1a171b;
}

/* Sobre negro el boton oscuro desaparece: se invierte a blanco */
article.single-entry .entry-content .entry-banner.negro .banner-container a.button {
	background-color: #fff;
	color: #1a171b;
}

/* Un banner dentro de una columna: el viewport sigue ancho, asi que la media
   query estrecha no salta y el banner intentaria la version en fila en medio
   ancho, y se rompe. En columna se usa la MISMA version que en movil: apilada y
   con el boton rectangular a ancho total */
article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container {
	float: left;
	width: 100%;
	height: auto;
	padding: 0;
	text-align: center;
}

article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container .text-banner {
	padding: 20px 0;
}

/* El boton cambia de diseño en estrecho: rectangular y a ancho completo */
article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container a.button {
	display: inline-block;
	float: none;
	border-radius: 0;
}

article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container a.button,
article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container .col {
	width: 100%;
}

/* La regla movil que apila las dos mitades (.entry-col-2 .col:first-child) tambien
   pilla el primer .col interno del banner (el texto) y le mete 30px de hueco */
article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container .col {
	margin-bottom: 0;
}

article.single-entry .entry-content .entry-col-2 .entry-banner .banner-container a.button:hover {
	transform: translateY(0);
}

article.single-entry .entry-content .entry-banner .text-banner,
article.single-entry .entry-content .entry-banner .button-banner {
	display: table;
	height: 100%;
}

article.single-entry .entry-content .entry-banner .text-banner .text-container,
article.single-entry .entry-content .entry-banner .button-banner .button-container {
	display: table-cell;
	vertical-align: middle;
}

article.single-entry .entry-content .entry-banner .text-banner .text-container {
	color: #fff;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.8em;
	line-height: 130%;
	letter-spacing: 0.02em;
}

article.single-entry .entry-content .entry-banner .button-banner .button {
	float: right;
}

/* El azul es el de siempre: las 15 galerias publicadas no declaran color */
article.single-entry .entry-content .entry-gallery .gallery-wrapper {
	width: 100%;
	background-color: #2832d0;
}

/* Los otros dos de la terna del tema, los mismos de section.orange y .yellow */
article.single-entry .entry-content .entry-gallery .gallery-wrapper.rojo {
	background-color: #fb5130;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.amarillo {
	background-color: #ffda4a;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.negro {
	background-color: #1a171b;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.blanco {
	background-color: #fff;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.gris {
	background-color: #e1e1e1;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.transparente {
	background-color: transparent;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper .owl-carousel {
	width: 100%;
	cursor: grab;
}

/* Recorte de todas las imagenes de la galeria: proporcion fija y object-fit cover
   (solo la vista). El ancho lo pone el carrusel; el alto sale de la proporcion */
article.single-entry .entry-content .entry-gallery .gallery-wrapper[class*="galeria-recorte-"] .owl-carousel img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.galeria-recorte-1_1 .owl-carousel img {
	aspect-ratio: 1 / 1;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.galeria-recorte-4_3 .owl-carousel img {
	aspect-ratio: 4 / 3;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.galeria-recorte-3_4 .owl-carousel img {
	aspect-ratio: 3 / 4;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.galeria-recorte-16_9 .owl-carousel img {
	aspect-ratio: 16 / 9;
}

article.single-entry .entry-content .entry-gallery .gallery-wrapper.galeria-recorte-9_16 .owl-carousel img {
	aspect-ratio: 9 / 16;
}

article.single-entry .entry-content .entry-meta,
article.single-entry .entry-content .section-tutorial,
article.single-entry .entry-content .entry-gallery .gallery-wrapper,
article.single-entry .entry-share {
	padding: var(--espacio) 0;
}

.ressources {
	padding: 8% 0;
}

.ressources-wrapper {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

article.single-entry .entry-content .entry-text,
article.single-entry .entry-content .entry-col-2,
article.single-entry .entry-content .entry-title.shortcode-title,
article.single-entry .entry-content .entry-banner,
article.single-entry .entry-content .entry-list,
article.single-entry .entry-content .entry-image,
article.single-entry .entry-content .entry-video,
article.single-entry .entry-content .entry-iframe,
article.single-entry .entry-content .entry-gallery {
	margin-bottom: var(--espacio-fila);
}

/* Texto que fluye: dos AS Texto seguidos (compactos de serie) se separan con el hueco
   de PARRAFO, no con el de fila, para que lean como continuacion, no como secciones
   aparte. Lo consigue el sistema negociado de abajo, porque el bloque nace compacto.
   --espacio-parrafo (1.8em de fila) = el 1.5em del <p>, que va a 1.2em: 1.5x1.2=1.8 */

/* Espaciado negociado (bloques con previo/posterior). El hueco entre dos bloques lo
   pone el de arriba (margin-bottom) y vale el MAYOR de los dos ajustes de la frontera:
   posterior del de arriba (.asv-pb-*) y previo del de abajo (.asv-pt-*). Normal = base
   (sin clase, hueco de fila); compacto = parrafo; extra = 1.5 de fila. Como los flotados
   no colapsan, un solo lado pone el hueco: nunca se suma. Compat: un bloque "compacto"
   de siempre emite las dos clases (asv-pb-compacto + asv-pt-compacto), asi el hueco de
   parrafo solo aparece cuando LOS DOS lados lo piden, igual que antes */

/* Resultado COMPACTO (parrafo): solo si los dos lados de la frontera lo piden */
article.single-entry .entry-content > .asv-pb-compacto:has( + .asv-pt-compacto ) {
	margin-bottom: var(--espacio-parrafo);
}

/* Resultado EXTRA (1.5 de fila): basta con que un lado lo pida (mi posterior, o el
   previo del de abajo). Excluyente con el compacto por construccion */
article.single-entry .entry-content > .asv-pb-extra,
article.single-entry .entry-content > *:has( + .asv-pt-extra ) {
	margin-bottom: var(--espacio-extra);
}

/* Mismo espaciado negociado DENTRO de una seccion: sus bloques cuelgan de
   .section-wrapper, no directos de .entry-content, asi que las reglas de arriba (con >)
   no los alcanzaban y se quedaban en el hueco de fila aunque pidieran compacto/extra */
article.single-entry .entry-content .section-tutorial .section-wrapper > .asv-pb-compacto:has( + .asv-pt-compacto ) {
	margin-bottom: var(--espacio-parrafo);
}
article.single-entry .entry-content .section-tutorial .section-wrapper > .asv-pb-extra,
article.single-entry .entry-content .section-tutorial .section-wrapper > *:has( + .asv-pt-extra ) {
	margin-bottom: var(--espacio-extra);
}

/* Dentro de una columna el tema pone el margen de fila a 0, asi que dos bloques
   compactos seguidos se tocarian: se restablece el hueco de parrafo */
article.single-entry .entry-content .entry-col-2 .asv-pb-compacto:has( + .asv-pt-compacto ) {
	margin-bottom: var(--espacio-parrafo);
}

/* El hueco de ENCIMA del titulo lo pone el bloque anterior. Ha de igualar al de debajo:
   titulo normal, hueco de fila; titulo con previo compacto, hueco de parrafo (regla mas
   especifica, gana) */
article.single-entry .entry-content .entry-col-2 .asv-pb-compacto:has( + .entry-title ) {
	margin-bottom: var(--espacio);
}

article.single-entry .entry-content .entry-col-2 .asv-pb-compacto:has( + .entry-title.asv-pt-compacto ) {
	margin-bottom: var(--espacio-parrafo);
}

/* Dos galerias seguidas: se quita solo el margen para que no quede la franja
   blanca de la pagina entre ellas. El fondo de una acaba justo donde empieza el de
   la siguiente; cada banda conserva su relleno. Prima sobre el hueco de fila y
   sobre el de parrafo del sistema compacto */
article.single-entry .entry-content .entry-gallery:has( + .entry-gallery ) {
	margin-bottom: 0;
}

/* Si esas dos seguidas son del MISMO color (o ambas transparentes), se quita el relleno
   de ARRIBA de la segunda para juntarlas (queda el de abajo de la primera como separacion).
   Azul es el color por defecto (sin clase), de ahi el :not de los demas */
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper.rojo ) + .entry-gallery > .gallery-wrapper.rojo,
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper.amarillo ) + .entry-gallery > .gallery-wrapper.amarillo,
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper.negro ) + .entry-gallery > .gallery-wrapper.negro,
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper.blanco ) + .entry-gallery > .gallery-wrapper.blanco,
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper.transparente ) + .entry-gallery > .gallery-wrapper.transparente,
article.single-entry .entry-content .entry-gallery:has( > .gallery-wrapper:not(.rojo):not(.amarillo):not(.negro):not(.blanco):not(.transparente) ) + .entry-gallery > .gallery-wrapper:not(.rojo):not(.amarillo):not(.negro):not(.blanco):not(.transparente) {
	padding-top: 0;
}

/* Transparente no es una banda: no debe reservar relleno vertical en los bordes del
   grupo. Se quita el de ARRIBA de todas (cubre la primera) y el de ABAJO de la ultima
   (la que no va seguida de otra transparente). Entre transparentes seguidas se conserva
   el hueco de la de arriba, como en los colores */
article.single-entry .entry-content .entry-gallery > .gallery-wrapper.transparente {
	padding-top: 0;
}
article.single-entry .entry-content .entry-gallery:not( :has( + .entry-gallery > .gallery-wrapper.transparente ) ) > .gallery-wrapper.transparente {
	padding-bottom: 0;
}

/* The theme's rows and sections float, which takes them out of the flow and lets
   the sticky side menu (last in the markup) rise to the top. A native Gutenberg
   block does not float, stays in the flow and pushes the menu to the bottom */
article.single-entry .entry-content > *:not(.entry-nav):not([class*="clear"]) {
	float: left;
	width: 100%;
}

/* Rows float, so margins never collapse here: whoever comes second must not add
   its own space on top. The intro is the one that leaves the gap.
   A flat 48px, not a percentage: on a phone the container is narrow and 4%
   collapsed to ~15px */
article.single-entry .entry-content .entry-text.text-intro {
	margin-bottom: var(--espacio);
}

/* Whatever comes after the intro adds nothing on top, margin or padding.
   In posts the intro is a row; in tutorials it sits inside its own <section> */
article.single-entry .entry-content > .entry-text.text-intro + .row,
article.single-entry .entry-content > section.section + .row,
article.single-entry .entry-content > section.section + .section-tutorial {
	margin-top: 0;
	padding-top: 0;
}

/* A loose row right above a section: the section already spaces itself with the
   padding that draws its colour band, so the row must not add its margin */
article.single-entry .entry-content > .row:has(+ .section-tutorial) {
	margin-bottom: 0;
}

/* Y al reves: el padding de la seccion va POR DENTRO de su banda de color, asi
   que no separa de lo que viene despues. El aire lo pone el elemento siguiente */
article.single-entry .entry-content > .section-tutorial + .row {
	margin-top: var(--espacio);
}

/* Same deal for the date line: it spaces itself below, and whatever follows
   (usually the first title) does not stack its own margin on top */
article.single-entry .entry-content > .row.entry-meta {
	padding-bottom: var(--espacio);
}

/* Sin sumario, el bloque meta es el primero de la entrada: no pone su padding superior
   (lo daria la regla agrupada .entry-meta { padding: --espacio 0 }). El hueco de la
   cabecera ya lo pone clear_espacio, igual que a la intro. Con sumario esto no aplica:
   el meta no es :first-child y manda .text-intro + .row */
article.single-entry .entry-content > .row.entry-meta:first-child {
	padding-top: 0;
}

/* Sin sumario, la primera seccion es el primer elemento. Si no tiene banda visible
   (blanca/transparente) su padding superior sobra: el hueco de la cabecera ya lo pone
   clear_espacio. Una seccion de color lo conserva: es el aire dentro de su banda */
body.page article.single-entry .entry-content > .section-tutorial.seccion-blanca:first-child,
body.page article.single-entry .entry-content > .section-tutorial.seccion-transparente:first-child {
	padding-top: 0;
}

/* Dos secciones seguidas sin banda (blanca/transparente) no doblan el hueco: el de
   arriba pone su padding inferior y la siguiente no suma el suyo. Una seccion de color
   conserva su padding superior, que es el aire entre el inicio de la banda y su texto */
body.page article.single-entry .entry-content > .section-tutorial + .section-tutorial.seccion-blanca,
body.page article.single-entry .entry-content > .section-tutorial + .section-tutorial.seccion-transparente {
	padding-top: 0;
}

/* El meta ("Última modificación") ya pone su hueco inferior: la primera seccion sin
   banda no suma su padding superior (como con la intro). De color, lo conserva */
article.single-entry .entry-content > .row.entry-meta + .section-tutorial.seccion-blanca,
article.single-entry .entry-content > .row.entry-meta + .section-tutorial.seccion-transparente {
	padding-top: 0;
}

article.single-entry .entry-content > .row.entry-meta + .row {
	margin-top: 0;
}

/* El titulo (y la cita) ponen el hueco SOLO debajo: los flotados suman, asi que el de
   arriba lo pone el bloque anterior. Si el titulo llevara margin-top, se sumaria y el
   hueco de arriba saldria mayor que el de abajo. El margin-bottom lo usan las citas;
   los titulos lo cogen de la lista de filas (espacio-fila), arriba */
article.single-entry .entry-content .entry-title {
	margin-top: 0;
	margin-bottom: var(--espacio);
}

/* Rows float, and floats never collapse their margins: a title right after
   another one added 5% + 2%. The first one already leaves the gap */
article.single-entry .entry-content .entry-title + .entry-title {
	margin-top: 0;
}

/* The section spaces itself with its padding (which draws the colour band), so
   its first and last children must not stack their own margins on top of it.
   Any child, not just .row: a section can hold native blocks now */
article.single-entry .entry-content .section-tutorial .section-wrapper > *:first-child {
	margin-top: 0;
}

article.single-entry .entry-content .section-tutorial .section-wrapper > *:last-child,
article.single-entry .entry-content .section-tutorial .row:last-child {
	margin-bottom: 0;
}

/* Una galeria trae su propia banda de color: si cierra la seccion, el relleno de
   esta dejaria una franja del color de la seccion por debajo. Que acabe donde
   acaba la galeria */
article.single-entry .entry-content .section-tutorial:has(.section-wrapper > .entry-gallery:last-child) {
	padding-bottom: 0;
}


@media only screen and (min-width: 1700px) {
	.ressources {
		padding: 140px 0;
	}

}

article.single-entry .entry-content .entry-col-2 .row,
article.single-entry .entry-content .entry-col-2 .row .row-container {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* The reset above wipes the margins of everything inside a column, titles too. Como
   todo aqui los .row flotan (y los flotados SUMAN, no colapsan), el titulo pone el
   hueco SOLO debajo; el de arriba lo pone el bloque anterior. Hueco de parrafo, el
   ritmo de la columna. Si pusiera tambien margin-top, se sumaria al de abajo del bloque
   de arriba y el hueco superior saldria el doble */
article.single-entry .entry-content .entry-col-2 .entry-title {
	margin-top: 0;
	margin-bottom: var(--espacio);
}

/* Posterior compacto: hueco de parrafo en vez del de fila */
article.single-entry .entry-content .entry-col-2 .entry-title.asv-pb-compacto {
	margin-bottom: var(--espacio-parrafo);
}

/* El ULTIMO elemento de la columna no suma su margen inferior: el hueco de abajo lo
   pone ya la propia columna. La mayoria de bloques quedan a 0 por el reset, pero el
   titulo lleva margen incondicional; esto lo cubre a el y a cualquier otro caso */
article.single-entry .entry-content .entry-col-2 .col > *:last-child {
	margin-bottom: 0;
}

/* Sin el margen propio del h2/h3: el hueco lo ponen las filas (arriba el bloque
   anterior, abajo el propio titulo), no la letra, asi el titulo casa con el ritmo.
   Vale dentro y fuera de columna */
article.single-entry .entry-content .entry-title.shortcode-title h2,
article.single-entry .entry-content .entry-title.shortcode-title h3 {
	margin-top: 0;
	margin-bottom: 0;
}

/* The colour used to come from :nth-child, so it counted every element in the
   post: a tutorial without intro text started yellow and the rest started white */
article.single-entry .entry-content .section-tutorial.seccion-amarilla {
	background-color: #ffd900;
}

/* El resto de la paleta, elegible en el bloque Sección. Blanca (defecto) y amarilla
   ya estan arriba; estos son los que faltaban */
article.single-entry .entry-content .section-tutorial.seccion-azul {
	background-color: #2832d0;
}

article.single-entry .entry-content .section-tutorial.seccion-rojo {
	background-color: #fb5130;
}

article.single-entry .entry-content .section-tutorial.seccion-negro {
	background-color: #1a171b;
}

article.single-entry .entry-content .section-tutorial.seccion-transparente {
	background-color: transparent;
}

article.single-entry .entry-content .section-tutorial.seccion-gris {
	background-color: #e1e1e1;
}

/* El contenido del tutorial es de texto oscuro: sobre azul, rojo y negro se aclara
   (texto, titulos y enlaces) y las vinetas de lista pasan a blanco, o no se leeria */
article.single-entry .entry-content .section-tutorial.seccion-azul .section-wrapper,
article.single-entry .entry-content .section-tutorial.seccion-rojo .section-wrapper,
article.single-entry .entry-content .section-tutorial.seccion-negro .section-wrapper,
article.single-entry .entry-content .section-tutorial.seccion-azul .section-wrapper h2,
article.single-entry .entry-content .section-tutorial.seccion-azul .section-wrapper h3,
article.single-entry .entry-content .section-tutorial.seccion-azul .section-wrapper h4,
article.single-entry .entry-content .section-tutorial.seccion-azul .section-wrapper a,
article.single-entry .entry-content .section-tutorial.seccion-rojo .section-wrapper h2,
article.single-entry .entry-content .section-tutorial.seccion-rojo .section-wrapper h3,
article.single-entry .entry-content .section-tutorial.seccion-rojo .section-wrapper h4,
article.single-entry .entry-content .section-tutorial.seccion-rojo .section-wrapper a,
article.single-entry .entry-content .section-tutorial.seccion-negro .section-wrapper h2,
article.single-entry .entry-content .section-tutorial.seccion-negro .section-wrapper h3,
article.single-entry .entry-content .section-tutorial.seccion-negro .section-wrapper h4,
article.single-entry .entry-content .section-tutorial.seccion-negro .section-wrapper a {
	color: #fff;
}

article.single-entry .entry-content .section-tutorial.seccion-azul .entry-list ul li:before,
article.single-entry .entry-content .section-tutorial.seccion-rojo .entry-list ul li:before,
article.single-entry .entry-content .section-tutorial.seccion-negro .entry-list ul li:before {
	background-image: url('img/icon-circle-white.svg');
}

.ressources {
	text-align: center;
}

.ressources h4 {
	width: 80%;
	max-width: 500px;
	margin: 0 auto;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 2em;
	font-size: 7vw;
	line-height: 110%;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 700px) {
  .ressources h4 {
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 1000px) {
  .ressources h4 {
    font-size: 2.8vw;
  }
}

@media screen and (min-width: 1920px) {
  .ressources h4 {
    font-size: 2.9em;
  }
}

.ressources p {
	width: 80%;
	max-width: 350px;
	margin: 8% auto 10%;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 500;
	font-size: 0.95em;
	line-height: 140%;
	overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ressources a.button {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}

.ressources-popup {
	position: fixed;
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 20px;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	text-align: center;
	background: #2832d0;
	cursor: pointer;
	z-index: 20;

	-webkit-transform: translateY(100%);
		 -moz-transform: translateY(100%);
		  -ms-transform: translateY(100%);
			 -o-transform: translateY(100%);
			 		transform: translateY(100%);

	-webkit-transition: transform .4s ease;
		 -moz-transition: transform .4s ease;
		  -ms-transition: transform .4s ease;
			 -o-transition: transform .4s ease;
			 		transition: transform .4s ease;
}

.ressources-popup.is-visible {
	-webkit-transform: translateY(0);
		 -moz-transform: translateY(0);
		  -ms-transform: translateY(0);
			 -o-transform: translateY(0);
			 		transform: translateY(0);
}

article.single-entry .entry-share {
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	z-index: 1;
}

article.single-entry .entry-share h4 {
	margin-bottom: 20px;
	color: #ff4f23;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.5em;
	letter-spacing: 0.02em;
	text-decoration: underline;
}

article.single-entry .entry-share li {
	display: inline-block;
	margin-right: 15px;
}

article.single-entry .entry-share li:last-child {
	margin-right: 0;
}

article.single-entry .entry-share li a {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background-size: cover;
	background-repeat: no-repeat;

	-webkit-transition: transform .2s ease;
		 -moz-transition: transform .2s ease;
		  -ms-transition: transform .2s ease;
			 -o-transition: transform .2s ease;
			 		transition: transform .2s ease;
}

article.single-entry .entry-share li a:hover {
	-webkit-transform: translateY(-5px);
		 -moz-transform: translateY(-5px);
		  -ms-transform: translateY(-5px);
			 -o-transform: translateY(-5px);
			 		transform: translateY(-5px);
}

article.single-entry .entry-share .facebook a {
	background-image: url('img/icon-facebook-orange.svg');
}

article.single-entry .entry-share .twitter a {
	background-image: url('img/icon-twitter-orange.svg');
}

article.single-entry .entry-share .linkedin a {
	background-image: url('img/icon-linkedin-orange.svg');
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

#comments {
	position: relative;
	float: left;
	width: 100%;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	z-index: 2;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments input[type="submit"],
#comments textarea {
	margin: 0;
	color: #000;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	text-align: left;
	border: none;
	outline: none;
	background-color: #eee;
}

#comments textarea {
	width: 100%;
	padding: 10px 20px;
	border-radius: 20px;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"] {
	width: 100%;
	padding: 5px 20px;
	border-radius: 40px;
}

#comments input[type="submit"] {
	display: block;
	height: 50px;
	padding: 0 20px;
	margin: 5% auto;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	line-height: 50px;
	text-transform: uppercase;
	text-align: center;
	border-radius: 40px;
	background-color: #fb5130;

	-webkit-transition: transform .3s ease;
		 -moz-transition: transform .3s ease;
		  -ms-transition: transform .3s ease;
			 -o-transition: transform .3s ease;
			 		transition: transform .3s ease;
}

#comments input[type="submit"]:hover {
	-webkit-transform: translateY(-5px);
		 -moz-transform: translateY(-5px);
		  -ms-transform: translateY(-5px);
			 -o-transform: translateY(-5px);
			 		transform: translateY(-5px);
}

#comments p {
	margin-top: 0;
	margin-bottom: 2%;
}

#comments .comment-form-comment label,
#comments .comment-form-author label,
#comments .comment-form-author span,
#comments .comment-form-email label,
#comments .comment-form-email span,
#comments .comment-form-url label {
	display: none;
}

#comments h3 {
	width: 100%;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.1em;
	font-weight: normal;
}

#comments .comment-notes,
#comments .comment-form-cookies-consent,
#comments .logged-in-as {
	float: left;
	margin-top: 5%;
	color: #aaa;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
}

#comments .comment-form-cookies-consent {
	margin-bottom: 5%;
}

#comments .comment-notes,
#comments .logged-in-as {
	margin: 2% 0;
}

#comments .comment-notes {
	color: #000;
}

#comments a,
#comments input::placeholder,
#comments textarea::placeholder {
  color: #fb5130;
}

#comments a:hover {
  color: #000;
}

#comments .comment-list {
	padding: 0;
	margin: 0;
}

#comments .comments-title {
	margin-bottom: 5%;
	font-size: 0.9em;
}

#comments .comment-respond {
	margin-top: 5%;
}

#comments .comment-respond small {
	font-size: 1em;
}

#comments .comment-list li article {
	padding: 5% 0;
	font-size: 0.9em;
	border-bottom: 1px solid #eee;
}

#comments .comment-list li:last-child {
	margin-bottom: 10%;
}

#comments .comment-list ol.children {
	padding: 0 0 0 5%;
	margin: 0;
}

#comments .comment-list li b {
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.1em;
	font-weight: normal;
}

#comments .comment-list li .comment-content p {
	margin-top: 10px;
	color: #000;
	line-height: 140%;
}

/*--------------------------------------------------------------
## Modules Portfolio + About + Contact
--------------------------------------------------------------*/

.portfolio-wrapper {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

.portfolio-wrapper .col-left,
.about-wrapper .col-left,
.contact-wrapper .col-left {
	min-height: 35vw;
}

h2.section-title {
	margin: 80px 0;
	margin: 3vw 0;
	font-family: 'TTFirsNeue-Medium';
	font-size: 30px;
	font-size: 8vw;
	line-height: 100%;
}

@media screen and (min-width: 700px) {
  h2.section-title {
    font-size: 6.2vw;
  }
}

@media screen and (min-width: 1000px) {
  h2.section-title {
    font-size: 4.7vw;
  }
}

@media screen and (min-width: 1920px) {
  h2.section-title {
    font-size: 90px;
  }
}

/* Texto de las secciones de columna (Portfolio y Contacto): misma tipografia.
   Portfolio lleva la clase en el propio <p>; Contacto en el <aside> con el <p>
   dentro. El espaciado y lo especifico de cada seccion van aparte */
.asv-cp-portfolio-texto,
.asv-cp-contacto-texto p {
	font-family: 'TTFirsNeue-Medium';
	line-height: 130%;
	text-align: left;
}

/* font-size aqui solo para Portfolio. Contacto lo pone en .contact-wrapper
   .col-left (1.5em); repetirlo seria em sobre em */
.asv-cp-portfolio-texto {
	font-size: 1.5em;
}

.portfolio-wrapper .entry-text p {
	margin: 0;
	overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.portfolio-wrapper .entry-text a.button {
	margin-top: var(--espacio);
}

.portfolio-wrapper .slider-wrapper {
  position: relative;
  width: 100%;
	height: 35vw;
	background-color: #fff;
  overflow: hidden;
}

.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-slide {
	width: 100%;
  height: 35vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-dots {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 4%;
	z-index: 10;
}

.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-dot span {
  display: inline-block;
	float: left;
  width: 17px;
  height: 17px;
  margin: 0 10px;
  border-radius: 100%;
	background-color: #fff;
}

.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-dot.active span {
  border: 2px solid #fff;
	background-color: transparent;
}

.about-wrapper .entry-text p {
	font-size: 1.1em;
	line-height: 170%;
}

.entry-skills ul li{
	margin: 0;
	color: #000;
	font-family: 'TTFirsNeue-Medium';
	font-size: 1.5em;
	line-height: 130%;
	letter-spacing: 0.02em;
	text-decoration: underline;
}

.asv-cp-perfil-skills {
	margin-bottom: var(--espacio);
}

.about-wrapper .illustration-wrapper {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	right: 0;
	padding: ;
	text-align: center;
	overflow: visible;
	z-index: 10;
}

.about-wrapper .illustration-container {
	position: absolute;
	width: 100%;
	top: 50%;
	padding: 5%;

	-webkit-transform: translateY(-50%);
		 -moz-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
			 -o-transform: translateY(-50%);
			 		transform: translateY(-50%);
}

.about-wrapper .illustration-wrapper img {
	width: 100%;
	height: auto;

	-webkit-transform: translateX(-10%);
		 -moz-transform: translateX(-10%);
		  -ms-transform: translateX(-10%);
			 -o-transform: translateX(-10%);
  	 			transform: translateX(-10%);
}

.contact-wrapper .col-left p,
.contact-wrapper .col-left aside {
	margin: 0;
}

.contact-wrapper .col-left {
	font-family: 'TTFirsNeue-Medium';
	font-size: 1.5em;
	line-height: 130%;
}

.contact-wrapper .col-left img.contact-illustration {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 5% 0;
}

.contact-wrapper #contact-social-networks {
	width: 100%;
	color: #fff;
}

.contact-wrapper #contact-social-networks h3 {
	margin-bottom: 30px;
}

.contact-wrapper .contact-widget li {
	display: inline-block;
	margin: 0 4% 4% 0;
}

.contact-wrapper .contact-widget li a {
	display: block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;

	-webkit-transition: transform .2s ease;
		 -moz-transition: transform .2s ease;
		  -ms-transition: transform .2s ease;
			 -o-transition: transform .2s ease;
			 		transition: transform .2s ease;
}

.contact-wrapper .contact-widget li a:hover {
	-webkit-transform: translateY(-5px);
		 -moz-transform: translateY(-5px);
		  -ms-transform: translateY(-5px);
			 -o-transform: translateY(-5px);
			 		transform: translateY(-5px);
}

.contact-wrapper .contact-widget .facebook a {
	background-image: url('img/icon-facebook.svg');
}

.contact-wrapper .contact-widget .instagram a {
	background-image: url('img/icon-instagram-2.png');
}

.contact-wrapper .contact-widget .twitch a {
	background-image: url('img/icon-twitch-2.png');
}

.contact-wrapper .contact-widget .twitter a {
	background-image: url('img/icon-twitter-2.png');
}

.contact-wrapper .contact-widget .youtube a {
	background-image: url('img/icon-youtube-2.png');
}

.contact-wrapper .contact-widget .patreon a {
	background-image: url('img/icon-patreon-2.png');
}

.contact-wrapper .contact-widget .linkedin a {
	background-image: url('img/icon-linkedin.png');
}

.contact-wrapper .contact-widget .mastodon a {
	background-image: url('img/icon-mastodon.png');
}

.contact-wrapper .contact-widget .bluesky a {
	background-image: url('img/icon-bluesky.png');
}

.form-wrapper {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	right: 0;
	padding: ;
	text-align: center;
	background-color: #e1e1e1;
	z-index: 10;
}

/* Centrado vertical. Los avisos de campo van en absoluto y no cambian la altura,
   asi el centrado no re-salta al validar */
.form-container {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}

.wpcf7-form {
	position: relative;
	display: flow-root;
	width: 60%;
	max-width: 700px;
	padding: 0;
	margin: 0 auto;
}

.wpcf7-form p {
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 4%;
}

/* nth-of-type (no nth-child): Turnstile antepone un <div>, contar solo los <p> */
.wpcf7-form p:nth-of-type(1),
.wpcf7-form p:nth-of-type(2) {
	width: 48% !important;
	margin-right: 4%;
}

.wpcf7-form p:nth-of-type(2) {
	margin-right: 0;
	clear: right;
}

/* Turnstile en modo invisible: el div va vacio, que no reserve espacio */
.wpcf7-form .cf-turnstile {
	margin: 0;
}

/* Ultimo campo (boton) sin margen inferior; cursor prohibido sobre el boton no listo */
.wpcf7-form p:last-of-type {
	margin-bottom: 0;
	cursor: not-allowed;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="submit"],
.wpcf7-form textarea {
	width: 100%;
	padding: 5px 20px;
	margin: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	text-align: left;
	text-shadow: none;
	border-radius: 40px;
	border: none;
	outline: none;
	background: #fff;
}

.wpcf7-form textarea {
	border-radius: 20px;
	resize: none;
}

.wpcf7-form-control-wrap:has(textarea) {
	display: block;
}

.wpcf7-contador {
	display: block;
	margin: 4px 20px 0 0;
	text-align: right;
	font-size: 0.8em;
	color: #2832d0;
	opacity: 0.55;
	transition: color .2s ease, opacity .2s ease;
}

.wpcf7-contador.is-lleno {
	color: #fb5130;
	opacity: 1;
}

.wpcf7-contador.is-vacio {
	opacity: 0;
}

.wpcf7-form input[type="submit"] {
	height: 50px;
	padding: 0 20px;
	max-width: 150px;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	line-height: 50px;
	text-transform: uppercase;
	text-align: center;
	background-color: #fb5130;
	pointer-events: none;

	-webkit-transition: transform .3s ease;
		 -moz-transition: transform .3s ease;
		  -ms-transition: transform .3s ease;
			 -o-transition: transform .3s ease;
			 		transition: transform .3s ease;
}

.wpcf7-form input[type="submit"]:hover {
	-webkit-transform: translateY(-5px);
		 -moz-transform: translateY(-5px);
		  -ms-transform: translateY(-5px);
			 -o-transform: translateY(-5px);
			 		transform: translateY(-5px);
}

/* Boton: rojo por defecto; azul solo con todo relleno, email valido y aceptado.
   Usa :has/:placeholder-shown (moderno); sin soporte se queda rojo, inofensivo */
.wpcf7-form input[type="submit"] {
	transition: background-color .3s ease, transform .3s ease, opacity .3s ease;
}

/* Al enviar (spinner) y al terminar (mensaje), el boton se desvanece y deja su hueco */
.wpcf7-form.submitting input[type="submit"],
.wpcf7-form.sent input[type="submit"],
.wpcf7-form.failed input[type="submit"] {
	opacity: 0;
	pointer-events: none;
}

.wpcf7-form:not(:has(input:placeholder-shown, textarea:placeholder-shown)):not(:has(input[type="email"]:invalid)):has(.wpcf7-acceptance input:checked) input[type="submit"] {
	background-color: #2832d0;
	pointer-events: auto;
	cursor: pointer;
}

.wpcf7-form:not(:has(input:placeholder-shown, textarea:placeholder-shown)):not(:has(input[type="email"]:invalid)):has(.wpcf7-acceptance input:checked) p:last-of-type {
	cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
	border-radius: 0;
}

.wpcf7-form .wpcf7-form-control-wrap span,
.wpcf7-form .wpcf7-checkbox span,
.wpcf7-form a.btn-form-read-more {
	display: inline;
	color: #000;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
}

/* El enlace de la politica se ve como enlace: color de marca + subrayado */
.wpcf7-form a.btn-form-read-more {
	color: #2832d0;
	text-decoration: underline;
}

.wpcf7-form .wpcf7-form-control-wrap span,
.wpcf7-form .wpcf7-checkbox span {
	font-size: 0.9em;
}

/* Mensaje de resultado: ocupa el hueco del boton (absoluto), no desplaza nada */
.wpcf7-form div.wpcf7-response-output {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
	font-family: 'TTFirsNeue-Medium';
	font-weight: 400;
	font-size: 1.1em !important;
	border: none !important;
}

/* Estado en CF7 6.x: la clase va en el <form> (.sent/.failed), no en el mensaje */
.wpcf7-form.sent div.wpcf7-response-output {
	color: #2832d0;
	opacity: 1;
}

.wpcf7-form.failed div.wpcf7-response-output {
	color: #fb5130;
	opacity: 1;
}

/* Avisos de validacion fuera (el fallo se ve poniendo el campo en rojo) */
.wpcf7-form.invalid div.wpcf7-response-output,
.wpcf7-form.unaccepted div.wpcf7-response-output {
	display: none;
}

/* Sin mensajes de aviso: la validacion se ve en rojo. Sube especificidad para
   ganar a .wpcf7-form-control-wrap span (display:inline), que si no lo reactiva */
.wpcf7-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: none;
}

/* Spinner centrado sobre el hueco del boton. Controlado por opacity (fundido
   suave con el mensaje); pointer-events none para no bloquear el boton */
.wpcf7-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	visibility: visible;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.wpcf7-form.submitting .wpcf7-spinner {
	opacity: 1;
}

.wpcf7-form a,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #2832d0;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

/* Campo que no cumple: texto y placeholder en rojo */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	color: #fb5130;
}

.wpcf7-form input.wpcf7-not-valid::placeholder,
.wpcf7-form textarea.wpcf7-not-valid::placeholder {
	color: #fb5130;
}

.wpcf7-form a:hover {
  color: #5a5a5a;
}

/*--------------------------------------------------------------
## Module Newsletter Gumroad
--------------------------------------------------------------*/

.newsletter-wrapper {
	width: 92%;
	/* 600px hasta ~2000px de viewport, luego crece con la pantalla (4K no se queda pequeno) */
	max-width: clamp(600px, 30vw, 1200px);
	padding-bottom: var(--espacio-extra);
	margin: 0 auto;
}

.newsletter-wrapper .entry-text .widget {
	margin: 0;
}

.newsletter-wrapper .entry-text p {
	margin: 0 0 var(--espacio-parrafo);
	font-family: 'TTFirsNeue-Medium';
	font-size: 1.5em;
	line-height: 130%;
	text-align: center;
}

.newsletter-follow-form-embed {
	zoom: 1;
}

.newsletter-follow-form-embed:before, .newsletter-follow-form-embed:after {
	display: table;
	line-height: 0;
	content: "";
}

.newsletter-follow-form-embed:after {
	clear: both;
}

.newsletter-follow-form-embed * {
	margin: 0;
	border: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box !important;
	float: left !important;
}

.newsletter-follow-form-embed input {
	border-radius: 60px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	line-height: 20px;
	background: #fff;
	border: none;
	border-right: 0;
	color: #fb5130;
	padding: 10px 20px;
	background-position: top right;
	background-repeat: no-repeat;
	text-rendering: optimizeLegibility;
	font-smoothing: antialiased;
	-webkit-appearance: none;
	-moz-appearance: caret;
	width: 65% !important;
	height: 70px !important;
}

/*.newsletter-follow-form-embed input::placeholder {
  color: #fb5130;
}*/

.newsletter-follow-form-embed button,
.newsletter-follow-form-embed input[type="submit"] {
	border-radius: 60px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transition: all .05s ease-in-out;
	transition: all .05s ease-in-out;
	display: inline-block;
	padding: 11px 15px 12px;
	cursor: pointer;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 1em;
	text-transform: uppercase;
	line-height: 100%;
	background: #1a171b;
	border: none;
	width: 35% !important;
	height: 70px !important;
}

@media screen and (max-width: 1700px) {
	.newsletter-follow-form-embed input,
	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		height: 60px !important;
	}

	.newsletter-follow-form-embed input {
		font-size: ;
	}

	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		font-size: 1em;
	}
}

@media screen and (max-width: 1300px) {
	.newsletter-follow-form-embed input,
	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		height: 50px !important;
	}

	.newsletter-follow-form-embed input {
		font-size: ;
	}

	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		font-size: 0.95em;
	}
}

@media screen and (max-width: 1000px) {
	.newsletter-follow-form-embed input,
	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		height: 45px !important;
	}

	.newsletter-follow-form-embed input {
		font-size: ;
	}

	.newsletter-follow-form-embed button,
	.newsletter-follow-form-embed input[type="submit"] {
		font-size: 0.95em;
	}
}

/*--------------------------------------------------------------
## Portfolio - Page
--------------------------------------------------------------*/

.portfolio-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.portfolio-gallery::after {
	content: '';
}

.portfolio-gallery article {
	position: relative;
	width: 100%;
	margin-bottom: 3%;
	border: 1px solid #eee;
	background-color: #2832d0;
	background-image: url('img/icon-triangle-white.svg');
	background-position: center center;
	background-size: 20px 20px ;
	background-repeat: no-repeat;
	overflow: hidden;
}

@media screen and (min-width: 700px) {
	.portfolio-gallery::after,
	.portfolio-gallery article {
		width: 48%;
	}
}

@media screen and (min-width: 1000px) {
	.portfolio-gallery::after,
	.portfolio-gallery article {
		width: 31%;
	}
}

.portfolio-gallery img {
	display: block;
  	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Feed 'Proyectos recientes': mismo grid responsive que el archivo de portfolio
   (1 col movil, 2 col tablet, hueco 3.5%), pero 4 columnas en escritorio para que
   los 4 proyectos quepan en una linea */
@media screen and (min-width: 1000px) {
	.portfolio-recent .portfolio-gallery::after,
	.portfolio-recent .portfolio-gallery article {
		width: calc((100% - 3 * 3.5%) / 4);
	}
}

/* Boton 'Ver Portfolio' del feed: centrado y con aire debajo (el btn-portfolio
   base es inline-block, no se centra solo como btn-posts/btn-tutorials) */
.portfolio-recent .button {
	display: block;
	width: fit-content;
	margin: 0 auto var(--espacio);
}

/* Archivo /portfolio/ (y sus filtros): columnas y proporcion configurables desde
   Proyectos > Rejilla del archivo. Scopeado a .portfolio-index para no tocar el
   shortcode [portfolio]. Las variables las imprime inc/portfolio-rejilla.php.
   CSS Grid (no flex + calc): reparte N columnas iguales con hueco amplio y uniforme
   (--espacio-parrafo * 1.5) sin el salto de fila por redondeo que daba el flex */
.portfolio-index .portfolio-gallery {
	--pf-gap: calc(var(--espacio-parrafo) * 1.5);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pf-gap);
}

/* Grid gestiona el ancho: se anula el width (y el 48% a 700px) que venia del flex */
.portfolio-index .portfolio-gallery article {
	width: auto;
	margin-bottom: 0;
}

.portfolio-index .portfolio-gallery::after {
	display: none;
}

.portfolio-index .portfolio-gallery img {
	aspect-ratio: var(--pf-ratio, 1 / 1);
}

@media screen and (min-width: 700px) {
	.portfolio-index .portfolio-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 1000px) {
	.portfolio-index .portfolio-gallery {
		grid-template-columns: repeat(var(--pf-cols, 3), 1fr);
	}
}

@media screen and (min-width: 2000px) {
	.portfolio-index .portfolio-gallery {
		grid-template-columns: repeat(var(--pf-cols-wide, 3), 1fr);
	}
}

/* --- AS Galería (bloque malla): espaciado, retícula y recorte propios. Solo el
   bloque lleva .asv-galeria-malla; el archivo y las páginas gallery, sin ella,
   siguen con su margin-top, sus 3 columnas y su 1:1 --- */

/* Espaciado como los demás bloques (hueco de fila), no el margin-top del portfolio */
article.single-entry .entry-content .asv-galeria-malla {
	/* Hueco entre imágenes = el de párrafo (1.8em), asi la malla comparte el mismo
	   ritmo de espaciado que el texto. Longitud única: horizontal y vertical iguales */
	--gal-gap: var(--espacio-parrafo);
	margin-bottom: var(--espacio-fila);
}

/* Intersticios amplios: 1.5x el hueco (malla más aireada) */
article.single-entry .entry-content .asv-galeria-malla.gal-hueco-amplio {
	--gal-gap: calc(var(--espacio-parrafo) * 1.5);
}

/* Intersticios uniformes: el mismo hueco horizontal y vertical (gap), en vez de
   space-between (que daba huecos distintos según las columnas) + margin-bottom */
article.single-entry .entry-content .asv-galeria-malla .portfolio-gallery {
	justify-content: flex-start;
	gap: var(--gal-gap);
}

article.single-entry .entry-content .asv-galeria-malla .portfolio-gallery article {
	margin-bottom: 0;
}

/* El ::after era el truco de space-between; con gap sobra y ocuparía un hueco */
article.single-entry .entry-content .asv-galeria-malla .portfolio-gallery::after {
	display: none;
}

/* Recorte comun de todas las imagenes (scoped al bloque) */
article.single-entry .entry-content .asv-galeria-malla.galeria-recorte-4_3 .portfolio-gallery img {
	aspect-ratio: 4 / 3;
}

article.single-entry .entry-content .asv-galeria-malla.galeria-recorte-3_4 .portfolio-gallery img {
	aspect-ratio: 3 / 4;
}

article.single-entry .entry-content .asv-galeria-malla.galeria-recorte-16_9 .portfolio-gallery img {
	aspect-ratio: 16 / 9;
}

article.single-entry .entry-content .asv-galeria-malla.galeria-recorte-9_16 .portfolio-gallery img {
	aspect-ratio: 9 / 16;
}

article.single-entry .entry-content .asv-galeria-malla.galeria-sin-recorte .portfolio-gallery img {
	aspect-ratio: auto;
}

/* Anchos con gap: calc((100% - (N-1)*gap) / N). 1 columna en móvil, 2 en tablet, y
   en escritorio la retícula elegida (3 de serie). Asi el hueco es siempre igual */
@media screen and (min-width: 700px) {
	article.single-entry .entry-content .asv-galeria-malla .portfolio-gallery article {
		width: calc( ( 100% - var(--gal-gap) ) / 2 );
	}
}

@media screen and (min-width: 1000px) {
	article.single-entry .entry-content .asv-galeria-malla .portfolio-gallery article {
		width: calc( ( 100% - 2 * var(--gal-gap) ) / 3 );
	}

	article.single-entry .entry-content .asv-galeria-malla.reticula-2 .portfolio-gallery article {
		width: calc( ( 100% - var(--gal-gap) ) / 2 );
	}

	article.single-entry .entry-content .asv-galeria-malla.reticula-4 .portfolio-gallery article {
		width: calc( ( 100% - 3 * var(--gal-gap) ) / 4 );
	}

	article.single-entry .entry-content .asv-galeria-malla.reticula-5 .portfolio-gallery article {
		width: calc( ( 100% - 4 * var(--gal-gap) ) / 5 );
	}
}

.portfolio-gallery article header {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0 !important;
	text-align: center;
	pointer-events: none;
	background-color: #2832d0;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
	opacity: 0;

	-webkit-transition: opacity .2s ease;
		 -moz-transition: opacity .2s ease;
		  -ms-transition: opacity .2s ease;
			 -o-transition: opacity .2s ease;
			 		transition: opacity .2s ease;

	-webkit-transform: translateY(0);
		 -moz-transform: translateY(0);
		  -ms-transform: translateY(0);
			 -o-transform: translateY(0);
			 		transform: translateY(0);
}

.portfolio-gallery article:hover header {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

.portfolio-gallery article header h2 {
	width: auto !important;
	padding: 10px 20px;
	color: #000;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 0.9em;
	line-height: 140%;
	text-transform: uppercase;
	border-radius: 30px;
	background-color: #fff;

  -webkit-transform: scale(0.95);
		 -moz-transform: scale(0.95);
		  -ms-transform: scale(0.95);
			 -o-transform: scale(0.95);
			 		transform: scale(0.95);

	-webkit-transition: transform .4s ease;
		 -moz-transition: transform .4s ease;
		  -ms-transition: transform .4s ease;
			 -o-transition: transform .4s ease;
			 		transition: transform .4s ease;
}

.portfolio-gallery article:hover header h2 {
  -webkit-transform: scale(1);
		 -moz-transform: scale(1);
		  -ms-transform: scale(1);
			 -o-transform: scale(1);
			 		transform: scale(1);
}

/* Archivo de portfolio: sin overlay azul ni titulo en el hover. La imagen entera
   abre el visor; el boton "Detalles" (rojo, hover negro, como los filtros) sale en
   la esquina inferior derecha al pasar el raton y va al proyecto. El header sigue
   cubriendo la card con pointer-events:none, asi el clic pasa a la imagen; solo el
   boton recupera pointer-events */
.portfolio-index .portfolio-gallery article header {
	display: block;
	background-color: transparent;
	opacity: 1;
}

.portfolio-index .portfolio-gallery article header h2 {
	display: none;
}

/* Cursor lupa sobre la imagen (abre el visor); mano sobre el boton "Detalles" */
.portfolio-index .portfolio-gallery .asv-pf-visor {
	cursor: zoom-in;
}

.portfolio-detalles {
	position: absolute;
	right: 7%;
	bottom: 7%;
	pointer-events: auto;
	display: inline-block;
	height: 40px;
	padding: 0 18px;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 0.8em;
	line-height: 40px;
	text-transform: uppercase;
	border-radius: 30px;
	background-color: #fb5130;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background-color .2s ease;
}

/* Movil/tablet (sin hover): el boton siempre visible, centrado abajo y al 80% del
   ancho. La especificidad extra (.portfolio-index) gana al width:100% que el
   .portfolio-gallery a de <=700px pone a los enlaces (pensado para la imagen) */
@media screen and (max-width: 999px) {
	.portfolio-index .portfolio-detalles {
		right: auto;
		left: 50%;
		width: 50%;
		text-align: center;
		transform: translateX(-50%);
		opacity: 1;
	}
}

/* El a:visited global (color negro) tinta el enlace visitado, y los navegadores
   restringen los overrides de color en :visited. El texto va en un <span> (no es
   enlace, asi que a:visited no lo alcanza) con color propio: blanco siempre */
.portfolio-detalles:visited,
.portfolio-detalles span {
	color: #fff;
}

.portfolio-index .portfolio-gallery article:hover .portfolio-detalles {
	opacity: 1;
}

.portfolio-detalles:hover {
	background-color: #000;
}

.portfolio-gallery .caption {
  display: none;
}

/*--------------------------------------------------------------
## Photoswipe
--------------------------------------------------------------*/

.pswp-gallery {
	position: relative;
	width: 100%;
}

.pswp-gallery > * {
	display: block;
	position: relative;
	
}

[data-cropped] img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.pswp {
	z-index: 9999 !important;
}

.pswp__bg {
	background-color: rgba(255, 255, 255, 1) !important;
	opacity: 1 !important;

	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.pswp__top-bar,
.pswp__caption {
	width: 100% !important;
	background: transparent !important;
}

.pswp__caption .pswp__caption__center {
	max-width: 600px !important;
	padding: 30px 20px !important;
	color: #000;
	font-size: 1em;
	line-height: normal;
	text-align: center !important;
}

.pswp__caption .pswp__caption__center small {
	display: none;
}

/* Pie de foto del bloque AS Image dentro del visor. PhotoSwipe 5 no trae pies:
   main.js registra este elemento y le mete el texto. Va sobreimpreso abajo.
   Velo oscuro y texto claro: cae encima de la imagen, y una imagen puede ser
   blanca o negra. Al reves (velo blanco) se pierde sobre una foto oscura */
.pswp__asv-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 16px 20px;
	color: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	font-size: 0.9em;
	line-height: 140%;
	text-align: center;
	background: rgba(0, 0, 0, 0.75);
	z-index: 10;
	pointer-events: none;

	transition: opacity .5s ease;
}

/* Solo se ve al acercar el raton a la franja de abajo del visor (main.js) */
.pswp__asv-caption.is-hidden {
	opacity: 0;
}

/* El CSS de PhotoSwipe pone la lupa en .pswp__img sin comprobar si el zoom esta
   permitido, asi que la ensena aunque no se pueda hacer zoom */
.pswp--custom-style:not(.pswp--zoom-allowed) .pswp__img {
	cursor: default;
}

.pswp__button--close,
.pswp__button--arrow--next, 
.pswp__button--arrow--prev {
	width: 60px !important;
	height: 60px !important;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1 !important;
}

.pswp__button--close {
	top: 1em;
	right: 1em;
} 

.pswp__button--arrow--next {
	right: 1em;
} 

.pswp__button--arrow--prev {
	left: 1em;
}

.pswp__button--close:hover,
.pswp__button--arrow--next:hover,
.pswp__button--arrow--prev:hover {
	background-color: #fff;
}

.pswp__button--arrow--next svg {
	transform: scale(-1, 1);
}

.pswp__button--close svg { 
	-webkit-transition: transform .3s ease !important;
		 -moz-transition: transform .3s ease !important;
		  -ms-transition: transform .3s ease !important;
			 -o-transition: transform .3s ease !important;
			 		transition: transform .3s ease !important;
}

.pswp__button--close:hover svg {
	-webkit-transform: rotate(90deg);
		 -moz-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
			 -o-transform: rotate(90deg);
			 		transform: rotate(90deg);
}

.pswp--custom-style {
	--pswp-icon-color: #00fffc;
	--pswp-icon-color-secondary: #333;
}

/*--------------------------------------------------------------
## Página - Enlaces
--------------------------------------------------------------*/

.section-links h3 {
	margin-bottom: 1em;
	font-family: 'TTFirsNeue-DemiBold';
	font-size: 1.8em;
	line-height: 140%;
	letter-spacing: 0.02em;
}

.section-links ul {
	margin-bottom: 2em;
}

.section-links li {
	display: block;
	width: 100%;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 600;
	font-size: 0.9em;
	border-top: 1px solid #1823cb;
}


.section-links li:last-child {
	border-bottom: 1px solid #1823cb;
}

.section-links li a {
	display: flex;
	padding: 0.5em 0;
	color: #1823cb;

	-webkit-transition: all .2s ease;
	   -moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		 -o-transition: all .2s ease;
			transition: all .2s ease;
}

.section-links li a::after {
	content: '→';
	margin-left: auto;
	font-size: 2em;
	font-weight: 300;
}

.section-links li a:hover {
	padding: 0.5em 0.5em;
	color: #fff;
	background-color: #1823cb;
}

/*--------------------------------------------------------------
## Animate Elements on Scroll
--------------------------------------------------------------*/

.animate {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
	opacity: 0;

	-webkit-transition: opacity 1s ease;
		 -moz-transition: opacity 1s ease;
		  -ms-transition: opacity 1s ease;
			 -o-transition: opacity 1s ease;
			 		transition: opacity 1s ease;
}

.animate.is-visible {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

.loaded {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;

	-webkit-transition: opacity 1s ease;
		 -moz-transition: opacity 1s ease;
		  -ms-transition: opacity 1s ease;
			 -o-transition: opacity 1s ease;
			 		transition: opacity 1s ease;
}

.loaded.is-visible {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
	opacity: 1;
}

/*--------------------------------------------------------------
## Media Queries
--------------------------------------------------------------*/

@media screen and (max-width: 1700px) {
	body {
		font-size: 1.1em;
	}

	img.loading-icon {
		width: 25px;
		height: 25px;
	}

	header#masthead .site-branding,
	article.single-entry .entry-nav.desktop {
		left: 2%;
	}

	header#masthead .right-nav {
		right: 2%;
	}

	.boxed_large {
		padding-left: 2%;
		padding-right: 2%;
	}

	.boxed_regular {
		padding-left: 8%;
		padding-right: 8%;
	}

	.boxed_large.inside_one_half {
		padding-left: 4%;
		padding-right: 4%;
	}

	.boxed_regular.inside_one_half {
		padding-left: 16%;
		padding-right: 16%;
	}

	.boxed_small.padding {
		max-width: 800px;
	}

	button.button,
	span.button,
	a.button {
		height: 60px;
		padding: 0 30px;
		line-height: 60px;
	}

	button.btn-filter,
	button.btn-loadmore {
		height: 45px;
		padding: 0 20px;
		line-height: 45px;
	}

	.wpcf7-form input[type="submit"],
	#comments input[type="submit"] {
		height: 45px;
		padding: 0 20px;
		line-height: 45px;
	}

	/*
	.contact-wrapper .contact-widget li a {
		display: block;
		width: 55px;
		height: 55px;
	}*/

	section.hero-parallax .hero-wrapper .header-fixed .header-container h1:before {
		width: 25px;
		height: 25px;
		left: -45px;
		margin-top: -12px;
	}

	article.tutorial-archive .entry-icon-tutorial {
		width: 25px;
		height: 25px;
		margin: 0 auto 25px;
	}

	article.tutorial-archive .entry-premium-tutorial {
		margin-bottom: 20px;
	}

	article.tutorial-archive .entry-header .entry-title {
		margin: 0 auto 10px;
	}

	article.tutorial-archive .entry-header .entry-subtitle {
		margin-bottom: 20px;
	}

	article.tutorial-archive .entry-content {
		line-height: 160%;
	}

	.posts-index .posts-wrapper .posts-loop {
		width: 101%;
		margin-left: -0.5%;
	}

	article.post-archive .entry-featured-image .entry-icon-video {
		width: 60px;
		height: 42px;
	}

	article.post-archive .entry-content {
		height: 100px;
		margin: 15px 0 15%;
		line-height: 160%;
	}

	article.post-archive .entry-footer a.btn-readmore .icon-readmore {
		margin-top: 2px;
		margin-left: -15px;
	}

	.posts-index .posts-wrapper .posts-loop article.post-archive {
		padding: 0 1%;
	}

	article.single-entry .entry-content .entry-banner .banner-container {
		height: 150px;
		padding: 0 20px;
	}

	article.single-entry .entry-content .entry-banner .text-banner .text-container {
		font-size: 1.7em;
	}

	article.single-entry .entry-content .entry-list ul li:before {
		top: 7px;
		left: -35px;
	}

	article.single-entry .entry-content .entry-video .video-container .video-cover .video-icon {
		width: 90px;
		height: 64px;
		margin: -32px 0 0 -45px;
	}

	#aviso-cookies,
	.ressources-popup {
		padding: 25px 20px;
	}

	.portfolio-wrapper .entry-text p,
	.contact-wrapper .col-left,
	.newsletter-wrapper .entry-text p {
		font-size: 1.3em;
	}

	.pswp__button--close,
	.pswp__button--arrow--prev,
	.pswp__button--arrow--next {
		width: 50px !important;
		height: 50px !important;
	}
}

@media screen and (max-width: 1300px) {
	body {
		font-size: 1em;
	}

	img.loading-icon {
		width: 20px;
		height: 20px;
	}

	.boxed_small.padding {
		max-width: 700px;
	}

	button.button,
	span.button,
	a.button {
		height: 50px;
		padding: 0 20px;
		font-size: 0.95em;
		line-height: 50px;
	}

	button.btn-filter,
	button.btn-loadmore {
		height: 40px;
		padding: 0 15px;
		line-height: 40px;
	}

	.btn-tutorial,
	.btn-ressource {
		min-width: 130px;
	}

	.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-dot span {
	  width: 15px;
	  height: 15px;
	  margin: 0 8px;
	}

	/*
	.contact-wrapper .contact-widget li a {
		display: block;
		width: 50px;
		height: 50px;
	}*/

	.wpcf7-form input[type="submit"],
	#comments input[type="submit"] {
		height: 40px;
		max-width: 120px;
		padding: 0 20px;
		line-height: 40px;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-premium-project {
		margin-bottom: 20px;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container h1:before {
		width: 20px;
		height: 20px;
		left: -40px;
		margin-top: -10px;
	}

	article.tutorial-archive .entry-icon-tutorial {
		width: 20px;
		height: 20px;
		margin: 0 auto 20px;
	}

	article.tutorial-archive .entry-premium-tutorial {
		margin-bottom: 10px;
	}

	article.tutorial-archive .entry-header .entry-subtitle {
		margin-bottom: 10px;
	}

	.posts-index .posts-wrapper .posts-loop {
		width: 101%;
		margin-left: -0.5%;
	}

	.posts-index .posts-wrapper .posts-loop article.post-archive {
		padding: 0 1%;
	}

	article.post-archive .entry-featured-image .entry-icon-video {
		width: 50px;
		height: 35px;
	}

	article.post-archive .entry-header h2 {
		margin-bottom: 5px;
	}

	article.post-archive .entry-content {
		margin: 15px 0 15%;
	}

	article.post-archive .entry-content {
		height: 85px;
		line-height: 150%;
	}

	article.post-archive .entry-footer a.btn-readmore .icon-readmore {
		margin-top: 1px;
		margin-left: -20px;
	}

	article.single-entry .entry-nav.desktop {
		display: none;
	}

	article.single-entry .entry-nav.mobile {
		display: block;
	}

	/* Con barra movil (Categorias/Contenidos), esta va pegada al hero y el hueco de
	   arranque lo pone su propio margin-bottom: se anula el clear_espacio de encima */
	article.single-entry:has(.entry-nav.mobile) > .clear_espacio {
		margin-bottom: 0;
	}

	article.single-entry .entry-content .entry-banner .banner-container {
		height: 120px;
	}

	article.single-entry .entry-content .entry-list ul li {
		margin-bottom: 15px;
	}

	article.single-entry .entry-content .entry-list ul li:before {
		width: 12px;
		height: 12px;
		top: 6px;
		left: -30px;
	}

	article.single-entry .entry-content .entry-video .video-container .video-cover .video-icon {
		width: 80px;
		height: 57px;
		margin: -28px 0 0 -40px;
	}

	article.single-entry .entry-share li a {
		width: 25px;
		height: 25px;
	}

	#aviso-cookies,
	.ressources-popup {
		padding: 20px 20px;
	}

	#footer-sidebar {
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 1150px) {
	body {
		font-size: 0.95em;
	}

	h2.section-title {
		margin: 60px 0;
		margin:  4vw 0;
	}

	/* The cover used to be hidden here, back when the iframe carried its src and
	   YouTube drew its own thumbnail. The iframe is deferred now: hiding the
	   cover leaves an empty box and no way to start the video */

	article.single-entry .entry-content .entry-video .video-container .video-title {
		opacity: 1;
	}

	article.single-entry .entry-share h4 {
		margin-bottom: 15px;
	}

	.contact-wrapper #contact-social-networks h3 {
		margin-bottom: 20px;
	}

	.contact-wrapper .contact-widget li {
		display: inline-block;
		margin: 0 3% 3% 0;
	}

	/*
	.contact-wrapper .contact-widget li a {
		display: block;
		width: 45px;
		height: 45px;
	}*/

	.contact-wrapper .contact-widget li a:hover {
		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);
	}

	.portfolio-gallery a .entry-title {
		display: none;
	}

	.pswp__top-bar {
		opacity: 1 !important;
	}

	.pswp__button--close,
	.pswp__button--arrow--prev,
	.pswp__button--arrow--next {
		width: 40px !important;
		height: 40px !important;
	}

	.pswp__button--close:hover {
		-webkit-transform: rotate(0deg);
			 -moz-transform: rotate(0deg);
			  -ms-transform: rotate(0deg);
				 -o-transform: rotate(0deg);
				 		transform: rotate(0deg);
	}

	.pswp__button--arrow--prev:hover,
	.pswp__button--arrow--next:hover {
		-webkit-transform: translateX(0);
			 -moz-transform: translateX(0);
			  -ms-transform: translateX(0);
				 -o-transform: translateX(0);
				 		transform: translateX(0);
	}
}

@media screen and (max-width: 1000px) {
	header#masthead .site-branding {
		left: 3%;
	}

	.boxed_large {
		padding-left: 3%;
		padding-right: 3%;
	}

	.boxed_regular {
		padding-left: 3%;
		padding-right: 3%;
	}

	.boxed_large.inside_one_half {
		padding-left: 3%;
		padding-right: 3%;
	}

	.boxed_regular.inside_one_half {
		padding-left: 10%;
		padding-right: 10%;
	}

	.boxed_small {
		width: 94%;
	}

	.boxed_small.padding {
		width: 70%;
		max-width: 900px;
	}

	section.hero,
	.entry-featured-illustration,
	section.hero-parallax .hero-wrapper .header-fixed {
		height: 50vh;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-small {
		width: 50%;
		max-width: 400px;
		margin-top: 20px;
	}

	.entry-featured-illustration .illustration-container {
		width: 50%;

		-webkit-transform: translate3d(-10%,8%,0);
			 -moz-transform: translate3d(-10%,8%,0);
			  -ms-transform: translate3d(-10%,8%,0);
				 -o-transform: translate3d(-10%,8%,0);
				 		transform: translate3d(-10%,8%,0);
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-premium-project {
		margin-bottom: 20px;
		font-size: 1.4em;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container h1:before {
		display: none;
	}

	section.hero_small {
	  height: 50vh;
	}

	section.hero_small .entry-featured-illustration {
		position: absolute;
		width: 55%;
		background-size: 100%;

		-webkit-transform: translate3d(-5%,2%,0);
			 -moz-transform: translate3d(-5%,2%,0);
			  -ms-transform: translate3d(-5%,2%,0);
				 -o-transform: translate3d(-5%,2%,0);
				 		transform: translate3d(-5%,2%,0);
	}

	section.hero_small.hero_index .entry-featured-illustration {
		background-size: 90%;
		background-position: center center;
	}

	button.button,
	span.button,
	a.button {
		height: 45px;
		padding: 0 15px;
		font-size: 0.95em;
		line-height: 45px;
	}

	button.btn-filter,
	button.btn-loadmore {
		height: 35px;
		padding: 0 12px;
		line-height: 35px;
	}

	.btn-tutorial,
	.btn-ressource {
		min-width: 120px;
	}

	article.tutorial-archive {
		padding: 4% 4%;
	}

	article.tutorial-archive .entry-premium-tutorial {
		font-size: 0.95em;
	}

	article.tutorial-archive .entry-header .entry-subtitle {
		display: none;
	}

	article.tutorial-archive .entry-content {
		line-height: 150%;
	}

	.index-wrapper article.post-archive.one_fourth {
		width: 50%;
	}

	.clear_regular.clear_index_items_2 {
		display: block;
	}

	.clear_regular.clear_index_items_4 {
		display: none;
	}

	.posts-index .posts-wrapper .posts-loop {
		width: 102%;
		margin-left: -1%;
	}

	.posts-index .posts-wrapper .posts-loop article.post-archive {
		padding: 0 2%;
	}

	article.post-archive .entry-content {
		height: 90px;
		margin: 15px 0 15%;
		line-height: 170%;
	}

	article.single-entry .entry-nav.mobile {
		top: 60px;
	}

	article.single-entry .entry-nav.mobile li {
		height: 30px;
	}

	article.single-entry .entry-nav.mobile li a {
		padding: 2px 5px;
		margin-left: -5px;
	}

	article.single-entry .entry-content .entry-text.text-intro p {
		margin-top: 20px;
		font-size: 1.6em;
	}

	article.single-entry .entry-content .entry-title.shortcode-title h3 {
		font-size: 1.4em;
	}

	article.single-entry .entry-content .entry-banner .banner-container {
		height: 100px;
	}

	article.single-entry .entry-content .entry-banner .text-banner .text-container {
		font-size: 1.6em;
	}

	article.single-entry .entry-content .entry-video .video-container .video-cover .video-icon {
		width: 70px;
		height: 50px;
		margin: -25px 0 0 -35px;
	}

	article.single-entry .entry-share h4 {
		font-size: 1.4em;
	}

	.portfolio-wrapper .one_half,
	.portfolio-wrapper .one_half_last,
	.about-wrapper .one_half,
	.about-wrapper .one_half_last,
	.contact-wrapper .one_half,
	.contact-wrapper .one_half_last {
		width: 100% !important;
	}

	.portfolio-wrapper .col-left {
		min-height: 40vh;
	}

	.portfolio-wrapper .slider-wrapper,
	.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-slide {
		height: 40vh;
	}

	.about-wrapper .illustration-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		top: 0;
		right: 0;
		text-align: center;
		overflow: visible;
		z-index: 10;
	}

	.about-wrapper .illustration-container {
		position: relative;
		width: 100%;
		top: 0;
		padding: 4%;

		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);
	}

	.about-wrapper .illustration-wrapper img {
		-webkit-transform: translateX(0);
			 -moz-transform: translateX(0);
			  -ms-transform: translateX(0);
				 -o-transform: translateX(0);
	  	 			transform: translateX(0);
	}

	.form-wrapper {
		position: relative;
		float: left;
		width: 100%;
		height: 100%;
		padding: 60px 0 50px;
	}

	.form-container {
		position: relative;
		width: 100%;
		top: 0;

		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);
	}

	.footer-widget.one_fourth,
	.footer-widget.one_fourth_last {
		display: inline-block;
		width: 50% !important;
		height: 220px;
	}
}

@media screen and (max-width: 700px) {
	body {
			font-size: 0.9em;
	}

	header#masthead .nav-trigger {
	  right: 0;
	}

	.newsletter-wrapper .entry-text p {
		text-align: left;
	}

	.boxed_small,
	.boxed_small.padding {
		width: 94%;
		max-width: 94%;
	}

	.boxed_regular.inside_one_half {
		padding-left: 4%;
		padding-right: 4%;
	}

	section.hero,
	section.hero-parallax .hero-wrapper .header-fixed {
		height: 65vh;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container {
		top: auto;
		bottom: 10%;

		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);
	}

	section.hero-parallax.hero-tutorial .hero-wrapper .header-fixed .header-container h2,
	section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-meta {
		margin-top: 5px;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container .entry-premium-project {
		font-size: 1.3em;
	}

	section.hero-parallax .hero-wrapper .header-fixed .header-container p.intro-text-small {
		width: 70%;
		max-width: 500px;
		margin-top: 10px;
		overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	}

	.home-featured-illustration {
		display: none;
	}

	section.hero_small {
	  height: 65vh;
	}

	section.hero_small .header-page {
		position: absolute;
		width: 100%;
		top: auto;
		bottom: 5%;
	}

	section.hero_small .header-page .entry-subtitle {
		max-width: 100%;
		margin-top: 5px;
		font-size: 1em;
	}

	section.hero_small .entry-featured-illustration {
		position: absolute;
		width: 100%;
		background-size: 90%;
		background-position: center 40%;

		-webkit-transform: translate3d(0,0,0);
			 -moz-transform: translate3d(0,0,0);
			  -ms-transform: translate3d(0,0,0);
				 -o-transform: translate3d(0,0,0);
				 		transform: translate3d(0,0,0);
	}

	section.hero_small.hero_index .entry-featured-illustration {
		background-size: 90%;
		background-position: center 40%;
	}

	h2.section-title {
		margin: 40px 0 20px;
	}

	.portfolio-wrapper .col-left {
		min-height: 50vh;
	}

	.portfolio-wrapper .slider-wrapper .portfolio-carousel .owl-dot span {
	  width: 12px;
	  height: 12px;
	  margin: 0 5px;
	}

	.contact-wrapper #contact-social-networks h3 {
		margin-bottom: 10px;
	}

	.contact-wrapper .contact-widget li {
		display: inline-block;
		margin: 0 2% 4% 0;
	}

	.contact-wrapper .contact-widget li a {
		display: block;
		width: 1em;
		height: 1em;
	}

	.form-wrapper {
		padding: 40px 0 30px;
	}

	article.tutorial-archive {
		width: 100% !important;
		padding: 10% 10% !important;
		border-right: 1px solid #eee;
		border-left: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	article.tutorial-archive:nth-child(1) {
		border-top: 1px solid #eee;
	}

	article.tutorial-archive:nth-child(2),
	article.tutorial-archive:nth-child(3) {
		border-top: none;
	}

	.tutorials-home article.tutorial-archive:last-child {
		border-right: 1px solid #eee;
		border-left: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	article.tutorial-archive .entry-header .entry-title {
		margin: 0 auto;
	}

	.feed-wrapper .posts-loop article.post-archive {
		padding: 4%;
	}

	.posts-index .posts-wrapper .posts-loop {
		width: 100%;
		margin-left: 0;
	}

	article.post-archive.one_fourth {
		width: 100% !important;
		margin-bottom: 30px;
	}

	article.post-archive .entry-info-news {
		padding: 8% 6% 8%;
	}

	.posts-index .posts-wrapper .posts-loop article.post-archive {
		padding: 0;
	}

	article.post-archive .entry-content {
		height: 85px;
		margin: 15px 0 40px;
		line-height: 160%;
	}

	article.post-archive .entry-footer a.btn-readmore .icon-readmore {
		margin-top: 0;
		margin-left: -20px;
	}

	.clear_regular.clear_index_items_2 {
		display: none;
	}

	article.single-entry .entry-nav.mobile li {
		height: 27px;
	}

	article.single-entry .entry-content .entry-banner .banner-container {
		float: left;
		width: 100%;
		height: auto;
		padding: 0;
		text-align: center;
	}

	article.single-entry .entry-content .entry-banner .banner-container .text-banner {
		padding: 20px 0;
	}

	article.single-entry .entry-content .entry-banner .banner-container a.button {
		display: inline-block;
		float: none;
		border-radius: 0;
	}

	article.single-entry .entry-content .entry-banner .banner-container a.button,
	article.single-entry .entry-content .entry-banner .banner-container .col {
		width: 100%;
	}

	article.single-entry .entry-content .entry-banner .banner-container a.button:hover {
		-webkit-transform: translateY(0);
			 -moz-transform: translateY(0);
			  -ms-transform: translateY(0);
				 -o-transform: translateY(0);
				 		transform: translateY(0);
	}

	article.single-entry .entry-content .entry-banner .text-banner .text-container {
		font-size: 1.4em;
	}

	article.single-entry .entry-content .entry-list ul {
		padding: 0 30px;
	}

	article.single-entry .entry-content .entry-list ul li {
		margin-bottom: 10px;
	}

	article.single-entry .entry-content .entry-video .video-container .video-cover .video-icon {
		width: 60px;
		height: 43px;
		margin: -22px 0 0 -30px;
	}

	article.single-entry .entry-content .entry-col-2 .one_half,
	article.single-entry .entry-content .entry-col-2 .one_half_last {
		width: 100%;
	}

	article.single-entry .entry-share h4 {
		margin-bottom: 10px;
	}

	.ressources {
		padding: 30px 0;
	}

	article.single-entry .entry-content .entry-text,
	article.single-entry .entry-content .entry-col-2,
	article.single-entry .entry-content .entry-col-2 .col:first-child,
	article.single-entry .entry-content .entry-title.shortcode-title,
	article.single-entry .entry-content .entry-banner,
	article.single-entry .entry-content .entry-list,
	article.single-entry .entry-content .entry-image,
	article.single-entry .entry-content .entry-video,
	article.single-entry .entry-content .entry-iframe,
	article.single-entry .entry-content .entry-gallery {
		margin-bottom: 30px;
	}

	/* El sistema negociado tambien por debajo de 700px: aqui el hueco base es fijo
	   (30px, la regla de arriba), asi que extra y compacto se ponen a mano en vez de con
	   las variables. Sin esto, extra y compacto lucian igual que normal en movil */
	article.single-entry .entry-content > .asv-pb-extra,
	article.single-entry .entry-content > *:has( + .asv-pt-extra ) {
		margin-bottom: 45px;
	}

	article.single-entry .entry-content > .asv-pb-compacto:has( + .asv-pt-compacto ) {
		margin-bottom: var(--espacio-parrafo);
	}

	article.single-entry .entry-content .entry-text.text-intro p {
		margin-top: 15px;
		font-size: 1.5em;
	}

	article.single-entry .entry-content .entry-title.shortcode-title h3 {
		font-size: 1.3em;
	}

	.ressources .one_third,
	.ressources .one_third_last {
		width: 100%;
	}

	.ressources .one_third {
		border-bottom: 1px solid #ddd;
	}

	.ressources .one_third,
	.ressources .one_third_last {
		padding: 40px 0;
	}

	article.single-entry .entry-share h4 {
		font-size: 1.3em;
	}

	.ressources p {
		width: 80%;
		max-width: 300px;
		margin: 30px auto;
	}

	#aviso-cookies,
	.ressources-popup {
		padding: 15px 20px;
	}

	.portfolio-gallery a {
		width: 100%;
		margin-right: 0;
	}

	#comments p {
		width: 100%;
	}

	.wpcf7-form {
		width: 100%;
		max-width: 92%;
		padding: 0;
		margin: 0 auto;
	}

	.pswp__caption .pswp__caption__center {
		max-width: 300px !important;
		padding: 20px !important;
	}

	#footer-sidebar {
		margin-bottom: 20px;
	}

	.site-footer .site-info {
		padding-right: 40px;
	}

	.footer-widget.one_fourth,
	.footer-widget.one_fourth_last {
		display: inline-block;
		width: 100% !important;
		height: auto;
	}
}

@media  (max-width: 1000px) and (orientation: landscape) {
	.message-mobile {
		display: block;
	}
}

@media screen and (max-width: 350px) {
	section.hero_small .entry-featured-illustration {
		background-position: center 35%;
	}
}

/*--------------------------------------------------------------
# Login
--------------------------------------------------------------*/
.c-login,
.c-login__container,
.c-login__wrapper {
	width: 100%;
	height: 100vh;
	height: 100svh;
}

.c-login__wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-moz-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	background-color: #1823cb;
}
.c-login__form {
	width: 100%;
	max-width: 20em;
	padding: 1em;
}
.c-login__form-label {
	color: #fff;
}
.c-login__form-label > p {
	margin-bottom: 1em;
}
.c-login__form-message {
	color: orange;
}
.c-login__form-input[type=password] {
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: default;
	outline: 0;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	text-align: inherit;
	text-transform: inherit;
	display: block;
	width: 100%;
	margin-bottom: 1em;
	color: #fff;
	border-bottom: 1px solid #fff;
	cursor: text;
}
.c-login__form-input[type=password]:focus {
	color: #fff;
}
.c-login__form-submit[type=submit] {
	float: right;
	width: auto;
	margin: 1em auto 0;
	padding: -webkit-calc(1em / 2) 1em;
	padding: -moz-calc(1em / 2) 1em;
	padding: calc(1em / 2) 1em;
	color: #fff;
	font-size: 1em;
	border-radius: 5em;
	border: 1px solid #fff;
	cursor: pointer;
	background-color: transparent;
}

/* End */