/* =======================================================
   Syntra Dev — Futurista CLARO 2026
   ======================================================= */

:root {
	--c-primary: #6366f1;
	--c-cyan: #22d3ee;
	--grad: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
}

/* ---------- Fondo global claro con auroras de color ---------- */
body {
	background-color: #f7f9ff;
	color: #0f172a;
}
.wp-site-blocks { position: relative; isolation: isolate; }
.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(38rem 26rem at 8% -6%, rgba(99, 102, 241, .16), transparent 70%),
		radial-gradient(34rem 24rem at 100% 4%, rgba(34, 211, 238, .14), transparent 70%),
		radial-gradient(30rem 24rem at 50% 108%, rgba(129, 140, 248, .12), transparent 70%);
	pointer-events: none;
}
/* Rejilla finísima de fondo (toque HUD, muy sutil) */
.wp-site-blocks::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background-image:
		linear-gradient(rgba(99, 102, 241, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(99, 102, 241, .05) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 70%);
	mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 70%);
	pointer-events: none;
}

/* ---------- BARRA DE NAVEGACIÓN (sticky + cristal) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 249, 255, .72);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid rgba(99, 102, 241, .16);
	box-shadow: 0 8px 30px -20px rgba(30, 27, 75, .5);
}
/* Línea de acento neón bajo la barra */
.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .6), rgba(34, 211, 238, .6), transparent);
}
/* Logo (icono + nombre) */
.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	line-height: 1;
}
.site-logo-mark {
	display: block;
	transition: transform .3s ease;
}
.site-logo:hover .site-logo-mark { transform: rotate(180deg); }
.site-logo-text {
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	color: #0f172a;
}
.site-logo-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 7px;
	border-radius: 6px;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
	vertical-align: middle;
	background: var(--grad);
	color: #fff;
}
/* Sección "Nuestra marca" (Nosotros) */
.brand-meaning { display: flex; justify-content: center; margin-bottom: .5rem; }
.brand-meaning svg { filter: drop-shadow(0 10px 24px rgba(99, 102, 241, .35)); }
/* Enlaces del menú */
.site-header .wp-block-navigation { font-weight: 600; }
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: #1e293b;
	padding: 4px 2px;
	transition: color .18s ease;
	text-decoration: none !important;
}
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	text-decoration: none !important;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transition: right .22s ease;
}
.site-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: #4f46e5;
}
.site-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}
/* Quitar el "cuadro azul" al hacer clic en el menú / logo */
.site-header a,
.site-header .wp-block-navigation-item__content {
	-webkit-tap-highlight-color: transparent;
}
.site-header a:focus,
.site-header a:active,
.site-header .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation-item__content:active,
.site-header .wp-block-navigation-item__content:focus-within {
	outline: none;
	background-color: transparent !important;
	box-shadow: none !important;
}
/* Foco limpio solo para teclado (accesibilidad) */
.site-header a:focus-visible,
.site-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid rgba(99, 102, 241, .7);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- MENÚ MÓVIL (botón hamburguesa + overlay) ----------
   Botón hamburguesa: color y tamaño tocable por debajo de 600px. */
@media (max-width: 599.98px) {
	/* CLAVE: backdrop-filter convierte al header en "containing block" de los
	   elementos position:fixed, atrapando el overlay del menú dentro de los 92px
	   del header. En móvil lo quitamos (dejamos fondo casi opaco) para que el
	   menú abierto pueda cubrir toda la pantalla. El cristal se mantiene en escritorio. */
	.site-header {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: rgba(247, 249, 255, .94) !important;
	}
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		color: #0f172a !important;
		padding: 6px;
		border-radius: 10px;
	}
	.site-header .wp-block-navigation__responsive-container-open svg {
		width: 30px;
		height: 30px;
		fill: #0f172a;
	}
}
/* FIX del overlay + diseño: al core de WordPress le falta dar tamaño completo
   al menú abierto (salía a 330x60 px y los enlaces se aplastaban arriba).
   Lo forzamos a pantalla completa y le damos un acabado "tech" elegante. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box !important; /* sin esto, el padding suma al 100% y descentra el menú */
	width: 100% !important;
	height: 100% !important;
	padding: 5.5rem 1.5rem 4rem !important;
	/* Fondo oscuro profundo con dos auroras de marca (sobrio, no "arcoíris") */
	background-color: #0a0f1f !important;
	background-image:
		radial-gradient(42rem 30rem at 12% 6%, rgba(99, 102, 241, .42), transparent 62%),
		radial-gradient(38rem 30rem at 100% 100%, rgba(34, 211, 238, .26), transparent 60%),
		linear-gradient(160deg, #0b1226 0%, #0a0f1f 60%, #070b16 100%) !important;
}
/* Rejilla finísima tipo HUD (coherente con el hero) */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(99, 102, 241, .10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(99, 102, 241, .10) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 38%, #000 35%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 38%, #000 35%, transparent 78%);
	pointer-events: none;
}
/* Firma de marca discreta, anclada abajo */
.wp-block-navigation__responsive-container.is-menu-open::after {
	content: "SYNTRA DEV · Software a medida";
	position: absolute;
	left: 0; right: 0; bottom: 1.8rem;
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	color: rgba(199, 210, 254, .45);
	pointer-events: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	position: relative;
	z-index: 1;
	width: 100% !important;
	height: 100%;
	margin: 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	--navigation-layout-justification-setting: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: center !important;
	justify-content: center !important;
	gap: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	justify-content: center;
	text-align: center;
}
/* Enlaces: grandes, espaciados y con subrayado animado al centro */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	position: relative;
	padding: 4px 2px !important;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #e2e8f0 !important;
	transition: color .2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%; bottom: -7px;
	width: 0; height: 2px;
	transform: translateX(-50%);
	border-radius: 2px;
	background: linear-gradient(90deg, #6366f1, #22d3ee);
	transition: width .25s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: #67e8f9 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
	width: 38px;
}
/* Elemento de la página actual: texto en degradado + subrayado visible */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	background: linear-gradient(90deg, #a5b4fc, #67e8f9);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	border: 0 !important;
	outline: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content::after {
	width: 38px;
}
/* Icono de cerrar (X) en círculo de vidrio */
.wp-block-navigation__responsive-container-close {
	color: #fff !important;
	top: 1.6rem !important;
	right: 1.4rem !important;
	padding: 9px !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16) !important;
	transition: background .2s ease, transform .2s ease;
}
.wp-block-navigation__responsive-container-close:hover {
	background: rgba(255, 255, 255, .16);
	transform: rotate(90deg);
}
.wp-block-navigation__responsive-container-close svg { fill: #fff; width: 24px; height: 24px; }

/* ---------- HERO: banda oscura de impacto + grid + spotlight ---------- */
.dev-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(55rem 38rem at var(--mx, 50%) var(--my, 18%), rgba(99, 102, 241, .35), transparent 60%),
		linear-gradient(135deg, #0b1020, #1e1b4b 55%, #0b1020) !important;
	background-size: auto, 220% 220% !important;
	animation: heroShift 18s ease infinite;
	border-radius: 28px;
	margin: 1.2rem auto !important;
	max-width: 1340px;
	box-shadow: 0 40px 90px -40px rgba(30, 27, 75, .55);
}
@keyframes heroShift {
	0% { background-position: 0% 0%, 0% 50%; }
	50% { background-position: 0% 0%, 100% 50%; }
	100% { background-position: 0% 0%, 0% 50%; }
}
.dev-hero::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: 0;
	background-image:
		linear-gradient(rgba(34, 211, 238, .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 211, 238, .12) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 72%);
	pointer-events: none;
}
.dev-hero::after {
	content: "";
	position: absolute;
	width: 340px; height: 340px;
	right: -80px; bottom: -120px;
	border-radius: 50%;
	background: #22d3ee;
	filter: blur(90px);
	opacity: .4;
	z-index: 0;
	animation: floatB 16s ease-in-out infinite;
	pointer-events: none;
}
@keyframes floatB { 50% { transform: translate(-50px, -30px) scale(1.15); } }
.dev-hero > * { position: relative; z-index: 1; }

/* Título del hero con brillo neón en degradado */
.dev-hero h1 {
	background: linear-gradient(90deg, #ffffff, #a5b4fc, #67e8f9, #ffffff);
	background-size: 200% auto;
	color: #fff;
	text-shadow: 0 0 36px rgba(99, 102, 241, .45);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dev-hero h1 {
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: shine 7s linear infinite;
	}
}
@keyframes shine { to { background-position: 200% center; } }

/* Etiqueta superior del hero (eyebrow) */
.dev-hero .hero-eyebrow {
	margin: 0 0 .6rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #67e8f9 !important;
}

/* ---------- Encabezados de sección con barra neón ---------- */
.alignfull h2.has-text-align-center {
	position: relative;
	padding-bottom: 22px;
}
.alignfull h2.has-text-align-center::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 72px; height: 4px;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: 0 0 16px 1px rgba(99, 102, 241, .5);
}

/* ---------- TARJETAS: cristal claro + glow de color ---------- */
.dev-card {
	position: relative;
	border: 1px solid rgba(99, 102, 241, .14);
	border-radius: 18px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	overflow: hidden;
	box-shadow: 0 10px 30px -18px rgba(30, 27, 75, .25);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dev-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
	box-shadow: 0 0 14px rgba(99, 102, 241, .6);
}
.dev-card:hover {
	transform: translateY(-8px);
	border-color: rgba(34, 211, 238, .55);
	box-shadow: 0 30px 60px -26px rgba(99, 102, 241, .55);
}
.dev-card:hover::before { transform: scaleX(1); }

/* Icono de la tarjeta -> badge con degradado + glow */
.dev-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px; height: 62px;
	border-radius: 16px;
	background: var(--grad);
	font-size: 28px !important;
	line-height: 1;
	margin: 0 0 1rem;
	box-shadow: 0 0 24px -4px rgba(99, 102, 241, .7), 0 12px 26px -10px rgba(34, 211, 238, .6);
	transition: transform .25s ease, box-shadow .25s ease;
}
.dev-card:hover .dev-ico {
	transform: rotate(-6deg) scale(1.1);
	box-shadow: 0 0 34px 0 rgba(34, 211, 238, .8);
}

/* ---------- PÍLDORAS de tecnologías ---------- */
.tech-pill {
	display: inline-block;
	padding: 8px 17px;
	margin: 5px;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	color: #4f46e5;
	background: rgba(99, 102, 241, .09);
	border: 1px solid rgba(99, 102, 241, .28);
	transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
	cursor: default;
}
.tech-pill:hover {
	transform: translateY(-4px);
	background: var(--grad);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 20px -2px rgba(99, 102, 241, .7);
}

/* ---------- BOTONES neón ---------- */
.wp-block-button__link {
	font-weight: 700;
	padding: 15px 32px;
	color: #fff !important;
	background: var(--grad) !important;
	border: 0;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 12px 30px -8px rgba(99, 102, 241, .6);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-3px);
	filter: brightness(1.06);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 18px 40px -8px rgba(34, 211, 238, .8);
}
/* Botón "outline" como vidrio con borde neón (en el hero oscuro) */
.dev-hero .is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .06) !important;
	color: #fff !important;
	border: 1px solid rgba(34, 211, 238, .55) !important;
	box-shadow: 0 0 16px -6px rgba(34, 211, 238, .6);
}
.dev-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(34, 211, 238, .14) !important;
	border-color: var(--c-cyan) !important;
}
/* Botón outline en secciones claras */
.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .6) !important;
	color: #4f46e5 !important;
	border: 1px solid rgba(99, 102, 241, .4) !important;
	box-shadow: none;
}

/* ---------- Estadísticas (números neón + count-up) ---------- */
.dev-stat .wp-block-heading {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin: 0;
}

/* ---------- CARRUSEL DE PROYECTOS ---------- */
.dev-carousel { position: relative; max-width: 1200px; margin: 1rem auto 0; }
.dev-car-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: .5rem .25rem 1.5rem;
	scrollbar-width: none;
}
.dev-car-track::-webkit-scrollbar { display: none; }
.dev-slide {
	scroll-snap-align: start;
	flex: 0 0 330px;
	max-width: 330px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(99, 102, 241, .14);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 32px -20px rgba(30, 27, 75, .3);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dev-slide:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, .55);
	box-shadow: 0 30px 60px -26px rgba(99, 102, 241, .5);
}
.dev-mockup {
	aspect-ratio: 16 / 10;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dev-mockup .bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 30px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 12px;
	background: rgba(0, 0, 0, .16);
}
.dev-mockup .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .6); display: block; }
.dev-mockup .mock-emoji { font-size: 54px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); }
.mockup-1 { background: linear-gradient(135deg, #6366f1, #22d3ee); }
.mockup-2 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.mockup-3 { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }
.mockup-4 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.mockup-5 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.mockup-6 { background: linear-gradient(135deg, #10b981, #06b6d4); }
/* Imagen del proyecto en la diapositiva (real o placeholder) */
.dev-slide > a { display: block; text-decoration: none; }
.dev-slide-img {
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
	display: block;
}
.dev-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-slide-ph .bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 30px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 12px;
	background: rgba(0, 0, 0, .16);
}
.dev-slide-ph .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .6); display: block; }
.dev-slide-body { padding: 1.1rem 1.25rem 1.5rem; }
.dev-slide-body h3 a { color: inherit; text-decoration: none; }
.dev-slide-body h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.dev-slide-body .tech { margin: 0 0 .5rem; color: #4f46e5; font-weight: 600; font-size: .82rem; }
.dev-slide-body .desc { margin: 0; color: #64748b; font-size: .94rem; line-height: 1.5; }
.dev-car-btn {
	position: absolute;
	top: 34%;
	transform: translateY(-50%);
	z-index: 2;
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--grad);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 26px -8px rgba(99, 102, 241, .7);
	transition: filter .2s ease, transform .2s ease;
}
.dev-car-btn:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.06); }
.dev-car-btn.prev { left: -14px; }
.dev-car-btn.next { right: -14px; }
@media (max-width: 560px) {
	.dev-slide { flex-basis: 82%; max-width: 82%; }
	.dev-car-btn { display: none; }
}

/* ---------- LOGOS DE TECNOLOGÍAS ---------- */
.dev-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 2.5rem;
	margin-top: 1rem;
}
.dev-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	width: 84px;
	transition: transform .2s ease;
}
.dev-logo:hover { transform: translateY(-6px); }
.dev-logo img {
	width: 50px; height: 50px;
	filter: grayscale(40%);
	transition: filter .2s ease, transform .2s ease;
}
.dev-logo:hover img { filter: none; }
.dev-logo span { font-size: .8rem; font-weight: 600; color: #64748b; }

/* Logos de tecnología dentro de un proyecto (alineados a la izquierda) */
.proj-logos { justify-content: flex-start; align-items: center; gap: 1.3rem 1.7rem; margin-top: 1.1rem; }
.proj-logos .dev-logo { width: 70px; }
.proj-logos .dev-logo img { width: 46px; height: 46px; }
.tech-chip {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 15px;
	border-radius: 12px;
	font-weight: 600;
	font-size: .85rem;
	color: #4f46e5;
	background: rgba(99, 102, 241, .1);
	border: 1px solid rgba(99, 102, 241, .28);
}

/* ---------- Lista con visto en degradado (Nosotros) ---------- */
.dev-checklist { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.dev-checklist li {
	position: relative;
	padding-left: 2.1rem;
	margin: .85rem 0;
	font-weight: 600;
}
.dev-checklist li::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0; top: .05rem;
	width: 24px; height: 24px;
	border-radius: 7px;
	background: var(--grad);
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
	box-shadow: 0 6px 14px -4px rgba(99, 102, 241, .65);
}

/* ---------- BLOG: listado en tarjetas ---------- */
.blog-grid .wp-block-post {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(99, 102, 241, .14);
	border-radius: 18px;
	padding: 1.6rem 1.7rem;
	box-shadow: 0 12px 32px -22px rgba(30, 27, 75, .3);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-grid .wp-block-post:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, .5);
	box-shadow: 0 30px 60px -26px rgba(99, 102, 241, .5);
}
.blog-grid .wp-block-post-date { color: #6366f1; font-weight: 600; }
.blog-grid .wp-block-post-title { margin: .45rem 0 .6rem; line-height: 1.25; }
.blog-grid .wp-block-post-title a { color: #0f172a; text-decoration: none; }
.blog-grid .wp-block-post-title a:hover { color: #4f46e5; }
.blog-grid .wp-block-post-excerpt { color: #64748b; font-size: .95rem; line-height: 1.6; }
.blog-grid .wp-block-post-excerpt__more-link { display: inline-block; margin-top: .4rem; color: #4f46e5; font-weight: 600; text-decoration: none; }
.blog-grid .wp-block-query-pagination { margin-top: 2.5rem; gap: .4rem; }
.blog-grid .wp-block-query-pagination a, .blog-grid .wp-block-query-pagination .current { color: #4f46e5; font-weight: 600; }

/* ---------- PORTFOLIO: rejilla de proyectos (CPT) ---------- */
.proyectos-grid .wp-block-post-template { gap: 2rem; }
/* Igualar la altura de las tarjetas dentro de cada fila */
.proyectos-grid .wp-block-post-template > li { display: flex; }
.proyectos-grid .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(99, 102, 241, .14);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 32px -22px rgba(30, 27, 75, .3);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.proyectos-grid .wp-block-post::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--grad);
}
.proyectos-grid .wp-block-post:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, .5);
	box-shadow: 0 30px 60px -26px rgba(99, 102, 241, .5);
}
.proyectos-grid .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eef2ff;
	border-bottom: 1px solid rgba(99, 102, 241, .1);
}
.proyectos-grid .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.proyectos-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Las capturas de webs son verticales: mostramos la cabecera (lo reconocible) */
	object-position: top center;
	display: block;
	transition: transform .5s ease;
}
.proyectos-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.proyectos-grid .wp-block-post-title { margin: 1.3rem 1.3rem .55rem; line-height: 1.25; font-weight: 700; }
.proyectos-grid .wp-block-post-title a { color: #0f172a; text-decoration: none; }
.proyectos-grid .wp-block-post-title a:hover { color: #4f46e5; }
.proyectos-grid .wp-block-post-excerpt {
	margin: 0 1.3rem 1.2rem;
	color: #64748b;
	font-size: .94rem;
	line-height: 1.6;
	/* Recortar a 4 líneas para que todas las fichas midan lo mismo */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.proyectos-grid .wp-block-post-excerpt p { margin: 0; }
.proyectos-grid .wp-block-post-excerpt__more-link { color: #4f46e5; font-weight: 600; text-decoration: none; }
/* Enlace "Ver proyecto" fijo abajo, empujado por el espacio sobrante */
.proyectos-grid .wp-block-post-title { order: 2; }
.proyectos-grid .wp-block-post-featured-image { order: 1; }
.proyectos-grid .wp-block-post-excerpt { order: 3; }
.proyectos-grid .wp-block-post::after {
	content: "Ver proyecto \2192";
	order: 4;
	margin: auto 1.3rem 1.4rem;
	padding-top: .2rem;
	font-size: .9rem;
	font-weight: 600;
	color: #4f46e5;
	transition: gap .2s ease, color .2s ease;
}
.proyectos-grid .wp-block-post:hover::after { color: #06b6d4; }

/* ---------- RESPONSIVE: rejillas de proyectos y blog ----------
   WordPress fija 3 columnas (repeat(3,...)) en TODOS los tamaños.
   Aquí las adaptamos: 2 columnas en tablet y 1 en móvil. */
@media (max-width: 980px) {
	.proyectos-grid .wp-block-post-template,
	.blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 620px) {
	.proyectos-grid .wp-block-post-template,
	.blog-grid .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}
	/* Hero un poco más compacto en móvil */
	.dev-hero {
		margin: .6rem auto !important;
		border-radius: 20px;
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.proyectos-grid .wp-block-post-featured-image { aspect-ratio: 16 / 9; }
}

/* ---------- BLOG: artículo individual ---------- */
.blog-single .wp-block-post-title { margin: .3rem 0 1.2rem; }
.blog-single .wp-block-post-date { color: #6366f1; font-weight: 600; }
.blog-single .wp-block-post-content { font-size: 1.06rem; line-height: 1.78; }
.blog-single .wp-block-post-content h2 { margin-top: 2.2rem; margin-bottom: .6rem; }
.proj-shot { margin: 1.5rem 0; }
.proj-shot img {
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgba(99, 102, 241, .14);
	box-shadow: 0 20px 50px -28px rgba(30, 27, 75, .5);
}
.blog-single .wp-block-post-content h2 { margin-top: 2.4rem; }
.art-cta {
	margin-top: 2rem;
	padding: 1.3rem 1.5rem;
	border-radius: 14px;
	background: rgba(99, 102, 241, .07);
	border: 1px solid rgba(99, 102, 241, .2);
}

/* ---------- FORMULARIO (Contact Form 7) ---------- */
.wpcf7 { max-width: 640px; margin: 1.5rem auto 0; text-align: left; }
.cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.cf7-field { margin: 0 0 1.1rem; }
.cf7-field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .92rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid rgba(99, 102, 241, .22);
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 1rem;
	color: #0f172a;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: #94a3b8; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.cf7-submit { text-align: center; margin-top: .4rem; }
.wpcf7-submit {
	font-weight: 700;
	padding: 14px 34px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	color: #fff;
	background: var(--grad);
	box-shadow: 0 12px 30px -8px rgba(99, 102, 241, .6);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wpcf7-submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 40px -8px rgba(34, 211, 238, .8); }
.wpcf7 .wpcf7-not-valid-tip { color: #ef4444; font-size: .82rem; margin-top: .3rem; }
.wpcf7-response-output { border-radius: 10px; margin: 1.2rem 0 0 !important; padding: 12px 16px !important; font-size: .95rem; }
.wpcf7-spinner { margin: 0 0 0 .5rem; }
@media (max-width: 560px) { .cf7-grid { grid-template-columns: 1fr; } }

/* ---------- Texto apagado ---------- */
.is-muted, .is-muted * { color: #64748b !important; }
.dev-hero .is-muted, .dev-hero .is-muted * { color: rgba(255, 255, 255, .72) !important; }

/* ---------- ICONOS SOCIALES ---------- */
.dev-social-wrap { display: flex; justify-content: center; margin-top: 1rem; }
.dev-social { display: flex; gap: .7rem; flex-wrap: wrap; }
.dev-social a {
	width: 44px; height: 44px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.dev-social a svg { width: 20px; height: 20px; fill: currentColor; }
.dev-social a:hover {
	transform: translateY(-4px);
	background: var(--grad);
	border-color: transparent;
	box-shadow: 0 0 22px -3px rgba(34, 211, 238, .85);
}
/* Versión clara (sobre fondo blanco, p.ej. en Contacto) */
.dev-social.is-light a {
	color: #4f46e5;
	background: rgba(99, 102, 241, .08);
	border: 1px solid rgba(99, 102, 241, .25);
}
.dev-social.is-light a:hover {
	color: #fff;
	background: var(--grad);
	border-color: transparent;
}

/* ---------- Footer (banda oscura inferior) ---------- */
.dev-footer { position: relative; }
.dev-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--grad);
	box-shadow: 0 0 16px 1px rgba(99, 102, 241, .55);
}
.dev-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; transition: color .15s ease; }
.dev-footer a:hover { color: #fff; }
.dev-footer .wp-block-heading { margin: 0; }

/* ---------- Reveal al hacer scroll (clase la añade el JS) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(28px) scale(.99);
	filter: blur(5px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
	will-change: opacity, transform, filter;
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.wp-block-columns > .dev-card.reveal:nth-child(2) { transition-delay: .1s; }
.wp-block-columns > .dev-card.reveal:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
	.dev-hero, .dev-hero h1, .dev-hero::after { animation: none; }
	.reveal { opacity: 1; transform: none; filter: none; transition: none; }
}