/* MESH */
body { background-color: #000000; color: #fff; }
body .page-header,
body .footer,
body #final { background: transparent; color: #fff; }

body .footer a,
body #final a { color: #acc6ff !important; }
body .footer a:hover,
body #final a:hover { color: #fff !important; }

.page-type-proyectos .main-wrapper { padding: 0; }
.page-type-proyectos .page-header { padding: 6rem 0 0; }

.page-type-proyectos h1 {
	opacity: .4;
	text-shadow: none;
	font-size: calc(54px + (60 - 54) * (100vw - 300px) / (1000 - 300));
    line-height: 1.2em;
    text-align: center;
	}

.gradient-bg {
	position: fixed;
	overflow: hidden;
    width: 100%;
    height: 100%;
    filter: blur(80px) contrast(1.5)  saturate(1.2);
    opacity: 0.9;
	}

.orbe {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: lighten;
    animation: movimiento 8s infinite alternate ease-in-out;
	}

/* PREDETERMINADO */
.azul {
    width: 100vw;
    height: 100vw;
    background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 50%);
    top: -30%;
    left: 0%;
	}
.morado {
    width: 100vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 50%);
    bottom: 20%;
    right: -25%;
    animation-delay: -5s;
	}
.cian {
	width: 60vw;
	height: 70vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 50%);
	top: 30%;
	left: 50%;
	animation-delay: -2s;
	animation-duration: 14s;
	}

/* MESH */
.fondo--mesh .azul {
	background: radial-gradient(circle, #f5720b 0%, transparent 70%); /* Naranja */
	}
.fondo--mesh .morado {
	background: radial-gradient(circle, #ec4899 0%, transparent 70%); /* Rosado */
	}
.fondo--mesh .cian {
	background: radial-gradient(circle, #0083ff 0%, transparent 50%);
	}

/* ANIMACION */
@keyframes movimiento {
	0% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(10vw, 5vh) scale(1.4); }
	66% { transform: translate(-5vw, 15vh) scale(0.9); }
	100% { transform: translate(0, 0) scale(1); }
	}

/* FICHAS */
.contenido {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: normal;
	width: 100%;
	height: auto;
	gap: 20px;
	padding-top: 0;
	padding-bottom: 60px;
	}

.ficha {
	width: 30%;
    height: auto;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    overflow: hidden;
	}
	
.ficha img { opacity: .8; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ficha:hover img { opacity: 1; }
h2.portfolio { margin: 24px 0 0; }
.ficha h2.portfolio a { color: #fff; opacity: .7; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ficha:hover h2.portfolio a { opacity: 1; }
.views-field-field-tipo-de-proyecto { font-size: 14px; font-style: italic; color: #acc6ff; }
.ficha .views-field-title, .ficha .views-field-field-tipo-de-proyecto { padding: 0 12px; }
	
	.ficha:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(255, 255, 255, 0.05);
	}

.ficha::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent );
	transition: 0.6s;
    }

.ficha:hover::before { left: 100%; }


/* PAGER */
.pager__item a:hover, .pager__item.is-active a {
    background: #008DD0 !important;
}
.pager li>a, .pager li>span {
    border: 0px solid #ddd;
    border-radius: 10px;
}

	
@media (max-width: 1280px) {
	.contenido { width: 90%; margin: 0 auto; }
	}
@media (max-width: 960px) {
	.contenido { width: 85%; }
	.ficha { width: 46%; }
	}
@media (max-width: 800px) {
	h1 { display: none; }
	.contenido { width: 70%; }
	.ficha { width: 100%; }
	.gradient-bg {
    filter: blur(70px) contrast(1.5)  saturate(1.2);
	}
	.azul {
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 75%);
    top: -30%;
    left: 0%;
	}
.morado {
    width: 90vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 75%);
    bottom: 20%;
    right: -25%;
    animation-delay: -5s;
	}
.cian {
	width: 50vw;
	height: 60vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 75%);
	top: 40%;
	left: 60%;
	animation-delay: -2s;
	animation-duration: 14s;
	}
	}
	
@media (max-width: 360px) {
	.page-header { padding: 6rem 0 0; }
	.contenido { width: 90%; }
	.gradient-bg {
    filter: blur(60px) contrast(1.5)  saturate(1.2);
	}
.azul {
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 120%);
    top: 20%;
    left: -10%;
	}
.morado {
    width: 90vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 120%);
    bottom: 10%;
    right: -25%;
    animation-delay: -5s;
	}
.cian {
	width: 50vw;
	height: 60vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 120%);
	top: 40%;
	left: 60%;
	animation-delay: -2s;
	animation-duration: 14s;
	}
	}